Skip to content

M
mr-julyedu
Commit 88658ae7 by zhanghaozhe
Options

免费课程

parent bec711bf
Showing with 120 additions and 47 deletions
src/common/Course/index.js
import React from 'react'; import React from 'react'
import './course.scss' import './course.scss'
import {Link} from "react-router-dom"; import {Link} from "react-router-dom"
const Course = (props) => { const Course = (props) => {
return ( return (
<li className='course-item'> <li className={`course-item ${props.className}`}>
{props.top} {props.top}
<Link to={`/detail?id=${props.id}`}> <Link to={`/detail?id=${props.id}`}>
<img src={props.img} alt=""/> <img src={props.img} alt=""/>
<p className="course-title text-overflow-2">{props.title}</p> <p className="course-title">{props.title}</p>
</Link> </Link>
{props.bottom} {props.bottom}
</li> </li>
......
src/components/study/freeCourses/free-courses.scss
...@@ -27,6 +27,10 @@ ...@@ -27,6 +27,10 @@
.course-title { .course-title {
margin-top: 0; margin-top: 0;
line-height: 34px; line-height: 34px;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
.bottom { .bottom {
...@@ -34,4 +38,45 @@ ...@@ -34,4 +38,45 @@
justify-content: space-between; justify-content: space-between;
} }
} }
.live {
.bottom {
display: flex;
justify-content: flex-start;
color: $active;
}
}
.animation-box {
width: 14px;
height: 12px;
display: flex;
justify-content: space-between;
margin-right: 5px;
.column {
width: 2px;
height: 12px;
transform-origin: bottom center;
animation: scaleY 1.1s ease-out infinite;
background-color: $bg_active;
@for $i from 1 to 4 {
&-#{$i} {
animation-delay: $i * 0.2s;
}
}
}
}
}
@keyframes scaleY {
from {
transform: scaleY(0);
}
50% {
transform: scaleY(1);
}
to {
transform: scaleY(0);
}
} }
\ No newline at end of file
src/components/study/freeCourses/index.js
import React, { PureComponent } from 'react' import React, { PureComponent } from 'react'
import { Course, Tag } from '../../../common' import { Course, Tag } from '../../../common'
import { http, api } from '@/utils' import { http, api } from '@/utils'
import { Toast } from "antd-mobile";
import classnames from 'classnames'
import './free-courses.scss' import './free-courses.scss'
...@@ -24,11 +26,12 @@ class FreeCourse extends PureComponent { ...@@ -24,11 +26,12 @@ class FreeCourse extends PureComponent {
this.getFreeCourses() this.getFreeCourses()
.then(res => { .then(res => {
if (res.data.code == 200) { if (res.data.code == 200) {
const data = res.data
this.setState({ this.setState({
courses: res.data.data, courses: data.data,
}) })
} else { } else {
console.log(res.data.msg) Toast.info(data.msg)
} }
}) })
this.getFreeLive() this.getFreeLive()
...@@ -37,6 +40,8 @@ class FreeCourse extends PureComponent { ...@@ -37,6 +40,8 @@ class FreeCourse extends PureComponent {
this.setState({ this.setState({
live: res.data.data live: res.data.data
}) })
} else {
Toast.info(res.data.msg)
} }
}) })
} }
...@@ -55,35 +60,42 @@ class FreeCourse extends PureComponent { ...@@ -55,35 +60,42 @@ class FreeCourse extends PureComponent {
{ {
this.state.courses.map((item, index) => ( this.state.courses.map((item, index) => (
<Course <Course
data={{ img={item.logo}
src: item.logo, title={item['video_course_name']}
title: item.video_course_name
}}
bottom={ bottom={
<Bottom audience={item.lessons} className={'tag-category'} text={item.category}/> <Bottom audience={item['play_times']} className={'tag-category'} text={item.category}/>
} }
id={item['v_course_id']}
key={index} key={index}
>
</Course>
))
}
{/*{
this.state.live.map((item,index) => (
<Course
data={{
src: item.live_img,
title: item.live_title
}}
top={
<Tag className={'tag-starting top'}>即将开始</Tag>
}
bottom={
<Bottom audience={item.lessons} className={'tag-category'} text={item.category}/>
}
key={item.live_id}
/> />
)) ))
}*/} }
{
this.state.live.map((item, index) => {
const Bottom = (
<div className="bottom">
<div className="animation-box">
{new Array(4).fill('a').map((item, index) => {
return <i key={index} className={classnames('column', `column-${index + 1}`)}/>
})}
</div>
<div className="time">{`直播：${item['live_start_time']}`}</div>
</div>
)
return (
<Course
img={item['live_img']}
title={item['live_title']}
top={
<Tag className={'tag-starting top'}>即将开始</Tag>
}
bottom={Bottom}
key={item['live_id']}
className={'live'}
/>
)
})
}
</ul> </ul>
) )
} }
......
src/components/study/myCourses/index.js
...@@ -71,8 +71,8 @@ class MyCourses extends PureComponent { ...@@ -71,8 +71,8 @@ class MyCourses extends PureComponent {
list; list;
handleClick = () => { handleClick = id => {
console.log(1); this.props.history.push(`/detail?id=${id}`)
} }
addCourseClick = () => { addCourseClick = () => {
console.log(2); console.log(2);
...@@ -83,7 +83,7 @@ class MyCourses extends PureComponent { ...@@ -83,7 +83,7 @@ class MyCourses extends PureComponent {
this.props.fetchCoursesListIfNeeded(); this.props.fetchCoursesListIfNeeded();
} }
componentWillUnmount(){ componentWillUnmount() {
this.props.switchTab(true); this.props.switchTab(true);
} }
...@@ -98,6 +98,9 @@ class MyCourses extends PureComponent { ...@@ -98,6 +98,9 @@ class MyCourses extends PureComponent {
if (list && list.length !== 0) { if (list && list.length !== 0) {
return ( return (
<> <>
<div className="my-course-uid">
{`加群请备注您的学号：${this.props.user.data.uid}`}
</div>
<InfiniteScroll <InfiniteScroll
pageStart={0} pageStart={0}
hasMore={true} hasMore={true}
...@@ -111,7 +114,7 @@ class MyCourses extends PureComponent { ...@@ -111,7 +114,7 @@ class MyCourses extends PureComponent {
const Info = ( const Info = (
<div className="info"> <div className="info">
<p className='title'>{item.course_title}</p> <p className='title'>{item.course_title}</p>
<p className='contact'>QQ群：{item.course_qq || 449141326}</p> <p className='contact'>QQ群：{item.course_qq}</p>
<Bottom item={item}/> <Bottom item={item}/>
</div> </div>
) )
...@@ -120,7 +123,9 @@ class MyCourses extends PureComponent { ...@@ -120,7 +123,9 @@ class MyCourses extends PureComponent {
handleClick={this.handleClick} handleClick={this.handleClick}
{...item} {...item}
key={index} key={index}
info={Info}/> info={Info}
id={item['course_id']}
/>
) )
}) })
} }
...@@ -148,13 +153,12 @@ class MyCourses extends PureComponent { ...@@ -148,13 +153,12 @@ class MyCourses extends PureComponent {
} }
} }
const mapStateToProps = state => ({ export default connect(
courseList: state.myCourses.courseList state => ({
}) courseList: state.myCourses.courseList,
user: state.user
const mapDispatchToProps = { }),
fetchCoursesListIfNeeded, {
switchTab fetchCoursesListIfNeeded,
} switchTab
})(MyCourses)
export default connect(mapStateToProps, mapDispatchToProps)(MyCourses) \ No newline at end of file
\ No newline at end of file
src/components/study/myCourses/my-courses.scss
...@@ -29,7 +29,8 @@ ...@@ -29,7 +29,8 @@
margin-right: 10px; margin-right: 10px;
} }
} }
.start-learn{
.start-learn {
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
align-self: flex-end; align-self: flex-end;
...@@ -63,6 +64,16 @@ ...@@ -63,6 +64,16 @@
} }
} }
.my-course-uid {
width: 375px;
height: 30px;
background: $bg_FFF4CE;
line-height: 30px;
text-align: center;
font-size: 12px;
color: $color_333;
}
.empty { .empty {
height: 100%; height: 100%;
display: flex; display: flex;
......
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