代码优化

src/pages/index.vue

@@ -167,7 +167,7 @@ onShareTimeline(() => {
           </view>
         </view>
         <view class="ranking-section">
-          <image src="../static/rank-bg.png" mode="widthFix" />
+          <image src="https://static.shelingxingqiu.com/attachment/2025-09-25/dd1p9ci9v7frcrsxhj.png" mode="widthFix" />
           <button
             class="into-btn"
             @click="() => toPage('/pages/ranking')"

src/pages/point-book.vue

@@ -16,7 +16,7 @@ import {
   getPointBookStatisticsAPI,
 } from "@/apis";
 
-import { getElementRect } from "@/util";
+import { getElementRect, drawHeatMap } from "@/util";
 
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
@@ -45,55 +45,6 @@ const toListPage = () => {
   });
 };
 
-// 绘制热力图
-const drawHeatMap = (width, height, arrows) => {
-  try {
-    const ctx = uni.createCanvasContext("heatMapCanvas");
-
-    let minCount = 0;
-    let maxCount = 0;
-    // 计算最大和最小频次
-    arrows.forEach((point) => {
-      if (point.count > maxCount) {
-        maxCount = point.count;
-      }
-      if (point.count < minCount) {
-        minCount = point.count;
-      }
-    });
-    // 绘制热力点
-    arrows.forEach((point) => {
-      if (point.x === 0 && point.y === 0) return;
-      // 数量越多，半径越小（反比关系）
-      const radius = 20;
-
-      // 根据频次设置同一种颜色的5个深浅度
-      let color;
-      if (point.count >= maxCount * 0.5) {
-        color = "rgba(255, 232, 143, 0.7)"; // 最深 - 频次5次及以上
-      } else if (point.count >= maxCount * 0.4) {
-        color = "rgba(255, 232, 143, 0.5)"; // 较深 - 频次4次
-      } else if (point.count >= maxCount * 0.3) {
-        color = "rgba(255, 232, 143, 0.3)"; // 中等 - 频次3次
-      } else if (point.count >= maxCount * 0.2) {
-        color = "rgba(255, 232, 143, 0.2)"; // 较浅 - 频次2次
-      } else {
-        color = "rgba(255, 232, 143, 0.1)"; // 最浅 - 频次1次
-      }
-
-      // 绘制圆形热力点
-      ctx.setFillStyle(color);
-      ctx.beginPath();
-      ctx.arc(point.x * width, point.y * height, radius, 0, 2 * Math.PI);
-      ctx.fill();
-    });
-
-    ctx.draw();
-  } catch (error) {
-    console.error("绘制热力图失败:", error);
-  }
-};
-
 onShow(async () => {
   const result = await getPointBookListAPI(1);
   list.value = result.slice(0, 3);
@@ -272,7 +223,7 @@ onShareTimeline(() => {
         />
         <canvas canvas-id="heatMapCanvas" style="width: 100%; height: 100%" />
       </view>
-      <view class="reward">
+      <view class="reward" v-if="data.totalArrow">
         <button hover-class="none" @click="showTip = true">
           <image src="../static/reward-us.png" mode="widthFix" />
         </button>

src/pages/rank-list.vue

@@ -85,7 +85,11 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
       @scroll="onScrollView"
       :style="{ height: myData.userId ? '90vh' : '100vh' }"
     >
-      <image src="../static/rankbg.png" mode="widthFix" class="header-bg" />
+      <image
+        src="https://static.shelingxingqiu.com/attachment/2025-09-25/dd1p9b3wcrwnlnghiq.png"
+        mode="widthFix"
+        class="header-bg"
+      />
       <view class="rank-tabs">
         <view
           v-for="(rankType, index) in ['积分榜', 'MVP榜', '十环榜']"

src/util.js

@@ -445,3 +445,52 @@ export const calcRing = (bowtargetId, x, y, diameter) => {
   }
   return 0;
 };
+
+// 绘制热力图
+export const drawHeatMap = (width, height, arrows) => {
+  try {
+    const ctx = uni.createCanvasContext("heatMapCanvas");
+
+    let minCount = 0;
+    let maxCount = 0;
+    // 计算最大和最小频次
+    arrows.forEach((point) => {
+      if (point.count > maxCount) {
+        maxCount = point.count;
+      }
+      if (point.count < minCount) {
+        minCount = point.count;
+      }
+    });
+    // 绘制热力点
+    arrows.forEach((point) => {
+      if (point.x === 0 && point.y === 0) return;
+      // 数量越多，半径越小（反比关系）
+      const radius = 20;
+
+      // 根据频次设置同一种颜色的5个深浅度
+      let color = "rgba(255, 232, 143, 0.2)";
+      // if (point.count >= maxCount * 0.5) {
+      //   color = "rgba(255, 232, 143, 0.7)"; // 最深 - 频次5次及以上
+      // } else if (point.count >= maxCount * 0.4) {
+      //   color = "rgba(255, 232, 143, 0.5)"; // 较深 - 频次4次
+      // } else if (point.count >= maxCount * 0.3) {
+      //   color = "rgba(255, 232, 143, 0.3)"; // 中等 - 频次3次
+      // } else if (point.count >= maxCount * 0.2) {
+      //   color = "rgba(255, 232, 143, 0.2)"; // 较浅 - 频次2次
+      // } else {
+      //   color = "rgba(255, 232, 143, 0.1)"; // 最浅 - 频次1次
+      // }
+
+      // 绘制圆形热力点
+      ctx.setFillStyle(color);
+      ctx.beginPath();
+      ctx.arc(point.x * width, point.y * height, radius, 0, 2 * Math.PI);
+      ctx.fill();
+    });
+
+    ctx.draw();
+  } catch (error) {
+    console.error("绘制热力图失败:", error);
+  }
+};