index.js

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'


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() {
        // 首页课程
        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
                })
            }
        })
    }


    // 点击近期直播课程弹出预约提示框
    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)