RMDX2502116/src/pages/A0base/index.tsx

import React, { useState, useEffect, useMemo } from 'react'
import styles from './index.module.scss'
import classNames from 'classnames'
import http from '@/utils/http'
import { useHistory, useLocation } from 'react-router-dom'
import StartVideo from './component/startVideo'
import like from './image/icon_like.png'
import share from './image/icon_share.png'
import intro from './image/icon_intro.png'
import arrow from './image/arrow.png'

import { message } from 'antd'
import { Intro, MapIntro } from './component/Intro'
import { Preview } from './component/Preview'
import isMobile from '@/utils/isMobile'
import Panoramic from './component/Panoramic'
const imgArrTemp = [
  { src: 'Bao-0.png', title: '基本情况' },
  { src: 'Bao-1.jpg', title: '休息洽谈区' },
  { src: 'Bao-2.jpg', title: '汇报展示厅' },
  { src: 'Bao-3.jpg', title: '会议室' },
  { src: 'Bao-4.jpg', title: '智慧教室' },
  { src: 'Bao-5.jpg', title: '共享工作室' },
  { src: 'Bao-6.jpg', title: '共享办公区' },
  { src: 'Bao-7.jpg', title: '贵宾接待室' },
  { src: 'Bao-8.jpg', title: '茶憩文印室' },
  { src: 'Bao-9.jpg', title: '休闲展览区' },
  { src: 'Bao-10.jpg', title: '走廊' }
]

const imgArrTemp2 = [
  { src: 'nan-0.png', title: '基本情况' },
  { src: 'nan-1.jpg', title: '校史走廊' },
  { src: 'nan-2.jpg', title: '校友之家' },
  { src: 'nan-3.jpg', title: '专家办公室' },
  { src: 'nan-4.jpg', title: '智慧教室' },
  { src: 'nan-5.jpg', title: '开放办公区' },
  { src: 'nan-6.jpg', title: '会议室' }
]

function Layout({ setIsFloor }: { setIsFloor: (isFloor: boolean) => void }) {
  const history = useHistory()
  return (
    <div className={classNames(styles.layout, isMobile() && styles.layoutMobile)}>
      <div className='back' onClick={() => setIsFloor(false)}>
        <img src={require('./image/back.png')} alt='' />
      </div>
      <div className='layout-container'>
        <div
          className='floor-1'
          onClick={() => {
            history.push('/home?m=SG-NqtcxoVBj5C')
            setTimeout(() => {
              window.location.reload()
            }, 200)
          }}
        >
          <span>楼层23</span>
        </div>
        <div
          className='floor-2'
          onClick={() => {
            history.push('/home?m=SG-dwRgbFq7Fiz')
            setTimeout(() => {
              window.location.reload()
            }, 200)
          }}
        >
          <span>楼层22</span>
        </div>
        <img src={arrow} alt='' className='arrow' />
      </div>
    </div>
  )
}

function A0Base() {
  const location = useLocation()
  const [isEnd, setIsEnd] = useState(location.state ?? false)
  const [showIntro, setShowIntro] = useState(false)
  const [isFloor, setIsFloor] = useState(false)
  const [isPreview, setIsPreview] = useState<[boolean, string]>([false, ''])
  const [likeCount, setLikeCount] = useState(0)
  const [isLike, setIsLike] = useState(false)
  const [isMouseMove, setIsMouseMove] = useState(false)
  const floor22sceneCode = 'SG-dwRgbFq7Fiz'
  // const floor23sceneCode = 'SG-NqtcxoVBj5C'

  useEffect(() => {
    http.get(`https://count.4dage.com/api/count/detail/${floor22sceneCode}`).then(res => {
      setLikeCount(res.data.starSum)
    })
  }, [])

  const handleIntroClick = (isShow: boolean) => {
    setShowIntro(isShow)
  }
  const handleShareClick = () => {
    try {
      if (window.isSecureContext && navigator.clipboard) {
        navigator.clipboard.writeText(window.location.href).then(() => {
          message.success('链接已复制到剪贴板')
        })
      } else {
        // 回退到旧方法
        const textArea = document.createElement('textarea')
        textArea.value = window.location.href
        document.body.appendChild(textArea)
        textArea.select()
        document.execCommand('copy')
        document.body.removeChild(textArea)
        message.success('链接已复制到剪贴板')
      }
    } catch (err) {
      console.error('复制失败:', err)
      // 可提示用户手动复制
      message.error('浏览器不支持自动复制，请手动复制当前链接')
    }
  }
  const handleLikeClick = () => {
    if (isLike) return
    setIsLike(true)
    setTimeout(() => {
      http.get(`https://count.4dage.com/api/count/saveStar/${floor22sceneCode}`).then(res => {
        setLikeCount(likeCount + 1)
        setIsLike(false)
      })
    }, 2000)
  }

  const isWeChat = useMemo(() => /MicroMessenger/i.test(navigator.userAgent), [])
  return (
    <>
      {!isEnd && !isWeChat ? (
        <StartVideo setIsEnd={setIsEnd} />
      ) : (
        <div
          className={classNames(styles.A0base, isMobile() && styles.A0baseMobile)}
          style={{
            backgroundImage: isFloor
              ? isMobile()
                ? `url(${require('./image/M_bg_floor.png')})`
                : `url(${require('./image/bg_floor.png')})`
              : isMobile()
              ? `url(${require('./image/M_bg_map.png')})`
              : `none`
          }}
        >
          {isFloor && !showIntro && <Layout setIsFloor={setIsFloor} />}

          <Panoramic
            setIsFloor={setIsFloor}
            setIsPreview={setIsPreview}
            isDisolay={!isFloor && !isPreview[0]}
            setIsMouseMove={setIsMouseMove}
          />

          {showIntro &&
            (isFloor ? (
              <Intro handleIntroClick={handleIntroClick} />
            ) : (
              <MapIntro handleIntroClick={handleIntroClick} />
            ))}

          {isPreview[0] && (
            <Preview
              imgArr={isPreview[1] === 'baoan' ? imgArrTemp : imgArrTemp2}
              setIsPreview={setIsPreview}
              type={isPreview[1]}
            />
          )}

          {/* logo */}
          <div
            className='A0_logo'
            style={{
              display: isPreview[0] || (isMobile() && showIntro) || isFloor ? 'none' : 'block'
            }}
          >
            <img src={require('./image/logo.png')} alt='' />
          </div>

          {/* 克劳德 */}
          <div className='A0_cloud1'>
            <img
              className={classNames(isMouseMove && 'a0_cloud1move')}
              src={require('./image/cloud1.png')}
              alt=''
            />
            <img
              className={classNames(isMouseMove && 'a0_cloud1move2')}
              src={require('./image/cloud1.png')}
              alt=''
            />
            <img
              className={classNames(isMouseMove && 'a0_cloud1move3')}
              src={require('./image/cloud1.png')}
              alt=''
            />
          </div>
          <div className={classNames('A0_cloud2', isMouseMove && 'a0_cloud2move')}>
            <img
              style={{}}
              className={classNames(isMouseMove && 'a0_cloud1move4')}
              src={require('./image/cloud2.png')}
              alt=''
            />
            <img
              className={classNames(isMouseMove && 'a0_cloud1move5')}
              style={{
                position: 'absolute',
                right: '0',
                bottom: '-37%'
              }}
              src={require('./image/cloud2.png')}
              alt=''
            />
            <img
              className={classNames(isMouseMove && 'a0_cloud1move5')}
              style={{
                position: 'absolute',
                right: '0px',
                bottom: '84px'
              }}
              src={require('./image/cloud1.png')}
              alt=''
            />
          </div>

          {/* 图标栏 */}
          <div
            className='A0_iconBar'
            style={{ display: isPreview[0] || (isMobile() && showIntro) ? 'none' : 'flex' }}
          >
            <div className='A0_icon' onClick={() => handleLikeClick()}>
              <div
                className={classNames(isLike ? 'addLikeAc' : '', 'addLike')}
                style={{ opacity: !isLike ? 0 : 1 }}
              >
                +1
              </div>
              <img className='A0_icon_like' src={like} alt='' />
              <div>{likeCount}次赞</div>
            </div>
            <div className='A0_icon'>
              <img
                className='A0_icon_intro'
                onClick={() => setShowIntro(true)}
                src={intro}
                alt=''
              />
              <div>简介</div>
            </div>
            <div className='A0_icon' onClick={() => handleShareClick()}>
              <img className='A0_icon_share' src={share} alt='' />
              <div>分享</div>
            </div>
          </div>
        </div>
      )}
    </>
  )
}

const MemoA0Base = React.memo(A0Base)

export default MemoA0Base