改成左滑删除
This commit is contained in:
@@ -6,13 +6,16 @@ const props = defineProps({
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
longPress: {
|
||||
onRemove: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
const bowOptions = ref({});
|
||||
const targetOptions = ref({});
|
||||
const rightOptions = [
|
||||
{ text: "删除", style: { backgroundColor: "#ff4d4f", color: "#fff" } },
|
||||
];
|
||||
|
||||
const toDetailPage = () => {
|
||||
uni.navigateTo({
|
||||
@@ -29,45 +32,54 @@ onMounted(() => {
|
||||
targetOptions.value[item.id] = item;
|
||||
});
|
||||
});
|
||||
|
||||
const onSwipeActionClick = () => {
|
||||
if (typeof props.onRemove === "function") props.onRemove(props.data);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view
|
||||
class="container"
|
||||
@click="toDetailPage"
|
||||
@longpress="longPress(props.data)"
|
||||
>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
@@ -76,7 +88,6 @@ onMounted(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 25rpx;
|
||||
margin-bottom: 25rpx;
|
||||
height: 200rpx;
|
||||
border: 2rpx solid #fed848;
|
||||
padding-left: 30rpx;
|
||||
@@ -109,6 +120,7 @@ onMounted(() => {
|
||||
}
|
||||
.right-part > image {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
}
|
||||
.labels {
|
||||
align-items: flex-end !important;
|
||||
|
||||
Reference in New Issue
Block a user