| 
					
				 | 
			
			
				@@ -5,11 +5,17 @@ import { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   Icon, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   RadioGroup, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   Radio, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-  showConfirmDialog 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  showConfirmDialog, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  showLoadingToast, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  closeToast, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  showDialog 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 } from 'vant'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-import { defineComponent, reactive } from 'vue'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import { computed, defineComponent, reactive } from 'vue'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 import styles from './index.module.less'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 import { browser, moneyFormat } from '@/helpers/utils'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import request from '@/helpers/request'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import { listenerMessage, postMessage } from '@/helpers/native-message'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import { useRouter } from 'vue-router'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 export default defineComponent({ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   name: 'payment', 
			 | 
		
	
	
		
			
				| 
					
				 | 
			
			
				@@ -17,10 +23,15 @@ export default defineComponent({ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     paymentConfig: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				       type: Object, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				       default: {} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    config: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      type: Object, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      default: {} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   emits: ['backOut', 'close', 'confirm'], 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   setup(props, { slots, attrs, emit }) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    const router = useRouter(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     const state = reactive({ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				       payType: 'wx', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				       pay_channel: '' 
			 | 
		
	
	
		
			
				| 
					
				 | 
			
			
				@@ -39,10 +50,138 @@ export default defineComponent({ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				       }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     }; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    const isWxPay = computed(() => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      const paymentChannels = props.config.paymentChannel || ''; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      if (paymentChannels) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        if (paymentChannels.toUpperCase().indexOf('WX') !== -1) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          return true; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } else { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          return false; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      } else { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        return true; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    const isAliPay = computed(() => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      const paymentChannels = props.config.paymentChannel || ''; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      if (paymentChannels) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        if (paymentChannels.toUpperCase().indexOf('ALI') !== -1) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          return true; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } else { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          return false; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      } else { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        return true; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     // 需要关闭订单 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     const onCancel = async (noBack?: boolean) => {}; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     const onSubmit = async () => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				       // 支付... 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      if (props.config.paymentType === 'original') { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        submitNativePay(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      } else { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        submitQrCodePay(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    }; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    const submitNativePay = async () => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      // 支付... 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      try { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        // const payChannel = state.payType === 'zfb' ? 'alipay-app' : 'wxpay-app'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        let paymentChannels = props.config.paymentChannel || ''; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        paymentChannels = paymentChannels.split(','); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        // const payChannel = paymentChannels.map((item: any) => item.indexOf('')) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        let payChannel = ''; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        paymentChannels.forEach((item: any) => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          if ( 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            state.payType === 'zfb' && 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            item.toUpperCase().indexOf('ALI') !== -1 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          ) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            payChannel = item; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          } else if ( 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            state.payType === 'wx' && 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            item.toUpperCase().indexOf('WX') !== -1 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          ) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            payChannel = item; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        console.log(state.payType, 'state.payType'); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        let paymentType = props.config.paymentType; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        const payMap: any = { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          merOrderNo: props.paymentConfig.orderNo, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          paymentChannel: payChannel, // 支付渠道 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          paymentType: paymentType, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          userId: props.paymentConfig.userId 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        const { data } = await request.post( 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          '/edu-app/open/userOrder/executePayment', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            data: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+              ...payMap 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        ); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        postMessage({ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          api: 'paymentOrder', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          content: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            orderNo: props.paymentConfig.orderNo, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            payChannel: state.payType === 'zfb' ? 'ali_app' : 'wx_app', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            payInfo: data.reqParams.body || JSON.stringify(data.reqParams) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        showLoadingToast({ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          message: '支付中...', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          forbidClick: true, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          duration: 3000, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          loadingType: 'spinner' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        emit('close'); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        // 唤起支付时状态 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        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 只有安卓端有 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      closeToast(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      if (res.status === 'success' || res.status === 'error') { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        emit('close'); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        router.replace({ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          path: '/payment-result', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          query: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            orderNo: props.paymentConfig.orderNo 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      } else if (res.status === 'cancel') { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        emit('close'); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      } else if (res.status === 'fail') { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        const message = 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          state.payType === 'zfb' ? '您尚未安装支付宝' : '您尚未安装微信'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        showDialog({ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          title: '提示', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          message 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }).then(() => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          emit('close'); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    }; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    const submitQrCodePay = () => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				       const pt = state.payType; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				       // 判断当前浏览器 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				       if (browser().weixin) { 
			 | 
		
	
	
		
			
				| 
					
				 | 
			
			
				@@ -96,34 +235,38 @@ 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="wechat-pay" color="#15c434" size={22} /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                ), 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                'right-icon': () => <Radio name="wx" />, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                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="alipay" color="#009fe9" size={22} />, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                'right-icon': () => <Radio name="zfb" /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-              }}></Cell> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            {isWxPay.value && ( 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+              <Cell 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                border={true} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                center 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                onClick={() => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                  state.payType = 'wx'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                }} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                v-slots={{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                  icon: () => ( 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    <Icon name="wechat-pay" color="#15c434" size={22} /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                  ), 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                  'right-icon': () => <Radio name="wx" />, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                  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="alipay" color="#009fe9" size={22} />, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                  'right-icon': () => <Radio name="zfb" /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                }}></Cell> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            )} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				           </CellGroup> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         </RadioGroup> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 |