index.js 7.11 KB
Newer Older
zhanghaozhe committed
1 2 3 4 5 6 7 8 9 10 11
import React, { Component } from 'react';
import './index.scss'
import Container from './container'
import SingleAnswerQuestion from "@components/interactive-tutorial/single-answer-question"
import Program from "@components/interactive-tutorial/program"
import Project from './project'
import { getParam, http, getWXObject } from "@/utils"
import { Toast } from 'antd-mobile'
import { questionType, status } from './consts'
import Catalog from './catalog'

zhanghaozhe committed
12

zhanghaozhe committed
13
class InteractiveStudy extends Component {
zhanghaozhe committed
14
  container = null
zhanghaozhe committed
15 16
  state = {
    page: 1,
zhanghaozhe committed
17
    progress: 0,
zhanghaozhe committed
18 19
    schedule: {},
    pageData: {},
zhanghaozhe committed
20
    cachedList: [],
zhanghaozhe committed
21
    processContent: [],
zhanghaozhe committed
22
    processStatus: status.resumePractice,
zhanghaozhe committed
23
    isComplete: false,
zhanghaozhe committed
24 25 26 27
    avatar: '',
    isFirst: true,
    isProgramShowed: 0,
    videoId: '',
zhanghaozhe committed
28 29 30 31 32 33
  }

  componentDidMount() {
    this.getSchedule().then(res => {
      const {code, msg, data} = res.data
      if (code === 200) {
zhanghaozhe committed
34 35
        const pageInfo = data.page_info
        const page = pageInfo.current_page
zhanghaozhe committed
36 37
        this.setState({
          schedule: data,
zhanghaozhe committed
38 39 40 41
          avatar: data.teacher_avatar,
          page,
          videoId: data.current_video_id,
        })
zhanghaozhe committed
42
        document.title = data.current_video_name
zhanghaozhe committed
43 44 45
        this.getPageContent(data.current_video_id, () => {
          this.updatePosition()
          this.getPageContent(data.current_video_id)
zhanghaozhe committed
46 47 48 49 50 51 52 53 54 55 56 57 58
        })
      } else {
        this.showToast(msg)
      }
    })
  }

  getSchedule = () => {
    return http.post(`${API.home}/m/it/study/schedule`, {
      course_id: getParam('id'),
    })
  }

zhanghaozhe committed
59 60 61 62 63 64 65 66 67 68 69 70
  updatePosition = () => {
    setTimeout(() => {
      window.scrollTo(0, this.container.scrollHeight)
    })
  }

  resetProcessStatus = () => {
    this.setState({
      processStatus: status.resumePractice,
    })
  }

zhanghaozhe committed
71 72 73 74
  showToast = (msg, type = 'info') => {
    Toast[type](msg, 2, null, false)
  }

zhanghaozhe committed
75
  getPageContent = (videoId, cb) => {
zhanghaozhe committed
76 77 78 79
    const {page, schedule} = this.state
    if (page > schedule.page_info.total_pages) {
      return
    }
zhanghaozhe committed
80
    http.post(`${API.home}/m/it/study/syllabus?page=${this.state.isFirst ? 1 : this.state.page}`, {
zhanghaozhe committed
81 82
      course_id: getParam('id'),
      video_id: videoId,
zhanghaozhe committed
83
      type: this.state.isFirst ? 1 : 2,
zhanghaozhe committed
84 85 86
    }).then(res => {
      const {code, msg, data} = res.data
      if (code === 200) {
zhanghaozhe committed
87
        this.setState(state => {
zhanghaozhe committed
88
          const list = data.syllabus_list
zhanghaozhe committed
89
          const progress = state.processContent.length
zhanghaozhe committed
90
            ? list.findIndex(item => item.syllabus_id === state.processContent[state.processContent.length - 1].syllabus_id) + 1
zhanghaozhe committed
91
            : 0
zhanghaozhe committed
92 93 94 95 96 97
          if (state.isFirst) {
            return {
              processContent: state.processContent.concat(list),
              isFirst: false,
            }
          }
zhanghaozhe committed
98
          return {
zhanghaozhe committed
99 100
            cachedList: state.cachedList.reverse().concat(list.slice(progress)).reverse(),
            page: state.page + 1,
zhanghaozhe committed
101
            pageData: data,
zhanghaozhe committed
102
            progress: progress,
zhanghaozhe committed
103 104 105
          }
        }, () => {
          cb && cb()
zhanghaozhe committed
106 107 108 109 110 111 112
        })
      } else {
        this.showToast(msg)
      }
    })
  }

zhanghaozhe committed
113
  saveSchedule = (syllabusId, unitInfoId) => {
zhanghaozhe committed
114 115 116 117 118
    let data = {syllabus_id: syllabusId}
    if (unitInfoId) {
      data.unit_info_id = unitInfoId
    }
    http.post(`/m/it/user/saveSchedule`, data).then(res => {
zhanghaozhe committed
119 120 121 122 123 124 125 126 127
      const {code, msg, data} = res.data
      if (code === 200) {

      } else {
        this.showToast(msg, 'fail')
      }
    })
  }

zhanghaozhe committed
128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147
  savePractice = ({syllabusId, type, answer, result, lines}) => {
    let data = {
      syllabus_id: syllabusId,
      type,
      answer,
      result,
    }
    if (type === 2 && lines) {
      data.lines = lines
    }
    http.post(`${API.home}/m/it/user/savePractice`, data).then(res => {
      const {code, msg, data} = res.data
      if (code === 200) {

      } else {
        Toast.fail(msg, 2)
      }
    })
  }

zhanghaozhe committed
148
  process = () => {
zhanghaozhe committed
149
    const {processStatus} = this.state
zhanghaozhe committed
150 151 152 153
    if (processStatus === status.practicingProgram || processStatus === status.practicingSingle) {
      this.showToast('有其他正在进行的练习')
      return
    }
zhanghaozhe committed
154 155 156 157
    if (processStatus === status.nextSection) {
      console.log('下一关')
      return
    }
zhanghaozhe committed
158
    this.setState(state => {
zhanghaozhe committed
159 160 161
      let nextQuestion, cachedList = state.cachedList, pageData = state.pageData
      const length = cachedList.length
      if (length) {
zhanghaozhe committed
162
        nextQuestion = [cachedList.pop()]
zhanghaozhe committed
163 164 165
        if (length < 6) {
          this.getPageContent(state.videoId)
        }
zhanghaozhe committed
166
      }
zhanghaozhe committed
167 168 169 170
      if (!cachedList.length) {
        return {
          processStatus: status.nextSection,
        }
zhanghaozhe committed
171 172 173 174 175 176 177 178 179 180 181
      }
      let processStatus = nextQuestion[0].type === questionType.singleAnswer
        ? status.practicingSingle
        : nextQuestion[0].type === questionType.program
          ? status.practicingProgram
          : status.resumePractice
      return {
        processContent: state.processContent.concat(nextQuestion),
        processStatus,
        isProgramShowed: processStatus === status.practicingProgram && (state.isProgramShowed + 1),
        cachedList,
zhanghaozhe committed
182
        pageData,
zhanghaozhe committed
183 184 185 186 187 188 189 190
      }
    }, () => {
      this.updatePosition()
    })
  }

  render() {
    const {processStatus, processContent, avatar, isProgramShowed} = this.state
zhanghaozhe committed
191
    return (
zhanghaozhe committed
192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219
      <div id={'interactive-study'} ref={el => this.container = el}>
        {
          !!processContent.length && processContent.map(item => {
            if (item.catalogue === 1) {
              switch (item.type) {
                case questionType.text:
                  return <Container user={avatar} content={item.content} key={item.syllabus_id}/>
                case questionType.image:
                  return <Container user={avatar} key={item.syllabus_id}>
                    <img src={item.content} alt=""/>
                  </Container>
                case questionType.singleAnswer:
                  return <SingleAnswerQuestion user={avatar} topic={item.content} question={item}
                                               key={item.syllabus_id} updatePosition={this.updatePosition}
                                               resetStatus={this.resetProcessStatus}/>
                case questionType.codeBlock:
                case questionType.program:
                  return <Program question={item} key={item.syllabus_id} isProgramShowed={isProgramShowed}/>
              }
            } else if (item.catalogue === 2) {
              return <Catalog title={item.content} key={item.syllabus_id}/>
            } else {
              return <Container key={item.syllabus_id}>
                <span className={'subtitle'}>{item.content}</span>
              </Container>
            }
          })
        }
zhanghaozhe committed
220 221 222
        {
          processStatus === status.nextSection && <Project user={avatar}/>
        }
zhanghaozhe committed
223
        <div className="status-bar" onClick={this.process}>
zhanghaozhe committed
224
          {processStatus && <span className={'status'}>{processStatus}</span>}
zhanghaozhe committed
225 226 227 228 229 230 231 232 233 234 235 236
          {/*<span className={'complete'}>已学完全部课时</span>*/}
          {/*<div className="free-trial-end">*/}
          {/*  <span>试学体验结束,389.1元学习全部课时</span>*/}
          {/*  <button className={'purchase'}>立即购买</button>*/}
          {/*</div>*/}
        </div>
      </div>
    );
  }
}

export default InteractiveStudy;