sourcecode/front/project/www/routes/my/course/page.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import './index.less';
import { Icon } from 'antd';
import FileUpload from '@src/components/FileUpload';
import Page from '@src/containers/Page';
import Assets from '@src/components/Assets';
import UserLayout from '../../../layouts/User';
import Button from '../../../components/Button';
import ProgressText from '../../../components/ProgressText';
import { Icon as GIcon } from '../../../components/Icon';
import menu from '../index';
import Tabs from '../../../components/Tabs';
import UserTable from '../../../components/UserTable';
import More from '../../../components/More';
import Modal from '../../../components/Modal';
import Date from '../../../components/Date';

export default class extends Page {
  initState() {
    return {
      tab1: '1',
      tab2: '1',
      data: [
        {
          status: 'ing',
          history: [{}],
          list: [
            { status: 'ing', type: '1' },
            { status: 'not', type: '2' },
            { status: 'end', type: '3' },
            { status: 'not', type: '4' },
            { status: 'end', type: '5' },
            { status: 'not', type: '6' },
            { status: 'end', type: '7' },
          ],
        },
        {
          status: 'not',
          history: [{}],
          list: [
            { status: 'ing', type: '1' },
            { status: 'not', type: '2' },
            { status: 'end', type: '3' },
            { status: 'not', type: '4' },
            { status: 'end', type: '5' },
            { status: 'not', type: '6' },
            { status: 'end', type: '7' },
          ],
        },
        { status: 'end', history: [{}], list: [] },
      ],
    };
  }

  onAction() {}

  refresh(tab1, tab2) {
    this.setState({ tab1, tab2 });
  }

  renderView() {
    const { config } = this.props;
    return <UserLayout active={config.key} menu={menu} center={this.renderDetail()} />;
  }

  renderDetail() {
    const { tab1, tab2 } = this.state;
    return (
      <div className="detail-layout">
        <div className="tip">
          <div className="text">理清备考思路，避开常见误区，让学习的每一分钟发光发热！</div>
          <Link to="">去填写 ></Link>
          <Icon type="close-circle" theme="filled" />
        </div>
        <Tabs
          type="division"
          theme="theme"
          size="small"
          space={2.5}
          width={100}
          active={tab1}
          tabs={[{ key: '1', title: '在线课程' }, { key: '2', title: '1V1私教' }]}
          onChange={key => this.refresh(key, tab2)}
        />
        <Tabs
          type="tag"
          theme="white"
          size="small"
          space={5}
          width={54}
          active={tab2}
          tabs={[
            { key: '1', title: '全部' },
            { key: '2', title: '未开通' },
            { key: '3', title: '学习中' },
            { key: '4', title: '已结束' },
          ]}
          onChange={key => this.refresh(tab1, key)}
        />
        {this[`renderTab${tab1}`]()}
        <Modal className="clock-modal" title="打卡表" width={460} onClose={() => {}}>
          <div>
            <div className="d-i-b w-3">
              <div className="t-2 t-s-14">听课频率</div>
              <div className="t-4 t-s-18">2天/课时</div>
            </div>
            <div className="d-i-b w-3">
              <div className="t-2 t-s-14">作业完成度</div>
              <div className="t-4 t-s-18">50%</div>
            </div>
          </div>
          <div className="b-b m-t-1 m-b-1" />
          <div className="m-b-1">
            <div className="tag d-i-b t-s-16">
              <i style={{ background: '#6865FD' }} />
              听课
            </div>
            <div className="tag d-i-b t-s-16">
              <i style={{ background: '#4299FF' }} />
              预习
            </div>
            <div className="tag d-i-b t-s-16">
              <i style={{ background: '#E7E7E7' }} />
              停课
            </div>
          </div>
          <Date
            hideInput
            disabledDate={() => false}
            dateRender={current => (
              <div className="ant-calendar-date">
                {current.get('date')}
                <i className="s1" style={{ background: '#6865FD' }} />
                <i className="s2" style={{ background: '#4299FF' }} />
              </div>
            )}
          />
          <div className="t-2 t-s-12">*听课频率≤2天/课时，作业完成度≥90%，课程有效期可延长7-10天。</div>
        </Modal>
        <Modal title="恢复学习" onConfirm={() => {}} onCancel={() => {}}>
          <div className="t-2 t-s-18">恢复学习后，本课程的停课功能将无法使用。是否恢复学习？</div>
        </Modal>
        <Modal title="上传笔记" width={630} confirmText="提交" onConfirm={() => {}} onCancel={() => {}}>
          <textarea
            className="b-c-1 w-10 p-10 m-b-1"
            rows={6}
            placeholder="请输入留言内容，也可将文件拖动到这里上传。"
          />
          <div className="t-2 t-s-16 m-b-1">
            上传文件 <FileUpload type="file" title="选择文件" />
            <span className="t-3 t-s-14">支持 docx, xls, PDF, rar, zip, PNG, JPG 等类型的文件</span>
          </div>
          <div className="b-b m-t-2" />
        </Modal>
      </div>
    );
  }

  renderTab1() {
    const { data = [] } = this.state;
    return data.map(item => {
      return <Course data={item} />;
    });
  }

  renderTab2() {
    const { data = [] } = this.state;
    return data.map(item => {
      return <Education data={item} />;
    });
  }
}

class Course extends Component {
  constructor(props) {
    super(props);
    this.columns = [
      { title: '学习内容' },
      { title: '预习作业' },
      { title: '进度' },
      { title: '最近学习' },
      { title: '笔记' },
      { title: '问答' },
    ];
    this.state = { open: false };
  }

  render() {
    const { data = {} } = this.props;
    switch (data.status) {
      case 'ing':
        return this.renderIng();
      case 'not':
        return this.renderNot();
      case 'end':
        return this.renderEnd();
      default:
        return <div />;
    }
  }

  renderIng() {
    const { data } = this.props;
    const { history = [] } = data;
    return (
      <div className="course-item ing">
        <div className="title">
          <div className="tag">学习中</div>
          <div className="text">OG20整合刷题-语法SC</div>
        </div>
        <div className="continue">
          <Assets name="notice" />
          继续学习：课时 13：解读句子属性
        </div>
        <div className="detail">
          <div className="left">
            <Assets name="sun_blue" />
            <div className="info">
              <div className="t1">授课老师</div>
              <div className="t2">李小小</div>
              <div className="t1">有效期</div>
              <div className="t2">88Day</div>
            </div>
          </div>
          <div className="right">
            <div className="item">
              <GIcon name="speed-block" noHover />
              <div className="text">
                <span>12</span>/20
              </div>
            </div>
            <div className="item">
              <GIcon name="question-block" active noHover />
              <div className="text">
                <span>12</span>/20
              </div>
            </div>
            <div className="item">
              <GIcon name="clockin-block" noHover />
              <div className="text">
                <span>12</span>/20
              </div>
            </div>
            <div className="item">
              <GIcon name="note-block" noHover />
              <div className="text">
                <span>12</span>/20
              </div>
            </div>
          </div>
        </div>
        <UserTable size="small" columns={this.columns} data={history} />
      </div>
    );
  }

  renderNot() {
    return (
      <div className="course-item not">
        <div className="title">
          <div className="tag">未开通</div>
          <div className="text">OG20整合刷题-语法SC</div>
        </div>
        <div className="detail">
          <div className="left">
            <Assets name="sun_blue" />
            <div className="info">
              <div className="t1">授课老师</div>
              <div className="t2">李小小</div>
              <div className="t1">有效期</div>
              <div className="t2">88Day</div>
            </div>
          </div>
          <div className="right t-c">
            <div className="text">请于 2020-06-26 前开通</div>
            <Button size="lager" radius>
              立即开通
            </Button>
          </div>
        </div>
      </div>
    );
  }

  renderEnd() {
    return (
      <div className="course-item end">
        <div className="title">
          <div className="tag">已结束</div>
          <div className="text">OG20整合刷题-语法SC</div>
        </div>
        <div className="detail">
          <div className="left">
            <Assets name="sun_blue" />
            <div className="info">
              <div className="t1">授课老师</div>
              <div className="t2">李小小</div>
              <div className="t1">有效期</div>
              <div className="t2">88Day</div>
            </div>
          </div>
          <div className="right">
            <div className="item">
              <GIcon name="gift-block" active />
              <div className="text">赠送7天</div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

class Education extends Component {
  constructor(props) {
    super(props);
    this.columns = [
      { title: '学习内容' },
      { title: '预习作业' },
      { title: '授课时间' },
      { title: '课后笔记' },
      { title: '课后补充' },
    ];
    this.state = { open: true, tab: '1' };
  }

  render() {
    const { data = {} } = this.props;
    switch (data.status) {
      case 'ing':
        return this.renderIng();
      case 'not':
        return this.renderNot();
      case 'end':
        return this.renderEnd();
      default:
        return <div />;
    }
  }

  renderIng() {
    const { tab } = this.state;
    return (
      <div className="education-item ing">
        <div className="title">
          <div className="tag">学习中</div>
          <div className="text">OG20整合刷题-语法SC</div>
          <div className="right">
            <More menu={[{ label: '评价', key: '1' }, { label: '停课', key: '2' }]} />
          </div>
        </div>
        <div className="continue">
          <Assets name="notice" />
          继续学习：课时 13：解读句子属性
        </div>
        <div className="detail">
          <div className="left">
            <Assets name="sun_blue" />
            <div className="info">
              <div className="t1">授课老师</div>
              <div className="t2">李小小</div>
              <div className="t1">有效期</div>
              <div className="t2">88Day</div>
            </div>
          </div>
          <div className="right">
            <div className="item">
              <GIcon name="speed-block" noHover />
              <div className="text">
                <span>12</span>/20
              </div>
            </div>
            <div className="item">
              <GIcon name="question-block" active noHover />
              <div className="text">
                <span>12</span>/20
              </div>
            </div>
          </div>
        </div>
        <Tabs
          className="t-l"
          type="line"
          theme="theme"
          size="small"
          width={80}
          active={tab}
          tabs={[{ key: '1', title: '在线课程' }, { key: '2', title: '1V1私教' }]}
          onChange={key => this.setState({ tab: key })}
        />
        <div className="class-hour">
          <div className="text">课时 5：解读句子属性</div>
          <div className="right">
            <GIcon name="prev" onClick={() => {}} />
            <span>上一课时</span>
            <span>下一课时</span>
            <GIcon name="next" onClick={() => {}} />
          </div>
        </div>
        {tab === '1' ? this.renderTimeLine() : this.renderTable()}
      </div>
    );
  }

  renderNot() {
    return (
      <div className="education-item not">
        <div className="title">
          <div className="tag">未开通</div>
          <div className="text">OG20整合刷题-语法SC</div>
        </div>
        <div className="detail">
          <div className="left">
            <Assets name="sun_blue" />
            <div className="info">
              <div className="t1">授课老师</div>
              <div className="t2">李小小</div>
              <div className="t1">有效期</div>
              <div className="t2">88Day</div>
            </div>
          </div>
          <div className="right">
            <div className="qr-code">
              <Assets name="qrcode" />
              <div className="i">
                <div className="t1">请尽快与老师预约上课时间</div>
                <div className="t2">请于 2019-07-25 前开通课程</div>
              </div>
            </div>
          </div>
        </div>
        {this.renderTimeLine()}
      </div>
    );
  }

  renderEnd() {
    const { open } = this.state;
    return (
      <div className="education-item end">
        <div className="title">
          <div className="tag">已结课</div>
          <div className="text">OG20整合刷题-语法SC</div>
        </div>
        <div className="detail">
          <div className="left">
            <Assets name="sun_blue" />
            <div className="info">
              <div className="t1">授课老师</div>
              <div className="t2">李小小</div>
              <div className="t1">有效期</div>
              <div className="t2">88Day</div>
            </div>
          </div>
          <div className="right">
            <div className="item">
              <GIcon name="speed-block" noHover />
              <div className="text">
                <span>12</span>/20
              </div>
            </div>
            <div className="item">
              <GIcon name="question-block" active noHover />
              <div className="text">
                <span>12</span>/20
              </div>
            </div>
          </div>
          <div className="open">
            <GIcon name={open ? 'up' : 'down'} onClick={() => this.setState({ open: !open })} />
          </div>
        </div>
        {open && this.renderTable()}
      </div>
    );
  }

  renderTimeLine() {
    const { data = {} } = this.props;
    const { list = [] } = data;
    return (
      <div className="time-line">
        {list.map(item => {
          return <TimeLineItem data={item} />;
        })}
      </div>
    );
  }

  renderTable() {
    const { data = {} } = this.props;
    const { history = [] } = data;
    return <UserTable size="small" columns={this.columns} data={history} />;
  }
}

class TimeLineItem extends Component {
  constructor(props) {
    super(props);
    this.titleMap = {
      1: '预约时间',
      2: '答疑文档',
      3: '上课',
      4: '课后笔记',
      5: '课后补充',
      6: '备考信息',
      7: '完成作业',
    };
    this.iconMap = {
      1: 'time-icon',
      2: 'QA-icon',
      3: 'class-icon',
      4: 'note-icon',
      5: 'supplement-icon',
      6: 'information-icon',
      7: 'homework-icon',
    };
  }

  onClick(key) {
    const { data = {}, onClick } = this.props;
    const { status } = data;
    if (status === 'not') return;
    if (onClick) onClick(key);
  }

  render() {
    const { data = {} } = this.props;
    const { status, type } = data;
    return (
      <div className={`time-line-item ${status}`}>
        <div className="icon-title">
          <GIcon name={this.iconMap[type]} active={status !== 'not'} noHover />
          <div className="title">{this.titleMap[type]}</div>
        </div>
        <div className="time-line-detail">{this.renderDetail()}</div>
      </div>
    );
  }

  renderDetail() {
    const { data = {} } = this.props;
    const { type, status } = data;
    switch (type) {
      case '1':
        return status === 'not' ? (
          <span>请尽快与老师预约上课时间，扫码加微信</span>
        ) : (
          <span>2019-07-24 09:00 ~ 10:00</span>
        );
      case '2':
        return <span className="link">点此上传</span>;
      case '3':
        return status === 'end' ? (
          <span>
            CCtalk 频道号 ：1234567 <span className="link">CC talk使用手册</span>
          </span>
        ) : (
          <input placeholder="请输入CCtalk用户名查看授课频道" />
        );
      case '4':
        return <span className="link">点此上传</span>;
      case '5':
        return <span className="link">写留言</span>;
      case '6':
        return [
          <div>
            <span>基本情况梳理</span>
            <span>2019-08-20 更新</span>
            <span className="link">修改</span>
          </div>,
          <div>
            <span>备考细节梳理</span>
            <span className="link">填写</span>
          </div>,
        ];
      case '7':
        return <ProgressText progress={10} size="small" />;
      default:
        return <div />;
    }
  }
}