登陆

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);
-    this.state = {
-      isPay: '',
+    constructor(props) {
+        super(props)
+        this.state = {
+            isPay: '',
+            userInfoList: [],
+            isAppUpdate: false
+        }
     }
-  }
 
-  componentDidMount() {
-    this.fetchCourseInfo();
-  }
+    componentDidMount() {
+        const _this = this
+        this.fetchCourseInfo()
+        // 获取App登录信息
+        window['loginInfo'] = result => {
+            _this.loginInfo(result)
+        }
+    }
 
-  fetchCourseInfo = () => {
-    const id = getParam('id');
-    http.get(`${API.home}/m/course/detail/${id}`).then((res) => {
-      const { data, code } = res.data;
-      if (code === 200) {
+    // 获取app登录数据
+    loginInfo = (result) => {
         this.setState({
-          isPay: data.course_info.is_pay
+            userInfoList: result
+        }, () => {
+            if (this.state.userInfoList.length) {
+                this.props.startFetchUser()
+                this.appLogin()
+            }
         })
-      }
-    });
-  }
-
-  render() {
-    const { isPay } = this.state;
-    return (
-      <div>
-        {
-          isPay === 0 && <PythonDes history={this.props.history}></PythonDes>
-        }
-        {
-          (isPay === 1 && !getParam('version')) && <PythonStudy />
+
+    }
+
+    // 保存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
+            })
         }
-      </div>
-    )
-  }
+
+        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')
+        http.get(`${API.home}/m/course/detail/${id}`).then((res) => {
+            const {data, code} = res.data
+            if (code === 200) {
+                this.setState({
+                    isPay: data.course_info.is_pay
+                })
+            }
+        })
+    }
+
+    render() {
+        const {isPay, isAppUpdate} = this.state
+        return (
+            <div>
+                {
+                    isPay === 0 && <PythonDes history={this.props.history} isAppUpdate={isAppUpdate}></PythonDes>
+                }
+                {
+                    (isPay === 1 && !getParam('version')) && <PythonStudy isAppUpdate={isAppUpdate}/>
+                }
+            </div>
+        )
+    }
 }
 
 export default Python

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
+    user: state.user
 }))
 class PythonDes extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      syllabus: [], // 阶梯学习
-      allSyllabus: [], // 阶梯学习
-      allSyllabusShow: false,
-      practice: [], // 课后实操
-      allPractice: [], // 课后实操
-      allPracticeShow: false,
-      toApp: false,
-      defineList: [
-        {
-          titleUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/trophy.png',
-          title: '排名第1的编程语言',
-          subTitle: '2018世界编程语言排行榜中，Python排名第1',
-          subWidth: '180px',
-          bottomUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/program_lan.png',
-          desInfo: {
-            width: '240px',
-            height: '170px',
-          }
-        },
-        {
-          titleUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/kaifa.png',
-          title: '开发快速、简单易掌握',
-          subTitle: '严谨的代码编写格式，语法格式简单易理解完成一个相同的任务',
-          subWidth: '260px',
-          bottomUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/kuaisu.png',
-          desInfo: {
-            width: '212px',
-            height: '106px',
-          }
-        },
-        {
-          titleUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/lingyu.png',
-          title: '适用领域广',
-          subTitle: 'Python工程师可从事多领域编程工作，人才年需求增长6倍',
-          subWidth: '230px',
-          bottomUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/jiandan.png',
-          desInfo: {
-            width: '234px',
-            height: '106px',
-          }
+    constructor(props) {
+        super(props)
+        this.state = {
+            syllabus: [], // 阶梯学习
+            allSyllabus: [], // 阶梯学习
+            allSyllabusShow: false,
+            practice: [], // 课后实操
+            allPractice: [], // 课后实操
+            allPracticeShow: false,
+            toApp: false,
+            defineList: [
+                {
+                    titleUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/trophy.png',
+                    title: '排名第1的编程语言',
+                    subTitle: '2018世界编程语言排行榜中，Python排名第1',
+                    subWidth: '180px',
+                    bottomUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/program_lan.png',
+                    desInfo: {
+                        width: '240px',
+                        height: '170px',
+                    }
+                },
+                {
+                    titleUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/kaifa.png',
+                    title: '开发快速、简单易掌握',
+                    subTitle: '严谨的代码编写格式，语法格式简单易理解完成一个相同的任务',
+                    subWidth: '260px',
+                    bottomUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/kuaisu.png',
+                    desInfo: {
+                        width: '212px',
+                        height: '106px',
+                    }
+                },
+                {
+                    titleUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/lingyu.png',
+                    title: '适用领域广',
+                    subTitle: 'Python工程师可从事多领域编程工作，人才年需求增长6倍',
+                    subWidth: '230px',
+                    bottomUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/jiandan.png',
+                    desInfo: {
+                        width: '234px',
+                        height: '106px',
+                    }
+                }
+            ],
+            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天入门人工智能'
+                },
+            ],
+            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: '每节课的知识点都设有代码编写部分，每节课课后都有课后实操。有多次代码编写练习的机会，助你真正学以致用。'
+                },
+            ],
         }
-      ],
-      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天入门人工智能'},
-      ],
-      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: '每节课的知识点都设有代码编写部分，每节课课后都有课后实操。有多次代码编写练习的机会，助你真正学以致用。'},
-      ],
-    }
-  }
-
-  // 立即报名
-  signUp = () => {
-    // 已登录
-    if(!this.props.user.hasError) {
-      this.toDetail();
-    }else{// 未登录
-      this.toLogin();
     }
-  }
-
-  // 立即体验、免费试学
-  tryLearn = () => {
-    // 已登录
-    if(!this.props.user.hasError) {
-      this.toLearn();
-    }else{// 未登录
-      this.toLogin();
+
+    // 立即报名
+    signUp = () => {
+        // 已登录
+        if (!this.props.user.hasError) {
+            this.toDetail()
+        } else {// 未登录
+            this.toLogin()
+        }
     }
-  }
-
-  toLearn = () => {
-    const id = getParam('id');
-    if (!getParam('version')) { // H5
-      this.setState({
-        toApp: true
-      })
-    } else { // APP
-      SendMessageToApp("toLearn", id); // TODO 待定 需要APP确认
+
+    // 立即体验、免费试学
+    tryLearn = () => {
+        // 已登录
+        if (!this.props.user.hasError) {
+            this.toLearn()
+        } else {// 未登录
+            this.toLogin()
+        }
     }
-  }
-
-  closePop = () => {
-    this.setState({
-      toApp: false
-    })
-  }
-
-  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);
+
+    toLearn = () => {
+        if (!getParam('version')) { // H5
+            this.setState({
+                toApp: true
+            })
+        } else { // APP
+            SendMessageToApp("toLearn")
         }
-      })
-    } else { // APP
-      SendMessageToApp('toPay', id);
     }
-  }
 
-  toLogin = () => {
-    if (!getParam('version')) { // H5
-      this.props.history.push('/passport');
-    } else { // APP
-      SendMessageToApp("toLogin");
+    closePop = () => {
+        this.setState({
+            toApp: false
+        })
     }
-  }
-
-  showAll = (key) => {
-    if(key === 1) {
-      this.setState({
-        syllabus: this.state.allSyllabus,
-        allSyllabusShow: true,
-      })
+
+    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('toPay', id)
+        }
     }
-    if(key === 2) {
-      this.setState({
-        practice: this.state.allPractice,
-        allPracticeShow: true,
-      })
+
+    toLogin = () => {
+        if (!getParam('version')) { // H5
+            this.props.history.push('/passport')
+        } else { // APP
+            SendMessageToApp("toLogin")
+        }
     }
-  }
-  hideSome = (key) => {
-    if(key === 1) {
-      this.setState({
-        syllabus: this.state.allSyllabus.slice(0, 2),
-        allSyllabusShow: false,
-      })
+
+    showAll = (key) => {
+        if (key === 1) {
+            this.setState({
+                syllabus: this.state.allSyllabus,
+                allSyllabusShow: true,
+            })
+        }
+        if (key === 2) {
+            this.setState({
+                practice: this.state.allPractice,
+                allPracticeShow: true,
+            })
+        }
     }
-    if(key === 2) {
-      this.setState({
-        practice: this.state.allPractice.slice(0, 2),
-        allPracticeShow: false,
-      })
+    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,
+    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),
+                    allSyllabus: data.syllabus,
+                    practice: data.practice.slice(0, 2),
+                    allPractice: data.practice,
+                })
+            } else {
+                Toast.info(msg)
+            }
         })
-      } else {
-        Message.warning(msg);
-      }
-    });
-  }
-
-  render() {
-    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>
-          <p className={'define__title'}>什 / 么 / 是 / Python</p>
-          {
-            defineList.map((item,index) => {
-              return <DefineItem item={item} key={index}></DefineItem>
-            })
-          }
-        </div>
-        <div className={'course__introduce'}></div>
-        <div className={'bottom__btn_group'}>
-          <div className={'course__price'}>
-            <div className={'money'}>199<span style={{fontSize: '18px'}}>元</span></div>
-            <div className={'discount'}>
-              限时特惠
-              <div className={'triangle'}></div>
-            </div>
-          </div>
+    }
 
-          <div className={'btn__group'}>
-            <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={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} />)
+    componentDidMount() {
+        this.getStatus()
+    }
+
+
+    shouldComponentUpdate(nextProps, nextState, nextContext) {
+        if (this.props.isAppUpdate !== nextProps.isAppUpdate) {
+            this.getStatus()
+            return false
         }
-      </div>
-    )
-  }
+        return true
+    }
+
+    render() {
+        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>
+                    <p className={'define__title'}>什 / 么 / 是 / Python</p>
+                    {
+                        defineList.map((item, index) => {
+                            return <DefineItem item={item} key={index}></DefineItem>
+                        })
+                    }
+                </div>
+                <div className={'course__introduce'}></div>
+                <div className={'bottom__btn_group'}>
+                    <div className={'course__price'}>
+                        <div className={'money'}>199<span style={{fontSize: '18px'}}>元</span></div>
+                        <div className={'discount'}>
+                            限时特惠
+                            <div className={'triangle'}></div>
+                        </div>
+                    </div>
+
+                    <div className={'btn__group'}>
+                        <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={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}/>)
+                }
+            </div>
+        )
+    }
 }
 
 function DefineItem(props) {
-  const {item, item: {desInfo}} = props;
-  return (
-    <div className={'number_one'}>
-      <img className={'trophy'} src={item.titleUrl}></img>
-      <p className={'item__title'}>{item.title}</p>
-      <p className={'item__subtitle'} style={{width: item.subWidth}}>{item.subTitle}</p>
-      <img style={{width: desInfo.width, height: desInfo.height}} src={item.bottomUrl}></img>
-    </div>
-  )
+    const {item, item: {desInfo}} = props
+    return (
+        <div className={'number_one'}>
+            <img className={'trophy'} src={item.titleUrl}></img>
+            <p className={'item__title'}>{item.title}</p>
+            <p className={'item__subtitle'} style={{width: item.subWidth}}>{item.subTitle}</p>
+            <img style={{width: desInfo.width, height: desInfo.height}} src={item.bottomUrl}></img>
+        </div>
+    )
 }
 
 export default PythonDes