liveh5-nuxt/app/pages/payment/result/index.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 () => {
  showLoadingToast({
    message: '加载中...',
    forbidClick: true,
  });
  
  try {
    const res = await orderQuery({
      orderNo: route.query.orderNo
    })
    
    if (res.status === 0) {
      resData.value = res.data
      
      // 如果状态为1或者超过5秒，停止轮询
      if (resData.value.status === 1 || Date.now() - startTime > 5000) {
        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>