保存编辑器 与展示端V4/V3

packages/qjkankan-editor/src/components/materialListInMaterialSelector.vue

@@ -9,7 +9,7 @@
       class="crumbs"
       v-if="!searchKey"
       :isDarkTheme="isDarkTheme"
-      :list="folderPath"
+      :list="uniqueFolderList(folderPath)"
       :rootName="$i18n.t(`gather.${materialTypeAlias}`)"
       @click-path="onClickPath"
     />
@@ -442,6 +442,15 @@ export default {
     };
   },
   computed: {
+    uniqueFolderList() {
+      return (arr) => {
+        const tem = new Map();
+        let res = arr.filter(
+          (item) => !tem.has(item.id) && tem.set(item.id, 1)
+        );
+        return res;
+      };
+    },
     showList() {
       if (this.materialTypeAlias === "pano") {
         return this.list.filter((i) => i.status === 3);

packages/qjkankan-view/package.json

@@ -19,6 +19,7 @@
     "clipboard": "^2.0.11",
     "consola": "^3.1.0",
     "core-js": "^3.8.3",
+    "lodash-es": "^4.17.21",
     "mitt": "^3.0.0",
     "photoswipe": "^5.2.2",
     "swiper": "^9.2.3",

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

@@ -1,6 +1,6 @@
 <template>
   <div class="fdkkcon">
-    <template v-if="fdkkCurrentVersion == 'v3'">
+    <template v-if="fdkkCurrentVersion == 'V3'">
       <iframe
         allowfullscreen="true"
         allow="autoplay"
@@ -12,7 +12,7 @@
       ></iframe>
       <!-- <iframe :key="currentScene.sceneCode" v-if="!isMobile" id="fdkkifr" :src="`https://test.4dkankan.com/spc.html?m=${currentScene.sceneCode}`" -->
 
-      <!-- v3场景移动端，用embed.html定制开发 -->
+      <!-- V3场景移动端，用embed.html定制开发 -->
       <v3mobile
         v-else
         @changeUrl="handleChange"
@@ -28,12 +28,12 @@
         "
       />
     </template>
-    <!-- :url="otherLink ? otherLink : `https://test.4dkankan.com/embed.html?from=mingyuan&m=${embeM || currentScene.sceneCode}&lang=zh&scene-link=1&rnd=${rnd}`" /> -->
 
     <iframe
       allowfullscreen="true"
       allow="autoplay"
       :key="currentScene.sceneCode"
+      class="V4"
       v-else
       id="fdkkifr"
       :src="`${isMobile ? 'smg' : 'spg'}.html?m=${
@@ -41,22 +41,16 @@
       }&lang=${lang}`"
       frameborder="0"
     ></iframe>
-
-    <!-- :src="`http://192.168.20.66:8080/${isMobile ? 'smg' : 'spg'}.html?m=${currentScene.sceneCode}`" -->
-
-    <!-- <iframe id="fdkkifr" :src="`${isMobile?'smg':'spg'}.html?m=${currentScene.sceneCode}`" frameborder="0"></iframe> -->
   </div>
 </template>
 
 <script setup>
 import {
   ref,
-  watch,
   computed,
   onUnmounted,
   onMounted,
   nextTick,
-  unref,
 } from "vue";
 import { useStore } from "vuex";
 import browser from "@/utils/browser";
@@ -134,7 +128,6 @@ const handleMessage = (res) => {
       }
     }
     //
-
     if (event == "toggleBgmStatus") {
       console.error("toggleBgmStatus", params);
       // debugger;
@@ -165,6 +158,7 @@ onMounted(() => {
 
 onUnmounted(() => {
   window.removeEventListener("message", handleMessage);
+  // store.dispatch("audio/destroy");
 });
 
 const handleOther = (data) => {

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

@@ -1,194 +0,0 @@
-<template>
-  <div class="fdkkcon">
-    <template v-if="fdkkCurrentVersion == 'v3'">
-      <iframe
-        allowfullscreen="true"
-        allow="autoplay"
-        :key="currentScene.sceneCode"
-        v-if="!isMobile"
-        id="fdkkifr"
-        :src="`https://test.4dkankan.com/spc.html?m=${currentScene.sceneCode}&lang=${lang}`"
-        frameborder="0"
-      ></iframe>
-      <!-- <iframe :key="currentScene.sceneCode" v-if="!isMobile" id="fdkkifr" :src="`https://test.4dkankan.com/spc.html?m=${currentScene.sceneCode}`" -->
-
-      <!-- v3场景移动端，用embed.html定制开发 -->
-      <v3mobile
-        v-else
-        @changeUrl="handleChange"
-        @otherUrl="handleOther"
-        :somedatainfo="somedatainfo"
-        :key="embeM || currentScene.sceneCode"
-        :url="
-          otherLink
-            ? otherLink
-            : `https://test.4dkankan.com/embed.html?from=mingyuan&m=${
-                embeM || currentScene.sceneCode
-              }&lang=${lang}&scene-link=1&rnd=${rnd}`
-        "
-      />
-    </template>
-    <!-- :url="otherLink ? otherLink : `https://test.4dkankan.com/embed.html?from=mingyuan&m=${embeM || currentScene.sceneCode}&lang=zh&scene-link=1&rnd=${rnd}`" /> -->
-
-    <iframe
-      allowfullscreen="true"
-      allow="autoplay"
-      :key="currentScene.sceneCode"
-      v-else
-      id="fdkkifr"
-      :src="`http://192.168.0.186:8081/${isMobile ? 'smg' : 'spg'}.html?m=${
-        currentScene.sceneCode
-      }&lang=${lang}`"
-      frameborder="0"
-    ></iframe>
-
-    <!-- :src="`http://192.168.20.66:8080/${isMobile ? 'smg' : 'spg'}.html?m=${currentScene.sceneCode}`" -->
-
-    <!-- <iframe id="fdkkifr" :src="`${isMobile?'smg':'spg'}.html?m=${currentScene.sceneCode}`" frameborder="0"></iframe> -->
-  </div>
-</template>
-
-<script setup>
-import {
-  ref,
-  watch,
-  computed,
-  onUnmounted,
-  onMounted,
-  nextTick,
-  unref,
-} from "vue";
-import { useStore } from "vuex";
-import browser from "@/utils/browser";
-
-import v3mobile from "./v3fdkkmobile/iframe.vue";
-import { getApp } from "@/app";
-import config from "@/utils/config";
-
-const store = useStore();
-const isMobile = computed(() => browser.isMobile());
-
-const lang = computed(() => config.lang);
-
-const currentScene = computed(() => store.getters["scene/currentScene"]);
-const isHasV4BGM = computed(() => store.getters["audio/isHasV4BGM"]);
-const fdkkCurrentVersion = computed(
-  () => store.getters["scene/fdkkCurrentVersion"]
-);
-
-const somedatainfo = ref({});
-
-const embeM = ref(null);
-
-const otherLink = ref(null);
-
-const rnd = ref(null);
-
-const handleMessage = (res) => {
-  if (Object.prototype.toString.call(res.data) == "[object Object]") {
-    if (res.data.source !== "qjkankan") {
-      return;
-    }
-
-    let { event, params } = res.data;
-
-    //导览片段
-    if (event == "toursList") {
-      store.commit("fdkk/setToursList", params.tours);
-    }
-
-    //是否导览中
-    if (event == "isPlayTours") {
-      store.commit("fdkk/setIsPlayTours", params.isPlay);
-    }
-
-    // 是否flying
-    if (event == "isFlying") {
-      store.commit("fdkk/setIsFlying", params.isFlying);
-    }
-
-    if (event == "setMode") {
-      store.commit("fdkk/setMode", params.mode);
-    }
-
-    if (event == "setVR") {
-      store.commit("functions/setVrStatus", params.status);
-    }
-
-    // V4场景本身的背景音乐 (同时可判断场景已经加载完成)
-    if (event == "fdkkBgmLink") {
-      console.log("fdkkBgmLink", params.music);
-      store.dispatch("audio/initV4BGM", params.music);
-      // loading完毕
-      getApp().Scene.emit("ready");
-    }
-
-    if (event == "fdkkMetadata") {
-      store.commit("fdkk/setMetadata", params.metadata);
-    }
-
-    if (event == "toggleFdkkHotspot") {
-      if (params.status == "open") {
-        store.commit("functions/setShowScenesList", false);
-        store.commit("fdkk/setShowToursList", false);
-      }
-    }
-    //
-
-    if (event == "toggleBgmStatus") {
-      console.error("toggleBgmStatus", params);
-      // debugger;
-      // if (params.status) {
-      //   if (unref(isHasV4BGM)) {
-      //     store.dispatch("audio/playBGM", 2);
-      //   } else {
-      //     store.dispatch("audio/playBGM", 0);
-      //   }
-      // } else {
-      //   store.dispatch("audio/pauseBGM");
-      // }
-    }
-
-    if (event == "autoPlayBgm") {
-      store.dispatch("audio/playBGM", 2);
-    }
-  }
-};
-
-onMounted(() => {
-  nextTick(() => {
-    window.removeEventListener("message", handleMessage);
-    window.addEventListener("message", handleMessage);
-  });
-});
-
-onUnmounted(() => {
-  window.removeEventListener("message", handleMessage);
-});
-
-const handleOther = (data) => {
-  otherLink.value = data;
-  rnd.value = Math.random();
-};
-const handleChange = (data) => {
-  embeM.value = data;
-  rnd.value = Math.random();
-};
-</script>
-
-<style lang="scss" scoped>
-.fdkkcon {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-
-  > iframe {
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>

packages/qjkankan-view/src/components/Fdkk/v3fdkkmobile/iframe.vue

@@ -1,7 +1,20 @@
 <template>
   <div class="ifrcon">
-    <vvheader :somedatainfo="somedatainfo" :bgmstatus="bgmstatus" :params="params" class="hhh" />
-    <iframe allow="autoplay" allowfullscreen="true" ref="iframe" id="showifr" :src="url" frameborder="0" @load="onIframLoad"></iframe>
+    <vvheader
+      :somedatainfo="somedatainfo"
+      :bgmstatus="bgmstatus"
+      :params="params"
+      class="hhh"
+    />
+    <iframe
+      allow="autoplay"
+      allowfullscreen="true"
+      ref="iframe"
+      id="showifr"
+      :src="url"
+      frameborder="0"
+      @load="onIframLoad"
+    ></iframe>
   </div>
 </template>
 
@@ -9,8 +22,7 @@
 import browser from "@/utils/browser";
 import vvheader from "./vheader.vue";
 import { useStore } from "vuex";
-import { getApp } from '@/app'
-
+import { getApp } from "@/app";
 
 export default {
   props: ["url", "bgmUrl", "somedatainfo"],
@@ -30,27 +42,29 @@ export default {
   methods: {
     onIframLoad() {
       window.onmessage = (e) => {
-
         if (e.data.source != "4dage") {
           return;
         }
-        console.log(e.data, 'e.data.params');
+        console.log(e.data, "e.data.params");
 
-        getApp().Scene.emit("ready")
+        getApp().Scene.emit("ready");
 
         if (e.data.event == "guide-stop") {
-          this.store.commit('fdkk/setV3ToursStatus', false)
+          this.store.commit("fdkk/setV3ToursStatus", false);
         }
 
-
         if (e.data.event == "guide-rooms") {
-          this.store.commit('fdkk/setToursList', e.data.params)
+          this.store.commit("fdkk/setToursList", e.data.params);
         }
 
         if (e.data.event == "link-click") {
           if (
-            e.data.params.url.indexOf(`https://${window.location.hostname}/spc.html?`) > -1 ||
-            e.data.params.url.indexOf(`https://${window.location.hostname}/smobile.html?`) > -1 
+            e.data.params.url.indexOf(
+              `https://${window.location.hostname}/spc.html?`
+            ) > -1 ||
+            e.data.params.url.indexOf(
+              `https://${window.location.hostname}/smobile.html?`
+            ) > -1
           ) {
             let m = browser.urlHasValueFromUrl("m", e.data.params.url);
             this.$emit("changeUrl", m);
@@ -64,18 +78,21 @@ export default {
 
           if (e.data.params.type == "playMusic") {
             this.bgmstatus = e.data.params.data.status;
-            this.store.dispatch('audio/initV3BGM',this.bgmstatus);
-            console.log('initV3BGM',this.bgmstatus)
+            // this.store.dispatch('audio/initV3BGM',this.bgmstatus);
+            console.log("V3-BGM-status", this.bgmstatus);
+            this.store.dispatch(
+              "audio/updateV3BGMStatus",
+              e.data.params.data.status
+            );
             // this.store.commit('fdkk/setV3BGMStatus', e.data.params.data.status)
           }
 
           if (e.data.params.type == "mode") {
-            if (e.data.params.data.mode != 'pano') {
-              this.store.commit("functions/setShowScenesList", false)
+            if (e.data.params.data.mode != "pano") {
+              this.store.commit("functions/setShowScenesList", false);
             }
           }
           // store.commit('fdkk/setIsPlayTours', params.isPlay)
-
         }
 
         // if (e.data.event == "settings") {
@@ -83,7 +100,7 @@ export default {
         // }
 
         if (e.data.event == "loaded") {
-          console.log(e.data.params, 'e.data.params');
+          console.log(e.data.params, "e.data.params");
           this.params = e.data.params;
           this.$refs.iframe.contentWindow.postMessage(
             {
@@ -128,7 +145,7 @@ export default {
   height: 100%;
   position: relative;
 
-  >iframe {
+  > iframe {
     width: 100%;
     height: 100%;
   }

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

@@ -62,42 +62,45 @@ watch(
     );
 
     //默认版本是v4
-    store.commit("scene/setFdkkCurrentVersion", "v4");
+    store.commit("scene/setFdkkCurrentVersion", "V4");
     hadGetInfo.value = false;
     //恢复默认状态
-    store.commit("fdkk/setV3FdkkBGM", "");
-    store.commit("fdkk/setV3BGMStatus", "");
+    // store.commit("fdkk/setV3FdkkBGM", "");
+    // store.commit("fdkk/setV3BGMStatus", "");
     if (newVal.type == "pano") {
       //如果当前背景音乐是v4则重置
-      console.log(store.getters["fdkk/fdkkBGM"]);
-      if (store.getters["fdkk/fdkkBGM"]) {
-        store.commit("fdkk/setFdkkBGM", "");
-      }
+      // console.log(store.getters["fdkk/fdkkBGM"]);
+      // if (store.getters["fdkk/fdkkBGM"]) {
+      //   store.commit("fdkk/setFdkkBGM", "");
+      // }
 
       nextTick(() => {
         loadScene(newVal);
         console.log(newVal, "newVal");
       });
     } else {
-      getFdkkInfo({ num: newVal.sceneCode }).then((data) => {
+      getFdkkInfo({ num: newVal.sceneCode }).then(async (data) => {
         hadGetInfo.value = true;
         const isVersion = isUpgradeAdapter(data.data.isUpgrade);
+        console.log("当前-version", isVersion);
         store.commit("scene/setFdkkCurrentVersion", isVersion);
         // v3
         if (isVersion === "V3") {
+          store.dispatch("audio/setLock", true);
           let flag =
             data.data.bgMusic &&
             data.data.bgMusic != "0" &&
             data.data.bgMusic != "noMusic";
-
+          console.error("是否有V3--BGM", flag);
           store.commit("fdkk/setV3FdkkBGM", flag);
+          store.dispatch("audio/initV3BGM", flag);
           if (!flag) {
             if (unref(isHasNormalBGM)) {
               console.log("不存在V3并存在普通bgm");
-              store.dispatch("audio/resumeBGM");
+              await store.dispatch("audio/setLock", false);
+              store.dispatch("audio/playBGM", 0);
             }
           } else {
-            store.dispatch("audio/pauseBGM");
           }
         }
       });

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

@@ -1,5 +1,5 @@
 <template>
-  <ul class="control" v-show="fdkkCurrentVersion == 'v4'">
+  <ul class="control" v-show="fdkkCurrentVersion == 'V4'">
     <!-- 自定义链接 -->
     <li
       @click="onLink"

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

@@ -3,7 +3,7 @@
       <Tips />
       <div v-show="showUI">
             <Control />
-            <Menu v-if="fdkkCurrentVersion == 'v4'" />
+            <Menu v-if="fdkkCurrentVersion == 'V4'" />
             <div @click="onIsShowList" v-else
                   v-show="!((metadata.catalogRoot && metadata.catalogRoot.length == 1) && scenes.length == 1 && secondaryList.length == 1)"
                   class="v3daolan" :class="{ active: isShowScenesList }">

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

@@ -1,19 +1,26 @@
 <template>
-  <div class="logo" v-if="metadata.isLogo&&fdkkCurrentVersion!='v3'">
-    <img :src="metadata.logo || require(`@/assets/images/default/logo_white_${local}.svg`)" alt="">
+  <div class="logo" v-if="metadata.isLogo && fdkkCurrentVersion != 'V3'">
+    <img
+      :src="
+        metadata.logo ||
+        require(`@/assets/images/default/logo_white_${local}.svg`)
+      "
+      alt=""
+    />
   </div>
 </template>
 
 <script setup>
 import { useStore } from "vuex";
 import { ref, onMounted, computed, watch, nextTick } from "vue";
-import { useI18n, getLocale } from '@/i18n'
+import { useI18n, getLocale } from "@/i18n";
 
 const store = useStore();
-const metadata = computed(() => store.getters['scene/metadata'])
-const fdkkCurrentVersion = computed(() => store.getters["scene/fdkkCurrentVersion"]);
+const metadata = computed(() => store.getters["scene/metadata"]);
+const fdkkCurrentVersion = computed(
+  () => store.getters["scene/fdkkCurrentVersion"]
+);
 const local = getLocale();
-
 </script>
 
 <style lang="scss" scoped>

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

@@ -3,7 +3,7 @@
     class="control-fdkk"
     v-if="
       (fdkkmetadata &&
-        fdkkCurrentVersion != 'v3' &&
+        fdkkCurrentVersion != 'V3' &&
         fdkkmetadata &&
         !fdkkmetadata.controls.showMap &&
         (fdkkmetadata.controls.showPanorama ||
@@ -19,14 +19,14 @@
   >
     <li
       class="daolan"
-      :class="{ v3daolan: fdkkCurrentVersion == 'v3' }"
+      :class="{ v3daolan: fdkkCurrentVersion == 'V3' }"
       @click.stop="playTour"
       v-if="toursList.length > 0"
     >
       <img
         :src="
           require(`@/assets/images/icon/${
-            (fdkkCurrentVersion == 'v3' ? v3toursStatus : isPlayTours)
+            (fdkkCurrentVersion == 'V3' ? v3toursStatus : isPlayTours)
               ? 'pause01@2x'
               : 'playing01@2x'
           }.png`)
@@ -46,7 +46,7 @@
 
     <template
       v-if="
-        fdkkCurrentVersion != 'v3' &&
+        fdkkCurrentVersion != 'V3' &&
         fdkkmetadata &&
         !fdkkmetadata.controls.showMap
       "
@@ -286,7 +286,7 @@ const openTours = () => {
 };
 
 const playTour = () => {
-  if (fdkkCurrentVersion.value == "v3") {
+  if (fdkkCurrentVersion.value == "V3") {
     store.commit("fdkk/setV3ToursStatus", !v3toursStatus.value);
     let ele = document.getElementById("showifr");
     ele &&

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

@@ -1,12 +1,23 @@
 <template>
-
   <div class="rightcon">
     <div class="more-icon" :class="{ show: showMore }">
-      <ui-icon @click="showMore = !showMore" class="more" :type="showMore ? 'collect' : 'more'"></ui-icon>
+      <ui-icon
+        @click="showMore = !showMore"
+        class="more"
+        :type="showMore ? 'collect' : 'more'"
+      ></ui-icon>
     </div>
     <ul v-if="showMore" @click="showMore = false">
-      <li @click="onVR"
-        v-if="currentScene.type == 'pano' || (fdkkCurrentVersion == 'v3') || (currentScene.type == '4dkk' && (fdkkmetadata.controls && fdkkmetadata.controls.showVR))">
+      <li
+        @click="onVR"
+        v-if="
+          currentScene.type == 'pano' ||
+          fdkkCurrentVersion == 'V3' ||
+          (currentScene.type == '4dkk' &&
+            fdkkmetadata.controls &&
+            fdkkmetadata.controls.showVR)
+        "
+      >
         <img :src="require(`@/assets/images/icon/vr@2x.png`)" alt="" />
       </li>
 
@@ -25,10 +36,12 @@ import { Dialog } from "@/global_components";
 import { ref, watch, computed, onMounted, watchEffect, nextTick } from "vue";
 
 const store = useStore();
-const showMore = ref(false)
+const showMore = ref(false);
 const currentScene = computed(() => store.getters["scene/currentScene"]);
 const fdkkmetadata = computed(() => store.getters["fdkk/metadata"]);
-const fdkkCurrentVersion = computed(() => store.getters["scene/fdkkCurrentVersion"]);
+const fdkkCurrentVersion = computed(
+  () => store.getters["scene/fdkkCurrentVersion"]
+);
 const vrStatus = computed(() => store.getters["functions/vrStatus"]);
 
 // 授权
@@ -37,82 +50,84 @@ const $iosGrantedTips = (cb) => {
   if (ua.indexOf("like mac os x") > 0) {
     var reg = /os [\d._]*/gi;
     var verinfo = ua.match(reg);
-    var version = (verinfo + "")
-      .replace(/[^0-9|_.]/gi, "")
-      .replace(/_/gi, ".");
+    var version = (verinfo + "").replace(/[^0-9|_.]/gi, "").replace(/_/gi, ".");
     var arr = version.split(".");
     console.log(arr);
 
     if (arr[0] > 12 && arr[1] >= 0) {
       //对13.3以后的版本处理,包括13.3,
-      DeviceMotionEvent && DeviceMotionEvent.requestPermission()
-        .then((permissionState) => {
+      DeviceMotionEvent &&
+        DeviceMotionEvent.requestPermission().then((permissionState) => {
           if (permissionState == "granted") {
             cb({
-              msg: '授权成功',
-              code: 1
-            })
+              msg: "授权成功",
+              code: 1,
+            });
             this.reload();
           } else {
             cb({
-              msg: '授权失败',
-              code: 0
-            })
+              msg: "授权失败",
+              code: 0,
+            });
           }
-        })
-    }
-    else {
+        });
+    } else {
       //13.3以前的版本
       cb({
-        msg: '无需授权，直接成功',
-        code: 1
-      })
+        msg: "无需授权，直接成功",
+        code: 1,
+      });
     }
   } else {
     cb({
-      msg: '无需授权，直接成功',
-      code: 1
-    })
+      msg: "无需授权，直接成功",
+      code: 1,
+    });
   }
-}
+};
 
 const onVR = () => {
   $iosGrantedTips((data) => {
     console.log(data);
     if (data.code == 1) {
       store.commit("functions/setVrStatus", !vrStatus.value);
-      if (currentScene.value.type == 'pano') {
+      if (currentScene.value.type == "pano") {
         useApp().then((app) => {
-          app.krpanoDom.call(vrStatus.value ? "webvr.enterVR()" : "webvr.exitVR()")
+          app.krpanoDom.call(
+            vrStatus.value ? "webvr.enterVR()" : "webvr.exitVR()"
+          );
         });
       } else {
-        if (fdkkCurrentVersion.value == 'v4') {
-          document.querySelector('#fdkkifr') && document.querySelector('#fdkkifr').contentWindow.postMessage(
-            {
-              source: "qjkankan",
-              event: "enterVr",
-              params: {
-                toggle: vrStatus.value
-              }
-            },
-            "*"
-          );
+        if (fdkkCurrentVersion.value == "V4") {
+          document.querySelector("#fdkkifr") &&
+            document.querySelector("#fdkkifr").contentWindow.postMessage(
+              {
+                source: "qjkankan",
+                event: "enterVr",
+                params: {
+                  toggle: vrStatus.value,
+                },
+              },
+              "*"
+            );
         } else {
           let ele = document.getElementById("showifr");
-          ele && ele.contentWindow.postMessage(
-            {
-              source: "mingyuan",
-              event: vrStatus.value ? "vr-in" : "vr-out",
-            },
-            "*"
-          );
+          ele &&
+            ele.contentWindow.postMessage(
+              {
+                source: "mingyuan",
+                event: vrStatus.value ? "vr-in" : "vr-out",
+              },
+              "*"
+            );
         }
       }
     } else {
-      Dialog.alert('运动和方向访问失败，您需要完全关闭此应用，然后再次打开，并允许访问运动与方向')
+      Dialog.alert(
+        "运动和方向访问失败，您需要完全关闭此应用，然后再次打开，并允许访问运动与方向"
+      );
     }
   });
-
 };
 
 const onShare = () => {
@@ -122,11 +137,11 @@ const onShare = () => {
 watch(currentScene, () => {
   store.commit("functions/setVrStatus", false);
   useApp().then((app) => {
-    app.krpanoDom && app.krpanoDom.call('webvr.exitVR()')
+    app.krpanoDom && app.krpanoDom.call("webvr.exitVR()");
   });
-})
-
-</script>>
+});
+</script>
+>
 
 <style lang="scss" scoped>
 .rightcon {
@@ -150,12 +165,11 @@ watch(currentScene, () => {
       font-size: 30px;
     }
 
-
     &.show {
       backdrop-filter: blur(0);
       background: rgba(0, 0, 0, 0);
       border-bottom-color: transparent;
-      >ul {
+      > ul {
         padding: 6px 0 30px;
         height: 114px;
         border: 1px solid rgba(255, 255, 255, 0.2);
@@ -163,7 +177,7 @@ watch(currentScene, () => {
     }
   }
 
-  >ul {
+  > ul {
     width: 36px;
     padding: 0;
     position: absolute;
@@ -176,18 +190,17 @@ watch(currentScene, () => {
     border: 1px solid rgba(255, 255, 255, 0.2);
     padding: 6px 0 38px;
 
-    >li {
+    > li {
       width: 100%;
       display: flex;
       justify-content: center;
       align-items: center;
-      margin: 4px  0;
+      margin: 4px 0;
 
-      >img {
+      > img {
         width: 26px;
       }
     }
   }
-
 }
-</style>
+</style>

packages/qjkankan-view/src/hooks/useAudio.js

@@ -3,6 +3,7 @@
  */
 import store from '@/store';
 import { computed, onMounted, watch, ref, unref } from 'vue';
+import debounce from 'lodash-es/debounce'
 import mitt from 'mitt';
 let CLICKFIRST = false
 
@@ -46,7 +47,7 @@ async function initDefaultAudio() {
                 const loop = unref(val).repeat
                 console.log('currentAudio', unref(val).url, autoplay, loop);
                 if (!isSame) {
-                    unref(currentPlayer).changeUrl(url, autoplay, loop);
+                    unref(currentPlayer).switchUrl(url, autoplay, loop);
                 } else {
                     //相同URL的再次播放
                     unref(currentPlayer).resume();
@@ -122,20 +123,31 @@ class AudioPlayer {
         this._loop = options.loop;
         this._autoplay = options.autoplay;
         this._isPlaying = false;
+        this._lock = false;
         const emitter = mitt()
         Object.keys(emitter).forEach((method) => {
             this[method] = emitter[method]
         })
         this.audio = null
+
+        this.switchUrl = debounce(this.switchUrlSource, 300).bind(this);
+        this.play = debounce(this.toPlay, 300).bind(this);
         this.init();
     }
     get isPlaying() {
         return this._isPlaying;
     }
-    changeUrl(url, autoplay, loop) {
-        // console.log('changeUrl', arguments);
-        this.audio.unload();
+
+    switchUrlSource(url, autoplay, loop) {
+        if ('unload' in this.audio) {
+            this.audio.unload();
+        } else {
+            console.log('switchUrlSource-2');
+            return
+        }
+        console.log('switchUrlSource', url);
         this._isPlaying = false;
+        this._lock = false;
         this._autoplay = autoplay || false;
         this._loop = loop || false;
         this._src = url;
@@ -188,15 +200,16 @@ class AudioPlayer {
         $player.addEventListener('touchstart', onclick)
     }
 
-    async play() {
+    async toPlay() {
         try {
-            if (!this._isPlaying) {
+            if (!this._isPlaying && !this._lock) {
                 console.log('play---1', this._autoplay)
                 if (this._autoplay) {
                     await this.audio.play();
                 } else {
                     //默认不自动播放重置状态
                     this._isPlaying = false
+                    store.dispatch('audio/updatePlayerStatus', false);
                 }
             }
         } catch (error) {
@@ -209,6 +222,35 @@ class AudioPlayer {
     resume() {
         return this.audio.play();
     }
+    stop() {
+        this.pause();
+        store.dispatch('audio/updatePlayerStatus', false);
+    }
+    destroy() {
+        console.warn('audio-destroy');
+        if ('unload' in this.audio) {
+            this.audio.unload();
+        }
+        this._isPlaying = false;
+        this._autoplay = false;
+        this._loop = false;
+        this._src = '';
+        this.audio = null;
+        store.dispatch('audio/updatePlayerStatus', false);
+        this.emit('destroy');
+    }
+    lock() {
+        this._lock = true
+    }
+    unlock() {
+        this._lock = false
+    }
+    mute() {
+        return this.audio.mute(true);
+    }
+    unmute() {
+        return this.audio.mute(false);
+    }
 }
 
 export function useAudio() {

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

@@ -57,7 +57,7 @@ export default {
             return state.normalBGM.url.length > 0
         },
         isHasV3BGM: (state) => {
-            return state.v3BGM.isPlayIng
+            return state.v3BGM.isExist
         },
         isHasV4BGM: (state) => {
             return state.v4BGM.url.length > 0
@@ -89,10 +89,11 @@ export default {
             state.explanationBGM.repeat = payload.repeat
         },
         setV3BGM(state, payload) {
+            state.v3BGM.isExist = payload
+
+        },
+        setV3BGMPlaying(state, payload) {
             state.v3BGM.isPlayIng = payload
-            // if (payload) {
-            //     state.v3BGM.isExist = payload
-            // }
         },
         setV4BGM(state, payload) {
             state.v4BGM.url = payload.url
@@ -116,9 +117,12 @@ export default {
             commit('setExplanationBGM', { url, repeat, isAuto });
         },
 
-        initV3BGM({ commit }, status) {
+        initV3BGM({ commit, dispatch }, status) {
             // V3音乐
             commit('setV3BGM', status);
+            if (status) {
+                dispatch('pauseBGM');
+            }
         },
         initV4BGM({ commit }, url) {
             // v4音乐
@@ -142,9 +146,6 @@ export default {
                     case 0:
                         state.normalBGM.order = order;
                         break;
-                    case 1:
-                        state.v3BGM.order = order;
-                        break;
                     case 2:
                         state.v4BGM.order = order;
                         break;
@@ -156,20 +157,48 @@ export default {
                         break;
                 }
             } else {
-                console.error('当前BGM没有URL');
+                console.error('当前BGM没有URL', target);
             }
 
         },
         pauseBGM() {
             const { currentPlayer } = useAudio();
-            currentPlayer.value.pause();
+            if (unref(currentPlayer)) {
+                currentPlayer.value.pause();
+            }
+
         },
         resumeBGM() {
             const { currentPlayer } = useAudio();
-            currentPlayer.value.play();
+            if (unref(currentPlayer)) {
+                currentPlayer.value.play();
+            }
         },
         updatePlayerStatus({ commit }, status) {
             commit('setPlayStatus', status)
+        },
+
+        updateV3BGMStatus({ commit }, status) {
+            commit('setV3BGMPlaying', status)
+        },
+
+        destroy() {
+            const { currentPlayer } = useAudio();
+            if (unref(currentPlayer)) {
+                currentPlayer.value.destroy();
+            }
+        },
+        setLock({ commit }, status) {
+            const { currentPlayer } = useAudio();
+            if (unref(currentPlayer)) {
+                status ? currentPlayer.value.lock() : currentPlayer.value.unlock();
+            }
+        },
+        setMuteBGM({ commit }, status) {
+            const { currentPlayer } = useAudio();
+            if (unref(currentPlayer)) {
+                status ? currentPlayer.value.mute() : currentPlayer.value.unmute();
+            }
         }
     }
 

yarn.lock

@@ -11170,6 +11170,11 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash-es@^4.17.21:
+  version "4.17.21"
+  resolved "http://192.168.0.47:4873/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
 lodash._baseassign@^3.0.0:
   version "3.2.0"
   resolved "https://mirrors.cloud.tencent.com/npm/lodash._baseassign/-/lodash._baseassign-3.2.0.tgz#8c38a099500f215ad09e59f1722fd0c52bfe0a4e"