Skip to content

M
mr-julyedu
Commit 571a92e6 by xuzhenghua
Options

BUG

parents 6e055ead 412d2753
Showing with 493 additions and 483 deletions
src/components/blessingPreheat/collectBlessing/index.js
...@@ -177,7 +177,8 @@ class CollectBlessing extends Component { ...@@ -177,7 +177,8 @@ class CollectBlessing extends Component {
render() { render() {
const { const {
isSign, isSign,
userInfo: { isLogin = false, blessingVal = 0, buyBlessing = 0, inviteBlessing = 0 }, userInfo: {blessingVal = 0, buyBlessing = 0, inviteBlessing = 0 },
isLogin,
handleToShowNotice, handleToShowNotice,
handleToShowList, handleToShowList,
handleToShowInvite, handleToShowInvite,
......
src/components/blessingPreheat/courseItem/index.js
...@@ -3,11 +3,11 @@ import './index.scss'; ...@@ -3,11 +3,11 @@ import './index.scss';
class CourseItem extends Component { class CourseItem extends Component {
render() { render() {
const { image } = this.props; const { image,toCourse,id} = this.props;
return ( return (
<div className="course-container"> <div className="course-container">
<div className="course__cover"> <div className="course__cover">
<img src={image} alt="cover"/> <img src={image} alt="cover" onClick={() => toCourse(id)}/>
</div> </div>
{this.props.children} {this.props.children}
</div> </div>
......
src/components/blessingPreheat/courseItem/index.scss
...@@ -15,5 +15,6 @@ ...@@ -15,5 +15,6 @@
img { img {
display: block; display: block;
width: 100%; width: 100%;
height: 100%;
} }
} }
\ No newline at end of file
src/components/blessingPreheat/courseList/index.js
...@@ -259,7 +259,7 @@ class CourseList extends Component { ...@@ -259,7 +259,7 @@ class CourseList extends Component {
}else{ }else{
toLogin(); toLogin();
} }
} }
...@@ -298,7 +298,7 @@ class CourseList extends Component { ...@@ -298,7 +298,7 @@ class CourseList extends Component {
<div data-layout="row"> <div data-layout="row">
{ {
group.course.map(item => ( group.course.map(item => (
<CourseItem image={item.image_name} key={item.course_id}> <CourseItem image={item.image_name} key={item.course_id} id={item.course_id} toCourse={this.toCourse}>
<div className="coupon-course__footer"> <div className="coupon-course__footer">
<a onClick={() => this.toQQque()} className="course-button">立抢超低团购价</a> <a onClick={() => this.toQQque()} className="course-button">立抢超低团购价</a>
</div> </div>
...@@ -323,7 +323,7 @@ class CourseList extends Component { ...@@ -323,7 +323,7 @@ class CourseList extends Component {
<div data-layout="row"> <div data-layout="row">
{ {
training.course.map(item => ( training.course.map(item => (
<CourseItem image={item.image_name} key={item.course_id}> <CourseItem image={item.image_name} key={item.course_id} id={item.course_id} toCourse={this.toCourse}>
<div className="coupon-course__footer"> <div className="coupon-course__footer">
{ {
item.course_status === 1 && item.course_status === 1 &&
...@@ -391,7 +391,7 @@ class CourseList extends Component { ...@@ -391,7 +391,7 @@ class CourseList extends Component {
<div data-layout="row"> <div data-layout="row">
{ {
basic.course.map(item => ( basic.course.map(item => (
<CourseItem image={item.image_name} key={item.course_id}> <CourseItem image={item.image_name} key={item.course_id} id={item.course_id} toCourse={this.toCourse}>
{ {
item.type === 0 && item.type === 0 &&
<div className="coupon-course__footer"> <div className="coupon-course__footer">
...@@ -472,7 +472,7 @@ class CourseList extends Component { ...@@ -472,7 +472,7 @@ class CourseList extends Component {
<div data-layout="row"> <div data-layout="row">
{ {
advanced.course.map(item => ( advanced.course.map(item => (
<CourseItem image={item.image_name} key={item.course_id}> <CourseItem image={item.image_name} key={item.course_id} id={item.course_id} toCourse={this.toCourse}>
{ {
item.type === 0 && item.type === 0 &&
<div className="coupon-course__footer"> <div className="coupon-course__footer">
...@@ -552,7 +552,7 @@ class CourseList extends Component { ...@@ -552,7 +552,7 @@ class CourseList extends Component {
<div data-layout="row"> <div data-layout="row">
{ {
higher.course.map(item => ( higher.course.map(item => (
<CourseItem image={item.image_name} key={item.course_id}> <CourseItem image={item.image_name} key={item.course_id} id={item.course_id} toCourse={this.toCourse}>
{ {
item.type === 0 && item.type === 0 &&
<div className="coupon-course__footer"> <div className="coupon-course__footer">
...@@ -632,7 +632,7 @@ class CourseList extends Component { ...@@ -632,7 +632,7 @@ class CourseList extends Component {
<div data-layout="row"> <div data-layout="row">
{ {
expand.course.map(item => ( expand.course.map(item => (
<CourseItem image={item.image_name} key={item.course_id}> <CourseItem image={item.image_name} key={item.course_id} id={item.course_id} toCourse={this.toCourse}>
{ {
item.type === 0 && item.type === 0 &&
<div className="coupon-course__footer"> <div className="coupon-course__footer">
......
src/components/blessingPreheat/courseList/index.scss
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
padding: 10px 0; padding: 10px 0;
.course-button { .course-button {
margin: 5px auto 0; //margin: 5px auto 0;
} }
} }
...@@ -42,7 +42,8 @@ ...@@ -42,7 +42,8 @@
text-align: center; text-align: center;
line-height: 1; line-height: 1;
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/coupon-bg-0.png'); background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/coupon-bg-0.png');
background-repeat: no-repeat;
background-size: cover;
} }
.coupon-course__button--receive { .coupon-course__button--receive {
......
src/components/blessingPreheat/index.js
import React, { Component } from 'react' import React, {Component} from 'react'
import QRCode from 'qrcode' import QRCode from 'qrcode'
import { http, SendMessageToApp,wxShare,is_weixin,getParam} from '@/utils'; import {http, SendMessageToApp, wxShare, is_weixin, getParam} from '@/utils';
import { Link } from 'react-router-dom' import {Link} from 'react-router-dom'
import { throttle, findIndex, debounce } from 'lodash' import {throttle, findIndex, debounce} from 'lodash'
import RulePopup from './rulePopup/index' import RulePopup from './rulePopup/index'
import CoursePopup from './coursePopup/index' import CoursePopup from './coursePopup/index'
import RecordPopup from './recordPopup/index' import RecordPopup from './recordPopup/index'
...@@ -15,9 +15,9 @@ import ListHeader from './listHeader/index' ...@@ -15,9 +15,9 @@ import ListHeader from './listHeader/index'
import LevelTest from './levelTest/index' import LevelTest from './levelTest/index'
import RankList from './rankList/index' import RankList from './rankList/index'
import './index.scss' import './index.scss'
import { Popup } from '@/common' import {Popup} from '@/common'
import { CopyToClipboard } from 'react-copy-to-clipboard' import {CopyToClipboard} from 'react-copy-to-clipboard'
import { Toast } from "antd-mobile" import {Toast} from "antd-mobile"
import Live from './live' import Live from './live'
import Banner from './banner' import Banner from './banner'
import cookie from "js-cookie"; import cookie from "js-cookie";
...@@ -27,496 +27,502 @@ import {compose} from "redux"; ...@@ -27,496 +27,502 @@ import {compose} from "redux";
import {connect} from "react-redux"; import {connect} from "react-redux";
class BlessingPreheat extends Component { class BlessingPreheat extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.navTop = 183 this.navTop = 183
this.prevY = 0 this.prevY = 0
this.state = { this.state = {
userInfoList: [], isLogin: false,
isRule: false, userInfoList: [],
isCourse: false, isRule: false,
inviteUrl: '', isCourse: false,
inviteVisible: false, inviteUrl: '',
joinLotteryVisible: false, inviteVisible: false,
timelineShareVisible: false, joinLotteryVisible: false,
showRecordList: false, timelineShareVisible: false,
isFormal: false, // 1正式 0 预热 showRecordList: false,
isServer: false, isFormal: false, // 1正式 0 预热
serverUrl: '', isServer: false,
shareMark: false, serverUrl: '',
userInfo: {}, shareMark: false,
isSign: false, userInfo: {},
navs: [ isSign: false,
{ navs: [
text: '积福气', {
id: 'lucky-value' text: '积福气',
}, id: 'lucky-value'
{ },
text: '幸运大抽奖', {
id: 'lucky-draw' text: '幸运大抽奖',
}, id: 'lucky-draw'
{ },
text: '预付定金', {
id: 'deposit' text: '预付定金',
}, id: 'deposit'
{ },
text: '精品特惠', {
id: 'best-courses' text: '精品特惠',
}, id: 'best-courses'
{ },
text: 'AI测试', {
id: 'ai-test' text: 'AI测试',
}, id: 'ai-test'
{ },
text: '大咖直播', {
id: 'live' text: '大咖直播',
}, id: 'live'
], },
index: 0, ],
} index: 0,
} userHasError: props.user.hasError
}
componentDidMount() {
this.fetchUserBlessing();
this.setInitialNavActiveStatus()
window.addEventListener('scroll', throttle(this.calcNavActive, 100));
if(is_weixin()) {
wxShare({
title: 'AI充电节，积福气享1折秒课，超10万元奖品来就送！！',
desc: '把这门超5万人报名的【Python基础入门 升级版】课程送给你，附200元红包，请笑纳！--七月在线',
link: window.location.href,
imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/index-share-img.png',
})
} }
// 获取App登录信息 componentDidMount() {
window['loginInfo'] = result => { this.fetchUserBlessing();
this.loginInfo(result) this.setInitialNavActiveStatus()
} window.addEventListener('scroll', throttle(this.calcNavActive, 100));
} if (is_weixin()) {
wxShare({
// 获取app登录数据 title: 'AI充电节，积福气享1折秒课，超10万元奖品来就送！！',
loginInfo = (result) => { desc: '把这门超5万人报名的【Python基础入门 升级版】课程送给你，附200元红包，请笑纳！--七月在线',
this.setState({ link: window.location.href,
userInfoList: result imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/index-share-img.png',
}) })
if (this.state.userInfoList.length !== 0) { }
this.props.startFetchUser()
this.appLogin() // 获取App登录信息
window['loginInfo'] = result => {
this.loginInfo(result)
}
} }
}
// 保存cookie componentDidUpdate(prevProps, prevState){
appLogin = () => { let {user} = this.props
let expires = addDays(new Date(), 90) if (this.props.user.hasError !== this.state.userHasError) {
this.state.userInfoList.map((item, index) => { const uid = user && user.data && user.data.uid;
Toast.info(item.version, 3) this.setState({
cookie.set("token", item.token, {expires, path: '/', domain: 'julyedu.com'}); isLogin: !uid ? false : true,
cookie.set("plat", item.plat, {expires, path: '/', domain: 'julyedu.com'}); userHasError: user.hasError
cookie.set("uid", item.uid, {expires, path: '/', domain: 'julyedu.com'}); })
cookie.set("uname", item.uname, {expires, path: '/', domain: 'julyedu.com'});
cookie.set("avatar_file", item.avatar_file, {expires, path: '/', domain: 'julyedu.com'});
});
this.props.setCurrentUser(this.transformUser(this.state.userInfoList))
}
transformUser = res => {
let payload
res.map((item, index) => {
payload = {
hasError: false,
data: {
username: item.uname,
avatar: item.avatar_file,
token: item.token,
uid: item.uid
},
isFetching: false
}
})
return payload
}
getActiveIndex = (arr, n) => {
for (let i = 0, len = arr.length; i < len; i++) {
if (arr[i] > n) {
if (!i) {
return i
} else {
if (Math.abs(n - arr[i]) < Math.abs(n - arr[i - 1])) {
return i
} else {
return i - 1
}
} }
}
} }
return arr.length - 1
} // 获取app登录数据
loginInfo = (result) => {
setInitialNavActiveStatus = () => { this.setState({
const observer = new MutationObserver(debounce((list, observer) => { userInfoList: result
const navs = this.state.navs.map(item => document.querySelector(`#${item.id}`))
if (navs.every(item => item)) {
const navsTop = navs.map(item => item.offsetTop)
const index = this.getActiveIndex(navsTop, window.pageYOffset)
this.setState({index, navsTop}, () => {
this.calcNavActive()
observer.disconnect()
}) })
} if (this.state.userInfoList.length !== 0) {
}, 30)) this.props.startFetchUser()
observer.observe(document.querySelector('#blessing-preheat'), {childList: true, subtree: true}) this.appLogin()
} }
initNav = (isFormal) => {
const {navs} = this.state
if (isFormal) {
this.setState({
navs: navs.filter(item => item.id !== 'deposit')
})
} }
} // 保存cookie
appLogin = () => {
fetchMoudleId = (str) => { let expires = addDays(new Date(), 90)
const {navs} = this.state this.state.userInfoList.map((item, index) => {
return findIndex(navs, item => item.id === str) Toast.info(item.version, 3)
} cookie.set("token", item.token, {expires, path: '/', domain: 'julyedu.com'});
cookie.set("plat", item.plat, {expires, path: '/', domain: 'julyedu.com'});
fetchUserBlessing() { cookie.set("uid", item.uid, {expires, path: '/', domain: 'julyedu.com'});
// 判断登录未登录 根据this.state.userInfo.isLogin cookie.set("uname", item.uname, {expires, path: '/', domain: 'julyedu.com'});
if(getParam('version')) { cookie.set("avatar_file", item.avatar_file, {expires, path: '/', domain: 'julyedu.com'});
// app 平台 });
}else{ this.props.setCurrentUser(this.transformUser(this.state.userInfoList))
// H5
} }
const { userInfo } = this.state; transformUser = res => {
const {user, history} = this.props; let payload
const uid = user && user.data && user.data.uid;
http.get(`${API.home}/sys/user/blessing`).then(res => { res.map((item, index) => {
const {code, data} = res.data payload = {
if (code === 200) { hasError: false,
this.setState({ data: {
isSign: !!data.today_signed, username: item.uname,
isFormal: data.is_activity, avatar: item.avatar_file,
userInfo: Object.assign({}, userInfo, { token: item.token,
isLogin: !!uid, uid: item.uid
blessingVal: data.user_blessing_value, },
buyBlessing: (data.types_total_blessing_value &&data.types_total_blessing_value.buy_course)? data.types_total_blessing_value.buy_course : 0, isFetching: false
inviteBlessing: (data.types_total_blessing_value &&data.types_total_blessing_value.invite)? data.types_total_blessing_value.invite : 0, }
})
}) })
if (data.is_login === 1) {
this.handleToSign() return payload
}
getActiveIndex = (arr, n) => {
for (let i = 0, len = arr.length; i < len; i++) {
if (arr[i] > n) {
if (!i) {
return i
} else {
if (Math.abs(n - arr[i]) < Math.abs(n - arr[i - 1])) {
return i
} else {
return i - 1
}
}
}
} }
this.initNav(data.is_activity) return arr.length - 1
}
})
}
handleToSign = () => {
http.post(`${API.home}/sys/add/blessing`, {
type: 1 // 1：签到；3：分享；4：浏览课程；
}).then(res => {
const {code} = res.data
if (code === 200) {
this.setState({
isSign: true,
})
Toast.info('+5点福气值~', 2, null, false)
}
})
}
handleToHide = (key) => {
let obj = {}
obj[key] = false
this.setState({
...obj
})
}
handleToShow = (key, isLogin = false) => {
const {userInfo} = this.state
// 需要用户登录 并且用户未登录
if (isLogin && !userInfo.isLogin) {
this.toLogin()
} else {
let obj = {}
obj[key] = true
this.setState({
...obj
})
} }
}
setInitialNavActiveStatus = () => {
// 邀请好友注册 const observer = new MutationObserver(debounce((list, observer) => {
handleToShowInvite = () => { const navs = this.state.navs.map(item => document.querySelector(`#${item.id}`))
const { userInfo } = this.state; if (navs.every(item => item)) {
if(userInfo.isLogin) { const navsTop = navs.map(item => item.offsetTop)
if(!getParam('version')) { const index = this.getActiveIndex(navsTop, window.pageYOffset)
QRCode.toDataURL(`${API.m}/invite`, { this.setState({index, navsTop}, () => {
width: 120, this.calcNavActive()
height: 120, observer.disconnect()
margin: 1 })
}) }
.then(url => { }, 30))
observer.observe(document.querySelector('#blessing-preheat'), {childList: true, subtree: true})
}
initNav = (isFormal) => {
const {navs} = this.state
if (isFormal) {
this.setState({ this.setState({
inviteUrl: url, navs: navs.filter(item => item.id !== 'deposit')
inviteVisible: true
}) })
})
.catch(err => {
console.error(err)
})
} else {
let data = {
title: 'AI充电节，积福气享1折秒课，超10万元奖品来就送！！',
desc: '把这门超5万人报名的【Python基础入门 升级版】课程送给你，附200元红包，请笑纳！--七月在线',
link: 'https://m.julyedu.com/blessingPreheat',
imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/index-share-img.png',
} }
SendMessageToApp("toShare", data)
}
} else {
this.toLogin();
} }
}
fetchMoudleId = (str) => {
handleToShowNotice = () => { const {navs} = this.state
http.get(`${API['base-api']}/sys/activity/create_blessing_qrcode`).then(res => { return findIndex(navs, item => item.id === str)
const {errno, data} = res.data
if (errno === 200) {
QRCode.toDataURL(data.url, {
width: 120,
height: 120,
margin: 1
}).then(url => {
this.setState({
isServer: true,
serverUrl: url,
})
})
.catch(err => {
console.error(err)
})
} else if (errno === 4030 || errno === 4040) {
this.toLogin()
}
})
}
toLogin = () => {
const {history} = this.props
if (!getParam('version')) {
history.push('/passport')
} else {
SendMessageToApp("toLogin")
} }
}
fetchUserBlessing() {
onCopy = () => { // 判断登录未登录 根据this.state.isLogin
Toast.info('复制成功', 2, null, false) const {userInfo} = this.state;
} http.get(`${API.home}/sys/user/blessing`).then(res => {
const {code, data} = res.data
toSection = (i, e) => { if (code === 200) {
const {navs} = this.state this.setState({
e.preventDefault() isSign: !!data.today_signed,
let top = document.querySelector(`#${navs[i].id}`).offsetTop isFormal: data.is_activity,
this.setState({ userInfo: Object.assign({}, userInfo, {
index: i blessingVal: data.user_blessing_value,
}) buyBlessing: (data.types_total_blessing_value && data.types_total_blessing_value.buy_course) ? data.types_total_blessing_value.buy_course : 0,
window.scrollTo({ inviteBlessing: (data.types_total_blessing_value && data.types_total_blessing_value.invite) ? data.types_total_blessing_value.invite : 0,
top: top - 60, })
left: 0 })
}) if (data.is_login === 1) {
} this.handleToSign()
}
calcNavActive = () => { this.initNav(data.is_activity)
const {navs, index} = this.state }
const y = window.scrollY })
let swipeDirection = y > this.prevY ? 'up' : 'down'
let _index
if (swipeDirection === 'up') {
_index = (index + 1) >= navs.length ? index : index + 1
} else {
_index = (index - 1) <= 0 ? 0 : index - 1
} }
let el = document.querySelector(`#${navs[_index].id}`)
let nav = document.querySelector('#main-nav') handleToSign = () => {
if(el) { http.post(`${API.home}/sys/add/blessing`, {
type: 1 // 1：签到；3：分享；4：浏览课程；
let top = el.offsetTop }).then(res => {
const {code} = res.data
if (y <= this.navTop) { if (code === 200) {
nav.classList.remove('fixed') this.setState({
} else { isSign: true,
!nav.classList.contains('fixed') && nav.classList.add('fixed') })
} Toast.info('+5点福气值~', 2, null, false)
}
if (swipeDirection === 'up') { })
if (y + 30 + 30 >= top) {
this.setState({
index: _index
})
}
} else {
if (y + 30 + 20 <= top) {
this.setState({
index: _index
})
}
}
this.prevY = y
} }
}
handleToHide = (key) => {
render() { let obj = {}
const { obj[key] = false
navs, this.setState({
userInfo, ...obj
isRule, })
isCourse, }
inviteUrl,
inviteVisible, handleToShow = (key, isLogin = false) => {
isFormal, // 需要用户登录 并且用户未登录
isServer, if (isLogin && !this.state.isLogin) {
serverUrl, this.toLogin()
isSign, } else {
showRecordList, let obj = {}
shareMark, obj[key] = true
index this.setState({
} = this.state; ...obj
const {history} = this.props; })
return (
<div id={'blessing-preheat'}>
<Banner
isFormal={isFormal}
navs={navs}
toSection={this.toSection}
index={index}
/>
{/* 积福气 */}
<ListHeader id={'lucky-value'} text="积福气，享受更多福利" styles={{margin: '60px 0 15px'}}/>
<Link className="luck-draw__button" to="/blessingRank">福气排行榜></Link>
<CollectBlessing
isSign={isSign}
userInfo={userInfo}
history={this.props.history}
toSection={(e) => this.toSection(this.fetchMoudleId('best-courses'), e)}
handleToShowList={() => this.handleToShow('isCourse')}
handleToShowInvite={this.handleToShowInvite}
handleToShowNotice={this.handleToShowNotice}
handleToShow={this.handleToShow}
toLogin={this.toLogin}
handleToShowShare={() => this.handleToShow('shareMark')}
handleToHideShare={() => this.handleToHide('shareMark')}
/>
{/* 幸运大抽奖--预热 */}
<ListHeader id={'lucky-draw'} text="幸运大抽奖" styles={{margin: '30px 0 10px'}}/>
<p className="luck-draw__tip">- 将于11月11日10点开启 -</p>
<button className="luck-draw__button" onClick={() => this.handleToShow('isRule')}>活动规则></button>
<LuckDraw/>
{/*定金--只在预热期间显示*/}
{
isFormal === 0 &&
<>
<ListHeader id={'deposit'} text="预付1元定金，最高可省100元" styles={{margin: '30px 0 15px'}}/>
<ReserveCourse/>
</>
} }
}
{/* 精品课程特惠专区 */} // 邀请好友注册
<ListHeader id={'best-courses'} text="精品课程特惠专区" styles={{margin: '30px 0 15px'}}/> handleToShowInvite = () => {
<CourseList const {isLogin} = this.state;
isFormal={isFormal} if (isLogin) {
isLogin={userInfo.isLogin} if (!getParam('version')) {
history={this.props.history} QRCode.toDataURL(`${API.m}/invite`, {
toLogin={this.toLogin} width: 120,
/> height: 120,
margin: 1
{ })
isRule && .then(url => {
<RulePopup handleToHide={() => this.handleToHide('isRule')}/> this.setState({
inviteUrl: url,
inviteVisible: true
})
})
.catch(err => {
console.error(err)
})
} else {
let data = {
title: 'AI充电节，积福气享1折秒课，超10万元奖品来就送！！',
desc: '把这门超5万人报名的【Python基础入门 升级版】课程送给你，附200元红包，请笑纳！--七月在线',
link: 'https://m.julyedu.com/blessingPreheat',
imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/index-share-img.png',
}
SendMessageToApp("toShare", data)
}
} else {
this.toLogin();
} }
{ }
isCourse &&
<CoursePopup toLogin={this.toLogin} history={history} isLogin={userInfo.isLogin} handleToHide={() => this.handleToHide('isCourse')}/> handleToShowNotice = () => {
http.get(`${API['base-api']}/sys/activity/create_blessing_qrcode`).then(res => {
const {errno, data} = res.data
if (errno === 200) {
QRCode.toDataURL(data.url, {
width: 120,
height: 120,
margin: 1
}).then(url => {
this.setState({
isServer: true,
serverUrl: url,
})
})
.catch(err => {
console.error(err)
})
} else if (errno === 4030 || errno === 4040) {
this.toLogin()
}
})
}
toLogin = () => {
const {history} = this.props
if (!getParam('version')) {
history.push('/passport')
} else {
SendMessageToApp("toLogin")
} }
{ }
showRecordList &&
<RecordPopup handleToHide={() => this.handleToHide('showRecordList')}/> onCopy = () => {
Toast.info('复制成功', 2, null, false)
}
toSection = (i, e) => {
const {navs} = this.state
e.preventDefault()
let top = document.querySelector(`#${navs[i].id}`).offsetTop
this.setState({
index: i
})
window.scrollTo({
top: top - 60,
left: 0
})
}
calcNavActive = () => {
const {navs, index} = this.state
const y = window.scrollY
let swipeDirection = y > this.prevY ? 'up' : 'down'
let _index
if (swipeDirection === 'up') {
_index = (index + 1) >= navs.length ? index : index + 1
} else {
_index = (index - 1) <= 0 ? 0 : index - 1
} }
{ let el = document.querySelector(`#${navs[_index].id}`)
shareMark && let nav = document.querySelector('#main-nav')
<SharePopup/> if (el) {
let top = el.offsetTop
if (y <= this.navTop) {
nav.classList.remove('fixed')
} else {
!nav.classList.contains('fixed') && nav.classList.add('fixed')
}
if (swipeDirection === 'up') {
if (y + 30 + 30 >= top) {
this.setState({
index: _index
})
}
} else {
if (y + 30 + 20 <= top) {
this.setState({
index: _index
})
}
}
this.prevY = y
} }
<Popup }
visible={inviteVisible}
title={'扫码邀请好友注册+10点福气值'} render() {
className={'invite-popup'} const {
> navs,
<img src={inviteUrl} alt="barcode" className="qr-code"/> userInfo,
<CopyToClipboard text={`${API.m}/invite"`} onCopy={this.onCopy}> isLogin,
<button>一键复制网址</button> isRule,
</CopyToClipboard> isCourse,
</Popup> inviteUrl,
<Popup inviteVisible,
visible={isServer} isFormal,
title="扫码关注“七月在线”服务号" isServer,
className={'invite-popup'} serverUrl,
> isSign,
<img src={serverUrl} alt="barcode" className="qr-code"/> showRecordList,
</Popup> shareMark,
index
<Popup visible={this.state.joinLotteryVisible} } = this.state;
title={'你已成功参与本时段抽奖'} const {history} = this.props;
className={'join-lottery'} return (
> <div id={'blessing-preheat'}>
<div className="text"> <Banner
<div className="code">抽奖码为：99999999</div> isFormal={isFormal}
<div className="time">本时段的中奖结果将在xx:xx公布</div> navs={navs}
<div className="hint">你可关注‘七月在线’服务号第一时间获得中奖信息。</div> toSection={this.toSection}
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_weixin.png" index={index}
className='qr-code' alt=""/> />
</div>
{/* 积福气 */}
<button onClick={() => { <ListHeader id={'lucky-value'} text="积福气，享受更多福利" styles={{margin: '60px 0 15px'}}/>
this.setState({joinLottery: false}) <Link className="luck-draw__button" to="/blessingRank">福气排行榜></Link>
}}>知道了 <CollectBlessing
</button> isSign={isSign}
</Popup> userInfo={userInfo}
<Popup title={'微信扫码分享到微信朋友圈'} isLogin={isLogin}
visible={this.state.timelineShareVisible} history={this.props.history}
className={'timeline-share'} toSection={(e) => this.toSection(this.fetchMoudleId('best-courses'), e)}
> handleToShowList={() => this.handleToShow('isCourse')}
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_weixin.png" alt="" handleToShowInvite={this.handleToShowInvite}
className="qr-code"/> handleToShowNotice={this.handleToShowNotice}
</Popup> handleToShow={this.handleToShow}
toLogin={this.toLogin}
handleToShowShare={() => this.handleToShow('shareMark')}
<ListHeader id={'ai-test'} text="全国AI工程师水平测试" styles={{margin: '30px 0 15px'}} /> handleToHideShare={() => this.handleToHide('shareMark')}
/>
<div className="test__record" onClick={() => this.handleToShow('showRecordList', true)}>
测试记录> {/* 幸运大抽奖--预热 */}
</div> <ListHeader id={'lucky-draw'} text="幸运大抽奖" styles={{margin: '30px 0 10px'}}/>
<LevelTest history={history} isLogin={userInfo.isLogin} toLogin={this.toLogin}></LevelTest> <p className="luck-draw__tip">- 将于11月11日10点开启 -</p>
<button className="luck-draw__button" onClick={() => this.handleToShow('isRule')}>活动规则></button>
<LuckDraw/>
<RankList></RankList>
{/*定金--只在预热期间显示*/}
<Live isFormal={isFormal}></Live> {
</div> isFormal === 0 &&
) <>
} <ListHeader id={'deposit'} text="预付1元定金，最高可省100元" styles={{margin: '30px 0 15px'}}/>
<ReserveCourse/>
</>
}
{/* 精品课程特惠专区 */}
<ListHeader id={'best-courses'} text="精品课程特惠专区" styles={{margin: '30px 0 15px'}}/>
<CourseList
isFormal={isFormal}
isLogin={isLogin}
history={this.props.history}
toLogin={this.toLogin}
/>
{
isRule &&
<RulePopup handleToHide={() => this.handleToHide('isRule')}/>
}
{
isCourse &&
<CoursePopup toLogin={this.toLogin} history={history} isLogin={isLogin}
handleToHide={() => this.handleToHide('isCourse')}/>
}
{
showRecordList &&
<RecordPopup handleToHide={() => this.handleToHide('showRecordList')}/>
}
{
shareMark &&
<SharePopup/>
}
<Popup
visible={inviteVisible}
title={'扫码邀请好友注册+10点福气值'}
className={'invite-popup'}
>
<img src={inviteUrl} alt="barcode" className="qr-code"/>
<CopyToClipboard text={`${API.m}/invite"`} onCopy={this.onCopy}>
<button>一键复制网址</button>
</CopyToClipboard>
</Popup>
<Popup
visible={isServer}
title="扫码关注“七月在线”服务号"
className={'invite-popup'}
>
<img src={serverUrl} alt="barcode" className="qr-code"/>
</Popup>
<Popup visible={this.state.joinLotteryVisible}
title={'你已成功参与本时段抽奖'}
className={'join-lottery'}
>
<div className="text">
<div className="code">抽奖码为：99999999</div>
<div className="time">本时段的中奖结果将在xx:xx公布</div>
<div className="hint">你可关注‘七月在线’服务号第一时间获得中奖信息。</div>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_weixin.png"
className='qr-code' alt=""/>
</div>
<button onClick={() => {
this.setState({joinLottery: false})
}}>知道了
</button>
</Popup>
<Popup title={'微信扫码分享到微信朋友圈'}
visible={this.state.timelineShareVisible}
className={'timeline-share'}
>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_weixin.png" alt=""
className="qr-code"/>
</Popup>
<ListHeader id={'ai-test'} text="全国AI工程师水平测试" styles={{margin: '30px 0 15px'}}/>
<div className="test__record" onClick={() => this.handleToShow('showRecordList', true)}>
测试记录>
</div>
<LevelTest history={history} isLogin={isLogin} toLogin={this.toLogin}></LevelTest>
<RankList></RankList>
<Live isFormal={isFormal}></Live>
</div>
)
}
} }
export default compose( export default compose(
......
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