index.js 11.1 KB
Newer Older
xuzhenghua committed
1 2
import React, {Component} from 'react'
import {CallApp} from '../../common'
xuzhenghua committed
3
import './index.scss'
xuzhenghua committed
4
import {WithTab} from '@/HOCs'
FE committed
5 6
// import Swiper from 'react-mobile-swiper'
// import createStyle from './createStyle'
7
import HomeCourseList from './course-list'
xuzhenghua committed
8
import {http, isValidUrl} from '@/utils'
xuzhenghua committed
9
import LiveRoom from './liveRoom'
xuzhenghua committed
10 11 12
import {Link} from "react-router-dom"
import {Toast} from 'antd-mobile'
import {connect} from "react-redux"
FE committed
13
import TopSwiper from './TopSwiper'
xuzhenghua committed
14
// import ExpandActiveToast from './expandActiveToast'
15
import AllCourseNavigation from "./all-course"
xuzhenghua committed
16
import {UserGift} from "@common"
xuzhenghua committed
17

FE committed
18
// const animateTypes = Swiper.animateTypes
baiguangyao committed
19

20
@connect(state => ({
xuzhenghua committed
21
    user: state.user,
22
}))
baiguangyao committed
23
class Index extends Component {
xuzhenghua committed
24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61
    constructor(props) {
        super(props)
        this.state = {
            banner: [],   // 首页banner
            lives: [],  //近期直播
            modules: [],  //首页课程模块儿
            isShow: false,
            islive: false,
            roomMess: '',
            isShowUserGift: false,
            tabdata: [
                {
                    'src': require('./image/freeclass_icon.png'),
                    'name': '公开课',
                    'href': '/study/free-course',
                },
                {
                    'src': require('./image/jingpin_icon.png'),
                    'name': '精品特惠',
                    'href': '/preferential',
                },
                {
                    'src': require('./image/zjxj_icon.png'),
                    'name': '赚奖学金',
                    'href': '/scholarship',
                },
                {
                    'src': require('./image/mryt_icon.png'),
                    'name': '每日一题',
                    'href': '/examination',
                },
                {
                    'src': require('./image/shequ_icon.png'),
                    'name': '社区',
                    'href': 'https://ask.julyedu.com',
                },
            ],
        }
xuzhenghua committed
62
    }
zhanghaozhe committed
63

xuzhenghua committed
64 65 66 67
    componentDidMount() {
        this.getIndexData()
        this.userStatus()
    }
xuzhenghua committed
68 69 70
    componentWillMount(){
        this.showUserGiftFun()
    }
xuzhenghua committed
71 72 73 74 75
    userStatus =()=>{
        http.get(`${API['base-api']}/sys/user/new_user_status`).then((res) => {
            const {errno, data} = res.data
            if (errno === 0) {
                if (data.status == 1) {
xuzhenghua committed
76
                    // 新用户登录之后判断是否是新用户
xuzhenghua committed
77 78 79
                    this.setState({
                        isShowUserGift: false
                    })
xuzhenghua committed
80
                    Toast.info('新人大礼包已领取成功!', 2)
xuzhenghua committed
81 82 83 84
                } else {
                    this.setState({
                        isShowUserGift: false
                    })
xuzhenghua committed
85 86
                }
            }
zhanghaozhe committed
87
        })
xuzhenghua committed
88
    }
xuzhenghua committed
89

xuzhenghua committed
90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109
    showUserGiftFun = () => {
        let newer_last_time = localStorage.getItem('newer_last_time') // 获取用户关闭大礼包的时间
        let now_time = (new Date()).valueOf()
        if (!newer_last_time || now_time - newer_last_time > 86400000) {
            this.setState({
                isShowUserGift: true
            })
        } else {
            this.setState({
                isShowUserGift: false
            })
        }
    }
    close = () => {
        this.setState({
            isShowUserGift: false
        })
        let now_time = (new Date()).valueOf() // 获取当前时间
        localStorage.setItem('newer_last_time', now_time)  // 存储关闭时间
    }
xuzhenghua committed
110

xuzhenghua committed
111 112 113 114 115
    get_newerModal = ()=>{
        this.close()
        this.props.history.push('/passport/login')
    }

xuzhenghua committed
116 117 118 119 120 121 122 123 124 125 126 127 128 129
    // 首页课程
    getIndexData = () => {
        http.get(`${API.home}/m/home`).then((res) => {
            if (res.data.code === 200) {
                const {data} = res.data || {}
                const modules = Array.isArray(data.modules) ? data.modules : []
                this.setState({
                    banner: data.banner,
                    lives: data.lives,
                    modules,
                })
            } else {
                Toast.info(res.data.msg, 2)
            }
xuzhenghua committed
130

xuzhenghua committed
131
        })
xuzhenghua committed
132
    }
zhanghaozhe committed
133 134


xuzhenghua committed
135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172
    // 点击近期直播课程弹出预约提示框
    liveCourse = (item) => {
        const {user} = this.props
        const uid = user && user.data && user.data.uid
        if (!uid) {
            this.props.history.push('/passport/login')
        } else {
            if (item.live_status === 0) {
                this.setState({
                    isShow: true,
                    islive: true,
                    roomMess: item,
                })
            } else {
                window.location.href = `${window.location.href.includes('pre') ? 'http://www-pre.julyedu.com' : 'http://www.julyedu.com'}/live/m_room/${item.room_id}`
            }
        }
    }
    // 自组件传给父组件的isshow
    colseBox = (val) => {
        this.setState({isShow: val})
    }

    // 点击头部搜索跳转到搜索页面
    toSearch() {
        this.props.history.push('/search')
    }

    render() {
        return (
            <div className='index-box'>
                <div className='header'>
                    <img
                        className="logo"
                        src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/img/index/logo.png"
                        alt=""
                    />
                    {/* <CallApp
zhanghaozhe committed
173 174
            className='to-app'
            text='在APP打开'
zhanghaozhe committed
175
          />*/}
xuzhenghua committed
176 177
                    <div className="right">
                        <Link to={'/intelligent-recommend'}>
zhanghaozhe committed
178 179 180 181
              <span className={'intelligent-recommend-entry'}>
                <i className={'mind-icon'}></i>
                智能选课
            </span>
xuzhenghua committed
182 183 184 185 186 187 188
                        </Link>
                        <i
                            className='iconfont iconiconfront- search'
                            onClick={this.toSearch.bind(this)}
                        />
                    </div>
                </div>
xuzhenghua committed
189

xuzhenghua committed
190
                <div className='zw_height'></div>
xuzhenghua committed
191

xuzhenghua committed
192 193
                {/*支付尾款提示*/}
                {/*<ExpandActiveToast/>*/}
xuzhenghua committed
194

xuzhenghua committed
195
                <div className='index-swiper'>
zhanghaozhe committed
196
                    {
xuzhenghua committed
197 198
                        this.state.banner && this.state.banner.length > 0 &&
                        <TopSwiper bannerList={this.state.banner}/>
zhanghaozhe committed
199
                    }
xuzhenghua committed
200
                </div>
zhanghaozhe committed
201

xuzhenghua committed
202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225
                <div className="tabbox">
                    <ul>
                        {
                            this.state.tabdata.map((item, index) => {
                                return (
                                    <li key={index}>
                                        {
                                            isValidUrl(item.href)
                                                ? <a href={item.href}>
                                                    <img src={item.src} alt=""/>
                                                    <span>{item.name}</span>
                                                </a>
                                                : <Link to={item.href}>
                                                    <img src={item.src} alt=""/>
                                                    <span>{item.name}</span>
                                                </Link>
                                        }

                                    </li>
                                )
                            })
                        }
                    </ul>
                </div>
xuzhenghua committed
226

xuzhenghua committed
227
                <p className="borderTop"/>
xuzhenghua committed
228

xuzhenghua committed
229
                {
xuzhenghua committed
230

xuzhenghua committed
231 232 233 234 235 236 237 238 239
                    (this.state.lives && this.state.lives.length > 0) ?
                        <div className='lives'>
                            <h2 className="title">近期直播</h2>
                            <ScrollBox
                                livesList={this.state.lives}
                                liveCourse={this.liveCourse}
                            />
                        </div> : null
                }
xuzhenghua committed
240

xuzhenghua committed
241 242 243
                <HomeCourseList
                    modules={this.state.modules}
                />
xuzhenghua committed
244

xuzhenghua committed
245
                <AllCourseNavigation/>
xuzhenghua committed
246

xuzhenghua committed
247 248 249 250 251 252 253 254 255 256 257 258 259
                {/* 直播间预约 */}
                {
                    this.state.islive &&
                    <LiveRoom
                        isShow={this.state.isShow}
                        colseBox={this.colseBox}
                        roomMess={this.state.roomMess}
                        getIndexData={this.getIndexData}
                    />
                }

                {
                    this.state.isShowUserGift &&
xuzhenghua committed
260
                    <UserGift close={this.close} get_newerModal={this.get_newerModal}/>
xuzhenghua committed
261 262 263 264
                }
            </div>
        )
    }
baiguangyao committed
265 266 267

}

zhanghaozhe committed
268

zhanghaozhe committed
269 270
//近期直播
function ScrollBox(props) {
xuzhenghua committed
271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291
    return (
        <div className='scroll-box'>
            <ul className='scroll-list'>
                {
                    props.livesList && props.livesList.length > 0 && props.livesList.map((item, index) => {
                        return (
                            <li key={index} className='scroll-item'
                                onClick={e => props.liveCourse(item)}>
                                <div className='item-box'>
                                    {
                                        item.live_status === 0 &&
                                        <span className='no-start'>即将开始</span>
                                    }
                                    {
                                        (item.live_status === 1 || item.live_status === 10) &&
                                        <span className='start'>正在直播</span>
                                    }
                                    <img className="item-img" src={item.live_img} alt=""/>
                                    <div className="item-content">
                                        <h2 className="item-title">{item.live_title}</h2>
                                        <p className="item-teacher">讲师:{item.live_teacher_name}</p>
zhanghaozhe committed
292

xuzhenghua committed
293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314
                                        {/*公开课需预约、付费课不需要预约*/}
                                        {
                                            (item.is_prepare || item.is_free === 0) && item.live_status === 0 &&
                                            <p className="item-time">时间:{item.live_start_time}</p>
                                        }
                                        {
                                            !item.is_prepare && item.live_status === 0 && item.is_free === 1 &&
                                            <button className='item-btn'>预约</button>
                                        }
                                        {
                                            (item.live_status === 1 || item.live_status === 10) &&
                                            <button className='item-btn'>正在直播</button>
                                        }
                                    </div>
                                </div>
                            </li>
                        )
                    })
                }
            </ul>
        </div>
    )
xuzhenghua committed
315
}
xuzhenghua committed
316

xuzhenghua committed
317
export default WithTab(Index)