切换更新二维码

src/components/personalRecharge/index.vue

@@ -23,7 +23,7 @@
       >
         <div class="d-flex flex-column align-center pb-5" style="position: relative;">  
           <div
-            class="my-4 mt-8 font-size-16 font-weight-bold titleColor"
+            class="my-4 mt-6 font-size-16 font-weight-bold titleColor"
             :style="{'color': current === (index + 1) ? '#ff4747' : '#000'}"
           >
             {{ item.name }}
@@ -41,10 +41,11 @@
             </span>
             <span class="font28" v-else>{{ item.payPrice }}</span>
           </div>   -->
-          <div class="dailyPrice font-size-12 mt-3">
+          <div class="dailyPrice font-size-12 mt-1">
             <span v-if="!item.custom">￥{{ payCalculation(item.payPrice, 'realPay') }}</span>
             <span v-else>{{ item.tip }}</span>
           </div>
+          <v-btn v-if="!item.custom" class="mt-5" size="small" color="error" variant="outlined" rounded >立即充值</v-btn>
           <div class="vip">
             <svg-icon v-if="current === (index+1)" name="diamond-active" size="50"></svg-icon>
             <svg-icon v-else name="diamond" size="50"></svg-icon>
@@ -111,12 +112,13 @@ const handleSelect = (item, index) => {
   itemInfo.value = item
   current.value = index + 1
   price.value = item.payPrice
+  // if (timer.value) clearInterval(timer.value); timer.value = null
   timer.value = setInterval(() => { clearIntervalFun() }, interval)
 }
 
 // 一段时间后清除二维码轮询
 const clearIntervalFun = () => {
-  // console.log('一段时间后清除二维码轮询', (count * interval))
+  console.log('一段时间后清除二维码轮询', (count * interval))
   count++
   if ((count * interval) >= 30000 && timer.value) {
     current.value = 0

src/components/personalRecharge/initPay.vue

@@ -46,12 +46,12 @@ import { payCalculation } from '@/utils/position'
 import { definePayTypeList, qrCodePay, walletPay } from '@/utils/payType'
 import { getEnableCodeList, payOrderSubmit, getOrderPayStatus } from '@/api/common'
 import { setWalletRecharge } from '@/api/recruit/personal/myWallet.js'
-import { onUnmounted, ref, nextTick } from 'vue'
+import { onUnmounted, ref, nextTick, watch } from 'vue'
 const emit = defineEmits(['payTypeChange', 'paySuccess'])
 const props = defineProps({
   info: {
     type: Object,
-    default: () => ({})
+    default: () => ({ id: ''})
   },
   appId: {
     type: Number,
@@ -190,7 +190,18 @@ const getCodeList = async () => {
     getUnpaidOrderList()
   }
 }
-getCodeList()
+// getCodeList()
+
+watch(
+  () => props.info.id, 
+  (newVal, oldVal) => {
+    if (!newVal) return
+    if (!oldVal && newVal) getCodeList()
+    if (oldVal && newVal) getUnpaidOrderList()
+  },
+  { immediate: true },
+  { deep: true }
+)
 
 </script>
 <style lang="scss" scoped>