import React, {Component} from 'react'
import {CallApp} from '../../common'
import './index.scss'
import {WithTab} from '@/HOCs'
// import Swiper from 'react-mobile-swiper'
// import createStyle from './createStyle'
import HomeCourseList from './course-list'
import {http, isValidUrl} from '@/utils'
import LiveRoom from './liveRoom'
import {Link} from "react-router-dom"
import {Toast} from 'antd-mobile'
import {connect} from "react-redux"
import TopSwiper from './TopSwiper'
// import ExpandActiveToast from './expandActiveToast'
import AllCourseNavigation from "./all-course"
import {UserGift} from "@common"
// const animateTypes = Swiper.animateTypes
@connect(state => ({
user: state.user,
}))
class Index extends Component {
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',
},
],
}
}
componentDidMount() {
this.getIndexData()
this.userStatus()
}
componentWillMount(){
this.showUserGiftFun()
}
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) {
// 新用户登录之后判断是否是新用户
this.setState({
isShowUserGift: false
})
Toast.info('新人大礼包已领取成功！', 2)
} else {
this.setState({
isShowUserGift: false
})
}
}
})
}
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) // 存储关闭时间
}
get_newerModal = ()=>{
this.close()
this.props.history.push('/passport/login')
}
// 首页课程
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)
}
})
}
// 点击近期直播课程弹出预约提示框
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
className='to-app'
text='在APP打开'
/>*/}
<div className="right">
<Link to={'/intelligent-recommend'}>
<span className={'intelligent-recommend-entry'}>
<i className={'mind-icon'}></i>
智能选课
</span>
</Link>
<i
className='iconfont iconiconfront- search'
onClick={this.toSearch.bind(this)}
/>
</div>
</div>
<div className='zw_height'></div>
{/*支付尾款提示*/}
{/*<ExpandActiveToast/>*/}
<div className='index-swiper'>
{
this.state.banner && this.state.banner.length > 0 &&
<TopSwiper bannerList={this.state.banner}/>
}
</div>
<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>
<p className="borderTop"/>
{
(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
}
<HomeCourseList
modules={this.state.modules}
/>
<AllCourseNavigation/>
{/* 直播间预约 */}
{
this.state.islive &&
<LiveRoom
isShow={this.state.isShow}
colseBox={this.colseBox}
roomMess={this.state.roomMess}
getIndexData={this.getIndexData}
/>
}
{
this.state.isShowUserGift &&
<UserGift close={this.close} get_newerModal={this.get_newerModal}/>
}
</div>
)
}
}
//近期直播
function ScrollBox(props) {
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>
{/*公开课需预约、付费课不需要预约*/}
{
(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>
)
}
export default WithTab(Index)