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

import React from 'react';
import './index.less';
import { Link } from 'react-router-dom';
import { Checkbox } from 'antd';
import Module from '../Module';
import Progress from '../Progress';
import IconButton from '../IconButton';
import Button from '../Button';

function getBuyBody(data) {
  const desc = data.desc || [];
  return (
    <div className="body">
      <div className="desc">
        {desc.map(item => {
          return <div className="item">{item}</div>;
        })}
      </div>
      <div className="btn">
        <Button size="lager" radius>
          立即购买
        </Button>
      </div>
    </div>
  );
}
function 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>
  );
}
function getIngBody(data) {
  const list = data.list || [];
  return (
    <div className="body">
      <div className="title">近期待完成</div>
      {list.length === 0 ? (
        <div className="text">
          <div>好棒！</div>
          <div>近期的作业都完成啦</div>
        </div>
      ) : (
        <div className="list">
          {list.map(item => {
            return (
              <div className="item">
                <div className="top">
                  <div className="date">{item.date}</div>
                  <div className="action">
                    {item.status === 'start' && <IconButton type="start" tip="Start" />}
                    {item.status === 'ing' && <IconButton type="continue" tip="Continue" />}
                    {item.status === 'ing' && <IconButton type="restart" tip="Restart" />}
                  </div>
                </div>
                <Progress progress={item.progress} />
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}
function getEndBody() {
  return (
    <div className="body">
      <div className="title">课程已经结束啦</div>
    </div>
  );
}

function getBody(data) {
  switch (data.status) {
    case 'buy':
      return getBuyBody(data);
    case 'open':
      return getOpenBody(data);
    case 'ing':
      return getIngBody(data);
    case 'end':
      return getEndBody(data);
    default:
      return '';
  }
}

function Card(props) {
  const { style, data = {}, title } = props;

  return (
    <Module style={style} className={`card ${data.status}`}>
      <div className="header">
        {title}
        {data.status === 'buy' && <span className="sub-title">未购买</span>}
        {data.status === 'open' && <span className="sub-title">已购买</span>}
      </div>
      {getBody(data)}
    </Module>
  );
}

Card.propTypes = {};
export default Card;