123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475 |
- import React, { Component } from 'react';
- import './index.less';
- import { Checkbox, Icon } from 'antd';
- import Assets from '@src/components/Assets';
- import { formatDate } from '@src/services/Tools';
- import Tabs from '../Tabs';
- import Modal from '../Modal';
- import QrCode from '../QrCode';
- import { Order } from '../../stores/order';
- import { Main } from '../../stores/main';
- import { My } from '../../stores/my';
- import { User } from '../../stores/user';
- export class PayModal extends Component {
- constructor(props) {
- super(props);
- this.state = { show: true };
- }
- componentWillReceiveProps(nextProps) {
- if (nextProps.user.needPay && !this.init) {
- this.init = true;
- Main.getContract('course')
- .then((result) => {
- this.setState({ contract: result });
- });
- }
- }
- changePay(key) {
- const { order } = this.props.user;
- if (!order) return;
- this.setState({ payInfo: {}, pay: key });
- let handler = null;
- switch (key) {
- case 'wechatpay':
- handler = Order.wechatQr(order.id)
- .then((result) => {
- result.qr = Main.qrCode(result.request);
- this.setState({ payInfo: result });
- });
- break;
- case 'alipay':
- handler = Order.alipayQr(order.id)
- .then((result) => {
- result.qr = Main.qrCode(result.request);
- this.setState({ payInfo: result });
- });
- break;
- default:
- return;
- }
- handler.then(() => {
- this.queryPay();
- });
- }
- queryPay(force) {
- const { order, needPay } = this.props.user;
- if (this.time) {
- clearTimeout(this.time);
- }
- if (force) {
- this.times = 0;
- } else {
- this.times = (this.times || 0) + 1;
- }
- this.time = setTimeout(() => {
- Order.query(order.id)
- .then(result => {
- if (result) {
- // 支付成功
- this.paySuccess();
- } else if (needPay) {
- this.queryPay();
- } else {
- this.setState({ select: null, pay: null, order: null, info: null });
- }
- });
- }, 1000);
- }
- paySuccess() {
- const { order } = this.props.user;
- const { info } = this.props.user;
- Order.getOrder(order.id).then(result => {
- User.formatOrder(result);
- // 确保开通用的是record记录id
- const [checkout] = result.checkouts;
- checkout.info.result = checkout.info.result.replace('{email}', info.email).replace('{useExpireDays}', checkout.useExpireDays).replace('{title}', checkout.title);
- if (checkout.service === 'vip') {
- // 查询最后有效期
- My.getVipInfo().then(vip => {
- checkout.info.result = checkout.info.result.replace('{endTime}', formatDate(vip.expireTime, 'YYYY-MM-DD'));
- User.refreshToken();
- this.setState({ show: false, showVipEnd: true, order: result, checkout });
- });
- } else if (checkout.productType === 'service') {
- User.refreshToken();
- } else if (order.checkouts.length === 1 && checkout.productType === 'data') {
- this.setState({ show: false, showDataEnd: true, order: result, checkout });
- } else if (order.checkouts.length === 1) {
- this.setState({ show: false, showEnd: true, order: result, checkout });
- } else {
- User.closePay();
- }
- });
- }
- confirm() {
- const { pay } = this.state;
- if (pay === 'bank') {
- this.setState({ showBank: true, show: false });
- } else {
- //
- }
- }
- open() {
- const { checkout } = this.state;
- Order.useRecord(checkout.id)
- .then(() => {
- User.closePay();
- this.setState({ show: true, pay: null });
- });
- }
- read() {
- User.closePay();
- linkTo('/my/data');
- }
- close() {
- const { showEnd, showBank } = this.state;
- User.closePay(showEnd || showBank ? null : new Error('支付失败'));
- this.setState({ show: true, pay: null, showEnd: false, showBank: false });
- }
- render() {
- const { needPay, order } = this.props.user;
- const { show, showBank, showEnd, showDataEnd, showVipEnd, contract, payInfo } = this.state;
- if (!needPay) return [];
- return [
- showBank && <PayKBankModal
- show
- order={order}
- checkout={order.checkouts[0]}
- onConfirm={() => this.close()}
- />,
- showEnd && <PayMEndModal
- show
- order={order}
- checkout={order.checkouts[0]}
- onCancel={() => this.close()}
- onClose={() => this.close()}
- onConfirm={() => this.open()}
- />,
- showDataEnd && <PayMDataEndModal
- show
- order={order}
- checkout={order.checkouts[0]}
- onCancel={() => this.close()}
- onClose={() => this.close()}
- onConfirm={() => this.read()}
- />,
- showVipEnd && <PayMVipEndModal
- show
- order={order}
- checkout={order.checkouts[0]}
- onConfirm={() => this.close()}
- />,
- show && (order.checkouts.length > 1 || order.checkouts[0].productType === 'course_package') && <PayMutilModal
- show
- contract={contract}
- order={order}
- payInfo={payInfo}
- onChangePay={(key) => this.changePay(key)}
- onCancel={() => this.close()}
- onClose={() => this.close()}
- onConfirm={() => this.confirm()}
- />,
- show && (order.checkouts.length === 1 && order.checkouts[0].productType !== 'course_package') && <PayMModal
- show
- contract={contract}
- order={order}
- payInfo={payInfo}
- checkout={order.checkouts[0]}
- productType={order.productTypes[0]}
- onChangePay={(key) => this.changePay(key)}
- onCancel={() => this.close()}
- onClose={() => this.close()}
- onConfirm={() => this.confirm()}
- />,
- ];
- }
- }
- export class PayMModal extends Component {
- constructor(props) {
- super(props);
- const payList = [{ key: 'alipay', title: '支付宝' }, { key: 'wechatpay', title: '微信' }];
- if (props.productType === 'course') {
- payList.push({ key: 'bank', title: '银行转账' });
- }
- this.state = { pay: 'alipay', payList, checked: true, showChecked: props.productType === 'course' };
- setTimeout(() => {
- props.onChangePay('alipay');
- }, 100);
- }
- render() {
- const { show, checkout, onClose, onConfirm, onChangePay, order, payInfo = {}, contract = {}, productType } = this.props;
- const { info } = checkout;
- const { pay, payList, checked, showChecked } = this.state;
- return (
- <Modal
- className="pay-modal"
- show={show}
- width={760}
- title={`购买${checkout.title}`}
- confirmText={pay === 'bank' ? '确认' : '支付成功'}
- onConfirm={pay === 'bank' ? onConfirm : null}
- // cancelText="稍后开通"
- // onCancel={onCancel}
- onClose={onClose}
- >
- <div className="pay-modal-wrapper">
- <div className="info-layout">
- <div className="desc">
- 商品: {productType === 'data' ? info.title : checkout.title}<br />
- {productType !== 'course' && `服务: ${productType === 'data' ? checkout.title : info.description}`}{productType === 'course' && <span>服务: 见<a href={`/contract/${contract.key}`} target="_blank">{contract.title}</a></span>}<br />
- 开通有效期: {checkout.expireDays ? `${checkout.expireDays}天` : '付款后立即生效'}
- <br />
- 使用有效期: {checkout.useExpireDays ? `${checkout.useExpireDays}天` : '永久'}
- <br />
- 退款政策: {info.refund_policy}
- <br />
- 版权说明: {info.copyright_notes}
- </div>
- <div className="money">
- <div className="t-2">应付金额:</div>
- <div className="t-1 f-w-b t-s-24">¥ {order.money}</div>
- </div>
- </div>
- <div className="pay-layout">
- <Tabs
- border
- size="small"
- active={pay}
- width={80}
- tabs={payList}
- render={item => <Assets name={item.key} />}
- onChange={key => {
- this.setState({ pay: key });
- onChangePay(key);
- }}
- />
- <div hidden={pay === 'bank'} className="pay">
- <div className="qrcode">
- <QrCode width={140} height={140} qrCode={payInfo.qr} vague={!checked} refresh onRefresh={() => onChangePay(pay)} />
- </div>
- <div className="t">请使用手机微信或支付宝扫码付款</div>
- <div className="t">支付金额: ¥ {order.money}</div>
- </div>
- <div hidden={pay !== 'bank'} className="bank">
- <div className="t">汇款银行:中国工商银行上海市浦东支行</div>
- <div className="t">汇款账号:6100 0000 0000 000</div>
- </div>
- <div className="agree" hidden={!showChecked}>
- <Checkbox className="m-r-1" checked={checked} onClick={() => {
- this.setState({ showChecked: checked, checked: !checked });
- }} />
- 我已阅读并同意<a href={`/contract/${contract.key}`} target="_blank">《{contract.title}》</a>
- </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 PayMutilModal extends Component {
- constructor(props) {
- super(props);
- this.state = { pay: 'alipay', checked: true, showChecked: true };
- setTimeout(() => {
- props.onChangePay('alipay');
- }, 100);
- }
- render() {
- const { show, onConfirm, onClose, onChangePay, order, payInfo = {}, contract = {} } = this.props;
- const { pay, checked, showChecked } = this.state;
- return (
- <Modal
- className="pay-modal"
- show={show}
- width={760}
- title={'购物车结账'}
- confirmText={pay === 'bank' ? '确认' : '支付成功'}
- onConfirm={pay === 'bank' ? onConfirm : null}
- // onCancel={onCancel}
- onClose={onClose}
- >
- <div className="pay-modal-wrapper">
- <div className="info-layout">
- <div className="desc">
- 商品: {order.checkouts.map(row => (row.productType === 'course_package' ? row.children.map(r => r.title).join(' ') : row.title)).join(' ')}<br />
- 服务: 见<a href={`/contract/${contract.key}`} target="_blank">{contract.title}</a><br />
- 开通有效期: 见订单详情
- <br />
- 使用有效期: 见订单详情
- <br />
- 退款政策: 本商品为虚拟产品,购买成功后不支持退款。<br />
- 版权说明: 本商品为虚拟产品,购买成功后不支持退款。
- </div>
- <div className="money">
- <div className="t-2">应付金额:</div>
- <div className="t-1 f-w-b t-s-24">¥ {order.money}</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 });
- onChangePay(key);
- }}
- />
- <div hidden={pay === 'bank'} className="pay">
- <div className="qrcode">
- <QrCode width={140} height={140} qrCode={payInfo.qr} vague={!checked} refresh onRefresh={() => onChangePay(pay)} />
- </div>
- <div className="t">请使用手机微信或支付宝扫码付款</div>
- <div className="t">支付金额: ¥ {order.money}</div>
- </div>
- <div hidden={pay !== 'bank'} className="bank">
- <div className="t">汇款银行:中国工商银行上海市浦东支行</div>
- <div className="t">汇款账号:6100 0000 0000 000</div>
- </div>
- <div className="agree" hidden={!showChecked}>
- <Checkbox className="m-r-1" checked={checked} onClick={() => {
- this.setState({ showChecked: checked, checked: !checked });
- }} />
- 我已阅读并同意<a href={`/contract/${contract.key}`} target="_blank">《{contract.title}》</a>
- </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>
- );
- }
- }
- export class PayMEndModal extends Component {
- render() {
- const { show, onConfirm, onCancel, checkout = {} } = this.props;
- const { info } = checkout;
- return (
- <Modal
- show={show}
- width={630}
- title="付款成功"
- confirmText="立即开通"
- cancelText="稍后开通"
- onConfirm={onConfirm}
- onCancel={onCancel}
- >
- <div className="t-2 ws-pl">
- <Icon className="t-5 m-r-5" type="check" />{info.result}
- </div>
- {info.tips && <div style={{ bottom: 10, left: 0 }} className="p-a t-3 t-s-14">
- *{info.tips}
- </div>}
- </Modal>
- );
- }
- }
- export class PayMDataEndModal extends Component {
- render() {
- const { show, onConfirm, onCancel, checkout = {} } = this.props;
- const { info } = checkout;
- return (
- <Modal
- show={show}
- width={630}
- title="付款成功"
- confirmText="立即查看"
- cancelText="暂不查看"
- onConfirm={onConfirm}
- onCancel={onCancel}
- >
- <div className="t-2 ws-pl">
- <Icon className="t-5 m-r-5" type="check" />{info.result}
- </div>
- {info.tips && <div style={{ bottom: 10, left: 0 }} className="p-a t-3 t-s-14">
- *{info.tips}
- </div>}
- </Modal>
- );
- }
- }
- export class PayMVipEndModal extends Component {
- render() {
- const { show, onConfirm, checkout = {} } = this.props;
- const { info } = checkout;
- return (
- <Modal
- show={show}
- width={630}
- title="付款成功"
- confirmText="知道了"
- // cancelText="稍后开通"
- onConfirm={onConfirm}
- // onCancel={onCancel}
- >
- <div className="t-2 ws-pl">
- <Icon className="t-5 m-r-5" type="check" />{info.result}
- </div>
- {info.tips && <div style={{ bottom: 10, left: 0 }} className="p-a t-3 t-s-14">
- *{info.tips}
- </div>}
- </Modal>
- );
- }
- }
|