sourcecode/front/project/www/components/PayModal/index.js

import React, { Component } from 'react';
import './index.less';
import { Link } from 'react-router-dom';
import { Checkbox, Icon } from 'antd';
import Assets from '@src/components/Assets';
import Tabs from '../Tabs';
import Modal from '../Modal';

export class PayMModal extends Component {
  constructor(props) {
    super(props);
    this.state = { pay: 'alipay' };
  }

  render() {
    const { show, desc, onConfirm, onCancel } = this.props;
    const { pay } = this.state;
    return (
      <Modal
        className="pay-modal"
        show={show}
        width={760}
        title="购买 千行-CAT 模考"
        confirmText="支付成功"
        cancelText="稍后开通"
        onConfirm={onConfirm}
        onCancel={onCancel}
      >
        <div className="pay-modal-wrapper">
          <div className="info-layout">
            <div className="desc">{desc}</div>
            <div className="money">
              <div className="t-2">应付金额：</div>
              <div className="t-1 f-w-b t-s-24">¥ 8888.88</div>
            </div>
          </div>
          <div className="pay-layout">
            <Tabs
              border
              size="small"
              active={pay}
              width={80}
              tabs={[{ key: 'alipay', title: '支付宝' }, { key: 'wechatpay', title: '微信' }]}
              render={item => <Assets name={item.key} />}
              onChange={key => this.setState({ pay: key })}
            />
            <div className="pay">
              <div className="qrcode">
                <Assets name="qrcode" />
              </div>
              <div className="t">请使用手机微信或支付宝扫码付款</div>
              <div className="t">支付金额: ¥ 300</div>
            </div>
          </div>

          <div style={{ bottom: 20, left: 0 }} className="p-a t-3 t-s-14">
            *若在购买过程中遇到问题
          </div>
          <div style={{ bottom: 0, left: 0 }} className="p-a t-3 t-s-14">
            请联系千行小助手:0193191safad 协助解决。
          </div>
        </div>
      </Modal>
    );
  }
}

export class PayMEndModal extends Component {
  render() {
    const { show, onConfirm, onCancel } = this.props;
    return (
      <Modal
        show={show}
        width={630}
        title="付款成功"
        confirmText="立即开通"
        cancelText="稍后开通"
        onConfirm={onConfirm}
        onCancel={onCancel}
      >
        <div className="t-2">
          <Icon className="t-5 m-r-5" type="check" />
          您已成功购买「千行-CAT模考（6套）」服务。
        </div>
        <div className="t-2">确认邮件已发送至您的邮箱：XXXXX，请注意查收。</div>
        <div style={{ bottom: 10, left: 0 }} className="p-a t-3 t-s-14">
          *您可至“我的-工具”开通。
        </div>
      </Modal>
    );
  }
}

export class PayKModal extends Component {
  constructor(props) {
    super(props);
    this.state = { pay: 'alipay' };
  }

  render() {
    const { show, desc, onConfirm, onCancel } = this.props;
    const { pay } = this.state;
    return (
      <Modal
        className="pay-modal"
        show={show}
        width={760}
        title="购买 千行课堂"
        confirmText={pay === 'bank' ? '确认' : '支付成功'}
        onConfirm={onConfirm}
        onCancel={onCancel}
      >
        <div className="pay-modal-wrapper">
          <div className="info-layout">
            <div className="desc">{desc}</div>
            <div className="money">
              <div className="t-2">应付金额：</div>
              <div className="t-1 f-w-b t-s-24">¥ 8888.88</div>
            </div>
          </div>
          <div className="pay-layout">
            <Tabs
              border
              size="small"
              active={pay}
              width={80}
              tabs={[
                { key: 'alipay', title: '支付宝' },
                { key: 'wechatpay', title: '微信' },
                { key: 'bank', title: '银行转账' },
              ]}
              render={item => <Assets name={item.key} />}
              onChange={key => this.setState({ pay: key })}
            />
            <div hidden={pay === 'bank'} className="pay">
              <div className="qrcode">
                <Assets name="qrcode" />
              </div>
              <div className="t">请使用手机微信或支付宝扫码付款</div>
              <div className="t">支付金额: ¥ 300</div>
            </div>
            <div hidden={pay !== 'bank'} className="bank">
              <div className="t">汇款银行：中国工商银行上海市浦东支行</div>
              <div className="t">汇款账号：6100 0000 0000 000</div>
            </div>
            <div className="agree">
              <Checkbox className="m-r-1" />
              我已阅读并同意<Link to="">千行课程购买协议</Link>
            </div>
          </div>

          <div style={{ bottom: 20, left: 0 }} className="p-a t-3 t-s-14">
            *若在购买过程中遇到问题
          </div>
          <div style={{ bottom: 0, left: 0 }} className="p-a t-3 t-s-14">
            请联系千行小助手:0193191safad 协助解决。
          </div>
        </div>
      </Modal>
    );
  }
}

export class PayKBankModal extends Component {
  render() {
    const { show, onConfirm } = this.props;
    return (
      <Modal
        show={show}
        width={630}
        title="购买千行课堂"
        btnAlign="center"
        confirmText="好的，知道了"
        onConfirm={onConfirm}
      >
        <div style={{ width: 400 }} className="t-2 t-s-18 m-b-2">
          汇款成功后，请添加微信号XXX或扫描二维码联系小助手,进行核实。
        </div>
        <div className="p-a" style={{ right: 0, top: 50 }}>
          <Assets name="qrcode" />
        </div>
      </Modal>
    );
  }
}