feat(payment): 支付结果页面增加轮询功能

- 添加定时器轮询订单状态，每秒查询一次
- 超过5秒未支付成功则停止轮询
- 支付成功时停止轮询并关闭加载提示
- 优化了页面加载逻辑，提升用户体验

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 resData = ref({})
-const res=await orderQuery({
+let timer = null
-  orderNo:route.query.orderNo
+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'),
-const statusLabel={
+  2: t('payment.text3'),
-  1:t('payment.text2'),
+  3: t('payment.text4'),
-  2:t('payment.text3'),
+  4: t('payment.text5'),
-  3:t('payment.text4'),
-  4:t('payment.text5'),
-}
-const goHome=()=>{
-  router.push('/')
 }
+
 </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-#000 text-16px mb-25px">{{ statusLabel[resData.status] }}!</div>
-      <div class="text-#999 text-16px">{{resData.currency}}{{resData.money}}</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>