支付完成后二维码失效

src/components/personalRecharge/initPay.vue

@@ -6,7 +6,7 @@
     </div>
     <div class="d-flex align-end mt-3">
       <div class="code-left">
-        <QrCode :text="payQrCodeTxt" :disabled="!hideTimer" :width="170" @refresh="refreshQRCode" />
+        <QrCode :text="payQrCodeTxt" :disabled="!remainderTimer" :width="170" @refresh="refreshQRCode" />
       </div>
       <div class="code-right ml-5">
         <div class="price">
@@ -40,7 +40,7 @@
       style="color: var(--v-error-base);"
     >
       扫码支付时请勿离开
-      <span>{{ countdownShow/1000 + 's' }}</span>
+      <span v-if="remainderZhShow">{{ remainderZhShow }}</span>
     </div>
   </div>
 </template>
@@ -94,6 +94,8 @@ const payStatus = async () => {
       setTimeout(() => {
         // 更新点数(充值、发布职位)
         updateAccountInfo()
+        // 清除定时器
+        clearTimer()
         // 支付成功
         emit('paySuccess')
         getUnpaidOrderList() // 重新创建新的支付订单
@@ -208,32 +210,49 @@ const refreshQRCode =() => { // 刷新二维码
   getUnpaidOrderList()
 }
 
-const countdownTime = 60000 // 倒计时
-const countdownShow = ref(null) // 展示
+const countdownTime = 60000*5 // 倒计时五分钟
+let remainder = 0 // number
+const remainderZhShow = ref('') // 倒计时展示
 
-const hideTimer = ref(null)
+const remainderTimer = ref(null)
 // 初始化倒计时
 const initIntervalFun = () => {
-  countdownShow.value = countdownTime // 初始倒计时时间
-  if (hideTimer.value) clearInterval(hideTimer.value); hideTimer.value = null // 每一次点击都清除上一个轮询
-  hideTimer.value = setInterval(() => { showCountdown() }, 1000)
+  remainder = countdownTime // 初始倒计时时间
+  if (remainderTimer.value) clearInterval(remainderTimer.value); remainderTimer.value = null // 每一次点击都清除上一个轮询
+  remainderTimer.value = setInterval(() => { showCountdown() }, 1000)
 
   if (payStatusTimer.value) clearInterval(payStatusTimer.value); payStatusTimer.value = null
   payStatusTimer.value = setInterval(() => { payStatus() }, 2000) // 轮巡查询用户是否支付
 }
 
 const showCountdown = () => {
-  countdownShow.value -= 1000
-  if (countdownShow.value <= 0) clearTimer()
+  remainder -= 1000
+  remainderZhShow.value = formatDuration(remainder)
+  if (remainder <= 0) clearTimer()
 }
 
+const formatDuration = (remainder) => {
+  // 将毫秒转换为秒
+  var seconds = Math.floor(remainder / 1000)
+  // 计算分钟和剩余的秒数
+  var minutes = Math.floor(seconds / 60)
+  var remainingSeconds = seconds % 60
+  // 格式化分钟和秒数，确保秒数为两位数（如果小于10，则前面补0）
+  minutes = minutes.toString().padStart(2, '0')
+  remainingSeconds = remainingSeconds.toString().padStart(2, '0')
+  // 返回格式化的字符串
+  return `${minutes}分${remainingSeconds}秒`
+} 
+
+
 onUnmounted(() => {
   clearTimer()
 })
 
 const clearTimer = () => {
   if (payStatusTimer.value) clearInterval(payStatusTimer.value); payStatusTimer.value = null
-  if (hideTimer.value) clearInterval(hideTimer.value); hideTimer.value = null
+  if (remainderTimer.value) clearInterval(remainderTimer.value); remainderTimer.value = null
+  remainderZhShow.value = ''
   emit('stopInterval')
 }