From c0aa6e805808c4f492f4445c27205d0e4f4c4232 Mon Sep 17 00:00:00 2001
From: kron <kai_hong@126.com>
Date: Tue, 30 Sep 2025 10:53:06 +0800
Subject: [PATCH] =?UTF-8?q?UI=E8=BF=98=E5=8E=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/RewardUs.vue | 16 ++++++-
 src/pages/point-book.vue    | 85 ++++++++++++++++++++++++-------------
 2 files changed, 70 insertions(+), 31 deletions(-)

diff --git a/src/components/RewardUs.vue b/src/components/RewardUs.vue
index 33a6792..48e4a7f 100644
--- a/src/components/RewardUs.vue
+++ b/src/components/RewardUs.vue
@@ -2,6 +2,10 @@
 import { ref, reactive, watch } from "vue";
 
 import { donateAPI } from "@/apis";
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { config } = storeToRefs(store);
 
 const props = defineProps({
   show: {
@@ -13,7 +17,7 @@ const props = defineProps({
     default: null,
   },
 });
-const amounts = [5, 20, 50, 80, 100, 200];
+const amounts = ref([]);
 const selected = ref(null);
 const checked = ref(false);
 
@@ -27,7 +31,7 @@ const formData = reactive({
 const onPay = async (index) => {
   selected.value = index;
   const result = await donateAPI(
-    0.01,
+    amounts.value[index],
     formData.name,
     formData.account,
     formData.organization,
@@ -60,6 +64,14 @@ const onPay = async (index) => {
   }
 };
 
+watch(
+  () => config.value.donateAmount,
+  (value) => {
+    amounts.value = value || [];
+  },
+  { immediate: true }
+);
+
 watch(
   () => props.show,
   () => {
diff --git a/src/pages/point-book.vue b/src/pages/point-book.vue
index 11cf2f1..04490e0 100644
--- a/src/pages/point-book.vue
+++ b/src/pages/point-book.vue
@@ -31,6 +31,7 @@ const isIOS = computed(() => {
   return systemInfo.osName === "ios";
 });
 
+const loadImage = ref(true);
 const showModal = ref(false);
 const showTip = ref(false);
 const data = ref({
@@ -75,26 +76,29 @@ const loadData = async () => {
   else if (result2.checkInCount >= 5) hot = 3;
   else if (result2.checkInCount === 7) hot = 4;
   uni.$emit("update-hot", hot);
-  try {
-    const imagePath = await generateKDEHeatmapImage(
-      "heatMapCanvas",
-      rect.width,
-      rect.height,
-      result2.weekArrows
-        .filter((item) => item.x && item.y)
-        .map((item) => [item.x, item.y]),
-      {
-        range: [0, 1], // 适配0-1坐标范围
-        gridSize: 150, // 更高的网格密度，减少锯齿
-        bandwidth: 0.15, // 稍小的带宽，让热力图更细腻
-        showPoints: false, // 显示白色原始数据点
-      }
-    );
-    heatMapImageSrc.value = imagePath; // 存储生成的图片地址
-    console.log("热力图图片地址:", imagePath);
-  } catch (error) {
-    console.error("生成热力图图片失败:", error);
-  }
+  setTimeout(async () => {
+    try {
+      const imagePath = await generateKDEHeatmapImage(
+        "heatMapCanvas",
+        rect.width,
+        rect.height,
+        result2.weekArrows
+          .filter((item) => item.x && item.y)
+          .map((item) => [item.x, item.y]),
+        {
+          range: [0, 1], // 适配0-1坐标范围
+          gridSize: 120, // 更高的网格密度，减少锯齿
+          bandwidth: 0.15, // 稍小的带宽，让热力图更细腻
+          showPoints: false, // 显示白色原始数据点
+        }
+      );
+      heatMapImageSrc.value = imagePath; // 存储生成的图片地址
+      loadImage.value = false;
+      console.log("热力图图片地址:", imagePath);
+    } catch (error) {
+      console.error("生成热力图图片失败:", error);
+    }
+  }, 300);
 };
 
 watch(
@@ -153,7 +157,7 @@ onShareTimeline(() => {
         <view>
           <image src="../static/week-check.png" mode="widthFix" />
         </view>
-        <view>
+        <view :class="data.weeksCheckIn[0] ? 'checked' : ''">
           <image
             v-if="data.weeksCheckIn[0]"
             src="../static/checked-green2.png"
@@ -162,7 +166,7 @@ onShareTimeline(() => {
           <view v-else></view>
           <text>周一</text>
         </view>
-        <view>
+        <view :class="data.weeksCheckIn[1] ? 'checked' : ''">
           <image
             v-if="data.weeksCheckIn[1]"
             src="../static/checked-green2.png"
@@ -171,7 +175,7 @@ onShareTimeline(() => {
           <view v-else></view>
           <text>周二</text>
         </view>
-        <view>
+        <view :class="data.weeksCheckIn[2] ? 'checked' : ''">
           <image
             v-if="data.weeksCheckIn[2]"
             src="../static/checked-green2.png"
@@ -180,7 +184,7 @@ onShareTimeline(() => {
           <view v-else></view>
           <text>周三</text>
         </view>
-        <view>
+        <view :class="data.weeksCheckIn[3] ? 'checked' : ''">
           <image
             v-if="data.weeksCheckIn[3]"
             src="../static/checked-green2.png"
@@ -189,7 +193,7 @@ onShareTimeline(() => {
           <view v-else></view>
           <text>周四</text>
         </view>
-        <view>
+        <view :class="data.weeksCheckIn[4] ? 'checked' : ''">
           <image
             v-if="data.weeksCheckIn[4]"
             src="../static/checked-green2.png"
@@ -198,7 +202,7 @@ onShareTimeline(() => {
           <view v-else></view>
           <text>周五</text>
         </view>
-        <view>
+        <view :class="data.weeksCheckIn[5] ? 'checked' : ''">
           <image
             v-if="data.weeksCheckIn[5]"
             src="../static/checked-green2.png"
@@ -207,7 +211,7 @@ onShareTimeline(() => {
           <view v-else></view>
           <text>周六</text>
         </view>
-        <view>
+        <view :class="data.weeksCheckIn[6] ? 'checked' : ''">
           <image
             v-if="data.weeksCheckIn[6]"
             src="../static/checked-green2.png"
@@ -257,6 +261,9 @@ onShareTimeline(() => {
           mode="widthFix"
         />
         <image v-if="heatMapImageSrc" :src="heatMapImageSrc" mode="widthFix" />
+        <view v-if="loadImage" class="load-image">
+          <text>生成中...</text>
+        </view>
         <canvas
           canvas-id="heatMapCanvas"
           style="
@@ -269,7 +276,7 @@ onShareTimeline(() => {
           "
         />
       </view>
-      <view class="reward" v-if="data.totalArrow">
+      <view class="reward" v-if="data.totalArrow && !loadImage">
         <button hover-class="none" @click="showTip = true">
           <image src="../static/reward-us.png" mode="widthFix" />
         </button>
@@ -364,6 +371,7 @@ onShareTimeline(() => {
 .daily-signin > view:not(:first-child) {
   background: #f8f8f8;
   padding: 15rpx 8rpx;
+  box-sizing: border-box;
 }
 .daily-signin > view:not(:first-child) > image {
   width: 32rpx;
@@ -387,6 +395,12 @@ onShareTimeline(() => {
 .daily-signin > view:first-child > image {
   width: 100%;
 }
+.checked {
+  border: 1rpx solid #000;
+}
+.checked > text {
+  color: #333 !important;
+}
 .title {
   width: 100%;
   display: flex;
@@ -402,13 +416,26 @@ onShareTimeline(() => {
   width: calc(100vw - 70rpx);
   height: calc(100vw - 70rpx);
 }
-
 .heat-map > image {
   width: 100%;
+  height: 100%;
   position: absolute;
   top: 0;
   left: 0;
 }
+.load-image {
+  position: absolute;
+  width: 160rpx;
+  top: calc(50% - 65rpx);
+  left: calc(50% - 75rpx);
+  /* background: rgb(0 0 0 / 0.4); */
+  /* padding: 20rpx; */
+  color: #525252;
+  font-size: 20rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
 .reward {
   width: 100%;
   display: flex;