完善页面

src/components/Header.vue

@@ -59,10 +59,15 @@ const loading = ref(false);
 const showLoader = ref(false);
 const pointBook = ref(null);
 const showProgress = ref(false);
+const heat = ref(0);
 const updateLoading = (value) => {
   loading.value = value;
 };
 
+const updateHot = (value) => {
+  heat.value = value;
+};
+
 onMounted(() => {
   const pages = getCurrentPages();
   const currentPage = pages[pages.length - 1];
@@ -75,13 +80,15 @@ onMounted(() => {
   ) {
     showLoader.value = true;
   }
-  uni.$on("update-header-loading", updateLoading);
   if (currentPage.route === "pages/team-battle") {
     showProgress.value = true;
   }
+  uni.$on("update-header-loading", updateLoading);
+  uni.$on("update-hot", updateHot);
 });
 onBeforeUnmount(() => {
   uni.$off("update-header-loading", updateLoading);
+  uni.$off("update-hot", updateHot);
 });
 </script>
 
@@ -110,6 +117,11 @@ onBeforeUnmount(() => {
             borderColor="#333"
           />
           <text>{{ user.nickName }}</text>
+          <image
+            v-if="heat"
+            :src="`../static/hot${heat}.png`"
+            mode="widthFix"
+          />
         </block>
         <block v-else>
           <image src="../static/user-icon.png" mode="widthFix" />
@@ -248,12 +260,15 @@ onBeforeUnmount(() => {
   align-items: center;
   justify-content: flex-start;
 }
-.user-header > image {
+.user-header > image:first-child {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   border: 2rpx solid #333;
 }
+.user-header > image:last-child {
+  width: 36rpx;
+}
 .user-header > text:nth-child(2) {
   font-weight: 500;
   font-size: 30rpx;

src/components/RingBarChart.vue

@@ -42,14 +42,15 @@ const ringText = (ring) => {
 <template>
   <view class="container">
     <view>
-      <view
-        v-for="(b, index) in bars"
-        :key="index"
-        :style="{
-          background: barColor(b.rate),
-          height: b.rate * 120 + 'rpx',
-        }"
-      >
+      <view v-for="(b, index) in bars" :key="index">
+        <text v-if="b && b.rate > 0.1">{{ Number(b.rate.toFixed(1)) }}%</text>
+        <view
+          :style="{
+            background: barColor(b.rate),
+            height: b.rate * 120 + 'rpx',
+          }"
+        >
+        </view>
       </view>
     </view>
     <view>
@@ -71,6 +72,13 @@ const ringText = (ring) => {
   min-height: 50rpx;
 }
 .container > view:first-child > view {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 18rpx;
+  color: #333;
+}
+.container > view:first-child > view > view {
   transition: all 0.3s ease;
   width: 5vw;
   height: 0;

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>