添加打赏支付

src/apis.js

@@ -488,3 +488,13 @@ export const getVIPDescAPI = async () => {
 export const getPointBookStatisticsAPI = async () => {
   return request("GET", `/v2/user/score/sheet/statistics`);
 };
+
+export const donateAPI = async (amount, name, phone, organizer, advice) => {
+  return request("POST", `/user/donate`, {
+    amount,
+    name,
+    phone,
+    organizer,
+    advice,
+  });
+};

src/components/RewardUs.vue

@@ -1,9 +1,16 @@
 <script setup>
-import { ref, reactive } from "vue";
+import { ref, reactive, watch } from "vue";
+
+import { donateAPI } from "@/apis";
+
 const props = defineProps({
-  src: {
-    type: String,
-    default: "",
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  onClose: {
+    type: Function,
+    default: null,
   },
 });
 const amounts = [5, 20, 50, 80, 100, 200];
@@ -16,9 +23,48 @@ const formData = reactive({
   suggestion: "",
 });
 
-const onPay = (index) => {
+const onPay = async (index) => {
   selected.value = index;
+  const result = await donateAPI(
+    0.01,
+    formData.name,
+    formData.account,
+    formData.organization,
+    formData.suggestion
+  );
+  const params = result.order.jsApi.params;
+  if (params) {
+    wx.requestPayment({
+      timeStamp: params.timeStamp,
+      nonceStr: params.nonceStr,
+      package: params.package,
+      paySign: params.paySign,
+      signType: "RSA",
+      async success(res) {
+        uni.showToast({
+          title: "感谢您的支持！",
+          icon: "none",
+        });
+        props.onClose();
+      },
+      fail(res) {
+        console.log("pay error", res);
+        uni.showToast({
+          title: "取消支付",
+          icon: "none",
+        });
+        props.onClose();
+      },
+    });
+  }
 };
+
+watch(
+  () => props.show,
+  () => {
+    selected.value = null;
+  }
+);
 </script>
 
 <template>
@@ -105,11 +151,12 @@ const onPay = (index) => {
   display: flex;
   align-items: center;
   justify-content: flex-start;
+  margin-top: 20rpx;
 }
 .container > view:nth-child(3) > image {
   width: 32rpx;
   height: 32rpx;
-  margin-right: 10rpx;
+  margin: 0 10rpx;
 }
 .container > view:nth-child(3) > text {
   font-size: 24rpx;
@@ -139,7 +186,7 @@ const onPay = (index) => {
   border: 1rpx solid #fed848;
   height: 40rpx;
   line-height: 40rpx;
-  padding: 10rpx;
+  padding: 10rpx 20rpx;
   font-size: 30rpx;
   margin-right: 10rpx;
 }
@@ -149,7 +196,7 @@ const onPay = (index) => {
   border: 1rpx solid #fed848;
   height: 100rpx;
   line-height: 40rpx;
-  padding: 10rpx;
+  padding: 10rpx 20rpx;
   font-size: 30rpx;
   margin-right: 10rpx;
 }

src/pages/point-book.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted, onBeforeUnmount } from "vue";
+import { ref, computed, onMounted, onBeforeUnmount, watch } from "vue";
 import { onShow, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
 import PointRecord from "@/components/PointRecord.vue";
@@ -32,7 +32,6 @@ const isIOS = computed(() => {
 const showModal = ref(false);
 const showTip = ref(false);
 const data = ref({
-  yellowRate: 0,
   weeksCheckIn: [],
 });
 
@@ -45,7 +44,21 @@ const toListPage = () => {
   });
 };
 
-onShow(async () => {
+const onSignin = () => {
+  showModal.value = true;
+};
+
+const startScoring = () => {
+  if (user.value.id) {
+    uni.navigateTo({
+      url: "/pages/point-book-create",
+    });
+  } else {
+    showModal.value = true;
+  }
+};
+
+const loadData = async () => {
   const result = await getPointBookListAPI(1);
   list.value = result.slice(0, 3);
   const result2 = await getPointBookStatisticsAPI();
@@ -61,21 +74,18 @@ onShow(async () => {
   setTimeout(() => {
     drawHeatMap(rect.width, rect.height, result2.weekArrows);
   }, 500);
-});
-
-const onSignin = () => {
-  showModal.value = true;
 };
 
-const startScoring = () => {
-  if (user.value.id) {
-    uni.navigateTo({
-      url: "/pages/point-book-create",
-    });
-  } else {
-    showModal.value = true;
+watch(
+  () => user.value.id,
+  (id) => {
+    if (id) loadData();
   }
-};
+);
+
+onShow(async () => {
+  if (user.value.id) loadData();
+});
 
 onMounted(async () => {
   uni.$on("point-book-signin", onSignin);
@@ -188,23 +198,27 @@ onShareTimeline(() => {
       </view>
       <view class="statistics">
         <view>
-          <text>{{ data.todayTotalArrow }}</text>
+          <text>{{ data.todayTotalArrow || "-" }}</text>
           <text>今日射箭（箭）</text>
         </view>
         <view>
-          <text>{{ data.totalArrow }}</text>
+          <text>{{ data.totalArrow || "-" }}</text>
           <text>累计射箭（箭）</text>
         </view>
         <view>
-          <text>{{ data.totalDay }}</text>
+          <text>{{ data.totalDay || "-" }}</text>
           <text>已训练天数（天）</text>
         </view>
         <view>
-          <text>{{ data.averageRing }}</text>
+          <text>{{ data.averageRing || "-" }}</text>
           <text>平均环数（箭）</text>
         </view>
         <view>
-          <text>{{ Number(data.yellowRate * 100).toFixed(2) }}</text>
+          <text>{{
+            data.yellowRate !== undefined
+              ? Number(data.yellowRate * 100).toFixed(2)
+              : "-"
+          }}</text>
           <text>黄心率（%）</text>
         </view>
         <view>
@@ -229,7 +243,7 @@ onShareTimeline(() => {
         </button>
       </view>
       <RingBarChart :data="data.ringRate" />
-      <view class="title">
+      <view class="title" v-if="user.id">
         <image src="../static/point-book-title2.png" mode="widthFix" />
       </view>
       <block v-for="(item, index) in list" :key="index">
@@ -249,7 +263,7 @@ onShareTimeline(() => {
       <Signin :onClose="() => (showModal = false)" :noBg="true" />
     </SModal>
     <ScreenHint2 :show="showTip" :onClose="() => (showTip = false)">
-      <RewardUs />
+      <RewardUs :show="showTip" :onClose="() => (showTip = false)" />
     </ScreenHint2>
   </Container>
 </template>