HeNan_HanJia/Code/src/pages/A5chef/index.tsx

import React, { useCallback, useEffect, useState } from 'react'
import styles from './index.module.scss'
import classNames from 'classnames'
import { baseURL, hotInfo, myData } from '@/utils/http'
import EndVideo from '@/components/EndVideo'
import BaseImg from '@/components/BaseImg'
import HotIcon from '@/components/HotIcon'
import NextPage from '@/components/NextPage'
import FloorBtn from '@/components/FloorBtn'
import useLoding from '@/components/ownUse/useLoding'
import BtnRight from '@/components/BtnRight'
import Zhot from '@/components/Zhot'
import history from '@/utils/history'

function A5chef() {
  // 点击继续
  const [baseFlag, setBaseFlag] = useState(true)

  const btnStart = useCallback(() => {
    setBaseFlag(false)
  }, [])

  // 点击 跳下一个章节
  const [lastVideo, setLastVideo] = useState(false)

  // 点击后厨群像
  const [chuShow, setChuShow] = useState(false)

  // 点击热点
  const [hotInd, setHotInd] = useState(-1)

  useEffect(() => {
    if (hotInd !== -1) {
      setTimeout(() => {
        const doms: any = document.querySelectorAll('.A5videoDom')

        if (doms && doms.length) {
          doms.forEach((v: HTMLVideoElement, i: number) => {
            if (hotInd === i) v.play()
            else {
              v.pause()
              v.currentTime = 0
            }
          })
        }
      }, 100)
    }
  }, [hotInd])

  // 先加载背景图 序列帧等 在加载视频
  const { imgNow, imgNumFu } = useLoding(2)

  //热点
  const [acName, setAcName] = useState('')

  return (
    <div className={styles.A5chef}>
      {/* 整体盒子 */}
      <div className='A5main' style={{ backgroundImage: `url(${baseURL + myData.chef.baseImg})` }}>
        {/* 初始页面 */}
        <BaseImg
          num={50}
          isShow={!baseFlag}
          iconSrc={`${baseURL}chef/mulu.png`}
          parentFu={() => btnStart()}
          imgNow={imgNow}
          imgNumFu={imgNumFu}
          bird='houCu'
        />
        {/* 热点按钮页面 */}
        {imgNow ? (
          <div className={classNames('A5hotBox', baseFlag ? '' : 'A5hotBoxAc')}>
            {/* 循环渲染热点 */}
            {myData.chef.hot.map((item, index) => (
              <HotIcon
                isModel={item.isModel ? true : false}
                style={{
                  top: item.loc.top,
                  left: item.loc.left
                }}
                key={index}
                index={index}
                clickSon={val => setHotInd(val)}
                hoverSrc={item.hoverSrc}
                isXiao={0.67}
              />
            ))}

            {/* ---------最新热点-------------- */}
            {hotInfo.houCu.map((item, index) => (
              <HotIcon
                isModel={item.tubiao === '文物' ? true : false}
                key={index}
                index={index}
                style={{ top: item.locPage.top, left: item.locPage.left }}
                hoverSrc={item.hoverSrc}
                zIndex={item.zIndex}
                clickSon={() => setAcName(item.name)}
                isXiao={0.67}
              />
            ))}

            {/* 后厨群像 */}
            <div
              style={{
                backgroundImage: `url(${baseURL}chef/houChu.jpg)`,
                zIndex: chuShow ? 30 : 1
              }}
              className={classNames('A5chu', chuShow ? 'A5chuShow' : '')}
            >
              {/* 返回按钮 */}
              <BtnRight imgName='back' clickSon={() => setChuShow(false)} title='返回' />
            </div>
            <div
              onClick={() => setChuShow(true)}
              className='A5chuBtn'
              style={{ backgroundImage: `url(${baseURL}chef/chuBtn.png)` }}
            >
              后厨群像
            </div>

            {/* 跳到下一章 */}
            <NextPage clickSon={() => setLastVideo(true)} txt='田间耕作' />

            {/* 右下角按钮 */}
            <FloorBtn unityEnd={() => history.push('unend/end')} />
          </div>
        ) : null}
      </div>

      {/* 点击热点之后出来的视频 */}
      {imgNow
        ? myData.chef.hot.map((item, index) => (
            <div key={index} className={classNames('A5video', hotInd === index ? 'A5videoAc' : '')}>
              <video
                className='A5videoDom'
                key={index}
                playsInline
                muted
                webkit-playsinline='true'
                x5-video-player-type='h5'
                loop
              >
                <source type='video/mp4' src={`${baseURL}chef/${item.videoId}.mp4`} />
                Your browser does not support the video tag.
              </video>

              {/* 热点左侧图文信息 */}
              <div
                className='A5vTxt'
                style={{
                  backgroundImage: `url(${baseURL}chef/hotBg.png)`
                }}
              >
                <img src={baseURL + item.showImg} alt='' />
                <div dangerouslySetInnerHTML={{ __html: item.txt }}></div>
              </div>

              {/* 返回按钮 */}
              <BtnRight imgName='back' clickSon={() => setHotInd(-1)} title='返回' />
            </div>
          ))
        : null}

      {/* 结尾动画 */}
      {imgNow ? (
        <EndVideo
          lastVideo={lastVideo}
          src={baseURL + myData.chef.lastVideo}
          path='/plow'
          delDom='.A5video'
          noBtn={true}
        />
      ) : null}

      {acName ? <Zhot name={acName} closeFu={() => setAcName('')} /> : null}
    </div>
  )
}

const MemoA5chef = React.memo(A5chef)

export default MemoA5chef