feat: 添加切换时禁用

src/components/Controls/Panel/Guide.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-show="player.showWidgets" class="root-panel">
-    <div class="guide-panel">
+    <div class="guide-panel" :class="{disable:disable}">
       <div class="g-con">
         <div class="swiper-container" id="sw-guide">
           <!-- <ul class="swiper-wrapper" v-if="tours.length > 1"> -->
@@ -8,14 +8,22 @@
             <li
               @click.stop="changeItem('part', index)"
               class="swiper-slide"
-              :style="`background-image:url(${i.frameId ? common.changeUrl(i.list[i.frameId].enter.cover) : common.changeUrl(i.list[0].enter.cover)});`"
+              :style="`background-image:url(${
+                i.frameId
+                  ? common.changeUrl(i.list[i.frameId].enter.cover)
+                  : common.changeUrl(i.list[0].enter.cover)
+              });`"
               :class="{ active: isPlay && partId == index }"
               v-for="(i, index) in tours"
               :key="index"
             >
               <div>{{ i.name }}</div>
 
-              <span v-if="partId == index && progressNum > 0" class="bar" :style="{ '--w': progressNum + '%' }"></span>
+              <span
+                v-if="partId == index && progressNum > 0"
+                class="bar"
+                :style="{ '--w': progressNum + '%' }"
+              ></span>
             </li>
           </ul>
           <!-- <ul class="swiper-wrapper" v-else>
@@ -36,11 +44,11 @@
         <div class="back">
           <div @click.stop="back">
             <ui-icon type="back"></ui-icon>
-            <div>{{ $t('common.back') }}</div>
+            <div>{{ $t("common.back") }}</div>
           </div>
           <div @click.stop="playTour">
             <ui-icon :type="isPlay ? 'pause' : 'preview'"></ui-icon>
-            <div>{{ isPlay ? $t('common.pause') : $t('common.play') }}</div>
+            <div>{{ isPlay ? $t("common.pause") : $t("common.play") }}</div>
           </div>
         </div>
       </div>
@@ -49,41 +57,42 @@
 </template>
 
 <script setup>
-import { useStore } from 'vuex';
-import common from '@/utils/common';
-import { onMounted, watch, computed, ref, nextTick } from 'vue';
-import { useApp, getApp } from '@/app';
-import { useMusicPlayer } from '@/utils/sound';
+import { useStore } from "vuex";
+import common from "@/utils/common";
+import { onMounted, watch, computed, ref, nextTick } from "vue";
+import { useApp, getApp } from "@/app";
+import { useMusicPlayer } from "@/utils/sound";
 
-import { useI18n, getLocale } from '@/i18n';
-const { t } = useI18n({ useScope: 'global' });
+import { useI18n, getLocale } from "@/i18n";
+const { t } = useI18n({ useScope: "global" });
 
 let timer = null;
 
 const store = useStore();
 const musicPlayer = useMusicPlayer();
-const flying = computed(() => store.getters['flying']);
 const isSelect = ref(false);
+const disable = ref(false);
 
 const isPlay = computed(() => {
-  let status = store.getters['tour/isPlay'];
-  let map = document.querySelector('.kankan-app div[xui_min_map]');
+  let status = store.getters["tour/isPlay"];
+  let map = document.querySelector(".kankan-app div[xui_min_map]");
   if (map) {
     if (status) {
-      map.classList.add('disabled');
+      map.classList.add("disabled");
     } else {
-      map.classList.remove('disabled');
+      map.classList.remove("disabled");
     }
   }
   return status;
 });
 
-const partId = computed(() => store.getters['tour/partId']);
-const frameId = computed(() => store.getters['tour/frameId']);
+const partId = computed(() => store.getters["tour/partId"]);
+const frameId = computed(() => store.getters["tour/frameId"]);
 const changeItem = async (type, id) => {
+  disable.value = true;
   let player = await getApp().TourManager.player;
-  if (type == 'part') {
-    store.commit('tour/setData', {
+  if (type == "part") {
+    store.commit("tour/setData", {
       frameId: 0,
       partId: id,
     });
@@ -94,15 +103,18 @@ const changeItem = async (type, id) => {
       if (!isPlay.value) {
         return;
       }
-      store.commit('tour/setData', {
+      store.commit("tour/setData", {
         isPlay: true,
       });
       player.play(id);
+      disable.value = false;
     });
   } else {
-    player.selectFrame(id).then(() => {});
-    store.commit('tour/setData', {
-      frameId: id,
+    player.selectFrame(id).then(() => {
+      store.commit("tour/setData", {
+        frameId: id,
+      });
+      disable.value = false;
     });
   }
   // mySwiper.slideTo(id);
@@ -115,10 +127,10 @@ const changeItem = async (type, id) => {
 const back = async () => {
   let player = await getApp().TourManager.player;
   if (isPlay.value) {
-    store.commit('tour/setData', { isPlay: false });
+    store.commit("tour/setData", { isPlay: false });
     player.pause();
   }
-  store.commit('tour/setData', {
+  store.commit("tour/setData", {
     partId: 0,
     isHome: true,
   });
@@ -127,23 +139,23 @@ const playTour = async () => {
   progressNum.value = 0;
   let player = await getApp().TourManager.player;
   if (isPlay.value) {
-    store.commit('tour/setData', { isPlay: false });
+    store.commit("tour/setData", { isPlay: false });
     player.pause();
   } else {
-    store.commit('tour/setData', { isPlay: true });
+    store.commit("tour/setData", { isPlay: true });
     player.play(partId.value);
   }
 };
 
 const progressNum = ref(0);
 
-const metadata = computed(() => store.getters['scene/metadata']);
+const metadata = computed(() => store.getters["scene/metadata"]);
 
 const controls = computed(() => metadata.value.controls);
 
-const player = computed(() => store.getters['player']);
+const player = computed(() => store.getters["player"]);
 
-const tours = computed(() => store.getters['tour/tours']);
+const tours = computed(() => store.getters["tour/tours"]);
 
 const brandlist = ref([]);
 let mySwiper = null;
@@ -151,9 +163,9 @@ const brandScroll = () => {
   nextTick(() => {
     let t = setTimeout(() => {
       clearTimeout(t);
-      mySwiper = new Swiper('#sw-guide', {
+      mySwiper = new Swiper("#sw-guide", {
         freeMode: true,
-        slidesPerView: 'auto',
+        slidesPerView: "auto",
         spaceBetween: 6,
 
         on: {
@@ -168,7 +180,7 @@ const brandScroll = () => {
 };
 
 const onClickHandler = async () => {
-  console.log('onClickHandler');
+  console.log("onClickHandler");
   if (isPlay.value) {
     let player = await getApp().TourManager.player;
     player.pause();
@@ -184,7 +196,7 @@ const cancelTimer = () => {
 
 const hanlderTour = async () => {
   let player = await getApp().TourManager.player;
-  player.on('play', (data) => {
+  player.on("play", (data) => {
     progressNum.value = 0;
     musicPlayer.pause(true);
     // if (tours.value.length > 1) {
@@ -192,18 +204,18 @@ const hanlderTour = async () => {
     //     hanlderTourPartPlay(time)
     // }
   });
-  player.on('pause', (tours) => {
+  player.on("pause", (tours) => {
     // console.log('pause', player);
     musicPlayer.resume();
 
     progressNum.value = 0;
     cancelTimer();
-    store.commit('tour/setData', { isPlay: false });
+    store.commit("tour/setData", { isPlay: false });
   });
-  player.on('end', (tours) => {
+  player.on("end", (tours) => {
     musicPlayer.resume();
     progressNum.value = 100;
-    store.commit('tour/setData', { isPlay: false });
+    store.commit("tour/setData", { isPlay: false });
     cancelTimer();
   });
   let currPartId = null;
@@ -235,7 +247,7 @@ const hanlderTour = async () => {
   //   store.commit('tour/setData', { partId: data.partId, frameId: data.frameId, isPlay: true });
   // });
 
-  player.on('progress', (data) => {
+  player.on("progress", (data) => {
     // if (tours.value.length == 1) {
     //     progressNum.value = data.progress * 100
     // } else {
@@ -258,7 +270,11 @@ const hanlderTour = async () => {
     }
     // }
 
-    store.commit('tour/setData', { partId: data.partId, frameId: data.frameId, isPlay: true });
+    store.commit("tour/setData", {
+      partId: data.partId,
+      frameId: data.frameId,
+      isPlay: true,
+    });
   });
 
   // nextTick(() => {
@@ -272,8 +288,8 @@ onMounted(() => {
   });
   nextTick(() => {
     let player = document.querySelector('.player[name="main"]');
-    player.addEventListener('touchstart', onClickHandler);
-    player.addEventListener('click', onClickHandler);
+    player.addEventListener("touchstart", onClickHandler);
+    player.addEventListener("click", onClickHandler);
   });
 });
 </script>
@@ -291,6 +307,10 @@ onMounted(() => {
   .guide-panel {
     width: 100%;
     position: relative;
+    &.disable {
+      opacity: 0.8;
+      pointer-events: none;
+    }
     .g-con {
       background: rgba(0, 0, 0, 0.3);
       border-radius: 4px;
@@ -360,7 +380,7 @@ onMounted(() => {
                 left: 0;
                 width: 100%;
                 height: 100%;
-                content: '';
+                content: "";
                 display: inline-block;
                 background: rgba(24, 24, 24, 0.5);
               }
@@ -378,7 +398,7 @@ onMounted(() => {
                 left: 50%;
                 transform: translateX(-50%);
                 &::after {
-                  content: '';
+                  content: "";
                   width: var(--w);
                   background: var(--editor-main-color);
                   height: 100%;