import React, { Component } from 'react'; import { Link } from 'react-router-dom'; import './index.less'; import Assets from '@src/components/Assets'; import { getMap, formatSeconds, formatDate } from '@src/services/Tools'; import Button from '../Button'; import More from '../More'; import { Order } from '../../stores/order'; import { User } from '../../stores/user'; import { ServiceKey, ServiceParamMap, CrowdList } from '../../../Constant'; const CrowdMap = getMap(CrowdList, 'value', 'label'); export class SingleItem extends Component { constructor(props) { super(props); this.state = {}; } buy() { const { data } = this.props; User.needLogin().then(() => { Order.speedPay({ productType: 'course', productId: data.id }).then(result => { User.needPay(result).then(() => { linkTo('/my/course'); }); }); }); } add() { const { data } = this.props; User.needLogin().then(() => { Order.addCheckout({ productType: 'course', productId: data.id }) .then(() => { this.setState({ add: true }); }); }); } render() { const { data = {}, noAction } = this.props; const { add } = this.state; return ( <div className="single-item"> <div className="img c-p" style={{ backgroundImage: `url(${data.cover})` }} onClick={() => linkTo(`/course/detail/${data.id}`)}> <div className="title"> <div className="tag">{CrowdMap[data.crowd]}</div> <Link className='f-w-b' to={`/course/detail/${data.id}`} target="_blank">{data.title}</Link> </div> <div className="left"> <span>课时数: {data.noNumber}</span> <span>{formatSeconds(data.time)}</span> </div> <div className="right"> <span>{data.trailNumber || 0}次观看</span> </div> </div> <div className="name"> <span>授课老师:{data.teacher}</span> <span>优质问答: {data.askNumber}</span> <span>有效期: {data.useExpireDays}天</span> </div> <div className="money">¥ {data.price}</div> {!noAction && ( <div className="action"> {!data.have && ( <Button radius size="lager" onClick={() => this.buy()}> 立即购买 </Button> )} {data.have && ( <Button className="f-r" theme="default" radius size="lager" onClick={() => linkTo(`/course/detail/${data.id}`)} > 查看课程 </Button> )} {!data.have && ( <Button className="f-r" theme="default" disabled={data.add || add} radius size="lager" onClick={() => this.add()} > <Assets name={data.add || add ? 'add_disabled' : 'add'} /> </Button> )} </div> )} {!noAction && data.have && <Assets className="buyed" width={75} height={75} name="Purchased" />} </div> ); } } export class PackageItem extends Component { constructor(props) { super(props); this.state = {}; } buy() { const { data } = this.props; User.needLogin().then(() => { Order.speedPay({ productType: 'course_package', productId: data.id }).then(result => { User.needPay(result).then(() => { linkTo('/my/course'); }); }); }); } add() { const { data } = this.props; User.needLogin().then(() => { Order.addCheckout({ productType: 'course_package', productId: data.id }).then(() => { this.setState({ add: true }); }); }); } render() { const { data = {} } = this.props; const { add } = this.state; const originMoney = data.courses.reduce((a, y) => a + y.price, 0); const novice = data.courses.filter(row => row.crowd !== 'novice').length === 0; const teacherMap = {}; data.courses.forEach(row => { teacherMap[row.teacher] = true; }); const teachers = Object.keys(teacherMap); return ( <div className="package-item"> <div className="block m-b-1 c-p" onClick={() => linkTo(`/course/package/detail/${data.id}`)}> <div className="title t-1 m-b-5"> <div hidden={!novice} className="tag"> 新手 </div> <Link className='t-1 f-w-b' to={`/course/package/detail/${data.id}`} target="_blank">{data.title}</Link> </div> <div className="t-1 t-s-12 m-b-5">授课老师 {teachers.join(' ')}</div> <div className="t-1 t-s-12 m-b-2">{data.description}</div> <div className="t-1 t-s-12">包含课程</div> <div className="p-t-5"> {data.courses.map(course => { return ( <div className="t m-b-1 t-4 m-r-5 t-s-12 d-i-b p-5"> {course.title}({course.noNumber}课时) </div> ); })} </div> <div className="t-1 t-s-12">配套服务</div> <div className="p-t-5"> <div className="t m-b-1 t-4 m-r-5 t-s-12 d-i-b p-5">预习作业</div> <div className="t m-b-1 t-4 m-r-5 t-s-12 d-i-b p-5">课后答题</div> </div> <div className="t-1 t-s-12">赠送服务</div> <div className="p-t-5"> {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="t m-b-1 t-4 m-r-5 t-s-12 d-i-b p-5"> {row.label}×{map[data.gift[row.value]]} </div> ); } return ( <div className="t m-b-1 t-4 m-r-5 t-s-12 d-i-b p-5"> {row.label}×{data.gift[row.value]} </div> ); })} </div> </div> <div className="t-1 t-s-12"> 原价: <span className="t-d-l-t">¥{originMoney}</span> </div> <div className="t-7 t-s-18 f-w-b m-b-1">套餐价: ¥{data.price}</div> <div className="action"> <Button radius size="lager" onClick={() => this.buy()}> 立即购买 </Button> <Button className="f-r" theme="default" radius size="lager" disabled={data.add || add} onClick={() => this.add()} > <Assets name={data.add || add ? 'add_disabled' : 'add'} /> </Button> </div> </div> ); } } export class DataItem extends Component { constructor(props) { super(props); this.state = {}; } buy() { const { data } = this.props; User.needLogin().then(() => { Order.speedPay({ productType: 'data', productId: data.id }).then(result => { User.needPay(result).then(() => { linkTo('/my/tools?tab=data'); }); }); }); } add() { const { data } = this.props; User.needLogin().then(() => { Order.addCheckout({ productType: 'data', productId: data.id }).then(() => { this.setState({ add: true }); }); }); } render() { const { data = {} } = this.props; const { add } = this.state; return ( <div className="data-single-item"> <Assets width={264} height={309} name="" className="c-p" src={data.cover} onClick={() => linkTo(`/course/data/detail/${data.id}`)} /> <div className="m-b-1"> <span className="t-7 t-s-24 f-w-b">¥{data.price}</span> <span className="f-r t-8 t-s-20">{data.saleNumber}人</span> </div> <div className="action"> {!data.have && ( <Button radius size="lager" onClick={() => { this.buy(); }} > 立即购买 </Button> )} {data.have && ( <Button className="f-r" theme="default" radius size="lager" onClick={() => openLink(data.resource)}> 查看资料 </Button> )} {!data.have && ( <Button className="f-r" theme="default" disabled={data.add || add} radius size="lager" onClick={() => this.add()} > <Assets name={data.add || add ? 'add_disabled' : 'add'} /> </Button> )} </div> {data.have && <Assets className="buyed" width={75} height={75} name="Purchased" />} </div> ); } } export class TextbookItem extends Component { constructor(props) { super(props); this.state = {}; } render() { const { data = {}, menu, onClick, onMenuClick } = this.props; return ( <div className="textbook-item"> <Assets name="sun_blue" className="m-b-5" onClick={() => onClick()} /> <div className="t-6 t-s-14 m-b-5"> 已更新至 <span className="t-4">{data.number}</span> 题 </div> <div className="t-6 t-s-12 m-b-1"> {data.time && formatDate(data.time, 'YYYY-MM-DD HH:mm:ss')} <div className="f-r"> <More menu={menu} onClick={onMenuClick} /> </div> </div> </div> ); } }