UI还原

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,
   () => {

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,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);
+  setTimeout(async () => {
     try {
       const imagePath = await generateKDEHeatmapImage(
         "heatMapCanvas",
@@ -85,16 +87,18 @@ const loadData = async () => {
           .map((item) => [item.x, item.y]),
         {
           range: [0, 1], // 适配0-1坐标范围
-        gridSize: 150, // 更高的网格密度，减少锯齿
+          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;