|  | @@ -5,11 +5,17 @@ import {
 | 
											
												
													
														|  |    Icon,
 |  |    Icon,
 | 
											
												
													
														|  |    RadioGroup,
 |  |    RadioGroup,
 | 
											
												
													
														|  |    Radio,
 |  |    Radio,
 | 
											
												
													
														|  | -  showConfirmDialog
 |  | 
 | 
											
												
													
														|  | 
 |  | +  showConfirmDialog,
 | 
											
												
													
														|  | 
 |  | +  showLoadingToast,
 | 
											
												
													
														|  | 
 |  | +  closeToast,
 | 
											
												
													
														|  | 
 |  | +  showDialog
 | 
											
												
													
														|  |  } from 'vant';
 |  |  } from 'vant';
 | 
											
												
													
														|  | -import { defineComponent, reactive } from 'vue';
 |  | 
 | 
											
												
													
														|  | 
 |  | +import { computed, defineComponent, reactive } from 'vue';
 | 
											
												
													
														|  |  import styles from './index.module.less';
 |  |  import styles from './index.module.less';
 | 
											
												
													
														|  |  import { browser, moneyFormat } from '@/helpers/utils';
 |  |  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({
 |  |  export default defineComponent({
 | 
											
												
													
														|  |    name: 'payment',
 |  |    name: 'payment',
 | 
											
										
											
												
													
														|  | @@ -17,10 +23,15 @@ export default defineComponent({
 | 
											
												
													
														|  |      paymentConfig: {
 |  |      paymentConfig: {
 | 
											
												
													
														|  |        type: Object,
 |  |        type: Object,
 | 
											
												
													
														|  |        default: {}
 |  |        default: {}
 | 
											
												
													
														|  | 
 |  | +    },
 | 
											
												
													
														|  | 
 |  | +    config: {
 | 
											
												
													
														|  | 
 |  | +      type: Object,
 | 
											
												
													
														|  | 
 |  | +      default: {}
 | 
											
												
													
														|  |      }
 |  |      }
 | 
											
												
													
														|  |    },
 |  |    },
 | 
											
												
													
														|  |    emits: ['backOut', 'close', 'confirm'],
 |  |    emits: ['backOut', 'close', 'confirm'],
 | 
											
												
													
														|  |    setup(props, { slots, attrs, emit }) {
 |  |    setup(props, { slots, attrs, emit }) {
 | 
											
												
													
														|  | 
 |  | +    const router = useRouter();
 | 
											
												
													
														|  |      const state = reactive({
 |  |      const state = reactive({
 | 
											
												
													
														|  |        payType: 'wx',
 |  |        payType: 'wx',
 | 
											
												
													
														|  |        pay_channel: ''
 |  |        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 onCancel = async (noBack?: boolean) => {};
 | 
											
												
													
														|  |      const onSubmit = async () => {
 |  |      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;
 |  |        const pt = state.payType;
 | 
											
												
													
														|  |        // 判断当前浏览器
 |  |        // 判断当前浏览器
 | 
											
												
													
														|  |        if (browser().weixin) {
 |  |        if (browser().weixin) {
 | 
											
										
											
												
													
														|  | @@ -96,34 +235,38 @@ export default defineComponent({
 | 
											
												
													
														|  |          </div>
 |  |          </div>
 | 
											
												
													
														|  |          <RadioGroup v-model={state.payType}>
 |  |          <RadioGroup v-model={state.payType}>
 | 
											
												
													
														|  |            <CellGroup border={false}>
 |  |            <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>
 |  |            </CellGroup>
 | 
											
												
													
														|  |          </RadioGroup>
 |  |          </RadioGroup>
 | 
											
												
													
														|  |  
 |  |  
 |