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';
import Modal from '../../../components/Modal';
import UserTable from '../../../components/UserTable';
import IconButton from '../../../components/IconButton';
import { Order } from '../../../stores/order';
import { User } from '../../../stores/user';
import { formatDate } from '../../../../../src/services/Tools';
// import { ServiceKey, ServiceParamMap, OrderInfoMap } from '../../../../Constant';

export default class extends Page {
  initData() {
    const { id } = this.params;
    Order.getOrder(id)
      .then(result => {
        User.formatOrder(result);
        this.setState({ order: result, list: result.checkouts });
      });
  }

  renderView() {
    const { order = {}, 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">订单编号 {order.id}</div>
        </div>
        <div className="list content">
          {(list || []).map(item => {
            return <OrderItem data={item} />;
          })}
        </div>
        <div className="gift-list content">
          {(order.gift || []).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>¥ {order.originMoney}</span>
          </div>
          {order.originMoney - order.money > 0 && <div className="t-2 t-s-12 item">
            <span>优惠金额</span>
            <span>¥ {order.originMoney - order.money}</span>
          </div>}
          <div className="t-2 t-s-12 item">
            <span>实付金额</span>
            <span>¥ {order.money}</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>
              {order.payMethod && <Assets name={order.payMethod === 'wechat' ? 'wechatpay' : order.payMethod} />}
              {/* alipay wechatpay bank */}
            </span>
          </div>
          <div className="t-2 t-s-12 item">
            <span>付款时间</span>
            <span>{order.payTime && formatDate(order.payTime, 'YYYY-MM-DD HH:mm:ss')}</span>
          </div>
        </div>
      </div>
    );
  }
}

class GiftItem extends Component {
  render() {
    const { data } = this.props;
    let message = '';
    if (data.money) {
      message = `实付金额满${data.money}元赠送`;
    } else if (data.from === 'vsNumber') {
      message = `1VS1课程满${data.number}节赠送`;
    }
    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" />
          {data.message}
        </div>
        <div style={{ marginRight: 80 }} className="d-i-b t-2 t-s-12 f-r">
          {message}
        </div>
      </div>
    );
  }
}

class OrderItem extends Component {
  constructor(props) {
    super(props);
    this.state = { open: false, showList: false };
    this.columns = [{
      key: 'label',
      title: '服务',
    }, {
      key: 'expireDays',
      title: '开通有效期',
      render: (text, checkout) => {
        return checkout.expireDays ? `${checkout.expireDays}天` : '付款后立即生效';
      },
    }, {
      key: 'useExpireDays',
      title: '使用有效期',
      render: (text, checkout) => {
        return checkout.useExpireDays ? `${checkout.useExpireDays}天` : '永久';
      },
    }];
  }

  render() {
    const { data = {} } = this.props;
    const { showList } = this.state;
    return (
      <div className="order-item">
        {this.renderInfo()}
        {(data.children || data.gift) && this.renderDetail()}

        <Modal
          show={showList}
          maskClosable
          close={false}
          body={false}
          width={630}
          onClose={() => this.setState({ showList: false })}
        >
          <UserTable
            size="small"
            theme="top"
            columns={this.columns}
            data={data.gift}
          />
        </Modal>
      </div>
    );
  }

  renderInfo() {
    const { data } = this.props;
    const checkout = data;
    return (
      <div className="order-item-info">
        <div style={{ width: 360 }} className="d-i-b t-1 t-s-16">
          {data.title}
        </div>
        <div style={{ width: 530 }} hidden={checkout.productType === 'data'} className="d-i-b t-8 t-s-12">
          <span className="m-r-2">开通有效期: {checkout.expireDays ? `${checkout.expireDays}天` : '付款后立即生效'}</span>
          <span className="m-l-2">使用有效期: {checkout.useExpireDays ? `${checkout.useExpireDays}天` : '永久'}</span>
        </div>
        <div style={{ width: 530 }} hidden={checkout.productType !== 'data'} className="d-i-b t-8 t-s-12">
          <IconButton
            type="download"
            onClick={() => {
              openLink(checkout.data.resource);
            }}
          />
        </div>
        <div style={{ width: 120 }} className="d-i-b t-s-12 p-r">
          {data.number > 0 && <span className="t-8 m-r-2">数量</span>}
          {data.number > 0 && <span className="t-1">{data.number}</span>}
        </div>
        <div className="d-i-b t-7 t-s-16"> ¥ {data.money}</div>
      </div>
    );
  }

  renderDetail() {
    const { data = {} } = this.props;
    const { children = [], gift } = data;
    const { open } = this.state;
    return (
      <div className="order-item-detail l-h-20">
        <div hidden={!children || children.length === 0} 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">
              {(children || []).map(checkout => checkout.title).join(' + ')}
            </span>
          </div>
          <div className="d-i-b t-1 t-s-12 t-d-l-t"> ¥ {data.originMoney}</div>
        </div>
        <div hidden={!open} className="contain-list m-b-5 l-h-16">
          {(children || []).map(checkout => {
            return <div>
              <div style={{ width: 360 }} className="d-i-b t-1 t-s-12">
                <span className="d-i-b m-r-5">{checkout.title}</span>
              </div>
              <div className="d-i-b t-8 t-s-12">
                <span className="m-r-2">开通有效期: {checkout.expireDays ? `${checkout.expireDays}天` : '付款后立即生效'}</span>
                <span className="m-l-2">使用有效期: {checkout.useExpireDays ? `${checkout.useExpireDays}天` : '永久'}</span>
              </div>
            </div>;
          })}
        </div>
        {gift && <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">
              {gift.map(row => {
                return `${row.label}x${row.param ? row.param.label : row.number}`;
              }).join(' ')}
              <Icon className="m-l-5 close" type="exclamation-circle" theme="filled" onClick={() => {
                this.setState({ showList: true });
              }} />
            </span>
          </div>
        </div>}
      </div>
    );
  }
}