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 {api} from '@/utils' import LiveRoom from './liveRoom' const animateTypes = Swiper.animateTypes class Index extends Component { constructor(props) { super(props) this.state = { banner: [], lives: [], modules: [], isShow: false, islive: false, roomId: '', tabdata: [ { 'src': require('./image/freeclass_icon.png'), 'name': '公开课', 'href':'' }, { 'src': require('./image/jingpin_icon.png'), 'name': '精品特惠', 'href':'/preferential' }, { 'src': require('./image/zjxj_icon.png'), 'name': '赚奖学金', 'href':'' }, { 'src': require('./image/mryt_icon.png'), 'name': '每日一题', 'href':'' }, { 'src': require('./image/qynx_icon.png'), 'name': '企业内训', 'href':'' } ] } } componentDidMount() { // 首页课程 api.get('/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 }) } }) } // 点击近期直播课程弹出预约提示框 liveCourse = (roomId) => { this.setState(status => ({ isShow: true, islive: true, roomId })) } // 自组件传给父组件的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> <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"> <p>查看全部课程</p> <span>数学基础、数学结构、大数据实战、Python...</span> </div> {/* 直播间预约 */} { this.state.islive && <LiveRoom isShow={this.state.isShow} colseBox={this.colseBox} roomId={this.state.roomId}></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 ( <a href={item.jump_url} key={index}> <img className="item" src={item.name} alt=""/> </a> ) }) } </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="/#">更多 ></a> } { modules.show_more === 2 && <a className="more" href="/#">更多 ></a> } <LazyLoad offset={50}> <ul className='course-detail'> { !isOdd && <div className="category-vip"> <a href="/#"> <img src={modules.list[0].course_img_small} alt=""/> </a> </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}></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.room_id)}> <div className='item-box'> <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> <p className="item-time">时间:{item.live_start_time}</p> </div> </div> </li> ) }) } </ul> </div> ) } export default WithTab(Index)