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> ); } }