Skip to content

M
mr-julyedu
Commit 69ac4857 by xuzhenghua
Options

新用户大礼包

parent 8b94577e
Showing with 381 additions and 210 deletions
src/common/UserGift/index.js 0 → 100755
import React, {Component} from 'react'
import './index.scss'
import {http} from '@/utils'
class UserGift extends Component {
state = {
user_gift: ''
}
componentDidMount() {
http.get(`${API['base-api']}/web/home/popup`).then((res) => {
const {errno, data} = res.data
if (errno === 200) {
this.setState({
user_gift: data.new_user_gift.prize_img
})
}
})
}
get_newerModal = () => {
this.props.history.push('/passport/login')
}
close = () => {
this.props.close()
}
render() {
const {user_gift} = this.state
return (
<div className={'user-gift-popup'}>
<div className={'user-gift-bgimg'}>
<img onClick={this.get_newerModal} src={user_gift} alt=""/>
<img className={'close_gift_box'}
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/close_icon.png"
onClick={this.close} alt=""/>
</div>
</div>
)
}
}
export default UserGift
\ No newline at end of file
src/common/UserGift/index.scss 0 → 100755
.user-gift-popup {
background: rgba(0, 0, 0, .3);
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 100;
.user-gift-bgimg {
position: relative;
top: 50%;
margin-top: -200px;
.close_gift_box {
position: absolute;
left: 50%;
margin-left: -13px;
width: 26px;
height: 26px;
bottom: -45px;
}
}
}
\ No newline at end of file
src/common/index.js
......@@ -11,5 +11,6 @@ export { default as Loading } from './Loading'
export { default as RenderTabBar } from './renderTabBar'
export { default as Popup } from './closable-popup'
export { default as WxLogin } from './WxLogin'
export { default as UserGift } from './UserGift'
src/components/Index/index.js
import React, { Component } from 'react'
import { CallApp } from '../../common'
import React, {Component} from 'react'
import {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 HomeCourseList from './course-list'
import { http, isValidUrl } from '@/utils'
import {http, isValidUrl} 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 AllCourseNavigation from "./all-course"
import {UserGift} from "@common"
// 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: '',
isShowUserGift: false,
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()
}
componentDidMount() {
this.getIndexData()
this.showUserGiftFun()
this.userStatus()
}
// 首页课程
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,
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: true
})
} else {
// 老用户
this.setState({
isShowUserGift: false
})
}
}
})
} else {
Toast.info(res.data.msg, 2)
}
}
})
}
showUserGiftFun = () => {
let newer_last_time = localStorage.getItem('newer_last_time') // 获取用户关闭大礼包的时间
let now_time = (new Date()).valueOf()
console.log(newer_last_time)
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) // 存储关闭时间
}
// 首页课程
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
// 点击近期直播课程弹出预约提示框
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打开'
/>*/}
<div className="right">
<Link to={'/intelligent-recommend'}>
<div className="right">
<Link to={'/intelligent-recommend'}>
<span className={'intelligent-recommend-entry'}>
<i className={'mind-icon'}></i>
智能选课
</span>
</Link>
<i
className='iconfont iconiconfront- search'
onClick={this.toSearch.bind(this)}
/>
</div>
</div>
</Link>
<i
className='iconfont iconiconfront- search'
onClick={this.toSearch.bind(this)}
/>
</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="tabbox">
<ul>
{
this.state.tabdata.map((item, index) => {
return (
<li key={index}>
<div className='index-swiper'>
{
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>
this.state.banner && this.state.banner.length > 0 &&
<TopSwiper bannerList={this.state.banner}/>
}
</div>
</li>
)
})
}
</ul>
</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>
)
})
}
</ul>
</div>
<p className="borderTop"/>
<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
}
(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}
/>
<HomeCourseList
modules={this.state.modules}
/>
<AllCourseNavigation/>
<AllCourseNavigation/>
{/* 直播间预约 */}
{
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}
/>
}
{
this.state.isShowUserGift &&
<UserGift close={this.close} history={this.props.history}/>
}
</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>
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>
)
{/*公开课需预约、付费课不需要预约*/}
{
(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);
export default WithTab(Index)
src/components/detail/index.js
......@@ -20,6 +20,7 @@ import { delCountryNum } from './../country/countryRedux';
import { Popup } from "@common/index"
import RedPacket from './redPacket';
import ExpandActiveToast from "../Index/expandActiveToast";
import {UserGift} from "@common"
class Detail extends Component {
......@@ -50,12 +51,16 @@ class Detail extends Component {
isRedPacket: true,
countDownTime: '20s',
isShowChannel: window.sessionStorage.getItem('isShowSiteWindowByChannel')
isShowChannel: window.sessionStorage.getItem('isShowSiteWindowByChannel'),
isShowUserGift:false
}
}
componentDidMount() {
this.fetchCourseInfo();
this.showUserGiftFun();
this.userStatus();
const {location: {state = {}}} = this.props;
if (state.oid) {
this.check(state.oid);
......@@ -81,6 +86,47 @@ class Detail extends Component {
}
}
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: true
})
} else {
// 老用户
this.setState({
isShowUserGift: false
})
}
}
})
}
showUserGiftFun = () => {
let newer_last_time = localStorage.getItem('newer_last_time') // 获取用户关闭大礼包的时间
let now_time = (new Date()).valueOf()
console.log(newer_last_time)
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) // 存储关闭时间
}
getBorwerCourse = () => {
http.get(`${API.home}/sys/user/blessing`, {type: 4, course_id: getParam('id')}).then(res => {
let {code, data: {today_browsed_courses}} = res.data;
......@@ -822,6 +868,11 @@ class Detail extends Component {
) : null
}
</div>
{
this.state.isShowUserGift &&
<UserGift close={this.close} history={this.props.history}/>
}
</div>
)
}
......
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