index.js

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 } 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"

// 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: '',
      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()
  }

  // 首页课程
  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打开'
          />
          <i
            className='iconfont iconiconfront- search'
            onClick={this.toSearch.bind(this)}
          />
        </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}>
                    <a href={item.href}>
                      <img src={item.src} alt=""/>
                      <span>{item.name}</span>
                    </a>
                  </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}
          />
        }
      </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);