Skip to content

M
mr-julyedu
Commit c7f5958a by zhanghaozhe
Options

导航

parent fb47f6b6
Showing with 159 additions and 121 deletions
src/components/blessingPreheat/index.js
import React, { Component } from 'react';
import QRCode from 'qrcode';
import { http, SendMessageToApp } from '@/utils';
import { Link } from 'react-router-dom';
import { throttle, findIndex } from 'lodash';
import React, { Component } from 'react'
import QRCode from 'qrcode'
import { http, SendMessageToApp } from '@/utils'
import { Link } from 'react-router-dom'
import { throttle, findIndex, debounce } from 'lodash'
import RulePopup from './rulePopup/index'
import CoursePopup from './coursePopup/index'
import RecordPopup from './recordPopup/index'
import CourseList from './courseList/index';
import SharePopup from './sharePopup/index';
import LuckDraw from './luckDraw/index';
import CollectBlessing from './collectBlessing/index';
import ReserveCourse from './ReserveCourse/index';
import ListHeader from './listHeader/index';
import LevelTest from './levelTest/index';
import RankList from './rankList/index';
import CourseList from './courseList/index'
import SharePopup from './sharePopup/index'
import LuckDraw from './luckDraw/index'
import CollectBlessing from './collectBlessing/index'
import ReserveCourse from './ReserveCourse/index'
import ListHeader from './listHeader/index'
import LevelTest from './levelTest/index'
import RankList from './rankList/index'
import './index.scss'
import { Popup } from '@/common'
import {CopyToClipboard} from 'react-copy-to-clipboard'
import { CopyToClipboard } from 'react-copy-to-clipboard'
import { Toast } from "antd-mobile"
import Live from './live'
import Banner from './banner'
import { getParam } from '../../utils';
import { getParam } from '../../utils'
class BlessingPreheat extends Component {
constructor(props) {
super(props)
this.navTop = 183;
this.prevY = 0;
this.navTop = 183
this.prevY = 0
this.state = {
isRule: false,
isCourse: false,
......@@ -74,35 +74,69 @@ class BlessingPreheat extends Component {
}
componentDidMount() {
this.fetchUserBlessing();
window.addEventListener('scroll', throttle(this.calcNavActive, 100));
this.fetchUserBlessing()
this.setInitialNavActiveStatus()
window.addEventListener('scroll', throttle(this.calcNavActive, 100))
}
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
}
setInitialNavActiveStatus = () => {
const observer = new MutationObserver(debounce((list, observer) => {
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()
})
}
}, 30))
observer.observe(document.querySelector('#blessing-preheat'), {childList: true, subtree: true})
}
initNav = (isFormal) => {
const { navs } = this.state;
if(isFormal) {
const {navs} = this.state
if (isFormal) {
this.setState({
navs: navs.filter(item => item.id !== 'deposit')
});
})
}
}
fetchMoudleId = (str) => {
const { navs } = this.state;
return findIndex(navs, item => item.id === str);
const {navs} = this.state
return findIndex(navs, item => item.id === str)
}
fetchUserBlessing() {
// 判断登录未登录 根据this.state.userInfo.isLogin
if(getParam('version')) {
if (getParam('version')) {
// app 平台
}else{
} else {
// H5
}
const { userInfo } = this.state;
const {userInfo} = this.state
http.get(`${API.home}/sys/user/blessing`).then(res => {
const { code, data } = res.data;
if(code === 200) {
const {code, data} = res.data
if (code === 200) {
this.setState({
isSign: !!data.today_signed,
isFormal: data.is_activity,
......@@ -110,71 +144,71 @@ class BlessingPreheat extends Component {
isLogin: !!data.is_login,
blessingVal: data.user_blessing_value,
})
});
if(data.is_login === 1) {
this.handleToSign();
})
if (data.is_login === 1) {
this.handleToSign()
}
this.initNav(data.is_activity);
this.initNav(data.is_activity)
}
});
})
}
handleToSign = () => {
http.post(`${API.home}/sys/add/blessing`, {
type: 1 // 1：签到；3：分享；4：浏览课程；
}).then(res => {
const {code } = res.data;
const {code} = res.data
if (code === 200) {
this.setState({
isSign: true,
});
Toast.info('+5点福气值~', 2, null, false);
})
Toast.info('+5点福气值~', 2, null, false)
}
});
})
}
handleToHide = (key) => {
let obj = {}
obj[key] = false;
obj[key] = false
this.setState({
...obj
})
}
handleToShow = (key, isLogin = false) => {
const { userInfo } = this.state;
const {userInfo} = this.state
// 需要用户登录 并且用户未登录
if(isLogin && !userInfo.isLogin) {
this.toLogin();
}else{
let obj = {};
obj[key] = true;
if (isLogin && !userInfo.isLogin) {
this.toLogin()
} else {
let obj = {}
obj[key] = true
this.setState({
...obj
});
})
}
}
// 邀请好友注册
handleToShowInvite = () => {
const { userInfo } = this.state;
if(userInfo.isLogin) {
if(!getParam('version')) {
const {userInfo} = this.state
if (userInfo.isLogin) {
if (!getParam('version')) {
QRCode.toDataURL('http://m.julyedu.com/invite', {
width: 120,
height: 120,
margin: 1
})
.then(url => {
this.setState({
inviteUrl: url,
inviteVisible: true
});
})
.catch(err => {
console.error(err)
});
}else{
.then(url => {
this.setState({
inviteUrl: url,
inviteVisible: true
})
})
.catch(err => {
console.error(err)
})
} else {
let data = {
title: '11.11-11.13 AI充电节，预热来袭！重磅好课1折秒，超10万元奖品来就送-七月在线', // 标题
desc: '11.11-11.13 AI充电节，预热来袭！重磅好课1折秒，超10万元奖品来就送-七月在线', // 描述
......@@ -184,58 +218,58 @@ class BlessingPreheat extends Component {
SendMessageToApp("toShare", data)
}
} else {
this.toLogin();
this.toLogin()
}
}
handleToShowNotice = () => {
http.get(`${API['base-api']}/sys/activity/create_blessing_qrcode`).then(res => {
const {errno, data} = res.data;
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();
.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");
const {history} = this.props
if (!getParam('version')) {
history.push('/passport')
} else {
SendMessageToApp("toLogin")
}
}
onCopy = () => {
Toast.info('复制成功', 2,null,false)
Toast.info('复制成功', 2, null, false)
}
toSection = (i, e) => {
const { navs } = this.state;
e.preventDefault();
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 = () => {
......@@ -251,7 +285,7 @@ class BlessingPreheat extends Component {
}
let el = document.querySelector(`#${navs[_index].id}`)
let nav = document.querySelector('#main-nav')
if(el) {
if (el) {
let top = el.offsetTop
if (y <= this.navTop) {
......@@ -259,7 +293,7 @@ class BlessingPreheat extends Component {
} else {
!nav.classList.contains('fixed') && nav.classList.add('fixed')
}
if (swipeDirection === 'up') {
if (y + 30 + 30 >= top) {
this.setState({
......@@ -278,32 +312,32 @@ class BlessingPreheat extends Component {
}
render() {
const {
navs,
userInfo,
isRule,
isCourse,
inviteUrl,
inviteVisible,
isFormal,
isServer,
serverUrl,
isSign,
showRecordList,
const {
navs,
userInfo,
isRule,
isCourse,
inviteUrl,
inviteVisible,
isFormal,
isServer,
serverUrl,
isSign,
showRecordList,
shareMark,
index
} = this.state;
const {history} = this.props;
} = this.state
const {history} = this.props
return (
<div id={'blessing-preheat'}>
<Banner
isFormal={isFormal}
navs={navs}
toSection={this.toSection}
index={index}
/>
<Banner
isFormal={isFormal}
navs={navs}
toSection={this.toSection}
index={index}
/>
{/* 积福气 */}
<ListHeader id={'lucky-value'} text="积福气，享受更多福利" styles={{margin: '60px 0 15px'}} />
<ListHeader id={'lucky-value'} text="积福气，享受更多福利" styles={{margin: '60px 0 15px'}}/>
<Link className="luck-draw__button" to="/blessingRank">福气排行榜></Link>
<CollectBlessing
isSign={isSign}
......@@ -320,22 +354,22 @@ class BlessingPreheat extends Component {
/>
{/* 幸运大抽奖--预热 */}
<ListHeader id={'lucky-draw'} text="幸运大抽奖" styles={{margin: '30px 0 10px'}} />
<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 />
<LuckDraw/>
{/*定金--只在预热期间显示*/}
{
isFormal === 0 &&
<>
<ListHeader id={'deposit'} text="预付1元定金，最高可省100元" styles={{margin: '30px 0 15px'}} />
<ReserveCourse />
<ListHeader id={'deposit'} text="预付1元定金，最高可省100元" styles={{margin: '30px 0 15px'}}/>
<ReserveCourse/>
</>
}
{/* 精品课程特惠专区 */}
<ListHeader id={'best-courses'} text="精品课程特惠专区" styles={{margin: '30px 0 15px'}} />
<ListHeader id={'best-courses'} text="精品课程特惠专区" styles={{margin: '30px 0 15px'}}/>
<CourseList isFormal={isFormal} isLogin={userInfo.isLogin} toLogin={this.toLogin}/>
{
......@@ -344,7 +378,8 @@ class BlessingPreheat extends Component {
}
{
isCourse &&
<CoursePopup toLogin={this.toLogin} history={history} isLogin={userInfo.isLogin} handleToHide={() => this.handleToHide('isCourse')}/>
<CoursePopup toLogin={this.toLogin} history={history} isLogin={userInfo.isLogin}
handleToHide={() => this.handleToHide('isCourse')}/>
}
{
showRecordList &&
......@@ -352,7 +387,7 @@ class BlessingPreheat extends Component {
}
{
shareMark &&
<SharePopup />
<SharePopup/>
}
<Popup
visible={inviteVisible}
......@@ -373,8 +408,6 @@ class BlessingPreheat extends Component {
</Popup>
<Popup visible={this.state.joinLotteryVisible}
title={'你已成功参与本时段抽奖'}
className={'join-lottery'}
......@@ -383,20 +416,25 @@ class BlessingPreheat extends Component {
<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=""/>
<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>
<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"/>
<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'}} />
<ListHeader id={'ai-test'} text="全国AI工程师水平测试" styles={{margin: '30px 0 15px'}}/>
<div className="test__record" onClick={() => this.handleToShow('showRecordList', true)}>
测试记录>
</div>
......@@ -411,4 +449,4 @@ class BlessingPreheat extends Component {
}
}
export default BlessingPreheat;
export default BlessingPreheat
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