整理逻辑

src/components/python/index.js

 import React, { Component } from 'react'
-import { connect } from 'react-redux';
 import {http, getParam} from '@/utils'
 import PythonDes from './pythomDes'
 import PythonStudy from './pythonStudy'
 import {Toast} from 'antd-mobile'
 
-@connect(state => ({
-  user: state.user
-}))
 class Python extends Component {
   constructor(props) {
     super(props);
     this.state = {
       isPay: 0,
-      syllabus: [], // 阶梯学习
-      allSyllabus: [], // 阶梯学习
-      allSyllabusShow: false,
-      practice: [], // 课后实操
-      allPractice: [], // 课后实操
-      allPracticeShow: false,
     }
   }
 
@@ -26,38 +16,6 @@ class Python extends Component {
     this.fetchCourseInfo();
   }
 
-  showAll = (key) => {
-    if(key === 1) {
-      this.setState({
-        syllabus: this.state.allSyllabus,
-        allSyllabusShow: true,
-      })
-    }
-    if(key === 2) {
-      this.setState({
-        practice: this.state.allPractice,
-        allPracticeShow: true,
-      })
-    }
-  }
-  hideSome = (key) => {
-    if(key === 1) {
-      this.setState({
-        syllabus: this.state.allSyllabus.slice(0, 2),
-        allSyllabusShow: false,
-      })
-    }
-    if(key === 2) {
-      this.setState({
-        practice: this.state.allPractice.slice(0, 2),
-        allPracticeShow: false,
-      })
-    }
-  }
-  fun = (fun, key) => {
-
-  }
-
   fetchCourseInfo = () => {
     const id = getParam('id');
     http.get(`${API.home}/m/course/detail/${id}`).then((res) => {
@@ -69,29 +27,14 @@ class Python extends Component {
         })
       }
     });
-
-    http.get(`${API['home']}/web/it_detail?course_id=180`).then(res => {
-      const { code, data, msg } = res.data
-      if (code == 200) {
-        this.setState({
-          syllabus: data.syllabus.slice(0, 2),
-          allSyllabus: data.syllabus,
-          practice: data.practice.slice(0, 2),
-          allPractice: data.practice,
-        })
-      } else {
-        Message.warning(msg);
-      }
-    });
   }
 
   render() {
-    const { isPay, syllabus, allSyllabusShow, practice, allPracticeShow } = this.state;
-    const { user: { hasError } } = this.props;
+    const { isPay } = this.state;
     return (
       <div>
         {
-          isPay === 0 && <PythonDes syllabus={syllabus} practice={practice} allSyllabusShow={allSyllabusShow} allPracticeShow={allPracticeShow} show={this.showAll} hide={this.hideSome}></PythonDes>
+          isPay === 0 && <PythonDes history={this.props.history}></PythonDes>
         }
         {
           isPay === 1 && <PythonStudy></PythonStudy>

src/components/python/pythomDes/Experience/index.js

@@ -14,7 +14,7 @@ export default class Experience extends Component {
           </div>
           <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/r%402x.png" alt=""/>
         </div>
-        <div className={'btn'}>立即体验</div>
+        <div className={'btn'} onClick={this.props.tryLearn}>立即体验</div>
       </div>
     )
   }

src/components/python/pythomDes/Team/index.js

@@ -7,22 +7,22 @@ export default class Team extends Component {
     this.state = {
       teacherList: [
         {
-          avatar: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/zhishidian.png',
+          avatar: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/teacher1.png',
           name: 'A老师',
           des: '七月在线AI Lab负责人兼科学家。历任浪潮集团数七月在线AI Lab负责人兼科学家。历任浪潮集团数七月在线AI Lab负责人兼科学家。历任浪潮集团数据科学家，国家电网人工智能行业应用方向团队负责人。参与过一国家863项目，且曾主持一山东省自主创新及成果转化专项，发明专利十余项，专业论文十余年哈哈塑料袋科技发牢骚'
         },
         {
-          avatar: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/zhishidian.png',
+          avatar: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/teacher2.png',
           name: 'A老师',
           des: '七月在线AI Lab负责人兼科学家。历任浪潮集团数据科学家，'
         },
         {
-          avatar: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/zhishidian.png',
+          avatar: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/teacher3.png',
           name: 'A老师',
           des: '七月在线AI Lab负责人兼科学家。历任浪潮集团数据科学家，'
         },
         {
-          avatar: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/zhishidian.png',
+          avatar: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/teacher4.png',
           name: 'A老师',
           des: '七月在线AI Lab负责人兼科学家。历任浪潮集团数据科学家，国家电网人工智能行业应用方向团队负责人。参与过一国家863项目，且曾主持一山东省自主创新及成果转化专项，发明专利十余项，专业论文十余年哈哈塑料袋科技发牢骚'
         }

src/components/python/pythomDes/index.js

@@ -7,11 +7,22 @@ import Test from './Test/index.js';
 import Team from './Team/index.js';
 import Experience from './Experience/index.js'
 import Progream from './Progream/index.js'
-
-export default class PythonDes extends Component {
+import {http, getParam, SendMessageToApp, } from '@/utils'
+import { connect } from 'react-redux';
+import { Toast } from "antd-mobile";
+@connect(state => ({
+  user: state.user
+}))
+class PythonDes extends Component {
   constructor(props) {
     super(props);
     this.state = {
+      syllabus: [], // 阶梯学习
+      allSyllabus: [], // 阶梯学习
+      allSyllabusShow: false,
+      practice: [], // 课后实操
+      allPractice: [], // 课后实操
+      allPracticeShow: false,
       defineList: [
         {
           titleUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/trophy.png',
@@ -60,8 +71,106 @@ export default class PythonDes extends Component {
     }
   }
 
+  // 立即报名
+  signUp = () => {
+    // 已登录
+    if(!this.props.user.hasError) {
+      this.toDetail();
+    }else{// 未登录
+      this.toLogin();
+    }
+  }
+
+  // 立即体验、免费试学
+  tryLearn = () => {
+    // 已登录
+    if(!this.props.user.hasError) {
+      this.toLearn();
+    }else{// 未登录
+      this.toLogin();
+    }
+  }
+
+  toLearn = () => {
+    const id = getParam('id');
+    if (!getParam('version')) { // H5
+      Toast.info('H5是要提醒去PC端吗');
+    } else { // APP
+      Toast.info('APP待定');
+      // SendMessageToApp("toCourse", id); // TODO 待定 需要APP确认
+    }
+  }
+
+  toDetail = () => {
+    const id = getParam('id');
+    if (!getParam('version')) { // H5
+      http.get(`${API['base-api']}/m/cart/addtopreorder/[${id}]`).then((res) => {
+        if (res.data.errno === 0) {
+            this.props.history.push(`/order?id=${id}`, {simple: 1})
+        } else {
+            Toast.info(res.data.msg, 2);
+        }
+      })
+    } else { // APP
+      SendMessageToApp("toCourse", id);
+    }
+  }
+
+  toLogin = () => {
+    if (!getParam('version')) { // H5
+      this.props.history.push('/passport');
+    } else { // APP
+      SendMessageToApp("toLogin");
+    }
+  }
+
+  showAll = (key) => {
+    if(key === 1) {
+      this.setState({
+        syllabus: this.state.allSyllabus,
+        allSyllabusShow: true,
+      })
+    }
+    if(key === 2) {
+      this.setState({
+        practice: this.state.allPractice,
+        allPracticeShow: true,
+      })
+    }
+  }
+  hideSome = (key) => {
+    if(key === 1) {
+      this.setState({
+        syllabus: this.state.allSyllabus.slice(0, 2),
+        allSyllabusShow: false,
+      })
+    }
+    if(key === 2) {
+      this.setState({
+        practice: this.state.allPractice.slice(0, 2),
+        allPracticeShow: false,
+      })
+    }
+  }
+
+  componentDidMount() {
+    http.get(`${API['home']}/web/it_detail?course_id=180`).then(res => {
+      const { code, data, msg } = res.data
+      if (code == 200) {
+        this.setState({
+          syllabus: data.syllabus.slice(0, 2),
+          allSyllabus: data.syllabus,
+          practice: data.practice.slice(0, 2),
+          allPractice: data.practice,
+        })
+      } else {
+        Message.warning(msg);
+      }
+    });
+  }
+
   render() {
-    const {defineList, desList, worryList} = this.state;
+    const {defineList, desList, worryList, syllabus, practice, allSyllabusShow, allPracticeShow} = this.state;
     return (
       <div className={'python__des'}>
         <div className={'des__start'}></div>
@@ -86,16 +195,16 @@ export default class PythonDes extends Component {
           </div>
 
           <div className={'btn__group'}>
-            <div className={'try__study'}>免费试学</div>
-            <div className={'sign__now'}>立即报名</div>
+            <div className={'try__study'} onClick={this.tryLearn}>免费试学</div>
+            <div className={'sign__now'} onClick={this.signUp}>立即报名</div>
           </div>
         </div>
         <Description list={desList}></Description>
         <NoWorry list={worryList}></NoWorry>
-        <Study syllabus={this.props.syllabus} allSyllabusShow={this.props.allSyllabusShow} show={this.props.show} hide={this.props.hide}></Study>
-        <Test practice={this.props.practice} allPracticeShow={this.props.allPracticeShow} show={this.props.show} hide={this.props.hide}></Test>
+        <Study syllabus={syllabus} allSyllabusShow={allSyllabusShow} show={this.showAll} hide={this.hideSome}></Study>
+        <Test practice={practice} allPracticeShow={allPracticeShow} show={this.showAll} hide={this.hideSome}></Test>
         <Team />
-        <Experience />
+        <Experience tryLearn={this.tryLearn} />
         <img style={{display: 'block', width: '100%', height: '8px'}} src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/changjian.png" alt=""/>
         <Progream />
       </div>
@@ -115,4 +224,4 @@ function DefineItem(props) {
   )
 }
 
-
+export default PythonDes