shoot-miniprograms/src/components/PointRecord.vue

<script setup>
import { ref, onMounted, computed } from "vue";

const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
  onRemove: {
    type: Function,
    default: null,
  },
});
const bowOptions = ref({});
const targetOptions = ref({});
// 使用插槽自定义右侧按钮为图标，若需要文字按钮可恢复 rightOptions

// 根据是否传入 onRemove 来决定是否允许左滑
const canSwipe = computed(() => typeof props.onRemove === "function");

const toDetailPage = () => {
  const config = uni.getStorageSync("point-book-config");
  const bowType = config.bowOption.find(
    (item) => item.id === props.data.bowType
  );
  const bowtargetType = config.targetOption.find(
    (item) => item.id === props.data.targetType
  );
  uni.setStorageSync("point-book", {
    bowType,
    bowtargetType,
    distance: props.data.distance,
    amountGroup: props.data.groups,
  });
  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 :disabled="!canSwipe" @change="() => {}">
      <template v-slot:right v-if="canSwipe">
        <view class="swipe-right" @click="onSwipeActionClick">
          <image
            class="swipe-icon"
            src="../static/delete-white.png"
            mode="widthFix"
          />
        </view>
      </template>
      <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;
}

/* 右侧滑动按钮（自定义宽度与图标） */
.swipe-right {
  width: 120rpx; /* 这里可按需调整按钮宽度 */
  height: 100%;
  background-color: #ff7c7c;
  display: flex;
  align-items: center;
  justify-content: center;
}
.swipe-icon {
  width: 44rpx;
  height: 44rpx;
}
</style>