支付类型封装

src/components/pay/index.vue

@@ -13,7 +13,7 @@
     ></radioGroupUI>
     <div class="pa-5">
       <!-- 支付 -->
-      <div v-if="payType === '余额'">
+      <div v-if="isWalletPay">
         <div>
           <span >{{ $t('enterprise.account.accountBalances') }}：</span>
           <span style="color: var(--v-primary-base);">{{ balance }}</span>
@@ -23,12 +23,19 @@
           <span class="color-warning">{{ props.params?.txt || '当前余额不足，请选择其他支付方式' }}</span>
         </div>
       </div>
-      <div v-if="payType !== '余额'" style="text-align: center;">
+      <div v-if="isShowQrCode" style="text-align: center;">
         <QrCode :text="payCodeUrl" :width="170" style="margin: 0 auto;" />
-        <div v-if="payType === '余额' || payCodeUrl" style="color: var(--v-error-base);">扫码支付时请勿离开</div>
+        <div v-if="showQrCode && payCodeUrl" style="color: var(--v-error-base);">扫码支付时请勿离开</div>
       </div>
       <div class="mt-10" style="text-align: center;">
-        <v-btn v-if="payType === '余额' || payCodeUrl" class="buttons" color="primary" :loading="payLoading" @click="paySubmit">{{ payType === '余额' ? '确认' : '支付完成' }}</v-btn>
+        <v-btn
+          v-if="(showQrCode && payCodeUrl) || isWalletPay"
+          class="buttons" color="primary"
+          :loading="payLoading"
+          @click="paySubmit"
+        >
+          {{ isWalletPay ? '确认' : '支付完成' }}
+        </v-btn>
       </div>
     </div>
   </div>
@@ -39,6 +46,7 @@ defineOptions({ name: 'pay-index'})
 import { computed, ref } from 'vue'
 import radioGroupUI from '@/components/FormUI/radioGroup'
 import QrCode from '@/components/QrCode'
+import { definePayTypeList, showQrCode, walletPay } from './until/payType'
 const emit = defineEmits(['payTypeChange', ])
 const props = defineProps({
   params: {
@@ -57,19 +65,32 @@ const props = defineProps({
 
 const payLoading = ref(false)
 const payCodeUrl = ref('')
+const payType = ref('')
 
-const payTypeList = ref([{ label: '账户余额支付', value: '余额' }])
-if (props.codeList?.length) {
-  for (let index = 0; index < props.codeList.length; index++) {
-    const code = props.codeList[index]
-    if (index === 0) payTypeList.value.push({ label: '微信扫码支付', value: code })
-  }
+const payTypeList = ref([])
+if (definePayTypeList?.length && props.codeList?.length) {
+  props.codeList.forEach(code => {
+    const item = definePayTypeList.find(p => p.code === code)
+    if (item) {
+      if (!payType.value) payType.value = code // 默认值赋值
+      payTypeList.value.push(item)
+    }
+  })
 }
-const payType = ref('余额')
+
+const isShowQrCode = computed(() => {
+  return showQrCode.includes(payType.value)
+})
+const isWalletPay = computed(() => {
+  return walletPay.includes(payType.value)
+})
+
 const payTypeItem = {
   label: '',
   width: 1,
   hideDetails: true,
+  itemText: 'name',
+  itemValue: 'code',
   items: payTypeList.value
 }
 
@@ -82,7 +103,7 @@ const payTypeChange = (val) => {
   payType.value = val
   emit('payTypeChange', val, balanceNotEnough)
   if (val !== '余额') {
-    setTimeout(() => { payCodeUrl.value = '测试测试测试测试测试测试测试测试' }, 1000)
+    setTimeout(() => { payCodeUrl.value = '测试测试测试测试测试测试测试测试' }, 2000)
   }
 }
 

src/components/pay/until/payType.js

@@ -0,0 +1,87 @@
+
+const channelsAlipay = [
+  {
+    name: '支付宝 PC 网站支付',
+    // icon: svg_alipay_pc,
+    code: 'alipay_pc'
+  },
+  {
+    name: '支付宝 Wap 网站支付',
+    // icon: svg_alipay_wap,
+    code: 'alipay_wap'
+  },
+  {
+    name: '支付宝 App 网站支付',
+    // icon: svg_alipay_app,
+    code: 'alipay_app'
+  },
+  {
+    name: '支付宝扫码支付',
+    // icon: svg_alipay_qr,
+    type: 'qrCode',
+    code: 'alipay_qr'
+  },
+  {
+    name: '支付宝条码支付',
+    // icon: svg_alipay_bar,
+    code: 'alipay_bar'
+  }
+]
+const channelsWechat = [
+  {
+    name: '微信公众号支付',
+    // icon: svg_wx_pub,
+    code: 'wx_pub'
+  },
+  {
+    name: '微信小程序支付',
+    // icon: svg_wx_lite,
+    code: 'wx_lite'
+  },
+  {
+    name: '微信 App 支付',
+    // icon: svg_wx_app,
+    code: 'wx_app'
+  },
+  {
+    name: '微信扫码支付',
+    // icon: svg_wx_native,
+    type: 'qrCode',
+    code: 'wx_native'
+  },
+  {
+    name: '微信条码支付',
+    // icon: svg_wx_bar,
+    code: 'wx_bar'
+  }
+]
+const channelsMock = [
+  {
+    name: '钱包支付',
+    // icon: svg_mock,
+    code: 'wallet'
+  },
+  {
+    name: '模拟支付',
+    // icon: svg_mock,
+    code: 'mock'
+  }
+]
+
+// export const isShowQrCode = (code) => {
+//   const arr = ['wx_native', 'alipay_qr']
+//   return arr.includes(code)
+// }
+
+// export const isWalletPay = (code) => {
+//   const arr = ['wallet', 'mock']
+//   return arr.includes(code)
+// }
+
+export const definePayTypeList = [
+  ...channelsAlipay,
+  ...channelsWechat,
+  ...channelsMock
+]
+export const showQrCode = ['wx_native', 'alipay_qr']
+export const walletPay = ['wallet', 'mock']