bed0e6c4be
- 更新了 Checkout 页面的返回 URL，使用动态获取的窗口位置替代硬编码的 IP 地址 - 优化了支付结果页面的轮询逻辑： - 增加了对 5 秒轮询时间的检查，避免长时间轮询 - 调整了轮询停止的条件，只在支付成功时停止轮询 - 对支付结果页面的 HTML 结构进行了轻微的调整，提高了代码的可读性
94 lines
2.0 KiB
Vue
94 lines
2.0 KiB
Vue
<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 route = useRoute();
|
|
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: '加载中...',
|
|
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()
|
|
}
|
|
})
|
|
|
|
const statusLabel = {
|
|
1: t('payment.text2'),
|
|
2: t('payment.text3'),
|
|
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="flex flex-col items-center mt-150px">
|
|
<img class="w-119px h-120px mb-36px" src="@/static/images/5554@2x1.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>
|
|
<div class="w-full mt-auto mb-40px">
|
|
<van-button type="primary" block @click="goHome">
|
|
{{ t('payment.result.backToHome') }}
|
|
</van-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
</style> |