index.js 6.17 KB
Newer Older
FE committed
1
import React, { Component } from "react"
2
import VList from '@/common/v-list-base'
zhanghaozhe committed
3
import './my-courses.scss'
zhanghaozhe committed
4 5
import { isToday, format } from "date-fns"
import { connect } from "react-redux"
zhanghaozhe committed
6
import { fetchCoursesListIfNeeded, switchTab } from "./actions"
zhanghaozhe committed
7
import InfiniteScroll from 'react-infinite-scroller'
zhanghaozhe committed
8
import { debounce } from 'lodash'
zhanghaozhe committed
9
import { Link } from 'react-router-dom'
zhanghaozhe committed
10
import { Loading } from "@/common";
zhanghaozhe committed
11

zhanghaozhe committed
12 13

function getStudyTime(seconds) {
zhanghaozhe committed
14 15 16 17 18
  return {
    hour: Math.floor(seconds / (60 * 60)),
    min: Math.floor(seconds / 60) % 60,
    sec: seconds % 60
  }
zhanghaozhe committed
19 20
}

zhanghaozhe committed
21
const AddCourse = React.memo(({addCourseClick}) => (
zhanghaozhe committed
22 23 24
  <div className='add-course'>
    <button className='add' onClick={addCourseClick}>添加课程+</button>
  </div>
zhanghaozhe committed
25
))
zhanghaozhe committed
26

zhanghaozhe committed
27
function Record({record: {seconds, lesson_name}}) {
zhanghaozhe committed
28 29
  let re = /第[\s\S]+?课/,
    result = ''
zhanghaozhe committed
30

zhanghaozhe committed
31 32 33 34
  if (lesson_name) {
    let matchResult = re.exec(lesson_name)
    result += (matchResult && matchResult[0]) ? matchResult[0] : ''
  }
zhanghaozhe committed
35

zhanghaozhe committed
36 37 38 39 40
  if (seconds) {
    let studyTime = getStudyTime(seconds)
    let hour = studyTime.hour ? String(studyTime.hour).padStart(2, '0') + ':' : '',
      min = studyTime.min ? String(studyTime.min).padStart(2, '0') + ':' : '',
      sec = studyTime.sec ? String(studyTime.sec).padStart(2, '0') : ''
zhanghaozhe committed
41

zhanghaozhe committed
42 43
    result += hour + min + sec
  }
zhanghaozhe committed
44

zhanghaozhe committed
45 46
  return (
    <span className={'record'}>
zhanghaozhe committed
47
            {
zhanghaozhe committed
48
              result.length ? `学习到${result}` : null
zhanghaozhe committed
49 50
            }
        </span>
zhanghaozhe committed
51
  )
zhanghaozhe committed
52 53
}

zhanghaozhe committed
54

zhanghaozhe committed
55
const Bottom = React.memo(({item}) => {
zhanghaozhe committed
56 57 58
  if (item.ago || item.seconds) {
    let date = new Date(item.ago * 1000)
    let time = isToday(date) ? format(date, 'HH时mm分') : format(date, 'MM月DD日')
zhanghaozhe committed
59
    return (
zhanghaozhe committed
60 61 62 63
      <div className="des">
        <span className='time'>{time}</span>
        <Record record={item}/>
      </div>
zhanghaozhe committed
64
    )
zhanghaozhe committed
65 66 67 68
  }
  return (
    <button className='start-learn'>开始学习</button>
  )
zhanghaozhe committed
69
})
zhanghaozhe committed
70

FE committed
71
class MyCourses extends Component {
zhanghaozhe committed
72

zhanghaozhe committed
73
  list
zhanghaozhe committed
74

zhanghaozhe committed
75 76 77
  state = {
    isLoading: true
  }
zhanghaozhe committed
78

zhanghaozhe committed
79 80 81 82 83 84
  handleClick = (id, item) => {
    const {history} = this.props
    const {mode, course_id} = item
    if (mode && mode == 6) {
      history.push(`/python?id=${course_id}`)
      return
zhanghaozhe committed
85
    }
zhanghaozhe committed
86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103
    history.push(`/play/video?id=${id}`)
  }
  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()
zhanghaozhe committed
104
    }
zhanghaozhe committed
105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131
  }, 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>
                        {
zhanghaozhe committed
132
                          !item.is_restricted && item.is_aist &&
zhanghaozhe committed
133 134 135
                          <div className='contact'>助教微信:{item.assist_weixin}</div>
                        }
                        {
zhanghaozhe committed
136
                          !item.is_restricted && !item.is_aist && item.contact_type == 1 && item.course_qq &&
zhanghaozhe committed
137 138 139
                          <div className='contact'>QQ群:{item.course_qq}</div>
                        }
                        {
zhanghaozhe committed
140
                          !item.is_restricted && !item.is_aist && item.contact_type == 2 && item.course_qq &&
zhanghaozhe committed
141 142
                          <div className='contact'>班主任微信:{item.course_qq}</div>
                        }
zhanghaozhe committed
143

zhanghaozhe committed
144
                        {
zhanghaozhe committed
145 146 147 148 149 150 151 152
                          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>
zhanghaozhe committed
153
                        }
zhanghaozhe committed
154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183
                        <Bottom item={item}/>
                      </div>
                    )

                    const status = (
                      item.is_aist
                        ? <span className='status'>返现</span>
                        : item.course_expire
                        ? <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
zhanghaozhe committed
184
            }
zhanghaozhe committed
185 186 187 188 189 190 191 192 193 194 195 196 197
          </>
          :
          <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>

  }
zhanghaozhe committed
198 199
}

zhanghaozhe committed
200
export default connect(
zhanghaozhe committed
201 202 203 204 205 206 207 208 209
  state => ({
    courseList: state.myCourses.courseList,
    user: state.user,
    isLoading: state.myCourses.isLoading
  }),
  {
    fetchCoursesListIfNeeded,
    switchTab
  })(MyCourses)