update

src/components/Pay/Alipay.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {reactive, ref} from "vue";
+import {reactive, ref, watch} from "vue";
 import {Message} from "@arco-design/web-vue";
 import Api from "../../api/index.ts";
 import {QrcodeCanvas} from "qrcode.vue";
@@ -10,6 +10,8 @@ const {money} = defineProps({
         default: null
     }
 });
+const successShow = ref(false);
+let timer = null;
 const visible = ref(false);
 const qrInfo = reactive({});
 const open = () => {
@@ -20,13 +22,41 @@ const open = () => {
     visible.value = true;
     initQR();
 }
+let orderData = null;
+const checkOrder = (flag) => {
+    Api.merchant.checkOrder({
+        sn: qrInfo.out_trade_no,
+    }).then(({code}) => {
+        if (code === 1) {
+            Message.success('支付成功');
+            successShow.value = true;
+            clearInterval(timer);
+        }
+    }).catch(() => {
+        if (flag) {
+            Message.warning('未检测到支付');
+        }
+    })
+}
 
 const initQR = async () => {
+    clearInterval(timer);
     const {data: {data}} = await Api.merchant.rechargeOrderQR({
         money: money,
     });
     Object.assign(qrInfo, data);
+    timer = setInterval(() => {
+        checkOrder();
+    }, 1000);
 }
+
+watch(
+    () => visible.value,
+    (val) => {
+        if (!val) clearInterval(timer);
+    },
+    {deep: true}
+)
 </script>
 
 <template>
@@ -41,7 +71,7 @@ const initQR = async () => {
         title-align="start"
         title="支付宝支付"
         v-model:visible="visible">
-        <template v-if="true">
+        <template v-if="!successShow">
             <a-alert>平台提示：支付后未出现成功提示，点击【我已支付】刷新充值状态</a-alert>
 
             <div class="py-[24px] px-[20px]">
@@ -57,7 +87,7 @@ const initQR = async () => {
                         <icon-sync class="mr-[5px]"/>
                         点击刷新
                     </a-link>
-                    <a-button class="mx-auto mt-[20px]" type="primary">我已支付</a-button>
+                    <a-button class="mx-auto mt-[20px]" type="primary" @click="checkOrder(true)">我已支付</a-button>
                 </div>
 
                 <div class="mt-[20px] info mb-[40px]">
@@ -72,11 +102,11 @@ const initQR = async () => {
             <div class="py-[24px] px-[20px]">
                 <a-result status="success" title="充值成功">
                     <template #subtitle>
-                        支付宝付款￥200.00
+                        支付宝付款￥{{ money }}
                     </template>
                     <template #extra>
                         <a-space>
-                            <a-button type='primary'>确定</a-button>
+                            <a-button type='primary' @click="visible=false">确定</a-button>
                         </a-space>
                     </template>
                 </a-result>