计分本修改

src/pages/point-book-detail.vue

@@ -1,10 +1,11 @@
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref, onMounted, computed } from "vue";
 import { onLoad } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
 import BowTargetEdit from "@/components/BowTargetEdit.vue";
 import ScreenHint2 from "@/components/ScreenHint2.vue";
 import SButton from "@/components/SButton.vue";
+import RingBarChart from "@/components/RingBarChart.vue";
 
 import { getPointBookDetailAPI } from "@/apis";
 
@@ -13,7 +14,7 @@ const showTip = ref(false);
 const showTip2 = ref(false);
 const groups = ref([]);
 const data = ref({});
-const targetId = ref("");
+const targetId = ref(0);
 const targetSrc = ref("");
 const arrows = ref([]);
 
@@ -41,9 +42,18 @@ const goBack = () => {
   });
 };
 
+const ringRates = computed(() => {
+  const rates = new Array(12).fill(0);
+  arrows.value.forEach((item) => {
+    if (item.ring === -1) rates[11] += 1;
+    else rates[item.ring] += 1;
+  });
+  return rates.map((r) => r / arrows.value.length);
+});
+
 onLoad(async (options) => {
   if (options.id) {
-    const result = await getPointBookDetailAPI(options.id);
+    const result = await getPointBookDetailAPI(options.id || 164);
     const config = uni.getStorageSync("point-book-config");
     config.targetOption.some((item) => {
       if (item.id === result.targetType) {
@@ -54,7 +64,7 @@ onLoad(async (options) => {
     if (result.groups) {
       groups.value = result.groups;
       data.value = result.groups[0];
-      arrows.value = result.groups[0].list.filter((item) => item.x && item.y);
+      arrows.value = result.groups[0].list;
     }
   }
 });
@@ -134,8 +144,56 @@ onLoad(async (options) => {
           />
         </button>
       </view>
-      <BowTargetEdit :id="targetId" :src="targetSrc" :arrows="arrows" />
-      <view :style="{ marginTop: '20px' }">
+      <BowTargetEdit
+        :id="targetId"
+        :src="targetSrc"
+        :arrows="arrows.filter((item) => item.x && item.y)"
+        :editMode="false"
+      />
+      <view class="title-bar">
+        <view />
+        <text>环值分布</text>
+      </view>
+      <view :style="{ padding: '0 30rpx' }">
+        <RingBarChart :data="ringRates" />
+      </view>
+      <view class="title-bar" :style="{ marginTop: '30rpx' }">
+        <view />
+        <text>{{
+          selectedIndex === 0 ? "每组环数" : `第${selectedIndex}组环数`
+        }}</text>
+      </view>
+      <view class="ring-text-groups">
+        <view v-for="(item, index) in groups" :key="index">
+          <text v-if="selectedIndex === 0 && index !== 0">{{
+            `第${index}组`
+          }}</text>
+          <view
+            v-if="
+              (selectedIndex === 0 && index !== 0) ||
+              (selectedIndex !== 0 && index === selectedIndex)
+            "
+          >
+            <text
+              v-for="(arrow, index2) in item.list"
+              :key="index2"
+              :style="{
+                color:
+                  arrow.ring === 0 || arrow.ring === 10 ? '#FFA118' : '#666',
+              }"
+            >
+              {{
+                arrow.ring === 0
+                  ? "X"
+                  : arrow.ring === -1
+                  ? "M"
+                  : arrow.ring + "环"
+              }}
+            </text>
+          </view>
+        </view>
+      </view>
+      <view :style="{ marginBottom: '40rpx' }">
         <SButton :onClick="goBack" :rounded="50">关闭</SButton>
       </view>
       <ScreenHint2 :show="showTip || showTip2" :onClose="closeTip">
@@ -178,8 +236,7 @@ onLoad(async (options) => {
   border-radius: 10px;
   background-color: #fff;
   width: 24vw;
-  height: 13vw;
-  line-height: 13vw;
+  height: 90rpx;
   text-align: center;
   margin: 5px;
   margin-top: 0;
@@ -188,6 +245,7 @@ onLoad(async (options) => {
   position: relative;
 }
 .tab-bar > view > text {
+  line-height: 90rpx;
   transition: all 0.2s ease;
 }
 .tab-bar > view > image {
@@ -206,21 +264,24 @@ onLoad(async (options) => {
 .detail-data > view {
   border-radius: 10px;
   background-color: #fff;
-  margin-bottom: 10px;
-  padding: 12px;
+  margin-bottom: 20rpx;
+  padding: 18rpx 24rpx;
 }
 .detail-data > view > view {
   font-size: 13px;
   color: #999;
-  margin-bottom: 8px;
+  margin-bottom: 12rpx;
+}
+.detail-data > view > view > text {
+  word-break: keep-all;
 }
 .detail-data > view > text {
   font-weight: 500;
   color: #000;
 }
 .question-mark {
-  width: 15px;
-  height: 15px;
+  width: 28rpx;
+  height: 28rpx;
   margin-left: 3px;
 }
 .title-bar {
@@ -231,15 +292,15 @@ onLoad(async (options) => {
   color: #999;
 }
 .title-bar > view:first-child {
-  width: 5px;
-  height: 15px;
+  width: 8rpx;
+  height: 28rpx;
   border-radius: 10px;
   background-color: #fed847;
   margin-right: 7px;
   margin-left: 15px;
 }
-.title-bar > text {
-  margin-bottom: 2px;
+.title-bar > button {
+  height: 34rpx;
 }
 .tip-content {
   width: 100%;
@@ -258,4 +319,34 @@ onLoad(async (options) => {
   margin-top: 20px;
   opacity: 0.8;
 }
+.ring-text-groups {
+  display: flex;
+  flex-direction: column;
+  padding: 20rpx;
+  padding-top: 30rpx;
+  font-size: 24rpx;
+  color: #999999;
+}
+.ring-text-groups > view {
+  display: flex;
+  justify-content: center;
+}
+.ring-text-groups > view > text {
+  width: 82rpx;
+  text-align: center;
+  font-size: 27rpx;
+}
+.ring-text-groups > view > view {
+  flex: 1;
+  display: grid;
+  grid-template-columns: repeat(6, auto);
+  grid-gap: 10rpx;
+  margin-bottom: 30rpx;
+  margin-left: 20rpx;
+}
+.ring-text-groups > view > view > text {
+  width: 60rpx;
+  text-align: center;
+  margin-bottom: 10rpx;
+}
 </style>

src/pages/point-book.vue

@@ -31,6 +31,7 @@ const isIOS = computed(() => {
   return systemInfo.osName === "ios";
 });
 
+const loadImage = ref(false);
 const showModal = ref(false);
 const showTip = ref(false);
 const data = ref({
@@ -75,6 +76,7 @@ const loadData = async () => {
   else if (result2.checkInCount >= 5) hot = 3;
   else if (result2.checkInCount === 7) hot = 4;
   uni.$emit("update-hot", hot);
+  loadImage.value = true;
   const generateHeatmapAsync = async () => {
     const weekArrows = result2.weekArrows
       .filter((item) => item.x && item.y)
@@ -108,9 +110,11 @@ const loadData = async () => {
         }
       );
       heatMapImageSrc.value = finalPath;
+      loadImage.value = false;
       console.log("热力图图片地址:", finalPath);
     } catch (error) {
       console.error("生成热力图图片失败:", error);
+      loadImage.value = false;
     }
   };
 
@@ -282,6 +286,9 @@ onShareTimeline(() => {
           :src="heatMapImageSrc"
           mode="aspectFill"
         />
+        <view v-if="loadImage" class="load-image">
+          <text>生成中...</text>
+        </view>
         <canvas
           id="heatMapCanvas"
           canvas-id="heatMapCanvas"
@@ -445,6 +452,17 @@ onShareTimeline(() => {
   top: 0;
   left: 0;
 }
+.load-image {
+  position: absolute;
+  width: 160rpx;
+  top: calc(50% - 65rpx);
+  left: calc(50% - 75rpx);
+  color: #525252;
+  font-size: 20rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
 .reward {
   width: 100%;
   display: flex;

src/pages/ranking.vue

@@ -121,6 +121,9 @@ onShow(async () => {
   rankData.value = result;
   handleSelect(selectedIndex.value);
   seasonData.value = result.seasonList;
+  if (seasonData.value[0]) {
+    seasonName.value = seasonData.value[0].seasonName;
+  }
   updateData();
   showSeasonList.value = false;
 });
@@ -596,11 +599,13 @@ onShow(async () => {
   top: -44rpx;
   right: -30rpx;
   letter-spacing: 2px;
+  z-index: 10;
 }
 .season-list > view {
   display: flex;
   align-items: center;
   padding: 10px 20px;
+  word-break: keep-all;
 }
 .season-list > view > image {
   width: 12px;