完善页面

src/pages/point-book.vue

@@ -42,47 +42,37 @@ const toListPage = () => {
   });
 };
 
-// 热力图数据
-const heatMapData = ref([
-  { x: 150, y: 150, ring: 10, count: 5 },
-  { x: 140, y: 160, ring: 9, count: 5 },
-  { x: 160, y: 140, ring: 8, count: 3 },
-  { x: 130, y: 170, ring: 7, count: 2 },
-  { x: 170, y: 130, ring: 6, count: 1 },
-  { x: 120, y: 180, ring: 5, count: 5 },
-  { x: 180, y: 120, ring: 8, count: 4 },
-  { x: 110, y: 190, ring: 4, count: 3 },
-  { x: 190, y: 110, ring: 9, count: 2 },
-  { x: 145, y: 145, ring: 10, count: 1 },
-  { x: 155, y: 155, ring: 9, count: 5 },
-  { x: 125, y: 165, ring: 6, count: 4 },
-  { x: 175, y: 135, ring: 8, count: 3 },
-  { x: 135, y: 175, ring: 7, count: 2 },
-  { x: 165, y: 125, ring: 8, count: 1 },
-]);
-
 // 绘制热力图
-const drawHeatMap = (width, height) => {
+const drawHeatMap = (width, height, arrows) => {
   try {
     const ctx = uni.createCanvasContext("heatMapCanvas");
 
-    // ctx.setFillStyle("rgba(255, 255, 255, 0.4)");
-    // ctx.fillRect(0, 0, width, height);
-
+    let minCount = 0;
+    let maxCount = 0;
+    // 计算最大和最小频次
+    arrows.forEach((point) => {
+      if (point.count > maxCount) {
+        maxCount = point.count;
+      }
+      if (point.count < minCount) {
+        minCount = point.count;
+      }
+    });
     // 绘制热力点
-    heatMapData.value.forEach((point) => {
+    arrows.forEach((point) => {
+      if (point.x === 0 && point.y === 0) return;
       // 数量越多，半径越小（反比关系）
-      const radius = Math.max(8, 30 - point.count * 4);
+      const radius = 20;
 
       // 根据频次设置同一种颜色的5个深浅度
       let color;
-      if (point.count >= 5) {
+      if (point.count >= maxCount * 0.5) {
         color = "rgba(255, 232, 143, 0.7)"; // 最深 - 频次5次及以上
-      } else if (point.count >= 4) {
+      } else if (point.count >= maxCount * 0.4) {
         color = "rgba(255, 232, 143, 0.5)"; // 较深 - 频次4次
-      } else if (point.count >= 3) {
+      } else if (point.count >= maxCount * 0.3) {
         color = "rgba(255, 232, 143, 0.3)"; // 中等 - 频次3次
-      } else if (point.count >= 2) {
+      } else if (point.count >= maxCount * 0.2) {
         color = "rgba(255, 232, 143, 0.2)"; // 较浅 - 频次2次
       } else {
         color = "rgba(255, 232, 143, 0.1)"; // 最浅 - 频次1次
@@ -91,14 +81,8 @@ const drawHeatMap = (width, height) => {
       // 绘制圆形热力点
       ctx.setFillStyle(color);
       ctx.beginPath();
-      ctx.arc(point.x, point.y, radius, 0, 2 * Math.PI);
+      ctx.arc(point.x * width, point.y * height, radius, 0, 2 * Math.PI);
       ctx.fill();
-
-      // 绘制环数标签
-      // ctx.setFillStyle("#fff");
-      // ctx.setFontSize(14);
-      // ctx.setTextAlign("center");
-      // ctx.fillText(point.ring.toString(), point.x, point.y + 5);
     });
 
     ctx.draw();
@@ -112,10 +96,16 @@ onShow(async () => {
   list.value = result.slice(0, 3);
   const result2 = await getPointBookStatisticsAPI();
   data.value = result2;
+  let hot = 0;
+  if (result2.checkInCount > -3 && result2.checkInCount < 3) hot = 1;
+  else if (result2.checkInCount >= 3) hot = 2;
+  else if (result2.checkInCount >= 5) hot = 3;
+  else if (result2.checkInCount === 7) hot = 4;
+  uni.$emit("update-hot", hot);
   const rect = await getElementRect(".heat-map");
   // 延迟绘制热力图确保Canvas准备就绪
   setTimeout(() => {
-    drawHeatMap(rect.width, rect.height);
+    drawHeatMap(rect.width, rect.height, result2.weekArrows);
   }, 500);
 });
 
@@ -279,6 +269,11 @@ onShareTimeline(() => {
         />
         <canvas canvas-id="heatMapCanvas" style="width: 100%; height: 100%" />
       </view>
+      <!-- <view class="reward">
+        <button hover-class="none">
+          <image src="../static/reward-us.png" mode="widthFix" />
+        </button>
+      </view> -->
       <RingBarChart :data="data.ringRate" />
       <view class="title">
         <image src="../static/point-book-title2.png" mode="widthFix" />
@@ -316,7 +311,7 @@ onShareTimeline(() => {
   font-size: 22rpx;
   display: flex;
   flex-wrap: wrap;
-  padding: 25rpx;
+  padding: 25rpx 0;
   margin-bottom: 10rpx;
 }
 .statistics > view {
@@ -417,4 +412,17 @@ onShareTimeline(() => {
   height: 100%;
   z-index: 2;
 }
+.reward {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  margin-top: -100rpx;
+}
+.reward > button {
+  width: 100rpx;
+}
+.reward > button > image {
+  width: 100%;
+  height: 100%;
+}
 </style>