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

- 添加定时器轮询订单状态,每秒查询一次
- 超过5秒未支付成功则停止轮询
- 支付成功时停止轮询并关闭加载提示
- 优化了页面加载逻辑,提升用户体验
This commit is contained in:
xingyy 2025-03-07 19:37:21 +08:00
parent 6a060147a2
commit 9c66632135

View File

@ -1,45 +1,87 @@
<script setup> <script setup>
import {orderQuery} from "~/api/goods/index.js"; import {orderQuery} from "~/api/goods/index.js";
import { showLoadingToast, closeToast } from 'vant';
definePageMeta({ definePageMeta({
i18n: 'payment.text1', i18n: 'payment.text1',
}) })
const router = useRouter() const router = useRouter()
const {t} = useI18n(); const {t} = useI18n();
const route = useRoute(); const route = useRoute();
const resData = ref({}) 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({ const res = await orderQuery({
orderNo: route.query.orderNo orderNo: route.query.orderNo
}) })
if (res.status === 0) { if (res.status === 0) {
resData.value = res.data 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()
}
})
const statusLabel = { const statusLabel = {
1: t('payment.text2'), 1: t('payment.text2'),
2: t('payment.text3'), 2: t('payment.text3'),
3: t('payment.text4'), 3: t('payment.text4'),
4: t('payment.text5'), 4: t('payment.text5'),
} }
const goHome=()=>{
router.push('/')
}
</script> </script>
<template> <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"> <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-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=""> <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>
<!-- <div class="w-full mt-auto mb-40px">
<van-button type="primary" block @click="goHome">
回到首页
</van-button>
</div>-->
</div> </div>
</template> </template>
<style scoped> <style scoped>
</style> </style>