sourcecode/front/project/www/components/Item/index.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import './index.less';
import Assets from '@src/components/Assets';
import { getMap, formatSeconds, formatDate, formatMoney } 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})`, backgroundSize: '100% 100%' }} 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) + (data.saleNumber || 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);
    const hasGift = data.gift && Object.keys(data.gift).length > 0;
    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>
          {hasGift && <div className="t-1 t-s-12">赠送服务</div>}
          {hasGift && <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">¥{formatMoney(originMoney)}</span>
        </div>
        <div className="t-7 t-s-18 f-w-b m-b-1">套餐价: ¥{formatMoney(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>
    );
  }
}