样式修改

src/components/pay/index.vue

@@ -16,41 +16,44 @@
       <span class="font-size-13">￥</span>
       <span class="font-size-30">{{ cost }}</span>
     </div>
-    <v-chip-group v-model="payType" selected-class="text-primary" mandatory @update:modelValue="payTypeChange">
-      <v-chip filter v-for="k in payTypeList" :key="k.code" :value="k.code" class="mr-3" label>
-        {{ k.name }}
-        <svg-icon v-if="k.icon" class="ml-1" :name="k.icon" :size="k.size"></svg-icon>
-      </v-chip>
-    </v-chip-group>
-    <div class="pa-5">
-      <!-- 支付 -->
-      <div v-if="isWalletPay">
-        <div>
-          <span >{{ $t('enterprise.account.accountBalances') }}：</span>
-          <span style="color: var(--v-primary-base);">{{ balance }}</span>
+    <template v-if="payTypeList?.length">
+      <v-chip-group v-model="payType" selected-class="text-primary" mandatory @update:modelValue="payTypeChange">
+        <v-chip filter v-for="k in payTypeList" :key="k.code" :value="k.code" class="mr-3" label>
+          {{ k.name }}
+          <svg-icon v-if="k.icon" class="ml-1" :name="k.icon" :size="k.size"></svg-icon>
+        </v-chip>
+      </v-chip-group>
+      <div v-if="tip" style="text-align: center;" class="mt-2">{{ tip }}</div>
+      <div>
+        <!-- 支付 -->
+        <div v-if="isWalletPay" class="py-10" style="text-align: center;">
+          <div>
+            <span >{{ $t('enterprise.account.accountBalances') }}：</span>
+            <span style="color: var(--v-primary-base);">{{ balance }}</span>
+          </div>
+          <div class="my-3" v-if="balanceNotEnough">
+            <!-- <v-icon color="warning">mdi-information</v-icon> -->
+            <span class="color-warning">{{ props.params?.txt || '当前余额不足，请选择其他支付方式' }}</span>
+          </div>
         </div>
-        <div class="my-3" v-if="balanceNotEnough">
-          <!-- <v-icon color="warning">mdi-information</v-icon> -->
-          <span class="color-warning">{{ props.params?.txt || '当前余额不足，请选择其他支付方式' }}</span>
+        <div v-if="isQrCodePay" style="text-align: center;">
+          <QrCode :text="payQrCodeTet" :width="170" style="margin: 0 auto;" />
+          <div v-if="isQrCodePay && payQrCodeTet" style="color: var(--v-error-base);">扫码支付时请勿离开</div>
+        </div>
+        <div class="mt-2" style="text-align: center;">
+          <!-- v-if="(isQrCodePay && payQrCodeTet) || isWalletPay" -->
+          <v-btn
+            v-if="isWalletPay && !balanceNotEnough"
+            class="buttons" color="primary"
+            :loading="payLoading"
+            @click="walletPaySubmit"
+          >
+            <!-- {{ isWalletPay ? '确认' : '支付完成' }} -->
+            确认
+          </v-btn>
         </div>
       </div>
-      <div v-if="isQrCodePay" style="text-align: center;">
-        <QrCode :text="payQrCodeTet" :width="170" style="margin: 0 auto;" />
-        <div v-if="isQrCodePay && payQrCodeTet" style="color: var(--v-error-base);">扫码支付时请勿离开</div>
-      </div>
-      <div class="mt-10" style="text-align: center;">
-        <!-- v-if="(isQrCodePay && payQrCodeTet) || isWalletPay" -->
-        <v-btn
-          v-if="isWalletPay"
-          class="buttons" color="primary"
-          :loading="payLoading"
-          @click="walletPaySubmit"
-        >
-          <!-- {{ isWalletPay ? '确认' : '支付完成' }} -->
-          确认
-        </v-btn>
-      </div>
-    </div>
+    </template>
   </v-card>
 </template>
 
@@ -91,6 +94,7 @@ const props = defineProps({
 })
 
 const loading = ref(true)
+const tip = ref('')
 
 const balance = JSON.parse(localStorage.getItem('enterpriseUserAccount'))?.balance || 0
 const balanceNotEnough = computed(() => {
@@ -101,6 +105,7 @@ const isWalletPay = ref(true)
 const isQrCodePay = ref(false)
 const payTypeChange = (value) => {
   payType.value = value
+  tip.value = payTypeList.value.find(e => e.code === payType.value)?.tip || ''
   isQrCodePay.value = qrCodePay.includes(payType.value)
   isWalletPay.value = walletPay.includes(payType.value)
   if (isQrCodePay.value) initPayQrCode() // 生成二维码内容
@@ -128,7 +133,7 @@ const getCodeList = async () => {
         const item = definePayTypeList.find(p => p.code === code)
         if (item) {
           if (!payType.value) {
-            // payType.value = code
+            tip.value = item.tip || ''
             payTypeChange(code) // 默认值赋值
           }
           payTypeList.value.push(item)
@@ -141,10 +146,9 @@ getCodeList()
 
 const payOrder = ref({})
 let maxCount = 0
-// 获取待支付的订单
 const getUnpaidOrderList = async () => {
   try {
-    const data = await getUnpaidOrder({ spuId: props.spuId, type: props.type })
+    const data = await getUnpaidOrder({ spuId: props.spuId, type: props.type }) // 获取待支付的订单
     // order:业务订单; payOrder:支付订单
     if (!data) {
       // 订单超时，重新提交订单
@@ -163,10 +167,12 @@ const getUnpaidOrderList = async () => {
     // 
     if (data?.payOrder) {
       payOrder.value = data.payOrder
-      loading.value = false
+      // loading.value = false
     }
   } catch (error) {
     console.log(error)
+  } finally {
+    loading.value = false
   }
 }
 getUnpaidOrderList() // getUnpaidOrder

src/components/pay/until/payType.js

@@ -17,6 +17,7 @@ const channelsAlipay = [
   },
   {
     name: '支付宝扫码支付',
+    tip: '请使用支付宝“扫一扫”扫码支付',
     icon: 'alipay',
     size: 23,
     color: '#3383c6',
@@ -47,6 +48,7 @@ const channelsWechat = [
   },
   {
     name: '微信扫码支付',
+    tip: '请使用微信“扫一扫”扫码支付',
     icon: 'weChat',
     size: 21,
     color: 'success',