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

import { defineComponent, ref, watch } from 'vue';
import className from 'classname';
import useBaseStore from '@/store/module/base';
import { storeToRefs } from 'pinia';
import { useRoute } from 'vue-router';
import Guide from '../guide';
import { useFullscreen } from '@vueuse/core';
import { CAMERA_TYPE_ENUM } from '@/types/home';
import Rules from '../rules/index.vue';
import type { IRulesMethods } from '@/types';
import './index.scss';

export default defineComponent({
  name: 'HomeMenu',
  props: {
    mode: {
      type: Number,
      default: CAMERA_TYPE_ENUM.PANORAMA,
    },
  },
  setup() {
    const baseStore = useBaseStore();
    const route = useRoute();
    const { isFullscreen, isSupported, toggle } = useFullscreen();
    const { kankanInited, guidePlaying, hotList, hotListVisible, bgMusicDom, bgMusicPlaying } =
      storeToRefs(baseStore);
    const guideVisible = ref(false);
    const rulesRef = ref<IRulesMethods>();

    const handlePlayGuide = async () => {
      const player = await window.kankan.TourManager.player;
      const playing = guidePlaying.value;

      if (playing) {
        player.pause();
      } else {
        player.play();
        guideVisible.value = true;
      }

      baseStore.setState('guidePlaying', !playing);
    };

    const handleDollhouse = () => {
      window.kankan.Camera.dollhouse();
    };
    const handleFloorplan = () => {
      window.kankan.Camera.floorplan();
    };
    const handlePanorama = () => {
      window.kankan.Camera.panorama();
    };
    const openHotList = () => {
      baseStore.setState('hotListVisible', !hotListVisible.value);
    };
    const startMeasure = () => {
      rulesRef.value?.startMeasure();
    };

    const handleBgMusic = () => {
      if (bgMusicPlaying.value) {
        bgMusicDom?.value?.pause();
      } else {
        bgMusicDom?.value?.play();
      }

      baseStore.setState('bgMusicPlaying', !bgMusicPlaying.value);
    };

    watch(kankanInited, async (v) => {
      if (!v) return;

      const detail = await window.kankan.store.get('metadata');

      if (detail.musicFile) {
        // 存在背景音乐
        const dom = document.createElement('audio');
        dom.src = `${import.meta.env.VITE_APP_BACKEND_URL}/scene_view_data/${
          route.query.m
        }/user/music-user.mp3`;
        dom.loop = true;
        document.body.appendChild(dom);
        baseStore.setState('bgMusicDom', dom);
      }
    });

    return {
      hotList,
      hotListVisible,
      isSupported,
      isFullscreen,
      guideVisible,
      guidePlaying,
      bgMusicDom,
      bgMusicPlaying,
      rulesRef,
      toggle,
      openHotList,
      startMeasure,
      handlePlayGuide,
      handleFloorplan,
      handleDollhouse,
      handlePanorama,
      handleBgMusic,
    };
  },
  render() {
    return (
      <>
        {!this.rulesRef?.showRuleBox && (
          <>
            <div
              class={className('pinBottom-container', {
                open: this.guideVisible,
                playing: this.guidePlaying,
                noScroll: !this.guidePlaying,
              })}
            >
              <div class="pinBottom left">
                <div id="play" class="ui-icon" onClick={this.handlePlayGuide}>
                  <a>
                    {!this.guidePlaying ? (
                      <img src="images/play.png" />
                    ) : (
                      <img title="暂停" src="images/pause.png" />
                    )}
                  </a>
                </div>
                <div
                  id="pullTab"
                  class={className({ opened: this.guideVisible })}
                  onClick={() => (this.guideVisible = !this.guideVisible)}
                >
                  <img class="icon icon-inside" src="images/auto.png" title="导览" />
                </div>
                {Boolean(this.hotList.length) && (
                  <div id="hotList" onClick={this.openHotList}>
                    <img class="icon icon-inside" src="images/hotlist.png" title="热点列表" />
                  </div>
                )}
                <div
                  id="gui-modes-inside"
                  class={className({ active: this.mode === CAMERA_TYPE_ENUM.PANORAMA })}
                  onClick={this.handlePanorama}
                >
                  <img class="icon icon-inside" src="images/inside.png" title="全景漫游" />
                </div>
                <div
                  id="gui-modes-dollhouse"
                  class={className({ active: this.mode === CAMERA_TYPE_ENUM.DOLLHOUSE })}
                  onClick={this.handleDollhouse}
                >
                  <img class="icon icon-inside" src="images/dollhouse.png" title="迷你模型" />
                </div>
                <div
                  id="gui-modes-floorplan"
                  class={className({ active: this.mode === CAMERA_TYPE_ENUM.FLOORPLAN })}
                  onClick={this.handleFloorplan}
                >
                  <img class="icon icon-inside" src="images/floor.png" title="俯视图" />
                </div>
              </div>
              <div class="pinBottom right">
                {Boolean(this.bgMusicDom) && (
                  <div id="volume" class="ui-icon wide" onClick={this.handleBgMusic}>
                    {this.bgMusicPlaying ? (
                      <img src="images/Volume btn_on.png" width="24" height="24" />
                    ) : (
                      <img src="images/Volume btn_off.png" width="24" height="24" />
                    )}
                  </div>
                )}

                <div id="rules" class="ui-icon wide" onClick={this.startMeasure}>
                  <img src="images/rules.png" width="24" height="24" />
                </div>

                {this.isSupported && (
                  <div id="gui-fullscreen" class="ui-icon wide" onClick={this.toggle}>
                    {this.isFullscreen ? (
                      <img class="icon icon-fullscreen-exit" src="images/narrow_off.png" />
                    ) : (
                      <img class="icon icon-fullscreen" src="images/enlarge_on.png" />
                    )}
                  </div>
                )}
              </div>
            </div>
          </>
        )}

        <Guide open={this.guideVisible} playing={this.guidePlaying} />
        <Rules ref="rulesRef" />
      </>
    );
  },
});