shoot-miniprograms/src/components/PointRecord.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: 1rpx solid #fed847;
}
.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;
}
.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% - 11px);
  left: calc(50% - 30px);
}
.arrow-amount > text:nth-child(2) {
  color: #fff;
  font-size: 14px;
  margin: 0 3px;
}
</style>