shoot-miniprograms/src/components/PointRecord.vue

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

const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
  longPress: {
    type: Function,
    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"
    @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>
      </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>
</template>

<style scoped>
.container {
  background-color: #fff;
  display: flex;
  align-items: center;
  border-radius: 25rpx;
  margin-bottom: 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;
}
.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>