Skip to content

M
mr-julyedu
Commit ca4b6e1d by FE
Options

to choice course

parent 1060de5f
Showing with 233 additions and 116 deletions
src/components/blessingPreheat/banner/index.js
import React, { Component } from 'react'
import './index.scss'
import { throttle } from 'lodash'
import React, { Component } from 'react';
import './index.scss';
class Banner extends Component {
navTop = 183
prevY = 0
state = {
navs: [
{
text: '积福气',
id: 'lucky-value'
},
{
text: '幸运大抽奖',
id: 'lucky-draw'
},
{
text: '预付定金',
id: 'deposit'
},
{
text: '精品特惠',
id: 'best-courses'
},
{
text: 'AI测试',
id: 'ai-test'
},
{
text: '大咖直播',
id: 'live'
},
],
index: 0,
}
componentDidMount() {
window.addEventListener('scroll', throttle(this.calcNavActive, 100))
}
componentWillUnmount() {
}
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}`)
let nav = document.querySelector('#main-nav')
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
}
toSection = (i, e) => {
e.preventDefault()
let top = document.querySelector(`#${this.state.navs[i].id}`).offsetTop
this.setState({
index: i
})
window.scrollTo({
top: top - 60,
left: 0
})
}
render() {
const {navs, index} = this.state
const { toSection, navs, index } = this.props;
return (
<div id={'main-banner'}>
<div className="banner"></div>
......@@ -105,9 +13,7 @@ class Banner extends Component {
navs.map((item, i) => {
return (
<li key={i} className={index === i ? 'active' : ''}>
<a href={`#${item.id}`} onClick={(e) => {
this.toSection(i, e)
}}>{item.text}</a>
<a href={`#${item.id}`} onClick={(e) => toSection(i, e)}>{item.text}</a>
</li>
)
})
......
src/components/blessingPreheat/banner/index.scss
......@@ -9,7 +9,9 @@
#main-nav{
position: absolute;
top: 183px;
width: 100%;
margin-bottom:30px;
&.fixed{
position: fixed;
top: 0;
......@@ -20,6 +22,7 @@
display: flex;
}
li{
flex: 1;
width: 63px;
height: 30px;
font-size: 11px;
......
src/components/blessingPreheat/collectBlessing/index.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { http } from '@/utils';
import { Toast } from "antd-mobile";
import ListFrame from './../listFrame/index';
import ListHeader from './../listHeader';
import './index.scss';
@connect(({user})=> ({
uid: user.data.uid || ''
}))
class CollectBlessing extends Component {
constructor(props) {
......@@ -45,20 +51,83 @@ class CollectBlessing extends Component {
]
}
],
seconds: 10,
};
}
qqToShare = () => {
const { uid, history } = this.props;
if(!uid) {
history.push('/passport');
}else {
this.fetchUserBlessing(3, () => {
this.handleToAddBlessing(3);
});
}
}
wechatToShare = () => {
const { uid, history } = this.props;
if(!uid) {
history.push('/passport');
}else {
this.fetchUserBlessing(1, () => {
this.handleToAddBlessing(1);
});
}
}
fetchUserBlessing(key, cb) {
const { handleToShowShare, handleToHideShare } = this.props;
let { seconds } = this.state;
http.get(`${API.home}/sys/user/blessing`).then(res => {
const { code, data } = res.data;
if(code === 200) {
if(data.today_shared_platforms.some(item => item === key)) {
Toast.info('今日已分享，记得明天来~', 2, null, false);
}else {
handleToShowShare();
this.shareTimer = setInterval(() => {
this.setState(
{
seconds: (--seconds)
},
() => {
if (seconds === 0) {
typeof cb === 'function' && cb();
handleToHideShare();
clearInterval(this.shareTimer);
}
}
);
}, 1000);
}
}
});
}
handleToAddBlessing = (key) => {
http.post(`${API.home}/sys/add/blessing`, {
share_platform: key, // 1 朋友圈 2 微博 3 qq
type: 3 // 1：签到；3：分享；4：浏览课程；
}).then(res => {
const {code } = res.data;
if (code === 200) {
Toast.info('+2点福气值~', 2, null, false);
}
});
}
render() {
console.log(this.props);
const {
isSign,
userInfo: { isLogin = false, blessingVal = 0 },
handleToShowNotice,
handleToShowList,
handleToShowInvite,
handleToShow
toSection
} = this.props;
const { rules, welfareRuleList } = this.state;
const { rules, welfareRuleList, seconds } = this.state;
return (
<div className="collect-blessing">
{
......@@ -125,11 +194,19 @@ class CollectBlessing extends Component {
}
{
index === 2 &&
<div className="collect-blessing__content" data-layout="column" onClick={()=>{handleToShow('shareMark')}}>
<div className="collect-blessing__content" data-layout="column">
<p className="collect-blessing__label">去分享</p>
<div className="collect-blessing__share">
<a className="collect-blessing__share-button" data-type="qq"></a>
<a className="collect-blessing__share-button" data-type="wechat"></a>
<a
className="collect-blessing__share-button"
data-type="qq"
onClick={this.qqToShare}
></a>
<a
className="collect-blessing__share-button"
data-type="wechat"
onClick={this.wechatToShare}
></a>
</div>
</div>
}
......@@ -147,7 +224,9 @@ class CollectBlessing extends Component {
}
{
index === 5 &&
<a className="collect-blessing__content">去选课</a>
<a
className="collect-blessing__content"
onClick={toSection}>去选课</a>
}
</div>
))
......
src/components/blessingPreheat/index.js
import React, { Component } from 'react';
import QRCode from 'qrcode';
import { http } from '@/utils';
import { Link } from 'react-router-dom';
import { throttle, findIndex } from 'lodash';
import RulePopup from './rulePopup/index'
import CoursePopup from './coursePopup/index'
import RecordPopup from './recordPopup/index'
......@@ -21,8 +23,11 @@ import Banner from './banner'
class BlessingPreheat extends Component {
constructor(props) {
super(props)
this.navTop = 183;
this.prevY = 0;
this.state = {
isRule: false,
isCourse: false,
......@@ -37,11 +42,53 @@ class BlessingPreheat extends Component {
shareMark: false,
userInfo: {},
isSign: false,
navs: [
{
text: '积福气',
id: 'lucky-value'
},
{
text: '幸运大抽奖',
id: 'lucky-draw'
},
{
text: '预付定金',
id: 'deposit'
},
{
text: '精品特惠',
id: 'best-courses'
},
{
text: 'AI测试',
id: 'ai-test'
},
{
text: '大咖直播',
id: 'live'
},
],
index: 0,
}
}
componentDidMount() {
this.fetchUserBlessing();
window.addEventListener('scroll', throttle(this.calcNavActive, 100));
}
initNav = (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);
}
fetchUserBlessing() {
......@@ -60,12 +107,12 @@ class BlessingPreheat extends Component {
if(data.is_login === 1) {
this.handleToSign();
}
this.initNav(data.is_activity);
}
});
}
handleToSign = () => {
console.log(2,2);
http.post(`${API.home}/sys/add/blessing`, {
type: 1 // 1：签到；3：分享；4：浏览课程；
}).then(res => {
......@@ -145,20 +192,94 @@ class BlessingPreheat extends Component {
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}`)
let nav = document.querySelector('#main-nav')
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
}
render() {
const { userInfo, isRule, isCourse, inviteUrl, inviteVisible, isFormal, isServer, serverUrl, isSign, showRecordList, shareMark} = this.state
const {
navs,
userInfo,
isRule,
isCourse,
inviteUrl,
inviteVisible,
isFormal,
isServer,
serverUrl,
isSign,
showRecordList,
shareMark,
index
} = this.state;
return (
<div id={'blessing-preheat'}>
<Banner/>
<Banner
isFormal={isFormal}
navs={navs}
toSection={this.toSection}
index={index}
/>
{/* 积福气 */}
<ListHeader id={'lucky-value'} text="积福气，享受更多福利" styles={{margin: '0 0 15px'}} />
<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}
handleToShowShare={() => this.handleToShow('shareMark')}
handleToHideShare={() => this.handleToHide('shareMark')}
/>
{/* 幸运大抽奖--预热 */}
......@@ -194,7 +315,7 @@ class BlessingPreheat extends Component {
}
{
shareMark &&
<SharePopup handleToHide={() => this.handleToHide('shareMark')}/>
<SharePopup />
}
<Popup
visible={inviteVisible}
......
src/components/blessingPreheat/index.scss
......@@ -142,6 +142,10 @@
box-sizing: border-box;
font-size: 13px;
color: #FFF604;
text-align: center;
line-height: 24px;
background-color: transparent;
cursor: pointer;
outline: none;
}
src/components/blessingPreheat/rankList/index.js
......@@ -13,7 +13,6 @@ export default class RankList extends Component {
componentDidMount() {
http.get(`${API.home}/sys/ai_test/ranking/10`).then(res => {
console.log(res);
let data = res.data.data;
let code = res.data.code;
if(code === 200) {
......
src/components/blessingPreheat/sharePopup/index.js
import React, { Component } from 'react'
import React, { Component } from 'react';
import { browser } from '@/utils';
import './index.scss'
export default class SharePopup extends Component {
render() {
return (
<div className="share__container" onClick={this.props.handleToHide}>
<div className="share__row">
<img src='https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/throw_icon.png' />
</div>
<div className="share__container">
{
!browser.isWeixin &&
<div className="share__row">
<img src='https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/throw_icon.png' />
</div>
}
<div className="share__content">
<p className="share__text">分享活动页到朋友圈、qq分别</p>
<div className='share__rule'>
......
src/components/blessingPreheat/sharePopup/index.scss
......@@ -7,6 +7,7 @@
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .6);
z-index: 999;
.share__row {
width: 60px;
......
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