Skip to content

M
mr-julyedu
Commit eeaf420a by zhanghaozhe
Options

限时免费首页页面

parent 4be7157c
Showing with 493 additions and 312 deletions
src/components/Index/index.js
import React, { Component } from 'react'
import { Course, CallApp } from '../../common'
import React, {Component} from 'react'
import {Course, CallApp} from '../../common'
import './index.scss'
import { WithTab } from '@/HOCs'
import {WithTab} from '@/HOCs'
// import Swiper from 'react-mobile-swiper'
// import createStyle from './createStyle'
import LazyLoad from 'react-lazy-load'
import { http } from '@/utils'
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 {Link} from "react-router-dom"
import {Toast} from 'antd-mobile'
import {connect} from "react-redux";
import TopSwiper from './TopSwiper'
import ExpandActiveToast from './expandActiveToast'
import CourseBase from '@/common/course-base'
// const animateTypes = Swiper.animateTypes
@connect(state => ({
user: state.user
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'
}
]
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'
}
],
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>
// 点击近期直播课程弹出预约提示框
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')
}
<ExpandActiveToast/>
toCourseDetail = (id) => {
const {dispatch, history} = this.props;
// dispatch(getCourses(id, () => {
history.push(`/detail?id=${id}`);
return false;
// }));
}
<div className='index-swiper'>
{
this.state.banner && this.state.banner.length > 0 &&
<TopSwiper bannerList={this.state.banner}/>
}
</div>
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="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>
<div className='zw_height'></div>
<p className="borderTop"/>
<ExpandActiveToast/>
{
<div className='index-swiper'>
{
this.state.banner && this.state.banner.length > 0 &&
<TopSwiper bannerList={this.state.banner}/>
}
</div>
(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
}
<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>
{
limitFree && limitFree.length &&
<div className="limit-free">
<h2 className="limit-free-title">
限时免费
<span className={'hot'}>hot</span>
</h2>
<LimitFree courses={limitFree}
handleClick={this.handleLimitFreeClick}
/>
</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"/>
</div>
)
}) : null
}
{
(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
}
{
(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>
<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}
getIndexData={this.getIndexData}
/>
}
</div>
)
}
{/* 直播间预约 */}
{
this.state.islive &&
<LiveRoom
isShow={this.state.isShow}
colseBox={this.colseBox}
roomMess={this.state.roomMess}
getIndexData={this.getIndexData}
/>
}
</div>
)
}
}
......@@ -257,140 +314,182 @@ class Index extends Component {
// 课程模块儿公共组件
// 课程数量是奇数第一个课程需要横着展示沾满一行，课程数量是偶数一行显示两个
function CourseList({modules, toDetail}) {
let isOdd = modules.list.length % 2 === 0
// 数量为奇数时，第一个课程显示大图（如后台未上传，前台显示小图），课程数量为偶数时，均显示小图
let filterList = ''
let isOdd = modules.list.length % 2 === 0
// 数量为奇数时，第一个课程显示大图（如后台未上传，前台显示小图），课程数量为偶数时，均显示小图
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
} 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'>
//近期直播
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>
{/*公开课需预约、付费课不需要预约*/}
{
!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>
(item.is_prepare || item.is_free === 0) && item.live_status === 0 &&
<p className="item-time">时间：{item.live_start_time}</p>
}
{
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'
/>
)
})
!item.is_prepare && item.live_status === 0 && item.is_free === 1 &&
<button className='item-btn'>预约</button>
}
</ul>
</LazyLoad>
</div>
)
{
(item.live_status === 1 || item.live_status === 10) &&
<button className='item-btn'>正在直播</button>
}
</div>
</div>
</li>
)
})
}
</ul>
</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>
)
//限时免费
function LimitFree({courses, handleClick}) {
return (
<div className="courses">
<ul>
{
courses.map(course => {
let Status
switch (course.status) {
case 1:
Status = <span className={'free'}>免费领取</span>
break
case 2:
Status = <button>已购买</button>
break
default:
Status = <span className={'current-price'}>¥{course.price}</span>
}
const Bottom = (
<div className={'bottom'}>
{Status}
<span className={'origin-price'}>¥{course.price1}</span>
<span className={'count'}>{course.count}人学过</span>
</div>
)
return (
<CourseBase
img={course.img}
title={course.title}
id={course.id}
handleClick={handleClick}
key={course.id}
bottom={Bottom}
/>
)
})
}
</ul>
</div>
)
}
......
src/components/Index/index.scss
#chatBtn {
bottom: 60px!important;
bottom: 60px !important;
}
.index-box {
overflow: hidden;
background-color: $bg_fff;
......@@ -511,7 +512,7 @@
text-align: center;
height: 47px;
button,a {
button, a {
width: 60px;
height: 27px;
background-color: $bg_active;
......@@ -524,7 +525,8 @@
margin-left: -30px;
bottom: 10px;
}
a{
a {
width: 90px;
line-height: 27px;
margin-left: -45px;
......@@ -740,9 +742,89 @@
// //.is-visible {
// // 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;
}
......
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