sourcecode/front/project/www/routes/page/order/page.js

import React, { Component } from 'react';
import './index.less';
import { Icon } from 'antd';
import Assets from '@src/components/Assets';
import Page from '@src/containers/Page';

export default class extends Page {
  renderView() {
    const { _list = [{}, {}, {}] } = this.state;
    return (
      <div style={{ paddingTop: 40 }}>
        <div className="content">
          <div className="t-1 m-b-2 f-w-b t-s-24">订单详情</div>
        </div>
        <div className="content">
          <div className="m-b-1 t-8 m-b-2">订单编号 34310431-0514-05265</div>
        </div>
        <div className="list content">
          {_list.map(item => {
            return <OrderItem data={item} />;
          })}
        </div>
        <div className="gift-list content">
          {_list.map(item => {
            return <GiftItem data={item} />;
          })}
        </div>
        <div className="content block">
          <div className="t-1 t-s-18 f-w-b title">订单金额</div>
          <div className="t-2 t-s-12 item">
            <span>应付金额</span>
            <span>¥ 21200.0</span>
          </div>
          <div className="t-2 t-s-12 item">
            <span>优惠金额</span>
            <span>¥ 21200.0</span>
          </div>
          <div className="t-2 t-s-12 item">
            <span>实付金额</span>
            <span>¥ 21200.0</span>
          </div>
        </div>
        <div className="content block">
          <div className="t-1 t-s-18 f-w-b title">支付信息</div>
          <div className="t-2 t-s-12 item">
            <span>支付方式</span>
            <span>
              <Assets name="alipay" />
              {/* alipay wechatpay bank */}
            </span>
          </div>
          <div className="t-2 t-s-12 item">
            <span>付款时间</span>
            <span>2019-03-23 10:00:02</span>
          </div>
        </div>
      </div>
    );
  }
}

class GiftItem extends Component {
  render() {
    return (
      <div className="gift-item">
        <div className="d-i-b t-2 t-s-12 m-l-2">
          <Assets className="m-r-5" width={20} height={20} name="gift2" />
          16小时极速问答权限
        </div>
        <div style={{ marginRight: 80 }} className="d-i-b t-2 t-s-12 f-r">
          实付金额满20000元赠送
        </div>
      </div>
    );
  }
}

class OrderItem extends Component {
  constructor(props) {
    super(props);
    this.state = { open: false };
  }

  render() {
    return (
      <div className="order-item">
        {this.renderInfo()}
        {this.renderDetail()}
      </div>
    );
  }

  renderInfo() {
    return (
      <div className="order-item-info">
        <div style={{ width: 360 }} className="d-i-b t-1 t-s-16">
          OG 20 套餐
        </div>
        <div style={{ width: 530 }} className="d-i-b t-8 t-s-12">
          实付金额满20000元赠送
        </div>
        <div style={{ width: 120 }} className="d-i-b t-s-12 p-r">
          <span className="t-8 m-r-2">数量</span>
          <span className="t-1">1</span>
        </div>
        <div className="d-i-b t-7 t-s-16"> ¥ 15000</div>
      </div>
    );
  }

  renderDetail() {
    const { open } = this.state;
    return (
      <div className="order-item-detail l-h-20">
        <div className="contain">
          <div style={{ width: 1010 }} className="d-i-b t-1 t-s-12">
            <span className="d-i-b f-w-b m-r-5">
              包含
              <Icon
                hidden={!open}
                className="t-10 c-p"
                type="caret-up"
                onClick={() => this.setState({ open: !open })}
              />
              <Icon
                hidden={open}
                className="t-10 c-p"
                type="caret-down"
                onClick={() => this.setState({ open: !open })}
              />
            </span>
            <span hidden={open} style={{ width: 300 }} className="d-i-b nowrap">
              OG 20 语法 SC +OG 20 语法 SC +OG 20 语法 SC +OG 20 语法 SC +
            </span>
          </div>
          <div className="d-i-b t-1 t-s-12 t-d-l-t"> ¥ 123022</div>
        </div>
        <div hidden={!open} className="contain-list m-b-5 l-h-16">
          <div>
            <div style={{ width: 360 }} className="d-i-b t-1 t-s-12">
              <span className="d-i-b m-r-5">OG 20 语法 SC</span>
            </div>
            <div className="d-i-b t-8 t-s-12">
              <span className="m-r-2">开通有效期: 3个月</span>
              <span className="m-l-2">使用有效期: 3个月</span>
            </div>
          </div>
          <div>
            <div style={{ width: 360 }} className="d-i-b t-1 t-s-12">
              <span className="d-i-b m-r-5">OG 20 语法 SC</span>
            </div>
            <div className="d-i-b t-8 t-s-12">
              <span className="m-r-2">开通有效期: 3个月</span>
              <span className="m-l-2">使用有效期: 3个月</span>
            </div>
          </div>
          <div>
            <div style={{ width: 360 }} className="d-i-b t-1 t-s-12">
              <span className="d-i-b m-r-5">OG 20 语法 SC</span>
            </div>
            <div className="d-i-b t-8 t-s-12">
              <span className="m-r-2">开通有效期: 3个月</span>
              <span className="m-l-2">使用有效期: 3个月</span>
            </div>
          </div>
        </div>
        <div className="service">
          <div className="d-i-b t-1 t-s-12">
            <span className="d-i-b f-w-b m-r-5">赠送服务</span>
            <span className="d-i-b">
              机经券×1+VIP×3 月+模考×1
              <Icon className="m-l-5 close" type="exclamation-circle" theme="filled" />
            </span>
          </div>
        </div>
      </div>
    );
  }
}