重构

packages/qjkankan-kankan-view/src/components/Controls/BottomControl.vue

@@ -11,9 +11,9 @@ import { ref } from 'vue'
 import { useApp, getApp } from '@/app'
 import FloorSwitch from './FloorSwitch'
 import tours from './tours'
-import { useMusicPlayer } from '@/utils/sound'
+// import { useMusicPlayer } from '@/utils/sound'
 
-const musicPlayer = useMusicPlayer()
+// const musicPlayer = useMusicPlayer()
 
 const showMusicPlaying = ref(false)
 
@@ -27,8 +27,6 @@ useApp().then(app => {
     app.Scene.on('loaded', () => (show.value = true))
 })
 
-musicPlayer.on('play', () => (showMusicPlaying.value = true))
-musicPlayer.on('pause', () => (showMusicPlaying.value = false))
 </script>
 
 <style lang="scss" scoped>

packages/qjkankan-kankan-view/src/components/Controls/Control.Mobile.vue

@@ -11,9 +11,9 @@ import { ref } from 'vue'
 import { useApp, getApp } from '@/app'
 import FloorSwitch from './FloorSwitch'
 import tours from './tours.mobile'
-import { useMusicPlayer } from '@/utils/sound'
+// import { useMusicPlayer } from '@/utils/sound'
 
-const musicPlayer = useMusicPlayer()
+// const musicPlayer = useMusicPlayer()
 
 const showMusicPlaying = ref(false)
 
@@ -27,8 +27,8 @@ useApp().then(app => {
     app.Scene.on('loaded', () => (show.value = true))
 })
 
-musicPlayer.on('play', () => (showMusicPlaying.value = true))
-musicPlayer.on('pause', () => (showMusicPlaying.value = false))
+// musicPlayer.on('play', () => (showMusicPlaying.value = true))
+// musicPlayer.on('pause', () => (showMusicPlaying.value = false))
 </script>
 <style lang="scss" scoped>
 .disable {

packages/qjkankan-kankan-view/src/components/Controls/RightButtons.vue

@@ -52,7 +52,7 @@ const onRuleClick = () => {
     store.commit('SetOptions', { sceneUI: false })
 }
 const onMusicClick = () => {
-    showMusicPlaying.value ? musicPlayer.pause() : musicPlayer.play()
+    // showMusicPlaying.value ? musicPlayer.pause() : musicPlayer.play()
 }
 const onFullScreen = () => {
     let element = document.documentElement
@@ -94,8 +94,7 @@ onMounted(() => {
         })
     })
 })
-musicPlayer.on('play', () => (showMusicPlaying.value = true))
-musicPlayer.on('pause', () => (showMusicPlaying.value = false))
+
 </script>
 <style lang="scss" scoped>
 .controls-right-buttons {

packages/qjkankan-kankan-view/src/components/Information/View.Mobile.vue

@@ -58,9 +58,8 @@ import browser from "@/utils/browser";
 import { useStore } from "vuex";
 import { Dialog } from "@/global_components/";
 import { MessageToApp, NotchHeight } from "@/utils/platform";
-import { useMusicPlayer } from "@/utils/sound";
 import { onMounted, watch, computed, ref, nextTick } from "vue";
-import { useApp, getApp } from "@/app";
+
 const store = useStore();
 
 let share_url = browser.getURLParam("share_url");
@@ -71,13 +70,13 @@ if (share_url) {
 }
 
 const deploy = ref(process.env.VUE_APP_DEPLOY);
-const musicPlayer = useMusicPlayer();
+// const musicPlayer = useMusicPlayer();
 const loadingLogoFile = computed(() => store.getters["scene/loadingLogoFile"]);
 const metadata = computed(() => store.getters["scene/metadata"]);
 const controls = computed(() => {
   return metadata.value.controls;
 });
-const showMusicPlaying = ref(false);
+
 const showMusic = computed(() => store.getters["scene/metadata"].music);
 const player = computed(() => store.getters["player"]);
 const flying = computed(() => store.getters["flying"]);
@@ -144,8 +143,6 @@ onMounted(() => {
     window.Back = () => {
       onBack();
     };
-    musicPlayer.on("play", () => (showMusicPlaying.value = true));
-    musicPlayer.on("pause", () => (showMusicPlaying.value = false));
   });
 });
 const onListen = () => {

packages/qjkankan-view/src/components/Fdkk/index.vue

@@ -14,7 +14,7 @@
 
 
     <iframe allowfullscreen="true" allow="autoplay" :key="currentScene.sceneCode" v-else id="fdkkifr"
-      :src="`${isMobile ? 'smg' : 'spg'}.html?m=${currentScene.sceneCode}&lang=${lang}`"
+      :src="`http://192.168.0.186:8081/${isMobile ? 'smg' : 'spg'}.html?m=${currentScene.sceneCode}&lang=${lang}`"
       frameborder="0"></iframe>
 
 
@@ -29,13 +29,13 @@
 import { ref, watch, computed, onUnmounted, onMounted, nextTick } from "vue";
 import { useStore } from "vuex";
 import browser from "@/utils/browser";
-import { useMusicPlayer } from '@/utils/sound'
+// import { useMusicPlayer } from '@/utils/sound'
 import v3mobile from "./v3fdkkmobile/iframe.vue";
 import { getApp } from '@/app'
 import config from "@/utils/config";
 
 
-const musicPlayer = useMusicPlayer()
+// const musicPlayer = useMusicPlayer()
 
 const store = useStore();
 const isMobile = computed(() => browser.isMobile());
@@ -88,32 +88,34 @@ const handleMessage = (res) => {
 
     //场景本身的背景音乐 (同时可判断场景已经加载完成)
     if (event == "fdkkBgmLink") {
-      store.commit('fdkk/setFdkkBGM', params.music)
+      // debugger
+      // store.commit('fdkk/setFdkkBGM', params.music)
       if (params.music) {
+        store.dispatch('audio/initV4BGM', params.music)
         // console.log(useMusicPlayer.player,'useMusicPlayer.player');
         if (isMobile.value) {
-          useMusicPlayer.player.watchPlay()
-          if (useMusicPlayer.player.isPlay) {
-            setTimeout(() => {
-              musicPlayer.play()
-            }, 50);
-          }
+          // useMusicPlayer.player.watchPlay()
+          // if (useMusicPlayer.player.isPlay) {
+          //   setTimeout(() => {
+          //     musicPlayer.play()
+          //   }, 50);
+          // }
         } else {
-          useMusicPlayer.player.watchPlay(true)
+          // useMusicPlayer.player.watchPlay(true)
         }
       }
       //如果无场景音乐，则重置为作品本身音乐
       else {
         if (store.getters['scene/musicURL']) {
           if (isMobile.value) {
-            useMusicPlayer.player.watchPlay()
-            if (useMusicPlayer.player.isPlay) {
-              setTimeout(() => {
-                musicPlayer.play()
-              }, 50);
-            }
+            // useMusicPlayer.player.watchPlay()
+            // if (useMusicPlayer.player.isPlay) {
+            //   setTimeout(() => {
+            //     musicPlayer.play()
+            //   }, 50);
+            // }
           } else {
-            useMusicPlayer.player.watchPlay(true)
+            // useMusicPlayer.player.watchPlay(true)
           }
         }
       }
@@ -136,21 +138,21 @@ const handleMessage = (res) => {
     }
 
     if (event == "toggleBgmStatus") {
-      if (params.status) {
-        musicPlayer.resume()
-      } else {
-        musicPlayer.pause(true)
-      }
+      // if (params.status) {
+      //   musicPlayer.resume()
+      // } else {
+      //   musicPlayer.pause(true)
+      // }
     }
 
     if (event == "autoPlayBgm") {
       // useMusicPlayer.player.watchPlay(true)
-      if (!useMusicPlayer.player.isPlay && !musicPlayer.pauseFromOther) {
-        musicPlayer.pauseFromOther = true
-        setTimeout(() => {
-          musicPlayer.play()
-        }, 50);
-      }
+      // if (!useMusicPlayer.player.isPlay && !musicPlayer.pauseFromOther) {
+      //   musicPlayer.pauseFromOther = true
+      //   setTimeout(() => {
+      //     musicPlayer.play()
+      //   }, 50);
+      // }
     }
 
 

packages/qjkankan-view/src/components/Pano/index.vue

@@ -9,15 +9,15 @@ import { useStore } from "vuex";
 import { useApp, getApp } from "@/app";
 import Fdkk from "../Fdkk";
 import { getFdkkInfo } from "@/apis";
-import { useMusicPlayer, useSoundPlayer } from "@/utils/sound";
+// import { useMusicPlayer, useSoundPlayer } from "@/utils/sound";
 import browser from "@/utils/browser";
 import config from "@/utils/config";
 
 //背景音乐
-const musicPlayer = useMusicPlayer();
+// const musicPlayer = useMusicPlayer();
 
-//解说音乐
-const soundPlayer = useSoundPlayer();
+// //解说音乐
+// const soundPlayer = useSoundPlayer();
 
 const store = useStore();
 const isMobile = computed(() => browser.isMobile());
@@ -77,18 +77,18 @@ watch(
       console.log(store.getters["fdkk/fdkkBGM"]);
       if (store.getters["fdkk/fdkkBGM"]) {
         store.commit("fdkk/setFdkkBGM", "");
-        useMusicPlayer.player.watchPlay(true);
-        if (isMobile.value) {
-          console.log(
-            useMusicPlayer.player.isPlay,
-            "useMusicPlayer.player.isPlay"
-          );
-          if (useMusicPlayer.player.isPlay) {
-            setTimeout(() => {
-              musicPlayer.play();
-            }, 50);
-          }
-        }
+        // useMusicPlayer.player.watchPlay(true);
+        // if (isMobile.value) {
+        //   console.log(
+        //     useMusicPlayer.player.isPlay,
+        //     "useMusicPlayer.player.isPlay"
+        //   );
+        //   if (useMusicPlayer.player.isPlay) {
+        //     setTimeout(() => {
+        //       musicPlayer.play();
+        //     }, 50);
+        //   }
+        // }
       }
 
       nextTick(() => {
@@ -106,9 +106,9 @@ watch(
 
           // v3
           if (data.data.isUpgrade === 0) {
-            musicPlayer.pauseFromOther = true;
+            // musicPlayer.pauseFromOther = true;
             if (!browser.isMobile()) {
-              musicPlayer.pause();
+              // musicPlayer.pause();
             } else {
               let flag =
                 data.data.bgMusic &&
@@ -116,9 +116,9 @@ watch(
                 data.data.bgMusic != "noMusic";
               store.commit("fdkk/setV3FdkkBGM", flag);
               // 该v3场景有背景音乐
-              if (flag) {
-                musicPlayer.pause();
-              }
+              // if (flag) {
+              //   musicPlayer.pause();
+              // }
               // console.log(data.data.bgMusic && data.data.bgMusic != '0' && data.data.bgMusic != 'noMusic','==========');
             }
           }
@@ -195,8 +195,8 @@ useApp().then((app) => {
             hotspot.hotspotType == "video"
           ) {
             store.commit("functions/setPauseFrom", currentPlaying.value);
-            musicPlayer.pause();
-            soundPlayer.pause();
+            // musicPlayer.pause();
+            // soundPlayer.pause();
           }
         }
       }

packages/qjkankan-view/src/components/UIGather/control.vue

@@ -117,13 +117,13 @@ import { useApp } from "@/app";
 import introduce from "./control/text";
 import telephone from "./control/telephone";
 import clink from "./control/link";
-import { useMusicPlayer, useSoundPlayer } from "@/utils/sound";
+// import { useMusicPlayer, useSoundPlayer } from "@/utils/sound";
 
-//背景音乐
-const musicPlayer = useMusicPlayer();
+// //背景音乐
+// const musicPlayer = useMusicPlayer();
 
-//解说音乐
-const soundPlayer = useSoundPlayer();
+// //解说音乐
+// const soundPlayer = useSoundPlayer();
 
 const store = useStore();
 
@@ -140,8 +140,8 @@ const fdkkCurrentVersion = computed(
 
 const isAutoRotate = computed(() => store.getters["functions/isAutoRotate"]);
 
-const showMusicPlaying = ref(false);
-const showCommentaryPlaying = ref(false);
+// const showMusicPlaying = ref(false);
+// const showCommentaryPlaying = ref(false);
 
 // const isCommentary = computed(() => store.getters["functions/isCommentary"]);
 
@@ -151,68 +151,68 @@ const customTelephone = computed(() => store.getters["scene/customTelephone"]);
 
 const customLink = computed(() => store.getters["scene/customLink"]);
 
-const fdkkmetadata = computed(() => store.getters["fdkk/metadata"]);
+// const fdkkmetadata = computed(() => store.getters["fdkk/metadata"]);
 const fdkkBGM = computed(() => store.getters["fdkk/fdkkBGM"]);
 
-const setExplanation = (from) => {
-  if (
-    "explanation" in currentScene.value &&
-    "audioUrl" in currentScene.value.explanation
-  ) {
-    console.log("设置解说", from);
-    let { audioUrl, openByDefault, repeat } = currentScene.value.explanation;
-    // showCommentaryPlaying.value = false;
-    store.commit("functions/setCommentaryUrl", {
-      src: audioUrl,
-      loop: repeat,
-      openByDefault: openByDefault,
-    });
-    useSoundPlayer.player.isLock = false;
-    useSoundPlayer.player.watchPlay();
-  }
-};
-const stopExplanation = (from) => {
-  console.log("stop解说", from);
-  useSoundPlayer.player.isLock = true;
-  soundPlayer.paused();
-};
-const resumeExplanation = () => {
-  console.log("resume解说");
-  useSoundPlayer.player.isLock = false;
-  useSoundPlayer.player.watchPlay();
-};
-const resetExplanation = (from) => {
-  console.log("清空解说", from);
-  store.commit("functions/setCommentaryUrl", "");
-  useSoundPlayer.player.isLock = true;
-  soundPlayer.paused();
-};
-watch([isShowCover, isDoneforCover], (val) => {
-  if (unref(val[0]) && unref(val[1])) {
-    resumeExplanation(2);
-  }
-  if (unref(val[0]) && !unref(val[1])) {
-    stopExplanation(2);
-  }
-});
-
-watchEffect(() => {
-  if (currentScene.value.explanation) {
-    let { audioUrl } = currentScene.value.explanation;
-
-    if (audioUrl) {
-      //解说有变，初始化按钮状态
-      setExplanation(1);
-      if (unref(isShowCover)) {
-        stopExplanation(1);
-      }
-    } else {
-      resetExplanation(1);
-    }
-  } else {
-    resetExplanation(2);
-  }
-});
+// const setExplanation = (from) => {
+//   if (
+//     "explanation" in currentScene.value &&
+//     "audioUrl" in currentScene.value.explanation
+//   ) {
+//     console.log("设置解说", from);
+//     let { audioUrl, openByDefault, repeat } = currentScene.value.explanation;
+//     // showCommentaryPlaying.value = false;
+//     store.commit("functions/setCommentaryUrl", {
+//       src: audioUrl,
+//       loop: repeat,
+//       openByDefault: openByDefault,
+//     });
+//     useSoundPlayer.player.isLock = false;
+//     useSoundPlayer.player.watchPlay();
+//   }
+// };
+// const stopExplanation = (from) => {
+//   console.log("stop解说", from);
+//   useSoundPlayer.player.isLock = true;
+//   soundPlayer.paused();
+// };
+// const resumeExplanation = () => {
+//   console.log("resume解说");
+//   useSoundPlayer.player.isLock = false;
+//   useSoundPlayer.player.watchPlay();
+// };
+// const resetExplanation = (from) => {
+//   console.log("清空解说", from);
+//   store.commit("functions/setCommentaryUrl", "");
+//   useSoundPlayer.player.isLock = true;
+//   soundPlayer.paused();
+// };
+// watch([isShowCover, isDoneforCover], (val) => {
+//   if (unref(val[0]) && unref(val[1])) {
+//     resumeExplanation(2);
+//   }
+//   if (unref(val[0]) && !unref(val[1])) {
+//     stopExplanation(2);
+//   }
+// });
+
+// watchEffect(() => {
+//   if (currentScene.value.explanation) {
+//     let { audioUrl } = currentScene.value.explanation;
+
+//     if (audioUrl) {
+//       //解说有变，初始化按钮状态
+//       setExplanation(1);
+//       if (unref(isShowCover)) {
+//         stopExplanation(1);
+//       }
+//     } else {
+//       resetExplanation(1);
+//     }
+//   } else {
+//     resetExplanation(2);
+//   }
+// });
 const showIntroduce = computed(() => store.getters["functions/showIntroduce"]);
 const showTelephone = computed(() => store.getters["functions/showTelephone"]);
 const showLink = computed(() => store.getters["functions/showLink"]);
@@ -236,9 +236,9 @@ const onLink = () => {
   }
 };
 
-const onIsBGM = () => {
-  showMusicPlaying.value ? musicPlayer.pause() : musicPlayer.play();
-};
+// const onIsBGM = () => {
+//   showMusicPlaying.value ? musicPlayer.pause() : musicPlayer.play();
+// };
 
 const onIsAutoRotate = (data) => {
   store.commit("functions/setAutoRotate", !isAutoRotate.value);
@@ -285,30 +285,30 @@ const onShare = () => {
   store.commit("functions/setShareUrl", true);
 };
 
-const staticList = ref([
-  {
-    id: "cruise",
-    name: "巡游开关",
-    icon: "rotation@2x.png",
-    icondisabled: "rotation_disabled@2x.png",
-  },
-  {
-    id: "vr",
-    name: "VR",
-    icon: "vr@2x.png",
-  },
-  {
-    id: "share",
-    name: "分享",
-    icon: "share@2x.png",
-  },
-  {
-    id: "full",
-    name: "全屏",
-    icon: "fullscreen@2x.png",
-    icondisabled: "rotation_disabled@2x.png",
-  },
-]);
+// const staticList = ref([
+//   {
+//     id: "cruise",
+//     name: "巡游开关",
+//     icon: "rotation@2x.png",
+//     icondisabled: "rotation_disabled@2x.png",
+//   },
+//   {
+//     id: "vr",
+//     name: "VR",
+//     icon: "vr@2x.png",
+//   },
+//   {
+//     id: "share",
+//     name: "分享",
+//     icon: "share@2x.png",
+//   },
+//   {
+//     id: "full",
+//     name: "全屏",
+//     icon: "fullscreen@2x.png",
+//     icondisabled: "rotation_disabled@2x.png",
+//   },
+// ]);
 
 onMounted(() => {
   let events = [
@@ -324,41 +324,41 @@ onMounted(() => {
   });
 });
 
-watch(
-  () => [showCommentaryPlaying.value, showMusicPlaying.value],
-  () => {
-    if (!showCommentaryPlaying.value && !showMusicPlaying.value) {
-      store.commit("functions/setCurrentPlaying", "");
-    } else {
-      if (showCommentaryPlaying.value) {
-        store.commit("functions/setCurrentPlaying", "commentary");
-      } else if (showMusicPlaying.value) {
-        store.commit("functions/setCurrentPlaying", "bgm");
-      }
-    }
-  }
-);
-
-musicPlayer.on("play", () => {
-  soundPlayer.pause();
-  showMusicPlaying.value = true;
-});
-musicPlayer.on("pause", () => {
-  showMusicPlaying.value = false;
-});
-
-soundPlayer.on("play", () => {
-  musicPlayer.pause();
-  showCommentaryPlaying.value = true;
-  //设置当前播放中音乐来源
-  if (!musicPlayer.pauseFromOther) {
-    musicPlayer.pauseFromOther = true;
-  }
-});
-soundPlayer.on("pause", () => {
-  console.log(11111);
-  showCommentaryPlaying.value = false;
-});
+// watch(
+//   () => [showCommentaryPlaying.value, showMusicPlaying.value],
+//   () => {
+//     if (!showCommentaryPlaying.value && !showMusicPlaying.value) {
+//       store.commit("functions/setCurrentPlaying", "");
+//     } else {
+//       if (showCommentaryPlaying.value) {
+//         store.commit("functions/setCurrentPlaying", "commentary");
+//       } else if (showMusicPlaying.value) {
+//         store.commit("functions/setCurrentPlaying", "bgm");
+//       }
+//     }
+//   }
+// );
+
+// musicPlayer.on("play", () => {
+//   soundPlayer.pause();
+//   showMusicPlaying.value = true;
+// });
+// musicPlayer.on("pause", () => {
+//   showMusicPlaying.value = false;
+// });
+
+// soundPlayer.on("play", () => {
+//   musicPlayer.pause();
+//   showCommentaryPlaying.value = true;
+//   //设置当前播放中音乐来源
+//   if (!musicPlayer.pauseFromOther) {
+//     musicPlayer.pauseFromOther = true;
+//   }
+// });
+// soundPlayer.on("pause", () => {
+//   console.log(11111);
+//   showCommentaryPlaying.value = false;
+// });
 </script>
 
 <style lang="scss" scoped>

packages/qjkankan-view/src/components/UIGather/mobile/control.fdkk.vue

@@ -1,56 +1,119 @@
 <template>
-  <ul class="control-fdkk"
-    v-if="(fdkkmetadata && (fdkkCurrentVersion != 'v3' && (fdkkmetadata && !fdkkmetadata.controls.showMap)) && (fdkkmetadata.controls.showPanorama || fdkkmetadata.controls.showFloorplan || fdkkmetadata.controls.showDollhouse))
-    || toursList.length > 0
-    || (customLink && customLink.isShow)
-    || (customTelephone && customTelephone.isShow)
-    || (metadata.description)
-    || ((metadata.backgroundMusic && metadata.backgroundMusic.id) || fdkkBGM || v3IsBgm)">
-
-    <li class="daolan" :class="{ v3daolan: fdkkCurrentVersion == 'v3' }" @click.stop="playTour"
-      v-if="toursList.length > 0">
+  <ul
+    class="control-fdkk"
+    v-if="
+      (fdkkmetadata &&
+        fdkkCurrentVersion != 'v3' &&
+        fdkkmetadata &&
+        !fdkkmetadata.controls.showMap &&
+        (fdkkmetadata.controls.showPanorama ||
+          fdkkmetadata.controls.showFloorplan ||
+          fdkkmetadata.controls.showDollhouse)) ||
+      toursList.length > 0 ||
+      (customLink && customLink.isShow) ||
+      (customTelephone && customTelephone.isShow) ||
+      metadata.description ||
+      (metadata.backgroundMusic && metadata.backgroundMusic.id) ||
+      fdkkBGM ||
+      v3IsBgm
+    "
+  >
+    <li
+      class="daolan"
+      :class="{ v3daolan: fdkkCurrentVersion == 'v3' }"
+      @click.stop="playTour"
+      v-if="toursList.length > 0"
+    >
       <img
-        :src="require(`@/assets/images/icon/${(fdkkCurrentVersion == 'v3' ? v3toursStatus : isPlayTours) ? 'pause01@2x' : 'playing01@2x'}.png`)"
-        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="" />
+        :src="
+          require(`@/assets/images/icon/${
+            (fdkkCurrentVersion == 'v3' ? v3toursStatus : isPlayTours)
+              ? 'pause01@2x'
+              : 'playing01@2x'
+          }.png`)
+        "
+        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=""
+      />
       <div class="vlink"></div>
     </li>
 
-    <template v-if="fdkkCurrentVersion != 'v3' && (fdkkmetadata && !fdkkmetadata.controls.showMap)">
-      <li v-if="fdkkmetadata && fdkkmetadata.controls.showPanorama" :class="{ disabled: isPlayTours || flying }"
-        @click="onModeChange('panorama')">
+    <template
+      v-if="
+        fdkkCurrentVersion != 'v3' &&
+        fdkkmetadata &&
+        !fdkkmetadata.controls.showMap
+      "
+    >
+      <li
+        v-if="fdkkmetadata && fdkkmetadata.controls.showPanorama"
+        :class="{ disabled: isPlayTours || flying }"
+        @click="onModeChange('panorama')"
+      >
         <img
-          :src="require(`@/assets/images/icon/${mode == 'panorama' ? 'roaming_selected@2x' : 'roaming_normal@2x'}.png`)"
-          alt="" />
+          :src="
+            require(`@/assets/images/icon/${
+              mode == 'panorama' ? 'roaming_selected@2x' : '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@2x' : 'plane_normal@2x'}.png`)"
-          alt="" />
+      <li
+        v-if="fdkkmetadata && fdkkmetadata.controls.showFloorplan"
+        :class="{ disabled: isPlayTours || flying }"
+        @click="onModeChange('floorplan')"
+      >
+        <img
+          :src="
+            require(`@/assets/images/icon/${
+              mode == 'floorplan' ? 'plane_selected@2x' : '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@2x' : '3d_normal@2x'}.png`)"
-          alt="" />
+      <li
+        v-if="fdkkmetadata && fdkkmetadata.controls.showDollhouse"
+        :class="{ disabled: isPlayTours || flying }"
+        @click="onModeChange('dollhouse')"
+      >
+        <img
+          :src="
+            require(`@/assets/images/icon/${
+              mode == 'dollhouse' ? '3d_selected@2x' : '3d_normal@2x'
+            }.png`)
+          "
+          alt=""
+        />
       </li>
 
-      <li class="vlink"
+      <li
+        class="vlink"
         v-if="
-        (customLink && customLink.isShow) ||
-        (customTelephone && customTelephone.isShow) ||
-        (metadata.description) ||
-        ((metadata.backgroundMusic && metadata.backgroundMusic.id) || fdkkBGM || v3IsBgm) &&
-        (fdkkmetadata && (fdkkmetadata.controls.showPanorama || fdkkmetadata.controls.showFloorplan || fdkkmetadata.controls.showDollhouse))">
-      </li>
-
+          (customLink && customLink.isShow) ||
+          (customTelephone && customTelephone.isShow) ||
+          metadata.description ||
+          (((metadata.backgroundMusic && metadata.backgroundMusic.id) ||
+            fdkkBGM ||
+            v3IsBgm) &&
+            fdkkmetadata &&
+            (fdkkmetadata.controls.showPanorama ||
+              fdkkmetadata.controls.showFloorplan ||
+              fdkkmetadata.controls.showDollhouse))
+        "
+      ></li>
     </template>
 
-
-
     <!-- 自定义链接 -->
     <li @click="onLink" v-if="customLink && customLink.isShow">
       <img :src="require(`@/assets/images/icon/link@2x.png`)" alt="" />
@@ -68,48 +131,64 @@
       <img :src="require(`@/assets/images/icon/text@2x.png`)" alt="" />
     </li>
 
-
     <!-- 背景音乐 -->
-    <li @click="onIsBGM" v-if="(metadata.backgroundMusic && metadata.backgroundMusic.id)
-    || fdkkBGM
-    || v3IsBgm">
-      <img v-if="v3IsBgm"
-        :src="require(`@/assets/images/icon/${v3BGMStatus ? 'music@2x.png' : 'music_disabled@2x.png'}`)" alt="" />
-      <img v-else :src="require(`@/assets/images/icon/${showMusicPlaying ? 'music@2x.png' : 'music_disabled@2x.png'}`)"
-        alt="" />
+    <li
+      @click="onIsBGM"
+      v-if="
+        (metadata.backgroundMusic && metadata.backgroundMusic.id) ||
+        fdkkBGM ||
+        v3IsBgm
+      "
+    >
+      <img
+        v-if="v3IsBgm"
+        :src="
+          require(`@/assets/images/icon/${
+            v3BGMStatus ? 'music@2x.png' : 'music_disabled@2x.png'
+          }`)
+        "
+        alt=""
+      />
+      <img
+        v-else
+        :src="
+          require(`@/assets/images/icon/${
+            showMusicPlaying ? 'music@2x.png' : 'music_disabled@2x.png'
+          }`)
+        "
+        alt=""
+      />
     </li>
-
-
   </ul>
 
-  <teleport to='body'>
+  <teleport to="body">
     <introduce v-if="showIntroduce" />
     <telephone v-if="showTelephone" />
     <clink v-if="showLink" />
   </teleport>
-
 </template>
 
 <script setup>
-import { ref, watch, computed, onMounted, nextTick } from "vue";
+import { computed } from "vue";
 import introduce from "./control/text";
 import telephone from "./control/telephone";
 import clink from "./control/link";
 import { useStore } from "vuex";
-import { useMusicPlayer } from '@/utils/sound'
-
-//背景音乐
-const musicPlayer = useMusicPlayer()
+// import { useMusicPlayer } from '@/utils/sound'
 
+// //背景音乐
+// const musicPlayer = useMusicPlayer()
 
-const showMusicPlaying = ref(musicPlayer.isPlay)
+// const showMusicPlaying = ref(musicPlayer.isPlay)
 
 // alert(showMusicPlaying.value)
 
 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 v3toursStatus = computed(() => store.getters["fdkk/v3toursStatus"]);
@@ -118,37 +197,33 @@ 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 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 scenes = computed(() => store.getters["scene/list"]);
+// const secondaryList = computed(() => store.getters["scene/secondaryList"]);
 const fdkkmetadata = computed(() => store.getters["fdkk/metadata"]);
 
-const fdkkCurrentVersion = computed(() => store.getters["scene/fdkkCurrentVersion"]);
+const fdkkCurrentVersion = computed(
+  () => store.getters["scene/fdkkCurrentVersion"]
+);
 const fdkkBGM = computed(() => store.getters["fdkk/fdkkBGM"]);
 
 const v3IsBgm = computed(() => store.getters["fdkk/v3IsBgm"]);
 const v3BGMStatus = computed(() => store.getters["fdkk/v3BGMStatus"]);
 
-
 const customTelephone = computed(() => store.getters["scene/customTelephone"]);
 
 const customLink = computed(() => store.getters["scene/customLink"]);
 
-
 const showIntroduce = computed(() => store.getters["functions/showIntroduce"]);
 const showTelephone = computed(() => store.getters["functions/showTelephone"]);
 const showLink = computed(() => store.getters["functions/showLink"]);
 
-
 const onIntroduce = () => {
   store.commit("functions/setShowIntroduce", true);
-}
-
+};
 
 const onLink = () => {
   const { openMethod, value } = unref(customLink);
@@ -161,76 +236,67 @@ const onLink = () => {
 
 const onIsBGM = () => {
   if (v3IsBgm.value) {
-    document.querySelector('#showifr') && document.querySelector('#showifr').contentWindow.postMessage(
-      {
-        source: "mingyuan",
-        event: "settings",
-        params: {
-          playMusic: !v3BGMStatus.value,
+    document.querySelector("#showifr") &&
+      document.querySelector("#showifr").contentWindow.postMessage(
+        {
+          source: "mingyuan",
+          event: "settings",
+          params: {
+            playMusic: !v3BGMStatus.value,
+          },
         },
-      },
-      "*"
-    );
+        "*"
+      );
   } else {
-    showMusicPlaying.value ? musicPlayer.pause() : musicPlayer.play()
+    // showMusicPlaying.value ? musicPlayer.pause() : musicPlayer.play()
   }
-}
+};
 
 const openTours = () => {
   if (isShowScenesList.value) {
     store.commit("functions/setShowScenesList", false);
   }
 
-  store.commit('fdkk/setShowToursList', !showTours.value)
-}
+  store.commit("fdkk/setShowToursList", !showTours.value);
+};
 
 const playTour = () => {
-  if (fdkkCurrentVersion.value == 'v3') {
-    store.commit('fdkk/setV3ToursStatus', !v3toursStatus.value)
-    let ele = document.getElementById('showifr');
-    ele && ele.contentWindow.postMessage({
-      source: "mingyuan",
-      event: v3toursStatus.value ? 'guide-start' : 'guide-pause',
-    }, "*")
-    return
+  if (fdkkCurrentVersion.value == "v3") {
+    store.commit("fdkk/setV3ToursStatus", !v3toursStatus.value);
+    let ele = document.getElementById("showifr");
+    ele &&
+      ele.contentWindow.postMessage(
+        {
+          source: "mingyuan",
+          event: v3toursStatus.value ? "guide-start" : "guide-pause",
+        },
+        "*"
+      );
+    return;
   }
-  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
-      }
-    },
-    "*"
-  );
-}
-
-
-onMounted(() => {
-  nextTick(() => {
-    musicPlayer.on('play', () => {
-      showMusicPlaying.value = true
-    })
-    musicPlayer.on('pause', () => (showMusicPlaying.value = false))
-  })
-})
-
-
-
-
+const onModeChange = (name) => {
+  document.querySelector("#fdkkifr") &&
+    document.querySelector("#fdkkifr").contentWindow.postMessage(
+      {
+        source: "qjkankan",
+        event: "setMode",
+        params: {
+          name: name,
+        },
+      },
+      "*"
+    );
+};
 </script>
 
 <style lang="scss" scoped>
@@ -243,7 +309,7 @@ onMounted(() => {
     display: none;
   }
 
-  >li {
+  > li {
     width: 26px;
     height: 26px;
     margin: 0 2px;
@@ -257,7 +323,6 @@ onMounted(() => {
       height: 100%;
     }
 
-
     &:last-of-type {
       margin-right: 10px;
 
@@ -265,7 +330,7 @@ onMounted(() => {
         width: 10px;
         height: 1px;
         background: none;
-        content: '';
+        content: "";
         display: inline-block;
       }
     }
@@ -280,7 +345,7 @@ onMounted(() => {
     width: auto;
     align-items: center;
 
-    >img {
+    > img {
       width: 26px;
       height: 26px;
     }
@@ -288,29 +353,27 @@ onMounted(() => {
     .jiantou {
       margin-left: -2px;
       transform: rotate(180deg);
-      transition: .3s ease transform;
+      transition: 0.3s ease transform;
 
       &.active {
         transform: none;
       }
     }
 
-    >span {
+    > span {
       font-size: 12px;
       margin-top: 2px;
     }
-
-
   }
 
   .v3daolan {
-    >img {
+    > img {
       &:last-of-type {
         display: none;
       }
     }
 
-    >span {
+    > span {
       margin-left: 0;
     }
 
@@ -322,7 +385,12 @@ onMounted(() => {
   .vlink {
     width: 1px;
     height: 20px;
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 49%, rgba(255, 255, 255, 0) 100%);
+    background: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0) 0%,
+      #ffffff 49%,
+      rgba(255, 255, 255, 0) 100%
+    );
     opacity: 0.5;
   }
 }

packages/qjkankan-view/src/components/UIGather/mobile/control.pano.vue

@@ -84,13 +84,13 @@ import { useApp } from "@/app";
 import introduce from "./control/text";
 import telephone from "./control/telephone";
 import clink from "./control/link";
-import { useMusicPlayer, useSoundPlayer } from "@/utils/sound";
+// import { useMusicPlayer, useSoundPlayer } from "@/utils/sound";
 
 //背景音乐
-const musicPlayer = useMusicPlayer();
+// const musicPlayer = useMusicPlayer();
 
-//解说音乐
-const soundPlayer = useSoundPlayer();
+// //解说音乐
+// const soundPlayer = useSoundPlayer();
 
 const store = useStore();
 
@@ -98,9 +98,9 @@ const metadata = computed(() => store.getters["scene/metadata"]);
 
 const isAutoRotate = computed(() => store.getters["functions/isAutoRotate"]);
 
-const showMusicPlaying = ref(musicPlayer.isPlay);
+const showMusicPlaying = ref(false);
 
-const showCommentaryPlaying = ref(soundPlayer.isPlay);
+const showCommentaryPlaying = ref(false);
 
 // const isCommentary = computed(() => store.getters["functions/isCommentary"]);
 
@@ -130,7 +130,7 @@ const onLink = () => {
   }
 };
 const onIsBGM = () => {
-  showMusicPlaying.value ? musicPlayer.pause() : musicPlayer.play();
+  // showMusicPlaying.value ? musicPlayer.pause() : musicPlayer.play();
 };
 
 const onIsAutoRotate = (data) => {
@@ -191,17 +191,17 @@ onMounted(() => {
   });
 });
 
-musicPlayer.on("play", () => {
-  showMusicPlaying.value = true;
-  soundPlayer.pause();
-});
-musicPlayer.on("pause", () => (showMusicPlaying.value = false));
-
-soundPlayer.on("play", () => {
-  showCommentaryPlaying.value = true;
-  musicPlayer.pause();
-});
-soundPlayer.on("pause", () => (showCommentaryPlaying.value = false));
+// musicPlayer.on("play", () => {
+//   showMusicPlaying.value = true;
+//   soundPlayer.pause();
+// });
+// musicPlayer.on("pause", () => (showMusicPlaying.value = false));
+
+// soundPlayer.on("play", () => {
+//   showCommentaryPlaying.value = true;
+//   musicPlayer.pause();
+// });
+// soundPlayer.on("pause", () => (showCommentaryPlaying.value = false));
 </script>
 
 <style lang="scss" scoped>

packages/qjkankan-view/src/components/UIGather/mobile/control.vue

@@ -18,81 +18,81 @@ import {
   unref,
 } from "vue";
 import { useStore } from "vuex";
-import { useMusicPlayer, useSoundPlayer } from "@/utils/sound";
+// import { useMusicPlayer, useSoundPlayer } from "@/utils/sound";
 
 //背景音乐
-const musicPlayer = useMusicPlayer();
+// const musicPlayer = useMusicPlayer();
 
 //解说音乐
-const soundPlayer = useSoundPlayer();
+// const soundPlayer = useSoundPlayer();
 
 const store = useStore();
 const currentScene = computed(() => store.getters["scene/currentScene"]);
-const metadata = computed(() => store.getters["scene/metadata"]);
-const isDoneforCover = computed(() => store.getters["scene/isDoneforCover"]);
-const isShowCover = computed(
-  () => metadata.value.coverInfo?.isShowCover || false
-);
+// const metadata = computed(() => store.getters["scene/metadata"]);
+// const isDoneforCover = computed(() => store.getters["scene/isDoneforCover"]);
+// const isShowCover = computed(
+//   () => metadata.value.coverInfo?.isShowCover || false
+// );
 
-const setExplanation = (from) => {
-  if (
-    "explanation" in currentScene.value &&
-    "audioUrl" in currentScene.value.explanation
-  ) {
-    console.log("设置解说", from);
-    let { audioUrl, openByDefault, repeat } = currentScene.value.explanation;
-    // showCommentaryPlaying.value = false;
-    store.commit("functions/setCommentaryUrl", {
-      src: audioUrl,
-      loop: repeat,
-      openByDefault: openByDefault,
-    });
-    useSoundPlayer.player.isLock = false;
-    useSoundPlayer.player.watchPlay();
-  }
-};
-const stopExplanation = (from) => {
-  console.log("stop解说", from);
-  useSoundPlayer.player.isLock = true;
-  soundPlayer.paused();
-};
-const resumeExplanation = () => {
-  console.log("resume解说");
-  useSoundPlayer.player.isLock = false;
-  useSoundPlayer.player.watchPlay();
-};
-const resetExplanation = (from) => {
-  console.log("清空解说", from);
-  store.commit("functions/setCommentaryUrl", "");
-  useSoundPlayer.player.isLock = true;
-  soundPlayer.paused();
-};
-watch([isShowCover, isDoneforCover], (val) => {
-  if (unref(val[0]) && unref(val[1])) {
-    resumeExplanation(2);
-  }
-  if (unref(val[0]) && !unref(val[1])) {
-    stopExplanation(2);
-  }
-});
+// const setExplanation = (from) => {
+//   if (
+//     "explanation" in currentScene.value &&
+//     "audioUrl" in currentScene.value.explanation
+//   ) {
+//     console.log("设置解说", from);
+//     let { audioUrl, openByDefault, repeat } = currentScene.value.explanation;
+//     // showCommentaryPlaying.value = false;
+//     store.commit("functions/setCommentaryUrl", {
+//       src: audioUrl,
+//       loop: repeat,
+//       openByDefault: openByDefault,
+//     });
+//     useSoundPlayer.player.isLock = false;
+//     useSoundPlayer.player.watchPlay();
+//   }
+// };
+// const stopExplanation = (from) => {
+//   console.log("stop解说", from);
+//   useSoundPlayer.player.isLock = true;
+//   soundPlayer.paused();
+// };
+// const resumeExplanation = () => {
+//   console.log("resume解说");
+//   useSoundPlayer.player.isLock = false;
+//   useSoundPlayer.player.watchPlay();
+// };
+// const resetExplanation = (from) => {
+//   console.log("清空解说", from);
+//   store.commit("functions/setCommentaryUrl", "");
+//   useSoundPlayer.player.isLock = true;
+//   soundPlayer.paused();
+// };
+// watch([isShowCover, isDoneforCover], (val) => {
+//   if (unref(val[0]) && unref(val[1])) {
+//     resumeExplanation(2);
+//   }
+//   if (unref(val[0]) && !unref(val[1])) {
+//     stopExplanation(2);
+//   }
+// });
 
-watchEffect(() => {
-  if (currentScene.value.explanation) {
-    let { audioUrl } = currentScene.value.explanation;
+// watchEffect(() => {
+//   if (currentScene.value.explanation) {
+//     let { audioUrl } = currentScene.value.explanation;
 
-    if (audioUrl) {
-      //解说有变，初始化按钮状态
-      setExplanation(1);
-      if (unref(isShowCover)) {
-        stopExplanation(1);
-      }
-    } else {
-      resetExplanation(1);
-    }
-  } else {
-    resetExplanation(2);
-  }
-});
+//     if (audioUrl) {
+//       //解说有变，初始化按钮状态
+//       setExplanation(1);
+//       if (unref(isShowCover)) {
+//         stopExplanation(1);
+//       }
+//     } else {
+//       resetExplanation(1);
+//     }
+//   } else {
+//     resetExplanation(2);
+//   }
+// });
 </script>
 
 <style lang="scss" scoped>

packages/qjkankan-view/src/components/UIGather/mobile/index.vue

@@ -1,24 +1,37 @@
 <template>
-      <Logo />
-      <Tips />
-      <!-- <Menu /> -->
-      <div v-show="showUI && !vrStatus">
-            <sceneList />
-            <div class="btn-style">
-                  <div class="menu-icon">
-                        <div @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="" />
-                        </div>
-                  </div>
-
-                  <Control />
-                  <ControlRight />
-            </div>
-
+  <Logo />
+  <Tips />
+  <!-- <Menu /> -->
+  <div v-show="showUI && !vrStatus">
+    <sceneList />
+    <div class="btn-style">
+      <div class="menu-icon">
+        <div
+          @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=""
+          />
+        </div>
       </div>
 
+      <Control />
+      <ControlRight />
+    </div>
+  </div>
 </template>
 
 <script setup>
@@ -33,10 +46,11 @@ import { useApp, getApp } from "@/app";
 
 import { useStore } from "vuex";
 const store = useStore();
-const showUI = ref(false)
-
+const showUI = ref(false);
 
-const isShowScenesList = computed(() => store.getters["functions/isShowScenesList"]);
+const isShowScenesList = computed(
+  () => store.getters["functions/isShowScenesList"]
+);
 const showTours = computed(() => store.getters["fdkk/isShowToursList"]);
 
 const metadata = computed(() => store.getters["scene/metadata"]);
@@ -46,69 +60,67 @@ const currentScene = computed(() => store.getters["scene/currentScene"]);
 const vrStatus = computed(() => store.getters["functions/vrStatus"]);
 
 const onIsShowList = (data) => {
-      if (showTours.value) {
-            store.commit('fdkk/setShowToursList', false)
-      }
-      store.commit("functions/setShowScenesList", !isShowScenesList.value);
+  if (showTours.value) {
+    store.commit("fdkk/setShowToursList", false);
+  }
+  store.commit("functions/setShowScenesList", !isShowScenesList.value);
 };
 
 watch(currentScene, () => {
-      if (currentScene.value.type == '4dkk' && isShowScenesList.value) {
-            let t = setTimeout(() => {
-                  clearTimeout(t)
-                  store.commit("functions/setShowScenesList", false);
-            }, 1500);
-      }
-})
+  if (currentScene.value.type == "4dkk" && isShowScenesList.value) {
+    let t = setTimeout(() => {
+      clearTimeout(t);
+      store.commit("functions/setShowScenesList", false);
+    }, 1500);
+  }
+});
 
 useApp().then((app) => {
-      app.Scene.on("ready", (data) => {
-            if (currentScene && currentScene.value.type == '4dkk' && !showUI.value) {
-                  showUI.value = true
-            }
-      })
-      app.Scene.on("sceneReady", () => {
-            showUI.value = true
-      })
-      app.Scene.on("onExitVr", () => {
-            store.commit("functions/setVrStatus", false);
-      })
-})
-
+  app.Scene.on("ready", (data) => {
+    if (currentScene && currentScene.value.type == "4dkk" && !showUI.value) {
+      showUI.value = true;
+    }
+  });
+  app.Scene.on("sceneReady", () => {
+    showUI.value = true;
+  });
+  app.Scene.on("onExitVr", () => {
+    store.commit("functions/setVrStatus", false);
+  });
+});
 </script>
 
 <style lang="scss" scoped>
 .btn-style {
+  display: flex;
+  justify-content: space-between;
+  width: 90%;
+  position: absolute;
+  left: 5%;
+  right: 5%;
+  bottom: 38px;
+  z-index: 9;
+
+  .menu-icon {
+    width: 36px;
+    height: 36px;
+
+    > div {
+      width: 100%;
+      height: 36px;
+      background: rgba(0, 0, 0, 0.4);
+      border-radius: 50%;
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      backdrop-filter: blur(6px);
       display: flex;
-      justify-content: space-between;
-      width: 90%;
-      position: absolute;
-      left: 5%;
-      right: 5%;
-      bottom: 38px;
-      z-index: 9;
-
-      .menu-icon {
-            width: 36px;
-            height: 36px;
-
-            >div {
-                  width: 100%;
-                  height: 36px;
-                  background: rgba(0, 0, 0, 0.4);
-                  border-radius: 50%;
-                  border: 1px solid rgba(255, 255, 255, 0.2);
-                  backdrop-filter: blur(6px);
-                  display: flex;
-                  align-items: center;
-                  justify-content: center;
-
-                  >img {
-                        width: 24px;
-                        height: 24px;
+      align-items: center;
+      justify-content: center;
 
-                  }
-            }
+      > img {
+        width: 24px;
+        height: 24px;
       }
+    }
+  }
 }
-</style>
+</style>

packages/qjkankan-view/src/components/assembly/Tags/index.vue

@@ -1,10 +1,16 @@
 <template>
   <teleport to="body" v-if="currentTag.hotspotType">
     <div class="tag-layer" @click.stop>
-      <img class="close" v-if="currentTag.hotspotType != 'audio'" @click.stop="close" :src="require('@/assets/images/icon/material_preview_close@2x.png')" alt="" />
+      <img
+        class="close"
+        v-if="currentTag.hotspotType != 'audio'"
+        @click.stop="close"
+        :src="require('@/assets/images/icon/material_preview_close@2x.png')"
+        alt=""
+      />
       <metasImage v-if="currentTag.hotspotType == 'image'" />
       <metasWeb v-if="currentTag.hotspotType == 'link'" />
-      <metasAudio  @close="close" v-if="currentTag.hotspotType == 'audio'" />
+      <metasAudio @close="close" v-if="currentTag.hotspotType == 'audio'" />
       <metasVideo v-if="currentTag.hotspotType == 'video'" />
       <metasText v-if="currentTag.hotspotType == 'textarea'" />
       <metasArticle v-if="currentTag.hotspotType == 'article'" />
@@ -16,41 +22,41 @@
 </template>
 
 <script setup>
-import metasImage from './metas/metas-image'
-import metasWeb from './metas/metas-web'
-import metasAudio from './metas/metas-audio'
-import metasVideo from './metas/metas-video'
-import metasText from './metas/metas-text'
-import metasArticle from './metas/metas-article.vue'
-import metasImageText from './metas/metas-imagetext.vue'
-import metasPdf from './metas/metas-pdf.vue'
-import metasPhone from './metas/metas-phone.vue'
+import metasImage from "./metas/metas-image";
+import metasWeb from "./metas/metas-web";
+import metasAudio from "./metas/metas-audio";
+import metasVideo from "./metas/metas-video";
+import metasText from "./metas/metas-text";
+import metasArticle from "./metas/metas-article.vue";
+import metasImageText from "./metas/metas-imagetext.vue";
+import metasPdf from "./metas/metas-pdf.vue";
+import metasPhone from "./metas/metas-phone.vue";
 
-import { reactive, defineEmits, onBeforeMount, onMounted, ref, watchEffect, computed, watch, nextTick } from "vue";
+import { defineEmits, computed } from "vue";
 import { useStore } from "vuex";
 
-import { useMusicPlayer,useSoundPlayer } from '@/utils/sound'
-//背景音乐
-const musicPlayer = useMusicPlayer()
+// import { useMusicPlayer,useSoundPlayer } from '@/utils/sound'
+// //背景音乐
+// const musicPlayer = useMusicPlayer()
 
-//解说音乐
-const soundPlayer = useSoundPlayer()
+// //解说音乐
+// const soundPlayer = useSoundPlayer()
 
 const store = useStore();
 
-const currentTag = computed(() => store.getters['tags/currentTag'])
-const pauseFrom = computed(() => store.getters["functions/pauseFrom"]);
+const currentTag = computed(() => store.getters["tags/currentTag"]);
+// const pauseFrom = computed(() => store.getters["functions/pauseFrom"]);
 
 const emit = defineEmits(["close"]);
 
 const close = () => {
   emit("close");
   store.commit("tags/setCurrentTag", {});
-  if (pauseFrom.value=='commentary') {
-    soundPlayer.play()
-  }else if (pauseFrom.value=='bgm') {
-    musicPlayer.play()
-}
+  // if (pauseFrom.value == "commentary") {
+  //   soundPlayer.play();
+  // } else if (pauseFrom.value == "bgm") {
+  //   musicPlayer.play();
+  // }
 };
 </script>
 

packages/qjkankan-view/src/pages/show.vue

@@ -41,7 +41,6 @@ import { useApp } from "@/app";
 import { useI18n, getLocale } from "@/i18n";
 const { t } = useI18n({ useScope: "global" });
 
-
 const store = useStore();
 const show = ref(false);
 const workEnable = ref(true);
@@ -96,7 +95,6 @@ onMounted(async () => {
     if (data.password.length > 0) {
       hasPasswordLock.value = true;
     }
-
     store.commit("scene/setMetaData", data);
     document.title = data.name || t("common.no_title");
 
@@ -111,8 +109,20 @@ onMounted(async () => {
         (item) => item.sceneCode == data.firstScene.sceneCode
       );
     }
+    // 所有audio入口
+
+    const currentSceneData = firstScene || data.scenes[0];
+    // debugger;
+    store.dispatch("audio/initNormalBGM", data.backgroundMusic.ossPath);
+    if ("explanation" in currentSceneData) {
+      store.dispatch("audio/initExplanationBGM", {
+        url: currentSceneData.explanation.audioUrl,
+        repeat: currentSceneData.explanation.repeat,
+        isAuto: currentSceneData.explanation.openByDefault,
+      });
+    }
 
-    store.commit("scene/setCurrentScene", firstScene || data.scenes[0]);
+    store.commit("scene/setCurrentScene", currentSceneData);
 
     // 过滤空分组
     let ttt = data.catalogRoot.filter((item) => {

packages/qjkankan-view/src/store/modules/audio.js

@@ -0,0 +1,94 @@
+
+export default {
+    namespaced: true,
+    state() {
+        return {
+            normalBGM: {
+                url: "",
+                isAuto: false,
+                type: 0,
+                order: 0,
+                repeat: true,
+            }, // 一般背景音乐
+            // appBGM: {
+            //     url: "",
+            //     isAuto: false,
+            //     order: 0
+            // }, // 一般背景音乐
+            v3BGM: {
+                url: "",
+                isAuto: false,
+                type: 1,
+                order: 9,
+                repeat: false,
+            }, // v3背景音乐
+            v4BGM: {
+                url: "",
+                type: 2,
+                isAuto: false,
+                order: 10,
+                repeat: false,
+            }, // v4背景音乐
+            explanationBGM: {
+                url: "",
+                type: 3,
+                isAuto: false,
+                order: 100,
+                repeat: false,
+            }, //解说音乐
+        }
+    },
+    getters() {
+        bgmList: (state) => [state.normalBGM, state.v3BGM, state.v4BGM, state.explanationBGM]
+    },
+    mutations: {
+        setNormalBGM(state, payload) {
+            state.normalBGM.url = payload.url
+            state.normalBGM.isAuto = payload.isAuto
+        },
+        setExplanationBGM(state, payload) {
+            state.explanationBGM.url = payload.url
+            state.explanationBGM.isAuto = payload.isAuto
+            state.explanationBGM.repeat = payload.repeat
+        },
+        setV4BGM(state, payload) {
+            state.v4BGM.url = payload.url
+            state.v4BGM.isAuto = payload.isAuto
+            state.v4BGM.repeat = payload.repeat
+        },
+
+    },
+    actions: {
+        initNormalBGM({ commit }, url) {
+            // 一般背景音乐
+            if (url.length > 0) {
+                commit('setNormalBGM', {
+                    isAuto: true,
+                    url: url
+                })
+            }
+
+            // debugger
+        },
+        initExplanationBGM({ commit }, { url, repeat, isAuto }) {
+            // 解说音乐
+            if (url.length > 0) {
+                commit('setExplanationBGM', { url, repeat, isAuto });
+            }
+        },
+
+        initExplanationBGM({ commit }, { url, repeat, isAuto }) {
+            // 解说音乐
+            if (url.length > 0) {
+                commit('setExplanationBGM', { url, repeat, isAuto });
+            }
+        },
+        initV4BGM({ commit }, url) {
+            // v4音乐
+            if (url.length > 0) {
+                commit('setV4BGM', { url, repeat: true, isAuto: true });
+            }
+        }
+    }
+
+}

packages/qjkankan-view/src/store/modules/index.js

@@ -2,9 +2,11 @@ import scene from './scene'
 import functions from './functions'
 import tags from './tags'
 import fdkk from './fdkk'
+import audio from './audio'
 export default {
     scene,
     functions,
     tags,
-    fdkk
+    fdkk,
+    audio
 }

packages/qjkankan-view/src/utils/sound.js

@@ -154,6 +154,7 @@ class MusicPlayer extends AudioPlayer {
 
         this.isLock = true
         this.watchPlay = (autoplay = null) => {
+            debugger
             if (this.isLock) {
                 return
             }
@@ -281,7 +282,6 @@ export function useSoundPlayer() {
 }
 
 function wxConfig() {
-    debugger
     wx.config({
         // 配置信息, 即使不正确也能使用 wx.ready
         debug: false,