Skip to content

M
mr-julyedu
Commit 6f816124 by xuzhenghua
Options

登陆

parent 968a968f
Showing with 353 additions and 243 deletions
src/components/python/index.js
import React, { Component } from 'react' import React, {Component} from 'react'
import {http, getParam} from '@/utils' import {http, getParam, SendMessageToApp} from '@/utils'
import PythonDes from './pythomDes' import PythonDes from './pythomDes'
import PythonStudy from './pythonStudy' 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 { class Python extends Component {
constructor(props) { constructor(props) {
super(props); super(props)
this.state = { this.state = {
isPay: '', isPay: '',
userInfoList: [],
isAppUpdate: false
}
} }
}
componentDidMount() { componentDidMount() {
this.fetchCourseInfo(); const _this = this
} this.fetchCourseInfo()
// 获取App登录信息
window['loginInfo'] = result => {
_this.loginInfo(result)
}
}
fetchCourseInfo = () => { // 获取app登录数据
const id = getParam('id'); loginInfo = (result) => {
http.get(`${API.home}/m/course/detail/${id}`).then((res) => {
const { data, code } = res.data;
if (code === 200) {
this.setState({ this.setState({
isPay: data.course_info.is_pay userInfoList: result
}, () => {
if (this.state.userInfoList.length) {
this.props.startFetchUser()
this.appLogin()
}
}) })
}
}); }
}
// 保存cookie
render() { appLogin = () => {
const { isPay } = this.state; let expires = addDays(new Date(), 90)
return ( this.state.userInfoList.map((item, index) => {
<div> cookie.set("token", item.token, {expires, path: '/', domain: '.julyedu.com'})
{ cookie.set("plat", item.plat, {expires, path: '/', domain: '.julyedu.com'})
isPay === 0 && <PythonDes history={this.props.history}></PythonDes> 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'})
(isPay === 1 && !getParam('version')) && <PythonStudy /> })
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 export default Python
src/components/python/pythomDes/index.js
import React, { Component } from 'react' import React, {Component} from 'react'
import './index.scss' import './index.scss'
import Description from './Description/index.js'; import Description from './Description/index.js'
import NoWorry from './NoWorry/index.js'; import NoWorry from './NoWorry/index.js'
import Study from './Study/index.js'; import Study from './Study/index.js'
import Test from './Test/index.js'; import Test from './Test/index.js'
import Team from './Team/index.js'; import Team from './Team/index.js'
import Experience from './Experience/index.js' import Experience from './Experience/index.js'
import Progream from './Progream/index.js' import Progream from './Progream/index.js'
import Mask from './../poup/index.js' import Mask from './../poup/index.js'
import {http, getParam, SendMessageToApp, } from '@/utils' import {http, getParam, SendMessageToApp,} from '@/utils'
import { connect } from 'react-redux'; import {connect} from 'react-redux'
import { Toast } from "antd-mobile"; import {Toast} from "antd-mobile"
@connect(state => ({ @connect(state => ({
user: state.user user: state.user
})) }))
class PythonDes extends Component { class PythonDes extends Component {
constructor(props) { constructor(props) {
super(props); super(props)
this.state = { this.state = {
syllabus: [], // 阶梯学习 syllabus: [], // 阶梯学习
allSyllabus: [], // 阶梯学习 allSyllabus: [], // 阶梯学习
allSyllabusShow: false, allSyllabusShow: false,
practice: [], // 课后实操 practice: [], // 课后实操
allPractice: [], // 课后实操 allPractice: [], // 课后实操
allPracticeShow: false, allPracticeShow: false,
toApp: false, toApp: false,
defineList: [ defineList: [
{ {
titleUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/trophy.png', titleUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/trophy.png',
title: '排名第1的编程语言', title: '排名第1的编程语言',
subTitle: '2018世界编程语言排行榜中，Python排名第1', subTitle: '2018世界编程语言排行榜中，Python排名第1',
subWidth: '180px', subWidth: '180px',
bottomUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/program_lan.png', bottomUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/program_lan.png',
desInfo: { desInfo: {
width: '240px', width: '240px',
height: '170px', height: '170px',
} }
}, },
{ {
titleUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/kaifa.png', titleUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/kaifa.png',
title: '开发快速、简单易掌握', title: '开发快速、简单易掌握',
subTitle: '严谨的代码编写格式，语法格式简单易理解完成一个相同的任务', subTitle: '严谨的代码编写格式，语法格式简单易理解完成一个相同的任务',
subWidth: '260px', subWidth: '260px',
bottomUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/kuaisu.png', bottomUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/kuaisu.png',
desInfo: { desInfo: {
width: '212px', width: '212px',
height: '106px', height: '106px',
} }
}, },
{ {
titleUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/lingyu.png', titleUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/lingyu.png',
title: '适用领域广', title: '适用领域广',
subTitle: 'Python工程师可从事多领域编程工作，人才年需求增长6倍', subTitle: 'Python工程师可从事多领域编程工作，人才年需求增长6倍',
subWidth: '230px', subWidth: '230px',
bottomUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/jiandan.png', bottomUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/jiandan.png',
desInfo: { desInfo: {
width: '234px', width: '234px',
height: '106px', 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();
} }
}
// 立即报名
// 立即体验、免费试学 signUp = () => {
tryLearn = () => { // 已登录
// 已登录 if (!this.props.user.hasError) {
if(!this.props.user.hasError) { this.toDetail()
this.toLearn(); } else {// 未登录
}else{// 未登录 this.toLogin()
this.toLogin(); }
} }
}
// 立即体验、免费试学
toLearn = () => { tryLearn = () => {
const id = getParam('id'); // 已登录
if (!getParam('version')) { // H5 if (!this.props.user.hasError) {
this.setState({ this.toLearn()
toApp: true } else {// 未登录
}) this.toLogin()
} else { // APP }
SendMessageToApp("toLearn", id); // TODO 待定 需要APP确认
} }
}
toLearn = () => {
closePop = () => { if (!getParam('version')) { // H5
this.setState({ this.setState({
toApp: false toApp: true
}) })
} } else { // APP
SendMessageToApp("toLearn")
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);
} }
}
toLogin = () => { closePop = () => {
if (!getParam('version')) { // H5 this.setState({
this.props.history.push('/passport'); toApp: false
} else { // APP })
SendMessageToApp("toLogin");
} }
}
toDetail = () => {
showAll = (key) => { const id = getParam('id')
if(key === 1) { if (!getParam('version')) { // H5
this.setState({ http.get(`${API['base-api']}/m/cart/addtopreorder/[${id}]`).then((res) => {
syllabus: this.state.allSyllabus, if (res.data.errno === 0) {
allSyllabusShow: true, 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({ toLogin = () => {
practice: this.state.allPractice, if (!getParam('version')) { // H5
allPracticeShow: true, this.props.history.push('/passport')
}) } else { // APP
SendMessageToApp("toLogin")
}
} }
}
hideSome = (key) => { showAll = (key) => {
if(key === 1) { if (key === 1) {
this.setState({ this.setState({
syllabus: this.state.allSyllabus.slice(0, 2), syllabus: this.state.allSyllabus,
allSyllabusShow: false, allSyllabusShow: true,
}) })
}
if (key === 2) {
this.setState({
practice: this.state.allPractice,
allPracticeShow: true,
})
}
} }
if(key === 2) { hideSome = (key) => {
this.setState({ if (key === 1) {
practice: this.state.allPractice.slice(0, 2), this.setState({
allPracticeShow: false, syllabus: this.state.allSyllabus.slice(0, 2),
}) allSyllabusShow: false,
})
}
if (key === 2) {
this.setState({
practice: this.state.allPractice.slice(0, 2),
allPracticeShow: false,
})
}
} }
}
componentDidMount() { getStatus = () => {
http.get(`${API['home']}/web/it_detail?course_id=180`).then(res => { http.get(`${API['home']}/web/it_detail?course_id=${getParam('id')}`).then(res => {
const { code, data, msg } = res.data const {code, data, msg} = res.data
if (code == 200) { if (code == 200) {
this.setState({ this.setState({
syllabus: data.syllabus.slice(0, 2), syllabus: data.syllabus.slice(0, 2),
allSyllabus: data.syllabus, allSyllabus: data.syllabus,
practice: data.practice.slice(0, 2), practice: data.practice.slice(0, 2),
allPractice: data.practice, 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'}> componentDidMount() {
<div className={'try__study'} onClick={this.tryLearn}>免费试学</div> this.getStatus()
<div className={'sign__now'} onClick={this.signUp}>立即报名</div> }
</div>
</div>
<Description list={desList}></Description> shouldComponentUpdate(nextProps, nextState, nextContext) {
<NoWorry list={worryList}></NoWorry> if (this.props.isAppUpdate !== nextProps.isAppUpdate) {
<Study syllabus={syllabus} allSyllabusShow={allSyllabusShow} show={this.showAll} hide={this.hideSome}></Study> this.getStatus()
<Test practice={practice} allPracticeShow={allPracticeShow} show={this.showAll} hide={this.hideSome}></Test> return false
<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> 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) { function DefineItem(props) {
const {item, item: {desInfo}} = props; const {item, item: {desInfo}} = props
return ( return (
<div className={'number_one'}> <div className={'number_one'}>
<img className={'trophy'} src={item.titleUrl}></img> <img className={'trophy'} src={item.titleUrl}></img>
<p className={'item__title'}>{item.title}</p> <p className={'item__title'}>{item.title}</p>
<p className={'item__subtitle'} style={{width: item.subWidth}}>{item.subTitle}</p> <p className={'item__subtitle'} style={{width: item.subWidth}}>{item.subTitle}</p>
<img style={{width: desInfo.width, height: desInfo.height}} src={item.bottomUrl}></img> <img style={{width: desInfo.width, height: desInfo.height}} src={item.bottomUrl}></img>
</div> </div>
) )
} }
export default PythonDes export default PythonDes
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment