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(window.location.href.includes('?v=v2') ? true : false)

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

  // 点击观看百戏
  const [baiXi, setBaiXi] = useState(window.location.href.includes('r=ren') ? true : false)

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

  return (
    <div className={styles.A2visit2}>
      {window.location.href.includes('?v=v2') ? null : (
        <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
        }
      />

      {window.location.href.includes('?v=v2') ? null : (
        <CatVideo
          isShow={panoShow}
          src={baseURL + myData.visit2.进入院落}
          parentFu={() => domDelOwnFu('#CatVideo')}
        />
      )}

      {/* 全景图页面 */}
      {window.location.href.includes('r=ren') ? null : (
        <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={() => {
            if (window.location.href.includes('?r=ren')) {
              history.go(-1)
            } else {
              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