Skip to content

M
mr-julyedu
Commit 3b38178b by zhanghaozhe
Options

周年庆

parent d48ceb19
Showing with 322 additions and 311 deletions
src/components/Index/TopSwiper/index.js
...@@ -6,63 +6,66 @@ import { Link } from "react-router-dom"; ...@@ -6,63 +6,66 @@ import { Link } from "react-router-dom";
class Index extends Component { class Index extends Component {
container = null container = null
swiper = null swiper = null
componentDidMount() { componentDidMount() {
this.swiper = new Swiper('.swiper-container', { if (this.props.bannerList.length > 1) {
direction: 'horizontal', this.swiper = new Swiper('.swiper-container', {
loop: true, direction: 'horizontal',
spaceBetween: 12, loop: true,
centeredSlides: true, spaceBetween: 12,
slidesPerView: 'auto', centeredSlides: true,
loopedSlides: 3, slidesPerView: 'auto',
autoplay: true loopedSlides: 3,
}) autoplay: true,
})
} }
}
componentWillUnmount() { componentWillUnmount() {
this.swiper.destroy() this.swiper.destroy()
} }
render() { render() {
const {bannerList} = this.props const {bannerList} = this.props
return ( return (
<div className={'index-banner-swiper'}> <div className={'index-banner-swiper'}>
<div className={'swiper-container'} ref={el => this.container = el}> <div className={'swiper-container'} ref={el => this.container = el}>
<ul className="swiper-wrapper"> <ul className="swiper-wrapper">
{bannerList && bannerList.length > 0 && bannerList.map((item, index) => { {
return ( bannerList && bannerList.length > 0 && bannerList.map((item, index) => {
<li className={'swiper-slide'} key={index}> return (
{ <li className={'swiper-slide'} key={index}>
Number.isNaN(parseInt(item.jump_url)) ? {
<a href={item.jump_url} key={index}> Number.isNaN(parseInt(item.jump_url)) ?
<img className="item" src={item.name} alt=""/> <a href={item.jump_url} key={index}>
</a> : <img className="item" src={item.name} alt=""/>
<Link </a> :
to={{ <Link
pathname: '/detail', to={{
search: `?id=${item.jump_url}` pathname: '/detail',
}} search: `?id=${item.jump_url}`,
key={index} }}
> key={index}
<img >
className="item" <img
src={item.name} className="item"
alt="" src={item.name}
/> alt=""
</Link> />
} </Link>
</li> }
) </li>
}) )
} })
</ul> }
</div> </ul>
</div> </div>
); </div>
} );
}
} }
export default Index; export default Index;
\ No newline at end of file
src/components/Index/index.js
import React, {Component} from 'react' import React, { Component } from 'react'
import {CallApp} from '../../common' import { 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 HomeCourseList from './course-list' import HomeCourseList from './course-list'
import {http, isValidUrl} from '@/utils' import { http, isValidUrl } 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 AllCourseNavigation from "./all-course" import AllCourseNavigation from "./all-course"
import {UserGift} from "@common" import { UserGift } from "@common"
// 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: '',
isShowUserGift: false, isShowUserGift: false,
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',
}, },
], ],
}
} }
}
componentDidMount() { componentDidMount() {
this.getIndexData() this.getIndexData()
this.userStatus() this.userStatus()
} }
componentWillMount(){
this.showUserGiftFun()
}
userStatus =()=>{
http.get(`${API['base-api']}/sys/user/new_user_status`).then((res) => {
const {errno, data} = res.data
if (errno === 0) {
if (data.status == 1) {
// 新用户登录之后判断是否是新用户
this.setState({
isShowUserGift: false
})
Toast.info('新人大礼包已领取成功！', 2)
} else {
this.setState({
isShowUserGift: false
})
}
}
})
}
showUserGiftFun = () => { componentWillMount() {
let newer_last_time = localStorage.getItem('newer_last_time') // 获取用户关闭大礼包的时间 this.showUserGiftFun()
let now_time = (new Date()).valueOf() }
if (!newer_last_time || now_time - newer_last_time > 86400000) {
this.setState({ userStatus = () => {
isShowUserGift: true http.get(`${API['base-api']}/sys/user/new_user_status`).then((res) => {
}) const {errno, data} = res.data
if (errno === 0) {
if (data.status == 1) {
// 新用户登录之后判断是否是新用户
this.setState({
isShowUserGift: false,
})
Toast.info('新人大礼包已领取成功！', 2)
} else { } else {
this.setState({ this.setState({
isShowUserGift: false isShowUserGift: false,
}) })
} }
} }
close = () => { })
this.setState({ }
isShowUserGift: false
})
let now_time = (new Date()).valueOf() // 获取当前时间
localStorage.setItem('newer_last_time', now_time) // 存储关闭时间
}
get_newerModal = ()=>{ showUserGiftFun = () => {
this.close() let newer_last_time = localStorage.getItem('newer_last_time') // 获取用户关闭大礼包的时间
this.props.history.push('/passport/login') let now_time = (new Date()).valueOf()
if (!newer_last_time || now_time - newer_last_time > 86400000) {
this.setState({
isShowUserGift: true,
})
} else {
this.setState({
isShowUserGift: false,
})
} }
}
close = () => {
this.setState({
isShowUserGift: false,
})
let now_time = (new Date()).valueOf() // 获取当前时间
localStorage.setItem('newer_last_time', now_time) // 存储关闭时间
}
// 首页课程 get_newerModal = () => {
getIndexData = () => { this.close()
http.get(`${API.home}/m/home`).then((res) => { this.props.history.push('/passport/login')
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)
}
// 首页课程
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.slice(0, 1),
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() { liveCourse = (item) => {
this.props.history.push('/search') 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})
}
render() { // 点击头部搜索跳转到搜索页面
return ( toSearch() {
<div className='index-box'> this.props.history.push('/search')
<div className='header'> }
<img
className="logo" render() {
src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/img/index/logo.png" return (
alt="" <div className='index-box'>
/> <div className='header'>
{/* <CallApp <img
className="logo"
src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/img/index/logo.png"
alt=""
/>
{/* <CallApp
className='to-app' className='to-app'
text='在APP打开' text='在APP打开'
/>*/} />*/}
<div className="right"> <div className="right">
<Link to={'/intelligent-recommend'}> <Link to={'/intelligent-recommend'}>
<span className={'intelligent-recommend-entry'}> <span className={'intelligent-recommend-entry'}>
<i className={'mind-icon'}></i> <i className={'mind-icon'}></i>
智能选课 智能选课
</span> </span>
</Link> </Link>
<i <i
className='iconfont iconiconfront- search' className='iconfont iconiconfront- search'
onClick={this.toSearch.bind(this)} onClick={this.toSearch.bind(this)}
/> />
</div> </div>
</div> </div>
<div className='zw_height'></div> <div className='zw_height'></div>
{/*支付尾款提示*/} {/*支付尾款提示*/}
{/*<ExpandActiveToast/>*/} {/*<ExpandActiveToast/>*/}
<div className='index-swiper'>
{
this.state.banner && this.state.banner.length > 0 &&
<TopSwiper bannerList={this.state.banner}/>
}
</div>
<div className='index-swiper'> <div className="tabbox">
<ul>
{
this.state.tabdata.map((item, index) => {
return (
<li key={index}>
{ {
this.state.banner && this.state.banner.length > 0 && isValidUrl(item.href)
<TopSwiper bannerList={this.state.banner}/> ? <a href={item.href}>
<img src={item.src} alt=""/>
<span>{item.name}</span>
</a>
: <Link to={item.href}>
<img src={item.src} alt=""/>
<span>{item.name}</span>
</Link>
} }
</div>
<div className="tabbox">
<ul>
{
this.state.tabdata.map((item, index) => {
return (
<li key={index}>
{
isValidUrl(item.href)
? <a href={item.href}>
<img src={item.src} alt=""/>
<span>{item.name}</span>
</a>
: <Link to={item.href}>
<img src={item.src} alt=""/>
<span>{item.name}</span>
</Link>
}
</li> </li>
) )
}) })
} }
</ul> </ul>
</div> </div>
<p className="borderTop"/> <p className="borderTop"/>
{ {
(this.state.lives && this.state.lives.length > 0) ? (this.state.lives && this.state.lives.length > 0) ?
<div className='lives'> <div className='lives'>
<h2 className="title">近期直播</h2> <h2 className="title">近期直播</h2>
<ScrollBox <ScrollBox
livesList={this.state.lives} livesList={this.state.lives}
liveCourse={this.liveCourse} liveCourse={this.liveCourse}
/> />
</div> : null </div> : null
} }
<HomeCourseList <HomeCourseList
modules={this.state.modules} modules={this.state.modules}
/> />
<AllCourseNavigation/> <AllCourseNavigation/>
{/* 直播间预约 */} {/* 直播间预约 */}
{ {
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}
/> />
} }
{ {
this.state.isShowUserGift && this.state.isShowUserGift &&
<UserGift close={this.close} get_newerModal={this.get_newerModal}/> <UserGift close={this.close} get_newerModal={this.get_newerModal}/>
} }
</div> </div>
) )
} }
} }
//近期直播 //近期直播
function ScrollBox(props) { function ScrollBox(props) {
return ( return (
<div className='scroll-box'> <div className='scroll-box'>
<ul className='scroll-list'> <ul className='scroll-list'>
{ {
props.livesList && props.livesList.length > 0 && props.livesList.map((item, index) => { props.livesList && props.livesList.length > 0 && props.livesList.map((item, index) => {
return ( return (
<li key={index} className='scroll-item' <li key={index} className='scroll-item'
onClick={e => props.liveCourse(item)}> onClick={e => props.liveCourse(item)}>
<div className='item-box'> <div className='item-box'>
{ {
item.live_status === 0 && item.live_status === 0 &&
<span className='no-start'>即将开始</span> <span className='no-start'>即将开始</span>
} }
{ {
(item.live_status === 1 || item.live_status === 10) && (item.live_status === 1 || item.live_status === 10) &&
<span className='start'>正在直播</span> <span className='start'>正在直播</span>
} }
<img className="item-img" src={item.live_img} alt=""/> <img className="item-img" src={item.live_img} alt=""/>
<div className="item-content"> <div className="item-content">
<h2 className="item-title">{item.live_title}</h2> <h2 className="item-title">{item.live_title}</h2>
<p className="item-teacher">讲师：{item.live_teacher_name}</p> <p className="item-teacher">讲师：{item.live_teacher_name}</p>
{/*公开课需预约、付费课不需要预约*/} {/*公开课需预约、付费课不需要预约*/}
{ {
(item.is_prepare || item.is_free === 0) && item.live_status === 0 && (item.is_prepare || item.is_free === 0) && item.live_status === 0 &&
<p className="item-time">时间：{item.live_start_time}</p> <p className="item-time">时间：{item.live_start_time}</p>
} }
{ {
!item.is_prepare && item.live_status === 0 && item.is_free === 1 && !item.is_prepare && item.live_status === 0 && item.is_free === 1 &&
<button className='item-btn'>预约</button> <button className='item-btn'>预约</button>
} }
{ {
(item.live_status === 1 || item.live_status === 10) && (item.live_status === 1 || item.live_status === 10) &&
<button className='item-btn'>正在直播</button> <button className='item-btn'>正在直播</button>
} }
</div> </div>
</div> </div>
</li> </li>
) )
}) })
} }
</ul> </ul>
</div> </div>
) )
} }
export default WithTab(Index) export default WithTab(Index)
src/components/activity/2020-717/activity/index.js
...@@ -1002,7 +1002,7 @@ class Anniversary2020 extends Component { ...@@ -1002,7 +1002,7 @@ class Anniversary2020 extends Component {
</table> </table>
} }
{ {
!!_rankList.length && !isShowAllRankList && <div className="btn"> !!_rankList.length && _rankList.length === 10 && !isShowAllRankList && <div className="btn">
<button onClick={() => { <button onClick={() => {
this.setState({ this.setState({
isShowAllRankList: true, isShowAllRankList: true,
......
src/components/activity/2020-717/question/index.scss
...@@ -123,11 +123,16 @@ ...@@ -123,11 +123,16 @@
ul { ul {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap;
} }
li { li {
width: 160px; width: 160px;
height: 115px; height: 115px;
&:nth-child(odd){
margin-bottom: 20px;
}
} }
img { img {
......
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