meeting/src/pages/homePage/index.jsx

import './index.less'
import { Link, useLocation } from 'umi';
import MeetingAgenda from './meetingAgenda';
import ConferenceGuide from './conferenceGuide';
import Member from './member';
import greenRight from 'img/homePage/green-right.png'
import titleIcon from 'img/homePage/title-icon.png'
import { homePage } from '../../constants/info'
import { getBaseInfo, getPartnerList } from '../../utils/request/api'
import { useRef, useState, useEffect } from 'react';
import { throttle } from '../../utils/util'


function HomePage(){

  const [ active, setActive ] = useState(0)
  const [ fixedMenuOpacity, setFixedMenuOpacity ] = useState(0)
  const [ mainInfo, setMainInfo ] = useState({})
  const [ partner, setPartner ] = useState([])

  useEffect(()=>{
    getMainInfo();
    getPartner();
    window.addEventListener('scroll', throttleHandleScroll);
    return ComponentWillUnmount;
  },[])

  function ComponentWillUnmount() {
    window.removeEventListener("scroll", throttleHandleScroll);
  }

  function handleScroll() {
    let clientHeight = document.documentElement.clientHeight; //可视区域高度
    let scrollTop  = document.documentElement.scrollTop;  //滚动条滚动高度

    setFixedMenuOpacity((scrollTop - 650) / 100)

    homePage.map((e, index) => {
      let f = checkPosi(e.id ,clientHeight,scrollTop);
      if(f){
        setActive( index );
      }
    })
  }

  const throttleHandleScroll = throttle(handleScroll, 100)

  function checkPosi(ele,clientHeight,scrollTop) {
    if(document.getElementById(ele)){
      var a = document.getElementById(ele).offsetTop - scrollTop -(clientHeight/3);
      var b = document.getElementById(ele).clientHeight + (clientHeight/4);
      if(a>0 || a<-b){
        return false;
      }else{
        return true;
      }
    }
  }
  
  const scrollToAnchor = (anchorName) => {
    if (anchorName) {
      let anchorElement = document.getElementById(anchorName);
      if(anchorElement) { anchorElement.scrollIntoView({block: 'start', behavior: 'smooth'}); }
    }
  }

  const getMainInfo = () => {
    getBaseInfo().then(result => {
      setMainInfo(result.data);
    }).catch(console.error())
  }

  const getPartner = () => {
    getPartnerList().then(res => {
      setPartner(res.rows);
    }).catch(console.error())
  }


  const matchItem = (item) => {
    return item === active;
  }

  return(
    <div className="page">

      <div className="back-img-1"></div>
      <div className="back-img-2"></div>

      <div className="banner" style={{ backgroundImage: `url('http://fpoimg.com/1920x440')` }}></div>

      <div className="fixed-menu" style={{ opacity: fixedMenuOpacity }}>
        <div className="guide-line" style={{ marginTop: `${ active * 38 + 27}px` }}><div></div><div></div></div>
        <div>
          {
            homePage && homePage.length && homePage.length > 0 && homePage.map((item, key) => {
              return (
                <div key={key} 
                  className={`${matchItem( key ) ? 'menu-item menu-item-active' : 'menu-item'}`}
                >
                  <a onClick={() => { scrollToAnchor(item.id) }}>{ item.title }</a>
                </div>
              )
            })
          }
        </div>
      </div>

      <div className="introduction">
        <div className="module-header">
          <img src={ titleIcon } alt="" />
          <div className="title">
            <span>大会介绍</span>
            <span>INTRODUCTION TO THE CONFERENCE</span>
          </div>
        </div>
        <div className="intro-content">
          { mainInfo.introductionContent }
        </div>
        <ul className="menu">
        {
          homePage && homePage.length && homePage.length > 0 && homePage.map((item, key) => {
            return (
              <li key={key} 
                className={`${matchItem(item.id) ? 'menu-item menu-item-active' : 'menu-item'}`}
                // onMouseOver={ () => { this.setState( {showSubMenu: key }) } }
                // onMouseOut={ () => { this.setState( {showSubMenu: -1 }) } }
              >
                <a onClick={() => { scrollToAnchor(item.id) }}>{ item.title }</a>
              </li>
            )
          })
        }
        </ul>
      </div>
      <MeetingAgenda></MeetingAgenda>
      <ConferenceGuide></ConferenceGuide>
      <div className="back-img-4"></div>
      <Member></Member>
      <div className="partner wrapper" id="partner">
        <div className="module-header">
          <img src={ titleIcon } alt="" />
          <div className="title">
            <span>合作伙伴</span>
            <span>PARTNERS</span>
          </div>
        </div>
          {
            partner && partner.length && partner.length > 0 &&
            <div className="partner-content">
              {
                partner.map((e, k) => {
                  return (
                    e.zonePartnersList.length > 0 ?
                    <div className="partner-type" key={ k }>
                      <div className="type-title">
                        <img src={ greenRight } alt="" className="title-icon"/>
                        <span>{ e.typeName }</span>
                        <div className="device"></div>
                      </div>
                      <div className="type-content">
                        {
                          e.zonePartnersList.map((i, subK) => {
                            return <a key={ subK } href={ i.link } target="_blank">
                              <img src={ i.logo } alt=""/>
                            </a>
                          })
                        }
                      </div>
                    </div>
                    :''
                  )
                })
              }
            </div>
          }
          {/* <div className="partner-type">
            <div className="type-title">
              <img src={ greenRight } alt="" className="title-icon"/>
              <span>主办单位</span>
              <div className="device"></div>
            </div>
            <div className="type-content">
              {
                [1,2,3].map((i, k) => {
                  return <img src="http://fpoimg.com/160x40" alt="" key={ k }/>
                })
              }
            </div>
          </div> */}
          <div></div>
      </div>
    </div>
  )
}
export default HomePage;