🎈 perf(优化支付):

src/app.tsx

@@ -5,6 +5,7 @@ import configStore from './store'
 import { shareShop } from './common/util'
 import ContextBlueTooth from '@/use/contextBlueTooth'
 import './app.scss'
+import { BANk_WX_APPID } from './common/constant'
 
 const store = configStore()
 const App: FC = (params: { children?: React.ReactNode }) => {

src/common/constant.ts

@@ -1,4 +1,4 @@
-// export const BASE_URL = CURRENT_BASE_URL
+export const BASE_URL = CURRENT_BASE_URL
 // export const BASE_URL = `http://192.168.0.75:50001/lymarket`
 // export const BASE_URL = `http://192.168.0.89:50001/lymarket`
 // export const BASE_URL = `http://10.0.0.5:50001/lymarket`
@@ -40,6 +40,9 @@ export const CDN_UPLOAD_IMG = `${UPLOAD_CDN_URL || ''}`
 // appid
 export const WX_APPID = 'wx68d92d7cbf0b6963'
 
+// 招商银行小程序appid
+export const BANk_WX_APPID = 'wx65934ee32a88d726'
+
 // 支付码单跳转链接
 export const PAY_H5_CODE_URL = CURRENT_PAY_H5_CODE_URL
 

src/pages/order/components/payment/index.module.scss

@@ -27,6 +27,29 @@ $top: 190px;
     line-height: 182px;
     text-align: center;
     border-bottom: 3px dashed #daddea;
+    position: relative;
+    &::before {
+      content: '';
+      width: 60px;
+      height: 60px;
+      background-color: #f7f7f7ff;
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      border-radius: 50%;
+      transform: translate(50%, 50%);
+    }
+    &::after {
+      content: '';
+      width: 60px;
+      height: 60px;
+      background-color: #f7f7f7ff;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      border-radius: 50%;
+      transform: translate(-50%, 50%);
+    }
   }
   .playMode {
     width: 100%;
@@ -38,7 +61,6 @@ $top: 190px;
 
   .payment_list {
     background-color: #fff;
-    // box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.16);
     min-height: 300px;
     border-radius: 10px;
     padding-bottom: 100px;

src/pages/order/components/payment/index.tsx

@@ -180,22 +180,12 @@ const Payment = ({ show = false, onClose, orderInfo, onSubmitSuccess }: Param) =
   }, [orderInfo, payInfo])
 
   // 直接微信支付事件
-  const { pullBank, payStatus } = usePayBank()
-  const onBankPay = useCallback(() => {
-    pullBank({ merchId: payInfo.merch_id, custMerchId: payInfo.pay_no })
-  }, [payInfo])
-
   const { fetchData: SubmitTradeOrderPayData } = SubmitTradeOrderPayApi()
-  useEffect(() => {
-    if (payStatus) {
-      (async() => {
-        const res = await SubmitTradeOrderPayData()
-        if (res.success) {
-          onSubmitSuccess?.()
-        }
-      })()
-    }
-  }, [payStatus])
+  const bankCallBack = useCallback(async() => {
+    const res = await SubmitTradeOrderPayData({ pay_no: payInfo?.pay_no })
+    if (res.success) { onSubmitSuccess?.() }
+  }, [payInfo])
+  const { pullBank, payStatus } = usePayBank({ merchId: payInfo?.merch_id, custMerchId: payInfo?.pay_no, callBack: bankCallBack })
 
   return (
     <View className={styles.payment_main}>
@@ -239,7 +229,7 @@ const Payment = ({ show = false, onClose, orderInfo, onSubmitSuccess }: Param) =
                   onClose={() => advanceSelectData(null)}
                 />
               </View>
-              <View className={styles.payment_list_item} onClick={onBankPay}>
+              <View className={styles.payment_list_item} onClick={pullBank}>
                 <View className={styles.payment_list_item_left}>
                   <View className={classnames(styles.miconfont)}><IconFont name="icon-weixin" size={70} /></View>
                   <View className={styles.payment_list_item_left_name}>

src/use/usePayBank.ts

@@ -1,24 +1,36 @@
 import { Button, View } from '@tarojs/components'
-import Taro, { useDidShow, useRouter } from '@tarojs/taro'
-import { useEffect, useState } from 'react'
+import Taro, { useDidShow, useLoad, useRouter } from '@tarojs/taro'
+import { useEffect, useRef, useState } from 'react'
+import { BANk_WX_APPID } from '@/common/constant'
 
 interface Param {
   merchId: string
   custMerchId: string
   needCashier?: '1'|'0'
+  callBack?: (val: any) => void // 从招商银行返回时的回调函数
 }
-export default () => {
+export default (props: Param) => {
+  const { merchId = '', custMerchId = '', needCashier = '1', callBack } = props
   const [payStatus, setPayStatus] = useState(false)
-  Taro.onAppShow((res) => {
-    if (res?.referrerInfo?.appId == 'wx65934ee32a88d726') {
-      const tf = res?.referrerInfo?.extraData?.payStatus == 'success'
-      setPayStatus(() => tf)
-    }
-  })
-  const pullBank = ({ merchId = '', custMerchId = '', needCashier = '1' }: Param) => {
+  const openStatus = useRef(false)
+  console.log('openstatus::', openStatus)
+  useEffect(() => {
+    Taro.onAppShow((res) => {
+      if (res?.referrerInfo?.appId == BANk_WX_APPID && !openStatus.current) {
+        console.log('onAppShow::', res)
+        callBack?.(res)
+        const tf = res?.referrerInfo?.extraData?.payStatus == 'success'
+        setPayStatus(() => tf)
+        openStatus.current = true
+      }
+    })
+  }, [])
+
+  const pullBank = () => {
+    console.log('merchId::', `${merchId}&&${custMerchId}`)
     Taro.navigateToMiniProgram({
-      appId: CURRENT_PAY_Bank_APPID, // 生产环境Id【UAT测试环境appId:wx0fb358ee24237c71】
-      //   appId: 'wx0fb358ee24237c71', // 生产环境Id【UAT测试环境appId:wx0fb358ee24237c71】
+      // appId: CURRENT_PAY_Bank_APPID, // 生产环境Id【UAT测试环境appId:wx0fb358ee24237c71】
+      appId: 'wx65934ee32a88d726', // 生产环境Id【UAT测试环境appId:wx0fb358ee24237c71】
       path: 'pages/index/index',
       extraData: {
         merchId, // 传商户号（必填，此处传JE开头的商户号）
@@ -27,6 +39,7 @@ export default () => {
       },
       success(res) { // 打开成功的回调函数
         console.log('打开成功::', res)
+        openStatus.current = false
       },
       fail(res) {
         console.log('打开失败::', res)