123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277 |
- 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, InvoiceType } from '../../../../Constant';
- import { User } from '../../../stores/user';
- const RecordSourceMap = getMap(RecordSource, 'value', 'label');
- 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: '开发票' });
- }
- if (record.canInvoice) {
- 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/${record.id}`);
- break;
- default:
- }
- };
- let content = [];
- if (record.checkouts.length > 3) {
- content.push(
- <div className="flex-layout m-b-5">
- <div className="flex-block">
- {record.checkouts[0].title}
- <br />等{record.checkouts.length}个商品
- </div>
- {actionList.length > 0 && <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">{row.title}</div>
- {index === 0 && actionList.length > 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 || [];
- User.formatOrder(row);
- 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>
- );
- }
- }
|