Commit eeaf420a by zhanghaozhe

限时免费首页页面

parent 4be7157c
import React, { Component } from 'react' import React, {Component} from 'react'
import { Course, CallApp } from '../../common' import {Course, CallApp} from '../../common'
import './index.scss' import './index.scss'
import { WithTab } from '@/HOCs' import {WithTab} from '@/HOCs'
// import Swiper from 'react-mobile-swiper' // import Swiper from 'react-mobile-swiper'
// import createStyle from './createStyle' // import createStyle from './createStyle'
import LazyLoad from 'react-lazy-load' import LazyLoad from 'react-lazy-load'
import { http } from '@/utils' import {http} from '@/utils'
import LiveRoom from './liveRoom' import LiveRoom from './liveRoom'
import { Link } from "react-router-dom" import {Link} from "react-router-dom"
import { Toast } from 'antd-mobile' import {Toast} from 'antd-mobile'
import { connect } from "react-redux"; import {connect} from "react-redux";
import TopSwiper from './TopSwiper' import TopSwiper from './TopSwiper'
import ExpandActiveToast from './expandActiveToast' import ExpandActiveToast from './expandActiveToast'
import CourseBase from '@/common/course-base'
// const animateTypes = Swiper.animateTypes // const animateTypes = Swiper.animateTypes
@connect(state => ({ @connect(state => ({
user: state.user user: state.user
})) }))
class Index extends Component { class Index extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
banner: [], // 首页banner banner: [], // 首页banner
lives: [], //近期直播 lives: [], //近期直播
modules: [], //首页课程模块儿 modules: [], //首页课程模块儿
isShow: false, isShow: false,
islive: false, islive: false,
roomMess: '', roomMess: '',
tabdata: [ tabdata: [
{ {
'src': require('./image/freeclass_icon.png'), 'src': require('./image/freeclass_icon.png'),
'name': '公开课', 'name': '公开课',
'href': '/study/free-course' 'href': '/study/free-course'
}, },
{ {
'src': require('./image/jingpin_icon.png'), 'src': require('./image/jingpin_icon.png'),
'name': '精品特惠', 'name': '精品特惠',
'href': '/preferential' 'href': '/preferential'
}, },
{ {
'src': require('./image/zjxj_icon.png'), 'src': require('./image/zjxj_icon.png'),
'name': '赚奖学金', 'name': '赚奖学金',
'href': '/scholarship' 'href': '/scholarship'
}, },
{ {
'src': require('./image/mryt_icon.png'), 'src': require('./image/mryt_icon.png'),
'name': '每日一题', 'name': '每日一题',
'href': '/examination' 'href': '/examination'
}, },
{ {
'src': require('./image/shequ_icon.png'), 'src': require('./image/shequ_icon.png'),
'name': '社区', 'name': '社区',
'href': 'https://ask.julyedu.com' 'href': 'https://ask.julyedu.com'
}
]
} }
],
limitFree: [
{
img: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/b80219b5cb.png',
title: '集训营就业优秀学员面试分享',
status: 1,
count: 1000,
price: '1000',
price1: '1000',
id: 1,
},
{
img: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/b80219b5cb.png',
title: '集训营就业优秀学员面试分享',
status: 2,
count: 1000,
price: '1000',
price1: '1000',
id: 15,
},
{
img: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/b80219b5cb.png',
title: '集训营就业优秀学员面试分享',
status: 3,
count: 1000,
price: '1000',
price1: '1000',
id: 13,
},
{
img: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/b80219b5cb.png',
title: '集训营就业优秀学员面试分享',
status: 1,
count: 1000,
price: '1000',
price1: '1000',
id: 2,
},
]
} }
}
componentDidMount() {
this.getIndexData()
}
// 首页课程
getIndexData = () => {
http.get(`${API.home}/m/home`).then((res) => {
if (res.data.code === 200) {
const {data} = res.data || {}
this.setState({
banner: data.banner,
lives: data.lives,
modules: typeof data.modules === 'object' && data.modules.length > 0 ? data.modules : []
})
} else {
Toast.info(res.data.msg, 2)
}
componentDidMount() { })
this.getIndexData() }
}
// 首页课程
getIndexData = () => {
http.get(`${API.home}/m/home`).then((res) => {
if (res.data.code === 200) {
const {data} = res.data || {}
this.setState({
banner: data.banner,
lives: data.lives,
modules: typeof data.modules === 'object' && data.modules.length > 0 ? data.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')
}
toCourseDetail = (id) => {
const {dispatch, history} = this.props;
// dispatch(getCourses(id, () => {
history.push(`/detail?id=${id}`);
return false;
// }));
}
handleLimitFreeClick = () => {
}
render() {
const {limitFree} = this.state
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/>
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')
}
toCourseDetail = (id) => { <div className='index-swiper'>
const {dispatch, history} = this.props; {
// dispatch(getCourses(id, () => { this.state.banner && this.state.banner.length > 0 &&
history.push(`/detail?id=${id}`); <TopSwiper bannerList={this.state.banner}/>
return false; }
// })); </div>
}
render() { <div className="tabbox">
return ( <ul>
<div className='index-box'> {
<div className='header'> this.state.tabdata.map((item, index) => {
<img return (
className="logo" <li key={index}>
src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/img/index/logo.png" <a href={item.href}>
alt="" <img src={item.src} alt=""/>
/> <span>{item.name}</span>
<CallApp </a>
className='to-app' </li>
text='在APP打开' )
/> })
<i }
className='iconfont iconiconfront- search' </ul>
onClick={this.toSearch.bind(this)} </div>
/>
</div>
<div className='zw_height'></div> <p className="borderTop"/>
<ExpandActiveToast/> {
<div className='index-swiper'> (this.state.lives && this.state.lives.length > 0) ?
{ <div className='lives'>
this.state.banner && this.state.banner.length > 0 && <h2 className="title">近期直播</h2>
<TopSwiper bannerList={this.state.banner}/> <ScrollBox
} livesList={this.state.lives}
</div> liveCourse={this.liveCourse}
/>
</div> : null
}
<div className="tabbox"> {
<ul> limitFree && limitFree.length &&
{ <div className="limit-free">
this.state.tabdata.map((item, index) => { <h2 className="limit-free-title">
return ( 限时免费
<li key={index}> <span className={'hot'}>hot</span>
<a href={item.href}> </h2>
<img src={item.src} alt=""/> <LimitFree courses={limitFree}
<span>{item.name}</span> handleClick={this.handleLimitFreeClick}
</a> />
</li> </div>
) }
})
}
</ul>
</div>
{
(this.state.modules && this.state.modules.length > 0) ? this.state.modules.map((item, index) => {
return (
<div key={index}>
<CourseList
modules={item}
toDetail={this.toCourseDetail}
/>
<p className="borderTop"/> <p className="borderTop"/>
</div>
)
}) : null
}
{ <div className="category all-course">
<Link to='/classify'>
(this.state.lives && this.state.lives.length > 0) ? <p>查看全部课程</p>
<div className='lives'> <span>数学基础、数学结构、大数据实战、Python...</span>
<h2 className="title">近期直播</h2> </Link>
<ScrollBox </div>
livesList={this.state.lives}
liveCourse={this.liveCourse}
/>
</div> : null
}
{
(this.state.modules && this.state.modules.length > 0) ? this.state.modules.map((item, index) => {
return (
<div key={index}>
<CourseList
modules={item}
toDetail={this.toCourseDetail}
/>
<p className="borderTop"/>
</div>
)
}) : null
}
<div className="category all-course">
<Link to='/classify'>
<p>查看全部课程</p>
<span>数学基础、数学结构、大数据实战、Python...</span>
</Link>
</div>
{/* 直播间预约 */} {/* 直播间预约 */}
{ {
this.state.islive && this.state.islive &&
<LiveRoom <LiveRoom
isShow={this.state.isShow} isShow={this.state.isShow}
colseBox={this.colseBox} colseBox={this.colseBox}
roomMess={this.state.roomMess} roomMess={this.state.roomMess}
getIndexData={this.getIndexData} getIndexData={this.getIndexData}
/> />
} }
</div> </div>
) )
} }
} }
...@@ -257,140 +314,182 @@ class Index extends Component { ...@@ -257,140 +314,182 @@ class Index extends Component {
// 课程模块儿公共组件 // 课程模块儿公共组件
// 课程数量是奇数第一个课程需要横着展示沾满一行,课程数量是偶数一行显示两个 // 课程数量是奇数第一个课程需要横着展示沾满一行,课程数量是偶数一行显示两个
function CourseList({modules, toDetail}) { function CourseList({modules, toDetail}) {
let isOdd = modules.list.length % 2 === 0 let isOdd = modules.list.length % 2 === 0
// 数量为奇数时,第一个课程显示大图(如后台未上传,前台显示小图),课程数量为偶数时,均显示小图 // 数量为奇数时,第一个课程显示大图(如后台未上传,前台显示小图),课程数量为偶数时,均显示小图
let filterList = '' let filterList = ''
if (isOdd) {
filterList = modules.list
} else {
filterList = modules.list[0].course_img === modules.list[0].course_img_small ? modules.list : modules.list.slice(1)
}
return (
<div className='category'>
<h2 className="title">{modules.name}</h2>
{
modules.show_more === 1 &&
<Link className="more" to='/classify'>更多 ></Link>
}
{
modules.show_more === 2 &&
<Link className="more" to={modules.more_page}>更多 ></Link>
}
<LazyLoad offset={50}>
<ul className='index-course-detail'>
{
!isOdd && modules.list[0].course_img !== modules.list[0].course_img_small &&
<div className="category-vip" onClick={() => toDetail(modules.list[0].course_id)}>
{/* <Link to={`/detail?id=${modules.list[0].course_id}`}> */}
<img src={modules.list[0].course_img} alt=""/>
{/* </Link> */}
</div>
}
{
filterList.map((item, index) => {
const top = (
<div>
{item.is_audition === true &&
<span className='audition'><i className={'iconfont iconerji'}></i>试听</span>
}
{item.is_aist &&
<span className='return_bash'></span>
}
</div>
);
const bottom = (
<div>
{!item.isbuy && <p className="course-price">
<span className="new">¥{item.discounts_price}</span>
<span className="old">¥{item.price}</span>
</p>
}
{item.isbuy &&
<a className="isbuy">已购买</a>
}
</div>
)
const status = (
<div>
{item.is_bargain &&
<p className='course-status'>砍价减{item.bargain_price}</p>
}
{item.is_groupon &&
<p className='course-status'>拼团价{item.groupon_price}</p>
}
</div>
)
return (
<Course
key={index}
top={top}
data={item}
bottom={bottom}
status={status}
img={item.course_img_small}
title={item.course_title}
id={item.course_id}
toDetail={toDetail}
className='text-overflow-2'
/>
)
})
}
</ul>
</LazyLoad>
</div>
)
}
if (isOdd) { //近期直播
filterList = modules.list function ScrollBox(props) {
} else { return (
filterList = modules.list[0].course_img === modules.list[0].course_img_small ? modules.list : modules.list.slice(1) <div className='scroll-box'>
} <ul className='scroll-list'>
return ( {
<div className='category'> props.livesList && props.livesList.length > 0 && props.livesList.map((item, index) => {
<h2 className="title">{modules.name}</h2> return (
{ <li key={index} className='scroll-item'
modules.show_more === 1 && onClick={e => props.liveCourse(item)}>
<Link className="more" to='/classify'>更多 ></Link> <div className='item-box'>
} {
{ item.live_status === 0 &&
modules.show_more === 2 && <span className='no-start'>即将开始</span>
<Link className="more" to={modules.more_page}>更多 ></Link> }
} {
<LazyLoad offset={50}> (item.live_status === 1 || item.live_status === 10) &&
<ul className='index-course-detail'> <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>
{/*公开课需预约、付费课不需要预约*/}
{ {
!isOdd && modules.list[0].course_img !== modules.list[0].course_img_small && (item.is_prepare || item.is_free === 0) && item.live_status === 0 &&
<div className="category-vip" onClick={() => toDetail(modules.list[0].course_id)}> <p className="item-time">时间:{item.live_start_time}</p>
{/* <Link to={`/detail?id=${modules.list[0].course_id}`}> */}
<img src={modules.list[0].course_img} alt=""/>
{/* </Link> */}
</div>
} }
{ {
filterList.map((item, index) => { !item.is_prepare && item.live_status === 0 && item.is_free === 1 &&
const top = ( <button className='item-btn'>预约</button>
<div>
{item.is_audition === true &&
<span className='audition'><i className={'iconfont iconerji'}></i>试听</span>
}
{item.is_aist &&
<span className='return_bash'></span>
}
</div>
);
const bottom = (
<div>
{!item.isbuy && <p className="course-price">
<span className="new">¥{item.discounts_price}</span>
<span className="old">¥{item.price}</span>
</p>
}
{item.isbuy &&
<a className="isbuy">已购买</a>
}
</div>
)
const status = (
<div>
{item.is_bargain &&
<p className='course-status'>砍价减{item.bargain_price}</p>
}
{item.is_groupon &&
<p className='course-status'>拼团价{item.groupon_price}</p>
}
</div>
)
return (
<Course
key={index}
top={top}
data={item}
bottom={bottom}
status={status}
img={item.course_img_small}
title={item.course_title}
id={item.course_id}
toDetail={toDetail}
className='text-overflow-2'
/>
)
})
} }
</ul> {
</LazyLoad> (item.live_status === 1 || item.live_status === 10) &&
</div> <button className='item-btn'>正在直播</button>
) }
</div>
</div>
</li>
)
})
}
</ul>
</div>
)
} }
//近期直播 //限时免费
function ScrollBox(props) { function LimitFree({courses, handleClick}) {
return ( return (
<div className='scroll-box'> <div className="courses">
<ul className='scroll-list'> <ul>
{ {
props.livesList && props.livesList.length > 0 && props.livesList.map((item, index) => { courses.map(course => {
return ( let Status
<li key={index} className='scroll-item' switch (course.status) {
onClick={e => props.liveCourse(item)}> case 1:
<div className='item-box'> Status = <span className={'free'}>免费领取</span>
{ break
item.live_status === 0 && case 2:
<span className='no-start'>即将开始</span> Status = <button>已购买</button>
} break
{ default:
(item.live_status === 1 || item.live_status === 10) && Status = <span className={'current-price'}>¥{course.price}</span>
<span className='start'>正在直播</span> }
} const Bottom = (
<img className="item-img" src={item.live_img} alt=""/> <div className={'bottom'}>
<div className="item-content"> {Status}
<h2 className="item-title">{item.live_title}</h2> <span className={'origin-price'}>¥{course.price1}</span>
<p className="item-teacher">讲师:{item.live_teacher_name}</p> <span className={'count'}>{course.count}人学过</span>
</div>
{/*公开课需预约、付费课不需要预约*/} )
{ return (
(item.is_prepare || item.is_free === 0) && item.live_status === 0 && <CourseBase
<p className="item-time">时间:{item.live_start_time}</p> img={course.img}
} title={course.title}
{ id={course.id}
!item.is_prepare && item.live_status === 0 && item.is_free === 1 && handleClick={handleClick}
<button className='item-btn'>预约</button> key={course.id}
} bottom={Bottom}
{ />
(item.live_status === 1 || item.live_status === 10) && )
<button className='item-btn'>正在直播</button> })
} }
</div> </ul>
</div> </div>
</li> )
)
})
}
</ul>
</div>
)
} }
......
#chatBtn { #chatBtn {
bottom: 60px!important; bottom: 60px !important;
} }
.index-box { .index-box {
overflow: hidden; overflow: hidden;
background-color: $bg_fff; background-color: $bg_fff;
...@@ -511,7 +512,7 @@ ...@@ -511,7 +512,7 @@
text-align: center; text-align: center;
height: 47px; height: 47px;
button,a { button, a {
width: 60px; width: 60px;
height: 27px; height: 27px;
background-color: $bg_active; background-color: $bg_active;
...@@ -524,7 +525,8 @@ ...@@ -524,7 +525,8 @@
margin-left: -30px; margin-left: -30px;
bottom: 10px; bottom: 10px;
} }
a{
a {
width: 90px; width: 90px;
line-height: 27px; line-height: 27px;
margin-left: -45px; margin-left: -45px;
...@@ -740,9 +742,89 @@ ...@@ -740,9 +742,89 @@
// //.is-visible { // //.is-visible {
// // background-image: none; // // background-image: none;
// //} // //}
.limit-free {
padding: 0 15px;
color: #333;
h2 {
display: flex;
align-items: center;
margin: 15px 0;
font-size: 15px;
}
.hot {
display: inline-block;
width: 25px;
height: 14px;
margin-left: 5px;
background: rgba(255, 64, 0, 1);
border-radius: 7px 7px 7px 0;
color: #fff;
text-align: center;
line-height: 14px;
font-size: 12px;
}
ul {
display: flex;
flex-wrap: wrap;
li {
margin-right: 15px;
margin-top: 0;
margin-bottom: 20px;
}
& li:nth-child(2n) {
margin-right: 0;
}
}
.origin-price {
color: #999;
font-size: 12px;
text-decoration: line-through;
}
.bottom {
margin-top: 5px;
span{
margin-right: 5px;
}
span:nth-child(3){
margin-right: 0;
}
}
$red: #FF2121;
.bottom span:nth-child(1), .bottom button:nth-child(1) {
margin-right: 6px;
}
.current-price, .free {
color: $red;
font-size: 15px;
}
button {
width: 61px;
height: 18px;
background: rgba(0, 153, 255, 1);
border-radius: 9px;
text-align: center;
color: #fff;
font-size: 12px;
-webkit-appearance: none;
outline: 0;
border: 0;
}
}
} }
.index-box + .nav-bar + .year19-index{ .index-box + .nav-bar + .year19-index {
display: none; display: none;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment