支付类型

src/components/pay/index.vue

@@ -23,13 +23,13 @@
           <span class="color-warning">{{ props.params?.txt || '当前余额不足，请选择其他支付方式' }}</span>
         </div>
       </div>
-      <div v-if="isShowQrCode" style="text-align: center;">
-        <QrCode :text="payCodeUrl" :width="170" style="margin: 0 auto;" />
-        <div v-if="showQrCode && payCodeUrl" style="color: var(--v-error-base);">扫码支付时请勿离开</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-btn
-          v-if="(showQrCode && payCodeUrl) || isWalletPay"
+          v-if="(isQrCodePay && payQrCodeTet) || isWalletPay"
           class="buttons" color="primary"
           :loading="payLoading"
           @click="paySubmit"
@@ -46,40 +46,62 @@ 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'
+import { definePayTypeList, qrCodePay, walletPay } from './until/payType'
+import { getEnableCodeList } from '@/api/common'
+import { useSharedState } from '@/store/sharedState'
 const emit = defineEmits(['payTypeChange', ])
 const props = defineProps({
   params: {
     type: Object,
     default: () => {}
   },
-  codeList: {
-    type: Array,
-    default: () => []
-  },
+  // codeList: {
+  //   type: Array,
+  //   default: () => []
+  // },
   needPrice: {
     type: [String, Number],
     default: 0
   },
 })
 
-const payLoading = ref(false)
-const payCodeUrl = ref('')
+// 支付方式
 const payType = ref('')
-
 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 sharedState = useSharedState()
+const codeList = ref(sharedState.payCodeList || [])
+const getCodeList = async () => {
+  try {
+    if (!codeList.value?.length) {
+      const list = await getEnableCodeList({appId: 10})
+      codeList.value = list || []
+      sharedState.setPayCodeList(codeList.value)
+    } else {
+      codeList.value = sharedState.payCodeList
     }
-  })
+  } catch (error) {
+    console.log(error)
+  } finally {
+    if (definePayTypeList?.length && codeList.value?.length) {
+      codeList.value.forEach(code => {
+        const item = definePayTypeList.find(p => p.code === code)
+        if (item) {
+          if (!payType.value) payType.value = code // 默认值赋值
+          payTypeList.value.push(item)
+        }
+      })
+    }
+  }
 }
+getCodeList()
 
-const isShowQrCode = computed(() => {
-  return showQrCode.includes(payType.value)
+const payLoading = ref(false)
+const payQrCodeTet = ref('')
+
+const isQrCodePay = computed(() => {
+  const bool = qrCodePay.includes(payType.value)
+  if (bool) initPayQrCode() // 生成二维码内容
+  return bool
 })
 const isWalletPay = computed(() => {
   return walletPay.includes(payType.value)
@@ -102,15 +124,16 @@ const balanceNotEnough = computed(() => {
 const payTypeChange = (val) => {
   payType.value = val
   emit('payTypeChange', val, balanceNotEnough)
-  if (val !== '余额') {
-    setTimeout(() => { payCodeUrl.value = '测试测试测试测试测试测试测试测试' }, 2000)
-  }
+}
+
+const initPayQrCode = () => { // 生成二维码内容
+  setTimeout(() => { payQrCodeTet.value = '测试测试测试测试测试测试测试测试' }, 2000)
 }
 
 const paySubmit = () => {
   emit('paySubmit', payType.value)
 }
-// payTypeChange('余额')
+
 </script>
 <style lang="scss" scoped>
 .font-size-30 { font-size: 30px; }

src/components/pay/until/payType.js

@@ -68,7 +68,7 @@ const channelsMock = [
   }
 ]
 
-// export const isShowQrCode = (code) => {
+// export const isQrCodePay = (code) => {
 //   const arr = ['wx_native', 'alipay_qr']
 //   return arr.includes(code)
 // }
@@ -83,5 +83,5 @@ export const definePayTypeList = [
   ...channelsWechat,
   ...channelsMock
 ]
-export const showQrCode = ['wx_native', 'alipay_qr']
+export const qrCodePay = ['wx_native', 'alipay_qr']
 export const walletPay = ['wallet', 'mock']

src/store/sharedState.js

@@ -2,14 +2,15 @@ import { defineStore } from 'pinia'
 
 export const useSharedState = defineStore('sharedState', {
   state: () => ({
-    layoutClickCount: 0
+    layoutClickCount: 0,
+    payCodeList: [],
   }),
   actions: {
     increment() {
       this.layoutClickCount++
+    },
+    setPayCodeList(arr) {
+      this.payCodeList = arr || []
     }
-    // setMessage(message) {
-    //   this.message = this.message + message
-    // }
   }
-})
+})