ml小程序

src/components/interactive-study/index.js

-import React, { Component } from 'react';
-import './index.scss'
-import Container from './container'
-import SingleAnswerQuestion from "@components/interactive-study/single-answer-question"
-import Program from "@components/interactive-study/program"
-import { WithFullSize } from "@/HOCs"
-
-
-class InteractiveStudy extends Component {
-  singleIcon = 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/interactive_tutorial/study/single-answer-icon.png'
-  programIcon = 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/interactive_tutorial/study/program-icon.png'
-  state = {
-    options: [
-      'A. 程序向屏幕输出信息的过程，是人与计算机的单向沟通。',
-      'B. 程序向内部输入信息的过程。',
-      'C. 程序向内部输入信息的过程。',
-    ],
-    img: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/weekend/bigdata/project/07.png'
-  }
-
-  componentDidMount() {
-
-  }
-
-  render() {
-    return (
-      <div id={'interactive-study'}>
-        <Container user={'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/avatar_20191104.png'}
-                   content={'Hi！初次见面，我叫小柒，是你在七月在线的课程导师。从现在开始，你就要跟着我一起学Python啦，请敲回车键继续课程。'}/>
-        <SingleAnswerQuestion user={this.singleIcon} topic={'请问，你会推荐哪个物品给用户C？'} options={this.state.options}
-                              img={this.state.img}/>
-        <Program user={this.programIcon} code={"week = ['星期一', '星期二', '星期三']\nprint(123)"}/>
-      </div>
-    );
-  }
-}
-
-export default WithFullSize(InteractiveStudy);
\ No newline at end of file

src/components/interactive-study/index.scss

-#interactive-study {
-  background-color: #252529;
-  min-height: 100%;
-}
\ No newline at end of file

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

+import React, { Component } from 'react';
+import './index.scss'
+
+class Catalog extends Component {
+  render() {
+    return (
+      <div className={'catalog'}>
+        <div className="icon">
+          <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/interactive_tutorial/study/level1-title-icon.png"
+               alt=""/>
+        </div>
+        <div className="title">{this.props.title}</div>
+      </div>
+    );
+  }
+}
+
+export default Catalog;
\ No newline at end of file

src/components/interactive-tutorial/catalog/index.scss

+.catalog {
+  display: flex;
+  padding-left: 12px;
+  margin-bottom: 38px;
+  font-size: 20px;
+  color: #FFD667;
+  align-items: center;
+
+  .icon {
+    padding-right: 10px;
+    line-height: 22px;
+  }
+
+  img {
+    width: 20px;
+    height: 22px;
+    vertical-align: middle;
+  }
+
+  .title {
+    padding-left: 19px;
+  }
+}
\ No newline at end of file

src/components/interactive-tutorial/consts.js

+export const questionType = {
+  text: 1,
+  image: 2,
+  singleAnswer: 3,
+  codeBlock: 4,
+  program: 5,
+}
+
+export const status = {
+  practice: '练习',
+  practicing: '练习中...',
+  startPractice: '开始练习',
+  resumePractice: '继续练习',
+  nextSection: '下一关',
+}
\ No newline at end of file

src/components/interactive-study/container/index.js → src/components/interactive-tutorial/container/index.js

@@ -3,17 +3,16 @@ import './index.scss'
 
 class Container extends Component {
   render() {
-    const {user, content} = this.props
+    const {user, content, children} = this.props
     return (
       <div className={'container'}>
-        {
-          user &&
-          <div className="user">
-            <img className={'avatar'} src={user} alt=""/>
-          </div>
-        }
+        <div className="user">
+          {
+            user && <img className={'avatar'} src={user} alt=""/>
+          }
+        </div>
         <div className="divide"></div>
-        <div className="content">{content}</div>
+        <div className="content">{content ? content : children}</div>
       </div>
     );
   }

src/components/interactive-study/container/index.scss → src/components/interactive-tutorial/container/index.scss

@@ -26,5 +26,13 @@
     padding-left: 10.5px;
     color: rgba(207, 219, 229, .8);
     font-size: 15px;
+    /*img{
+      width: 100%;
+    }*/
+  }
+
+  .subtitle{
+    font-size: 14px;
+    color: #FFD667;
   }
 }
\ No newline at end of file

src/components/interactive-tutorial/index.js

+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'
+
+class InteractiveStudy extends Component {
+  singleIcon = 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/interactive_tutorial/study/single-answer-icon.png'
+  programIcon = 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/interactive_tutorial/study/program-icon.png'
+  state = {
+    options: [
+      'A. 程序向屏幕输出信息的过程，是人与计算机的单向沟通。',
+      'B. 程序向内部输入信息的过程。',
+      'C. 程序向内部输入信息的过程。',
+    ],
+    img: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/weekend/bigdata/project/07.png',
+    page: 1,
+    schedule: {},
+    pageData: {},
+    processContent: [],
+    processStatus: status.startPractice,
+    isComplete: false,
+  }
+
+  componentDidMount() {
+
+    this.getSchedule().then(res => {
+      const {code, msg, data} = res.data
+      if (code === 200) {
+
+        this.setState({
+          schedule: data,
+        })
+        this.getPageContent(data.current_video_id)
+
+      } else {
+        this.showToast(msg)
+      }
+    })
+  }
+
+  getSchedule = () => {
+    return http.post(`${API.home}/m/it/study/schedule`, {
+      course_id: getParam('id'),
+    })
+  }
+
+  showToast = (msg, type = 'info') => {
+    Toast[type](msg, 2, null, false)
+  }
+
+  getPageContent = (videoId) => {
+    http.post(`${API.home}/m/it/study/syllabus?page=${this.state.page}`, {
+      course_id: getParam('id'),
+      video_id: videoId,
+      type: 1,
+    }).then(res => {
+      const {code, msg, data} = res.data
+      if (code === 200) {
+        this.setState({
+          pageData: data,
+        })
+      } else {
+        this.showToast(msg)
+      }
+    })
+  }
+
+  render() {
+    const {processStatus} = this.state
+    return (
+      <div id={'interactive-study'}>
+        <Catalog title={'Print()函数'}/>
+        <Container>
+          <span className={'subtitle'}>副标题</span>
+        </Container>
+        <Container>
+          <img
+            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590155695725&di=0a1cad792ef55dc43305ab904aae04fb&imgtype=0&src=http%3A%2F%2Fsearchfoto.ru%2Fimg%2FxyygpKbDS1y8pTjXUy83VS8rMS9fLSy3RL8mwz0yx9fcM0EtJ0S2PyCnOy8sOSTMOqQq38I23NHf0SHTNV0vMLbAutzUyNgCzMmwNzSGsomJbQzCjIDnHNgUMwNx8W1OIMNBoQz1DAA.jpg"
+            alt=""/>
+        </Container>
+        <Container user={'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/avatar_20191104.png'}
+                   content={'Hi！初次见面，我叫小柒，是你在七月在线的课程导师。从现在开始，你就要跟着我一起学Python啦，请敲回车键继续课程。'}/>
+        <SingleAnswerQuestion user={this.singleIcon} topic={'请问，你会推荐哪个物品给用户C？'} options={this.state.options}
+                              img={this.state.img}/>
+        <Program user={this.programIcon} code={"week = ['星期一', '星期二', '星期三']\nprint(123)"}/>
+        {/*<Project user={this.singleIcon}/>*/}
+        <div className="status-bar">
+          {/*<span className={'complete'}>已学完全部课时</span>*/}
+          <span className={'status'}>{processStatus}</span>
+          {/*<div className="free-trial-end">*/}
+          {/*  <span>试学体验结束，389.1元学习全部课时</span>*/}
+          {/*  <button className={'purchase'}>立即购买</button>*/}
+          {/*</div>*/}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default InteractiveStudy;
\ No newline at end of file

src/components/interactive-tutorial/index.scss

+#interactive-study {
+  position: relative;
+  min-height: 100%;
+  background-color: #252529;
+  padding-bottom: 49px;
+  padding-top: 20px;
+
+  & + .year19-index {
+    display: none;
+  }
+
+  .container:last-child {
+    margin-bottom: 0;
+  }
+
+  .status-bar {
+    $height: 49px;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: $height;
+    background: #3E3F47;
+    line-height: $height;
+    text-align: center;
+    color: #CFDBE5;
+
+    .complete {
+      color: rgba(207, 219, 229, .2);
+      font-size: 18px;
+    }
+
+    .status{
+      color: #CFDBE5;
+      font-size: 12px;
+    }
+
+    .free-trial-end {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 15px;
+      button{
+        width: 80px;
+        height: 30px;
+        -webkit-appearance: none;
+        border: none;
+        outline: 0;
+        background: #FA5C19;
+        font-size: 14px;
+        color: #fff;
+      }
+    }
+  }
+}
\ No newline at end of file

src/components/interactive-study/program/index.js → src/components/interactive-tutorial/program/index.js

@@ -5,7 +5,8 @@ import AceEditor from 'react-ace'
 import 'ace-builds/src-min-noconflict/theme-dracula'
 import 'ace-builds/src-min-noconflict/mode-python'
 import StatusBar from './status-bar'
-const {First, Normal} = StatusBar
+
+const {First, Normal, Pass, Error, InputTip} = StatusBar
 
 class Program extends Component {
   editor = null
@@ -20,7 +21,7 @@ class Program extends Component {
     const contentWidth = content.clientWidth
     const contentPaddingLeft = parseFloat(contentStyles.getPropertyValue('padding-left'))
     this.setState({
-      editorWidth: `${contentWidth - contentPaddingLeft}px`
+      editorWidth: `${contentWidth - contentPaddingLeft}px`,
     })
   }
 
@@ -47,7 +48,7 @@ class Program extends Component {
               height={'141px'}
               onLoad={this.onLoad}
             />
-            <Normal/>
+            <InputTip/>
           </div>
         }
       />

src/components/interactive-study/program/index.scss → src/components/interactive-tutorial/program/index.scss

-.program{
+.program {
+
   background-color: #1f1f24;
   padding-top: 12px;
+
   .ace-dracula {
     background: rgba(31, 31, 36, 1);
 

src/components/interactive-study/program/status-bar/index.js → src/components/interactive-tutorial/program/status-bar/index.js

@@ -13,26 +13,49 @@ const Base = ({children, className}) => {
 
 const First = ({execute}) => {
   return <Base className={'first'}>
-    <div className="hint">当前环境暂不支持编写程序，可前往PC端练习或点击按钮</div>
+    <div className="tip">当前环境暂不支持编写程序，可前往PC端练习或点击按钮</div>
     <button className={'btn'} onClick={execute}>运行并查看结果</button>
   </Base>
 }
 
-const Normal = ({execute, checkAnswer}) => {
+const Normal = ({execute, checkAnswer, showAnswerButton = true}) => {
   return <Base className={'normal'}>
-    <button className={'check-answer'} onClick={checkAnswer}>查看参考答案</button>
+    {
+      showAnswerButton && <button className={'check-answer'} onClick={checkAnswer}>查看参考答案</button>
+    }
     <button className={'btn'} onClick={execute}>运行</button>
   </Base>
 }
 
 const Pass = () => {
   return <Base className={'pass'}>
-    <i className={'iconfont icondanseshixintubiao-3'}></i>
+    <i className={'iconfont icondanseshixintubiao-5'}></i>
     <span>运行通过</span>
   </Base>
 }
 
+const Error = ({showSkip = true}) => {
+  return <Base className={'error'}>
+    <div className="left">
+      <i className="iconfont icondanseshixintubiao-3"></i>
+      <span>第7行出现错误</span>
+      {showSkip && <a href="javascript:void(0);">跳过本题</a>}
+    </div>
+    <button>查看答案</button>
+  </Base>
+}
+
+const InputTip = () => {
+  return <Base className={'input-tip'}>
+    <div className="tip">输入完毕后请点击确认</div>
+    <button>确认</button>
+  </Base>
+}
+
 export default {
   First,
-  Normal
+  Normal,
+  Pass,
+  Error,
+  InputTip
 };
\ No newline at end of file

src/components/interactive-study/program/status-bar/index.scss → src/components/interactive-tutorial/program/status-bar/index.scss

@@ -2,6 +2,7 @@ $primaryColor: rgba(0, 153, 255, .8);
 .base-status-bar {
   display: flex;
   justify-content: space-between;
+  align-items: center;
   height: 44px;
   padding: 8px 10px;
   background: #2B2B33;
@@ -16,11 +17,12 @@ $primaryColor: rgba(0, 153, 255, .8);
     border-radius: 4px;
     -webkit-appearance: none;
     outline: 0;
+    padding: 8px 12px;
   }
 }
 
 .first {
-  .hint {
+  .tip {
     width: 169px;
   }
 
@@ -40,18 +42,55 @@ $primaryColor: rgba(0, 153, 255, .8);
     color: $primaryColor;
     background-color: transparent;
   }
-
-  .btn {
-    padding-left: 12px;
-    padding-right: 12px;
-  }
 }
 
-.pass{
+.pass {
   justify-content: flex-start;
-  align-content: center;
+  align-items: center;
   color: #74c27c;
-  .iconfont{
+  background: rgba(116, 193, 124, .3);
+
+  .iconfont {
     font-size: 18px;
+    margin-right: 10px;
+  }
+}
+
+.only-execute {
+  justify-content: flex-end;
+}
+
+.error {
+  align-items: center;
+
+  .left {
+    color: #C24E55;
+
+    a {
+      color: #fff;
+      text-decoration: underline;
+      margin-left: 15px;
+    }
+  }
+
+  .iconfont {
+    font-size: 18px;
+    margin-right: 10px;
+  }
+
+  span {
+    font-size: 15px;
+  }
+}
+
+.input-tip{
+  .tip{
+    font-size: 12px;
+    color: #CFDBE5;
+  }
+  button{
+    border: 1px solid #09f;
+    background: transparent;
+    color: #09f;
   }
 }
\ No newline at end of file

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

+import React, { Component } from 'react';
+import Container from '../container'
+import './index.scss'
+
+class Project extends Component {
+  render() {
+    return (
+      <Container user={this.props.user}>
+        <div id={'project'}>
+          <table border={1}>
+            <thead>
+            <tr>
+              <th>项目资料</th>
+              <th>项目进度</th>
+              <th>项目成绩</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr>
+              <td className={'pc-tip'}>请前往PC端下载</td>
+              <td>
+                <span className={'pc-tip'}>请前往PC端提交</span><br/>
+                <span>2020-02-28截止</span>
+              </td>
+              <td>2020-XX-XX公布</td>
+            </tr>
+            </tbody>
+          </table>
+        </div>
+      </Container>
+    );
+  }
+}
+
+export default Project;
\ No newline at end of file

src/components/interactive-tutorial/project/index.scss

+html,body{
+  min-height: 100%;
+}
+#project {
+  table {
+    width: 315px;
+    border: 1px solid #252529;
+    font-size: 11px;
+    color: #CFDBE5;
+    background: #2E2E33;
+
+    .pc-tip {
+      color: #09f;
+    }
+
+    td, th {
+      width: 99px;
+      height: 44px;
+      vertical-align: middle;
+      text-align: center;
+    }
+  }
+
+  thead {
+    th {
+      font-size: 15px;
+      color: #CFDBE6;
+      border-bottom: 1px solid #252529;
+
+      &:nth-child(2) {
+        border-left: 1px solid #252529;
+        border-right: 1px solid #252529;
+      }
+    }
+  }
+
+  tbody {
+    td {
+      &:nth-child(2) {
+        border-left: 1px solid #252529;
+        border-right: 1px solid #252529;
+      }
+    }
+  }
+}
\ No newline at end of file

src/router/router-config.js

@@ -332,7 +332,7 @@ export default [
   },
 
   {
-    path: '/interactive-study',
-    component: loadable(() => import(/* webpackChunkName: 'interactive-study' */'@/components/interactive-study'))
+    path: '/interactive-tutorial',
+    component: loadable(() => import(/* webpackChunkName: 'interactive-tutorial' */'@/components/interactive-tutorial'))
   }
 ]

src/utils/index.js

@@ -3,7 +3,7 @@ import {
   differenceInDays,
   differenceInHours,
   differenceInMinutes,
-  differenceInSeconds
+  differenceInSeconds,
 } from 'date-fns'
 
 
@@ -15,7 +15,7 @@ export const getParam = (key, str) => {
 }
 
 const html = content => ({
-  __html: htmlDecode(content)
+  __html: htmlDecode(content),
 })
 
 const htmlDecode = content => {
@@ -93,7 +93,7 @@ const browser = (function () {
     isIOS: /\(i[^;]+;( U;)? CPU.+Mac OS X/i.test(ua),
     isIPad: /iPad/i.test(ua),
     isAndroidApp: /Android/i.test(ua) && getParam('version'),
-    isIOSApp: /iPhone/i.test(ua) && getParam('version')
+    isIOSApp: /iPhone/i.test(ua) && getParam('version'),
   }
 })()
 
@@ -110,19 +110,20 @@ const dateCountDown = (later, earlier) => {
     d,
     h,
     m,
-    s
+    s,
   }
 }
 
 
 export {
-  default as http
+  default as http,
 }
   from './http'
 export {
-  default as wxShare
+  default as wxShare,
 }
   from './wechat/share'
+export { getWXObject } from './wechat/base'
 export {
   html,
   initCaptcha,
@@ -130,9 +131,9 @@ export {
   validateEmail,
   browser,
   isLogin,
-  dateCountDown
+  dateCountDown,
 }
 export {
-  default as SendMessageToApp
+  default as SendMessageToApp,
 }
   from './app'
\ No newline at end of file