ml小程序

src/App.js

@@ -360,6 +360,9 @@ class App extends Component {
                alt=""/>
         </div>
       }
+      {/*
+        //todo 删
+      */}
       <div style={{backgroundColor: '#fff', color: '#000', position: 'fixed', bottom: '50px', left: '0'}}>
         <Link to={'/interactive-tutorial?id=200'}>编辑器</Link>
       </div>

src/components/interactive-tutorial/index.js

@@ -4,7 +4,7 @@ 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 { getParam, http, getWXObject, isValidHttpUrl } from "@/utils"
 import { Toast } from 'antd-mobile'
 import { questionType, status } from './consts'
 import Catalog from './catalog'
@@ -65,6 +65,8 @@ class InteractiveStudy extends Component {
   resetProcessStatus = () => {
     this.setState({
       processStatus: status.resumePractice,
+    }, () => {
+      // console.log(this.state.processStatus)
     })
   }
 
@@ -99,7 +101,7 @@ class InteractiveStudy extends Component {
             cachedList: state.cachedList.reverse().concat(list.slice(progress)).reverse(),
             page: state.page + 1,
             pageData: data,
-            progress: progress,
+            progress,
           }
         }, () => {
           cb && cb()
@@ -115,7 +117,7 @@ class InteractiveStudy extends Component {
     if (unitInfoId) {
       data.unit_info_id = unitInfoId
     }
-    http.post(`/m/it/user/saveSchedule`, data).then(res => {
+    http.post(`${API.home}/m/it/user/saveSchedule`, data).then(res => {
       const {code, msg, data} = res.data
       if (code === 200) {
 
@@ -125,9 +127,9 @@ class InteractiveStudy extends Component {
     })
   }
 
-  savePractice = ({syllabusId, type, answer, result, lines}) => {
+  savePractice = ({syllabus_id, type, answer, result, lines}) => {
     let data = {
-      syllabus_id: syllabusId,
+      syllabus_id,
       type,
       answer,
       result,
@@ -145,8 +147,10 @@ class InteractiveStudy extends Component {
     })
   }
 
+
   process = () => {
     const {processStatus} = this.state
+    const processContent = this.state.processContent.slice()
     if (processStatus === status.practicingProgram || processStatus === status.practicingSingle) {
       this.showToast('有其他正在进行的练习')
       return
@@ -156,11 +160,11 @@ class InteractiveStudy extends Component {
       return
     }
     this.setState(state => {
-      let nextQuestion, cachedList = state.cachedList, pageData = state.pageData
+      let nextQuestion, cachedList = state.cachedList, pageData = state.pageData, processStatus
       const length = cachedList.length
       if (length) {
-        nextQuestion = [cachedList.pop()]
-        if (length < 6) {
+        nextQuestion = cachedList.pop()
+        if (length < 3) {
           this.getPageContent(state.videoId)
         }
       }
@@ -169,23 +173,35 @@ class InteractiveStudy extends Component {
           processStatus: status.nextSection,
         }
       }
-      let processStatus = nextQuestion[0].type === questionType.singleAnswer
+      processStatus = nextQuestion.type === questionType.singleAnswer
         ? status.practicingSingle
-        : nextQuestion[0].type === questionType.program
+        : nextQuestion.type === questionType.program
           ? status.practicingProgram
           : status.resumePractice
+      if (!nextQuestion.syllabus_id) {
+        nextQuestion.syllabus_id = state.processContent[state.processContent.length - 1].syllabus_id
+      }
       return {
-        processContent: state.processContent.concat(nextQuestion),
+        processContent: processContent.concat([nextQuestion]),
         processStatus,
         isProgramShowed: processStatus === status.practicingProgram && (state.isProgramShowed + 1),
         cachedList,
         pageData,
       }
     }, () => {
+      const {processContent} = this.state
+      const latestItem = processContent[processContent.length - 1]
+      this.saveSchedule(latestItem.syllabus_id, latestItem.info_id)
       this.updatePosition()
     })
   }
 
+  addCache = (ques) => {
+    this.setState(state => ({
+      cachedList: state.cachedList.concat(ques),
+    }))
+  }
+
   render() {
     const {processStatus, processContent, avatar, isProgramShowed} = this.state
     return (
@@ -202,8 +218,10 @@ class InteractiveStudy extends Component {
                   </Container>
                 case questionType.singleAnswer:
                   return <SingleAnswerQuestion user={avatar} topic={item.content} question={item}
-                                               key={item.syllabus_id} updatePosition={this.updatePosition}
-                                               resetStatus={this.resetProcessStatus}/>
+                                               key={item.syllabus_id}
+                                               updatePosition={this.updatePosition}
+                                               resetStatus={this.resetProcessStatus} saveSchedule={this.saveSchedule}
+                                               addCache={this.addCache} savePractice={this.savePractice}/>
                 case questionType.codeBlock:
                 case questionType.program:
                   return <Program question={item} key={item.syllabus_id} isProgramShowed={isProgramShowed}/>
@@ -211,6 +229,13 @@ class InteractiveStudy extends Component {
             } else if (item.catalogue === 2) {
               return <Catalog title={item.content} key={item.syllabus_id}/>
             } else {
+              if (item.info_id) {
+                if (isValidHttpUrl(item.content)) {
+                  return <Container key={item.info_id}><img src={item.content} alt=""
+                                                            onLoad={this.updatePosition}/></Container>
+                }
+                return <Container key={item.info_id} content={item.content}/>
+              }
               return <Container key={item.syllabus_id}>
                 <span className={'subtitle'}>{item.content}</span>
               </Container>

src/components/interactive-tutorial/single-answer-question/index.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import './index.scss'
 import Container from '../container'
 import classnames from 'classnames'
-import { html } from "@/utils"
+import { html, isValidHttpUrl } from "@/utils"
 
 class SingleAnswerQuestion extends Component {
 
@@ -11,7 +11,7 @@ class SingleAnswerQuestion extends Component {
   state = {
     correct: '',
     wrong: '',
-    replies: [],
+    replies: '',
     selectable: false,
   }
 
@@ -20,16 +20,25 @@ class SingleAnswerQuestion extends Component {
       return
     }
 
-    const {question: {unit_questions}, updatePosition, resetStatus} = this.props
+    const {question: {unit_questions, type, syllabus_id}, updatePosition, resetStatus, saveSchedule, addCache, savePractice} = this.props
     const userSelect = unit_questions[index]
+    const isCorrect = userSelect.is_ans
     this.setState({
-      wrong: userSelect.is_ans ? '' : index,
-      correct: userSelect.is_ans ? index : '',
-      replies: info,
+      wrong: isCorrect ? '' : index,
+      correct: isCorrect ? index : '',
+      replies: info.slice(0, 1),
       selectable: false,
     }, () => {
       updatePosition()
       resetStatus()
+      addCache(info.slice(1))
+      savePractice({
+        type: 1,
+        syllabus_id: syllabus_id,
+        answer: unit_questions[index].unit_id,
+        result: isCorrect,
+      })
+      saveSchedule(syllabus_id, info[0].info_id)
     })
   }
 
@@ -55,7 +64,7 @@ class SingleAnswerQuestion extends Component {
 
   render() {
     const {correct, wrong, replies} = this.state
-    const {user, topic, img, question: {unit_questions: options}} = this.props
+    const {user, topic, img, question: {unit_questions: options}, updatePosition} = this.props
     return (
       <>
         <Container
@@ -78,7 +87,14 @@ class SingleAnswerQuestion extends Component {
           }
         />
         {
-          !!replies.length && replies.map(item => <Container key={item.info_id} content={item.content}/>)
+          !!replies.length && replies.map(item => {
+            if (isValidHttpUrl(item.content)) {
+              return <Container key={item.info_id}>
+                <img src={item.content} alt="" onLoad={updatePosition}/>
+              </Container>
+            }
+            return <Container content={item.content} key={item.info_id}/>
+          })
         }
       </>
     );

src/components/interactive-tutorial/terminal/index.js

@@ -45,6 +45,7 @@ class TerminalInterface extends Component {
   }
 
   getAuthenticationData = () => {
+    // axios.post(`https://fwjizuub9f1tqlcb.julyedu.com`, {
     axios.post(`http://47.93.119.175:8888/auth`, {
       username: '3guh394h3fhj0f4',
       password: 'okqdw029j038hrv3890cv',

src/utils/index.js

@@ -85,6 +85,18 @@ function validateEmail(email) {
   return re.test(String(email).toLowerCase());
 }
 
+function isValidHttpUrl(str) {
+  let url;
+
+  try {
+    url = new URL(str);
+  } catch (err) {
+    return false;
+  }
+
+  return url.protocol === "http:" || url.protocol === "https:";
+}
+
 const browser = (function () {
   const ua = navigator.userAgent
   return {
@@ -132,6 +144,7 @@ export {
   browser,
   isLogin,
   dateCountDown,
+  isValidHttpUrl
 }
 export {
   default as SendMessageToApp,