qjkankan_v1.1.1/packages/qjkankan-view/src/components/UIGather/menu.vue

<template>
  <ul class="menu">
    <li @click="onIsShowList"
      v-if="!((metadata.catalogRoot && metadata.catalogRoot.length == 1) && scenes.length == 1 && secondaryList.length == 1)">
      <img :src="require(`@/assets/images/icon/${isShowScenesList ? 'function_off@2x.png' : 'function_on@2x.png'}`)"
        alt="" />
    </li>


    <div class="v-link"
      v-if="currentScene.type == '4dkk' && fdkkmetadata && (fdkkmetadata.controls.showPanorama || fdkkmetadata.controls.showFloorplan || fdkkmetadata.controls.showDollhouse)">
    </div>

    <template v-if="currentScene.type == '4dkk'">

      <li v-if="fdkkmetadata && fdkkmetadata.controls.showPanorama" :class="{ disabled: isPlayTours || flying }"
        @click="onModeChange('panorama')">
        <img :src="require(`@/assets/images/icon/${mode == 'panorama' ? 'roaming_selected' : 'roaming_normal'}@2x.png`)"
          alt="" />
      </li>

      <li v-if="fdkkmetadata && fdkkmetadata.controls.showFloorplan" :class="{ disabled: isPlayTours || flying }"
        @click="onModeChange('floorplan')">
        <img :src="require(`@/assets/images/icon/${mode == 'floorplan' ? 'plane_selected' : 'plane_normal'}@2x.png`)"
          alt="" />
      </li>

      <li v-if="fdkkmetadata && fdkkmetadata.controls.showDollhouse" :class="{ disabled: isPlayTours || flying }"
        @click="onModeChange('dollhouse')">
        <img :src="require(`@/assets/images/icon/${mode == 'dollhouse' ? '3d_selected' : '3d_normal'}@2x.png`)"
          alt="" />
      </li>

      <div class="v-link"
        v-if="toursList.length > 0 && fdkkmetadata && (fdkkmetadata.controls.showPanorama || fdkkmetadata.controls.showFloorplan || fdkkmetadata.controls.showDollhouse)">
      </div>

      <li class="daolan" @click.stop="playTour" v-if="toursList.length > 0">
        <img :src="require(`@/assets/images/icon/${isPlayTours ? 'pause01' : 'playing01'}@2x.png`)" alt="" />
        <span>导览</span>
        <img @click.stop="openTours" :class="{ active: showTours }" class="jiantou"
          :src="require(`@/assets/images/icon/expand_arrows@2x.png`)" alt="" />
      </li>

    </template>

  </ul>
</template>

<script setup>
import { ref, watch, computed, onMounted, nextTick } from "vue";
import { useStore } from "vuex";
const store = useStore();
const toursList = computed(() => store.getters["fdkk/toursList"]);

const isShowScenesList = computed(() => store.getters["functions/isShowScenesList"]);
const toursStatus = computed(() => store.getters["fdkk/toursStatus"]);
const isPlayTours = computed(() => store.getters["fdkk/isPlayTours"]);
const flying = computed(() => store.getters["fdkk/isFlying"]);
const mode = computed(() => store.getters["fdkk/mode"]);


const showTours = computed(() => store.getters["fdkk/isShowToursList"]);


const currentScene = computed(() => store.getters["scene/currentScene"]);
const metadata = computed(() => store.getters["scene/metadata"]);
const scenes = computed(() => store.getters["scene/list"]);
const secondaryList = computed(() => store.getters["scene/secondaryList"]);
const fdkkmetadata = computed(() => store.getters["fdkk/metadata"]);


const openTours = () => {
  if (isShowScenesList.value) {
    store.commit("functions/setShowScenesList", false);
  }

  store.commit('fdkk/setShowToursList', !showTours.value)
}

const playTour = () => {
  store.commit('fdkk/setToursStatus', !toursStatus.value)
}

const onIsShowList = (data) => {
  if (showTours.value) {
    store.commit('fdkk/setShowToursList', false)
  }
  store.commit("functions/setShowScenesList", !isShowScenesList.value);
};

const onModeChange = name => {
  document.querySelector('#fdkkifr') && document.querySelector('#fdkkifr').contentWindow.postMessage(
    {
      source: "qjkankan",
      event: "setMode",
      params: {
        name: name
      }
    },
    "*"
  );
}


onMounted(() => {
})
</script>

<style lang="scss" scoped>
.menu {
  position: absolute;
  left: 20px;
  bottom: 8px;
  display: flex;
  z-index: 9;

  >li {
    margin: 0 10px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    >img {
      width: 26px;
      height: 26px;
    }
  }

  .v-link {
    width: 1px;
    height: 26px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 49%, rgba(255, 255, 255, 0) 100%);
  }

  .daolan {
    display: flex;
    width: auto;
    align-items: center;

    >img {
      width: 26px;
      height: 26px;
    }

    .jiantou {
      margin-left: -4px;
      transform: rotate(180deg);
      transition: .3s ease transform;

      &.active {
        transform: none;
      }
    }

    >span {}
  }
}
</style>