sourcecode/front/project/h5/routes/page/pay/page.js

import React from 'react';
import './index.less';
import Page from '@src/containers/Page';
import { Checkbox } from 'antd';
// import Assets from '@src/components/Assets';
import { getMap, formatDate } from '@src/services/Tools';
import Button from '../../../components/Button';
import Money from '../../../components/Money';
import Icon from '../../../components/Icon';
import { Order } from '../../../stores/order';
import { My } from '../../../stores/my';
import { Main } from '../../../stores/main';
import { ServiceParamMap, OrderInfoMap } from '../../../../Constant';
import { Common } from '../../../stores/common';

const ServiceParamRelation = getMap(Object.keys(ServiceParamMap).map(key => {
  return {
    map: getMap(ServiceParamMap[key].map((row, index) => {
      row.index = index;
      return row;
    }), 'value', 'index'),
    key,
  };
}), 'key', 'map');
function formatTitle(record) {
  if (record.productType === 'course_package') {
    return (record.coursePackage || {}).title;
  }
  if (record.productType === 'course') {
    return (record.course || {}).title;
  }
  if (record.productType === 'data') {
    return (record.data || {}).title;
  }
  if (record.productType === 'service') {
    return record.info.label || ((record.serviceInfo || {}).title);
  }
  return '';
}
function formatCheckout(checkouts) {
  checkouts.forEach(checkout => {
    checkout.info = OrderInfoMap[checkout.productType];
    if (checkout.productType === 'service') {
      const index = (ServiceParamRelation[checkout.service] && ServiceParamRelation[checkout.service][checkout.param]) || 0;
      checkout.info = Object.assign({}, checkout.info[checkout.service], checkout.serviceInfo.package[index]);
    }
    checkout.title = formatTitle(checkout);
  });
}
export default class extends Page {
  initState() {
    return { show: true, showEnd: false };
  }

  initData() {
    const { id } = this.params;
    Order.getOrder(id).then(order => {
      formatCheckout(order.checkouts);
      const [checkout] = order.checkouts;
      this.setState({ order, checkout });
    });
    Main.getContract('course').then(result => {
      this.setState({ contract: result });
    });
  }

  pay() {
    const { id } = this.params;
    if (this.paying) return;
    this.paying = true;
    this.setState({ paying: true });
    Order.wechatJs(id).then((info) => {
      return Common.readyWechatBridge().then(() => {
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest', info,
          (res) => {
            if (res.err_msg === 'get_brand_wcpay_request:ok') {
              // 使用以上方式判断前端返回,微信团队郑重提示：
              // res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
              this.queryPay(true);
            } else if (res.err_msg === 'get_brand_wcpay_request:cancel' || res.err_msg === 'get_brand_wcpay_request:fail') {
              // 支付失败
              this.paying = false;
              this.setState({ paying: false });
            }
            console.log(res);
          },
        );
      });
    });
  }

  queryPay(force) {
    const { order } = this.state;
    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 (order) {
            this.queryPay();
          } else {
            this.setState({ select: null, pay: null, order: null, info: null });
          }
        });
    }, 1000);
  }

  paySuccess() {
    const { order } = this.state;
    const { info } = this.props.user;
    Order.getOrder(order.id).then(result => {
      // 确保开通用的是record记录id
      const [checkout] = result.checkouts;
      formatCheckout(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'));
          this.setState({ show: false, showEnd: true, order: result, checkout });
        });
      } else {
        this.setState({ show: false, showEnd: true, order: result, checkout });
      }
    });
  }

  renderView() {
    const { show, showEnd } = this.state;
    if (show) {
      return this.renderPay();
    }
    if (showEnd) {
      return this.renderEnd();
    }
    return null;
  }

  renderPay() {
    const { order = {}, contract = {}, checkout = {} } = this.state;
    const { info = {}, productType } = checkout;
    let content = '';
    switch (productType) {
      case 'data':
        content = this.renderData();
        break;
      case 'course_package':
        content = this.renderCoursePackage();
        break;
      case 'course':
      case 'service':
        content = this.renderSingle();
        break;
      default:
    }
    return (
      <div className="detail">
        <div className="title" style={{ marginBottom: 0 }}>
          商品信息
        </div>
        {content}
        {info.refund_policy && [< div className="title">退款政策</div>,
          <div className="desc">{info.refund_policy}</div>]}
        {info.copyright_notes && [<div className="title">版权说明</div>,
          <div className="desc">{info.copyright_notes}</div>]}
        {order.productTypes && order.productTypes.indexOf('course') > 0 && <div className="agree">
          <Checkbox checked />
          我已阅读并同意 <a onClick={() => this.setState({ showContract: true })}>{contract.title}</a>
        </div>}
        <div className="fixed">
          <div className="tip">*若在购买过程中遇到问题，请联系千行小助手协助解决</div>
          <div className="fee">
            应付: <Money value={order.money} size="lager" />
          </div>
          <Button
            width={110}
            className="f-r"
            radius
            disabled={this.state.paying}
            onClick={() => {
              this.pay();
            }}
          >
            立即购买
          </Button>
        </div>
      </div >
    );
  }

  renderData() {
    const { checkout } = this.state;
    return (
      <div className="info data">
        <div className="info-block">
          {checkout.title} <Money className="f-r" value={checkout.money} />
        </div>
        <div className="info-block">
          开通有效期 <span className="f-r">{checkout.expireDays ? `${checkout.expireDays}天` : '永久'}</span>
        </div>
      </div>
    );
  }

  renderCoursePackage() {
    const { checkout, order } = this.state;
    return (
      <div className="info course-package">
        <div className="info-block">
          {checkout.title} <Money className="f-r" value={checkout.money} />
        </div>
        <div className="info-block">
          {order.checkouts.map(row => {
            if (row.parentId === 0) return null;
            return <div className="info-item">
              {row.title} <span className="f-r">开通有效期: {checkout.expireDays ? `${checkout.expireDays}天` : '付款后立即生效'} 使用有效期: {checkout.useExpireDays ? `${checkout.useExpireDays}天` : '永久'}</span>
            </div>;
          })}
        </div>
      </div>
    );
  }

  renderSingle() {
    const { checkout = {} } = this.state;
    return (
      <div className="info single">
        <div className="info-block">
          {checkout.title} <Money className="f-r" value={checkout.money} />
        </div>
        <div className="info-block">
          开通有效期 <span className="f-r">{checkout.expireDays ? `${checkout.expireDays}天` : '付款后立即生效'}</span>
        </div>
        <div className="info-block">
          使用有效期 <span className="f-r">{checkout.useExpireDays ? `${checkout.useExpireDays}天` : '永久'}</span>
        </div>
      </div>
    );
  }

  renderEnd() {
    const { checkout = {} } = this.state;
    const { info = {} } = checkout;
    return (
      <div className="finish">
        <div className="icon">
          <Icon type="check-circle" />
        </div>
        <div className="title">支付成功！</div>
        <div className="desc">{info.result}</div>
      </div>
    );
  }
}