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

import React, { useCallback, useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import useDataUrl from '@/components/ownUse/useDataUrl'
import classNames from 'classnames'
import { myData } from '@/utils/http'
import { domDelOwnFu } from '@/utils/utilsSome'
import history from '@/utils/history'
import { ArrowRightOutlined } from '@ant-design/icons'

function A5chef() {
  const { dataUrlSame } = useDataUrl()

  const [loding, setLoding] = useState(myData.isLdong ? 0 : 100)

  const timeRR = useRef(-1)

  useEffect(() => {
    clearInterval(timeRR.current)
    timeRR.current = window.setInterval(() => {
      if (loding >= 100) {
        clearInterval(timeRR.current)
        return
      }
      setLoding(loding + 1)
    }, 30)
  }, [loding])

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

  const btnStart = useCallback(() => {
    if (loding >= 100) {
      setBaseFlag(false)
      // 0.5s之后删除初始盒子
      setTimeout(() => {
        domDelOwnFu('.A5base')
      }, 500)
    }
  }, [loding])

  // 点击 跳下一个章节
  const [lastVideo, setLastVideo] = useState(false)
  const videoRefLast = useRef<HTMLVideoElement>(null)

  const lastVideoFu = useCallback(() => {
    setLastVideo(true)

    setTimeout(() => {
      if (videoRefLast.current) {
        videoRefLast.current.play()
      }
    }, 100)
  }, [])

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

  // 点击热点
  const [hotInd, setHotInd] = useState(-1)
  const hotTime = useRef(-1)
  const hotIndFu = useCallback((index: number) => {
    setBgMove(myData.chef.hot[index].change)
    clearTimeout(hotTime.current)
    hotTime.current = window.setTimeout(() => {
      setHotInd(index)
    }, 500)
  }, [])

  useEffect(() => {
    if (hotInd === -1) setBgMove('')

    setTimeout(() => {
      const videoDomAll: any = document.querySelectorAll('.A5video video')
      videoDomAll.forEach((v: HTMLVideoElement, index: number) => {
        if (hotInd === index) {
          v.currentTime = 0
          v.play()
        } else v.pause()
      })
    }, 100)
  }, [hotInd])

  const hotAcRef = useRef<HTMLVideoElement>(null)

  // 热点位移
  const [bgMove, setBgMove] = useState('')

  return (
    <div className={styles.A5chef}>
      {/* 整体盒子 */}
      <div
        className='A5main'
        style={{ backgroundImage: `url(${dataUrlSame + myData.chef.baseImg})`, transform: bgMove }}
      >
        {/* 加载页面 */}
        <div className={classNames('A5base', baseFlag ? '' : 'A5baseHide')}>
          <img src={`${dataUrlSame}chef/mulu.png`} alt='' />
          <div className='A5baseBtn' onClick={btnStart}>
            {/* anpg动图 */}
            <div className='A5BIcon'>
              <img src={`${dataUrlSame}visit/arrow.png`} alt='' />
            </div>

            <img src={`${dataUrlSame}visit/btn.png`} alt='' />

            <div className='A5Btxt'>{loding >= 100 ? '点击继续' : '加载中'}</div>
            {loding >= 100 ? null : (
              <div className='A5Bxian'>
                <div>
                  <div style={{ width: loding + '%' }}></div>
                </div>
              </div>
            )}
          </div>
        </div>

        {/* 热点按钮页面 */}
        <div className={classNames('A5hotBox', baseFlag ? '' : 'A5hotBoxAc')}>
          {/* 循环渲染热点 */}
          {myData.chef.hot.map((item, index) => (
            <div
              onClick={() => hotIndFu(index)}
              key={index}
              className='pvHot'
              style={{
                top: item.loc.top,
                left: item.loc.left
              }}
            >
              <img className='pvHotBase' src={`${dataUrlSame}visit/hot/hotBase.png`} alt='' />
              <img className='pvHotHover' src={dataUrlSame + item.imgSrc} alt='' />
            </div>
          ))}

          {/* 后厨群像 */}
          <div
            style={{ backgroundImage: `url(${dataUrlSame}chef/houChu.jpg)` }}
            className={classNames('A5chu', chuShow ? 'A5chuShow' : '')}
          >
            {/* 返回按钮 */}
            <div
              style={{ backgroundImage: `url(${dataUrlSame}chef/back23.png)` }}
              className='A5hotBoxBack hoverD'
              title='返回'
              onClick={() => setChuShow(false)}
            ></div>
          </div>
          <div
            onClick={() => setChuShow(true)}
            className='A5chuBtn'
            style={{ backgroundImage: `url(${dataUrlSame}chef/chuBtn.png)` }}
          >
            后厨群像
          </div>

          {/* 跳到下一章 */}
          <div className='pvBtn'>
            <img src={`${dataUrlSame}visit/btn.png`} alt='' />
            <div onClick={lastVideoFu}>
              田间耕作
              <ArrowRightOutlined />
            </div>
          </div>
          <div className='pvRRbtn'>
            {/* 更多 跳新页面 */}
            <div title='更多' className='pvRRbtn2' onClick={() => history.push('/more')}></div>
          </div>
        </div>
      </div>

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

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

          {/* 返回按钮 */}
          <div
            style={{ backgroundImage: `url(${dataUrlSame}chef/back22.png)` }}
            className='A5vBack hoverD'
            title='返回'
            onClick={() => setHotInd(-1)}
          ></div>
        </div>
      ))}

      {/* 最后一个过长动画 */}
      <div className={classNames('A5last', lastVideo ? 'A5lastAc' : '')}>
        <video
          ref={videoRefLast}
          playsInline
          muted
          webkit-playsinline='true'
          x5-video-player-type='h5'
          src={dataUrlSame + myData.visit.lastVideo}
          onEnded={() => history.push('/plow')}
        >
          <source type='video/mp4' />
          Your browser does not support the video tag.
        </video>
      </div>
    </div>
  )
}

const MemoA5chef = React.memo(A5chef)

export default MemoA5chef