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 { asyncSMessage } from '@src/services/AsyncTools';
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, InvoiceType } from '../../../../Constant';

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

function formatTitle(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[record.service]}`;
  }
  return '';
}

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

  init() {
    this.columns = [
      {
        title: '订单编号',
        key: 'id',
        render: text => {
          return text;
        },
      },
      {
        title: '服务',
        key: 'title',
        render: (text, record) => {
          const actionList = [];
          // if (record.canInvoice && !record.hasInvoice) {
          actionList.push({ key: 'invoice', label: '开发票' });
          // }
          actionList.push({ key: 'detail', label: '订单详情' });
          const onAction = value => {
            const { key } = value;
            switch (key) {
              case 'invoice':
                this.setState({
                  showInvoice: true,
                  invoice: { orderId: record.id, money: record.invoiceMoney, invoiceType: InvoiceType[0].value },
                });
                break;
              case 'detail':
                openLink(`/order/detail/${record.id}`);
                break;
              default:
            }
          };
          let content = [];
          if (record.checkouts.length > 3) {
            content.push(
              <div className="flex-layout m-b-5">
                <div className="flex-block">
                  {formatTitle(record.checkouts[0])}
                  <br />等{record.checkouts.length}个商品
                </div>
                <More menu={actionList} onClick={onAction}>
                  <IconButton type="more" />
                </More>
              </div>,
            );
          } else {
            content = record.checkouts.map((row, index) => {
              return (
                <div className="flex-layout m-b-5">
                  <div className="flex-block">{formatTitle(row)}</div>
                  {index === 0 && (
                    <More menu={actionList} onClick={onAction}>
                      <IconButton type="more" />
                    </More>
                  )}
                  {row.productType === 'data' && (
                    <IconButton
                      type="download"
                      onClick={() => {
                        openLink(row.data.resource);
                      }}
                    />
                  )}
                </div>
              );
            });
          }
          return <div className="t-2">{content}</div>;
        },
      },
      {
        title: '购买时间',
        key: 'createTime',
        render: text => {
          return (
            <div className="sub">
              <div className="t-2 t-s-12">{text.split(' ')[0]}</div>
              <div className="t-6 t-s-12">{text.split(' ')[1]}</div>
            </div>
          );
        },
      },
      {
        title: '付款方式',
        key: 'payMethod',
        render: text => {
          return RecordSourceMap[text];
        },
      },
      {
        title: '付款金额',
        key: 'money',
        render: text => {
          return <span className="t-7">¥{formatMoney(text)}</span>;
        },
      },
    ];
  }

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

  initData() {
    Order.list(this.state.search).then(result => {
      result.list = result.list.map(row => {
        row.checkouts = row.checkouts || [];
        row.createTime = formatDate(row.createTime, 'YYYY-MM-DD HH:mm:ss');
        return row;
      });
      this.setState({ list: result.list, total: result.total, page: this.state.search.page });
    });
  }

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

  submitInvoice(invoice) {
    if (!invoice.title) return;
    if (invoice.invoiceType === 'enterprise' && !invoice.identity) return;
    Order.openInvoice(invoice)
      .then(() => {
        this.refresh();
        this.setState({ showFinish: true, showInvoice: false, invoice: {} });
      })
      .catch(e => {
        asyncSMessage(e.message, 'error');
      });
  }

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

  renderTable() {
    const { list, total, page, showInvoice, showInvoiceFinish, invoice = {} } = this.state;
    const { info } = this.props.user;
    return (
      <div className="table-layout">
        <UserTable
          size="small"
          columns={this.columns}
          data={list}
          onChange={p => this.onChangePage(p)}
          total={total}
          current={page}
          pageSize={this.state.search.size}
        />
        <Modal
          show={showInvoice}
          title="开发票"
          width={630}
          btnType="link"
          confirmText="申请"
          onConfirm={() => this.submitInvoice(invoice)}
          onCancel={() => this.setState({ showInvoice: false })}
        >
          <div className="input-layout m-b-2 t-2 t-s-16">
            <div className="label m-r-5">发票类型:</div>
            <div className="input-block">
              <Radio checked />
              普通增值税电子发票
            </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">
              {InvoiceType.map(row => {
                return (
                  <span className="m-r-2">
                    <Radio
                      checked={invoice.invoiceType === row.value}
                      onChange={() => {
                        invoice.invoiceType = row.value;
                        this.setState({ invoice });
                      }}
                    />
                    {row.label}
                  </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
                value={invoice.title}
                style={{ width: 330, paddingTop: 3, paddingBottom: 3 }}
                className="b-c-1 p-l-1 p-r-1 p-l-1"
                onChange={e => {
                  invoice.title = e.target.value;
                  this.setState({ invoice });
                }}
              />
            </div>
          </div>
          {invoice.invoiceType === 'enterprise' && (
            <div className="input-layout m-b-2 t-2 t-s-16">
              <div className="label m-r-5">纳税人识别号:</div>
              <div className="input-block">
                <input
                  value={invoice.identity}
                  style={{ width: 300, paddingTop: 3, paddingBottom: 3 }}
                  className="b-c-1 p-l-1 p-r-1 p-l-1"
                  onChange={e => {
                    invoice.identity = e.target.value;
                    this.setState({ invoice });
                  }}
                />
              </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 checked />
              商品明细
            </div>
          </div>
          <div className="input-layout t-2 t-s-16">
            <div className="label m-r-5">发票金额:</div>
            <div className="input-block">¥ {formatMoney(invoice.money)}</div>
          </div>
        </Modal>
        <Modal
          show={showInvoiceFinish}
          title="申请成功"
          width={630}
          confirmText="好的，知道了"
          btnAlign="center"
          onConfirm={() => this.setState({ showInvoiceFinish: false })}
        >
          <div className="t-2 t-s-18">
            <Icon className="t-5 m-r-5" type="check" />
            我们会在三个工作日内将电子发票发送至您的绑定邮箱:
          </div>
          <div className="t-2 t-s-18">{info.email}</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>
    );
  }
}