支付流程优化

src/components/pay/index.vue

@@ -25,7 +25,7 @@
       </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>
@@ -36,19 +36,18 @@
             <span class="color-warning">{{ props.params?.txt || '当前余额不足，请选择其他支付方式' }}</span>
           </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>
+          <QrCode :text="payQrCodeTxt" :width="170" style="margin: 0 auto;" />
+          <div class="mb-5" v-if="payQrCodeTxt" style="color: var(--v-error-base);">扫码支付时请勿离开</div>
         </div>
-        <div class="mt-2" style="text-align: center;">
-          <!-- v-if="(isQrCodePay && payQrCodeTet) || isWalletPay" -->
+        <!-- 钱包支付确认按钮 -->
+        <div v-if="isWalletPay && !balanceNotEnough" class="mt-2" style="text-align: center;">
           <v-btn
-            v-if="isWalletPay && !balanceNotEnough"
             class="buttons" color="primary"
             :loading="payLoading"
             @click="walletPaySubmit"
           >
-            <!-- {{ isWalletPay ? '确认' : '支付完成' }} -->
             确认
           </v-btn>
         </div>
@@ -96,60 +95,22 @@ const props = defineProps({
 const loading = ref(true)
 const tip = ref('')
 
+// 步骤：
+//      1. 创建支付订单（先获取有无创建的，没有就创建）
+//      2. 获取支付方式类型列表
+//      3. 如果是二维码类型支付（isQrCodePay=true）生成二维码（需要第一步的订单号绑定）
+
+
 const balance = JSON.parse(localStorage.getItem('enterpriseUserAccount'))?.balance || 0
 const balanceNotEnough = computed(() => {
   return (Number(props.cost) > Number(balance))
 })
-// 支付方式
-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() // 生成二维码内容
-  emit('payTypeChange', value, balanceNotEnough)
-}
-// 支付方式
-const payType = ref('')
-const payTypeList = ref([])
-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) {
-            tip.value = item.tip || ''
-            payTypeChange(code) // 默认值赋值
-          }
-          payTypeList.value.push(item)
-        }
-      })
-    }
-  }
-}
-getCodeList()
 
-const payOrder = ref({})
+const payOrder = ref({}) // 支付订单
 let maxCount = 0
 const getUnpaidOrderList = async () => {
   try {
-    const data = await getUnpaidOrder({ spuId: props.spuId, type: props.type }) // 获取待支付的订单
-    // order:业务订单; payOrder:支付订单
+    const data = await getUnpaidOrder({ spuId: props.spuId, type: props.type }) // 获取待支付的订单 (order:业务订单; payOrder:支付订单)
     if (!data) {
       // 订单超时，重新提交订单
       await createTradeOrder({
@@ -165,10 +126,8 @@ const getUnpaidOrderList = async () => {
       }, 1000)
     }
     // 
-    if (data?.payOrder) {
-      payOrder.value = data.payOrder
-      // loading.value = false
-    }
+    payOrder.value = data?.payOrder || null
+    initPayQrCode() // 生成二维码内容
   } catch (error) {
     console.log(error)
   } finally {
@@ -177,20 +136,14 @@ const getUnpaidOrderList = async () => {
 }
 getUnpaidOrderList() // getUnpaidOrder
 
-const payLoading = ref(false)
-const payQrCodeTet = ref('')
-
-// 钱包支付（余额支付）
-const walletPaySubmit = () => {
-  // emit('paySubmit', payType.value)
-}
 
 // 生成二维码内容
 const timer = ref(null)
 onUnmounted(() => {
   if (timer.value) clearInterval(timer.value); timer.value = null
 })
-const initPayQrCode = async () => {
+const initPayQrCode = async () => { // 生成二维码内容
+  if (!payOrder.value?.id || !payOrder.value.notifyUrl || !payType.value) return
   if (timer.value) clearInterval(timer.value); timer.value = null
   try {
     if (payOrder.value) {
@@ -202,7 +155,7 @@ const initPayQrCode = async () => {
         // returnUrl: location.href, // 支付成功后，支付渠道跳转回当前页；再由当前页，跳转回 {@link returnUrl} 对应的地址
       }
       const res = await payOrderSubmit(params)
-      payQrCodeTet.value = res?.displayContent || '' // 支付二维码
+      payQrCodeTxt.value = res?.displayContent || '' // 支付二维码
       timer.value = setInterval(() => { payStatus() }, 1000) // 轮巡查询用户是否支付
     }
   } catch (error) {
@@ -210,6 +163,60 @@ const initPayQrCode = async () => {
   }
 }
 
+// 支付方式
+const isWalletPay = ref(false)
+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)
+  initPayQrCode() // 生成二维码内容
+  emit('payTypeChange', value, balanceNotEnough)
+}
+
+// 支付方式
+const payType = ref('')
+const payTypeList = ref([])
+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) {
+            tip.value = item.tip || ''
+            payTypeChange(code) // 默认值赋值
+          }
+          payTypeList.value.push(item)
+        }
+      })
+    }
+  }
+}
+getCodeList()
+
+
+const payLoading = ref(false)
+const payQrCodeTxt = ref('')
+
+// 钱包支付（余额支付）
+const walletPaySubmit = () => {
+  // emit('paySubmit', payType.value)
+}
+
 import Snackbar from '@/plugins/snackbar'
 import { useRouter } from 'vue-router'; const router = useRouter()
 const payStatus = async () => {

src/components/pay/until/payType.js

@@ -85,4 +85,4 @@ export const definePayTypeList = [
   ...channelsMock
 ]
 export const qrCodePay = ['wx_native', 'alipay_qr']
-export const walletPay = ['wallet', 'mock']
+export const walletPay = ['wallet']