Skip to content

M
mr-julyedu
Commit 7ca1bdd4 by xuzhenghua
Options

xiangqingye

parent 94c04b63
Showing with 208 additions and 151 deletions
src/components/python/index.js
...@@ -39,7 +39,7 @@ class Python extends Component { ...@@ -39,7 +39,7 @@ class Python extends Component {
const {isPay} = this.state; const {isPay} = this.state;
const {user: {hasError}} = this.props; const {user: {hasError}} = this.props;
return ( return (
<div> <div style={{height:'100%'}}>
{ {
isPay === 0 && <PythonDes ></PythonDes> isPay === 0 && <PythonDes ></PythonDes>
} }
......
src/components/python/pythonStudy/index.js
import React, { Component } from 'react'; import React, {Component} from 'react';
import {Accordion, Toast} from 'antd-mobile'; import {Accordion, Toast} from 'antd-mobile';
import { HeaderBar } from '@/common'; import {HeaderBar} from '@/common';
import { http,getParam } from '@/utils'; import {http, getParam} from '@/utils';
import {Link} from "react-router-dom";
import './index.scss'; import './index.scss';
import {Link} from "react-router-dom"
import {connect} from "react-redux"; import {connect} from "react-redux";
class PythonStudy extends Component { class PythonStudy extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
courseInfo:'', courseInfo: '',
syllabus:'', syllabus: '',
learning:'' learning: ''
}; };
} }
componentDidMount() { componentDidMount() {
this.fetchCourseDetail(); this.fetchCourseDetail();
} }
fetchCourseDetail = () => { fetchCourseDetail = () => {
http.get(`${API['home']}/web/it_detail?course_id=${getParam('id')}&is_pay=1`).then(res => { http.get(`${API['home']}/web/it_detail?course_id=${getParam('id')}&is_pay=1`).then(res => {
const {data, code,msg} = res.data; const {data, code, msg} = res.data;
if (code === 200) { if (code === 200) {
this.setState({ this.setState({
courseInfo: data.course_info, courseInfo: data.course_info,
syllabus: data.syllabus, syllabus: data.syllabus,
learning: data.learning learning: data.learning
}) })
} else { } else {
Toast.info(msg, 2) Toast.info(msg, 2)
} }
}); });
} }
Change = (data) => { Change = (data) => {
let cn = ["一", "二", "三", "四", "五", "六", "七", "八", "九", '十']; let cn = ["一", "二", "三", "四", "五", "六", "七", "八", "九", '十'];
...@@ -55,119 +55,152 @@ class PythonStudy extends Component { ...@@ -55,119 +55,152 @@ class PythonStudy extends Component {
return newStr; return newStr;
} }
onChange = (key) => { onChange = (key) => {
console.log(key); console.log(key);
} }
render() { toPythonStudy = (id, isUnlock) => {
const {user} = this.props; if (isUnlock == 1) {
const uid = user && user.data && user.data.uid location.href = `/test/pythonStudy/${id}`
const {courseInfo,syllabus,learning } = this.state; }
return ( }
<div className="python-study">
<HeaderBar title='Python基础语法' arrow={true} /> toPythonHomeWork = (id, isUnlock) => {
<div className="python-study__header"> if (isUnlock == 1) {
<div className="python-study__course"> location.href = `/test/pythonHomeWork?id=${id}`
<h2 className="python-study__course-name">Python人工智能</h2> }
<p className="python-study__course-contact"> }
<span>{courseInfo.contact_type == 1 ? '上课请加QQ学习群':'添加助教微信入群'}：{courseInfo.course_qq}</span>
<span>并备注您的学号：{uid}</span>
</p>
</div>
{
learning.schedule==0 &&
<div className="python-study__progress">
<h2 className="python-study__progress-title">学习进度</h2>
<div className="python-study__progress-bar">
<i style={{width: learning.schedule+'%'}}></i>
<span className="python-study__progress-tip" style={{left: learning.schedule+'%'}}>{learning.schedule+'%'}</span>
</div>
</div>
}
</div> render() {
<Accordion const {user} = this.props;
defaultActiveKey="0" const uid = user && user.data && user.data.uid
className="python-study__stage" const {courseInfo, syllabus, learning} = this.state;
onChange={this.onChange} return (
> <div className="python-study">
{ <HeaderBar title='Python基础语法' arrow={true}/>
syllabus && syllabus.length>0 && syllabus.map((syllabusItem,index)=>{ <div className="python-study__header">
let header = `第${this.Change(syllabusItem.stage)}阶段：${syllabusItem.name}` <div className="python-study__course">
return( <h2 className="python-study__course-name">Python人工智能</h2>
<Accordion.Panel header={header} className="pad" key={index}> <p className="python-study__course-contact">
{ <span>{courseInfo.contact_type == 1 ? '上课请加QQ学习群' : '添加助教微信入群'}：{courseInfo.course_qq}</span>
syllabusItem.lessons && syllabusItem.lessons.length>0 && syllabusItem.lessons.map((lessonsItem,index)=> { <span>并备注您的学号：{uid}</span>
return( </p>
<div key={index}> </div>
<h2 className="python-study__pass"> {
第{lessonsItem.shut}关 {lessonsItem.name} learning.schedule == 0 &&
{ <div className="python-study__progress">
lessonsItem.complete == 1 && <h2 className="python-study__progress-title">学习进度</h2>
<i className="python-study__pass-tag">闯关完成</i> <div className="python-study__progress-bar">
} <i style={{width: learning.schedule + '%'}}/>
</h2> <span className="python-study__progress-tip"
style={{left: learning.schedule + '%'}}>{learning.schedule + '%'}</span>
</div>
</div>
}
<Link to={`/test/pythonStudy/${lessonsItem.video_id}`}> </div>
<div className="python-study__subject" <Accordion
style={{opacity: lessonsItem.info.is_unlock == 0 ? "0.6" : "1"}} defaultActiveKey="0"
key={index}> className="python-study__stage"
<img className="python-study__subject-icon" src={lessonsItem.info.img_url} alt="" /> onChange={this.onChange}
{ >
lessonsItem.info.is_unlock == 1 && lessonsItem.info.complete == 1 && {
<i className="python-study__subject-status" data-status="complete"></i> syllabus && syllabus.length > 0 && syllabus.map((syllabusItem, index) => {
} let header = `第${this.Change(syllabusItem.stage)}阶段：${syllabusItem.name}`
{ return (
lessonsItem.info.is_unlock == 0 && <Accordion.Panel header={header} className="pad" key={index}>
<i className="python-study__subject-status" data-status="lock"></i> {
} syllabusItem.lessons && syllabusItem.lessons.length > 0 && syllabusItem.lessons.map((lessonsItem, index) => {
<div className="python-study__subject-content"> return (
<h2 className="python-study__subject-title text-overflow-1">{ lessonsItem.info.name}</h2> <div key={index}>
</div> <h2 className="python-study__pass">
</div> 第{lessonsItem.shut}关 {lessonsItem.name}
</Link> {
lessonsItem.complete == 1 &&
<i className="python-study__pass-tag">闯关完成</i>
}
</h2>
{ <div className="python-study__subject"
lessonsItem.questions && lessonsItem.questions.length>0 && lessonsItem.questions.map((item,index)=> { style={{opacity: lessonsItem.info.is_unlock == 0 ? '.6' : '1'}}
return ( onClick={() => {
<Link to={`/test/pythonHomeWork?id=${item.id}`} key={index}> this.toPythonStudy(lessonsItem.video_id, lessonsItem.info.is_unlock)
<div className="python-study__subject" }}
style={{opacity: item.is_unlock == 0 ? "0.6" : "1"}}> key={index}>
<img className="python-study__subject-icon" src={item.icon} alt="" /> <img className="python-study__subject-icon"
{ src={lessonsItem.info.img_url} alt=""/>
item.is_unlock == 1 && item.complete == 1 && {
<i className="python-study__subject-status" data-status="complete"></i> lessonsItem.info.is_unlock == 1 && lessonsItem.info.complete == 1 &&
} <i className="python-study__subject-status"
{ data-status="complete"/>
item.is_unlock == 1 && item.complete == 0 && }
<i className="python-study__subject-status" data-status="lock"></i> {
} lessonsItem.info.is_unlock == 0 &&
<div className="python-study__subject-content"> <i className="python-study__subject-status"
<h2 className="python-study__subject-title text-overflow-1">{item.name}</h2> data-status="lock"/>
{ }
item.is_must == 1 && <div className="python-study__subject-content">
<span className="python-study__subject-tag">必做练习</span> <h2 className="python-study__subject-title text-overflow-1">{lessonsItem.info.name}</h2>
} </div>
</div> </div>
</div>
</Link>
) {
}) lessonsItem.questions && lessonsItem.questions.length > 0 && lessonsItem.questions.map((item, index) => {
} return (
</div> <div className="python-study__subject"
) style={{opacity: item.is_unlock == 0 ? '.6' : '1'}}
}) onClick={() => {
} this.toPythonHomeWork(item.id, item.is_unlock)
</Accordion.Panel> }}
) key={index}>
}) <img className="python-study__subject-icon"
} src={item.icon} alt=""/>
</Accordion> {
<button className="python-study__button">开始学习</button> item.is_unlock == 1 && item.complete == 1 &&
</div> <i className="python-study__subject-status"
) data-status="complete"/>
} }
{
item.is_unlock == 1 && item.complete == 0 &&
<i className="python-study__subject-status"
data-status="lock"/>
}
<div className="python-study__subject-content">
<h2 className="python-study__subject-title text-overflow-1">{item.name}</h2>
{
item.is_must == 1 &&
<span
className="python-study__subject-tag">必做练习</span>
}
</div>
</div>
)
})
}
</div>
)
})
}
</Accordion.Panel>
)
})
}
</Accordion>
{
learning.schedule == 0 &&
<Link to={`/test/pythonStudy/${courseInfo.course_id}`} className="python-study__button">开始学习</Link>
}
{
learning.schedule != 0 && learning.schedule != 100 &&
<Link to={`/test/pythonStudy/${courseInfo.course_id}`} className="python-study__button">继续学习</Link>
}
{
learning.schedule == 100 &&
<button className="python-study__button python-study__over">已学完全部课时</button>
}
</div>
)
}
} }
......
src/components/python/pythonStudy/index.scss
html, body, #root {
height: 100%;
}
.am-accordion.python-study__stage .am-accordion-item .am-accordion-header { .am-accordion.python-study__stage .am-accordion-item .am-accordion-header {
height: 44px; height: 44px;
padding-left: 13px; padding-left: 13px;
...@@ -5,15 +9,28 @@ ...@@ -5,15 +9,28 @@
font-weight: 600; font-weight: 600;
color: #333; color: #333;
background-color: #CFDBE5; background-color: #CFDBE5;
border-radius: 4px;
} }
.am-accordion.python-study__stage .am-accordion-item-active .am-accordion-header{
border-radius: 4px 4px 0 0;
}
html:not([data-scale]) .am-accordion::before {
background-color: #F4F5F6;
}
.am-accordion.python-study__stage .am-accordion-item { .am-accordion.python-study__stage .am-accordion-item {
margin-top: 15px; margin-top: 15px;
.am-accordion-content{
.am-accordion-content {
padding-bottom: 10px; padding-bottom: 10px;
border-radius: 0 0 4px 4px;
} }
} }
.am-accordion.python-study__stage{
.am-accordion-item:first-child{ .am-accordion.python-study__stage {
.am-accordion-item:first-child {
margin-top: 0; margin-top: 0;
} }
} }
...@@ -59,7 +76,7 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am- ...@@ -59,7 +76,7 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am-
flex-direction: column; flex-direction: column;
align-items: flex-end; align-items: flex-end;
font-size: 12px; font-size: 12px;
color: rgba(255,255,255,.8); color: rgba(255, 255, 255, .8);
} }
.python-study__progress { .python-study__progress {
...@@ -69,7 +86,7 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am- ...@@ -69,7 +86,7 @@ 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: rgba(51, 51, 51, .6);
line-height: 39px; line-height: 39px;
} }
...@@ -78,7 +95,7 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am- ...@@ -78,7 +95,7 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am-
height: 3px; height: 3px;
margin: 18px 0 15px; margin: 18px 0 15px;
border-radius: 2px; border-radius: 2px;
background-color: rgba(207,219,229,.6); background-color: rgba(207, 219, 229, .6);
i { i {
position: absolute; position: absolute;
...@@ -109,14 +126,15 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am- ...@@ -109,14 +126,15 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am-
bottom: -8px; bottom: -8px;
margin-left: -4px; margin-left: -4px;
border: 4px solid; border: 4px solid;
border-color: #1A9BFC transparent transparent; border-color: #1A9BFC transparent transparent;
} }
} }
.python-study__stage { .python-study__stage {
margin: 15px 10px 0; padding: 0 10px 60px;
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
background-color: #F4F5F6;
} }
.python-study__pass { .python-study__pass {
...@@ -136,10 +154,10 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am- ...@@ -136,10 +154,10 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am-
font-size: 12px; font-size: 12px;
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
color: rgba(26,155,252,1); color: rgba(26, 155, 252, 1);
text-align: center; text-align: center;
line-height: 21px; line-height: 21px;
background-color: rgba(26,155,252,.1);; background-color: rgba(26, 155, 252, .1);;
} }
.python-study__subject { .python-study__subject {
...@@ -148,11 +166,11 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am- ...@@ -148,11 +166,11 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am-
padding: 6px; padding: 6px;
border-radius: 4px; border-radius: 4px;
box-sizing: border-box; box-sizing: border-box;
background-color: rgba(247,248,249,1); background-color: rgba(247, 248, 249, 1);
&[data-status="lock"] { &[data-status="lock"] {
background-color: rgba(247,248,249,.6); background-color: rgba(247, 248, 249, .6);
} }
} }
...@@ -207,7 +225,7 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am- ...@@ -207,7 +225,7 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am-
font-size: 12px; font-size: 12px;
color: #525C65; color: #525C65;
line-height: 18px; line-height: 18px;
background-color: rgba(82,92,101,.1); background-color: rgba(82, 92, 101, .1);
position: absolute; position: absolute;
bottom: 0; bottom: 0;
} }
...@@ -217,6 +235,7 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am- ...@@ -217,6 +235,7 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am-
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: 50px; height: 50px;
line-height: 50px;
border-style: none; border-style: none;
box-sizing: border-box; box-sizing: border-box;
font-size: 16px; font-size: 16px;
...@@ -225,4 +244,8 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am- ...@@ -225,4 +244,8 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am-
text-align: center; text-align: center;
background-color: #1A9BFC; background-color: #1A9BFC;
z-index: 1; z-index: 1;
}
.python-study__over {
background-color: #ccc;
} }
\ No newline at end of file
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