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

import React, { Component } from 'react';
import './index.less';
import Assets from '@src/components/Assets';
import { getMap, formatSeconds } from '@src/services/Tools';
import Button from '../Button';
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().thenn(() => {
      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" onClick={() => linkTo(`/course/detail/${data.id}`)}>
          <div className="title">
            <div className="tag">{CrowdMap[data.crowd]}</div>{data.title}
          </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="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" onClick={() => linkTo(`/course/package/detail/${data.id}`)}>
          <div className="title t-1 m-b-5 f-w-b">
            <div hidden={!novice} className="tag f-w-d">新手</div>{data.title}
          </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="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-item">
        <Assets width="309" height="264" name="" 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="add" />
          </Button>}
        </div>
        {data.have && <Assets className="buyed" width={75} height={75} name="Purchased" />}
      </div>
    );
  }
}