Skip to content

M
mr-julyedu
Commit e3abc4e2 by wangshuo
Options

Merge branch 'fanchang'

parents 7cb955ad abfa9ad1
Showing with 119 additions and 39 deletions
src/components/blessingGetPrize/index.js
......@@ -135,8 +135,9 @@ class BlessingGetPrize extends Component {
{
(!prize_data || prize_data.length === 0) && (
<div className="active_over_container">
<img src='https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/acitve__over.png' alt=''/>
<p>七月在线双十一抽奖活动已结束， 感谢你的参与！</p>
<p>AI充电节返场已开启</p>
<p>狂欢不能停~</p>
<a href='/blessingPreheat' className='to_active'>立即查看</a>
</div>
)
}
......
src/components/blessingGetPrize/index.scss
......@@ -199,22 +199,30 @@
.active_over_container {
display: flex;
flex-direction: column;
justify-content: flex-start;
justify-content: center;
align-items: center;
margin-top: 70px;
img {
width: 170px;
height: 134px;
}
width: 340px;
height: 156px;
margin: 4px auto;
background: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/active_over.png') center center no-repeat;
background-size: 100% 100%;
p {
width:238px;
height:39px;
font-size:16px;
font-weight:400;
font-size:18px;
font-weight:500;
color:rgba(76,33,239,1);
line-height:27px;
}
.to_active {
width:298px;
height:44px;
background:linear-gradient(90deg,rgba(255,105,5,1) 0%,rgba(255,180,5,1) 100%);
border-radius:5px;
font-size:18px;
font-weight:500;
color:rgba(255,255,255,1);
line-height:24px;
text-align: center;
text-align-last: center;
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
}
......
src/components/blessingPreheat/banner/index.js
......@@ -64,7 +64,7 @@ class Banner extends Component {
// } else {
// !nav.classList.contains('fixed') && nav.classList.add('fixed')
// }
// if (swipeDirection === 'up') {
// if (y + 30 + 30 >= top) {
// this.setState({
......@@ -80,7 +80,7 @@ class Banner extends Component {
// }
// this.prevY = y
// }
// }
// toSection = (i, e) => {
......@@ -97,10 +97,10 @@ class Banner extends Component {
render() {
const { toSection, navs, index, isFormal } = this.props;
const { toSection, navs, index, isFormal, onlyShow } = this.props;
return (
<div id={'main-banner'}>
<div className={`banner ${isFormal ? 'formal_banner' : ''}`}></div>
<div className={`banner ${isFormal ? 'formal_banner' : ''} ${onlyShow ? 'fc_banner' : ''}`}></div>
<nav id={'main-nav'}>
<ul>
{
......
src/components/blessingPreheat/banner/index.scss
#main-banner{
overflow: auto;
margin-bottom: 70px;
.banner{
width: 375px;
height: 183px;
......@@ -11,6 +10,10 @@
background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/formal_banner.png") no-repeat;
background-size: contain;
}
.fc_banner {
background: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/fc_banner.png') center center no-repeat;
background-size: 100% 100%;
}
#main-nav{
position: absolute;
top: 183px;
......
src/components/blessingPreheat/formal-draw/index.js
......@@ -46,9 +46,9 @@ class FormalDraw extends Component {
.then(res => {
const {data, code, msg} = res.data
if (code == 200) {
const {today} = data.value
const oneDay = data.list.filter(item => item.date === data.value.today)
const activeIndex = oneDay[0]['son'].findIndex(item => item.status == 3)
let oneDay = data.list.find(item => item.date === data.value.today) || data.list[0]
const today = oneDay.date
const activeIndex = oneDay['son'].findIndex(item => item.status == 3)
this.setState({
tabs: data.list.map(item => ({title: item.date})),
today,
......
src/components/blessingPreheat/index.js
......@@ -111,6 +111,10 @@ class BlessingPreheat extends Component {
id: 'best-courses'
},
{
text: '大咖直播',
id: 'live'
},
{
text: '幸运大抽奖',
id: 'lucky-draw'
},
......@@ -122,10 +126,6 @@ class BlessingPreheat extends Component {
text: 'AI测试',
id: 'ai-test'
},
{
text: '大咖直播',
id: 'live'
},
],
index: 0,
userHasError: props.user.hasError,
......@@ -142,9 +142,13 @@ class BlessingPreheat extends Component {
}
componentDidMount() {
const _this = this;
this.fetchUserBlessing()
this.setInitialNavActiveStatus()
window.addEventListener('scroll', throttle(this.calcNavActive, 100))
// setTimeout(function(){
// // 这里有获取ID的步骤，由于运营过多的调整，导致顺序不定，所以包含ID的title必须要放到判断中（防止出现多个title），设置定时器是因为如果返回较慢 获取不到ID导致报错
// _this.setInitialNavActiveStatus()
// }, 50);
// window.addEventListener('scroll', throttle(this.calcNavActive, 100))
if (is_weixin()) {
wxShare({
title: 'AI充电节，积福气享1折秒课，超10万元奖品来就送！！',
......@@ -260,6 +264,9 @@ class BlessingPreheat extends Component {
return findIndex(navs, item => item.id === str)
}
componentWillUnmount () {
window.removeEventListener('scroll', this.calcNavActive);
}
setInitialNavActiveStatus = () => {
const observer = new MutationObserver(debounce((list, observer) => {
......@@ -281,13 +288,22 @@ class BlessingPreheat extends Component {
if (isFormal) {
if(onlyShow) {
this.setState({
navs: encoreNavs
navs: encoreNavs
}, () => {
this.setInitialNavActiveStatus()
window.addEventListener('scroll', throttle(this.calcNavActive, 100))
})
} else {
this.setState({
navs: formalNavs
}, () => {
this.setInitialNavActiveStatus()
window.addEventListener('scroll', throttle(this.calcNavActive, 100))
})
}
}
}
......@@ -298,10 +314,18 @@ class BlessingPreheat extends Component {
fetchUserBlessing = () => {
const {userInfo} = this.state
const {history} = this.props;
http.get(`${API.home}/sys/user/blessing`).then(res => {
const {code, data} = res.data
if (code === 200) {
this.setState({
if(data.is_over) {
if(!getParam('version')) {
history.push('/');
} else {
SendMessageToApp("toQualityCourse");
}
}
this.setState(()=>({
isSign: !!data.today_signed,
isFormal: data.is_activity,
onlyShow: data.onlyShow,
......@@ -312,7 +336,7 @@ class BlessingPreheat extends Component {
buyBlessing: (data.types_total_blessing_value && data.types_total_blessing_value.buy_course) ? data.types_total_blessing_value.buy_course : 0,
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()
}
......@@ -441,14 +465,23 @@ class BlessingPreheat extends Component {
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
if(Number.isInteger(index)){
_index = (index + 1) >= navs.length ? index : index + 1
}else {
_index = 0
}
} else {
_index = (index - 1) <= 0 ? 0 : index - 1
if(Number.isInteger(index)){
_index = (index - 1) <= 0 ? 0 : index - 1
}else {
_index = 0
}
}
let el = document.querySelector(`#${navs[_index].id}`)
let nav = document.querySelector('#main-nav')
......@@ -606,13 +639,14 @@ class BlessingPreheat extends Component {
navs={navs}
toSection={this.toSection}
index={index}
onlyShow={onlyShow}
/>
{/* 精品课程特惠专区 */}
{/* 精品课程特惠专区--返场 */}
{
onlyShow && (
<>
<ListHeader id={'best-courses'} text="精品课程特惠专区" styles={{margin: '30px 0 15px'}}/>
<ListHeader id={'best-courses'} text="精品课程特惠专区" styles={{margin: '60px 0 15px'}}/>
<CourseList
isApp={isApp}
isFormal={isFormal}
......@@ -624,11 +658,21 @@ class BlessingPreheat extends Component {
)
}
{/* 大咖直播--返场 */}
{
onlyShow && <Live isFormal={isFormal} isLogin={isLogin}/>
}
{/* 抽奖--正式 */}
{
isFormal === 1 &&
<>
<ListHeader id={'lucky-draw'} text="幸运大抽奖" styles={{margin: '30px 0 10px'}}/>
<ListHeader id={'lucky-draw'} text="幸运大抽奖" styles={{margin: onlyShow ? '30px 0 10px' : '60px 0 10px'}}/>
{
onlyShow ? (
<p className='active_over'>活动已结束</p>
) : null
}
<div className="formal-draw-btns">
<button className="luck-draw__button" onClick={() => this.handleToShow('isRule')}>活动规则></button>
<button className='prize-record' onClick={this.getMyPrizeRecord}>中奖记录></button>
......@@ -640,6 +684,11 @@ class BlessingPreheat extends Component {
{/* 积福气 */}
<ListHeader id={'lucky-value'} text="积福气，享受更多福利" styles={{margin: '30px 0 15px'}}/>
{
onlyShow ? (
<p className='active_over'>活动已结束</p>
) : null
}
<Link className="blessing__sort" to="/blessingRank"></Link>
......@@ -713,7 +762,11 @@ class BlessingPreheat extends Component {
<SharePopup isClose={isClose} toClose={() => this.handleToHide('shareMark')}/>
}
<ListHeader id={'ai-test'} text="全国AI工程师水平测试" styles={{margin: '30px 0 15px'}}/>
{
onlyShow ? (
<p className='active_over'>活动已结束</p>
) : null
}
<div className="test__record" onClick={() => this.handleToShow('showRecordList', true)}>
测试记录>
</div>
......@@ -727,7 +780,11 @@ class BlessingPreheat extends Component {
<RankList></RankList>
<Live isFormal={isFormal} isLogin={isLogin}/>
{/* 大咖直播 -- 正式活动 */}
{
!onlyShow && <Live isFormal={isFormal} isLogin={isLogin}/>
}
{
addressPopupVisible &&
<div className="address-mask">
......
src/components/blessingPreheat/index.scss
#blessing-preheat {
background: #5327FA;
padding-bottom: 30px;
.active_over {
font-size: 20px;
color: #fff604;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
}
.test__record {
......
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