105 lines
2.5 KiB
Vue
105 lines
2.5 KiB
Vue
<script setup>
|
||
import { ref } from "vue";
|
||
import { onLoad } from "@dcloudio/uni-app";
|
||
import Container from "@/components/Container.vue";
|
||
import Avatar from "@/components/Avatar.vue";
|
||
import BowTarget from "@/components/BowTarget.vue";
|
||
import ScorePanel from "@/components/ScorePanel.vue";
|
||
import { getPractiseAPI } from "@/apis";
|
||
import useStore from "@/store";
|
||
import { storeToRefs } from "pinia";
|
||
const store = useStore();
|
||
const { user } = storeToRefs(store);
|
||
const arrows = ref([]);
|
||
const total = ref(0);
|
||
|
||
onLoad(async (options) => {
|
||
if (!options.id) return;
|
||
const result = await getPractiseAPI(options.id || 176);
|
||
arrows.value = result.details;
|
||
total.value = result.details.length;
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<Container title="靶纸">
|
||
<view class="container">
|
||
<!-- <view class="header">
|
||
<view>
|
||
<Avatar :src="user.avatar" frame />
|
||
<view>
|
||
<text>{{ user.nickName }}</text>
|
||
<text>{{ user.lvlName }}</text>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
<view :style="{ marginBottom: '20px' }">
|
||
<BowTarget :scores="arrows" />
|
||
</view>
|
||
<view class="desc">
|
||
<text>{{ arrows.length }}</text>
|
||
<text>支箭，共</text>
|
||
<text>{{ arrows.reduce((a, b) => a + b.ring, 0) }}</text>
|
||
<text>环</text>
|
||
</view>
|
||
<ScorePanel
|
||
:completeEffect="false"
|
||
:rowCount="total === 12 ? 6 : 9"
|
||
:total="total"
|
||
:arrows="arrows"
|
||
:margin="arrows.length === 12 ? 4 : 1"
|
||
:fontSize="arrows.length === 12 ? 25 : 22"
|
||
/>
|
||
</view>
|
||
</Container>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.container {
|
||
width: 100%;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: calc(100% - 20px);
|
||
padding: 10px;
|
||
}
|
||
.header > view:first-child {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 10px;
|
||
}
|
||
.header > view:first-child > view:last-child {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
margin-left: 10px;
|
||
color: #fff;
|
||
}
|
||
.header > view:first-child > view:last-child > text:last-child {
|
||
font-size: 10px;
|
||
color: #fff9;
|
||
background-color: #5f51ff;
|
||
padding: 2px 5px;
|
||
border-radius: 10px;
|
||
margin-top: 5px;
|
||
}
|
||
.header > view:last-child > image {
|
||
width: 40px;
|
||
}
|
||
.desc {
|
||
color: #fff;
|
||
margin-bottom: 40px;
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
.desc > text:nth-child(1),
|
||
.desc > text:nth-child(3) {
|
||
color: #fed847;
|
||
}
|
||
</style>
|