导航

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