默认展示付款码，失效后点击刷新，如果付款了刷新二维码

src/components/QrCode/index.vue

@@ -224,7 +224,7 @@ const clickCode = () => {
 }
 
 const disabledClick = () => {
-  emit('disabled-click')
+  emit('refresh')
 }
 </script>
 

src/components/personalRecharge/index.vue

@@ -54,10 +54,10 @@
       </div>
     </div>
     <initPay
-      v-if="current"
+      v-if="itemInfo"
       :info="itemInfo"
-      @stopInterval="current = 0"
-      @paySuccess="current = 0"
+      @stopInterval="null"
+      @paySuccess="null"
     ></initPay>
   </div>
 </template>
@@ -89,6 +89,8 @@ const list = ref([])
 const getListData = async () => {
   const data = await getUserWalletRechargeList()
   list.value = data || []
+  // 默认选中
+  if (data?.length && data[0]) handleSelect(data[0], 0)
   // const end = { name: '自定义充值', payPrice: 100, custom: true, tip: '输入完成后请按Enter键确认' }
   // list.value = data ? [...data, end] : [end]
 }

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" :width="170" />
+        <QrCode :text="payQrCodeTxt" :disabled="!hideTimer" :width="170" @refresh="refreshQRCode" />
       </div>
       <div class="code-right ml-5">
         <div class="price">
@@ -96,6 +96,7 @@ const payStatus = async () => {
         updateAccountInfo()
         // 支付成功
         emit('paySuccess')
+        getUnpaidOrderList() // 重新创建新的支付订单
         // 返回指定页面
         if (route.fullPath === props.returnUrl) router.go(0)
         else if (props.returnUrl) router.push(props.returnUrl)
@@ -122,9 +123,7 @@ const paySubmit = async () => {
       const res = await payOrderSubmit(params)
       payQrCodeTxt.value = res?.displayContent || '二维码生成失败，请刷新再试。' // 生成二维码内容
 
-      if (payStatusTimer.value) clearInterval(payStatusTimer.value); payStatusTimer.value = null
-      payStatusTimer.value = setInterval(() => { payStatus() }, 2000) // 轮巡查询用户是否支付
-      stopIntervalFun()
+      initIntervalFun()
     }
   } catch (error) {
     console.log(error)
@@ -205,17 +204,22 @@ watch(
   { immediate: true },
   { deep: true }
 )
+const refreshQRCode =() => { // 刷新二维码
+  getUnpaidOrderList()
+}
 
 const countdownTime = 60000 // 倒计时
 const countdownShow = ref(null) // 展示
 
 const hideTimer = ref(null)
-const stopIntervalFun = () => {
+// 初始化倒计时
+const initIntervalFun = () => {
+  countdownShow.value = countdownTime // 初始倒计时时间
   if (hideTimer.value) clearInterval(hideTimer.value); hideTimer.value = null // 每一次点击都清除上一个轮询
-  // 初始化倒计时
-  countdownShow.value = countdownTime
-  // 倒计时展示
   hideTimer.value = setInterval(() => { showCountdown() }, 1000)
+
+  if (payStatusTimer.value) clearInterval(payStatusTimer.value); payStatusTimer.value = null
+  payStatusTimer.value = setInterval(() => { payStatus() }, 2000) // 轮巡查询用户是否支付
 }
 
 const showCountdown = () => {
@@ -227,11 +231,11 @@ onUnmounted(() => {
   clearTimer()
 })
 
- const clearTimer = () => {
+const clearTimer = () => {
   if (payStatusTimer.value) clearInterval(payStatusTimer.value); payStatusTimer.value = null
   if (hideTimer.value) clearInterval(hideTimer.value); hideTimer.value = null
   emit('stopInterval')
- }
+}
 
 </script>
 <style lang="scss" scoped>