vite-kankan-web/src/index/views/home/index.tsx

import { defineComponent, onMounted, ref } from 'vue';
import { storeToRefs } from 'pinia';
import { useRoute } from 'vue-router';
import Other from './components/other';
import Menu from './components/menu';
import GuiLoading from './components/gui-loading';
import Popup from './components/popup/index.vue';
import HotSpotList from './components/hot-spot-list';
import type { HotDataType } from '@/types';
import useBaseStore from '@/store/module/base';
import { CAMERA_TYPE_ENUM, CameraTypeMap } from '@/types/home';
import './index.scss';

export default defineComponent({
  name: 'home',
  components: {
    Other,
    GuiLoading,
    Popup,
  },
  setup() {
    const baseStore = useBaseStore();
    const { checkedHotData, hotVisible } = storeToRefs(baseStore);
    const route = useRoute();
    const cameraMode = ref(CAMERA_TYPE_ENUM.PANORAMA);

    const init = async () => {
      // @ts-ignore
      const kankan = new KanKan({
        dom: '#player',
        num: route.query.m,
        server: 'https://www.4dkankan.com',
      });

      kankan.use('MinMap', {
        theme: {
          camera_fillStyle: '#000000',
        },
      });

      // 热点
      kankan
        .use('TagView', {
          // 自定义热点图标
          // render(data) {
          //   return `<div>${data.title}</div>`
          // }
        })
        .then((TagView) => {
          window.TagView = TagView;
          // 监听手动点击事件
          TagView.on('click', (e) => {
            console.log(e);
            const isLink = e.data.title.startsWith('(link)');

            if (isLink) {
              const regex = new RegExp(`<\/?p[^>]*>`, 'g');
              const link = e.data.content.replace(regex, '');
              const isHttp = link.startsWith('http');
              window.location.href = isHttp ? link : `https://scene.4dage.com${link}`;
            } else {
              // this.openHotFu(e.data);
              baseStore.setState('checkedHotData', e.data);
              baseStore.setState('hotVisible', true);
            }
          });
        });

      // 全部热点数据
      kankan.store.on('tags', (tags) => {
        baseStore.setState('hotList', tags.tags);
      });

      // 监听看看的模式
      kankan.Camera.on('mode.beforeChange', ({ toMode }) => {
        cameraMode.value = CameraTypeMap[toMode];
      });

      // 有关球幕视频控制背景音乐
      kankan.Scene.on('panorama.videorenderer.startvideo', () => {
        // 进入球幕视频
        handleBgMusic(false);
      });
      kankan.Scene.on('panorama.videorenderer.resumerender', () => {
        // 进入球幕视频
        handleBgMusic(false);
      });
      kankan.Scene.on('panorama.videorenderer.suspendrender', () => {
        // 退出球幕视频
        handleBgMusic(true);
      });

      kankan.render();

      window.kankan = kankan;
      baseStore.setState('kankanInited', true);
    };

    const handleBgMusic = (type = true) => {
      if (type) {
        baseStore.bgMusicDom?.play();
      } else {
        baseStore.bgMusicDom?.pause();
      }
      baseStore.setState('bgMusicPlaying', type);
    };

    const closeHotDetail = () => {
      baseStore.setState('hotVisible', false);
    };

    let once = false;
    const handlePageClick = () => {
      if (once) return;

      handleBgMusic();
      once = true;
    };

    onMounted(() => {
      init();
    });

    return {
      hotVisible,
      checkedHotData,
      cameraMode,
      closeHotDetail,
      handlePageClick,
    };
  },
  render() {
    return (
      <div class="home" onClick={this.handlePageClick}>
        {/* 进度条加载 */}
        <GuiLoading />

        {/* 加载初始页面 */}
        <div id="gui-thumb" />

        {/* 热点弹出框 */}
        <Popup
          hotData={this.checkedHotData}
          visible={this.hotVisible}
          onUpdate:visible={this.closeHotDetail}
        />

        {/* 场景canvs主容器 */}
        <div id="player" />

        {/* 底部菜单 */}
        <div id="gui-parent">
          {/* 热点气泡 */}
          <div id="hot" />

          <div id="gui">
            {/* 热点列表 */}
            <HotSpotList />

            {/* 底部菜单 */}
            <Menu mode={this.cameraMode} />

            {/* <div class="home_logo">
              <img src="images/btm_logo.png" />
              <span>提供技术支持</span>
            </div> */}
          </div>

          <Other />
        </div>
      </div>
    );
  },
});