修改支付方式

src/router/index.ts

@@ -40,7 +40,15 @@ const router: Router = createRouter({
   }
 })
 
-const whitePath = ['/coursewarePlay', '/lessonCourseware', '/courseList', '/companion-teacher-register', '/manage-teacher-register']
+const whitePath = [
+  '/coursewarePlay',
+  '/lessonCourseware',
+  '/courseList',
+  '/companion-teacher-register',
+  '/manage-teacher-register',
+  '/payResult',
+  '/payDefine'
+]
 router.beforeEach((to, from, next) => {
   if (!whitePath.includes(to.path)) {
     baseEvent.emit('toastShow')
@@ -58,7 +66,7 @@ router.afterEach((to, from) => {
     setTimeout(() => {
       // const toastStatus = baseEvent.emit('toastStatus')
       baseEvent.emit('toastClose')
-    }, 300);
+    }, 300)
   }
 })
 

src/student/music-group/pre-apply/component/payment.tsx

@@ -33,6 +33,7 @@ export default defineComponent({
     const route = useRoute()
     const router = useRouter()
     const state = reactive({
+      paymentType: 'wxpay',
       check: [] as any, // 选中的数据
       checkboxRefs: [] as any,
       details: [] as any, //
@@ -55,6 +56,20 @@ export default defineComponent({
       dialogConfig: {} as any
     })
 
+    // 获取支付渠道
+    const sysParamConfig = async () => {
+      try {
+        const { data } = await request.get('/api-student/sysParamConfig/queryByParamName', {
+          params: {
+            paramName: 'payment_service_provider'
+          }
+        })
+        state.paymentType = data.paramValue || 'wxpay'
+      } catch {
+        //
+      }
+    }
+
     // 查询未支付订单
     const paymentOrderUnpaid = async () => {
       try {
@@ -233,6 +248,7 @@ export default defineComponent({
         const { data } = await request.post('/api-student/userPaymentOrder/executeOrder', {
           hideLoading: false,
           data: {
+            paymentType: state.paymentType,
             bizId: route.query.id, // 乐团编号
             orderType: 'ORCHESTRA',
             paymentCashAmount: state.orderInfo.needPrice || 0,
@@ -248,7 +264,7 @@ export default defineComponent({
           path: '/orderDetail',
           query: {
             pm: 1, // h5乐团报名
-            config: JSON.stringify(data.paymentConfig),
+            config: JSON.stringify({ ...data.paymentConfig, paymentType: data.paymentType }),
             orderNo: data.orderNo
           }
         })
@@ -259,6 +275,7 @@ export default defineComponent({
     }
 
     onMounted(() => {
+      sysParamConfig()
       // 查询未支付订单
       registerGoods()
       paymentOrderUnpaid()

src/student/music-group/pre-apply/order-detail.tsx

@@ -19,6 +19,13 @@ import GoodsDetail from '../goods-detail'
 import ODialog from '@/components/o-dialog'
 import { orderStatus } from '@/constant'
 import QrcodePayment from './qrcode-payment'
+import { beforeSubmit } from './order-state'
+
+/**
+ * 接入jsdk
+ * 乐团报名-原生js支付
+ * 会员购买-汇付
+ */
 
 export default defineComponent({
   name: 'order-detail',
@@ -26,6 +33,7 @@ export default defineComponent({
     const route = useRoute()
     const router = useRouter()
     const state = reactive({
+      paymentType: 'adapay' as 'wxpay' | 'adapay', // 支付方式
       orderTimer: null as any,
       paymentStatus: false,
       showQrcode: false,
@@ -100,17 +108,6 @@ export default defineComponent({
           // status
           state.dialogStatus = true
           state.dialogMessage = '订单' + orderStatus[data.status]
-          // showConfirmDialog({
-          //   message: '订单处理中，请稍等',
-          //   showCancelButton: false
-          // }).then(() => {
-          //   router.replace({
-          //     path: '/payment-result',
-          //     query: {
-          //       orderNo: state.orderNo
-          //     }
-          //   })
-          // })
         }
       } catch {
         //
@@ -120,34 +117,19 @@ export default defineComponent({
     const onConfirm = (val: any) => {
       const config: any = state.config
       state.pay_channel = val.pay_channel
+
+      const params = qs.stringify({
+        pay_channel: val.pay_channel,
+        wxAppId: config.wxAppId,
+        body: config.body,
+        price: config.price,
+        orderNo: config.merOrderNo,
+        userId: config.userId
+      })
       if (val.payCode === 'payResult') {
-        window.location.href =
-          window.location.origin +
-          '/orchestra-student/#/payResult?' +
-          qs.stringify({
-            pay_channel: val.pay_channel,
-            wxAppId: config.wxAppId,
-            body: config.body,
-            price: config.price,
-            orderNo: config.merOrderNo,
-            userId: config.userId
-          })
+        window.location.href = window.location.origin + '/orchestra-student/#/payResult?' + params
       } else {
-        state.qrCodeUrl =
-          window.location.origin +
-          '/orchestra-student/#/payDefine?pay_channel=' +
-          val.pay_channel +
-          '&wxAppId=' +
-          config.wxAppId +
-          '&body=' +
-          config.body +
-          '&price=' +
-          config.price +
-          '&orderNo=' +
-          config.merOrderNo +
-          '&userId=' +
-          config.userId
-        console.log(state.qrCodeUrl, 'qrCodeUrl')
+        state.qrCodeUrl = window.location.origin + '/orchestra-student/#/payDefine?' + params
         state.showQrcode = true
         state.paymentStatus = false
 
@@ -194,66 +176,46 @@ export default defineComponent({
       }, 5000)
     }
 
-    // const locationReplace = (url: any) => {
-    //   // 只允许同域名
-    //   console.log(history.replaceState, 'window.history.replaceState', url)
-    //   if (history.replaceState) {
-    //     history.replaceState(null, document.title, url)
-    //     history.go(0)
-    //   } else {
-    //     location.replace(url)
-    //   }
-    // }
-
-    const beforeSubmit = () => {
-      const pt = state.pay_channel
-      let payCode = 'qrCode'
-      // 判断当前浏览器
-      if (browser().weixin) {
-        // 微信浏览器
-        if (pt == 'alipay_qr' || pt == 'alipay_wap') {
-          payCode = 'qrCode'
-        } else if (pt == 'wx_pub') {
-          payCode = 'pay'
-        }
-      } else if (browser().alipay) {
-        // 支付宝浏览器
-        if (pt == 'alipay_wap') {
-          // 支付宝 H5 支付
-          payCode = 'pay'
-        } else {
-          payCode = 'qrCode'
-        }
-      } else {
-        payCode = 'qrCode'
-      }
-
-      onConfirm({
-        payCode: payCode == 'qrCode' ? 'payDefine' : 'payResult',
-        pay_channel: pt
-      })
-    }
-
+    // 确定支付
     const onSubmit = async () => {
       clearInterval(state.orderTimer)
-
       if (orderType.value === 'VIP') {
-        // onCallback()
         buyVip(onCallback)
       } else {
         buyOrchestra(onCallback)
       }
     }
+
+    /**
+     * @description 回调，判断是否有支付渠道，如果有则直接去支付
+     * @returns void
+     */
     const onCallback = () => {
       const pt = state.pay_channel
       // 判断是否有支付方式
       if (pt) {
-        beforeSubmit()
+        const payCode: string = beforeSubmit(state.pay_channel)
+        onConfirm({
+          payCode: payCode === 'qrCode' ? 'payDefine' : 'payResult',
+          pay_channel: pt
+        })
       } else {
-        state.paymentStatus = true
+        if (orderType.value === 'VIP') {
+          state.paymentStatus = true
+        } else {
+          // 直接去拉取微信支付
+          onConfirm({
+            payCode: 'payResult',
+            pay_channel: 'wx_pub'
+          })
+        }
       }
     }
 
+    /**
+     * @description 会员购买
+     * @param callback 回调方式
+     */
     const buyVip = async (callback?: any) => {
       try {
         state.submitStatus = true
@@ -282,6 +244,10 @@ export default defineComponent({
       }
     }
 
+    /**
+     * @description 乐团报名 - 汇付
+     * @param callback 回调方式
+     */
     const buyOrchestra = async (callback: any) => {
       // 请选择收货地址
       if (!addressDetails.value.id) {
@@ -313,7 +279,6 @@ export default defineComponent({
         })
         console.log(data)
         state.pay_channel = data.paymentChannel
-        state.submitStatus = false
         if (data.status !== 'WAIT_PAY' && data.status !== 'PAYING') {
           checkOrderTypeJump()
         } else {
@@ -321,10 +286,12 @@ export default defineComponent({
         }
       } catch {
         //
+      } finally {
         state.submitStatus = false
       }
     }
 
+    // 有支付结果后回调
     const checkOrderTypeJump = () => {
       // 判断是否是乐团报名
       if (orderType.value === 'ORCHESTRA') {
@@ -515,48 +482,6 @@ export default defineComponent({
             orderType={orderType.value}
           />
         </OPopup>
-        {/* <Popup
-          v-model:show={state.showQrcode}
-          style={{ background: 'transparent', overflow: 'initial' }}
-          safeAreaInsetBottom={true}
-          class={styles.popupCode}
-          closeable
-          onClose={() => {
-            // 二维码关闭时清除定时器
-            clearInterval(state.orderTimer)
-          }}
-        >
-          <div class={styles.codeContainer}>
-            <div class={styles.codeImg}>
-              <div class={styles.codeContent}>
-                <h2 class={styles.codeTitle}>
-                  {orderType.value === 'VIP' ? '开通会员' : '乐团报名'}
-                </h2>
-                <div class={styles.codeName}>
-                  请截图下方二维码 登录{state.pay_channel === 'wx_pub' ? '微信' : '支付宝'}
-                  扫码支付
-                </div>
-
-                <div class={styles.codeQr}>
-                  <OQrcode text={state.qrCodeUrl} size={'400'} />
-                </div>
-                <div style={{ textAlign: 'center' }}>
-                  <span class={styles.codeBtnText}>请在30分钟内扫码支付</span>
-                </div>
-                <div class={styles.codeTips}>
-                  <div class={styles.tipsTitle}>使用说明：</div>
-                  <div class={styles.tipsContent}>
-                    1.打开{state.pay_channel === 'wx_pub' ? '微信' : '支付宝'}扫一扫
-                    <br />
-                    2.选择相册中的二维码
-                    <br />
-                    3.请在30分钟内扫码支付
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </Popup> */}
 
         <OPopup v-model:modelValue={state.authShow}>
           <UserAuth onSuccess={onAuthSuccess} hideHeader={!browser().isApp} />

src/student/music-group/pre-apply/order-state.ts

@@ -0,0 +1,32 @@
+/**
+ * @author wxl
+ * @description 处理基础支付功能
+ */
+
+import { browser } from '@/helpers/utils'
+
+// 判断浏览器与支付类型，返回对应页面名称
+export const beforeSubmit = (pt: string) => {
+  // const pt = state.pay_channel
+  let payCode = 'qrCode'
+  // 判断当前浏览器
+  if (browser().weixin) {
+    // 微信浏览器
+    if (pt == 'alipay_qr' || pt == 'alipay_wap') {
+      payCode = 'qrCode'
+    } else if (pt == 'wx_pub') {
+      payCode = 'pay'
+    }
+  } else if (browser().alipay) {
+    // 支付宝浏览器
+    if (pt == 'alipay_wap') {
+      // 支付宝 H5 支付
+      payCode = 'pay'
+    } else {
+      payCode = 'qrCode'
+    }
+  } else {
+    payCode = 'qrCode'
+  }
+  return payCode == 'qrCode' ? 'payDefine' : 'payResult'
+}

src/views/adapay/pay-result/index.tsx

@@ -1,16 +1,7 @@
 import request from '@/helpers/request'
 import { browser, getUrlCode, moneyFormat } from '@/helpers/utils'
 import { goWechatAuth } from '@/state'
-import {
-  Cell,
-  CellGroup,
-  closeToast,
-  Icon,
-  Loading,
-  showConfirmDialog,
-  showDialog,
-  showToast
-} from 'vant'
+import { Cell, CellGroup, Icon, Loading, showConfirmDialog, showToast } from 'vant'
 import { defineComponent, onMounted, reactive } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import styles from './index.module.less'
@@ -63,35 +54,35 @@ export default defineComponent({
 
     const getPayment = async () => {
       try {
-        try {
-          if (parseFloat(state.price) <= 0) {
-            showToast('支付金额异常')
-            return
-          }
-          const payMap: any = {
-            merOrderNo: state.orderNo,
-            paymentChannel: state.pay_channel, // 支付渠道
-            userId: state.userId
-          }
-          //     // 判断是否是微信公众号支付
-          if (state.pay_channel == 'wx_pub') {
-            payMap.code = state.code
-          }
+        if (parseFloat(state.price) <= 0) {
+          showToast('支付金额异常')
+          return
+        }
+        const payMap: any = {
+          merOrderNo: state.orderNo,
+          paymentChannel: state.pay_channel, // 支付渠道
+          userId: state.userId
+        }
+        //     // 判断是否是微信公众号支付
+        if (state.pay_channel == 'wx_pub') {
+          payMap.code = state.code
+        }
 
-          const { data } = await request.post('/api-student/open/userOrder/executePayment', {
-            data: {
-              ...payMap
-            }
-          })
+        const { data } = await request.post('/api-student/open/userOrder/executePayment', {
+          data: {
+            ...payMap
+          }
+        })
 
-          console.log(data, 'payment')
-          scanCodePay(data.reqParams)
-        } catch (e) {
-          //
-          console.log(e)
-        }
-      } catch {
+        console.log(data, 'payment', state.pay_channel)
+        scanCodePay(data.reqParams)
+      } catch (e) {
         //
+        console.log(e)
+        // 接口报错也跳转到支付回调页
+        // window.location.replace(
+        //   location.origin + '/orchestra-student/#/payment-result?orderNo=' + state.orderNo
+        // )
       }
     }
 
@@ -100,13 +91,17 @@ export default defineComponent({
       if (state.pay_channel == 'alipay_qr') {
         const url =
           data.prod_mode === 'false'
-            ? data.expend.qrcode_url + '?payment_id=' + data.id + '&pay_channel=' + data.pay_channel
-            : data.expend.qrcode_url
+            ? data?.expend?.qrcode_url +
+              '?payment_id=' +
+              data.id +
+              '&pay_channel=' +
+              data.pay_channel
+            : data?.expend?.qrcode_url
         window.location.href = url
       } else if (state.pay_channel == 'alipay_wap') {
-        window.location.href = data.expend.pay_info
+        window.location.href = data?.expend?.pay_info
       } else if (state.pay_channel == 'wx_pub') {
-        const tempPayInfo = JSON.parse(data.expend.pay_info)
+        const tempPayInfo = data?.expend ? JSON.parse(data?.expend?.pay_info) : data
         state.payInfo = tempPayInfo
         if (typeof (window as any).WeixinJSBridge == 'undefined') {
           if (document.addEventListener) {
@@ -134,7 +129,7 @@ export default defineComponent({
           appId: payInfo.appId, //公众号名称，由商户传入
           timeStamp: payInfo.timeStamp, //时间戳，自1970年以来的秒数
           nonceStr: payInfo.nonceStr, //随机串
-          package: payInfo.package,
+          package: payInfo.package || payInfo.packageValue,
           signType: payInfo.signType, //微信签名方式：
           paySign: payInfo.paySign //微信签名
         },