Update index.tsx

src/views/order-detail/index.tsx

@@ -2,7 +2,7 @@ import ColProtocol from '@/components/col-protocol'
 import { Button, Cell, CellGroup, Dialog, Popup, Toast } from 'vant'
 import ColPopup from '@/components/col-popup'
 import { defineComponent } from 'vue'
-import { postMessage } from '@/helpers/native-message'
+import { postMessage, listenerMessage } from '@/helpers/native-message'
 import styles from './index.module.less'
 import UserAuth from './userAuth'
 import request from '@/helpers/request'
@@ -278,6 +278,86 @@ export default defineComponent({
       await this.getUserRegisterProtocol()
       this.onSubmit() // 实名成功后自动支付
     },
+
+    // 支付方式，使用原生支付
+    async submitNativePay() {
+      // 支付...
+      try {
+        const orderInfo = this.orderInfo.paymentConfig
+        const params = {
+          // orderNo: props.paymentConfig.orderNo,
+          merOrderNo: orderInfo.merOrderNo,
+          paymentChannel: orderInfo.paymentChannel,
+          paymentVendor: orderInfo.paymentVendor
+        }
+        const res = await request.post(
+          state.platformApi + '/userOrder/executePayment/v2',
+          {
+            data: {
+              ...params
+            }
+          }
+        )
+
+        const payChannel = orderInfo.paymentChannel;
+        let payStr = payChannel.indexOf('wxpay') !== -1 ? 'wx_app' : 'ali_app';
+        postMessage({
+          api: 'paymentOrder',
+          content: {
+            orderNo: this.orderNo,
+            payChannel: payStr,
+            // payInfo: `alipays://platformapi/startapp?saId=10000007&qrcode=${res.data.pay_info}`
+            payInfo:
+              res.data.reqParams.body || JSON.stringify(res.data.reqParams)
+          }
+        })
+        Toast.loading({
+          message: '支付中...',
+          forbidClick: true,
+          duration: 3000,
+          loadingType: 'spinner'
+        })
+        Toast.clear()
+        // 唤起支付时状态
+        listenerMessage('paymentOperation', result => {
+          console.log(result, 'init paymentOperation')
+          this.paymentOperation(result?.content)
+        })
+      } catch (e: any) {
+        console.log(e)
+      }
+    },
+
+    paymentOperation(res: any) {
+      console.log(res, 'paymentOperation')
+      // 支付状态
+      // paymentOperation  支付成功:success 支付失败:error 支付取消:cancel 未安装:fail
+      // error 只有安卓端有
+      if (res.status === 'success' || res.status === 'error') {
+        Toast.clear()
+        this.$router.replace({
+          path: '/tradeDetail',
+          query: {
+            orderNo: this.orderNo
+          }
+        })
+      } else if (res.status === 'cancel') {
+        Toast.clear()
+      } else if (res.status === 'fail') {
+        const orderInfo = this.orderInfo
+        // const message =
+        //   state.payType === 'zfb' ? '您尚未安装支付宝' : '您尚未安装微信'
+        const message = orderInfo.paymentChannel.indexOf('wxpay') !== -1
+            ? '您尚未安装微信'
+            : '您尚未安装支付宝';
+        Dialog.alert({
+          title: '提示',
+          message
+        }).then(() => {
+          Toast.clear()
+        })
+      }
+    },
     async onSubmit() {
       // console.log(this.orderInfos)
       if (this.orderPrice > 0) {
@@ -299,27 +379,26 @@ export default defineComponent({
           this.paymentStatus = true
         } else {
           this.orderInfo = orderStatus.orderObject.paymentConfig || {}
-          console.log(orderStatus.orderObject, 'orderStatus.orderObject')
           this.orderNo = orderStatus.orderObject.orderNo
           const paymentChannel = this.orderInfo.paymentConfig.paymentChannel
-          console.log(this.orderInfo, 'this.orderInfo.paymentConfig')
-          // 判断是否为原生支付
-          if (
-            this.orderInfo.paymentVendor?.indexOf('wxpay') > -1 ||
-            this.orderInfo.paymentVendor?.indexOf('alipay') > -1
-          ) {
-            this.paymentStatus = true
-          } else {
-            if (paymentChannel) {
+          if (paymentChannel) {
+            // 判断是否为原生支付
+            if (
+              this.orderInfo.paymentVendor?.indexOf('wxpay') > -1 ||
+              this.orderInfo.paymentVendor?.indexOf('alipay') > -1
+            ) {
+              this.submitNativePay()
+            } else {
               const payCode = beforeSubmit(paymentChannel)
               this.onConfirm({
                 payCode,
                 pay_channel: paymentChannel
               })
-            } else {
-              this.paymentStatus = true
             }
+          } else {
+            this.paymentStatus = true
           }
+          
         }
         return
       }