Skip to content

M
mr-julyedu
Commit 7ca1bdd4 by xuzhenghua
Options

xiangqingye

parent 94c04b63
Showing with 105 additions and 48 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: ''
}; };
} }
...@@ -22,7 +22,7 @@ class PythonStudy extends Component { ...@@ -22,7 +22,7 @@ class PythonStudy extends Component {
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,
...@@ -59,28 +59,41 @@ class PythonStudy extends Component { ...@@ -59,28 +59,41 @@ class PythonStudy extends Component {
console.log(key); console.log(key);
} }
toPythonStudy = (id, isUnlock) => {
if (isUnlock == 1) {
location.href = `/test/pythonStudy/${id}`
}
}
toPythonHomeWork = (id, isUnlock) => {
if (isUnlock == 1) {
location.href = `/test/pythonHomeWork?id=${id}`
}
}
render() { render() {
const {user} = this.props; const {user} = this.props;
const uid = user && user.data && user.data.uid const uid = user && user.data && user.data.uid
const {courseInfo,syllabus,learning } = this.state; const {courseInfo, syllabus, learning} = this.state;
return ( return (
<div className="python-study"> <div className="python-study">
<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">Python人工智能</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>
</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">
<i style={{width: learning.schedule+'%'}}></i> <i style={{width: learning.schedule + '%'}}/>
<span className="python-study__progress-tip" style={{left: learning.schedule+'%'}}>{learning.schedule+'%'}</span> <span className="python-study__progress-tip"
style={{left: learning.schedule + '%'}}>{learning.schedule + '%'}</span>
</div> </div>
</div> </div>
} }
...@@ -92,13 +105,13 @@ class PythonStudy extends Component { ...@@ -92,13 +105,13 @@ class PythonStudy extends Component {
onChange={this.onChange} onChange={this.onChange}
> >
{ {
syllabus && syllabus.length>0 && syllabus.map((syllabusItem,index)=>{ syllabus && syllabus.length > 0 && syllabus.map((syllabusItem, index) => {
let header = `第${this.Change(syllabusItem.stage)}阶段：${syllabusItem.name}` let header = `第${this.Change(syllabusItem.stage)}阶段：${syllabusItem.name}`
return( return (
<Accordion.Panel header={header} className="pad" key={index}> <Accordion.Panel header={header} className="pad" key={index}>
{ {
syllabusItem.lessons && syllabusItem.lessons.length>0 && syllabusItem.lessons.map((lessonsItem,index)=> { syllabusItem.lessons && syllabusItem.lessons.length > 0 && syllabusItem.lessons.map((lessonsItem, index) => {
return( return (
<div key={index}> <div key={index}>
<h2 className="python-study__pass"> <h2 className="python-study__pass">
第{lessonsItem.shut}关 {lessonsItem.name} 第{lessonsItem.shut}关 {lessonsItem.name}
...@@ -108,50 +121,59 @@ class PythonStudy extends Component { ...@@ -108,50 +121,59 @@ class PythonStudy extends Component {
} }
</h2> </h2>
<Link to={`/test/pythonStudy/${lessonsItem.video_id}`}>
<div className="python-study__subject" <div className="python-study__subject"
style={{opacity: lessonsItem.info.is_unlock == 0 ? "0.6" : "1"}} style={{opacity: lessonsItem.info.is_unlock == 0 ? '.6' : '1'}}
onClick={() => {
this.toPythonStudy(lessonsItem.video_id, lessonsItem.info.is_unlock)
}}
key={index}> key={index}>
<img className="python-study__subject-icon" src={lessonsItem.info.img_url} alt="" /> <img className="python-study__subject-icon"
src={lessonsItem.info.img_url} alt=""/>
{ {
lessonsItem.info.is_unlock == 1 && lessonsItem.info.complete == 1 && lessonsItem.info.is_unlock == 1 && lessonsItem.info.complete == 1 &&
<i className="python-study__subject-status" data-status="complete"></i> <i className="python-study__subject-status"
data-status="complete"/>
} }
{ {
lessonsItem.info.is_unlock == 0 && lessonsItem.info.is_unlock == 0 &&
<i className="python-study__subject-status" data-status="lock"></i> <i className="python-study__subject-status"
data-status="lock"/>
} }
<div className="python-study__subject-content"> <div className="python-study__subject-content">
<h2 className="python-study__subject-title text-overflow-1">{ lessonsItem.info.name}</h2> <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)=> { lessonsItem.questions && lessonsItem.questions.length > 0 && lessonsItem.questions.map((item, index) => {
return ( return (
<Link to={`/test/pythonHomeWork?id=${item.id}`} key={index}>
<div className="python-study__subject" <div className="python-study__subject"
style={{opacity: item.is_unlock == 0 ? "0.6" : "1"}}> style={{opacity: item.is_unlock == 0 ? '.6' : '1'}}
<img className="python-study__subject-icon" src={item.icon} alt="" /> onClick={() => {
this.toPythonHomeWork(item.id, item.is_unlock)
}}
key={index}>
<img className="python-study__subject-icon"
src={item.icon} alt=""/>
{ {
item.is_unlock == 1 && item.complete == 1 && item.is_unlock == 1 && item.complete == 1 &&
<i className="python-study__subject-status" data-status="complete"></i> <i className="python-study__subject-status"
data-status="complete"/>
} }
{ {
item.is_unlock == 1 && item.complete == 0 && item.is_unlock == 1 && item.complete == 0 &&
<i className="python-study__subject-status" data-status="lock"></i> <i className="python-study__subject-status"
data-status="lock"/>
} }
<div className="python-study__subject-content"> <div className="python-study__subject-content">
<h2 className="python-study__subject-title text-overflow-1">{item.name}</h2> <h2 className="python-study__subject-title text-overflow-1">{item.name}</h2>
{ {
item.is_must == 1 && item.is_must == 1 &&
<span className="python-study__subject-tag">必做练习</span> <span
className="python-study__subject-tag">必做练习</span>
} }
</div> </div>
</div> </div>
</Link>
) )
}) })
} }
...@@ -164,7 +186,18 @@ class PythonStudy extends Component { ...@@ -164,7 +186,18 @@ class PythonStudy extends Component {
}) })
} }
</Accordion> </Accordion>
<button className="python-study__button">开始学习</button> {
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> </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;
...@@ -114,9 +131,10 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am- ...@@ -114,9 +131,10 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am-
} }
.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;
...@@ -226,3 +245,7 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am- ...@@ -226,3 +245,7 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am-
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