Merge branch 'banner' into 11-11

src/components/blessingPreheat/banner/index.js

+import React, { Component } from 'react'
+import './index.scss'
+import { throttle } from 'lodash'
+
+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
+    return (
+      <div id={'main-banner'}>
+        <div className="banner"></div>
+        <nav id={'main-nav'}>
+          <ul>
+            {
+              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>
+                  </li>
+                )
+              })
+            }
+          </ul>
+        </nav>
+      </div>
+    )
+  }
+}
+
+export default Banner

src/components/blessingPreheat/banner/index.scss

+#main-banner{
+    overflow: auto;
+    .banner{
+        width: 375px;
+        height: 183px;
+        background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/banner.png") no-repeat;
+        background-size: contain;
+    }
+    #main-nav{
+        position: absolute;
+        top: 183px;
+        margin-bottom:30px;
+        &.fixed{
+            position: fixed;
+            top: 0;
+            z-index: 100;
+        }
+        ul{
+            background: #3900C9;
+            display: flex;
+        }
+        li{
+            width: 63px;
+            height: 30px;
+            font-size: 11px;
+            color: #fff;
+            text-align: center;
+            line-height: 30px;
+            &.active{
+                background: #FF42F9;
+            }
+        }
+    }
+}

src/components/blessingPreheat/index.js

@@ -17,6 +17,7 @@ import { Popup } from '@/common'
 import {CopyToClipboard} from 'react-copy-to-clipboard'
 import { Toast } from "antd-mobile"
 import Live from './live'
+import Banner from './banner'
 
 
 class BlessingPreheat extends Component {
@@ -147,6 +148,7 @@ class BlessingPreheat extends Component {
     const { userInfo, isRule, isCourse, inviteUrl, inviteVisible, isFormal, isServer, serverUrl, isSign, showRecordList, shareMark} = this.state
     return (
       <div id={'blessing-preheat'}>
+        <Banner/>
         {/* 积福气 */}
         <ListHeader id={'lucky-value'} text="积福气，享受更多福利" styles={{margin: '0 0 15px'}} />
         <CollectBlessing