|
|
@@ -1,86 +1,131 @@
|
|
|
<template>
|
|
|
- <ul class="menu" >
|
|
|
+ <ul class="menu">
|
|
|
<li @click="onIsShowList">
|
|
|
- <img :src="require(`@/assets/images/icon/${isShowScenesList ? 'function_off.svg' : 'function_on.svg'}`)" alt="" />
|
|
|
+ <img
|
|
|
+ :src="
|
|
|
+ require(`@/assets/images/icon/${
|
|
|
+ isShowScenesList ? 'function_off.svg' : 'function_on.svg'
|
|
|
+ }`)
|
|
|
+ "
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
</li>
|
|
|
- <template v-if="currentScene.type == '4dkk'">
|
|
|
- <li :class="{ disabled: isPlayTours || flying }" @click="onModeChange('panorama')">
|
|
|
- <img :src="require(`@/assets/images/icon/${mode=='panorama'?'roaming_selected':'roaming_normal'}.svg`)" alt="" />
|
|
|
- </li>
|
|
|
-
|
|
|
- <li :class="{ disabled: isPlayTours || flying }" @click="onModeChange('floorplan')">
|
|
|
- <img :src="require(`@/assets/images/icon/${mode=='floorplan'?'plane_selected':'plane_normal'}.svg`)" alt="" />
|
|
|
- </li>
|
|
|
-
|
|
|
- <li :class="{ disabled: isPlayTours || flying }" @click="onModeChange('dollhouse')">
|
|
|
- <img :src="require(`@/assets/images/icon/${mode=='dollhouse'?'3d_selected':'3d_normal'}.svg`)" alt="" />
|
|
|
- </li>
|
|
|
-
|
|
|
- <li class="daolan" @click.stop="playTour" v-if="toursList.length>0">
|
|
|
- <img :src="require(`@/assets/images/icon/${isPlayTours?'pause01':'playing01'}.svg`)" alt="" />
|
|
|
- <span>{{$t('menu.tour')}}</span>
|
|
|
- <img @click.stop="openTours" :class="{active:showTours}" class="jiantou"
|
|
|
- :src="require(`@/assets/images/icon/expand_arrows@2x.png`)" alt="" />
|
|
|
- </li>
|
|
|
-
|
|
|
- </template>
|
|
|
+ <template v-if="currentScene.type == '4dkk'">
|
|
|
+ <li
|
|
|
+ :class="{ disabled: isPlayTours || flying }"
|
|
|
+ @click="onModeChange('panorama')"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ :src="
|
|
|
+ require(`@/assets/images/icon/${
|
|
|
+ mode == 'panorama' ? 'roaming_selected' : 'roaming_normal'
|
|
|
+ }.svg`)
|
|
|
+ "
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li
|
|
|
+ :class="{ disabled: isPlayTours || flying }"
|
|
|
+ @click="onModeChange('floorplan')"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ :src="
|
|
|
+ require(`@/assets/images/icon/${
|
|
|
+ mode == 'floorplan' ? 'plane_selected' : 'plane_normal'
|
|
|
+ }.svg`)
|
|
|
+ "
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li
|
|
|
+ :class="{ disabled: isPlayTours || flying }"
|
|
|
+ @click="onModeChange('dollhouse')"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ :src="
|
|
|
+ require(`@/assets/images/icon/${
|
|
|
+ mode == 'dollhouse' ? '3d_selected' : '3d_normal'
|
|
|
+ }.svg`)
|
|
|
+ "
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="daolan" @click.stop="playTour" v-if="toursList.length > 0">
|
|
|
+ <img
|
|
|
+ :src="
|
|
|
+ require(`@/assets/images/icon/${
|
|
|
+ isPlayTours ? 'pause01' : 'playing01'
|
|
|
+ }.svg`)
|
|
|
+ "
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <span>{{ $t("menu.tour") }}</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 { ref, watch, computed, onMounted, nextTick, watchEffect } from "vue";
|
|
|
import { useStore } from "vuex";
|
|
|
const store = useStore();
|
|
|
const toursList = computed(() => store.getters["fdkk/toursList"]);
|
|
|
|
|
|
-const isShowScenesList = computed(() => store.getters["functions/isShowScenesList"]);
|
|
|
+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 openTours = () => {
|
|
|
if (isShowScenesList.value) {
|
|
|
store.commit("functions/setShowScenesList", false);
|
|
|
}
|
|
|
-
|
|
|
- store.commit('fdkk/setShowToursList', !showTours.value)
|
|
|
-}
|
|
|
+
|
|
|
+ store.commit("fdkk/setShowToursList", !showTours.value);
|
|
|
+};
|
|
|
|
|
|
const playTour = () => {
|
|
|
- store.commit('fdkk/setToursStatus', !toursStatus.value)
|
|
|
-}
|
|
|
+ store.commit("fdkk/setToursStatus", !toursStatus.value);
|
|
|
+};
|
|
|
|
|
|
const onIsShowList = (data) => {
|
|
|
if (showTours.value) {
|
|
|
- store.commit('fdkk/setShowToursList', false)
|
|
|
+ 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
|
|
|
- }
|
|
|
- },
|
|
|
- "*"
|
|
|
- );
|
|
|
-}
|
|
|
-
|
|
|
+const onModeChange = (name) => {
|
|
|
+ document.querySelector("#fdkkifr") &&
|
|
|
+ document.querySelector("#fdkkifr").contentWindow.postMessage(
|
|
|
+ {
|
|
|
+ source: "qjkankan",
|
|
|
+ event: "setMode",
|
|
|
+ params: {
|
|
|
+ name: name,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ "*"
|
|
|
+ );
|
|
|
+};
|
|
|
|
|
|
-onMounted(() => {
|
|
|
-})
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -91,13 +136,13 @@ onMounted(() => {
|
|
|
display: flex;
|
|
|
z-index: 9;
|
|
|
|
|
|
- >li {
|
|
|
+ > li {
|
|
|
width: 36px;
|
|
|
height: 36px;
|
|
|
margin: 0 10px;
|
|
|
cursor: pointer;
|
|
|
|
|
|
- >img {
|
|
|
+ > img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
@@ -108,7 +153,7 @@ onMounted(() => {
|
|
|
width: auto;
|
|
|
align-items: center;
|
|
|
|
|
|
- >img {
|
|
|
+ > img {
|
|
|
width: 36px;
|
|
|
height: 36px;
|
|
|
}
|
|
|
@@ -116,14 +161,15 @@ onMounted(() => {
|
|
|
.jiantou {
|
|
|
margin-left: -4px;
|
|
|
transform: rotate(180deg);
|
|
|
- transition: .3s ease transform;
|
|
|
+ transition: 0.3s ease transform;
|
|
|
|
|
|
&.active {
|
|
|
transform: none;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- >span {}
|
|
|
+ > span {
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
gemercheung