登陆

src/components/python/index.js

-import React, { Component } from 'react'
-import {http, getParam} from '@/utils'
+import React, {Component} from 'react'
+import {http, getParam, SendMessageToApp} from '@/utils'
 import PythonDes from './pythomDes'
 import PythonStudy from './pythonStudy'
-import {Toast} from 'antd-mobile'
+import {connect} from "react-redux"
+import {addDays} from "date-fns"
+import cookie from "js-cookie"
+import {setCurrentUser, startFetchUser} from "@/store/userAction"
 
+
+@connect(state => ({
+        user: state.user
+    }),
+    {setCurrentUser, startFetchUser}
+)
 class Python extends Component {
     constructor(props) {
-    super(props);
+        super(props)
         this.state = {
             isPay: '',
+            userInfoList: [],
+            isAppUpdate: false
         }
     }
 
     componentDidMount() {
-    this.fetchCourseInfo();
+        const _this = this
+        this.fetchCourseInfo()
+        // 获取App登录信息
+        window['loginInfo'] = result => {
+            _this.loginInfo(result)
+        }
+    }
+
+    // 获取app登录数据
+    loginInfo = (result) => {
+        this.setState({
+            userInfoList: result
+        }, () => {
+            if (this.state.userInfoList.length) {
+                this.props.startFetchUser()
+                this.appLogin()
+            }
+        })
+
     }
 
+    // 保存cookie
+    appLogin = () => {
+        let expires = addDays(new Date(), 90)
+        this.state.userInfoList.map((item, index) => {
+            cookie.set("token", item.token, {expires, path: '/', domain: '.julyedu.com'})
+            cookie.set("plat", item.plat, {expires, path: '/', domain: '.julyedu.com'})
+            cookie.set("uid", item.uid, {expires, path: '/', domain: '.julyedu.com'})
+            cookie.set("uname", item.uname, {expires, path: '/', domain: '.julyedu.com'})
+            cookie.set("avatar_file", item.avatar_file, {expires, path: '/', domain: '.julyedu.com'})
+        })
+
+        if (cookie.get("token") && cookie.get("uid")) {
+            this.setState({
+                isAppUpdate: true
+            })
+        }
+
+        this.props.setCurrentUser(this.transformUser(this.state.userInfoList))
+    }
+    transformUser = res => {
+        let payload
+
+        res.map((item, index) => {
+            payload = {
+                hasError: false,
+                data: {
+                    username: item.uname,
+                    avatar: item.avatar_file,
+                    token: item.token,
+                    uid: item.uid
+                },
+                isFetching: false
+            }
+        })
+
+        return payload
+    }
+
+
     fetchCourseInfo = () => {
-    const id = getParam('id');
+        const id = getParam('id')
         http.get(`${API.home}/m/course/detail/${id}`).then((res) => {
-      const { data, code } = res.data;
+            const {data, code} = res.data
             if (code === 200) {
                 this.setState({
                     isPay: data.course_info.is_pay
                 })
             }
-    });
+        })
     }
 
     render() {
-    const { isPay } = this.state;
+        const {isPay, isAppUpdate} = this.state
         return (
             <div>
                 {
-          isPay === 0 && <PythonDes history={this.props.history}></PythonDes>
+                    isPay === 0 && <PythonDes history={this.props.history} isAppUpdate={isAppUpdate}></PythonDes>
                 }
                 {
-          (isPay === 1 && !getParam('version')) && <PythonStudy />
+                    (isPay === 1 && !getParam('version')) && <PythonStudy isAppUpdate={isAppUpdate}/>
                 }
             </div>
         )

src/components/python/pythomDes/index.js

-import React, { Component } from 'react'
+import React, {Component} from 'react'
 import './index.scss'
-import Description from './Description/index.js';
-import NoWorry from './NoWorry/index.js';
-import Study from './Study/index.js';
-import Test from './Test/index.js';
-import Team from './Team/index.js';
+import Description from './Description/index.js'
+import NoWorry from './NoWorry/index.js'
+import Study from './Study/index.js'
+import Test from './Test/index.js'
+import Team from './Team/index.js'
 import Experience from './Experience/index.js'
 import Progream from './Progream/index.js'
 import Mask from './../poup/index.js'
-import {http, getParam, SendMessageToApp, } from '@/utils'
-import { connect } from 'react-redux';
-import { Toast } from "antd-mobile";
+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);
+        super(props)
         this.state = {
             syllabus: [], // 阶梯学习
             allSyllabus: [], // 阶梯学习
@@ -61,14 +62,38 @@ class PythonDes extends Component {
                 }
             ],
             desList: [
-        {url: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/xingshi.png', title: '全新课程形式', subTitle: '对话式交互教学，轻松、生动、不无聊'},
-        {url: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/huanjing.png', title: '在线编程环境', subTitle: '无需安装任何编程软件'},
-        {url: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/rumen.png', title: '20天零基础入门', subTitle: '降低学习门槛，20天入门人工智能'},
+                {
+                    url: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/xingshi.png',
+                    title: '全新课程形式',
+                    subTitle: '对话式交互教学，轻松、生动、不无聊'
+                },
+                {
+                    url: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/huanjing.png',
+                    title: '在线编程环境',
+                    subTitle: '无需安装任何编程软件'
+                },
+                {
+                    url: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/rumen.png',
+                    title: '20天零基础入门',
+                    subTitle: '降低学习门槛，20天入门人工智能'
+                },
             ],
             worryList: [
-        {url: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/jiechu.png', title: '初次接触，担心学不会', subTitle: '本课程专门为零基础的你打造，全篇通过最白话沟通交流的方式进行讲解，无论你有无编程经验都可以轻松理解并且掌握。'},
-        {url: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/xuexi.png', title: '想学习，没有坚持下来', subTitle: '以故事性的方式编写学习内容， 把生硬的知识点有趣化。精美的图片+幽默的文字+代码编写让你越学越向学。'},
-        {url: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/zhishidian.png', title: '知识点掌握了，不知如何运用', subTitle: '每节课的知识点都设有代码编写部分，每节课课后都有课后实操。有多次代码编写练习的机会，助你真正学以致用。'},
+                {
+                    url: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/jiechu.png',
+                    title: '初次接触，担心学不会',
+                    subTitle: '本课程专门为零基础的你打造，全篇通过最白话沟通交流的方式进行讲解，无论你有无编程经验都可以轻松理解并且掌握。'
+                },
+                {
+                    url: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/xuexi.png',
+                    title: '想学习，没有坚持下来',
+                    subTitle: '以故事性的方式编写学习内容， 把生硬的知识点有趣化。精美的图片+幽默的文字+代码编写让你越学越向学。'
+                },
+                {
+                    url: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/zhishidian.png',
+                    title: '知识点掌握了，不知如何运用',
+                    subTitle: '每节课的知识点都设有代码编写部分，每节课课后都有课后实操。有多次代码编写练习的机会，助你真正学以致用。'
+                },
             ],
         }
     }
@@ -76,31 +101,30 @@ class PythonDes extends Component {
     // 立即报名
     signUp = () => {
         // 已登录
-    if(!this.props.user.hasError) {
-      this.toDetail();
-    }else{// 未登录
-      this.toLogin();
+        if (!this.props.user.hasError) {
+            this.toDetail()
+        } else {// 未登录
+            this.toLogin()
         }
     }
 
     // 立即体验、免费试学
     tryLearn = () => {
         // 已登录
-    if(!this.props.user.hasError) {
-      this.toLearn();
-    }else{// 未登录
-      this.toLogin();
+        if (!this.props.user.hasError) {
+            this.toLearn()
+        } else {// 未登录
+            this.toLogin()
         }
     }
 
     toLearn = () => {
-    const id = getParam('id');
         if (!getParam('version')) { // H5
             this.setState({
                 toApp: true
             })
         } else { // APP
-      SendMessageToApp("toLearn", id); // TODO 待定 需要APP确认
+            SendMessageToApp("toLearn")
         }
     }
 
@@ -111,36 +135,36 @@ class PythonDes extends Component {
     }
 
     toDetail = () => {
-    const id = getParam('id');
+        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);
+                    Toast.info(res.data.msg, 2)
                 }
             })
         } else { // APP
-      SendMessageToApp('toPay', id);
+            SendMessageToApp('toPay', id)
         }
     }
 
     toLogin = () => {
         if (!getParam('version')) { // H5
-      this.props.history.push('/passport');
+            this.props.history.push('/passport')
         } else { // APP
-      SendMessageToApp("toLogin");
+            SendMessageToApp("toLogin")
         }
     }
 
     showAll = (key) => {
-    if(key === 1) {
+        if (key === 1) {
             this.setState({
                 syllabus: this.state.allSyllabus,
                 allSyllabusShow: true,
             })
         }
-    if(key === 2) {
+        if (key === 2) {
             this.setState({
                 practice: this.state.allPractice,
                 allPracticeShow: true,
@@ -148,13 +172,13 @@ class PythonDes extends Component {
         }
     }
     hideSome = (key) => {
-    if(key === 1) {
+        if (key === 1) {
             this.setState({
                 syllabus: this.state.allSyllabus.slice(0, 2),
                 allSyllabusShow: false,
             })
         }
-    if(key === 2) {
+        if (key === 2) {
             this.setState({
                 practice: this.state.allPractice.slice(0, 2),
                 allPracticeShow: false,
@@ -162,9 +186,9 @@ class PythonDes extends Component {
         }
     }
 
-  componentDidMount() {
-    http.get(`${API['home']}/web/it_detail?course_id=180`).then(res => {
-      const { code, data, msg } = res.data
+    getStatus = () => {
+        http.get(`${API['home']}/web/it_detail?course_id=${getParam('id')}`).then(res => {
+            const {code, data, msg} = res.data
             if (code == 200) {
                 this.setState({
                     syllabus: data.syllabus.slice(0, 2),
@@ -173,22 +197,37 @@ class PythonDes extends Component {
                     allPractice: data.practice,
                 })
             } else {
-        Message.warning(msg);
+                Toast.info(msg)
+            }
+        })
+    }
+
+    componentDidMount() {
+        this.getStatus()
+    }
+
+
+    shouldComponentUpdate(nextProps, nextState, nextContext) {
+        if (this.props.isAppUpdate !== nextProps.isAppUpdate) {
+            this.getStatus()
+            return false
         }
-    });
+        return true
     }
 
     render() {
-    const {defineList, desList, worryList, syllabus, practice, allSyllabusShow, allPracticeShow, toApp} = this.state;
+        const {defineList, desList, worryList, syllabus, practice, allSyllabusShow, allPracticeShow, toApp} = this.state
         return (
             <div className={'python__des'}>
                 <div className={'des__start'}></div>
                 <div className={'python__define'}>
-          <img className={'left__decorate'} src={'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/left__decorate.png'}></img>
-          <img className={'right__decorate'} src={'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/right__decorate.png'}></img>
+                    <img className={'left__decorate'}
+                         src={'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/left__decorate.png'}></img>
+                    <img className={'right__decorate'}
+                         src={'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/right__decorate.png'}></img>
                     <p className={'define__title'}>什 / 么 / 是 / Python</p>
                     {
-            defineList.map((item,index) => {
+                        defineList.map((item, index) => {
                             return <DefineItem item={item} key={index}></DefineItem>
                         })
                     }
@@ -210,14 +249,17 @@ class PythonDes extends Component {
                 </div>
                 <Description list={desList}></Description>
                 <NoWorry list={worryList}></NoWorry>
-        <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 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 />
+                <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 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/>
                 {
-          toApp && (<Mask type={1} closePop={this.closePop} />)
+                    toApp && (<Mask type={1} closePop={this.closePop}/>)
                 }
             </div>
         )
@@ -225,7 +267,7 @@ class PythonDes extends Component {
 }
 
 function DefineItem(props) {
-  const {item, item: {desInfo}} = props;
+    const {item, item: {desInfo}} = props
     return (
         <div className={'number_one'}>
             <img className={'trophy'} src={item.titleUrl}></img>