import React from 'react'; import './index.less'; import { Tabs } from 'antd-mobile'; import Page from '@src/containers/Page'; import Money from '../../../components/Money'; import Button from '../../../components/Button'; import { FAQItem, CommentItem } from '../../../components/Item'; import { Course } from '../../../stores/course'; import { Main } from '../../../stores/main'; import { Order } from '../../../stores/order'; import Icon from '../../../components/Icon'; export default class extends Page { initState() { return { tab: 'serviceContent', number: 1 }; } initData() { const { id } = this.params; Main.getPromote().then(result => { this.promote = result.vs_list || []; Course.get(id).then(data => { this.setState({ data }); this.changeNumber(data.minNumber || 1); }); }); } changeNumber(number) { const { data } = this.state; let price = data.price * number; let max = 0; let maxIndex = -1; this.promote.forEach((row, i) => { if (row.number <= number) { if (row.number > max) { max = number; maxIndex = i; } } }); if (maxIndex >= 0) { price *= this.promote[maxIndex].percent / 100; } this.setState({ number, price }); } buy() { const { number } = this.state; Order.speedPay({ productType: 'course', productId: this.params.id, number }) .then((result) => { linkTo(`/pay/${result.id}`); }); } renderText() { const { tab, data } = this.state; let content; switch (tab) { case 'serviceContent': case 'crowdContent': case 'processContent': content = <div dangerouslySetInnerHTML={{ __html: data[tab] }} />; break; case 'faq': content = <div>{(data.faqs || []).map(row => <FAQItem data={row} />)}</div>; break; case 'comment': content = <div>{(data.comments || []).map(row => <CommentItem data={row} />)}</div>; break; default: break; } return content; } renderView() { const { data = {}, tab, number, price } = this.state; return ( <div> <div className="b-g" style={{ backgroundImage: `url(${data.cover})` }}> <div className="title">{data.title}</div> </div> {/* <div className="tip">访问{PcUrl}/course/detail/{data.id},试听该课程</div> */} <div className="detail"> <Tabs page={tab} tabs={[ { title: '服务介绍', key: 'serviceContent' }, { title: '适合人群', key: 'crowdContent' }, { title: '授课流程', key: 'processContent' }, { title: 'FAQs', key: 'faq' }, { title: '用户评价', key: 'comment' }, ]} onChange={(value) => { this.setState({ tab: value.key }); }} /> {this.renderText()} </div> <div className="fixed"> <div className="action"> <div className="minus" onClick={() => this.changeNumber(number === 1 ? number : number - 1)}> <Icon type="minus" /> </div> <div className="num">{number}</div> <div className="add" onClick={() => this.changeNumber(number + 1)}> <Icon type="plus" /> </div> </div> <div className="fee"> 总额: <Money value={price} size="lager" /> </div> <Button width={110} className="f-r" radius onClick={() => { this.buy(); }}> 立即购买 </Button> </div> </div> ); } }