剩余支付时间倒计时

src/views/mall/components/confirm_order/pay.vue

@@ -10,11 +10,11 @@
         indeterminate
       ></v-progress-linear>
     </template>
-    <div>{{ countdown }}</div>
     <div style="color: var(--v-error-base); font-weight: bold; text-align: center;">
       <span class="font-size-13 mr-2">￥</span>
       <span class="font-size-40"> {{ orderInfo?.price ? orderInfo?.price / 100 : 0 }}</span>
     </div>
+    <div style="text-align: center; color: #bbbbbb;" class="mb-2 mt-1">{{ countdownText }}</div>
     <template v-if="payMethods?.length">
       <v-chip-group v-model="payment" selected-class="text-primary" column mandatory @update:modelValue="payTypeChange">
         <v-chip filter v-for="k in payMethods" :key="k.code" :value="k.code" class="mr-3" label>
@@ -132,7 +132,7 @@ const notEnoughMoney = computed(() => {
 const Destroyed = ref(false)
 onBeforeUnmount(() => {
   Destroyed.value = true // 避免执行paySubmit中关闭支付弹窗，造成setInterval一直存在
-  clear()
+  clearIntervalList()
 })
 
 // 提交支付订单 (提交后倒计时显示及支付状态轮巡)
@@ -182,7 +182,7 @@ const checkPayStatus = () => {
 const countdownInterval = ref(null)
 const countdownIntervalInit = () => {
   countdownInterval.value = setInterval(() => {
-    countdown.value
+    countdown()
   }, 1000)
 }
 
@@ -215,9 +215,7 @@ const setOrder = async () => {
 setOrder()
 
 // 清空setInterval
-function clear() {
-  remainder.value = 1
-  payQrCodeTxt.value = '' // 二维码内容
+function clearIntervalList() {
   if (countdownInterval.value) clearInterval(countdownInterval.value); countdownInterval.value = null
   if (timer.value) clearInterval(timer.value); timer.value = null
   if (remainderTimer.value) clearInterval(remainderTimer.value); remainderTimer.value = null
@@ -232,7 +230,10 @@ const payTypeChange = (value) => {
   isQrCodePay.value = qrCodePay.includes(payment.value)
   isWalletPay.value = walletPay.includes(payment.value)
   if (isQrCodePay.value) submitOrderFun() // 二维码支付时自动创建订单获取二维码内容展示
-  else { clear() }
+  else { 
+    remainder.value = 1
+    payQrCodeTxt.value = '' // 二维码内容
+  }
 }
 // 1.支付方式
 const setPayMethods = async () => {
@@ -273,12 +274,12 @@ import Snackbar from '@/plugins/snackbar'
 import { useRoute } from 'vue-router'; const route = useRoute()
 import { useRouter } from 'vue-router'; const router = useRouter()
 const getPayStatus = async () => {
-  if (Destroyed.value) return clear() // 用户关闭支付
+  if (Destroyed.value) return clearIntervalList() // 用户关闭支付
   try {
     const data = await getOrderPayStatus({ id: orderInfo.value.id || orderInfo.value.payOrderId })
     if ((data?.status - 0) === 10) {
       // 支付成功
-      clear()
+      clearIntervalList()
       setTimeout(() => {
         emit('paySuccess', { price: orderInfo.value.price })
         if (isWalletPay.value) updateAccountInfo() // 更新余额
@@ -310,7 +311,7 @@ const initIntervalFun = async () => {
 }
 
 const remainderCalc = () => {
-  if (Destroyed.value) return clear() // 用户关闭支付
+  if (Destroyed.value) return clearIntervalList() // 用户关闭支付
   remainder.value -= 1000
   remainderZhShow.value = formatDuration(remainder.value)
   if (remainder.value <= 0) { // 倒计时结束
@@ -334,14 +335,14 @@ const formatDuration = (remainder) => {
 }
 
 // 支付倒计时文案提示
-const countdown = computed(() => {
+const countdownText = ref('')
+const countdown = () => {
   const now = Date.now();
   const distance = orderInfo.value.expireTime - now
 
   if (distance < 0) {
-    clearInterval(countdownInterval.value)
-    router.go(0)
-    return '已过期'
+    if (countdownInterval.value) clearInterval(countdownInterval.value); countdownInterval.value = null
+    return '支付已过期'
   }
 
   const seconds = Math.floor((distance / 1000) % 60)
@@ -349,8 +350,8 @@ const countdown = computed(() => {
   const hours = Math.floor((distance / (1000 * 60 * 60)) % 24)
   // const days = Math.floor(distance / (1000 * 60 * 60 * 24))
 
-  return '剩余支付时间: ' + hours + ':' + minutes + ':' + seconds
-});
+  countdownText.value = '剩余支付时间: ' + hours + ':' + minutes + ':' + seconds
+}
 
 const open = () => {
   window.open('/personalRecharge')