合并

src/components/blessingPreheat/banner/index.js

-import React, { Component } from 'react'
-import './index.scss'
-import { throttle } from 'lodash'
+import React, { Component } from 'react';
+import './index.scss';
 
 class Banner extends Component {
   navTop = 183
@@ -98,7 +97,7 @@ class Banner extends Component {
 
 
   render() {
-    const {navs, index} = this.state
+    const { toSection, navs, index } = this.props;
     return (
       <div id={'main-banner'}>
         <div className="banner"></div>
@@ -108,9 +107,7 @@ class Banner extends Component {
               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>
+                    <a href={`#${item.id}`} onClick={(e) => toSection(i, e)}>{item.text}</a>
                   </li>
                 )
               })

src/components/blessingPreheat/banner/index.scss

@@ -9,7 +9,9 @@
     #main-nav{
         position: absolute;
         top: 183px;
+        width: 100%;
         margin-bottom:30px;
+
         &.fixed{
             position: fixed;
             top: 0;
@@ -20,6 +22,7 @@
             display: flex;
         }
         li{
+            flex: 1;
             width: 63px;
             height: 30px;
             font-size: 11px;

src/components/blessingPreheat/collectBlessing/index.js

 import React, { Component } from 'react';
+import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
+import { http } from '@/utils';
+import { Toast } from "antd-mobile";
 import ListFrame from './../listFrame/index';
 import ListHeader from './../listHeader';
 import './index.scss';
 
+@connect(({user})=> ({
+  uid: user.data.uid || ''
+}))
 class CollectBlessing extends Component {
 
   constructor(props) {
@@ -45,11 +51,76 @@ class CollectBlessing extends Component {
           ]
         }
       ],
+      seconds: 10,
     };
   }
 
+  qqToShare = () => {
+    const { uid, history } = this.props;
+    if(!uid) {
+      history.push('/passport');
+    }else {
+      history.push('/blessingPreheat?utm_source=1&utm_medium=1&utm_campaign=11&utm_content=1&utm_term=1');
+      this.fetchUserBlessing(3, () => {
+        this.handleToAddBlessing(3);
+      });
+    }
+  }
+
+  wechatToShare = () => {
+    const { uid, history } = this.props;
+    if(!uid) {
+      history.push('/passport');
+    }else {
+      history.push('/blessingPreheat?utm_source=q&utm_medium=11&utm_campaign=qq11&utm_content=11&utm_term=11');
+      this.fetchUserBlessing(1, () => {
+        this.handleToAddBlessing(1);
+      });
+    }
+  }
+
+  fetchUserBlessing(key, cb) {
+    const { handleToShowShare, handleToHideShare } = this.props;
+    let { seconds } = this.state;
+    http.get(`${API.home}/sys/user/blessing`).then(res => {
+      const { code, data } = res.data;
+      if(code === 200) {
+        if(data.today_shared_platforms.some(item => item === key)) {
+          Toast.info('今日已分享，记得明天来~', 2, null, false);
+        }else {
+          handleToShowShare();
+          this.shareTimer = setInterval(() => {
+            this.setState(
+              { 
+                seconds: (--seconds)
+              }, 
+              () => {
+                if (seconds === 0) {
+                  typeof cb === 'function' && cb();
+                  handleToHideShare();
+                  clearInterval(this.shareTimer);
+                }
+              }
+            );
+          }, 1000);
+        }
+      }
+    });
+  }
+
+  handleToAddBlessing = (key) => {
+    http.post(`${API.home}/sys/add/blessing`, {
+      share_platform: key, // 1 朋友圈 2 微博 3 qq
+      type: 3 // 1：签到；3：分享；4：浏览课程；
+    }).then(res => {
+      const {code } = res.data;
+      if (code === 200) {
+        Toast.info('+2点福气值~', 2, null, false);
+      }
+    });
+  }
+  
   render() {
-    console.log(this.props);
     const { 
       isSign,
       userInfo: { isLogin = false, blessingVal = 0 }, 
@@ -57,9 +128,10 @@ class CollectBlessing extends Component {
       handleToShowList, 
       handleToShowInvite,
       handleToShow,
-      toLogin
+      toLogin,
+      toSection
     } = this.props;
-    const { rules, welfareRuleList } = this.state;
+    const { rules, welfareRuleList, seconds } = this.state;
     return (
       <div className="collect-blessing">
         {
@@ -126,11 +198,19 @@ class CollectBlessing extends Component {
               }
               {
                 index === 2 &&
-                <div className="collect-blessing__content" data-layout="column" onClick={()=>{handleToShow('shareMark')}}>
+                <div className="collect-blessing__content" data-layout="column">
                   <p className="collect-blessing__label">去分享</p>
                   <div className="collect-blessing__share">
-                    <a className="collect-blessing__share-button" data-type="qq"></a>
-                    <a className="collect-blessing__share-button" data-type="wechat"></a>
+                    <a 
+                    className="collect-blessing__share-button" 
+                    data-type="qq"
+                    onClick={this.qqToShare}
+                    ></a>
+                    <a 
+                      className="collect-blessing__share-button" 
+                      data-type="wechat"
+                      onClick={this.wechatToShare}
+                    ></a>
                   </div>
                 </div>
               }
@@ -148,7 +228,9 @@ class CollectBlessing extends Component {
               }
               {
                 index === 5 &&
-                <a className="collect-blessing__content">去选课</a>
+                <a 
+                className="collect-blessing__content" 
+                onClick={toSection}>去选课</a>
               }
             </div>
           ))

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 RulePopup from './rulePopup/index'
 import CoursePopup from './coursePopup/index'
 import RecordPopup from './recordPopup/index'
@@ -22,8 +24,11 @@ import { getParam } from '../../utils';
 
 
 class BlessingPreheat extends Component {
+  
   constructor(props) {
     super(props)
+    this.navTop = 183;
+    this.prevY = 0;
     this.state = {
       isRule: false,
       isCourse: false,
@@ -38,11 +43,53 @@ class BlessingPreheat extends Component {
       shareMark: false,
       userInfo: {},
       isSign: false,
+      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() {
     this.fetchUserBlessing();
+    window.addEventListener('scroll', throttle(this.calcNavActive, 100));
+  }
+
+  initNav = (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);
   }
 
   fetchUserBlessing() {
@@ -67,12 +114,12 @@ class BlessingPreheat extends Component {
         if(data.is_login === 1) {
           this.handleToSign();
         }
+        this.initNav(data.is_activity);
       }
     });
   }
 
   handleToSign = () => {
-    console.log(2,2);
     http.post(`${API.home}/sys/add/blessing`, {
       type: 1 // 1：签到；3：分享；4：浏览课程；
     }).then(res => {
@@ -166,21 +213,98 @@ class BlessingPreheat extends Component {
     Toast.info('复制成功', 2,null,false)
   }
 
+  toSection = (i, e) => {
+    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 = () => {
+    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
+  }
+
   render() {
-    const { userInfo, isRule, isCourse, inviteUrl, inviteVisible, isFormal, isServer, serverUrl, isSign, showRecordList, shareMark} = this.state
+    const { 
+      navs, 
+      userInfo, 
+      isRule, 
+      isCourse, 
+      inviteUrl, 
+      inviteVisible, 
+      isFormal, 
+      isServer, 
+      serverUrl, 
+      isSign, 
+      showRecordList, 
+      shareMark,
+      index
+    } = this.state;
     return (
       <div id={'blessing-preheat'}>
-        <Banner/>
+        <Banner 
+        isFormal={isFormal} 
+        navs={navs} 
+        toSection={this.toSection}
+        index={index}
+         />
         {/* 积福气 */}
-        <ListHeader id={'lucky-value'} text="积福气，享受更多福利" styles={{margin: '0 0 15px'}} />
+        <ListHeader id={'lucky-value'} text="积福气，享受更多福利" styles={{margin: '60px 0 15px'}} />
+        <Link className="luck-draw__button" to="/blessingRank">福气排行榜></Link>
         <CollectBlessing
           isSign={isSign}
           userInfo={userInfo}
+          history={this.props.history}
+          toSection={(e) => this.toSection(this.fetchMoudleId('best-courses'), e)}
           handleToShowList={() => this.handleToShow('isCourse')}
           handleToShowInvite={this.handleToShowInvite}
           handleToShowNotice={this.handleToShowNotice}
           handleToShow={this.handleToShow}
+<<<<<<< HEAD
           toLogin={this.toLogin}
+=======
+          handleToShowShare={() => this.handleToShow('shareMark')}
+          handleToHideShare={() => this.handleToHide('shareMark')}
+>>>>>>> e0942347f218f3988bbb48b28803a470a0fbcec1
         />
 
         {/* 幸运大抽奖--预热 */}
@@ -216,7 +340,7 @@ class BlessingPreheat extends Component {
         }
         {
           shareMark &&
-          <SharePopup handleToHide={() => this.handleToHide('shareMark')}/>
+          <SharePopup />
         }
         <Popup
           visible={inviteVisible}

src/components/blessingPreheat/index.scss

@@ -142,6 +142,10 @@
     box-sizing: border-box;
     font-size: 13px;
     color: #FFF604;
+    text-align: center;
+    line-height: 24px;
     background-color: transparent;
+    cursor: pointer;
+    outline: none;
 }
 

src/components/blessingPreheat/rankList/index.js

@@ -13,7 +13,6 @@ export default class RankList extends Component {
 
   componentDidMount() {
     http.get(`${API.home}/sys/ai_test/ranking/10`).then(res => {
-      console.log(res);
       let data = res.data.data;
       let code = res.data.code;
       if(code === 200) {

src/components/blessingPreheat/sharePopup/index.js

-import React, { Component } from 'react'
+import React, { Component } from 'react';
+import { browser } from '@/utils';
 import './index.scss'
 
 export default class SharePopup extends Component {
   render() {
     return (
-      <div className="share__container" onClick={this.props.handleToHide}>
+      <div className="share__container">
+        {
+          !browser.isWeixin && 
           <div className="share__row">
             <img src='https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/throw_icon.png' />
           </div>
+        }
         <div className="share__content">
           <p className="share__text">分享活动页到朋友圈、qq分别</p>
           <div className='share__rule'>

src/components/blessingPreheat/sharePopup/index.scss

@@ -7,6 +7,7 @@
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, .6);
+  z-index: 999;
 
   .share__row {
     width: 60px;