二维码刷新

src/views/mall/components/details/order/pay.vue

@@ -22,7 +22,14 @@
         </v-chip>
       </v-chip-group>
       <div v-if="tip" style="text-align: center;" class="mt-2">{{ tip }}</div>
-      <div v-if="isQrCodePay && !remainder" style="text-align: center;" class="my-10">二维码失效，请重试！</div>
+      <div v-if="isQrCodePay && remainder<=0" style="text-align: center;" class="my-10">
+        二维码失效，请重试！
+        <!-- 二维码刷新 -->
+        <span @click="paySubmit(true)">
+          <v-icon size="20" style="color: var(--v-primary-base)">mdi-refresh</v-icon>
+          <span class="text-decoration-underline cursor-pointer mr-2" style="color: var(--v-primary-base)">刷新</span>
+        </span>
+      </div>
       <div>
         <!-- 钱包支付 -->
         <div v-if="isWalletPay" class="py-10" style="text-align: center;">
@@ -30,6 +37,7 @@
             <span>剩余现金：</span>
             <span style="color: var(--v-primary-base);">{{ balance ? (balance / 100.0).toFixed(2) : 0 }}</span>
           </div>
+          <!-- 余额刷新 -->
           <div class="mt-3" @click="updateAccountInfo">
             <v-icon size="20" style="color: var(--v-primary-base)">mdi-refresh</v-icon>
             <span class="text-decoration-underline cursor-pointer mr-2" style="color: var(--v-primary-base)">刷新</span>
@@ -44,7 +52,7 @@
         <!-- 模拟支付 -->
         <div v-if="payment === 'mock'" class="py-10"></div>
         <!-- 二维码支付 -->
-        <div v-if="isQrCodePay && remainder" style="text-align: center;">
+        <div v-if="isQrCodePay && remainder>0" style="text-align: center;">
           <QrCode :text="payQrCodeTxt" :width="170" style="margin: 0 auto;" />
           <div
             v-if="payQrCodeTxt"
@@ -126,7 +134,7 @@ onUnmounted(() => {
   if (timer.value) clearInterval(timer.value); timer.value = null
 })
 // 如果是点数支付的话走完payOrderSubmit之后即扣点数，如果是二维码支付的话只是生成二维码，这一步以后是轮询是否支付成功
-const paySubmit = async () => {
+const paySubmit = async (showLoading = false) => {
   if (!payment.value) return
   try {
     if (orderInfo.value) {
@@ -137,8 +145,10 @@ const paySubmit = async () => {
         channelCode: payment.value, // 支付渠道
         // returnUrl: , // 支付成功后，支付渠道跳转回当前页；再由当前页，跳转回 {@link returnUrl} 对应的地址
       }
+      if (showLoading) loading.value = true
       const res = await submitOrder(params)
       payQrCodeTxt.value = res?.displayContent || '' // 生成二维码内容
+      remainder.value = 1 
       
       initIntervalFun()
 
@@ -147,6 +157,8 @@ const paySubmit = async () => {
     }
   } catch (error) {
     console.log(error)
+  } finally {
+    if (showLoading) loading.value = false
   }
 }
 
@@ -263,13 +275,13 @@ const getPayStatus = async () => {
 
 // 倒计时
 const countdownTime = 60000 * 3 // 倒计时三分钟
-let remainder = true // number 初始化不能为假，否则不能显示二维码
+const remainder = ref(1) // number 初始化不能为假，否则不能显示二维码
 const remainderZhShow = ref('') // 倒计时展示
 
 const remainderTimer = ref(null)
 // 初始化倒计时
 const initIntervalFun = () => {
-  remainder = countdownTime // 初始倒计时时间
+  remainder.value = countdownTime // 初始倒计时时间
   if (remainderTimer.value) clearInterval(remainderTimer.value); remainderTimer.value = null // 每一次点击都清除上一个轮询
   // 倒计时计算
   remainderCalc()
@@ -280,10 +292,11 @@ const initIntervalFun = () => {
 }
 
 const remainderCalc = () => {
-  remainder -= 1000
-  remainderZhShow.value = formatDuration(remainder)
-  if (remainder <= 0) {
+  remainder.value -= 1000
+  remainderZhShow.value = formatDuration(remainder.value)
+  if (remainder.value <= 0) {
     tip.value = ''
+    if (timer.value) clearInterval(timer.value); timer.value = null
     emit('stopInterval') // 倒计时结束，关闭倒计时弹窗
   }
 }