HeNan_HanJia/Code/src/pages/A3banquet/PanoImg/index.tsx

import React, { useMemo, useState } from 'react'
import styles from './index.module.scss'
import { myData } from '@/utils/http'
import Hot2 from '@/pages/A2visit/PanoVideo/Hot2'
import useDataUrl from '@/components/ownUse/useDataUrl'
function PanoImg() {
  // 0为 第一种模式的热点 其他为第二种
  const [ind, setInd] = useState(-1)

  const data = useMemo(() => {
    if (ind !== -1) return myData.banquet.hot[ind].data
    else return []
  }, [ind])

  const { dataUrlSame } = useDataUrl()

  return (
    <div className={styles.PanoImg}>
      {/* 待完善 */}
      全景图
      {myData.banquet.hot.map((item, index) => (
        <div className='pvHot' key={index} onClick={() => setInd(index)}>
          <img className='pvHotBase' src={`${dataUrlSame}visit/hot/hotBase.png`} alt='' />
          <img className='pvHotHover' src={dataUrlSame + item.hoverSrc} alt='' />
        </div>
      ))}
      {ind === -1 ? null : (
        <Hot2 data={data} closeFu={() => setInd(-1)} name={myData.banquet.hot[ind].name} />
      )}
    </div>
  )
}

const MemoPanoImg = React.memo(PanoImg)

export default MemoPanoImg