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 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.repport.id && (
                        <IconButton
                          type="start"
                          tip="Start"
                          onClick={() => previewAction && previewAction('start', item)}
                        />
                      )}
                      {item.repport.id && (
                        <IconButton
                          type="continue"
                          onClick={() => previewAction && previewAction('continue', item)}
                          tip="Continue"
                        />
                      )}
                      {item.repport.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 {
  getEndBody() {
    return (
      <div className="body">
        <div className="text">
          <div className="t-1">课程已经结束啦</div>
        </div>
      </div>
    );
  }

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

  getOpenBody() {
    const { data } = this.props;
    const { qrCode } = data;
    return !qrCode ? (
      <div className="body">
        <div className="text">
          <Checkbox />
          <span>
            我已阅读并同意<Link to="">《千行课程协议》</Link>
          </span>
        </div>
        <div className="btn">
          <Button size="lager" radius>
            开通作业
          </Button>
        </div>
      </div>
    ) : (
      <div className="body">
        <div className="t-1">请尽快与老师预约上课时间</div>
        <div className="t-2">请于 2019-07-25 前开通课程</div>
        <div className="qr-code">
          <Assets name="qrcode" />
        </div>
      </div>
    );
  }

  getIngBody() {
    const { data, previewAction } = this.props;
    const { list = [] } = data;
    return (
      <div className="body">
        {list.length > 0 && <div className="title">近期待完成</div>}
        {list.length === 0 ? (
          <div className="text">
            <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.status === 'start' && (
                        <IconButton
                          type="start"
                          tip="Start"
                          onClick={() => previewAction && previewAction('start', item)}
                        />
                      )}
                      {item.status === 'continue' && (
                        <IconButton
                          type="continue"
                          onClick={() => previewAction && previewAction('continue', item)}
                          tip="Continue"
                        />
                      )}
                      {item.status === 'restart' && (
                        <IconButton
                          type="restart"
                          onClick={() => previewAction && previewAction('restart', item)}
                          tip="Restart"
                        />
                      )}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        )}
        <div className="bottom">
          有效期: 2019-08-20至2020-01-01 <Link to="">全部作业></Link>
        </div>
      </div>
    );
  }

  getBody() {
    const { data } = this.props;
    const { status } = data;
    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, data, title, tag } = this.props;
    const { status } = data;
    return (
      <Module style={style} className={`card1 ${status}`}>
        <div className="header">
          {tag && <div className="tag">{tag}</div>}
          {title}
        </div>
        {this.getBody()}
      </Module>
    );
  }
}