import React from 'react'; import './index.less'; import Page from '@src/containers/Page'; import { Checkbox } from 'antd'; // import Assets from '@src/components/Assets'; import { getMap } from '@src/services/Tools'; import Button from '../../../components/Button'; import Money from '../../../components/Money'; import { Order } from '../../../stores/order'; import { Main } from '../../../stores/main'; import { ServiceKey, OrderInfoMap } from '../../../../Constant'; const ServiceKeyMap = getMap(ServiceKey, 'value', 'label'); export default class extends Page { initState() { return {}; } initData() { const { id } = this.params; Order.getOrder(id).then(order => { order.packageMap = {}; (order.packages || []).forEach(row => { order.packageMap[row.id] = row; }); order.courseMap = {}; (order.courses || []).forEach(row => { order.courseMap[row.id] = row; }); order.dataMap = {}; (order.datas || []).forEach(row => { order.dataMap[row.id] = row; }); order.checkouts.forEach(checkout => { checkout.info = OrderInfoMap[checkout.productType]; switch (checkout.productType) { case 'service': checkout.title = ServiceKeyMap[checkout.service]; checkout.info = checkout.info[checkout.service]; break; case 'data': checkout.title = order.dataMap[checkout.productId].title; break; case 'course_package': checkout.title = order.packageMap[checkout.productId].title; break; case 'course': checkout.title = order.courseMap[checkout.productId].title; break; default: } }); const [checkout] = order.checkouts.filter(row => row.parentId === 0); this.setState({ order, checkout }); }); Main.getContract('course').then(result => { this.setState({ contract: result }); }); } pay() { const { id } = this.params; Order.wechatJs(id).then(() => { }); } renderView() { const { order = {}, contract = {}, checkout = {} } = this.state; const { info = {}, productType } = checkout; let content = ''; switch (productType) { case 'data': content = this.renderData(); break; case 'course_package': content = this.renderCoursePackage(); break; case 'course': case 'service': content = this.renderSingle(); break; default: } return ( <div className="detail"> <div className="title" style={{ marginBottom: 0 }}> 商品信息 </div> {content} {info.refund_policy && [< div className="title">退款政策</div>, <div className="desc">本产品为虚拟产品,购买成功后不支持退款。</div>]} {info.copyright_notes && [<div className="title">版权说明</div>, <div className="desc">本商品仅限购买者本人使用,不可商用和传播。</div>]} {order.productTypes && order.productTypes.indexOf('course') > 0 && <div className="agree"> <Checkbox checked /> 我已阅读并同意 <a onClick={() => this.setState({ showContract: true })}>{contract.title}</a> </div>} <div className="fixed"> <div className="tip">*若在购买过程中遇到问题,请联系千行小助手协助解决</div> <div className="fee"> 应付: <Money value={order.money} size="lager" /> </div> <Button width={110} className="f-r" radius onClick={() => { this.pay(); }} > 立即购买 </Button> </div> </div > ); } renderData() { const { checkout } = this.state; return ( <div className="info data"> <div className="info-block"> {checkout.title} <Money className="f-r" value={checkout.money} /> </div> <div className="info-block"> 开通有效期 <span className="f-r">{checkout.expireDays ? `${checkout.expireDays}天` : '永久'}</span> </div> </div> ); } renderCoursePackage() { const { checkout, order } = this.state; return ( <div className="info course-package"> <div className="info-block"> {checkout.title} <Money className="f-r" value={checkout.money} /> </div> <div className="info-block"> {order.checkouts.map(row => { if (row.parentId === 0) return null; return <div className="info-item"> {row.title} <span className="f-r">开通有效期: {checkout.expireDays ? `${checkout.expireDays}天` : '永久'} 使用有效期: {checkout.useExpireDays ? `${checkout.useExpireDays}天` : '永久'}</span> </div>; })} </div> </div> ); } renderSingle() { const { checkout } = this.state; console.log(checkout); return ( <div className="info single"> <div className="info-block"> {checkout.title} <Money className="f-r" value={checkout.money} /> </div> <div className="info-block"> 开通有效期 <span className="f-r">{checkout.expireDays ? `${checkout.expireDays}天` : '永久'}</span> </div> <div className="info-block"> 使用有效期 <span className="f-r">{checkout.useExpireDays ? `${checkout.useExpireDays}天` : '永久'}</span> </div> </div> ); } }