Skip to content

M
mr-julyedu
Commit 3fa73f42 by wangshuo
Options

课后实操

parent 784408c7
Showing with 473 additions and 31 deletions
src/components/python/index.js
import React, { Component } from 'react'
import { connect } from 'react-redux';
import {http, getParam} from '@/utils'
import { http, getParam } from '@/utils'
import PythonDes from './pythomDes'
import PythonClass from './pythonClass'
import PythonStudy from './pythonStudy'
@connect(state => ({
user: state.user
......@@ -12,6 +12,12 @@ class Python extends Component {
super(props);
this.state = {
isPay: 0,
syllabus: [], // 阶梯学习
allSyllabus: [], // 阶梯学习
allSyllabusShow: false,
practice: [], // 课后实操
allPractice: [], // 课后实操
allPracticeShow: false,
}
}
......@@ -19,30 +25,75 @@ 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
})
}
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,
})
} else {
Message.warning(msg);
}
});
}
render() {
const {isPay} = this.state;
const {user: {hasError}} = this.props;
const { isPay, syllabus, allSyllabusShow, practice, allPracticeShow } = this.state;
const { user: { hasError } } = this.props;
return (
<div>
{
isPay === 0 && <PythonDes ></PythonDes>
isPay === 0 && <PythonDes syllabus={syllabus} practice={practice} allSyllabusShow={allSyllabusShow} allPracticeShow={allPracticeShow} show={this.showAll} hide={this.hideSome}></PythonDes>
}
{
isPay === 1 && <PythonClass></PythonClass>
isPay === 1 && <PythonStudy></PythonStudy>
}
</div>
)
......
src/components/python/pythomDes/Study/index.js 0 → 100644
import React, { Component } from 'react'
import './index.scss'
export default class Study extends Component {
render() {
console.log(this.props);
return (
<div className={'study__container'}>
<p className={'title'}>阶 / 梯 / 学 / 习</p>
<p className={'sub__title'}>20节课堂教学，带你掌握Python技术入门知识</p>
<div className={'step__container'}>
<div className={'item__container'}>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/wanzheng.png" alt=""/>
<p>完整的Python基础知识体系</p>
<div className={'item__line'}></div>
</div>
<div className={'item__container'}>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/siwei.png" alt=""/>
<p>灵活的编程思维和实操技巧</p>
<div className={'item__line'}></div>
</div>
<div className={'item__container'}>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/shicao.png" alt=""/>
<p>丰富有趣的实操训练</p>
</div>
</div>
<div className={'table__container'}>
<div className={'table__head'}>
<div className={'head_title order_number'}>序号</div>
<div className={'head_title chapter'}>章节</div>
<div className={'head_title points'}>知识点</div>
</div>
<div className={'table__body'}>
{
this.props.syllabus.map((item, index)=>{
return (
<div className={'item__container'} key={index}>
<div className={'item__title'}>{item.name}</div>
{
item.lessons.map((item, index)=>{
return (
<div className={'item__content'} key={index}>
<div className={'content order_number number_center'}>{item.number}</div>
<div className={'content chapter'}>{item.number}</div>
<div className={'content points'}>{item.info.name}</div>
</div>
)
})
}
</div>
)
})
}
</div>
<div className={'table__bottom'}>
{
this.props.allSyllabusShow ? (
<div onClick={() => this.props.hide(1)}>
<p>收起</p>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/shouqi.png" alt=""/>
</div>
) : (
<div onClick={() => this.props.show(1)}>
<p>展开更多</p>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/zhankai.png" alt=""/>
</div>
)
}
</div>
</div>
</div>
)
}
}
src/components/python/pythomDes/Study/index.scss 0 → 100644
.study__container {
background: #0096ff;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding: 32px 0 30px 0;
.title {
font-size: 20px;
font-weight: 600;
color: rgba(255, 255, 255, 1);
line-height: 20px;
}
.sub__title {
font-size: 12px;
line-height: 12px;
font-weight: 300;
color: rgba(255, 255, 255, 1);
margin: 12px 0 22px 0;
}
.step__container {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
position: relative;
.item__container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-left: 28px;
width: 80px;
position: relative;
&:first-child {
margin-left: 0;
}
img {
width: 34px;
height: 34px;
margin-bottom: 10px;
}
p {
text-align: center;
font-size: 12px;
line-height: 12px;
font-weight: 400;
color: rgba(255, 255, 255, 1);
line-height: 16px;
}
.item__line {
width: 34px;
height: 1px;
background: rgba(255, 255, 255, 1);
opacity: 0.4;
border-radius: 0px;
position: absolute;
top: 18px;
right: -34px;
}
}
}
.table__container {
width: 358px;
color: #fff;
background: #005ac6;
margin-top: 22px;
.order_number {
width: 50px;
}
.chapter {
width: 158px;
border-left: 1px solid #0099ff;
border-right: 1px solid #0099ff;
}
.points {
width: 150px;
}
.table__head {
width: 100%;
height: 32px;
background: #ffd75d;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 4px 4px 0 0;
.head_title {
height: 32px;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
font-weight: 600;
color: rgba(0, 93, 195, 1);
}
}
.table__body {
width: 100%;
.item__container {
.item__title {
height: 36px;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
font-weight: 500;
color: rgba(255, 214, 103, 1);
}
}
.item__content {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid #0099FF;
&:last-child {
border-bottom: 1px solid #0099FF;
}
.content {
height: 36px;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
align-items: center;
padding-left: 6px;
padding-right: 6px;
}
.number_center {
display: flex;
justify-content: center;
padding-left: 0;
}
}
}
.table__bottom {
height: 36px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 12px;
font-weight: 400;
div {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
img {
width: 9px;
height: 9px;
margin-left: 6px;
}
}
}
}
src/components/python/pythomDes/Test/index.js 0 → 100644
import React, { Component } from 'react'
import './index.scss'
export default class Test extends Component {
render() {
console.log(this.props);
return (
<div className={'test_container'}>
<p className={'title'}>课 / 后 / 实 / 操</p>
<p className={'sub_title'}>涵盖完整知识体系，让你掌握实用高效的编程技巧</p>
<div className={'table_container'}>
<div className={'table_head'}>
<span>序号</span>
<span>实操项目</span>
</div>
<div className={'table_body'}>
{
this.props.practice.map((item, index)=>{
return <div key={index}>
<div className='stage'>{item.name}</div>
{
item.questions.map((question, index)=>{
return <div key={index} className={'line'}>
<span>{index}</span>
<div className={'test_name'}>
<img src={question.icon} alt=""/>
<p>{question.name}</p>
</div>
</div>
})
}
</div>
})
}
</div>
<div className={'table_bottom'}>
{
this.props.allPracticeShow ? (
<div onClick={()=>this.props.hide(2)}>
<p>收起</p>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/shouqi.png" alt=""/>
</div>
) : (
<div onClick={()=>this.props.show(2)}>
<p>展开更多</p>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/zhankai.png" alt=""/>
</div>
)
}
</div>
</div>
</div>
)
}
}
src/components/python/pythomDes/Test/index.scss 0 → 100644
.test_container {
background: #fff;
padding-top: 30px;
.title {
font-size: 22px;
line-height: 22px;
font-weight: 600;
color: rgba(0, 153, 255, 1);
text-align: center;
text-align-last: center;
}
.sub_title {
font-size: 12px;
line-height: 12px;
font-weight: 300;
color: rgba(0, 153, 255, 1);
margin: 12px auto 24px;
text-align: center;
text-align-last: center;
}
.table_container {
width: 358px;
margin: 0 auto;
.table_head {
background: #ffd667;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 4px 4px 0 0;
span {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 32px;
&:last-child {
width: 308px;
border-left: 1px solid #0099ff;
}
}
}
.table_body {
background: #34AFFF;
.stage {
height: 38px;
font-size: 14px;
line-height: 14px;
font-weight: 500;
color: rgba(255, 255, 255, 1);
display: flex;
justify-content: center;
align-items: center;
}
.line {
display: flex;
justify-content: space-between;
align-items: center;
height: 36px;
border-top: 1px solid #0099FF;
color: #FFF;
font-size: 12px;
span {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
}
.test_name {
width: 308px;
display: flex;
justify-content: flex-start;
align-items: center;
border-left: 1px solid #0099FF;
height: 36px;
img {
width: 20px;
height: 20px;
border-radius: 5px;
margin: 0 10px;
}
}
}
}
.table_bottom {
height: 36px;
background: #3DB1FF;
border-top: 1px solid #0099FF;
div {
display: flex;
justify-content: center;
align-items: center;
height: 36px;
color: #FFF;
font-size: 12px;
}
img {
width: 9px;
height: 9px;
margin-left: 6px;
}
}
}
}
src/components/python/pythomDes/index.js
......@@ -2,6 +2,8 @@ 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'
export default class PythonDes extends Component {
constructor(props) {
......@@ -87,6 +89,8 @@ export default class PythonDes extends Component {
</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>
</div>
)
}
......
src/components/python/pythonClass/index.js deleted 100644 → 0
import React, { Component } from 'react'
export default class PythonClass extends Component {
render() {
return (
<div>
已购买
</div>
)
}
}
src/router/router-config.js
......@@ -234,9 +234,5 @@ export default [
{
path: '/pythonShare',
component: loadable(() => import('@/components/pythonShare'))
},
{
path: '/pythonStudy',
component: loadable(() => import('@/components/pythonStudy'))
},
}
]
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