import React, {Component} from 'react'
import {Course} from '../../common'
import './index.scss'
import {WithTab} from '@/HOCs'
import Swiper from 'react-mobile-swiper'
import createStyle from './createStyle'
import LazyLoad from 'react-lazy-load'
import {http, api} from '@/utils'
import LiveRoom from './liveRoom'
import {Link} from "react-router-dom"
import {Toast} from 'antd-mobile'
import {CallApp} from '../../common'
const animateTypes = Swiper.animateTypes
class Index extends Component {
constructor(props) {
super(props)
this.state = {
banner: [],
lives: [],
modules: [],
isShow: false,
islive: false,
roomMess: '',
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/qynx_icon.png'),
'name': '企业内训',
'href': 'http://m-active.julyedu.com'
}
]
}
}
componentDidMount() {
// 首页课程
http.get(`${api.home}/m/home`).then((res) => {
if (res.data.code === 200) {
this.setState({
banner: res.data.data.banner,
lives: res.data.data.lives,
modules: res.data.data.modules
})
} else {
Toast.info(res.data.msg, 2)
}
})
}
// 点击近期直播课程弹出预约提示框
liveCourse = (item) => {
if (item.live_status === 0) {
this.setState({
isShow: true,
islive: true,
roomMess: item
})
} else {
window.location.href = `http://www-test.julyedu.com/live/m_room/${item.room_id}`
}
}
// 自组件传给父组件的isshow
colseBox = (val) => {
this.setState({isShow: val})
}
toSearch() {
window.location.href = '/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=""/>
{/*<button className='to-app'>在APP打开</button>*/}
<CallApp className='to-app'></CallApp>
<i className='iconfont iconiconfront- search' onClick={this.toSearch.bind(this)}></i>
</div>
<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}>
<a href={item.href}>
<img src={item.src} alt=""/>
<span>{item.name}</span>
</a>
</li>
)
})
}
</ul>
</div>
<p className="borderTop"></p>
<div className='lives'>
<h2 className="title">近期直播</h2>
<ScrollBox livesList={this.state.lives} liveCourse={this.liveCourse}/>
</div>
{
this.state.modules && this.state.modules.length > 0 && this.state.modules.map((item, index) => {
return (
<div key={index}>
<CourseList modules={item}/>
<p className="borderTop"></p>
</div>
)
})
}
<div className="category all-course">
<Link to='/classify'>
<p>查看全部课程</p>
<span>数学基础、数学结构、大数据实战、Python...</span>
</Link>
</div>
{/* 直播间预约 */}
{
this.state.islive &&
<LiveRoom isShow={this.state.isShow} colseBox={this.colseBox}
roomMess={this.state.roomMess}></LiveRoom>
}
</div>
)
}
}
function TopSwiper({bannerList}) {
return (
<Swiper type={animateTypes.CARD} loop={true} height={168} autoPlay={true} typePro createStyle={createStyle}>
{bannerList && bannerList.length > 0 && bannerList.map((item, index) => {
return (
<Link to={item.jump_url} key={index}>
<img className="item" src={item.name} alt=""/>
</Link>
)
})
}
</Swiper>
)
}
function CourseList({modules}) {
let isOdd = modules.list.length % 2 === 0
let filterList = isOdd ? modules.list : modules.list.slice(1)
return (
<div className='category'>
<h2 className="title">{modules.name}</h2>
{
modules.show_more === 1 &&
<a className="more" href='/classify'>更多 ></a>
}
{
modules.show_more === 2 &&
<a className="more" href={modules.more_page}>更多 ></a>
}
<LazyLoad offset={50}>
<ul className='course-detail'>
{
!isOdd &&
<div className="category-vip">
<Link to={`/detail?id=${modules.list[0].course_id}`}>
<img src={modules.list[0].course_img_small} alt=""/>
</Link>
</div>
}
{
filterList.map((item, index) => {
const top = (
<div>
{item.is_audition === true &&
<span className='audition'><i className={'iconfont iconerji'}></i>试听</span>
}
</div>
)
const bottom = (
<div>
{!item.isbuy && <p className="course-price">
<span className="new">¥{item.price}</span>
<span className="old">¥{item.discounts_price}</span>
</p>
}
{item.isbuy &&
<a href="/#" className="isbuy">已购买</a>
}
</div>
)
return (
<Course key={index} top={top} data={item} bottom={bottom} img={item.course_img_small}
title={item.course_title} id={item.course_id}></Course>
)
})
}
</ul>
</LazyLoad>
</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 &&
<p className="item-time">时间：{item.live_start_time}</p>
}
{
!item.is_prepare &&
<p className='item-btn'>预约</p>
}
</div>
</div>
</li>
)
})
}
</ul>
</div>
)
}
export default WithTab(Index)