Skip to content

M
mr-julyedu
Commit 505ddb4a by FE
Options

banner complete

parent 517626f0
Showing with 136 additions and 25 deletions
src/components/activity/newyear-2019/common/commonContainer/index.js
......@@ -6,8 +6,9 @@ export default class CommonContainer extends Component {
super(props)
}
render() {
const { id } = this.props;
return (
<div className='common_container'>
<div className='common_container' id={id}>
<div className='container_top'></div>
<div className='container_content'>
{
......
src/components/activity/newyear-2019/preheat/LiveRoom/index.js
......@@ -120,7 +120,7 @@ class LiveRoom extends Component {
)
}
<CommonContainer title='大咖直播'>
<CommonContainer title='大咖直播' id="year-live">
<ul className='live__list'>
{
list.length && (
......
src/components/activity/newyear-2019/preheat/YearCourse/index.js
......@@ -209,8 +209,8 @@ class YarnCourse extends Component {
const {bigcourse, freecourse, groupcourse, basic, advanced, higher, expand} = this.state
return (
<div>
<CommonContainer title='重磅好课'>
<>
<CommonContainer title='重磅好课' id="year-course">
<div>
{
(bigcourse.course && bigcourse.course.length > 0) &&
......@@ -246,7 +246,7 @@ class YarnCourse extends Component {
}
</div>
</CommonContainer>
<CommonContainer title='人气好课免费学'>
<CommonContainer title='人气好课免费学' id="year-free">
<div>
{
(freecourse.course && freecourse.course.length > 0) &&
......@@ -284,7 +284,7 @@ class YarnCourse extends Component {
}
</div>
</CommonContainer>
<CommonContainer title='精品好课1分开抢'>
<CommonContainer title='精品好课1分开抢' id="year-group">
<div>
{
(groupcourse.course && groupcourse.course.length > 0) &&
......@@ -355,7 +355,7 @@ class YarnCourse extends Component {
}
</div>
</CommonContainer>
<CommonContainer title='好课价到，等你抄底'>
<CommonContainer title='好课价到，等你抄底' id="year-discount">
<div>
<h4 className="ai-course__subtitle">基础</h4>
{
......@@ -722,7 +722,7 @@ class YarnCourse extends Component {
}
</div>
</CommonContainer>
</div>
</>
)
}
}
......
src/components/activity/newyear-2019/preheat/index.js
......@@ -9,7 +9,8 @@ import CommonPopup from './../common/commonPopup/index'
export default class index extends Component {
state = {
showMark: false
showMark: false,
banner: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/m_banner_bj%402x.png'
}
// 关闭弹框
......@@ -20,12 +21,23 @@ export default class index extends Component {
}
render() {
const { banner } = this.state;
return (
<div className={'year-index'}>
<TreasureNav></TreasureNav>
<LiveRoom/>
<YearCourse/>
<TreasureBox></TreasureBox>
<div className="banner-treasure">
<div id="banner" className="banner-treasure__header" style={{backgroundImage: `url(${banner})`}}></div>
<div className="banner-treasure__nav">
<TreasureNav id="banner" />
</div>
<div className="banner-treasure__decorate"></div>
</div>
{/* 大咖直播 */}
<LiveRoom />
{/* 组队开宝箱 */}
<TreasureBox />
<YearCourse />
{/*好友加入队伍提醒；获得宝箱提醒；开售提醒弹窗，需要自取，注意修改文案*/}
{
this.state.showMark &&
......@@ -56,7 +68,6 @@ export default class index extends Component {
</div>
</CommonPopup>
}
</div>
)
}
......
src/components/activity/newyear-2019/preheat/index.scss
......@@ -2,6 +2,26 @@
padding-bottom: 30px;
background-color: #BC2A18;
.banner-treasure {
}
.banner-treasure__header {
height: 320px;
background-size: cover;
background-position: center;
}
.banner-treasure__nav {
height: 30px;
}
.banner-treasure__decorate {
height: 35px;
background-size: cover;
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/m_nv_bj%402x.png');
}
.sub__code_container {
padding: 20px 30px;
text-align: center;
......
src/components/activity/newyear-2019/preheat/nav.js
import React, { Component } from 'react';
import classnames from 'classnames';
import { http } from '@/utils';
import './nav.scss';
class TreasureNav extends Component {
constructor(props) {
super(props);
this.state = {
isFixed: false,
curIndex: 1,
formatNavs: [],
navs: [
{
id: 'year-live',
name: '大咖直播'
},
{
id: 'year-treasure',
name: '组队开宝箱'
},
......@@ -26,22 +33,89 @@ class TreasureNav extends Component {
},
{
id: 'year-discount',
name: '一折起购专区'
name: '一折专区'
},
]
};
}
componentDidMount() {
this.initNav();
window.addEventListener('scroll', this.calcNavActive)
}
componentWillUnmount () {
window.removeEventListener('scroll', this.calcNavActive);
}
initNav = () => {
const { navs } = this.state;
http.get(`${API.home}/activity/stage`).then(res => {
const { code, data } = res.data;
if(code === 200) {
// treasure_stage，宝箱阶段，0-不在活动时间，1-活动时间内
if(data.treasure_stage === 0) {
this.setState({
formatNavs: navs.filter(item => item.id !== 'year-treasure')
});
}else {
this.setState({
formatNavs: navs
})
}
}
});
}
calcNavActive = () => {
const { formatNavs } = this.state;
const { id } = this.props;
const bannerEl = document.querySelector(`#${id}`);
setTimeout(() => {
let y = window.scrollY,
len = formatNavs.length - 1;
this.setState({
isFixed: y >= bannerEl.offsetHeight
});
for (; len > -1; len--) {
let el = document.querySelector(`#${formatNavs[len].id}`);
if (el && (y + 200) >= el.offsetTop) {
this.setState({
curIndex: len
})
break;
}
}
}, 100);
}
selectToNav = (i) => {
const { formatNavs } = this.state;
const id = `#${formatNavs[i]['id']}`;
let el = document.querySelector(id);
if(el) {
this.setState({
curIndex: i
});
window.scrollTo({
top: el.offsetTop,
left: 0
});
}
}
render() {
const { curIndex, navs } = this.state;
const { isFixed, curIndex, formatNavs } = this.state;
return (
<div className="treasure-nav" data-skip="nav">
<div className={classnames("treasure-nav", {'fixed': isFixed})} data-skip="nav">
{
navs.map((item, index) => (
formatNavs.map((item, index) => (
<a
href=""
className={classnames("treasure-nav__item",{'active': index === curIndex})}
href={`#${item.id}`}
className={classnames("treasure-nav__item", {'active': index === curIndex})}
key={item.id}
onClick={() => this.selectToNav(index)}
>{item.name}</a>
))
}
......
src/components/activity/newyear-2019/preheat/nav.scss
......@@ -7,6 +7,13 @@
height: 30px;
background-color: #357345;
}
&.fixed {
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
}
[data-skip="nav"] {
......
src/components/activity/newyear-2019/treasure-box/index.js
......@@ -5,11 +5,9 @@ import TreasureRank from './rank';
class TreasureBox extends Component {
render() {
return (
<div>
<CommonContainer>
<TreasureRank />
</CommonContainer>
</div>
<CommonContainer id="year-treasure">
<TreasureRank />
</CommonContainer>
)
}
}
......
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