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

import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'
import { baseURL, myData } from '@/utils/http'
import classNames from 'classnames'
import EndVideo from '@/components/EndVideo'
import useLoding from '@/components/ownUse/useLoding'
import BtnRight from '@/components/BtnRight'
import history from '@/utils/history'
import FloorBtn from '@/components/FloorBtn'
import { renClickPageFu } from '../B1more/data'

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

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

  const timeRR = useRef(-1)

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

  // 最后一个过长动画
  const [lastVideo, setLastVideo] = useState(false)

  // 名帖文字的显示和隐藏
  const [txtShow, setTxtShow] = useState(false)

  // 点击投名帖
  const btnStartFu = useCallback(() => {
    // 播放长视频
    setTxtShow(true)
    setTimeout(() => {
      setLastVideo(true)
    }, 2000)
  }, [])

  // 点击开始
  const btnSta = useCallback(() => {
    setTieShow(true)
  }, [])

  // 名帖信息展示
  const [tieShow, setTieShow] = useState(window.location.href.includes('r=ren') ? true : false)

  // 名帖1点击毛笔
  const [biShow, setBiShow] = useState(false)

  // 名帖2点击选中一个
  const [inptxt, setInpTxt] = useState({
    type: 0,
    txt1: '',
    txt2: '',
    txt3: ''
  })

  // 在页面显示的html格式文字
  const txtRes = useMemo(() => {
    let txt = `弟子 ${inptxt.txt1} 再拜 问起居 ${inptxt.txt3} 字${inptxt.txt2}`
    if (inptxt.type === 2) {
      txt = `中郎豫章 ${inptxt.txt3} ${inptxt.txt1} 七十三 字${inptxt.txt2}`
    }
    return txt
  }, [inptxt])

  // 输入框是否输入完整
  const isOk = useMemo(() => {
    let flag = false
    if (inptxt.txt1 && inptxt.txt2 && inptxt.txt3) flag = true
    return flag
  }, [inptxt])

  return (
    <div className={styles.A11base}>
      {/* 背景图页面 */}
      {!lastVideo ? (
        <div className={classNames('A11bg')} hidden={window.location.href.includes('r=ren')}>
          <img onLoad={imgNumFu} id='bgImgBox' src={baseURL + myData.base.bgImg} alt='' />

          <img onLoad={imgNumFu} className='A11Vlogo' src={`${baseURL}home/logo.png`} alt='' />

          {loding >= 100 ? (
            <div className='A11btn'>
              {/* 按钮 */}
              <div onClick={btnSta}>
                <div>点击开始{imgNow}</div>
              </div>
            </div>
          ) : (
            <div className='A11xian'>
              <div>
                <div style={{ width: loding + '%' }}></div>
              </div>
            </div>
          )}

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

      {/* 名帖信息 */}
      {imgNow && !lastVideo ? (
        <div className={classNames('A11Tit', tieShow ? 'A11TitShow' : '')}>
          <div>
            <img className='t1Bg' src={`${baseURL}base/tieBg.jpg`} alt='' />
            <img
              onClick={() => setBiShow(true)}
              className='t1Bi1'
              src={`${baseURL}base/bi1.png`}
              alt=''
            />
            <BtnRight
              title='返回'
              clickSon={() => {
                const txt = renClickPageFu()
                if (txt) {
                  txt === '1' ? history.replace('/more?r=ren1') : history.replace('/more?r=ren0')
                } else setTieShow(false)
              }}
              imgName='back'
            />
          </div>

          {/* 名帖2 */}
          <div
            className='A11TitSon'
            style={{ opacity: biShow ? '1' : '0', pointerEvents: biShow ? 'auto' : 'none' }}
          >
            <img className='A11TitSon1' src={`${baseURL}base/ban.png`} alt='' />
            <p className='A11TitSon2'>请选择内容</p>

            <div
              className='A11TitSonTxt'
              onClick={() => setInpTxt({ type: 1, txt1: '吴应', txt2: '子远', txt3: '南昌' })}
            >
              <img src={`${baseURL}base/txt2.png`} alt='' />
              <img
                style={{ opacity: inptxt.type === 1 ? '1' : '' }}
                src={`${baseURL}base/txt2Ac.png`}
                alt=''
              />
            </div>
            <div
              className='A11TitSonTxt2'
              onClick={() =>
                setInpTxt({
                  type: 2,
                  txt1: '吴应年',
                  txt2: '子远',
                  txt3: '南昌都乡吉阳里'
                })
              }
            >
              <img src={`${baseURL}base/txt1.png`} alt='' />
              <img
                style={{ opacity: inptxt.type === 2 ? '1' : '' }}
                src={`${baseURL}base/txt1Ac.png`}
                alt=''
              />
            </div>

            {txtShow ? null : (
              <BtnRight title='返回' clickSon={() => setBiShow(false)} imgName='back' />
            )}

            {/* 填完信息出来的文字盒子 */}
            <div
              className='A11txtBox'
              style={{ opacity: txtShow ? '1' : '0' }}
              dangerouslySetInnerHTML={{ __html: txtRes }}
            ></div>

            {/* 底部按钮 */}
            <div
              className='Tiebtn'
              onClick={btnStartFu}
              hidden={!inptxt.type || txtShow}
              style={{ opacity: isOk ? '1' : '0.5', pointerEvents: isOk ? 'auto' : 'none' }}
            >
              投名帖
            </div>

            {/* 右侧自定义输入 */}
            <div className='TieRight' hidden={!inptxt.type}>
              <div className='TieRight1'>自定义内容</div>
              <div className='TieRight2'>
                <div>姓名</div>
                <div>
                  <input
                    maxLength={4}
                    value={inptxt.txt1}
                    onChange={e =>
                      setInpTxt({ ...inptxt, txt1: e.target.value.replace(/\s+/g, '') })
                    }
                  />
                </div>
              </div>

              <div className='TieRight2'>
                <div>表字</div>
                <div>
                  <input
                    maxLength={4}
                    value={inptxt.txt2}
                    onChange={e =>
                      setInpTxt({ ...inptxt, txt2: e.target.value.replace(/\s+/g, '') })
                    }
                  />
                </div>
              </div>

              <div className='TieRight2'>
                <div>籍贯</div>
                <div>
                  <input
                    maxLength={10}
                    value={inptxt.txt3}
                    onChange={e =>
                      setInpTxt({ ...inptxt, txt3: e.target.value.replace(/\s+/g, '') })
                    }
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      ) : null}

      {/* 名帖动画 */}

      {/* 最后一个过长动画 */}
      {imgNow ? (
        <EndVideo lastVideo={lastVideo} src={baseURL + myData.base.lastVideo} path='/visit' />
      ) : null}
    </div>
  )
}

const MemoA11base = React.memo(A11base)

export default MemoA11base