From 9c66632135709e691909938e8409ccfb4ea7962b Mon Sep 17 00:00:00 2001
From: xingyy <64720302+Concur-max@users.noreply.github.com>
Date: Fri, 7 Mar 2025 19:37:21 +0800
Subject: [PATCH] =?UTF-8?q?feat(payment):=20=E6=94=AF=E4=BB=98=E7=BB=93?=
 =?UTF-8?q?=E6=9E=9C=E9=A1=B5=E9=9D=A2=E5=A2=9E=E5=8A=A0=E8=BD=AE=E8=AF=A2?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加定时器轮询订单状态，每秒查询一次
- 超过5秒未支付成功则停止轮询
- 支付成功时停止轮询并关闭加载提示
- 优化了页面加载逻辑，提升用户体验
---
 .../collectCode/payment/result/index.vue      | 90 ++++++++++++++-----
 1 file changed, 66 insertions(+), 24 deletions(-)

diff --git a/app/pages/collectCode/payment/result/index.vue b/app/pages/collectCode/payment/result/index.vue
index 1703b20..451b330 100644
--- a/app/pages/collectCode/payment/result/index.vue
+++ b/app/pages/collectCode/payment/result/index.vue
@@ -1,45 +1,87 @@
 <script setup>
 import {orderQuery} from "~/api/goods/index.js";
+import { showLoadingToast, closeToast } from 'vant';
+
 definePageMeta({
   i18n: 'payment.text1',
 })
+
 const router = useRouter()
-const {t}=useI18n();
+const {t} = useI18n();
 const route = useRoute();
-const resData=ref({})
-const res=await orderQuery({
-  orderNo:route.query.orderNo
+const resData = ref({})
+let timer = null
+let startTime = Date.now()
+
+const queryOrder = async () => {
+  // 首先检查是否已经超过5秒
+  if (Date.now() - startTime > 5000) {
+    clearInterval(timer)
+    closeToast()
+    return
+  }
+
+  showLoadingToast({
+    message:t('common.loading'),
+    forbidClick: true,
+  });
+
+  try {
+    const res = await orderQuery({
+      orderNo: route.query.orderNo
+    })
+
+    if (res.status === 0) {
+      resData.value = res.data
+
+      // 只在支付成功时停止轮询
+      if (resData.value.status === 1) {
+        clearInterval(timer)
+        closeToast()
+      }
+    }
+  } catch (error) {
+    clearInterval(timer)
+    closeToast()
+  }
+}
+
+// 立即执行一次
+await queryOrder()
+
+// 开始轮询
+timer = setInterval(async () => {
+  await queryOrder()
+}, 1000)
+
+// 组件卸载时清除定时器
+onUnmounted(() => {
+  if (timer) {
+    clearInterval(timer)
+    closeToast()
+  }
 })
-if (res.status===0){
-  resData.value=res.data
-}
-const statusLabel={
-  1:t('payment.text2'),
-  2:t('payment.text3'),
-  3:t('payment.text4'),
-  4:t('payment.text5'),
-}
-const goHome=()=>{
-  router.push('/')
+
+const statusLabel = {
+  1: t('payment.text2'),
+  2: t('payment.text3'),
+  3: t('payment.text4'),
+  4: t('payment.text5'),
 }
+
 </script>
 
 <template>
-  <div class="w-[100vw] h-screen-nav bg-[url('@/static/images/3532@2x.png')] bg-cover grow-1 flex flex-col items-center px-30px">
+  <div
+      class="w-[100vw] h-screen-nav bg-[url('@/static/images/3532@2x.png')] bg-cover grow-1 flex flex-col items-center px-30px">
     <div class="flex flex-col items-center mt-150px">
       <img v-if="resData.status===1" class="w-119px h-120px mb-36px" src="@/static/images/5554@2x1.png" alt="">
       <img v-else class="w-119px h-120px mb-36px" src="@/static/images/zu6021@2x.png" alt="">
-      <div class="text-#000 text-16px mb-25px">{{statusLabel[resData.status]}}!</div>
-      <div class="text-#999 text-16px">{{resData.currency}}{{resData.money}}</div>
+      <div class="text-#000 text-16px mb-25px">{{ statusLabel[resData.status] }}!</div>
+      <div class="text-#999 text-16px">{{ resData.currency }}{{ resData.money }}</div>
     </div>
-<!--    <div class="w-full mt-auto mb-40px">
-      <van-button type="primary" block @click="goHome">
-        回到首页
-      </van-button>
-    </div>-->
   </div>
 </template>
 
 <style scoped>
-
 </style>
\ No newline at end of file