vite-scene-web/src/index/views/home/components/menu/index.syjy.vue

<template>
  <div class="pinBottom-container">
    <div class="pinBottom left">
      <div class="viewContainer">
        <div id="previous" class="previous desktop-only ui-icon" style="display: none">
          <a>
            <img :src="PauseIcon" width="24" height="24" data-original-title="播放" />
          </a>
        </div>
        <div id="play" class="ui-icon" data-original-title="播放">
          <a>
            <img :src="PauseIcon" width="24" height="24" title="播放" />
          </a>
        </div>
        <div id="pause" class="ui-icon" style="display: none">
          <a>
            <img title="暂停" :src="PlayIcon" width="24" height="24" />
          </a>
        </div>
        <div id="next" class="next desktop-only ui-icon wide" style="display: none">
          <a>
            <i title="" class="icon icon-dpad-right" data-original-title="下一个"></i>
          </a>
        </div>
        <div id="gui-modes-map" class="ui-icon double active">
          <div data-original-title="导览" id="pullTab" title="导览" />

          <div id="hotList" title="热点列表" data-original-title="热点列表" style="display: none" />
          <div
            data-original-title="迷你模型"
            id="gui-modes-dollhouse"
            title="迷你模型"
            class=""
          ></div>
          <div data-original-title="俯视图" id="gui-modes-floorplan" title="俯视图"></div>
          <div data-original-title="VR" id="vr" title="" style="display: none"></div>
          <div
            data-original-title="消除外壳"
            id="gui-remove-face"
            title=""
            style="display: none; float: left"
          >
            <img class="icon icon-inside" src="/images/face.jpg" />
          </div>
        </div>
      </div>
    </div>
    <div class="pinBottom right hideTarget">
      <div class="rightViewContainer clearfix">
        <div class="ui-icon wide home-btn" title="首页" @click="goToHome"></div>
        <div id="sharing" class="ui-icon wide" title="分享" @click="shareVisible = true"></div>
        <div id="volume" class="ui-icon wide" style="display: none"></div>
        <div id="vr" class="ui-icon wide hidden" style="display: none">
          <a>
            <i title="{[{ VIEW_IN_VR }]}" class="icon icon-webvr"></i>
          </a>
        </div>
        <div
          id="gui-fullscreen"
          class="ui-icon wide"
          data-placement="top"
          title="{[{ VIEW_FULLSCREEN }]}"
          style="display: none"
        >
          <a>
            <i class="icon icon-fullscreen"></i>
          </a>
        </div>
        <div
          id="gui-fullscreen-exit"
          class="ui-icon wide"
          data-placement="top"
          title="{[{ EXIT_FULLSCREEN }]}"
          style="display: none"
        >
          <a>
            <i class="icon icon-fullscreen-exit"></i>
          </a>
        </div>
        <div class="pull-right terms terms2"></div>
      </div>
    </div>
  </div>

  <share-popup v-model:visible="shareVisible" />
</template>

<script setup lang="ts">
  import { onMounted, onUnmounted, ref } from 'vue';
  import PauseIcon from '@/assets/images/syjy/icon-manyou-1-min.png';
  import PlayIcon from '@/assets/images/syjy/icon-manyou-min.png';
  import { homeApi } from '@/api';
  import SharePopup from '../share-popup/index.vue';

  let helperVisible = false;
  const starSum = ref(0);
  const shareVisible = ref(false);

  const closeHelper = () => {
    window.$('#interaction-modal').removeClass('fadeIn');
    helperVisible = false;
  };

  const handleKeydown = () => {
    helperVisible && closeHelper();
  };
  const handleClick = (e: MouseEvent | TouchEvent) => {
    const clickedElement = e.target;
    // @ts-ignore
    const modalElement = clickedElement?.closest('#interaction-modal');
    // @ts-ignore
    const btnElement = clickedElement?.closest('.helper-btn');
    if (!modalElement && !btnElement && helperVisible) {
      closeHelper();
    }
  };

  const getDetail = async () => {
    const { data } = await homeApi.getSceneDetail(window.number);

    if (!data) return;
    starSum.value = data.starSum;
  };

  const goToHome = () => {
    location.href = 'https://houseoss.4dkankan.com/project/syjy/mobile/index.html';
  };

  onMounted(() => {
    getDetail();

    window.addEventListener('keydown', handleKeydown);
    window.addEventListener('click', handleClick);
    window.addEventListener('touchmove', handleClick);
  });

  onUnmounted(() => {
    window.removeEventListener('keydown', handleKeydown);
    window.removeEventListener('click', handleClick);
    window.removeEventListener('touchmove', handleClick);
  });
</script>

<style lang="scss" scoped>
  @use './index.syjy.scss';
</style>