160 lines
3.5 KiB
Vue
160 lines
3.5 KiB
Vue
<script setup>
|
||
import { ref, onMounted } from "vue";
|
||
|
||
const props = defineProps({
|
||
data: {
|
||
type: Object,
|
||
default: () => {},
|
||
},
|
||
onRemove: {
|
||
type: Function,
|
||
default: () => {},
|
||
},
|
||
});
|
||
const bowOptions = ref({});
|
||
const targetOptions = ref({});
|
||
const rightOptions = [
|
||
{ text: "删除", style: { backgroundColor: "#ff4d4f", color: "#fff" } },
|
||
];
|
||
|
||
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;
|
||
});
|
||
});
|
||
|
||
const onSwipeActionClick = () => {
|
||
if (typeof props.onRemove === "function") props.onRemove(props.data);
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<uni-swipe-action>
|
||
<uni-swipe-action-item
|
||
:right-options="rightOptions"
|
||
@click="onSwipeActionClick"
|
||
>
|
||
<view class="container" @click="toDetailPage">
|
||
<view class="left-part">
|
||
<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
|
||
>黄心率：{{ Number((data.yellowRate * 100).toFixed(2)) }}%</text
|
||
>
|
||
<text>10环数：{{ data.tenRings }}</text>
|
||
<text>平均：{{ data.averageRing }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="right-part">
|
||
<image src="../static/bow-target.png" mode="widthFix" />
|
||
<view class="arrow-amount">
|
||
<text>{{ data.actualTotalRing }}</text>
|
||
<text>/</text>
|
||
<text>{{ data.totalRing }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-swipe-action-item>
|
||
</uni-swipe-action>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.container {
|
||
background-color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
border-radius: 25rpx;
|
||
height: 200rpx;
|
||
border: 2rpx solid #fed848;
|
||
padding-left: 30rpx;
|
||
padding-right: 10rpx;
|
||
}
|
||
.container > view {
|
||
position: relative;
|
||
}
|
||
.left-part {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
height: calc(100% - 50rpx);
|
||
color: #333333;
|
||
}
|
||
.left-part > view {
|
||
width: 100%;
|
||
display: flex;
|
||
position: relative;
|
||
}
|
||
.left-part > view:nth-child(3) {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 20rpx;
|
||
color: #666;
|
||
}
|
||
.left-part > view:nth-child(3) > text {
|
||
margin-right: 10rpx;
|
||
}
|
||
.right-part > image {
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
}
|
||
.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;
|
||
}
|
||
.arrow-amount {
|
||
position: absolute;
|
||
background-color: #0009;
|
||
border-radius: 12px;
|
||
color: #fffc;
|
||
font-size: 24rpx;
|
||
line-height: 26px;
|
||
width: 64px;
|
||
display: flex;
|
||
justify-content: center;
|
||
top: calc(50% - 15px);
|
||
left: calc(50% - 32px);
|
||
}
|
||
.arrow-amount > text:nth-child(1) {
|
||
font-size: 30rpx;
|
||
color: #fff;
|
||
}
|
||
</style>
|