|
@@ -1,11 +1,12 @@
|
|
|
-
|
|
|
+import React from 'react';
|
|
|
import './index.less';
|
|
|
+import { Link } from 'react-router-dom';
|
|
|
import Page from '@src/containers/Page';
|
|
|
+import { Checkbox } from 'antd';
|
|
|
|
|
|
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
+import Button from '../../../components/Button';
|
|
|
+import Money from '../../../components/Money';
|
|
|
import { Order } from '../../../stores/order';
|
|
|
import { Main } from '../../../stores/main';
|
|
|
|
|
@@ -19,43 +20,115 @@ export default class extends Page {
|
|
|
|
|
|
initData() {
|
|
|
const { id } = this.params;
|
|
|
- Order.getOrder(id)
|
|
|
- .then(result => {
|
|
|
- this.setState({ data: result });
|
|
|
- });
|
|
|
- Main.getContract('course')
|
|
|
- .then(result => {
|
|
|
- this.setState({ contract: result });
|
|
|
- });
|
|
|
+ Order.getOrder(id).then(result => {
|
|
|
+ this.setState({ data: result });
|
|
|
+ });
|
|
|
+ Main.getContract('course').then(result => {
|
|
|
+ this.setState({ contract: result });
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
pay() {
|
|
|
const { id } = this.params;
|
|
|
- Order.wechatJs(id)
|
|
|
- .then(() => {
|
|
|
-
|
|
|
- });
|
|
|
+ Order.wechatJs(id).then(() => {});
|
|
|
}
|
|
|
|
|
|
renderView() {
|
|
|
const { productType } = this.state;
|
|
|
+ let info = '';
|
|
|
if (productType === 'data') {
|
|
|
- return this.renderData();
|
|
|
+ info = this.renderData();
|
|
|
}
|
|
|
if (productType === 'course_package') {
|
|
|
- return this.renderCoursePackage();
|
|
|
+ info = this.renderCoursePackage();
|
|
|
+ } else {
|
|
|
+ info = this.renderSingle();
|
|
|
}
|
|
|
- return this.renderSingle();
|
|
|
+ info = this.renderData();
|
|
|
+ return (
|
|
|
+ <div className="detail">
|
|
|
+ <div className="title" style={{ marginBottom: 0 }}>
|
|
|
+ 商品信息
|
|
|
+ </div>
|
|
|
+ {info}
|
|
|
+ <div className="title">退款政策</div>
|
|
|
+ <div className="desc">本产品为虚拟产品,购买成功后不支持退款。</div>
|
|
|
+ <div className="title">版权说明</div>
|
|
|
+ <div className="desc">本商品仅限购买者本人使用,不可商用和传播。</div>
|
|
|
+ <div className="agree">
|
|
|
+ <Checkbox />
|
|
|
+ 我已阅读并同意 <Link to="">千行课程购买协议</Link>
|
|
|
+ </div>
|
|
|
+ <div className="fixed">
|
|
|
+ <div className="tip">*若在购买过程中遇到问题,请联系千行小助手协助解决</div>
|
|
|
+ <div className="fee">
|
|
|
+ 应付: <Money value={1000} size="lager" />
|
|
|
+ </div>
|
|
|
+ <Button
|
|
|
+ width={110}
|
|
|
+ className="f-r"
|
|
|
+ radius
|
|
|
+ onClick={() => {
|
|
|
+ this.buy();
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ 立即购买
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
}
|
|
|
|
|
|
renderData() {
|
|
|
+ return (
|
|
|
+ <div className="info data">
|
|
|
+ <div className="info-block">
|
|
|
+ XXXXXX资料 <Money className="f-r" value={300} />
|
|
|
+ </div>
|
|
|
+ <div className="info-block">
|
|
|
+ <div className="info-item">
|
|
|
+ OG 20 语法 SC <span className="f-r">开通有效期: 3个月 使用有效期: 3个月</span>
|
|
|
+ </div>
|
|
|
+ <div className="info-item">
|
|
|
+ OG 20 语法 SC <span className="f-r">开通有效期: 3个月 使用有效期: 3个月</span>
|
|
|
+ </div>
|
|
|
+ <div className="info-item">
|
|
|
+ OG 20 语法 SC <span className="f-r">开通有效期: 3个月 使用有效期: 3个月</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
}
|
|
|
|
|
|
renderCoursePackage() {
|
|
|
-
|
|
|
+ return (
|
|
|
+ <div className="info course-package">
|
|
|
+ <div className="info-block">
|
|
|
+ OG 20套餐 <Money className="f-r" value={300} />
|
|
|
+ </div>
|
|
|
+ <div className="info-block">
|
|
|
+ 开通有效期 <span className="f-r">3个月</span>
|
|
|
+ </div>
|
|
|
+ <div className="info-block">
|
|
|
+ 使用有效期 <span className="f-r">3个月</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
}
|
|
|
|
|
|
renderSingle() {
|
|
|
-
|
|
|
+ return (
|
|
|
+ <div className="info single">
|
|
|
+ <div className="info-block">
|
|
|
+ OG 20套餐 <Money className="f-r" value={300} />
|
|
|
+ </div>
|
|
|
+ <div className="info-block">
|
|
|
+ 开通有效期 <span className="f-r">3个月</span>
|
|
|
+ </div>
|
|
|
+ <div className="info-block">
|
|
|
+ 使用有效期 <span className="f-r">3个月</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
}
|
|
|
}
|