classroom-app/src/views/adapay/payment/index.tsx

import {
  Button,
  Cell,
  CellGroup,
  Icon,
  RadioGroup,
  Radio,
  showConfirmDialog,
  showLoadingToast,
  closeToast,
  showDialog
} from 'vant';
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',
  props: {
    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: ''
    });
    const onClose = () => {
      // 继续支付则直接关闭弹窗就可
      showConfirmDialog({
        message: '是否放弃本次付款',
        confirmButtonText: '继续付款',
        cancelButtonText: '放弃',
        showCancelButton: true
      }).catch(async () => {
        await onCancel();
        emit('backOut');
        emit('close');
      });
    };

    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) {
        // 微信浏览器
        if (pt == 'zfb') {
          state.pay_channel = 'alipay_qr';
          getCodePay('qrCode');
        } else if (pt == 'wx') {
          state.pay_channel = 'wx_pub';
          getCodePay('pay');
        }
      } else if (browser().alipay) {
        // 支付宝浏览器
        if (pt == 'zfb') {
          state.pay_channel = 'alipay_wap';
          // 支付宝 H5 支付
          getCodePay('pay');
        } else if (pt == 'wx') {
          state.pay_channel = 'wx_pub';
          getCodePay('qrCode');
        }
      } else {
        if (pt == 'zfb') {
          state.pay_channel = 'alipay_qr';
        } else if (pt == 'wx') {
          state.pay_channel = 'wx_pub';
        }
        getCodePay('qrCode');
      }
    };

    const getCodePay = (code: any) => {
      // 二维码页面， 唤起支付页面
      const payCode = code == 'qrCode' ? 'payCenter' : 'payResult';
      emit('confirm', {
        payCode,
        pay_channel: state.pay_channel
      });
    };
    return () => (
      <div class={styles.payment}>
        <Icon onClick={onClose} name="cross" size={20} />
        <div class={[styles.title]}>选择支付方式</div>

        <div class={styles.payAmount}>
          <p>应付金额</p>
          <div class={styles.amount}>
            <span>￥ </span>
            {moneyFormat(props.paymentConfig.currentPrice)}
          </div>
        </div>
        <RadioGroup v-model={state.payType}>
          <CellGroup border={false}>
            {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>

        <div class={styles.blank}></div>
        <Button
          type="primary"
          class={styles.payBtn}
          block
          round
          onClick={onSubmit}>
          确认支付
        </Button>
      </div>
    );
  }
});