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 => { return ( <div className="ant-calendar-date"> {current.get('date')} <i className="s1" style={{ background: '#6865FD' }} /> <i className="s2" style={{ background: '#4299FF' }} /> </div> ); }} checkRefresh={(date, refresh) => { console.log(date); setTimeout(() => { refresh(); }, 2000); return true; }} /> <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 />; } } }