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

import React from 'react';
import './index.less';
import { Link } from 'react-router-dom';
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 { Order } from '../../../stores/order';
import { Main } from '../../../stores/main';
// import { ServiceKey } from '../../../../Constant';

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

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

  initData() {
    const { id } = this.params;
    Order.getOrder(id).then(result => {
      this.setState({ data: result });
    });
    Main.getContract('course').then(result => {
      this.setState({ contract: result });
    });
  }

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

  renderView() {
    const { productType } = this.state;
    let info = '';
    if (productType === 'data') {
      info = this.renderData();
    }
    if (productType === 'course_package') {
      info = this.renderCoursePackage();
    } else {
      info = this.renderSingle();
    }
    info = this.renderData();
    return (
      <div className="detail">
        <div className="title" style={{ marginBottom: 0 }}>
          商品信息
        </div>
        {info}
        <div className="title">退款政策</div>
        <div className="desc">本产品为虚拟产品，购买成功后不支持退款。</div>
        <div className="title">版权说明</div>
        <div className="desc">本商品仅限购买者本人使用，不可商用和传播。</div>
        <div className="agree">
          <Checkbox />
          我已阅读并同意 <Link to="">千行课程购买协议</Link>
        </div>
        <div className="fixed">
          <div className="tip">*若在购买过程中遇到问题，请联系千行小助手协助解决</div>
          <div className="fee">
            应付: <Money value={1000} size="lager" />
          </div>
          <Button
            width={110}
            className="f-r"
            radius
            onClick={() => {
              this.buy();
            }}
          >
            立即购买
          </Button>
        </div>
      </div>
    );
  }

  renderData() {
    return (
      <div className="info data">
        <div className="info-block">
          XXXXXX资料 <Money className="f-r" value={300} />
        </div>
        <div className="info-block">
          <div className="info-item">
            OG 20 语法 SC <span className="f-r">开通有效期: 3个月 使用有效期: 3个月</span>
          </div>
          <div className="info-item">
            OG 20 语法 SC <span className="f-r">开通有效期: 3个月 使用有效期: 3个月</span>
          </div>
          <div className="info-item">
            OG 20 语法 SC <span className="f-r">开通有效期: 3个月 使用有效期: 3个月</span>
          </div>
        </div>
      </div>
    );
  }

  renderCoursePackage() {
    return (
      <div className="info course-package">
        <div className="info-block">
          OG 20套餐 <Money className="f-r" value={300} />
        </div>
        <div className="info-block">
          开通有效期 <span className="f-r">3个月</span>
        </div>
        <div className="info-block">
          使用有效期 <span className="f-r">3个月</span>
        </div>
      </div>
    );
  }

  renderSingle() {
    return (
      <div className="info single">
        <div className="info-block">
          OG 20套餐 <Money className="f-r" value={300} />
        </div>
        <div className="info-block">
          开通有效期 <span className="f-r">3个月</span>
        </div>
        <div className="info-block">
          使用有效期 <span className="f-r">3个月</span>
        </div>
      </div>
    );
  }
}