feat: 修改播放进度以及禁用失效

src/components/Controls/Panel/Guide.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-show="player.showWidgets" class="root-panel">
-    <div class="guide-panel" :class="{disable:disable}">
+    <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,22 +8,14 @@
             <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>
@@ -44,11 +36,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>
@@ -57,14 +49,14 @@
 </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;
 
@@ -74,47 +66,47 @@ 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,
     });
     progressNum.value = 0;
 
     player.selectPart(id).then(() => {
-      // store.commit('tour/setData', { isPlay: true });
+      disable.value = false;
       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", {
+      disable.value = false;
+
+      store.commit('tour/setData', {
         frameId: id,
       });
-      disable.value = false;
     });
   }
   // mySwiper.slideTo(id);
@@ -127,10 +119,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,
   });
@@ -139,23 +131,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;
@@ -163,9 +155,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: {
@@ -180,7 +172,7 @@ const brandScroll = () => {
 };
 
 const onClickHandler = async () => {
-  console.log("onClickHandler");
+  console.log('onClickHandler');
   if (isPlay.value) {
     let player = await getApp().TourManager.player;
     player.pause();
@@ -196,7 +188,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) {
@@ -204,23 +196,25 @@ 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;
+  let currFrameId = null;
   let currProgress = 0;
-  let currFrames = 0;
+  let FrameLength = 0;
+  let currFrameProgress = 0;
   // player.on('progress', (data) => {
   //   // if (tours.value.length == 1) {
   //   //   progressNum.value = data.progress * 100;
@@ -229,11 +223,11 @@ const hanlderTour = async () => {
   //   if (currPartId != data.partId) {
   //     mySwiper.slideTo(data.partId);
   //     currPartId = data.partId;
-  //     currFrames = Math.max(tours.value[data.partId].list.length - 1, 1);
+  //     FrameLength = Math.max(tours.value[data.partId].list.length - 1, 1);
   //     currProgress = 0;
   //   } else {
-  //     console.log(currFrames);
-  //     currProgress += data.progress / currFrames;
+  //     console.log(FrameLength);
+  //     currProgress += data.progress / FrameLength;
   //     if (currProgress >= 100) {
   //       currProgress = 100;
   //     }
@@ -247,7 +241,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,10 +252,23 @@ const hanlderTour = async () => {
     if (currPartId != data.partId) {
       mySwiper.slideTo(data.partId);
       currPartId = data.partId;
-      currFrames = tours.value[data.partId].list.length;
+      FrameLength = tours.value[data.partId].list.length;
       currProgress = 0;
+      currFrameProgress = 0;
     } else {
-      currProgress += data.progress / currFrames;
+      FrameLength = tours.value[data.partId].list.length;
+      let precent = (data.frameId + 1) / FrameLength;
+
+      if (currFrameId != data.frameId) {
+        currFrameId = data.frameId;
+        currFrameProgress = currProgress;
+      } else {
+        currProgress = (data.progress / FrameLength) * 100 + currFrameProgress;
+      }
+      // currProgress = data.progress / FrameLength;
+
+      // console.log(currProgress);
+
       if (currProgress >= 100) {
         currProgress = 100;
       }
@@ -270,7 +277,7 @@ const hanlderTour = async () => {
     }
     // }
 
-    store.commit("tour/setData", {
+    store.commit('tour/setData', {
       partId: data.partId,
       frameId: data.frameId,
       isPlay: true,
@@ -288,8 +295,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>
@@ -380,7 +387,7 @@ onMounted(() => {
                 left: 0;
                 width: 100%;
                 height: 100%;
-                content: "";
+                content: '';
                 display: inline-block;
                 background: rgba(24, 24, 24, 0.5);
               }
@@ -398,7 +405,7 @@ onMounted(() => {
                 left: 50%;
                 transform: translateX(-50%);
                 &::after {
-                  content: "";
+                  content: '';
                   width: var(--w);
                   background: var(--editor-main-color);
                   height: 100%;