添加打赏支付

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;
 }