HeNan_HanJia/Code/src/components/BaseImg/index.tsx

import React, { useCallback, useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import classNames from 'classnames'
import { baseURL, myData } from '@/utils/http'
import { domDelOwnFu } from '@/utils/utilsSome'

type Props = {
  isShow: boolean //是否显示
  iconSrc: string //icon 图标
  parentFu: () => void //点击继续的方法（调用父亲）
  bgImg?: string
  num?: number
}

function BaseImg({ isShow, iconSrc, parentFu, bgImg, num = 30 }: Props) {
  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)
    }, num)
  }, [loding, num])

  const btnStartFu = useCallback(() => {
    if (loding >= 100) {
      parentFu()
      // 0.5s之后删除自己
      setTimeout(() => {
        domDelOwnFu('#BaseImg')
      }, 500)
    }
  }, [loding, parentFu])

  return (
    <div
      id='BaseImg'
      className={classNames(styles.BaseImg, isShow ? styles.BaseImgHide : '')}
      style={{ backgroundImage: `url(${bgImg ? bgImg : ''})` }}
    >
      <img className='BIlogo' src={iconSrc} alt='' />
      <div className='BIbaseBtn' onClick={btnStartFu}>
        {/* anpg动图 */}
        <div className='BIcon'>
          <img src={`${baseURL}visit/arrow.png`} alt='' />
        </div>

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

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

const MemoBaseImg = React.memo(BaseImg)

export default MemoBaseImg