二维码加载动画

src/components/QrCode/index.vue

@@ -95,11 +95,13 @@ const initQrcode = async () => {
   }
 }
 
+const loading = ref(false)
 watch(
   () => renderText.value,
   (val) => {
-    if (!val) return
+    if (!val) return loading.value = true
     initQrcode()
+    loading.value = false
   },
   {
     deep: true,
@@ -227,19 +229,29 @@ const disabledClick = () => {
 </script>
 
 <template>
-  <div :class="[prefixCls, 'qrBox inline-block']" :style="wrapStyle">
-    <component :is="tag" ref="wrapRef" @click="clickCode" />
-    <div
-      v-if="disabled"
-      class="disabledBox"
-      @click="disabledClick"
-    >
-      <div class="disabledContent">
-        <div class="disabledText">{{ disabledText }}</div>
-        <v-icon size="24" class="ml-1">mdi-refresh</v-icon>
+  <v-card elevation="0" :loading="loading" :style="wrapStyle">
+    <template v-slot:loader="{ isActive }">
+      <v-progress-linear
+        :active="isActive"
+        color="var(--v-primary-base)"
+        height="1"
+        indeterminate
+      ></v-progress-linear>
+    </template>
+    <div :class="[prefixCls, 'qrBox inline-block']" :style="wrapStyle">
+      <component :is="tag" ref="wrapRef" @click="clickCode" />
+      <div
+        v-if="disabled"
+        class="disabledBox"
+        @click="disabledClick"
+      >
+        <div class="disabledContent">
+          <div class="disabledText">{{ disabledText }}</div>
+          <v-icon size="24" class="ml-1">mdi-refresh</v-icon>
+        </div>
       </div>
     </div>
-  </div>
+  </v-card>
 </template>
 
 <style lang="scss" scoped>

src/components/pay/index.vue

@@ -24,11 +24,11 @@
         </div>
       </div>
       <div v-if="payType !== '余额'" style="text-align: center;">
-        <QrCode text="132" :width="170" style="margin: 0 auto;" />
+        <QrCode :text="payCodeUrl" :width="170" style="margin: 0 auto;" />
         <div style="color: var(--v-error-base);">扫码支付时请勿离开</div>
       </div>
       <div class="mt-10" style="text-align: center;">
-        <v-btn class="buttons" color="primary" @click="emit('paySubmit', payType)">{{ payType === '余额' ? '确认' : '支付完成' }}</v-btn>
+        <v-btn class="buttons" color="primary" :loading="payLoading" @click="paySubmit">{{ payType === '余额' ? '确认' : '支付完成' }}</v-btn>
       </div>
     </div>
   </div>
@@ -52,9 +52,12 @@ const props = defineProps({
   needPrice: {
     type: [String, Number],
     default: 0
-  }
+  },
 })
 
+const payLoading = ref(false)
+const payCodeUrl = ref('')
+
 const payTypeList = ref([{ label: '账户余额支付', value: '余额' }])
 if (props.codeList?.length) {
   for (let index = 0; index < props.codeList.length; index++) {
@@ -78,6 +81,13 @@ const balanceNotEnough = computed(() => {
 const payTypeChange = (val) => {
   payType.value = val
   emit('payTypeChange', val, balanceNotEnough)
+  if (val !== '余额') {
+    setTimeout(() => { payCodeUrl.value = '测试测试测试测试测试测试测试测试' }, 1000)
+  }
+}
+
+const paySubmit = () => {
+  emit('paySubmit', payType.value)
 }
 // payTypeChange('余额')
 </script>

src/views/recruit/enterprise/positionManagement/components/add.vue

@@ -20,7 +20,6 @@
         <v-btn class="half-button" color="primary" @click="handleSave">{{ $t('common.release') }}</v-btn>
       </div>
     </v-card>
-
     <CtDialog :visible="recharge" :widthType="3" titleClass="text-h6" title="确认支付" :footer="false" submitText="确认" @close="handleClose" @submit="paySubmit">
       <!-- <Recharge ref="rechargeRef"></Recharge> -->
       <pay
@@ -28,7 +27,7 @@
         :params="payParams"
         :needPrice="needPrice"
         :codeList="codeList"
-        @payTypeChange="payTypeChange"
+        @payTypeChange="null"
         @paySubmit="paySubmit"
       ></pay>
     </CtDialog>
@@ -124,23 +123,18 @@ const saveEmit = async () => {
   }
 }
 
-const timer = ref(null)
+// const timer = ref(null)
+// const payLoading = ref(false)
 const payRef = ref()
 const paySubmit = async (payType) => {
   try {
     if (payType && payType !== '余额') {
-      // 打开轮巡
-      if (timer.value) clearInterval(timer.value); timer.value = null
-      timer.value = setInterval(async () => {
-        // 没有token时销毁定时器
-        // if (!getToken()) {
-        //   clearInterval(timer.value); timer.value = null
-        //   return
-        // }
-        // 执行
-      }, 3000)
+      // if (timer.value) clearInterval(timer.value); timer.value = null
+      // timer.value = setInterval(async () => { // 打开轮巡
+      //   console.log('setInterval->')
+      // }, 3000)
     } else {
-      if (timer.value) clearInterval(timer.value); timer.value = null
+      // if (timer.value) clearInterval(timer.value); timer.value = null
       saveEmit(submitParams)
     }
   } catch (error) {