添加页面代码

2025-11-25 16:53:19 +08:00
parent 4d470ea44a
commit aecd2cea61
68 changed files with 5081 additions and 274 deletions
@@ -0,0 +1,141 @@
+<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/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>黄心率：{{ Number((data.yellowRate * 100).toFixed(2)) }}%</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;
+  height: 200rpx;
+  border: 2rpx solid #fed848;
+}
+.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;
+  color: #333;
+}
+.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% - 13px);
+  left: calc(50% - 30px);
+}
+.arrow-amount > text:nth-child(2) {
+  color: #fff;
+  font-size: 14px;
+  margin: 0 3px;
+}
+</style>