index.js

import React, { Component } from 'react'
import QRCode from 'qrcode'
import { http, SendMessageToApp, wxShare, is_weixin, getParam } 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 './index.scss'
import { Popup } from '@/common'
import { Toast } from "antd-mobile"
import Live from './live'
import Banner from './banner'
import cookie from "js-cookie"
import { setCurrentUser, startFetchUser } from "@/store/userAction"
import { addDays } from "date-fns"
import { compose } from "redux"
import { connect } from "react-redux"
import FormalDraw from "./formal-draw"


class BlessingPreheat extends Component {

  recordInstance = null

  constructor(props) {
    super(props)
    this.navTop = 183
    this.prevY = 0
    this.state = {
      userInfoList: [],
      // userInfoList: [{
      //     token:'fcfef221e60ab7a2-92a80d5d30196999',
      //     uid:'545292',
      //     uname:'xzhtest2',
      //     avatar_file:''
      // }],
      isRule: false,
      isCourse: false,
      inviteUrl: '',
      inviteVisible: false,
      joinLotteryVisible: false,
      timelineShareVisible: false,
      showRecordList: false,
      isFormal: false, // 1正式 0 预热
      onlyShow: false, // 14号返场
      isServer: false,
      serverUrl: '',
      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'
        },
      ],
      formalNavs: [
        {
          text: '幸运大抽奖',
          id: 'lucky-draw'
        },
        {
          text: '积福气',
          id: 'lucky-value'
        },
        {
          text: '精品特惠',
          id: 'best-courses'
        },
        {
          text: 'AI测试',
          id: 'ai-test'
        },
        {
          text: '大咖直播',
          id: 'live'
        },
      ],
      encoreNavs: [
        {
          text: '精品特惠',
          id: 'best-courses'
        },
        {
          text: '大咖直播',
          id: 'live'
        },
        {
          text: '幸运大抽奖',
          id: 'lucky-draw'
        },
        {
          text: '积福气',
          id: 'lucky-value'
        },
        {
          text: 'AI测试',
          id: 'ai-test'
        },
      ],
      index: 0,
      userHasError: props.user.hasError,
      isApp: false,
      isClose: false,
      testSum: 0,
      address: {
        name: '',
        phone: '',
        address: ''
      },
      addressPopupVisible: false
    }
  }

  componentDidMount() {
    const _this = this;
    this.fetchUserBlessing()
    // setTimeout(function(){
    //   // 这里有获取ID的步骤，由于运营过多的调整，导致顺序不定，所以包含ID的title必须要放到判断中（防止出现多个title），设置定时器是因为如果返回较慢 获取不到ID导致报错
    //   _this.setInitialNavActiveStatus()
    // }, 50);
    // window.addEventListener('scroll', throttle(this.calcNavActive, 100))
    if (is_weixin()) {
      wxShare({
        title: 'AI充电节，积福气享1折秒课，超10万元奖品来就送！！',
        desc: '把这门超5万人报名的【Python基础入门 升级版】课程送给你，附200元红包，请笑纳！--七月在线',
        link: window.location.href,
        imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/index-share-img.png',
      })
    }

    // 获取App登录信息
    window['loginInfo'] = result => {
      this.loginInfo(result)
    }

    window['getNewData'] = result => {
      this.fetchUserBlessing()
    }
    window['QQWXWBshare'] = result => {
      http.post(`${API.home}/sys/add/blessing`, {
        share_platform: result, // 1 朋友圈 2 微博 3 qq
        type: 3 // 1：签到；3：分享；4：浏览课程；
      }).then(res => {
        const {code} = res.data
        if (code === 200) {
          Toast.info('+2点福气值~', 2, null, false)
          this.fetchUserBlessing()
        }
      })
    }

  }

  componentWillUpdate() {
    const {isFormal,onlyShow} = this.state;
    if(isFormal === 1) {
      document.title = `11.11-11.13 AI充电节，为AI出击！重磅好课1折秒，海量奖品来就送-七月在线`
      if(onlyShow) {
        document.title = `11.14 AI充电节 返场钜惠！200本纸质书送完即止！`
      }
    }else{
      document.title = `11.11-11.13 AI充电节，预热来袭！积福气享1折秒课，海量奖品来就送-七月在线`
    }
  }

// 获取app登录数据
  loginInfo = (result) => {
    this.setState({
      userInfoList: result
    }, () => {
      if (this.state.userInfoList.length) {
        this.props.startFetchUser()
        this.appLogin()
      }
    })

  }
// 保存cookie
  appLogin = () => {
    let expires = addDays(new Date(), 90)
    this.state.userInfoList.map((item, index) => {
      cookie.set("token", item.token, {expires, path: '/', domain: '.julyedu.com'})
      cookie.set("plat", item.plat, {expires, path: '/', domain: '.julyedu.com'})
      cookie.set("uid", item.uid, {expires, path: '/', domain: '.julyedu.com'})
      cookie.set("uname", item.uname, {expires, path: '/', domain: '.julyedu.com'})
      cookie.set("avatar_file", item.avatar_file, {expires, path: '/', domain: '.julyedu.com'})
    })

    if (cookie.get("token") && cookie.get("uid")) {
      this.fetchUserBlessing()
      this.setState({
        isApp: true
      })
    }

    this.props.setCurrentUser(this.transformUser(this.state.userInfoList))
  }
  transformUser = res => {
    let payload

    res.map((item, index) => {
      payload = {
        hasError: false,
        data: {
          username: item.uname,
          avatar: item.avatar_file,
          token: item.token,
          uid: item.uid
        },
        isFetching: false
      }
    })

    return payload
  }


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

  }

  fetchMoudleId = (str) => {
    const {navs} = this.state
    return findIndex(navs, item => item.id === str)
  }

  componentWillUnmount () {
    window.removeEventListener('scroll', this.calcNavActive);
  }

  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 {formalNavs, onlyShow, encoreNavs} = this.state
    if (isFormal) {
      if(onlyShow) {
        this.setState({
            navs: encoreNavs
        }, () => {
          this.setInitialNavActiveStatus()
          window.addEventListener('scroll', throttle(this.calcNavActive, 100))
        })
        
      } else {
        this.setState({
          navs: formalNavs
        }, () => {
          this.setInitialNavActiveStatus()
          window.addEventListener('scroll', throttle(this.calcNavActive, 100))
        })
        
      }

    }
  }

  fetchMoudleId = (str) => {
    const {navs} = this.state
    return findIndex(navs, item => item.id === str)
  }

  fetchUserBlessing = () => {
    const {userInfo} = this.state
    const {history} = this.props;
    http.get(`${API.home}/sys/user/blessing`).then(res => {
      const {code, data} = res.data
      if (code === 200) {
        if(data.is_over) {
          if(!getParam('version')) {
            history.push('/');
          } else {
            SendMessageToApp("toQualityCourse");
          }
        }
        this.setState(()=>({
          isSign: !!data.today_signed,
          isFormal: data.is_activity,
          onlyShow: data.onlyShow,
          testSum: parseInt(data.user_test_total, 10) || 0,
          userInfo: Object.assign({}, userInfo, {
            isFollow: data.subscribed,
            blessingVal: data.user_blessing_value,
            buyBlessing: (data.types_total_blessing_value && data.types_total_blessing_value.buy_course) ? data.types_total_blessing_value.buy_course : 0,
            inviteBlessing: (data.types_total_blessing_value && data.types_total_blessing_value.invite) ? data.types_total_blessing_value.invite : 0,
          })
        }));
        if (data.is_login === 1) {
          this.handleToSign()
        }
        this.initNav(data.is_activity)
      }
    })
  }


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


  handleToSign = () => {
    const {userInfo} = this.state
    http.post(`${API.home}/sys/add/blessing`, {
      type: 1 // 1：签到；3：分享；4：浏览课程；
    }).then(res => {
      const {code} = res.data
      if (code === 200) {
        this.setState({
          isSign: true,
          userInfo: Object.assign({}, userInfo, {
            blessingVal: userInfo.blessingVal + 5
          })
        })

        Toast.info('+5点福气值~', 2, null, false)
      }
    })
  }

  handleToHide = (key) => {
    let obj = {}
    obj[key] = false
    this.setState({
      ...obj
    })
  }

  handleToShow = (key, isLogin = false) => {
    // 需要用户登录 并且用户未登录
    const isLoginnew = !this.props.user.hasError

    if (isLogin && !isLoginnew) {
      this.toLogin()
    } else {
      if (key === 'shareMark') {
        this.setState({
          isClose: false
        })
        setTimeout(() => {
          this.setState({
            isClose: true
          })
        }, 5000)
      }
      let obj = {}
      obj[key] = true
      this.setState({
        ...obj
      })
    }
  }

  handleToShowNotice = () => {
    http.get(`${API['base-api']}/sys/activity/create_blessing_qrcode`).then(res => {
      const {errno, data, msg} = res.data
      if (errno === 200) {
        QRCode.toDataURL(data.url, {
          width: 120,
          height: 120,
          margin: 1
        }).then(url => {
          Popup({
            title: '扫码关注“七月在线”服务号',
            content: <img src={url} alt="barcode" className="qr-code"/>,
            className: 'invite-popup'
          })
        })
          .catch(err => {
            console.error(err)
          })
      } else if (errno === 4030 || errno === 4040) {
        this.toLogin()
      } else {
        Toast.info(msg, 2, null, false)
      }
    })
  }

  toLogin = () => {
    const {history} = this.props
    if (!getParam('version')) {
      history.push('/passport')
    } else {
      SendMessageToApp("toLogin")
    }
  }

  onCopy = () => {
    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') {
      if(Number.isInteger(index)){
        _index = (index + 1) >= navs.length ? index : index + 1

      }else {
        _index = 0
      }
    } else {
      if(Number.isInteger(index)){
        _index = (index - 1) <= 0 ? 0 : index - 1
      }else {
        _index = 0
      }
    }
    let el = document.querySelector(`#${navs[_index].id}`)
    let nav = document.querySelector('#main-nav')
    if (el) {

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

  getMyPrizeRecord = () => {
    const isLoginnew = !this.props.user.hasError
    const {history} = this.props
    if (!isLoginnew) {
      history.push('/passport')
    }else{
      http.get(`${API.home}/sys/activity/my_lotteries`)
          .then(res => {
            const {code, data, msg} = res.data
            if (code == 200) {
              this.recordInstance = Popup({
                title: '我的中奖纪录',
                className: 'prize-record-popup',
                content: (
                    <div className={'record-container'}>
                      <div className="list-title">
                        <div>时间</div>
                        <div>奖品名称</div>
                      </div>
                      <ul>
                        {
                          Array.isArray(data)
                              ? data.map((item, index) => {
                                return (
                                    <li key={index}>
                                      <div className="time">{item.time}</div>
                                      <div className="name"
                                           onClick={this.showAddressPopup.bind(this, item['is_virtual'], item.prize)}>{item.prize}</div>
                                    </li>
                                )
                              })
                              : <li style={{justifyContent: 'center'}}>暂无中奖纪录</li>
                        }
                      </ul>
                    </div>
                )
              })
            } else {
              Toast.info(msg, 2, null, false)
            }
          })
    }
  }

  submitAddress = debounce(() => {
    http.post(`${API.home}/sys/collect_info`, {
      ...this.state.address
    })
      .then(res => {
        const {data, code, msg} = res.data
        if (code == 200) {

          this.setState({
            addressPopupVisible: false
          })

        } else {
          Toast.info(msg, 2, null, false)
        }
      })
  }, 500)

  setAddressState = e => {
    const value = e.target.value
    const name = e.target.name
    this.setState({
      address: {
        ...this.state.address, ...{
          [name]: value
        }
      }
    })
  }

  showAddressPopup = (isVirtual, prize) => {
    if (isVirtual) {
      Toast.info(`恭喜你抽中${prize}，奖品已存放到你的账户`, 2, null, false)
      return
    }
    http.get(`${API.home}/sys/user_address_info`)
      .then(res => {
        const {data, code, msg} = res.data
        if (code == 200) {
          this.recordInstance && this.recordInstance.close()
          this.setState({
            address: {
              ...this.state.address, ...{
                name: data.name,
                phone: Number(data.phone),
                address: data.address
              }
            },
            addressPopupVisible: true
          })
        } else {
          Toast.info(msg, 2, null, false)
        }
      })
  }

  render() {
    const {
      navs,
      userInfo,
      isRule,
      isCourse,
      isFormal,
      isSign,
      showRecordList,
      shareMark,
      index,
      isApp,
      isClose,
      testSum,
      address,
      addressPopupVisible,
      onlyShow,
    } = this.state
    const {history} = this.props
    const isLogin = !this.props.user.hasError
    return (
      <div id={'blessing-preheat'}>
        <Banner
          isFormal={isFormal}
          navs={navs}
          toSection={this.toSection}
          index={index}
          onlyShow={onlyShow}
        />

        {/* 精品课程特惠专区--返场 */}
        {
          onlyShow && (
            <>
              <ListHeader id={'best-courses'} text="精品课程特惠专区" styles={{margin: '60px 0 15px'}}/>
              <CourseList
                isApp={isApp}
                isFormal={isFormal}
                isLogin={isLogin}
                history={this.props.history}
                toLogin={this.toLogin}
              />
            </>
          )
        }

        {/* 大咖直播--返场 */}
        {
          onlyShow && <Live isFormal={isFormal} isLogin={isLogin}/>
        }

        {/* 抽奖--正式 */}
        {
          isFormal === 1 &&
          <>
            <ListHeader id={'lucky-draw'} text="幸运大抽奖" styles={{margin: onlyShow ? '30px 0 10px' : '60px 0 10px'}}/>
            {
              onlyShow ? (
                <p className='active_over'>活动已结束</p>
              ) : null
            }
            <div className="formal-draw-btns">
              <button className="luck-draw__button" onClick={() => this.handleToShow('isRule')}>活动规则></button>
              <button className='prize-record' onClick={this.getMyPrizeRecord}>中奖记录></button>
            </div>
            <FormalDraw toLogin={this.toLogin} isApp={isApp}/>
          </>

        }

        {/* 积福气 */}
        <ListHeader id={'lucky-value'} text="积福气，享受更多福利" styles={{margin: '30px 0 15px'}}/>
        {
          onlyShow ? (
            <p className='active_over'>活动已结束</p>
          ) : null
        }
        <Link className="blessing__sort" to="/blessingRank"></Link>


        <CollectBlessing
          isSign={isSign}
          userInfo={userInfo}
          isLogin={isLogin}
          history={this.props.history}
          toSection={(e) => this.toSection(this.fetchMoudleId('best-courses'), e)}
          handleToShowList={() => this.handleToShow('isCourse')}
          handleToShowNotice={this.handleToShowNotice}
          toLogin={this.toLogin}
          handleToShowShare={() => this.handleToShow('shareMark')}
        />

        {/* 幸运大抽奖--预热 */}
        {
          isFormal === 0 &&
          <>
            <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/>
          </>

        }

        {/*定金--只在预热期间显示*/}
        {
          isFormal === 0 &&
          <>
            <ListHeader id={'deposit'} text="预付1元定金，最高可省100元" styles={{margin: '30px 0 15px'}}/>
            <ReserveCourse isApp={isApp}/>
          </>
        }

        {/* 精品课程特惠专区 */}
        {
          !onlyShow && (
            <>
              <ListHeader id={'best-courses'} text="精品课程特惠专区" styles={{margin: '30px 0 15px'}}/>
              <CourseList
                isApp={isApp}
                isFormal={isFormal}
                isLogin={isLogin}
                history={this.props.history}
                toLogin={this.toLogin}
              />
            </>
          )
        }

        {
          isRule &&
          <RulePopup handleToHide={() => this.handleToHide('isRule')}/>
        }
        {
          isCourse &&
          <CoursePopup toLogin={this.toLogin} history={history} isLogin={isLogin}
                       handleToHide={() => this.handleToHide('isCourse')}/>
        }
        {
          showRecordList &&
          <RecordPopup
            history={this.props.history}
            handleToHide={() => this.handleToHide('showRecordList')}
          />
        }
        {
          shareMark &&
          <SharePopup isClose={isClose} toClose={() => this.handleToHide('shareMark')}/>
        }
        <ListHeader id={'ai-test'} text="全国AI工程师水平测试" styles={{margin: '30px 0 15px'}}/>
        {
              onlyShow ? (
                <p className='active_over'>活动已结束</p>
              ) : null
            }
        <div className="test__record" onClick={() => this.handleToShow('showRecordList', true)}>
          测试记录>
        </div>
        <LevelTest
          history={history}
          testSum={testSum}
          isLogin={isLogin}
          toLogin={this.toLogin}
        />


        <RankList></RankList>

        {/* 大咖直播 -- 正式活动 */}
        {
          !onlyShow && <Live isFormal={isFormal} isLogin={isLogin}/>
        }

        {
          addressPopupVisible &&
          <div className="address-mask">
            <div className="address-popup">
              <div className="title">收货信息</div>
              <div className="address-info-container">
                <div className="tip">请及时填写收货信息，获得实物奖品后将第一时间为您邮寄</div>
                <input type="text"
                       placeholder={'收件人'}
                       name={'name'}
                       onChange={e => {
                         this.setAddressState(e)
                       }}
                       value={address.name}
                />
                <input type="tel"
                       placeholder={'联系方式'}
                       name={'phone'}
                       onChange={e => {
                         this.setAddressState(e)
                       }}
                       value={address.phone}
                />
                <input type="text"
                       placeholder={'收货地址'}
                       name={'address'}
                       onChange={e => {
                         this.setAddressState(e)
                       }}
                       value={address.address}
                />
                <button type='button'
                        className={(address.name != '' && address.phone != '' && address.address != '') ? 'active' : ''}
                        onClick={this.submitAddress}
                >提交
                </button>
                <i className={'iconfont iconiconfront-2'} onClick={() => {
                  this.setState({
                    addressPopupVisible: false
                  })
                }}/>
              </div>
            </div>
          </div>
        }
      </div>
    )
  }
}

export default compose(
  connect(
    state => ({user: state.user}),
    {setCurrentUser, startFetchUser}
  )
)(BlessingPreheat)