123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313 |
- 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>
- );
- }
- }
|