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

import React, { useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import { baseURL, myData } from '@/utils/http'
import NextPage from '@/components/NextPage'
import FloorBtn from '@/components/FloorBtn'
import { domDelOwnFu } from '@/utils/utilsSome'
import CatVideo from '@/components/CatVideo'
import EndVideo from '@/components/EndVideo'
import A22Pano from './A22Pano'
import BtnRight from '@/components/BtnRight'
import classNames from 'classnames'
import history from '@/utils/history'

function A2visit2() {
  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 + 2)
    }, 50)
  }, [loding])

  // 底部按钮选中
  const [btnAc, setBtnAc] = useState('贵宾')

  // 3个视频切换
  const [videoPlay, setVideoPlay] = useState(false)
  const videoRef = useRef<HTMLVideoElement>(null)

  //  进入院落 全景图显示
  const [panoShow, setPanoShow] = useState(false)

  // 点击进入室内
  const [toShi, setToShi] = useState(false)

  // 点击观看百戏
  const [baiXi, setBaiXi] = useState(false)

  const [xiAc, setXiAc] = useState('')

  return (
    <div className={styles.A2visit2}>
      <div
        className='A22imgBox'
        style={{ opacity: panoShow ? '0' : '1', pointerEvents: panoShow ? 'none' : 'auto' }}
      >
        {/* 底部按钮 */}
        <div
          className='A22btn'
          style={{
            opacity: loding < 100 ? '0' : '1',
            pointerEvents: loding < 100 ? 'none' : 'auto'
          }}
        >
          {myData.visit2.btnArr.map((item, index) => (
            <div
              onClick={() => {
                setBtnAc(item)
                setVideoPlay(true)
                setTimeout(() => {
                  if (videoRef.current) videoRef.current.play()
                }, 100)
              }}
              key={index}
              className='A22btnRow'
              style={{
                backgroundImage: `url(${baseURL}plow/left${btnAc === item ? 'Ac' : ''}.png)`,
                color: btnAc === item ? '#BD7656' : '#DACB8B'
              }}
            >
              {item}
            </div>
          ))}
        </div>

        {loding >= 100 ? (
          // 进入院落
          <NextPage
            clickSon={() => {
              setPanoShow(true)
              setTimeout(() => {
                domDelOwnFu('.A22imgBox')
              }, 500)
            }}
            txt='进入院落'
          />
        ) : null}

        {/* 3个视频 */}
        <div className='A22videoBox' style={{ zIndex: videoPlay ? '2' : '0' }}>
          {myData.visit2.btnArr.map((item, index) => (
            <div key={index} className='A22video' style={{ opacity: btnAc === item ? 1 : 0 }}>
              <video
                ref={btnAc === item ? videoRef : null}
                playsInline
                muted
                webkit-playsinline='true'
                x5-video-player-type='h5'
                onEnded={() => setVideoPlay(false)}
              >
                <source type='video/mp4' src={`${baseURL}visit2/${item}.mp4`} />
                Your browser does not support the video tag.
              </video>
            </div>
          ))}
        </div>

        {/* 加载进度条 */}
        {loding >= 100 ? null : (
          <div className='A22xian'>
            <div>
              <div style={{ width: loding + '%' }}></div>
            </div>
          </div>
        )}
      </div>

      {/* 右下角按钮 */}
      <FloorBtn
        gameFu={
          panoShow
            ? () => {
                history.push('/unend/game3')
              }
            : undefined
        }
      />

      <CatVideo
        isShow={panoShow}
        src={baseURL + myData.visit2.进入院落}
        parentFu={() => domDelOwnFu('#CatVideo')}
      />

      {/* 全景图页面 */}
      <div className='A22Pano' style={{ opacity: panoShow ? '1' : '0' }}>
        <A22Pano />
        {/* 进入室内 */}
        <NextPage clickSon={() => setToShi(true)} txt='进入室内' />

        {/* 底部按钮 */}
        <div
          onClick={() => setBaiXi(true)}
          className='A22Pbtn'
          style={{ backgroundImage: `url(${baseURL}chef/chuBtn.png)` }}
        >
          观看百戏
        </div>
      </div>

      {/* 室外看百戏 */}
      <div
        className='A22baiXi'
        style={{
          opacity: baiXi ? '1' : '0',
          pointerEvents: baiXi ? 'auto' : 'none',
          backgroundImage: `url(${baseURL + myData.visit2.baiXiBg})`
        }}
      >
        {/* 进入室内 */}
        <NextPage clickSon={() => setToShi(true)} txt='进入室内' />

        {/* 百戏底部按钮 */}
        <div className='pvfloor'>
          {myData.visit2.baixiArr.map((item, index) => (
            <div
              key={index}
              onClick={() => {
                setXiAc(item)
                setTimeout(() => {
                  const doms: any = document.querySelectorAll('.A22Bvideo')
                  if (doms) {
                    doms.forEach((v: HTMLVideoElement, i: number) => {
                      if (index === i) v.play()
                      else {
                        v.pause()
                        v.currentTime = 0
                      }
                    })
                  }
                }, 100)
              }}
              className={classNames('pvflRow', xiAc === item ? 'pvflRowAc' : '')}
            >
              {/* 蒙版 */}
              <div className='pvflR1'></div>
              {/* 底图 */}
              <div className='pvflR2'>
                <img src={`${baseURL}visit2/${item}.png`} alt='' />
              </div>

              {/* 文字 */}
              <div className='pvflR3'>{item}</div>
            </div>
          ))}
        </div>

        {myData.visit2.baixiArr.map(item => (
          // 5个视频
          <div
            className='A22BvideoBox'
            key={item}
            style={{
              opacity: xiAc === item ? '1' : '0',
              pointerEvents: xiAc === item ? 'auto' : 'none'
            }}
          >
            <video
              className='A22Bvideo'
              playsInline
              muted
              webkit-playsinline='true'
              x5-video-player-type='h5'
              loop={true}
            >
              <source type='video/mp4' src={`${baseURL}visit2/${item}.mp4`} />
              Your browser does not support the video tag.
            </video>
          </div>
        ))}

        <BtnRight
          title='返回'
          clickSon={() => {
            setBaiXi(false)
            setXiAc('')
          }}
          imgName='back'
        />
      </div>

      {/* 最后的视频 */}
      <EndVideo
        lastVideo={toShi}
        src={baseURL + myData.visit2.进入室内}
        path='/banquet'
        delDom='.A22Pano'
      />
    </div>
  )
}

const MemoA2visit2 = React.memo(A2visit2)

export default MemoA2visit2