|
|
@@ -2,16 +2,44 @@ import React from 'react';
|
|
|
import './index.less';
|
|
|
import Assets from '@src/components/Assets';
|
|
|
import Page from '@src/containers/Page';
|
|
|
+import { getMap } from '@src/services/Tools';
|
|
|
import Footer from '../../../components/Footer';
|
|
|
+import { FaqModal } from '../../../components/OtherModal';
|
|
|
import { CommentFalls, AnswerCarousel, Consultation, Contact } from '../../../components/Other';
|
|
|
import Button from '../../../components/Button';
|
|
|
+import { Main } from '../../../stores/main';
|
|
|
+import { Course } from '../../../stores/course';
|
|
|
+import { ServiceKey, ServiceParamMap } from '../../../../Constant';
|
|
|
+import { Order } from '../../../stores/order';
|
|
|
|
|
|
export default class extends Page {
|
|
|
initState() {
|
|
|
return {};
|
|
|
}
|
|
|
|
|
|
+ initData() {
|
|
|
+ Main.getCourseIndex()
|
|
|
+ .then(result => {
|
|
|
+ this.setState({ courseIndex: result });
|
|
|
+ });
|
|
|
+ Main.getBase()
|
|
|
+ .then(result => {
|
|
|
+ this.setState({ base: result });
|
|
|
+ });
|
|
|
+ Course.listPackage({ isSpecial: true, page: 1, size: 3 })
|
|
|
+ .then(result => {
|
|
|
+ this.setState({ packages: result.list || [] });
|
|
|
+ });
|
|
|
+ Main.listFaq({ page: 1, size: 100, channel: 'course-index' }).then(result => {
|
|
|
+ this.setState({ faqs: result.list });
|
|
|
+ });
|
|
|
+ Main.listComment({ page: 1, size: 100, channel: 'course-index' }).then(result => {
|
|
|
+ this.setState({ coments: result.list });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
renderView() {
|
|
|
+ const { courseIndex = {}, base = {}, packages = [], faqs = [], comments = [], showFaq, faq = {} } = this.state;
|
|
|
return (
|
|
|
<div>
|
|
|
<div className="block-1">
|
|
|
@@ -19,10 +47,10 @@ export default class extends Page {
|
|
|
<Assets name="" />
|
|
|
<div className="main-title">Waste Less, Learn More.</div>
|
|
|
<div className="btn-list">
|
|
|
- <Button width={100} size="lager">
|
|
|
+ <Button width={100} size="lager" onClick={() => linkTo('/course/online?tab=package')}>
|
|
|
查看套餐
|
|
|
</Button>
|
|
|
- <Button className="t-4" width={100} theme="default" size="lager">
|
|
|
+ <Button className="t-4" width={100} theme="default" size="lager" onClick={() => linkTo('/course/online?tab=single')}>
|
|
|
试听课程
|
|
|
</Button>
|
|
|
</div>
|
|
|
@@ -32,89 +60,58 @@ export default class extends Page {
|
|
|
<div className="main-title">找到你的Style</div>
|
|
|
<div className="video-list">
|
|
|
<div className="video-item">
|
|
|
- <Assets width={70} height={70} name="play" className="play" />
|
|
|
- <div className="name">在线课程 ></div>
|
|
|
+ <Assets width={70} height={70} name="play" className="play" src={courseIndex.onlineVideo} />
|
|
|
+ <div className="name" onClick={() => linkTo('/course/online')}>在线课程 ></div>
|
|
|
</div>
|
|
|
<div className="video-item">
|
|
|
- <Assets width={70} height={70} name="play" className="play" />
|
|
|
- <div className="name">1v1私教 ></div>
|
|
|
+ <Assets width={70} height={70} name="play" className="play" src={courseIndex.vsVideo} />
|
|
|
+ <div className="name" onClick={() => linkTo('/course/vs')}>1v1私教 ></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className="class-list">
|
|
|
- <div className="class-item">
|
|
|
- <Assets width={55} height={52} className="new" name="noviciate" />
|
|
|
- <div className="t-s-22 t-4 m-b-5 f-w-b">基础刷题 </div>
|
|
|
- <div className="t-8 m-b-1">包含最新 XXXXXXX 的全部课程XXXXX;机经券×1+VIP×3 月+模考×1</div>
|
|
|
- <div className="t-1 t-s-12">包含课程</div>
|
|
|
- <div className="m-b-5">
|
|
|
- <div className="m-b-1 m-r-5 t-9 t-s-12 d-i-b b-c-2 p-5">OG20阅读刷题(7课时)</div>
|
|
|
- </div>
|
|
|
- <div className="t-1 t-s-12">配套服务</div>
|
|
|
- <div className="m-b-5">
|
|
|
- <div className="m-b-1 m-r-5 t-9 t-s-12 d-i-b b-c-2 p-5">OG20阅读刷题(7课时)</div>
|
|
|
- </div>
|
|
|
- <div className="t-1 t-s-12">赠送服务</div>
|
|
|
- <div className="m-b-2">
|
|
|
- <div className="m-b-1 m-r-5 t-9 t-s-12 d-i-b b-c-2 p-5">OG20阅读刷题(7课时)</div>
|
|
|
- </div>
|
|
|
- <div className="t-8">
|
|
|
- 总价值: <span className="t-d-l-t">¥18888</span>
|
|
|
- </div>
|
|
|
- <div className="t-1 t-s-18 f-w-b m-b-1">套餐价: ¥8888</div>
|
|
|
- <div className="m-b-5">
|
|
|
- <Button size="lager">立即购买</Button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div className="class-item">
|
|
|
- <div className="t-s-22 t-11 m-b-5 f-w-b">系统授课 </div>
|
|
|
- <div className="t-8 m-b-1">包含最新 XXXXXXX 的全部课程XXXXX;机经券×1+VIP×3 月+模考×1</div>
|
|
|
- <div className="t-1 t-s-12">包含课程</div>
|
|
|
- <div className="m-b-5">
|
|
|
- <div className="m-b-1 m-r-5 t-9 t-s-12 d-i-b b-c-2 p-5">OG20阅读刷题(7课时)</div>
|
|
|
- <div className="m-b-1 m-r-5 t-9 t-s-12 d-i-b b-c-2 p-5">OG20阅读刷题(7课时)</div>
|
|
|
- </div>
|
|
|
- <div className="t-1 t-s-12">配套服务</div>
|
|
|
- <div className="m-b-5">
|
|
|
- <div className="m-b-1 m-r-5 t-9 t-s-12 d-i-b b-c-2 p-5">OG20阅读刷题(7课时)</div>
|
|
|
- </div>
|
|
|
- <div className="t-1 t-s-12">赠送服务</div>
|
|
|
- <div className="m-b-2">
|
|
|
- <div className="m-b-1 m-r-5 t-9 t-s-12 d-i-b b-c-2 p-5">OG20阅读刷题(7课时)</div>
|
|
|
- </div>
|
|
|
- <div className="t-8">
|
|
|
- 总价值: <span className="t-d-l-t">¥18888</span>
|
|
|
- </div>
|
|
|
- <div className="t-1 t-s-18 f-w-b m-b-1">套餐价: ¥8888</div>
|
|
|
- <div className="m-b-5">
|
|
|
- <Button size="lager">立即购买</Button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div className="class-item">
|
|
|
- <div className="t-s-22 t-12 m-b-5 f-w-b">思维提升 </div>
|
|
|
- <div className="t-8 m-b-1">包含最新 XXXXXXX 的全部课程XXXXX;机经券×1+VIP×3 月+模考×1</div>
|
|
|
- <div className="t-1 t-s-12">包含课程</div>
|
|
|
- <div className="m-b-5">
|
|
|
- <div className="m-b-1 m-r-5 t-9 t-s-12 d-i-b b-c-2 p-5">OG20阅读刷题(7课时)</div>
|
|
|
- </div>
|
|
|
- <div className="t-1 t-s-12">配套服务</div>
|
|
|
- <div className="m-b-5">
|
|
|
- <div className="m-b-1 m-r-5 t-9 t-s-12 d-i-b b-c-2 p-5">OG20阅读刷题(7课时)</div>
|
|
|
- </div>
|
|
|
- <div className="t-1 t-s-12">赠送服务</div>
|
|
|
- <div className="m-b-2">
|
|
|
- <div className="m-b-1 m-r-5 t-9 t-s-12 d-i-b b-c-2 p-5">OG20阅读刷题(7课时)</div>
|
|
|
- </div>
|
|
|
- <div className="t-8">
|
|
|
- 总价值: <span className="t-d-l-t">¥18888</span>
|
|
|
- </div>
|
|
|
- <div className="t-1 t-s-18 f-w-b m-b-1">套餐价: ¥8888</div>
|
|
|
- <div className="m-b-5">
|
|
|
- <Button size="lager">立即购买</Button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ {packages.map(data => {
|
|
|
+ const originMoney = data.courses.reduce((a, y) => a + y.money, 0);
|
|
|
+ const novice = data.courses.filter(row => row.crowd !== 'novice').length === 0;
|
|
|
+ return <div className="class-item">
|
|
|
+ {novice && <Assets width={55} height={52} className="new" name="noviciate" />}
|
|
|
+ <div className="t-s-22 t-4 m-b-5 f-w-b">{data.title}</div>
|
|
|
+ <div className="t-8 m-b-1">{data.description}</div>
|
|
|
+ <div className="t-1 t-s-12">包含课程</div>
|
|
|
+ <div className="m-b-5">
|
|
|
+ {data.courses.map((course => {
|
|
|
+ return <div className="m-b-1 m-r-5 t-9 t-s-12 d-i-b b-c-2 p-5">{course.title}({course.noNumber}课时)</div>;
|
|
|
+ }))}
|
|
|
+ </div>
|
|
|
+ <div className="t-1 t-s-12">配套服务</div>
|
|
|
+ <div className="m-b-5">
|
|
|
+ <div className="m-b-1 m-r-5 t-9 t-s-12 d-i-b b-c-2 p-5">预习作业</div>
|
|
|
+ <div className="m-b-1 m-r-5 t-9 t-s-12 d-i-b b-c-2 p-5">课后答题</div>
|
|
|
+ </div>
|
|
|
+ <div className="t-1 t-s-12">赠送服务</div>
|
|
|
+ <div className="m-b-2">
|
|
|
+ {data.gift &&
|
|
|
+ ServiceKey.map(row => {
|
|
|
+ if (!data.gift[row.value]) return null;
|
|
|
+ const list = ServiceParamMap[row.value];
|
|
|
+ if (list) {
|
|
|
+ const map = getMap(list, 'value', 'label');
|
|
|
+ return <div className="m-b-1 m-r-5 t-9 t-s-12 d-i-b b-c-2 p-5">{row.label}×{map[data.gift[row.value]]}</div>;
|
|
|
+ }
|
|
|
+ return <div className="m-b-1 m-r-5 t-9 t-s-12 d-i-b b-c-2 p-5">{row.label}×{data.gift[row.value]}</div>;
|
|
|
+ })}
|
|
|
+ </div>
|
|
|
+ <div className="t-8">
|
|
|
+ 总价值: <span className="t-d-l-t">¥{originMoney}</span>
|
|
|
+ </div>
|
|
|
+ <div className="t-1 t-s-18 f-w-b m-b-1">套餐价: ¥{data.money}</div>
|
|
|
+ <div className="m-b-5">
|
|
|
+ <Button size="lager" onClick={() => Order.addCheckout({ productType: 'course_package', productId: data.id }).then(() => linkTo('/cart'))}>立即购买</Button>
|
|
|
+ </div>
|
|
|
+ </div>;
|
|
|
+ })}
|
|
|
</div>
|
|
|
</div>
|
|
|
- <Consultation />
|
|
|
+ <Consultation data={base.contact} />
|
|
|
<div className="block-4">
|
|
|
<div className="main-title">You will always find the answers</div>
|
|
|
<Assets name="" />
|
|
|
@@ -142,30 +139,11 @@ export default class extends Page {
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <CommentFalls />
|
|
|
- <AnswerCarousel
|
|
|
- list={[
|
|
|
- {
|
|
|
- question: '如果视频课程到期了却没有听完,没听的课程可以退款么',
|
|
|
- answer: '不可以的,视频课程为虚拟商品,购买成功后不接受退换。',
|
|
|
- },
|
|
|
- {
|
|
|
- question: '学习过程中可以申请停课么?',
|
|
|
- answer: '每个商品均有1次申请停课的机会,最长停课30天,停课时间不计入使用有效期内。',
|
|
|
- },
|
|
|
- {
|
|
|
- question: '我需要一个整体的GMAT备考计划,报课程的话可以提供么?',
|
|
|
- answer:
|
|
|
- '报语文全科“系统授课”的同学会赠送价值900元课前辅导,老师语音一对一与同学交流沟通,为同学提供针对性建议和详细的备考计划。',
|
|
|
- },
|
|
|
- {
|
|
|
- question: '如果视频课程到期了却没有听完,没听的课程可以退款么',
|
|
|
- answer: '不可以的,视频课程为虚拟商品,购买成功后不接受退换。',
|
|
|
- },
|
|
|
- ]}
|
|
|
- />
|
|
|
- <Contact />
|
|
|
+ <CommentFalls list={comments} />
|
|
|
+ <AnswerCarousel list={faqs} onFaq={() => this.setState({ showFaq: true, faq: { channel: 'course-index' } })} />
|
|
|
+ <Contact data={base.contact} />
|
|
|
<Footer />
|
|
|
+ <FaqModal show={showFaq} defaultData={faq} />
|
|
|
</div>
|
|
|
);
|
|
|
}
|