index.js 5.34 KB
Newer Older
zhanghaozhe committed
1
import React, { PureComponent } from 'react'
2 3
import { Tag } from '../../../common'
import Course from '@/common/course-base'
zhanghaozhe committed
4
import { http } from '@/utils'
zhanghaozhe committed
5 6
import { Toast } from "antd-mobile";
import classnames from 'classnames'
zhanghaozhe committed
7
import { isEmpty } from 'lodash'
FE committed
8 9
import InfiniteScroll from "react-infinite-scroller";
import {HashLoader} from 'react-spinners'
zhanghaozhe committed
10 11 12 13 14 15


import './free-courses.scss'

const Bottom = (props) => (
    <div className='bottom'>
zhanghaozhe committed
16
        <Tag className={props.className}>{props.text}</Tag>
zhanghaozhe committed
17 18 19 20
        <span>{props.audience}人观看</span>
    </div>
)

zhanghaozhe committed
21
class FreeCourse extends PureComponent {
FE committed
22 23 24

    page = 1
    num = 10
zhanghaozhe committed
25 26 27
    state = {
        courses: [],
        live: [],
zhanghaozhe committed
28
        page: 1,
FE committed
29
        hasMore: false
zhanghaozhe committed
30 31
    }

zhanghaozhe committed
32 33
    componentDidMount() {
        this.getFreeCourses()
zhanghaozhe committed
34
            .then(res => {
zhanghaozhe committed
35 36
                let data = res.data
                if (data.code == 200) {
zhanghaozhe committed
37
                    this.setState({
zhanghaozhe committed
38
                        courses: data.data,
FE committed
39
                        hasMore: true
zhanghaozhe committed
40 41
                    })
                } else {
zhanghaozhe committed
42
                    Toast.info(data.msg)
zhanghaozhe committed
43 44
                }
            })
zhanghaozhe committed
45
        this.getFreeLive()
zhanghaozhe committed
46
            .then(res => {
zhanghaozhe committed
47 48
                let data = res.data
                if (data.code == 200) {
zhanghaozhe committed
49
                    this.setState({
zhanghaozhe committed
50
                        live: isEmpty(data.data) ? [] : data.data
zhanghaozhe committed
51
                    })
zhanghaozhe committed
52
                } else {
zhanghaozhe committed
53
                    Toast.info(data.msg, 2, null, false)
zhanghaozhe committed
54 55 56
                }
            })
    }
zhanghaozhe committed
57

58
    handleClick = id => {
zhanghaozhe committed
59
        this.props.history.push(`/play/video?id=${id}`)
60 61
    }

zhanghaozhe committed
62
    getFreeCourses = () => {
FE committed
63
        return http.get(`${API.home}/m/free_course/${this.page++}/${this.num}`)
zhanghaozhe committed
64 65 66
    }

    getFreeLive = () => {
zhanghaozhe committed
67
        return http.get(`${API.home}/m/live/free_list`)
zhanghaozhe committed
68 69
    }

zhanghaozhe committed
70 71 72
    toLive = live => {
        const {room_id, live_status} = live
        if (live_status) {
xuzhenghua committed
73
            window.location.assign(`http://www.julyedu.com/live/m_room/${room_id}`)
zhanghaozhe committed
74 75 76 77 78
        } else {
            Toast.info('直播即将开始,敬请期待', 2, null, false)
        }
    }

FE committed
79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99
    loadFunc = () => {
        if (this.state.hasMore) {
            this.setState({
                hasMore: this.state.courses.length % 10 === 0
            }, () => {
                this.getFreeCourses()
                    .then(res => {
                        let data = res.data
                        if (data.code == 200) {
                            Array.isArray(data.data) && this.setState({
                                courses: this.state.courses.concat(data.data),
                                hasMore: data.data.length % 10 === 0
                            })
                        } else {
                            Toast.info(data.msg)
                        }
                    })
            })
        }
    }

zhanghaozhe committed
100 101
    render() {
        return (
FE committed
102 103 104 105 106 107 108 109 110
            <InfiniteScroll
                pageStart={0}
                loadMore={this.loadFunc}
                useWindow={false}
                className={'free-courses'}
                element={'ul'}
                hasMore={this.state.hasMore}
                threshold={250}
            >
zhanghaozhe committed
111
                {
zhanghaozhe committed
112 113 114 115 116 117 118 119
                    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>
zhanghaozhe committed
120
                                <div className="time">{`${item['live_start_time']}`}</div>
zhanghaozhe committed
121 122
                            </div>
                        )
zhanghaozhe committed
123 124

                        const LiveStatus = (
xuzhenghua committed
125
                            item['live_status'] == 0 ? <Tag className={'tag-soon top'}>即将开始</Tag> :
zhanghaozhe committed
126 127
                                <Tag className={'tag-playing top'}>正在直播</Tag>
                        )
zhanghaozhe committed
128 129
                        return (
                            <Course
zhanghaozhe committed
130
                                img={item['live_cover']}
zhanghaozhe committed
131
                                title={item['live_title']}
zhanghaozhe committed
132
                                top={LiveStatus}
zhanghaozhe committed
133 134 135
                                bottom={Bottom}
                                key={item['live_id']}
                                className={'live'}
zhanghaozhe committed
136
                                handleClick={this.toLive.bind(this, item)}
137
                                id={index}
zhanghaozhe committed
138 139 140 141
                            />
                        )
                    })
                }
zhanghaozhe committed
142 143 144 145 146
                {
                    this.state.courses.map((item, index) => (
                        <Course
                            img={item.logo}
                            title={item['video_course_name']}
147
                            handleClick={this.handleClick}
zhanghaozhe committed
148 149 150 151 152
                            bottom={
                                <Bottom audience={item['play_times']} className={'tag-category'} text={item.category}/>
                            }
                            id={item['v_course_id']}
                            key={index}
zhanghaozhe committed
153
                            className={'course-item'}
zhanghaozhe committed
154 155 156
                        />
                    ))
                }
FE committed
157
            </InfiniteScroll>
zhanghaozhe committed
158 159
        )
    }
zhanghaozhe committed
160 161
}

zhanghaozhe committed
162

zhanghaozhe committed
163
export default FreeCourse