Skip to content

M
mr-julyedu
Commit 426bfa05 by xuzhenghua
Options

Merge branch 'master' of gitlab.julyedu.com:baiguangyao/mr-julyedu into detail

parents 5305b8d8 354acf13
Showing with 155 additions and 46 deletions
package.json
{
"name": "my-julyedu",
"name": "mr-julyedu",
"version": "0.1.0",
"private": true,
"dependencies": {
......
src/common/course-base/course-base.scss 0 → 100644
.course-base-item {
width: 47.8%;
margin-top: 15px;
margin-bottom: 5px;
position: relative;
img {
width: 100%;
height: 119px;
min-height: 119px;
}
.course-title {
font-size: 14px;
color: $color_333;
line-height: 19px;
margin-top: 9px;
}
}
src/common/course-base/index.js 0 → 100644
import React from 'react'
import './course-base.scss'
const Course = (props) => {
return (
<li className={`course-base-item ${props.className}`} onClick={props.handleClick.bind(this, props.id)}>
{props.top}
<img src={props.img} alt=""/>
<p className="course-title">{props.title}</p>
{props.bottom}
</li>
);
};
export default Course;
src/common/v-list-base/index.js 0 → 100644
import React from 'react';
import './index.scss'
const VList = (props) => {
return (
<li className='v-list-base-item' onClick={props.handleClick.bind(this, props.id)}>
<div className="content">
<div className="cover">
{props.status}
<img src={props.img} alt=""/>
</div>
{props.info}
</div>
{props.tab}
</li>
);
};
export default VList;
\ No newline at end of file
src/common/v-list-base/index.scss 0 → 100644
.v-list-base-item {
height: 127px;
padding: 10px 10px 0;
.content {
display: flex;
height: 100%;
padding-bottom: 10px;
border-bottom: 1px solid $sp_e7eaf1;
.cover {
flex: 0 0 auto;
margin-right: 16px;
position: relative;
img {
width: 150px;
height: 108px;
border-radius: 3px;
}
}
.course-status {
width: 100%;
height: 24px;
position: absolute;
bottom: -1px;
border-radius: 0 0 3px 3px;
text-align: center;
line-height: 24px;
color: $white;
font-size: 13px;
}
}
}
src/components/study/freeCourses/index.js
import React, { PureComponent } from 'react'
import { Course, Tag } from '../../../common'
import { Tag } from '../../../common'
import Course from '@/common/course-base'
import { http, api } from '@/utils'
import { Toast } from "antd-mobile";
import classnames from 'classnames'
import {isEmpty} from 'lodash'
import './free-courses.scss'
......@@ -25,8 +27,8 @@ class FreeCourse extends PureComponent {
componentDidMount() {
this.getFreeCourses()
.then(res => {
if (res.data.code == 200) {
const data = res.data
let data = res.data
if (data.code == 200) {
this.setState({
courses: data.data,
})
......@@ -36,16 +38,21 @@ class FreeCourse extends PureComponent {
})
this.getFreeLive()
.then(res => {
if (res.data.code == 200) {
let data = res.data
if (data.code == 200) {
this.setState({
live: res.data.data
live: isEmpty(data.data) ? [] : data.data
})
} else {
Toast.info(res.data.msg)
Toast.info(data.msg, 2, null, false)
}
})
}
handleClick = id => {
this.props.history.push(`/play?id=${id}`)
}
getFreeCourses = () => {
return http.get(`${api.home}/m/free_course/${this.state.page}/${this.state.num}`)
}
......@@ -58,19 +65,6 @@ class FreeCourse extends PureComponent {
return (
<ul className='free-courses'>
{
this.state.courses.map((item, index) => (
<Course
img={item.logo}
title={item['video_course_name']}
bottom={
<Bottom audience={item['play_times']} className={'tag-category'} text={item.category}/>
}
id={item['v_course_id']}
key={index}
/>
))
}
{
this.state.live.map((item, index) => {
const Bottom = (
<div className="bottom">
......@@ -79,12 +73,12 @@ class FreeCourse extends PureComponent {
return <i key={index} className={classnames('column', `column-${index + 1}`)}/>
})}
</div>
<div className="time">{`直播：${item['live_start_time']}`}</div>
<div className="time">{`${item['live_start_time']}`}</div>
</div>
)
return (
<Course
img={item['live_img']}
img={item['live_cover']}
title={item['live_title']}
top={
<Tag className={'tag-starting top'}>即将开始</Tag>
......@@ -92,10 +86,26 @@ class FreeCourse extends PureComponent {
bottom={Bottom}
key={item['live_id']}
className={'live'}
handleClick={this.handleClick}
id={index}
/>
)
})
}
{
this.state.courses.map((item, index) => (
<Course
img={item.logo}
title={item['video_course_name']}
handleClick={this.handleClick}
bottom={
<Bottom audience={item['play_times']} className={'tag-category'} text={item.category}/>
}
id={item['v_course_id']}
key={index}
/>
))
}
</ul>
)
}
......
src/components/study/index.js
......@@ -7,6 +7,7 @@ import FreeCourses from './freeCourses'
import WithTab from '@/HOCs/WithTab'
import WithFullSize from '@/HOCs/WithFullSize'
import { compose } from 'redux'
import PrivateRoute from '@/router/privateRoute'
class Study extends Component {
......@@ -45,11 +46,11 @@ class Study extends Component {
<Switch>
<Redirect exact from='/study' to='study/my-course'/>
<Route path={`${this.props.match.path}/my-course`} component={MyCourses}/>
{/*<PrivateRoute path={`${this.props.match.path}/my-course`} component={MyCourses}/>*/}
<Route path={`${this.props.match.path}/free-course`} component={FreeCourses}/>
{/*<Route path={`${this.props.match.path}/my-course`} render={props => {
<MyCourses storeScrollPosition={this.storeScrollPosition}/>
}}/>*/}
<Route path={`${this.props.match.path}/free-course`} component={FreeCourses}/>
</Switch>
</div>
</section>
......
src/components/study/myCourses/index.js
import React, { PureComponent } from "react"
import { VList } from '@/common'
import VList from '@/common/v-list-base'
import './my-courses.scss'
import { isToday, format } from "date-fns"
import { connect } from "react-redux"
......@@ -72,10 +72,10 @@ class MyCourses extends PureComponent {
list;
handleClick = id => {
this.props.history.push(`/detail?id=${id}`)
this.props.history.push(`/play/video?id=${id}`)
}
addCourseClick = () => {
console.log(2);
this.props.history.push('/classify')
}
componentDidMount() {
......
src/components/video/index.js
......@@ -22,7 +22,7 @@ class Video extends Component {
state = {
title: '视频',
title: '',
courseId: null,
video_catalog: [],
datum: [],
......@@ -30,7 +30,8 @@ class Video extends Component {
activeIndex: 0,
isAuth: true,
course: null,
salePrice: null
salePrice: null,
vCourseId: null
}
......@@ -87,7 +88,9 @@ class Video extends Component {
video_catalog: data.data['lessons'],
currentVideoSrc: data.data['lessons'][state.activeIndex]['play_url'],
course: data.data.course,
courseId: data.data.course['course_id']
courseId: data.data.course['course_id'],
vCourseId: data.data.course['v_course_id'],
title: data.data.course['course_title']
}),
() => {
if (this.lessonAvailable()) {
......@@ -197,11 +200,11 @@ class Video extends Component {
render() {
let {match} = this.props
let {match, location} = this.props
const {video_catalog, activeIndex, isAuth, salePrice} = this.state
return (
<div className='play'>
<HeaderBar title={this.state.title}/>
<HeaderBar title={this.state.title} arrow={true}/>
<div className="video">
<video className={'video-js'} ref={el => this.video = el}>
<source src={'/'} type='application/x-mpegURL'/>
......@@ -235,7 +238,10 @@ class Video extends Component {
</div>
</div>
<Switch>
<Redirect exact from={'/play'} to={'/play/video'}/>
<Redirect exact from={'/play'} to={{
pathname: '/play/video',
search: location.search
}}/>
<Route path={`${match.path}/video`} render={props => {
return <VideoCatalog
activeIndex={this.state.activeIndex}
......@@ -248,7 +254,7 @@ class Video extends Component {
}}/>
</Switch>
<Route render={props => {
return this.state.courseId ? <Recommendation {...props} courseId={this.state.courseId}/>
return this.state.vCourseId ? <Recommendation {...props} vCourseId={this.state.vCourseId}/>
: null
}}/>
</div>
......
src/components/video/recommendation/index.js
......@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
import './recommendation.scss'
import { http, api } from '@/utils'
import { Toast } from "antd-mobile";
import {VList} from '@/common';
import VList from '@/common/v-list-base';
......@@ -26,7 +26,11 @@ class Recommendation extends PureComponent {
componentDidMount() {
http.get(`${api.home}/m/play/recommend_course/${this.props.courseId}?num=${this.state.num}`)
this.getRecommendation()
}
getRecommendation = () => {
http.get(`${api.home}/m/play/recommend_course/${this.props.vCourseId}?num=${this.state.num}`)
.then(res => {
const data = res.data
if(data.code === 200){
......@@ -43,7 +47,7 @@ class Recommendation extends PureComponent {
handleClick = id => {
console.log(id)
this.props.history.push(`/detail?id=${id}`)
}
render() {
......
src/router/loading.js
import React, { useEffect } from 'react';
import React, { useEffect, useState } from 'react';
import { withRouter } from "react-router-dom";
import { compose } from "redux";
import { connect } from "react-redux";
import LoadingComponent from '@/common/Loading'
function Loading(props) {
const [isLoading, setLoadingState] = useState(true)
useEffect(() => {
let {user, location, history} = props
if (!user.isFetching) {
if (user.hasError) {
history.push('/passport', {from: location})
setLoadingState(false)
} else {
if (Object.values(user.data).every(item => !!item).length !== 0) {
history.push(location.pathname)
setLoadingState(false)
}
}
}
})
return (
<div className={'loading'}>
loading...
<div className={'loading-route'}>
<LoadingComponent isLoading={isLoading}/>
</div>
);
}
......
src/router/router-config.js
......@@ -19,7 +19,6 @@ import Passport from '@/components/passport';
import { Scholarship } from '@/components/scholarship/index';
import DrawDocument from '@/components/scholarship/DrawDocument/DrawDocument';
import PayOrder from '@/components/order/payOrder/PayOrder'
import Loading from '@/common/Loading'
const Coupons = loadable(() => import(/* webpackChunkName: 'coupons'*/ '@/components/coupons'))
const Study = loadable(() => import(/* webpackChunkName: 'study'*/'@/components/study'))
......@@ -138,9 +137,4 @@ export default [
component: ToGroup,
isPrivate: true
},
{
path: '/loading',
component: Loading,
},
]
\ 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