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 } from '@src/services/Tools';
import Button from '../../../components/Button';
import Money from '../../../components/Money';
import { Order } from '../../../stores/order';
import { Main } from '../../../stores/main';
import { ServiceKey, OrderInfoMap } from '../../../../Constant';

const ServiceKeyMap = getMap(ServiceKey, 'value', 'label');

export default class extends Page {
  initState() {
    return {};
  }

  initData() {
    const { id } = this.params;
    Order.getOrder(id).then(order => {
      order.packageMap = {};
      (order.packages || []).forEach(row => {
        order.packageMap[row.id] = row;
      });
      order.courseMap = {};
      (order.courses || []).forEach(row => {
        order.courseMap[row.id] = row;
      });
      order.dataMap = {};
      (order.datas || []).forEach(row => {
        order.dataMap[row.id] = row;
      });
      order.checkouts.forEach(checkout => {
        checkout.info = OrderInfoMap[checkout.productType];
        switch (checkout.productType) {
          case 'service':
            checkout.title = ServiceKeyMap[checkout.service];
            checkout.info = checkout.info[checkout.service];
            break;
          case 'data':
            checkout.title = order.dataMap[checkout.productId].title;
            break;
          case 'course_package':
            checkout.title = order.packageMap[checkout.productId].title;
            break;
          case 'course':
            checkout.title = order.courseMap[checkout.productId].title;
            break;
          default:
        }
      });
      const [checkout] = order.checkouts.filter(row => row.parentId === 0);
      this.setState({ order, checkout });
    });
    Main.getContract('course').then(result => {
      this.setState({ contract: result });
    });
  }

  pay() {
    const { id } = this.params;
    Order.wechatJs(id).then(() => { });
  }

  renderView() {
    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">本产品为虚拟产品，购买成功后不支持退款。</div>]}
        {info.copyright_notes && [<div className="title">版权说明</div>,
          <div className="desc">本商品仅限购买者本人使用，不可商用和传播。</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
            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;
    console.log(checkout);
    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>
    );
  }
}