Skip to content

M
mr-julyedu
Commit 08a613d2 by xuzhenghua
Options

判断是否是python

parents 3da68356 be3e4884
Showing with 268 additions and 85 deletions
package-lock.json
......@@ -1027,17 +1027,17 @@
}
},
"@babel/runtime": {
"version": "7.3.1",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.3.1.tgz",
"integrity": "sha512-7jGW8ppV0ant637pIqAcFfQDDH1orEPGJb8aXfUozuCU3QqX7rX4DA8iwrbPrR1hcH0FTTHz47yQnk+bl5xHQA==",
"version": "7.7.2",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.7.2.tgz",
"integrity": "sha512-JONRbXbTXc9WQE2mAZd1p0Z3DZ/6vaQIkgYMSTP3KjRCyd7rCZCcfhCyX+YjwcKxcZ82UrxbRD358bpExNgrjw==",
"requires": {
"regenerator-runtime": "^0.12.0"
"regenerator-runtime": "^0.13.2"
},
"dependencies": {
"regenerator-runtime": {
"version": "0.12.1",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
"integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
"version": "0.13.3",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
"integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw=="
}
}
},
......@@ -2852,6 +2852,14 @@
"@babel/plugin-transform-typescript": "^7.1.0"
}
},
"@babel/runtime": {
"version": "7.3.1",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.3.1.tgz",
"integrity": "sha512-7jGW8ppV0ant637pIqAcFfQDDH1orEPGJb8aXfUozuCU3QqX7rX4DA8iwrbPrR1hcH0FTTHz47yQnk+bl5xHQA==",
"requires": {
"regenerator-runtime": "^0.12.0"
}
},
"babel-loader": {
"version": "8.0.5",
"resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.0.5.tgz",
......@@ -2876,6 +2884,11 @@
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
"integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
},
"regenerator-runtime": {
"version": "0.12.1",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
"integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
},
"source-map": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
......
package.json
......@@ -168,6 +168,7 @@
]
},
"devDependencies": {
"@babel/runtime": "^7.7.2",
"babel-plugin-import": "^1.11.0",
"browserslist": "^4.6.6",
"caniuse-lite": "^1.0.30000989",
......
src/components/Index/index.js
......@@ -268,7 +268,6 @@ function CourseList({modules, toDetail}) {
}
return (
<div className='category'>
<Link className="more" to='/python'>python ></Link>
<h2 className="title">{modules.name}</h2>
{
modules.show_more === 1 &&
......
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,75 +16,27 @@ 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) => {
const { data, code } = res.data;
if (code === 200) {
this.setState({
// TODO
// isPay: data.course_info.is_pay
})
}
});
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,
isPay: data.course_info.is_pay
})
} 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>
(isPay === 1 && !getParam('version')) && <PythonStudy />
}
</div>
)
......
src/components/python/poup/index.js 0 → 100644
import React, { Component } from 'react'
import './index.scss'
import {CallApp} from './../../../common'
export default class Poup extends Component {
render() {
return (
<div className={'mask_container'}>
<div className={'content'}>
<p className={'title'}>温馨提示</p>
{
this.props.type === 1 ? (
<>
<p className={'tip'}>当前环境暂不支持该课程模式，您可前往七月在线PC端或者APP体验课程。</p>
<CallApp className='btn btn-18B4ED' text={'前往APP体验课程'}></CallApp>
</>
) : (
<>
<p className={'tip'}>当前环境暂不支持该课程模式，您可前往七月在线PC端或者APP学习课程。</p>
<CallApp className='btn btn-18B4ED' text={'前往APP学习课程'}></CallApp>
</>
)
}
<img onClick={this.props.closePop} className={'close_btn'} src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/bottom_close.png" alt=""/>
</div>
</div>
)
}
}
src/components/python/poup/index.scss 0 → 100644
.mask_container {
position: fixed;
left: 0;
bottom: 0;
right: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 100;
.close_btn {
width: 30px;
height: 30px;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -62px;
}
.content {
width: 300px;
height: 196px;
background: rgba(255, 255, 255, 1);
border-radius: 4px;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 170px;
.title {
font-size: 18px;
line-height: 18px;
color: rgba(0, 153, 255, 1);
margin: 24px auto 0;
text-align: center;
}
.tip {
font-size: 14px;
color: rgba(102, 102, 102, 1);
line-height: 20px;
margin: 20px auto 0;
width: 260px;
}
.btn {
width: 260px;
height: 36px;
line-height: 36px;
text-align: center;
background: rgba(0, 153, 255, 1);
border-radius: 3px;
font-size: 16px;
color: rgba(255, 255, 255, 1);
margin: 36px auto 0;
}
}
}
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,17 +7,22 @@ export default class Team extends Component {
this.state = {
teacherList: [
{
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/teacher2.png',
name: 'A老师',
des: '七月在线AI Lab负责人兼科学家。历任浪潮集团数据科学家，'
},
{
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/teacher4.png',
name: 'A老师',
des: '七月在线AI Lab负责人兼科学家。历任浪潮集团数据科学家，国家电网人工智能行业应用方向团队负责人。参与过一国家863项目，且曾主持一山东省自主创新及成果转化专项，发明专利十余项，专业论文十余年哈哈塑料袋科技发牢骚'
}
......@@ -37,7 +42,7 @@ export default class Team extends Component {
teacherList.map((item,index)=>{
return (
<li key={index} className={'item_li'}>
<div className={'item_image'}></div>
<img className={'item_image'} src={item.avatar} alt=""/>
<div className={'item_info'}>
<span className={'name'}>{item.name}</span>
<p className={'des'}>{item.des}</p>
......
src/components/python/pythomDes/index.js
......@@ -7,11 +7,24 @@ 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 Mask from './../poup/index.js'
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,
toApp: false,
defineList: [
{
titleUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/trophy.png',
......@@ -60,8 +73,114 @@ 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
this.setState({
toApp: true
})
} else { // APP
Toast.info('APP待定');
// SendMessageToApp("toCourse", id); // TODO 待定 需要APP确认
}
}
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);
}
})
} else { // APP
SendMessageToApp('toPay', 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, toApp} = this.state;
return (
<div className={'python__des'}>
<div className={'des__start'}></div>
......@@ -86,18 +205,21 @@ 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 />
{
toApp && (<Mask type={1} closePop={this.closePop} />)
}
</div>
)
}
......@@ -115,4 +237,4 @@ function DefineItem(props) {
)
}
export default PythonDes
src/components/python/pythonStudy/index.js
......@@ -5,11 +5,13 @@ import {http, getParam} from '@/utils';
import './index.scss';
import {Link} from "react-router-dom"
import {connect} from "react-redux";
import Mask from './../poup/index.js'
class PythonStudy extends Component {
constructor(props) {
super(props);
this.state = {
toApp: false,
courseInfo: '',
syllabus: '',
learning: ''
......@@ -71,10 +73,21 @@ class PythonStudy extends Component {
}
}
toLearn = () => {
this.setState({
toApp: true
})
}
closePop = () => {
this.setState({
toApp: false,
})
}
render() {
const {user} = this.props;
const uid = user && user.data && user.data.uid
const {courseInfo, syllabus, learning} = this.state;
const {courseInfo, syllabus, learning, toApp} = this.state;
return (
<div className="python-study">
<HeaderBar title='Python基础语法' arrow={true}/>
......@@ -188,16 +201,20 @@ class PythonStudy extends Component {
</Accordion>
{
learning.schedule == 0 &&
<Link to={`/test/pythonStudy/${courseInfo.course_id}`} className="python-study__button">开始学习</Link>
<span onClick={this.toLearn} className="python-study__button">开始学习</span>
}
{
learning.schedule != 0 && learning.schedule != 100 &&
<Link to={`/test/pythonStudy/${courseInfo.course_id}`} className="python-study__button">继续学习</Link>
<span onClick={this.toLearn} className="python-study__button">继续学习</span>
}
{
learning.schedule == 100 &&
<button className="python-study__button python-study__over">已学完全部课时</button>
}
{
toApp && <Mask closePop={this.closePop} type={2} />
}
</div>
)
}
......
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