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

import {
  Button,
  Cell,
  CellGroup,
  Icon,
  RadioGroup,
  Radio,
  showConfirmDialog
} from 'vant';
import { defineComponent, reactive } from 'vue';
import styles from './index.module.less';
import { browser, moneyFormat } from '@/helpers/utils';

export default defineComponent({
  name: 'payment',
  props: {
    paymentConfig: {
      type: Object,
      default: {}
    }
  },
  emits: ['backOut', 'close', 'confirm'],
  setup(props, { slots, attrs, emit }) {
    const state = reactive({
      payType: 'wx',
      pay_channel: ''
    });
    const onClose = () => {
      // 继续支付则直接关闭弹窗就可
      showConfirmDialog({
        message: '是否放弃本次付款',
        confirmButtonText: '继续付款',
        cancelButtonText: '放弃',
        showCancelButton: true
      }).catch(async () => {
        await onCancel();
        emit('backOut');
        emit('close');
      });
    };

    // 需要关闭订单
    const onCancel = async (noBack?: boolean) => {};
    const onSubmit = async () => {
      // 支付...
      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}>
            <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>
          </CellGroup>
        </RadioGroup>

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