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 {
const {isPay} = this.state;
const {user: {hasError}} = this.props;
return (
<div>
<div style={{height:'100%'}}>
{
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 { HeaderBar } from '@/common';
import { http,getParam } from '@/utils';
import {Link} from "react-router-dom";
import {HeaderBar} from '@/common';
import {http, getParam} from '@/utils';
import './index.scss';
import {Link} from "react-router-dom"
import {connect} from "react-redux";
class PythonStudy extends Component {
constructor(props) {
super(props);
this.state = {
courseInfo:'',
syllabus:'',
learning:''
courseInfo: '',
syllabus: '',
learning: ''
};
}
......@@ -22,7 +22,7 @@ class PythonStudy extends Component {
fetchCourseDetail = () => {
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) {
this.setState({
courseInfo: data.course_info,
......@@ -59,28 +59,41 @@ class PythonStudy extends Component {
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() {
const {user} = this.props;
const uid = user && user.data && user.data.uid
const {courseInfo,syllabus,learning } = this.state;
const {courseInfo, syllabus, learning} = this.state;
return (
<div className="python-study">
<HeaderBar title='Python基础语法' arrow={true} />
<HeaderBar title='Python基础语法' arrow={true}/>
<div className="python-study__header">
<div className="python-study__course">
<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>{courseInfo.contact_type == 1 ? '上课请加QQ学习群' : '添加助教微信入群'}：{courseInfo.course_qq}</span>
<span>并备注您的学号：{uid}</span>
</p>
</div>
{
learning.schedule==0 &&
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>
<i style={{width: learning.schedule + '%'}}/>
<span className="python-study__progress-tip"
style={{left: learning.schedule + '%'}}>{learning.schedule + '%'}</span>
</div>
</div>
}
......@@ -92,13 +105,13 @@ class PythonStudy extends Component {
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}`
return(
return (
<Accordion.Panel header={header} className="pad" key={index}>
{
syllabusItem.lessons && syllabusItem.lessons.length>0 && syllabusItem.lessons.map((lessonsItem,index)=> {
return(
syllabusItem.lessons && syllabusItem.lessons.length > 0 && syllabusItem.lessons.map((lessonsItem, index) => {
return (
<div key={index}>
<h2 className="python-study__pass">
第{lessonsItem.shut}关 {lessonsItem.name}
......@@ -108,50 +121,59 @@ class PythonStudy extends Component {
}
</h2>
<Link to={`/test/pythonStudy/${lessonsItem.video_id}`}>
<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}>
<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 &&
<i className="python-study__subject-status" data-status="complete"></i>
<i className="python-study__subject-status"
data-status="complete"/>
}
{
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">
<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>
</Link>
{
lessonsItem.questions && lessonsItem.questions.length>0 && lessonsItem.questions.map((item,index)=> {
lessonsItem.questions && lessonsItem.questions.length > 0 && lessonsItem.questions.map((item, index) => {
return (
<Link to={`/test/pythonHomeWork?id=${item.id}`} key={index}>
<div className="python-study__subject"
style={{opacity: item.is_unlock == 0 ? "0.6" : "1"}}>
<img className="python-study__subject-icon" src={item.icon} alt="" />
style={{opacity: item.is_unlock == 0 ? '.6' : '1'}}
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 &&
<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 &&
<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">
<h2 className="python-study__subject-title text-overflow-1">{item.name}</h2>
{
item.is_must == 1 &&
<span className="python-study__subject-tag">必做练习</span>
<span
className="python-study__subject-tag">必做练习</span>
}
</div>
</div>
</Link>
)
})
}
......@@ -164,7 +186,18 @@ class PythonStudy extends Component {
})
}
</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>
)
}
......
src/components/python/pythonStudy/index.scss
html, body, #root {
height: 100%;
}
.am-accordion.python-study__stage .am-accordion-item .am-accordion-header {
height: 44px;
padding-left: 13px;
......@@ -5,15 +9,28 @@
font-weight: 600;
color: #333;
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 {
margin-top: 15px;
.am-accordion-content{
.am-accordion-content {
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;
}
}
......@@ -59,7 +76,7 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am-
flex-direction: column;
align-items: flex-end;
font-size: 12px;
color: rgba(255,255,255,.8);
color: rgba(255, 255, 255, .8);
}
.python-study__progress {
......@@ -69,7 +86,7 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am-
.python-study__progress-title {
font-size: 14px;
font-weight: 600;
color: rgba(51,51,51,.6);
color: rgba(51, 51, 51, .6);
line-height: 39px;
}
......@@ -78,7 +95,7 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am-
height: 3px;
margin: 18px 0 15px;
border-radius: 2px;
background-color: rgba(207,219,229,.6);
background-color: rgba(207, 219, 229, .6);
i {
position: absolute;
......@@ -114,9 +131,10 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am-
}
.python-study__stage {
margin: 15px 10px 0;
padding: 0 10px 60px;
border-radius: 4px;
overflow: hidden;
background-color: #F4F5F6;
}
.python-study__pass {
......@@ -136,10 +154,10 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am-
font-size: 12px;
font-style: normal;
font-weight: 600;
color: rgba(26,155,252,1);
color: rgba(26, 155, 252, 1);
text-align: center;
line-height: 21px;
background-color: rgba(26,155,252,.1);;
background-color: rgba(26, 155, 252, .1);;
}
.python-study__subject {
......@@ -148,11 +166,11 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am-
padding: 6px;
border-radius: 4px;
box-sizing: border-box;
background-color: rgba(247,248,249,1);
background-color: rgba(247, 248, 249, 1);
&[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-
font-size: 12px;
color: #525C65;
line-height: 18px;
background-color: rgba(82,92,101,.1);
background-color: rgba(82, 92, 101, .1);
position: absolute;
bottom: 0;
}
......@@ -217,6 +235,7 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am-
bottom: 0;
width: 100%;
height: 50px;
line-height: 50px;
border-style: none;
box-sizing: border-box;
font-size: 16px;
......@@ -226,3 +245,7 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am-
background-color: #1A9BFC;
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