banner complete

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>
     )
   }
 }