修改支付

src/views/adapay/payment/index.tsx

@@ -1,5 +1,14 @@
-import { Button, Cell, CellGroup, Icon, RadioGroup, Radio, Dialog } from 'vant'
-import { defineComponent, reactive } from 'vue'
+import {
+  Button,
+  Cell,
+  CellGroup,
+  Icon,
+  RadioGroup,
+  Radio,
+  Dialog,
+  Toast
+} from 'vant'
+import { computed, defineComponent, reactive } from 'vue'
 import styles from './index.module.less'
 import { browser, moneyFormat } from '@/helpers/utils'
 import { useEventTracking } from '@/helpers/hooks'
@@ -11,6 +20,11 @@ import inactiveButtonIcon from '@common/images/icon_checkbox_default.png'
 import activeButtonIconTenant from '@common/images/icon_checkbox-tenant.png'
 import iconWechat from '@common/images/icon-wechat.png'
 import iconAlipay from '@common/images/icon-alipay.png'
+import {
+  listenerMessage,
+  postMessage,
+  removeListenerMessage
+} from '@/helpers/native-message'
 
 const urlFix =
   baseState.platformType === 'TEACHER' ? '/api-teacher' : '/api-student'
@@ -23,7 +37,15 @@ export default defineComponent({
     },
     paymentConfig: {
       type: Object,
-      default: {}
+      default: () => ({})
+    },
+    paymentVendor: {
+      type: String,
+      default: ''
+    },
+    paymentChannels: {
+      type: Array,
+      default: () => []
     }
   },
   emits: ['backOut', 'close', 'confirm', 'update:modelValue'],
@@ -52,6 +74,35 @@ export default defineComponent({
         })
     }
 
+    const isWxPay = computed(() => {
+      if (
+        props.paymentVendor === 'yeepay' ||
+        props.paymentVendor === 'adapay'
+      ) {
+        return true
+      }
+
+      const channelStr = props.paymentChannels?.join(',')
+      if (channelStr && channelStr.indexOf('wxpay') !== -1) {
+        return true
+      }
+      return false
+    })
+
+    const isAliPay = computed(() => {
+      if (
+        props.paymentVendor === 'yeepay' ||
+        props.paymentVendor === 'adapay'
+      ) {
+        return true
+      }
+      const channelStr = props.paymentChannels?.join(',')
+      if (channelStr && channelStr.indexOf('alipay') !== -1) {
+        return true
+      }
+      return false
+    })
+
     // 需要关闭订单
     //    orderPay: {
     //   cancelUrl: urlFix + '/userOrder/orderCancel',
@@ -69,16 +120,109 @@ export default defineComponent({
       }
       // 不管接口是否报错,都返回
       emit('update:modelValue', false)
-      // 为了单独处理支付 曲目购买  && orderStatus.orderObject.orderType == 'MUSIC'
-      // if (!noBack) {
-      //   postMessage({ api: 'back', content: {} })
-      //   return
-      // }
 
       !noBack && router.go(-1)
       emit('backOut')
     }
     const onSubmit = async () => {
+      if (
+        props.paymentVendor &&
+        (props.paymentVendor.indexOf('wxpay') > -1 ||
+          props.paymentVendor.indexOf('alipay') > -1)
+      ) {
+        submitNativePay()
+      } else {
+        submitQrCodePay()
+      }
+    }
+
+    // 支付方式，使用原生支付
+    const submitNativePay = async () => {
+      // 支付...
+      try {
+        console.log(props.paymentConfig, 'paymentConfig')
+        const params = {
+          orderNo: props.paymentConfig.orderNo,
+          payChannel: state.payType,
+          paymentClient: null as any
+        }
+        // if (this.paymentType === 'goodsPay') {
+        //   params.paymentClient = state.platformType
+        // }
+        // const payMap: any = {
+        //   merOrderNo: state.orderNo,
+        //   paymentChannel: state.pay_channel, // 支付渠道
+        //   userId: state.userId,
+        //   code: state.code
+        // }
+        const res = await request.post(
+          urlFix + '/open/userOrder/executePayment/v2',
+          {
+            data: {
+              ...params
+            }
+          }
+        )
+        console.log(res, 'response')
+        const payChannel = state.payType === 'zfb' ? 'ali_app' : 'wx_app'
+        postMessage({
+          api: 'paymentOrder',
+          content: {
+            orderNo: props.paymentConfig.orderNo,
+            payChannel,
+            // payInfo: `alipays://platformapi/startapp?saId=10000007&qrcode=${res.data.pay_info}`
+            payInfo: res.data.pay_info
+          }
+        })
+        Toast.loading({
+          message: '支付中...',
+          forbidClick: true,
+          duration: 3000,
+          loadingType: 'spinner'
+        })
+        Toast.clear()
+        emit('update:modelValue', false)
+        // 唤起支付时状态
+        listenerMessage('paymentOperation', result => {
+          console.log(result, 'init paymentOperation')
+          paymentOperation(result?.content)
+        })
+      } catch (e: any) {
+        console.log(e)
+      }
+    }
+
+    const paymentOperation = (res: any) => {
+      console.log(res, 'paymentOperation')
+      // 支付状态
+      // paymentOperation  支付成功:success 支付失败:error 支付取消:cancel 未安装:fail
+      // error 只有安卓端有
+      if (res.status === 'success' || res.status === 'error') {
+        Toast.clear()
+        emit('update:modelValue', false)
+        router.replace({
+          path: '/tradeDetail',
+          query: {
+            orderNo: props.paymentConfig.orderNo
+          }
+        })
+      } else if (res.status === 'cancel') {
+        Toast.clear()
+        emit('update:modelValue', false)
+      } else if (res.status === 'fail') {
+        const message =
+          state.payType === 'zfb' ? '您尚未安装支付宝' : '您尚未安装微信'
+        Dialog.alert({
+          title: '提示',
+          message
+        }).then(() => {
+          Toast.clear()
+          emit('update:modelValue', false)
+        })
+      }
+    }
+    // 支付方式，汇付，易宝支付
+    const submitQrCodePay = () => {
       // 支付...
       const pt = state.payType
       // 判断当前浏览器
@@ -133,70 +277,74 @@ export default defineComponent({
         </div>
         <RadioGroup v-model={state.payType}>
           <CellGroup border={false}>
-            <Cell
-              border={true}
-              center
-              onClick={() => {
-                state.payType = 'wx'
-              }}
-              v-slots={{
-                icon: () => <Icon name={iconWechat} size={18} />,
-                'right-icon': () => (
-                  <Radio
-                    name="wx"
-                    v-slots={{
-                      icon: (props: any) => (
-                        <Icon
-                          class={styles.boxStyle}
-                          name={
-                            props.checked
-                              ? baseState.projectType === 'tenant'
-                                ? activeButtonIconTenant
-                                : activeButtonIcon
-                              : inactiveButtonIcon
-                          }
-                        />
-                      )
-                    }}
-                  />
-                ),
-                title: () => (
-                  <div class={styles.payTypeRe}>
-                    微信支付 <span class={styles.recommend}>推荐</span>
-                  </div>
-                )
-              }}
-            ></Cell>
-            <Cell
-              title="支付宝支付"
-              border={true}
-              center
-              onClick={() => {
-                state.payType = 'zfb'
-              }}
-              v-slots={{
-                icon: () => <Icon name={iconAlipay} size={18} />,
-                'right-icon': () => (
-                  <Radio
-                    name="zfb"
-                    v-slots={{
-                      icon: (props: any) => (
-                        <Icon
-                          class={styles.boxStyle}
-                          name={
-                            props.checked
-                              ? baseState.projectType === 'tenant'
-                                ? activeButtonIconTenant
-                                : activeButtonIcon
-                              : inactiveButtonIcon
-                          }
-                        />
-                      )
-                    }}
-                  />
-                )
-              }}
-            ></Cell>
+            {isWxPay.value && (
+              <Cell
+                border={true}
+                center
+                onClick={() => {
+                  state.payType = 'wx'
+                }}
+                v-slots={{
+                  icon: () => <Icon name={iconWechat} size={18} />,
+                  'right-icon': () => (
+                    <Radio
+                      name="wx"
+                      v-slots={{
+                        icon: (props: any) => (
+                          <Icon
+                            class={styles.boxStyle}
+                            name={
+                              props.checked
+                                ? baseState.projectType === 'tenant'
+                                  ? activeButtonIconTenant
+                                  : activeButtonIcon
+                                : inactiveButtonIcon
+                            }
+                          />
+                        )
+                      }}
+                    />
+                  ),
+                  title: () => (
+                    <div class={styles.payTypeRe}>
+                      微信支付 <span class={styles.recommend}>推荐</span>
+                    </div>
+                  )
+                }}
+              ></Cell>
+            )}
+            {isAliPay.value && (
+              <Cell
+                title="支付宝支付"
+                border={true}
+                center
+                onClick={() => {
+                  state.payType = 'zfb'
+                }}
+                v-slots={{
+                  icon: () => <Icon name={iconAlipay} size={18} />,
+                  'right-icon': () => (
+                    <Radio
+                      name="zfb"
+                      v-slots={{
+                        icon: (props: any) => (
+                          <Icon
+                            class={styles.boxStyle}
+                            name={
+                              props.checked
+                                ? baseState.projectType === 'tenant'
+                                  ? activeButtonIconTenant
+                                  : activeButtonIcon
+                                : inactiveButtonIcon
+                            }
+                          />
+                        )
+                      }}
+                    />
+                  )
+                }}
+              ></Cell>
+            )}
           </CellGroup>
         </RadioGroup>
 

src/views/order-detail/index.tsx

@@ -61,6 +61,7 @@ export default defineComponent({
       bottomHeight: 0,
       paymentVendor: '', //支付厂商
       paymentVersion: 'V1', // 支付版本,可用值:V1 老版,V2 新版
+      paymentChannels: [] as any, // 可以选择的支付类型
       showQrcode: false,
       orderTimer: null as any,
       qrCodeUrl: '',
@@ -156,7 +157,7 @@ export default defineComponent({
     async getOrderPayType() {
       try {
         const orderObject = orderStatus.orderObject
-        console.log(orderObject)
+        // 单独处理其它支付类型下面用的bizId
         let bizId =
           orderObject.orderList.length > 0 ? orderObject.orderList[0].id : ''
         if (orderObject.orderType === 'PRACTICE') {
@@ -185,6 +186,7 @@ export default defineComponent({
         )
         this.paymentVersion = data.paymentVersion || 'V1'
         this.paymentVendor = data.paymentVendor
+        this.paymentChannels = data.paymentChannels // 可以选择的支付类型
       } catch {
         //
       }
@@ -276,9 +278,7 @@ export default defineComponent({
           const res = await request.post(url, {
             data: {
               activityId: orderObject.activityId || null,
-              // bizId: '',
               couponIds: orderObject.couponId,
-              // currentPrice: 0,
               goodsInfos: [...orderTenantInfos()],
               orderDesc: orderObject.orderDesc,
               orderName: orderObject.orderName,
@@ -509,11 +509,17 @@ export default defineComponent({
               onBackOut={this.onBackOut}
             />
           ) : (
+            //      this.paymentVersion = data.paymentVersion || 'V1'
+            // this.paymentVendor = data.paymentVendor
+            // this.paymentChannels = data.paymentChannels // 可以选择的支付类型
             <UrlPayment
               paymentConfig={{
                 ...orderStatus.orderObject,
                 orderNo: this.orderNo
               }}
+              // paymentVersion={this.paymentVersion}
+              paymentVendor={this.paymentVendor}
+              paymentChannels={this.paymentChannels}
               onClose={() => (this.paymentStatus = false)}
               onBackOut={this.onBackOut}
               onConfirm={(val: any) => this.onConfirm(val)}

vite.config.ts

@@ -12,7 +12,7 @@ function resolve(dir: string) {
 // https://vitejs.dev/config/
 // https://github.com/vitejs/vite/issues/1930 .env
 // const proxyUrl = 'https://online.colexiu.com/';
-const proxyUrl = 'https://dev.colexiu.com/'
+const proxyUrl = 'https://test.colexiu.com/'
 // const proxyUrl = 'http://192.168.3.143:8000/'
 export default defineConfig({
   base: './',