Skip to content

M
mr-julyedu
Commit e1cc8ecf by zhanghaozhe
Options

我的课程

parent 77226fed
Showing with 162 additions and 163 deletions
src/components/study/myCourses/index.js
...@@ -11,200 +11,199 @@ import { Loading } from "@/common"; ...@@ -11,200 +11,199 @@ import { Loading } from "@/common";
function getStudyTime(seconds) { function getStudyTime(seconds) {
return { return {
hour: Math.floor(seconds / (60 * 60)), hour: Math.floor(seconds / (60 * 60)),
min: Math.floor(seconds / 60) % 60, min: Math.floor(seconds / 60) % 60,
sec: seconds % 60 sec: seconds % 60
} }
} }
const AddCourse = React.memo(({addCourseClick}) => ( const AddCourse = React.memo(({addCourseClick}) => (
<div className='add-course'> <div className='add-course'>
<button className='add' onClick={addCourseClick}>添加课程+</button> <button className='add' onClick={addCourseClick}>添加课程+</button>
</div> </div>
)) ))
function Record({record: {seconds, lesson_name}}) { function Record({record: {seconds, lesson_name}}) {
let re = /第[\s\S]+?课/, let re = /第[\s\S]+?课/,
result = '' result = ''
if (lesson_name) { if (lesson_name) {
let matchResult = re.exec(lesson_name) let matchResult = re.exec(lesson_name)
result += (matchResult && matchResult[0]) ? matchResult[0] : '' result += (matchResult && matchResult[0]) ? matchResult[0] : ''
} }
if (seconds) { if (seconds) {
let studyTime = getStudyTime(seconds) let studyTime = getStudyTime(seconds)
let hour = studyTime.hour ? String(studyTime.hour).padStart(2, '0') + ':' : '', let hour = studyTime.hour ? String(studyTime.hour).padStart(2, '0') + ':' : '',
min = studyTime.min ? String(studyTime.min).padStart(2, '0') + ':' : '', min = studyTime.min ? String(studyTime.min).padStart(2, '0') + ':' : '',
sec = studyTime.sec ? String(studyTime.sec).padStart(2, '0') : '' sec = studyTime.sec ? String(studyTime.sec).padStart(2, '0') : ''
result += hour + min + sec result += hour + min + sec
} }
return ( return (
<span className={'record'}> <span className={'record'}>
{ {
result.length ? `学习到${result}` : null result.length ? `学习到${result}` : null
} }
</span> </span>
) )
} }
const Bottom = React.memo(({item}) => { const Bottom = React.memo(({item}) => {
if (item.ago || item.seconds) { if (item.ago || item.seconds) {
let date = new Date(item.ago * 1000) let date = new Date(item.ago * 1000)
let time = isToday(date) ? format(date, 'HH时mm分') : format(date, 'MM月DD日') let time = isToday(date) ? format(date, 'HH时mm分') : format(date, 'MM月DD日')
return (
<div className="des">
<span className='time'>{time}</span>
<Record record={item}/>
</div>
)
}
return ( return (
<button className='start-learn'>开始学习</button> <div className="des">
<span className='time'>{time}</span>
<Record record={item}/>
</div>
) )
}
return (
<button className='start-learn'>开始学习</button>
)
}) })
class MyCourses extends Component { class MyCourses extends Component {
list list
state = { state = {
isLoading: true isLoading: true
} }
handleClick = (id, item) => {
const {history} = this.props
const {mode, course_id} = item
if(mode && mode == 6){
history.push(`/python?id=${course_id}`)
return
}
history.push(`/play/video?id=${id}`)
}
addCourseClick = () => {
this.props.history.push('/classify')
}
componentDidMount() { handleClick = (id, item) => {
this.props.switchTab(false) const {history} = this.props
this.props.fetchCoursesListIfNeeded() const {mode, course_id} = item
if (mode && mode == 6) {
history.push(`/python?id=${course_id}`)
return
} }
history.push(`/play/video?id=${id}`)
componentWillUnmount() { }
this.props.switchTab(true); addCourseClick = () => {
this.props.history.push('/classify')
}
componentDidMount() {
this.props.switchTab(false)
this.props.fetchCoursesListIfNeeded()
}
componentWillUnmount() {
this.props.switchTab(true);
}
loadFunc = debounce(() => {
if (this.props.courseList.length % 10 === 0) {
this.props.fetchCoursesListIfNeeded()
} }
}, 200)
render() {
let {courseList, user} = this.props
return <Loading isLoading={this.props.isLoading}>
{
courseList && courseList.length !== 0
?
<>
<div className="my-course-uid">
{`加群请备注您的学号：${!user.hasError && this.props.user.data.uid}`}
</div>
<InfiniteScroll
pageStart={0}
hasMore={true}
loadMore={this.loadFunc}
useWindow={false}
>
<ul ref={el => this.list = el}>
{
courseList.map((item, index) => {
const Info = (
<div className="info">
<div className='title'>{item.course_title}</div>
{
item.is_aist &&
<div className='contact'>助教微信：{item.assist_weixin}</div>
}
{
!item.is_aist && item.contact_type == 1 && item.course_qq &&
<div className='contact'>QQ群：{item.course_qq}</div>
}
{
!item.is_aist && item.contact_type == 2 && item.course_qq &&
<div className='contact'>班主任微信：{item.course_qq}</div>
}
loadFunc = debounce(() => {
if (this.props.courseList.length % 10 === 0) {
this.props.fetchCoursesListIfNeeded()
}
}, 200)
render() {
let {courseList, user} = this.props
return <Loading isLoading={this.props.isLoading}>
{
courseList && courseList.length !== 0
?
<>
<div className="my-course-uid">
{`加群请备注您的学号：${!user.hasError && this.props.user.data.uid}`}
</div>
<InfiniteScroll
pageStart={0}
hasMore={true}
loadMore={this.loadFunc}
useWindow={false}
>
<ul ref={el => this.list = el}>
{
courseList.map((item, index) => {
const Info = (
<div className="info">
<div className='title'>{item.course_title}</div>
{
item.is_aist &&
<div className='contact'>助教微信：{item.assist_weixin}</div>
}
{
!item.is_aist && item.contact_type == 1 && item.course_qq &&
<div className='contact'>QQ群：{item.course_qq}</div>
}
{
!item.is_aist && item.contact_type == 2 && item.course_qq &&
<div className='contact'>班主任微信：{item.course_qq}</div>
}
{
item.is_aist && item.aist_schedule &&
<div className="process-status">
<div className="process-wrapper">
<div className="process-bar"
style={{width: `${parseFloat(item.aist_schedule)}%`}}/>
</div>
<div className="process-text">{item.aist_schedule}</div>
</div>
}
<Bottom item={item}/>
</div>
)
const status = (
item.is_aist && <span className='status'>返现</span>
)
const courseExpire = (
item.course_expire && item.course_expire!='' &&
<span className='course-expire'>{item.course_expire}</span>
)
return (
<VList img={item.image_name}
handleClick={this.handleClick}
{...item}
key={index}
info={Info}
status={status}
courseExpire={courseExpire}
item={item}
id={item['v_course_id']}
/>
)
})
}
</ul>
</InfiniteScroll>
{ {
courseList.length % 10 !== 0 ? item.is_aist && item.aist_schedule &&
<AddCourse addCourseClick={this.addCourseClick}/> <div className="process-status">
: null <div className="process-wrapper">
<div className="process-bar"
style={{width: `${parseFloat(item.aist_schedule)}%`}}/>
</div>
<div className="process-text">{item.aist_schedule}</div>
</div>
} }
</> <Bottom item={item}/>
: </div>
<div className="empty"> )
<p><i className='iconfont iconfish'/></p>
<p className='empty-prompt'>您还没有课程哦，赶快去选课吧~</p> const status = (
<p> item.is_aist
<Link className='select-course' to='/classify'>去选课</Link> ? <span className='status'>返现</span>
</p> : item.course_expire
</div> ? <span className='course-expire'>{item.course_expire}</span>
: null
)
return (
<VList img={item.image_name}
handleClick={this.handleClick}
{...item}
key={index}
info={Info}
status={status}
item={item}
id={item['v_course_id']}
/>
)
})
}
</ul>
</InfiniteScroll>
{
courseList.length % 10 !== 0 ?
<AddCourse addCourseClick={this.addCourseClick}/>
: null
} }
</Loading> </>
:
} <div className="empty">
<p><i className='iconfont iconfish'/></p>
<p className='empty-prompt'>您还没有课程哦，赶快去选课吧~</p>
<p>
<Link className='select-course' to='/classify'>去选课</Link>
</p>
</div>
}
</Loading>
}
} }
export default connect( export default connect(
state => ({ state => ({
courseList: state.myCourses.courseList, courseList: state.myCourses.courseList,
user: state.user, user: state.user,
isLoading: state.myCourses.isLoading isLoading: state.myCourses.isLoading
}), }),
{ {
fetchCoursesListIfNeeded, fetchCoursesListIfNeeded,
switchTab switchTab
})(MyCourses) })(MyCourses)
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment