Skip to content

M
mr-julyedu
Commit f5e7c74e by xuzhenghua
Options

list

parents 420a47da dbfb701d
Showing with 252 additions and 169 deletions
.eslintignore 0 → 100644
src/
\ No newline at end of file
package-lock.json
...@@ -4046,6 +4046,11 @@ ...@@ -4046,6 +4046,11 @@
} }
} }
}, },
"date-fns": {
"version": "1.30.1",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
"integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw=="
},
"date-now": { "date-now": {
"version": "0.1.4", "version": "0.1.4",
"resolved": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz", "resolved": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz",
......
package.json
...@@ -17,6 +17,7 @@ ...@@ -17,6 +17,7 @@
"bfj": "6.1.1", "bfj": "6.1.1",
"case-sensitive-paths-webpack-plugin": "2.2.0", "case-sensitive-paths-webpack-plugin": "2.2.0",
"css-loader": "1.0.0", "css-loader": "1.0.0",
"date-fns": "^1.30.1",
"dotenv": "6.0.0", "dotenv": "6.0.0",
"dotenv-expand": "4.2.0", "dotenv-expand": "4.2.0",
"eslint": "5.12.0", "eslint": "5.12.0",
......
src/common/Course/course.scss
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
img { img {
width: 100%; width: 100%;
height: 119px; height: 119px;
min-height: 119px;
} }
.course-title { .course-title {
......
src/common/VList/index.js
...@@ -4,11 +4,11 @@ import './index.scss' ...@@ -4,11 +4,11 @@ import './index.scss'
const VList = (props) => { const VList = (props) => {
console.log(props) console.log(props)
return ( return (
<li className='v-list-item' onClick={e=>props.handleClick(props.courseInfo.course_id)}> <li className='v-list-item' onClick={e=>props.handleClick(props.id)}>
<div className="content"> <div className="content">
<div className="cover"> <div className="cover">
{props.status} {props.status}
<img src={props.courseInfo.image_name} alt=""/> <img src={props.img} alt=""/>
</div> </div>
{props.info} {props.info}
</div> </div>
......
src/common/VList/index.scss
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
border-bottom: 1px solid $sp_e7eaf1; border-bottom: 1px solid $sp_e7eaf1;
.cover { .cover {
flex: 1 0 auto; flex: 0 0 auto;
margin-right: 16px; margin-right: 16px;
position: relative; position: relative;
img { img {
......
src/components/preferential/index.js
...@@ -134,7 +134,7 @@ class Preferential extends Component { ...@@ -134,7 +134,7 @@ class Preferential extends Component {
</div> </div>
) )
return ( return (
<VList handleClick={this.handleClick} key={index} courseInfo={item} status={status} <VList handleClick={this.handleClick} key={index} img={item.image_name} id={item.course_id} status={status}
info={Info}></VList> info={Info}></VList>
) )
})} })}
......
src/components/study/freeCourses/index.js
import React from 'react' import React, { PureComponent } from 'react'
import { Course, Tag } from '../../../common' import { Course, Tag } from '../../../common'
import { api } from '@/utils'
import './free-courses.scss' import './free-courses.scss'
const mockData = [
{
tagText: '机器学习',
tagType: 1,
title: '16年度最火课程TOP10',
src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
},
{
tagText: '机器学习',
tagType: 1,
title: '16年度最火课程TOP10',
src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
},
{
tagText: '机器学习',
tagType: 1,
title: '16年度最火课程TOP10',
src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
},
{
tagText: '机器学习',
tagType: 1,
title: '16年度最火课程TOP10',
src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
},
{
tagText: '机器学习',
tagType: 1,
title: '16年度最火课程TOP10',
src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
},
{
tagText: '机器学习',
tagType: 1,
title: '16年度最火课程TOP10',
src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
},
{
tagText: '机器学习',
tagType: 1,
title: '16年度最火课程TOP10',
src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
},
{
tagText: '机器学习',
tagType: 1,
title: '16年度最火课程TOP10',
src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
},
{
tagText: '机器学习',
tagType: 1,
title: '16年度最火课程TOP10',
src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
},
{
tagText: '机器学习',
tagType: 1,
title: '16年度最火课程TOP10',
src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
},
{
tagText: '机器学习',
tagType: 1,
title: '16年度最火课程TOP10',
src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
},
{
tagText: '机器学习',
tagType: 1,
title: '16年度最火课程TOP10',
src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
},
]
const Bottom = (props) => ( const Bottom = (props) => (
<div className='bottom'> <div className='bottom'>
<Tag className={props.className}>{props.tagText}</Tag> <Tag className={props.className}>{props.text}</Tag>
<span>{props.audience}人观看</span> <span>{props.audience}人观看</span>
</div> </div>
) )
class FreeCourse extends PureComponent {
state = {
courses: [],
live: [],
page: 1,
num: 10
}
componentDidMount() {
this.getFreeCourses()
.then(res => {
if (res.data.code == 200) {
this.setState({
courses: res.data.data,
})
} else {
console.log(res.data.msg)
}
})
this.getFreeLive()
.then(res => {
if (res.data.code == 200) {
this.setState({
live: res.data.data
})
}
})
}
getFreeCourses = () => {
return api.get(`/m/free_course/${this.state.page}/${this.state.num}`)
}
const FreeCourse = (props) => { getFreeLive = () => {
return ( return api.get(`/m/live/free_list`)
<ul className='free-courses'> }
{
mockData.map((item, index) => ( render() {
<Course return (
data={item} <ul className='free-courses'>
top={ {
<Tag className={'tag-starting top'}>即将开始</Tag> this.state.courses.map((item, index) => (
} <Course
bottom={ data={{
<Bottom audience={232} className={'tag-category'} tagText={item.tagText}></Bottom> src: item.logo,
} title: item.video_course_name
key={index} }}
> bottom={
</Course> <Bottom audience={item.lessons} className={'tag-category'} text={item.category}/>
)) }
} key={index}
</ul> >
) </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}
/>
))
}*/}
</ul>
)
}
} }
export default FreeCourse export default FreeCourse
\ No newline at end of file
src/components/study/myCourses/actions.js 0 → 100644
import { api } from '@/utils'
export const RECEIVE_MY_COURSES = 'RECEIVE_MY_COURSES'
export const receiveMyCourses = payload => ({
type: RECEIVE_MY_COURSES,
payload
})
export const getMyCourses = payload => dispatch => {
return api.get(`/m/my_course/${payload.page}/${payload.num}`)
.then(res => {
dispatch(receiveMyCourses(res.data))
})
}
const NUM_INTERVAL = 10
export const fetchCoursesListIfNeeded = payload => (dispatch, getState) => {
const {shouldFetch, currentPage, currentNum} = getState().myCourses
if(!shouldFetch){
dispatch(getMyCourses)
}
}
export const INVALIDATE_COURSEDATA = 'INVALIDATE_COURSEDATA'
export const invalidateCourseDate = () => ({
type: INVALIDATE_COURSEDATA
})
src/components/study/myCourses/index.js
import React, { PureComponent } from "react" import React, { PureComponent } from "react"
import { VList } from '../../../common' import { VList } from '@/common'
import './my-courses.scss' import './my-courses.scss'
import { api } from '@/utils' import { isToday, format } from "date-fns"
import { connect } from "react-redux"
const mockData = [ import { getMyCourses } from "./actions"
{
title: '三月面试求职班', function getStudyTime(seconds) {
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg', return {
contact: 'QQ群：449141326', hour: Math.floor(seconds / (60 * 60)),
time: '03月12日', min: Math.floor(seconds / 60) % 60,
record: '学习到第2课2分33秒' sec: seconds % 60
}, }
{ }
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒'
},
]
function AddCourse(props) { function AddCourse(props) {
...@@ -50,7 +22,39 @@ function AddCourse(props) { ...@@ -50,7 +22,39 @@ function AddCourse(props) {
) )
} }
export default class MyCourses extends PureComponent { function Record({record: {seconds, lesson_name}}) {
let re = /第[\s\S]+?课/,
result = ''
if (lesson_name) {
let matchResult = re.exec(lesson_name)
result += (matchResult && matchResult[0]) ? matchResult[0] : ''
}
if (seconds) {
let studyTime = getStudyTime(seconds)
let hour = studyTime.hour ? String(studyTime.hour).padStart(2, '0') + ':' : '',
min = studyTime.min ? String(studyTime.min).padStart(2, '0') + ':' : '',
sec = studyTime.sec ? String(studyTime.sec).padStart(2, '0') : ''
result += hour + min + sec
}
return (
<span className={'record'}>
{
result.length ? `学习到${result}` : null
}
</span>
)
}
class MyCourses extends PureComponent {
state = {
addVisible: false
}
handleClick = () => { handleClick = () => {
console.log(1); console.log(1);
} }
...@@ -59,43 +63,52 @@ export default class MyCourses extends PureComponent { ...@@ -59,43 +63,52 @@ export default class MyCourses extends PureComponent {
} }
componentDidMount() { componentDidMount() {
api.get('/m/free_course/1/10') this.props.getMyCourses({page: 1, num: 10});
.then(res => {
console.log(res)
})
} }
render() { render() {
let {data} = this.props.courseData
if (mockData.length !== 0) { if (data && data.length !== 0) {
return ( return (
<> <>
<ul> <ul>
{ {
mockData.map((item, index) => { data.map((item, index) => {
let date = new Date(item.ago * 1000)
let time = isToday(date) ? format(date, 'HH时mm分') : format(date, 'MM月DD日')
const Info = ( const Info = (
<div className="info"> <div className="info">
<p className='title'>{item.title}</p> <p className='title'>{item.course_title}</p>
<p className='contact'>{item.contact}</p> <p className='contact'>QQ群：{item.course_qq || 449141326}</p>
<p className='des'> <p className='des'>
<span className='time'>{item.time}</span> <span className='time'>{time}</span>
<span className='record'>{item.record}</span> <Record record={item}/>
</p> </p>
</div> </div>
) )
return ( return (
<VList handleClick={this.handleClick} {...item} key={index} info={Info}></VList> <VList img={item.image_name}
handleClick={this.handleClick}
{...item}
key={index}
info={Info}/>
) )
}) })
} }
</ul> </ul>
<AddCourse addCourseClick={this.addCourseClick}/> {
this.state.addVisible ?
<AddCourse addCourseClick={this.addCourseClick}/>
: null
}
</> </>
) )
} else { } else {
return ( return (
<div className="empty"> <div className="empty">
<p><i className='iconfont iconfish'></i></p> <p><i className='iconfont iconfish'/></p>
<p className='empty-prompt'>还是咸鱼一条，快去翻身~</p> <p className='empty-prompt'>还是咸鱼一条，快去翻身~</p>
<p> <p>
<button>去选课</button> <button>去选课</button>
...@@ -105,4 +118,12 @@ export default class MyCourses extends PureComponent { ...@@ -105,4 +118,12 @@ export default class MyCourses extends PureComponent {
} }
} }
} }
\ No newline at end of file
const mapStateToProps = state => ({
courseData: state.myCourses.courseData
})
const mapDispatchToProps = {getMyCourses}
export default connect(mapStateToProps, mapDispatchToProps)(MyCourses)
\ No newline at end of file
src/components/study/myCourses/my-courses.scss
.info { .info {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
width: 55%;
.title { .title {
font-size: 15px; font-size: 15px;
font-weight: 400; font-weight: 400;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.contact { .contact {
...@@ -13,9 +18,10 @@ ...@@ -13,9 +18,10 @@
} }
.des { .des {
align-self: center;
color: $color_999; color: $color_999;
font-size: 11px; font-size: 11px;
align-self: flex-end;
line-height: 1;
.time { .time {
margin-right: 10px; margin-right: 10px;
...@@ -48,6 +54,7 @@ ...@@ -48,6 +54,7 @@
align-items: center; align-items: center;
padding-top: 140px; padding-top: 140px;
background: $bg_f5f5f5; background: $bg_f5f5f5;
.iconfish { .iconfish {
width: 20px; width: 20px;
height: 20px; height: 20px;
...@@ -59,11 +66,12 @@ ...@@ -59,11 +66,12 @@
font-size: $font_12; font-size: $font_12;
color: $color_666; color: $color_666;
} }
button{
width:131px; button {
height:30px; width: 131px;
border:1px solid $active; height: 30px;
border-radius:15px; border: 1px solid $active;
border-radius: 15px;
background: transparent; background: transparent;
color: $active; color: $active;
font-size: $font_16; font-size: $font_16;
......
src/components/study/myCourses/reducers.js 0 → 100644
import {
RECEIVE_MY_COURSES,
INVALIDATE_COURSEDATA
} from './actions'
const initialState = {
shouldFetch: false,
courseData: {},
currentPage: 1,
currentNum: 10
}
export default function myCourses(state = initialState, action) {
switch (action.type) {
case RECEIVE_MY_COURSES:
return Object.assign(
{},
state,
{courseData: action.payload})
case INVALIDATE_COURSEDATA:
return Object.assign(
{},
state,
{shouldFetch: true})
default:
return state
}
}
\ No newline at end of file
src/components/study/study.scss
...@@ -10,6 +10,7 @@ $tabFontSize: 15px; ...@@ -10,6 +10,7 @@ $tabFontSize: 15px;
.tab { .tab {
height: $tabHeight; height: $tabHeight;
max-height: $tabHeight;
line-height: $tabHeight; line-height: $tabHeight;
text-align: center; text-align: center;
background: #F7F9FC; background: #F7F9FC;
......
src/store/index.js
import { combineReducers } from 'redux'; import { combineReducers } from 'redux';
import searchReducer from '@/components/search/store/reducer'; import searchReducer from '@/components/search/store/reducer';
import myCourses from '@/components/study/myCourses/reducers'
const reducer = combineReducers({ const reducer = combineReducers({
searchReducer searchReducer,
myCourses
}); });
export default reducer; export default reducer;
\ No newline at end of file
src/utils/api.js
...@@ -6,10 +6,7 @@ export const BASE_URL = process.env.NODE_ENV === 'development' ? '/api': 'https: ...@@ -6,10 +6,7 @@ export const BASE_URL = process.env.NODE_ENV === 'development' ? '/api': 'https:
const instance = axios.create({ const instance = axios.create({
baseURL: BASE_URL, baseURL: BASE_URL,
transformRequest: [ transformRequest: [
(data) => { (data) => qs.stringify(data)
return qs.stringify(data)
}
] ]
}) })
......
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