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

import React, { Component } from 'react';
import './index.less';
import { Link } from 'react-router-dom';
import { Checkbox } from 'antd';
import Assets from '@src/components/Assets';
import { formatDate } from '@src/services/Tools';
import Module from '../Module';
import Progress from '../Progress';
import IconButton from '../IconButton';
import Button from '../Button';

export default class Card extends Component {
  getBuyBody() {
    const { data } = this.props;
    return (
      <div className="body">
        <div className="desc" dangerouslySetInnerHTML={{ __html: data.description }} />
        <div className="btn">
          <Button size="lager" radius>
            立即购买
          </Button>
        </div>
      </div>
    );
  }

  getOpenBody() {
    return (
      <div className="body">
        <div className="title">请开通预习作业</div>
        <div className="text">
          <Checkbox />
          <span>
            我已阅读并同意<Link to="">《千行 GMAT - Sentence Corretion 课程协议》</Link>
          </span>
        </div>
        <div className="btn">
          <Button size="lager" radius>
            立即开通
          </Button>
        </div>
      </div>
    );
  }

  getIngBody() {
    const { process, previewAction } = this.props;
    return (
      <div className="body">
        <div className="title">近期待完成</div>
        {process.previews.length === 0 ? (
          <div className="text">
            <div>好棒！</div>
            <div>近期的作业都完成啦</div>
          </div>
        ) : (<div className="list">
          {process.previews.map(item => {
            return (
              <div className="item">
                <div className="top">
                  <div className="date">{item.time}</div>
                  <div className="action">
                    {!item.report.id && (
                      <IconButton
                        type="start"
                        tip="Start"
                        onClick={() => previewAction && previewAction('start', item)}
                      />
                    )}
                    {item.report.id && (
                      <IconButton
                        type="continue"
                        onClick={() => previewAction && previewAction('continue', item)}
                        tip="Continue"
                      />
                    )}
                    {item.report.id && (
                      <IconButton
                        type="restart"
                        onClick={() => previewAction && previewAction('restart', item)}
                        tip="Restart"
                      />
                    )}
                  </div>
                </div>
                <Progress progress={item.report.id ? item.repport.userNumber / item.report.questionNumber : 0} />
              </div>
            );
          })}
        </div>)}
      </div>
    );
  }

  getBody() {
    const { process = {} } = this.props;
    if (!process.payed && !process.startTime) return this.getBuyBody();
    if (process.payed) return this.getOpenBody();
    if (process.startTime) return this.getIngBody();
    return <div />;
  }

  render() {
    const { style, data = {}, process = {} } = this.props;

    return (
      <Module
        style={style}
        className={`card ${!process.payed && !process.startTime ? 'buy' : ''} ${process.payed ? 'open' : ''}  ${process.startTime ? 'ing' : ''}`}
      >
        <div className="header">
          {`${data.titleZh} ${data.titleEn}`}
          {!process.payed && !process.startTime && <span className="sub-title">未购买</span>}
          {(process.payed || process.startTime) && <span className="sub-title">已购买</span>}
        </div>
        {this.getBody()}
      </Module>
    );
  }
}

export class Card1 extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  getEndBody() {
    const { data, onPreview } = this.props;
    const { useStartTime, useEndTime } = data;
    return (
      <div className="body">
        <div className="text">
          <div className="t-1">课程已经结束啦</div>
        </div>
        <div className="bottom">
          有效期: {useStartTime && formatDate(useStartTime, 'YYYY-MM-DD')}至{useEndTime && formatDate(useEndTime, 'YYYY-MM-DD')} <a onClick={() => onPreview && onPreview()}>全部作业></a>
        </div>
      </div>
    );
  }

  getStopBody() {
    return (
      <div className="body">
        <div className="text">
          <div className="t-1">停课中</div>
          <div className="t-2">您可至「我的-课程」恢复学习</div>
        </div>
      </div>
    );
  }

  getOpenBody() {
    const { checked } = this.state;
    const { data, onOpen, contract } = this.props;
    const { teacher, endTime, course = {} } = data;
    switch (course.courseModule) {
      case 'video':
        return <div className="body">
          <div className="text-end">
            <div className="t-1">可至「个人中心-课程」开通</div>
          </div>
        </div>;
      case 'online':
        return <div className="body">
          <div className="text">
            <Checkbox checked={checked} onChange={() => {
              this.setState({ checked: !checked });
            }} />
            <span>
              我已阅读并同意<a href={`/contract/${contract.key}`} target="_blank">{contract.title}</a>
            </span>
          </div>
          <div className="btn">
            <Button size="lager" disabled={!checked} radius onClick={() => checked && onOpen && onOpen()}>
              开通作业
              </Button>
          </div>
        </div>;
      case 'vs':
        return <div className="body">
          <div className="t-1">请尽快与老师预约上课时间</div>
          <div className="t-2">请于 {endTime && formatDate(endTime, 'YYYY-MM-DD')} 前开通课程</div>
          <div className="qr-code">
            {teacher && <Assets name="qrcode" src={teacher.qr} />}
          </div>
        </div>;
      default:
        return <div />;
    }
  }

  getIngBody() {
    const { data, list = [], previewAction, onPreview } = this.props;
    const { useStartTime, useEndTime } = data;
    return (
      <div className="body">
        {list.length > 0 && <div className="title">近期待完成</div>}
        {list.length === 0 ? (
          <div className="text">
            <Assets name="good" className="good-icon" />
            <div className="t-1">好棒！</div>
            <div className="t-2">近期的作业都完成啦</div>
          </div>
        ) : (<div className="list">
          {list.map(item => {
            return (
              <div className="item">
                <div className="top">
                  <div className="title">{item.title}</div>
                </div>
                <div className="detail">
                  <Progress size="small" progress={item.progress} />
                  <div className="action">
                    {item.progress === 0 && (
                      <IconButton
                        type="start"
                        tip="Start"
                        onClick={() => previewAction && previewAction('start', item)}
                      />
                    )}
                    {item.progress > 0 && (
                      <IconButton
                        type="continue"
                        onClick={() => previewAction && previewAction('continue', item)}
                        tip="Continue"
                      />
                    )}
                    {item.progress > 0 && (
                      <IconButton
                        type="restart"
                        onClick={() => previewAction && previewAction('restart', item)}
                        tip="Restart"
                      />
                    )}
                  </div>
                </div>
              </div>
            );
          })}
        </div>)}
        <div className="bottom">
          有效期: {useStartTime && formatDate(useStartTime, 'YYYY-MM-DD')}至{useEndTime && formatDate(useEndTime, 'YYYY-MM-DD')} <a onClick={() => onPreview && onPreview()}>全部作业></a>
        </div>
      </div>
    );
  }

  getBody() {
    const { status } = this.props;
    if (status === 'end') return this.getEndBody();
    if (status === 'stop') return this.getStopBody();
    if (status === 'open') return this.getOpenBody();
    if (status === 'ing') return this.getIngBody();
    return <div />;
  }

  render() {
    const { style, title, tag, status } = this.props;
    return (
      <Module style={style} className={`card1 ${status}`}>
        <div className="header">
          {tag && <div className="tag">{tag}</div>}
          {title}
        </div>
        {this.getBody()}
      </Module>
    );
  }
}