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

import React from 'react';
import './index.less';
import { Icon, Radio } from 'antd';
import Page from '@src/containers/Page';
import { getMap, formatMoney, formatDate } from '@src/services/Tools';
import UserLayout from '../../../layouts/User';
import menu from '../index';
import UserTable from '../../../components/UserTable';
import Modal from '../../../components/Modal';
import More from '../../../components/More';
import IconButton from '../../../components/IconButton';
import { Order } from '../../../stores/order';
import { RecordSource, ServiceKey } from '../../../../Constant';

const RecordSourceMap = getMap(RecordSource, 'value', 'label');
const ServiceKeyMap = getMap(ServiceKey, 'value', 'label');
const columns = [
  { title: '订单编号', key: 'orderId' },
  {
    title: '服务',
    key: 'title',
    render: (text, 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 `${ServiceKeyMap[text]}`;
      }
      return (
        <div className="t-2">
          <div className="flex-layout m-b-5">
            <div className="flex-block">教学资料-01</div>
            <More menu={[{ label: '开发票', key: '1' }, { label: '订单详情', key: '2' }]}>
              <IconButton type="more" />
            </More>
          </div>
          <div className="flex-layout">
            <div className="flex-block">
              教学资料-01
              <br />
              等4个商品
            </div>
            <IconButton type="more" />
          </div>
        </div>
      );
    },
  },
  {
    title: '购买时间',
    key: 'createTime',
    render: text => {
      return formatDate(text, 'YYYY-MM-DD\nHH:mm:ss');
    },
  },
  {
    title: '付款方式',
    key: 'source',
    render: text => {
      return RecordSourceMap[text];
    },
  },
  {
    title: '付款金额',
    key: 'money',
    render: text => {
      return formatMoney(text);
    },
  },
];

export default class extends Page {
  constructor(props) {
    props.size = 15;
    super(props);
  }

  initState() {
    return {
      list: [{}],
    };
  }

  initData() {
    Order.list(this.state.search).then(result => {
      this.setState({ list: result.list, total: result.total, page: this.state.search.page });
    });
  }

  onChangePage(page) {
    this.search({ page });
  }

  renderView() {
    const { config } = this.props;
    return <UserLayout active={config.key} menu={menu} center={this.renderTable()} />;
  }

  renderTable() {
    const { list, total, page } = this.state;
    return (
      <div className="table-layout">
        <UserTable
          size="small"
          columns={columns}
          data={list}
          onChange={p => this.onChangePage(p)}
          total={total}
          current={page}
        />
        <Modal title="开发票" width={630} btnType="link" confirmText="申请" onConfirm={() => {}} onCancel={() => {}}>
          <div className="input-layout m-b-2 t-2 t-s-16">
            <div className="label m-r-5">发票类型:</div>
            <div className="input-block">
              <Radio />
              普通增值税电子发票
            </div>
          </div>
          <div className="input-layout m-b-2 t-2 t-s-16">
            <div className="label m-r-5">抬头类型:</div>
            <div className="input-block">
              <span className="m-r-2">
                <Radio />
                个人
              </span>
              <span className="m-l-2">
                <Radio />
                公司
              </span>
            </div>
          </div>
          <div className="input-layout m-b-2 t-2 t-s-16">
            <div className="label m-r-5">发票抬头:</div>
            <div className="input-block">
              <input style={{ width: 330, paddingTop: 3, paddingBottom: 3 }} className="b-c-1 p-l-1 p-r-1 p-l-1" />
            </div>
          </div>
          <div className="input-layout m-b-2 t-2 t-s-16">
            <div className="label m-r-5">纳税人识别号:</div>
            <div className="input-block">
              <input style={{ width: 300, paddingTop: 3, paddingBottom: 3 }} className="b-c-1 p-l-1 p-r-1 p-l-1" />
            </div>
          </div>
          <div className="input-layout m-b-2 t-2 t-s-16">
            <div className="label m-r-5">发票内容:</div>
            <div className="input-block">
              <Radio />
              商品明细
            </div>
          </div>
          <div className="input-layout t-2 t-s-16">
            <div className="label m-r-5">发票金额:</div>
            <div className="input-block">¥ 210010.0</div>
          </div>
        </Modal>
        <Modal title="申请成功" width={630} confirmText="好的，知道了" btnAlign="center" onConfirm={() => {}}>
          <div className="t-2 t-s-18">
            <Icon className="t-5 m-r-5" type="check" />
            我们会在三个工作日内将电子发票发送至您的绑定邮箱:
          </div>
          <div className="t-2 t-s-18">201-30-2103@12321.com</div>
          <div className="m-b-2 t-2 t-s-18">请注意查收。</div>
          <div className="m-t-2 t-3 t-s-14">我们也会通过站内信的方式通知您</div>
        </Modal>
      </div>
    );
  }
}