143 lines
3.0 KiB
Vue
143 lines
3.0 KiB
Vue
<script setup>
|
||
import { ref, onMounted } from "vue";
|
||
|
||
const props = defineProps({
|
||
data: {
|
||
type: Object,
|
||
default: () => {},
|
||
},
|
||
});
|
||
const bowOptions = ref({});
|
||
const targetOptions = ref({});
|
||
|
||
const toDetailPage = () => {
|
||
uni.navigateTo({
|
||
url: `/pages/point-book-detail?id=${props.data.id}`,
|
||
});
|
||
};
|
||
|
||
onMounted(() => {
|
||
const result = uni.getStorageSync("point-book-config");
|
||
(result.bowOption || []).forEach((item) => {
|
||
bowOptions.value[item.id] = item;
|
||
});
|
||
(result.targetOption || []).forEach((item) => {
|
||
targetOptions.value[item.id] = item;
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<view class="container" @click="toDetailPage">
|
||
<view>
|
||
<view class="labels">
|
||
<view></view>
|
||
<text>{{
|
||
bowOptions[data.bowType] ? bowOptions[data.bowType].name : ""
|
||
}}</text>
|
||
<text>{{ data.distance }} 米</text>
|
||
<text>{{
|
||
targetOptions[data.targetType]
|
||
? targetOptions[data.targetType].name
|
||
: ""
|
||
}}</text>
|
||
</view>
|
||
<view>
|
||
<text>{{ data.createAt }}</text>
|
||
</view>
|
||
<view>
|
||
<text>黄心率：{{ data.yellowRate * 100 }}%</text>
|
||
<text>10环数：{{ data.tenRings }}</text>
|
||
<text>平均：{{ data.averageRing }}</text>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<image src="../static/bow-target.png" mode="widthFix" />
|
||
<view class="arrow-amount">
|
||
<text>共</text>
|
||
<text>{{ data.arrows * data.groups }}</text>
|
||
<text>箭</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.container {
|
||
background-color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
border-radius: 25rpx;
|
||
margin-bottom: 25rpx;
|
||
height: 200rpx;
|
||
border: 2rpx solid #FED848;
|
||
}
|
||
.container > view {
|
||
position: relative;
|
||
margin-left: 15px;
|
||
}
|
||
.container > view:first-child {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
height: calc(100% - 50rpx);
|
||
color: #333333;
|
||
}
|
||
.container > view:first-child > view {
|
||
width: 100%;
|
||
display: flex;
|
||
position: relative;
|
||
}
|
||
.container > view:first-child > view:nth-child(3) {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 20rpx;
|
||
color: #666;
|
||
}
|
||
.container > view:first-child > view:nth-child(3) > text {
|
||
margin-right: 10rpx;
|
||
}
|
||
.labels {
|
||
align-items: flex-end !important;
|
||
}
|
||
.labels > view:first-child {
|
||
position: absolute;
|
||
bottom: 0;
|
||
height: 10rpx;
|
||
background: #fee947;
|
||
border-radius: 5rpx;
|
||
width: 300rpx;
|
||
}
|
||
.labels > text {
|
||
font-size: 26rpx;
|
||
margin-right: 10px;
|
||
position: relative;
|
||
color: #333;
|
||
}
|
||
.container > view:last-child {
|
||
margin-right: 1vw;
|
||
}
|
||
.container > view:last-child > image {
|
||
width: 24vw;
|
||
}
|
||
.arrow-amount {
|
||
position: absolute;
|
||
background-color: #0009;
|
||
border-radius: 10px;
|
||
color: #fffc;
|
||
font-size: 12px;
|
||
line-height: 22px;
|
||
width: 60px;
|
||
display: flex;
|
||
justify-content: center;
|
||
top: calc(50% - 13px);
|
||
left: calc(50% - 30px);
|
||
}
|
||
.arrow-amount > text:nth-child(2) {
|
||
color: #fff;
|
||
font-size: 14px;
|
||
margin: 0 3px;
|
||
}
|
||
</style>
|