Skip to content

M
mr-julyedu
Commit 9f89dd3a by zhanghaozhe
Options

小课加分销

parent 1d52297b
Showing with 271 additions and 224 deletions
src/components/detail/shareRank/index.js
...@@ -64,7 +64,6 @@ class ShareRank extends Component { ...@@ -64,7 +64,6 @@ class ShareRank extends Component {
} else { } else {
const courseId = getParam('id') const courseId = getParam('id')
const dist_first = info.dist_first_level_ti const dist_first = info.dist_first_level_ti
const uid = info.uid
const dist_code = this.state.code const dist_code = this.state.code
this.props.history.push(`/shareposter?courseId=${courseId}&dist_first=${dist_first}&uid=${uid}&dist_code=${dist_code}`) this.props.history.push(`/shareposter?courseId=${courseId}&dist_first=${dist_first}&uid=${uid}&dist_code=${dist_code}`)
} }
......
src/components/ml/index.js
...@@ -13,7 +13,7 @@ import {setCurrentUser, startFetchUser} from "@/store/userAction" ...@@ -13,7 +13,7 @@ import {setCurrentUser, startFetchUser} from "@/store/userAction"
}), }),
{setCurrentUser, startFetchUser} {setCurrentUser, startFetchUser}
) )
class Python extends Component { class ML extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
...@@ -149,4 +149,4 @@ class Python extends Component { ...@@ -149,4 +149,4 @@ class Python extends Component {
} }
} }
export default Python export default ML
src/components/ml/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 Study from './Study/index.js' import Study from './Study/index.js'
...@@ -8,255 +8,262 @@ import Progream from './Progream/index.js' ...@@ -8,255 +8,262 @@ import Progream from './Progream/index.js'
import Selection from './Selection' import Selection from './Selection'
import Mask from './../poup/index.js' import Mask from './../poup/index.js'
import InAction from "./InAction" import InAction from "./InAction"
import {http, getParam, SendMessageToApp,} from '@/utils' import ShareRank from "@components/detail/shareRank"
import {connect} from 'react-redux' import { http, getParam, SendMessageToApp, } from '@/utils'
import {Toast} from "antd-mobile" import { connect } from 'react-redux'
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,
allPractice: [], // 课后实操 allPractice: [], // 课后实操
toApp: false, toApp: false,
payMoney: 0, payMoney: 0,
isOnline: true, //课程是否上架 isOnline: true, //课程是否上架
} courseInfo: {}
} }
}
// 立即报名 // 立即报名
signUp = () => { signUp = () => {
// 已登录 // 已登录
if (!this.props.user.hasError) { if (!this.props.user.hasError) {
this.toDetail() this.toDetail()
} else {// 未登录 } else {// 未登录
this.toLogin() this.toLogin()
}
}
// 立即体验、免费试学
tryLearn = () => {
// 已登录
if (!this.props.user.hasError) {
this.toLearn()
} else {// 未登录
this.toLogin()
}
} }
}
toLearn = () => { // 立即体验、免费试学
const {backwardVersion} = this.props; tryLearn = () => {
http.post(`${API['home']}/m/it/user/trialCourse`, {course_id: getParam('id')}).then((res) => { // 已登录
const {code, msg} = res.data if (!this.props.user.hasError) {
if (code == 200) { this.toLearn()
if (!getParam('version')) { // H5 } else {// 未登录
this.setState({ this.toLogin()
toApp: true
})
} else { // APP
if(backwardVersion) {
Toast.info('当前版本不支持该课程模式，请升级到最新版本或前往PC端体验', 2)
} else {
SendMessageToApp("toLearn", getParam('id'))
}
}
} else {
Toast.info(msg, 2)
}
})
}
closePop = () => {
this.setState({
toApp: false
})
} }
}
toDetail = () => { toLearn = () => {
const {backwardVersion} = this.props; const {backwardVersion} = this.props;
const id = getParam('id') http.post(`${API['home']}/m/it/user/trialCourse`, {course_id: getParam('id')}).then((res) => {
const {code, msg} = res.data
if (code == 200) {
if (!getParam('version')) { // H5 if (!getParam('version')) { // H5
http.get(`${API['base-api']}/m/cart/addtopreorder/[${id}]`).then((res) => { this.setState({
if (res.data.errno === 0) { toApp: true
this.props.history.push(`/order?id=${id}`, {simple: 1}) })
} else {
Toast.info(res.data.msg, 2)
}
})
} else { // APP } else { // APP
if(backwardVersion) { if (backwardVersion) {
Toast.info('当前版本不支持该课程模式，请升级到最新版本或前往PC端购买', 2); Toast.info('当前版本不支持该课程模式，请升级到最新版本或前往PC端体验', 2)
let onlyoneUse = setTimeout(() => { } else {
clearTimeout(onlyoneUse); SendMessageToApp("toLearn", getParam('id'))
onlyoneUse = null; }
SendMessageToApp('toPay', id)
}, 2000);
} else {
SendMessageToApp('toPay', id)
}
} }
} } else {
Toast.info(msg, 2)
}
})
}
toLogin = () => { closePop = () => {
if (!getParam('version')) { // H5 this.setState({
this.props.history.push('/passport') toApp: false
} else { // APP })
SendMessageToApp("toLogin") }
toDetail = () => {
const {backwardVersion} = this.props;
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
if (backwardVersion) {
Toast.info('当前版本不支持该课程模式，请升级到最新版本或前往PC端购买', 2);
let onlyoneUse = setTimeout(() => {
clearTimeout(onlyoneUse);
onlyoneUse = null;
SendMessageToApp('toPay', id)
}, 2000);
} else {
SendMessageToApp('toPay', id)
}
} }
}
showAll = (key) => { toLogin = () => {
if (key === 1) { if (!getParam('version')) { // H5
this.setState({ this.props.history.push('/passport')
syllabus: this.state.allSyllabus, } else { // APP
allSyllabusShow: true, SendMessageToApp("toLogin")
})
}
if (key === 2) {
this.setState({
practice: this.state.allPractice,
allPracticeShow: true,
})
}
} }
hideSome = (key) => { }
if (key === 1) {
this.setState({ showAll = (key) => {
syllabus: this.state.allSyllabus.slice(0, 2), if (key === 1) {
allSyllabusShow: false, this.setState({
}) syllabus: this.state.allSyllabus,
} allSyllabusShow: true,
if (key === 2) { })
this.setState({ }
practice: this.state.allPractice.slice(0, 2), if (key === 2) {
allPracticeShow: false, 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,
})
}
}
getStatus = () => { getStatus = () => {
http.get(`${API['home']}/web/it_detail?course_id=${getParam('id')}`).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,
allPractice: data.practice, allPractice: data.practice,
payMoney: data.course_info.price1, payMoney: data.course_info.price1,
}) courseInfo: data.course_info
} else {
Toast.info(msg)
}
}) })
} else {
Toast.info(msg)
}
})
}
componentDidMount() {
this.getStatus()
const {backwardVersion, isPay} = this.props;
if (backwardVersion && isPay === 1) {
Toast.info('当前版本不支持该课程模式，请升级到最新版本或前往PC端学习', 2);
} }
}
componentDidMount() {
this.getStatus()
const {backwardVersion, isPay} = this.props; shouldComponentUpdate(nextProps, nextState, nextContext) {
if(backwardVersion && isPay === 1) { if (this.props.isAppUpdate !== nextProps.isAppUpdate) {
Toast.info('当前版本不支持该课程模式，请升级到最新版本或前往PC端学习', 2); this.getStatus()
} return false
} }
return true
}
render() {
const {
syllabus,
allSyllabusShow,
toApp,
payMoney,
isOnline,
courseInfo
} = this.state
return (
<div className={'python__des'}>
<div className={'des__start'}></div>
{
!!courseInfo.is_dist && <ShareRank courseInfo={courseInfo}/>
}
<div className={'course__introduce'}></div>
{
isOnline
? (
<div className={'bottom__btn_group'}>
<div className={'course__price'}>
<div className={'money'}>{payMoney}<span style={{fontSize: '18px'}}>元</span></div>
<div className={'discount'}>
限时特惠
<div className={'triangle'}></div>
</div>
</div>
shouldComponentUpdate(nextProps, nextState, nextContext) { <div className={'btn__group'}>
if (this.props.isAppUpdate !== nextProps.isAppUpdate) { <div className={'try__study'} onClick={this.tryLearn}>免费试学</div>
this.getStatus() <div className={'sign__now'} onClick={this.signUp}>立即报名</div>
return false </div>
</div>
)
: (
<div className="bottom__btn_group">
<p className="online__label">Python人工智能</p>
<button className="online__button">即将上架 敬请期待</button>
</div>
)
} }
return true
}
render() { {/* 课程介绍 */}
const { <Description/>
syllabus,
allSyllabusShow,
toApp,
payMoney,
isOnline
} = this.state
return (
<div className={'python__des'}>
<div className={'des__start'}></div>
<div className={'course__introduce'}></div>
{
isOnline
? (
<div className={'bottom__btn_group'}>
<div className={'course__price'}>
<div className={'money'}>{payMoney}<span style={{fontSize: '18px'}}>元</span></div>
<div className={'discount'}>
限时特惠
<div className={'triangle'}></div>
</div>
</div>
<div className={'btn__group'}> <Study syllabus={syllabus} allSyllabusShow={allSyllabusShow} show={this.showAll}
<div className={'try__study'} onClick={this.tryLearn}>免费试学</div> hide={this.hideSome}></Study>
<div className={'sign__now'} onClick={this.signUp}>立即报名</div>
</div>
</div>
)
: (
<div className="bottom__btn_group">
<p className="online__label">Python人工智能</p>
<button className="online__button">即将上架 敬请期待</button>
</div>
)
}
{/* 课程介绍 */}
<Description/>
<Study syllabus={syllabus} allSyllabusShow={allSyllabusShow} show={this.showAll}
hide={this.hideSome}></Study>
{/*精选习题*/} {/*精选习题*/}
<Selection/> <Selection/>
{/*项目实战*/} {/*项目实战*/}
<InAction/> <InAction/>
<Team/> <Team/>
{/* 试学体验 */} {/* 试学体验 */}
<Experience tryLearn={this.tryLearn} isOnline={isOnline} /> <Experience tryLearn={this.tryLearn} isOnline={isOnline}/>
<img <img
style={{ style={{
display: 'block', display: 'block',
width: '100%', width: '100%',
height: '8px' height: '8px'
}} }}
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/mlCourse/m/di.png" src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/mlCourse/m/di.png"
alt="" alt=""
/> />
{/* 常见问题 */} {/* 常见问题 */}
<Progream /> <Progream/>
{ {
toApp && (<Mask type={1} closePop={this.closePop}/>) toApp && (<Mask type={1} closePop={this.closePop}/>)
} }
</div> </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
src/components/ml/pythomDes/index.scss
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
height: 100vh; height: 100vh;
padding-bottom: 60px; padding-bottom: 60px;
overflow: auto; overflow: auto;
background: #fff;
.des__start { .des__start {
position: relative; position: relative;
...@@ -11,7 +12,6 @@ ...@@ -11,7 +12,6 @@
background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/mlCourse/m/banner.png") background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/mlCourse/m/banner.png")
center center no-repeat; center center no-repeat;
background-size: contain; background-size: contain;
z-index: 100;
} }
.python__define { .python__define {
......
src/components/ml/pythonStudy/index.js
...@@ -5,6 +5,7 @@ import { http, getParam } from '@/utils'; ...@@ -5,6 +5,7 @@ import { http, getParam } from '@/utils';
import './index.scss'; import './index.scss';
import { connect } from "react-redux"; import { connect } from "react-redux";
import Mask from './../poup/index.js' import Mask from './../poup/index.js'
import ShareRank from "@components/detail/shareRank"
class PythonStudy extends Component { class PythonStudy extends Component {
constructor(props) { constructor(props) {
...@@ -88,7 +89,7 @@ class PythonStudy extends Component { ...@@ -88,7 +89,7 @@ class PythonStudy extends Component {
<HeaderBar title='Python基础语法' arrow={true}/> <HeaderBar title='Python基础语法' arrow={true}/>
<div className="python-study__header"> <div className="python-study__header">
<div className="python-study__course"> <div className="python-study__course">
<h2 className="python-study__course-name">Python人工智能</h2> <h2 className="python-study__course-name">机器学习小课 第一期</h2>
<p className="python-study__course-contact"> <p className="python-study__course-contact">
<span>{courseInfo.contact_type == 1 ? '上课请加QQ学习群' : '添加助教微信入群'}：{courseInfo.course_qq}</span> <span>{courseInfo.contact_type == 1 ? '上课请加QQ学习群' : '添加助教微信入群'}：{courseInfo.course_qq}</span>
<span>并备注您的学号：{uid}</span> <span>并备注您的学号：{uid}</span>
...@@ -97,7 +98,12 @@ class PythonStudy extends Component { ...@@ -97,7 +98,12 @@ class PythonStudy extends Component {
{ {
learning.schedule > 0 && learning.schedule > 0 &&
<div className="python-study__progress"> <div className="python-study__progress">
<h2 className="python-study__progress-title">学习进度</h2> <h2 className="python-study__progress-title">
学习进度
{
!!learning.day && <span>（已连续学习<span>{learning.day}</span>天）</span>
}
</h2>
<div className="python-study__progress-bar"> <div className="python-study__progress-bar">
<i style={{width: learning.schedule + '%'}}/> <i style={{width: learning.schedule + '%'}}/>
<span className="python-study__progress-tip" <span className="python-study__progress-tip"
...@@ -107,6 +113,11 @@ class PythonStudy extends Component { ...@@ -107,6 +113,11 @@ class PythonStudy extends Component {
} }
</div> </div>
{
!!courseInfo.is_dist && <div className={'dist-wrapper'}>
<ShareRank courseInfo={courseInfo}/>
</div>
}
<Accordion <Accordion
defaultActiveKey="0" defaultActiveKey="0"
className="python-study__stage" className="python-study__stage"
...@@ -160,7 +171,7 @@ class PythonStudy extends Component { ...@@ -160,7 +171,7 @@ class PythonStudy extends Component {
}} }}
> >
<img className="python-study__subject-icon" <img className="python-study__subject-icon"
src={lessonsItem.project.icon} alt=""/> src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/mlCourse/m/project-icon.png" alt=""/>
{ {
lessonsItem.project.is_unlock == 1 && lessonsItem.project.complete == 1 && lessonsItem.project.is_unlock == 1 && lessonsItem.project.complete == 1 &&
<i className="python-study__subject-status" <i className="python-study__subject-status"
......
src/components/ml/pythonStudy/index.scss
...@@ -46,6 +46,11 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am- ...@@ -46,6 +46,11 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am-
height: 100%; height: 100%;
background-color: #F4F5F6; background-color: #F4F5F6;
padding-bottom: 15px; padding-bottom: 15px;
.dist-wrapper{
background: #fff;
margin: 20px 10px 30px;
}
} }
.python-study__header { .python-study__header {
...@@ -62,7 +67,7 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am- ...@@ -62,7 +67,7 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am-
position: relative; position: relative;
height: 55px; height: 55px;
padding: 0 12px; padding: 0 12px;
background-color: #1A9BFC; background-color: #4B41FF;
&::after { &::after {
content: ''; content: '';
...@@ -115,14 +120,21 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am- ...@@ -115,14 +120,21 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am-
.python-study__progress-title { .python-study__progress-title {
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: rgba(51, 51, 51, .6); color: #333333;
line-height: 39px; line-height: 39px;
&>span{
color: #999;
span{
color: #09f;
}
}
} }
.python-study__progress-bar { .python-study__progress-bar {
position: relative; position: relative;
height: 3px; height: 3px;
margin: 18px 0 15px; margin: 18px 0 15px;
width: 98%;
border-radius: 2px; border-radius: 2px;
background-color: rgba(207, 219, 229, .6); background-color: rgba(207, 219, 229, .6);
......
src/components/python/pythomDes/index.js
...@@ -11,6 +11,7 @@ import Mask from './../poup/index.js' ...@@ -11,6 +11,7 @@ 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"
import ShareRank from "@components/detail/shareRank"
@connect(state => ({ @connect(state => ({
user: state.user user: state.user
...@@ -97,6 +98,7 @@ class PythonDes extends Component { ...@@ -97,6 +98,7 @@ class PythonDes extends Component {
], ],
payMoney: 0, payMoney: 0,
isOnline: true, //课程是否上架 isOnline: true, //课程是否上架
courseInfo: {},
} }
} }
...@@ -220,6 +222,7 @@ class PythonDes extends Component { ...@@ -220,6 +222,7 @@ class PythonDes extends Component {
practice: data.practice.slice(0, 2), practice: data.practice.slice(0, 2),
allPractice: data.practice, allPractice: data.practice,
payMoney: data.course_info.price1, payMoney: data.course_info.price1,
courseInfo: data.course_info
}) })
} else { } else {
Toast.info(msg) Toast.info(msg)
...@@ -256,11 +259,16 @@ class PythonDes extends Component { ...@@ -256,11 +259,16 @@ class PythonDes extends Component {
allPracticeShow, allPracticeShow,
toApp, toApp,
payMoney, payMoney,
isOnline isOnline,
courseInfo
} = this.state } = this.state
console.log(courseInfo)
return ( return (
<div className={'python__des'}> <div className={'python__des'}>
<div className={'des__start'}></div> <div className={'des__start'}></div>
{
!!courseInfo.is_dist && <ShareRank courseInfo={courseInfo}/>
}
<div className={'python__define'}> <div className={'python__define'}>
<img className={'left__decorate'} <img className={'left__decorate'}
src={'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/left__decorate.png'}></img> src={'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/left__decorate.png'}></img>
......
src/components/python/pythonStudy/index.js
...@@ -6,6 +6,7 @@ import './index.scss'; ...@@ -6,6 +6,7 @@ import './index.scss';
import {Link} from "react-router-dom" import {Link} from "react-router-dom"
import {connect} from "react-redux"; import {connect} from "react-redux";
import Mask from './../poup/index.js' import Mask from './../poup/index.js'
import ShareRank from "@components/detail/shareRank"
class PythonStudy extends Component { class PythonStudy extends Component {
constructor(props) { constructor(props) {
...@@ -96,7 +97,7 @@ class PythonStudy extends Component { ...@@ -96,7 +97,7 @@ class PythonStudy extends Component {
</p> </p>
</div> </div>
{ {
learning.schedule == 0 && learning.schedule > 0 &&
<div className="python-study__progress"> <div className="python-study__progress">
<h2 className="python-study__progress-title">学习进度</h2> <h2 className="python-study__progress-title">学习进度</h2>
<div className="python-study__progress-bar"> <div className="python-study__progress-bar">
...@@ -108,6 +109,11 @@ class PythonStudy extends Component { ...@@ -108,6 +109,11 @@ class PythonStudy extends Component {
} }
</div> </div>
{
!!courseInfo.is_dist && <div className={'dist-wrapper'}>
<ShareRank courseInfo={courseInfo}/>
</div>
}
<Accordion <Accordion
defaultActiveKey="0" defaultActiveKey="0"
className="python-study__stage" className="python-study__stage"
......
src/components/python/pythonStudy/index.scss
...@@ -46,6 +46,10 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am- ...@@ -46,6 +46,10 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am-
height: 100%; height: 100%;
background-color: #F4F5F6; background-color: #F4F5F6;
padding-bottom: 15px; padding-bottom: 15px;
.dist-wrapper{
background: #fff;
margin: 20px 10px 30px;
}
} }
.python-study__header { .python-study__header {
......
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