针对五邑大学链接更新背景音乐功能

src/framework/show/index.vue

@@ -1,50 +1,29 @@
 <template>
   <div class="panocon">
     <template v-if="showInfo">
-      <iframe allowfullscreen="true" v-if="activeItem.type=='4dkk'" 
-      :src="`/spc.html?m=${activeItem.sceneCode}&lang=zh`" frameborder="0"></iframe>
-      <div v-show="activeItem.type!='4dkk'" id="pano"></div>
+      <iframe allowfullscreen="true" v-if="activeItem.type == '4dkk'" :src="`/spc.html?m=${activeItem.sceneCode}&lang=zh`" frameborder="0"></iframe>
+      <div v-show="activeItem.type != '4dkk'" id="pano"></div>
 
-      <div class="pano-logo" v-if="showInfo.isLogo&&activeItem.type!='4dkk'">
-        <img :src="showInfo.logo||require('@/assets/images/default/img_logoshow@2x.png')" alt="" />
+      <div class="pano-logo" v-if="showInfo.isLogo && activeItem.type != '4dkk'">
+        <img :src="showInfo.logo || require('@/assets/images/default/img_logoshow@2x.png')" alt="" />
       </div>
 
-
-      <div
-        class="oper-tips"
-        :class="{ hidetips: !showTips }"
-        v-if="localRemind"
-      >
-        <img
-          :src="
-            showInfo.pcIcon ||
-            require('@/assets/images/default/show/img_tipspc_default.png')
-          "
-          alt=""
-        />
+      <div class="oper-tips" :class="{ hidetips: !showTips }" v-if="localRemind">
+        <img :src="showInfo.pcIcon || require('@/assets/images/default/show/img_tipspc_default.png')" alt="" />
       </div>
 
       <list v-if="canLoad" @select="handleSelect" :select="activeItem"></list>
-      <password
-        :bg="showInfo.icon"
-        :show="showPassword"
-        @submit="handlePassword"
-        @close="showPassword = false"
-      />
+      <password :bg="showInfo.icon" :show="showPassword" @submit="handlePassword" @close="showPassword = false" />
       <popup :title="'简介'" :show="showIntro" @close="showIntro = false">
         <div slot="content" class="introcon">
           {{ showInfo.description || "暂无简介" }}
         </div>
       </popup>
 
-      <preview
-        :item="currentHotspot"
-        :show="showPreview"
-        @close="showPreview = false,currentHotspot=''"
-      />
+      <preview :item="currentHotspot" :show="showPreview" @close="(showPreview = false), (currentHotspot = '')" />
 
-      <ul class="aside" v-if="activeItem.type!='4dkk'">
-        <li v-for="(item, i) in aside" :key="i">
+      <ul class="aside" v-if="activeItem.type != '4dkk'">
+        <li :class="{ismuted:item.id=='bgm'&&!isMusic}" v-for="(item, i) in aside" :key="i">
           <span @click="handleItem(item)">
             <i class="iconfont" :class="item.icon"></i>
           </span>
@@ -53,23 +32,21 @@
     </template>
     <template v-else>
       <div class="hasDel" v-if="loadFinish">
-      <div>
-        <img :src="$noresult" alt="">
-        <p>作品已被删除</p>
+        <div>
+          <img :src="$noresult" alt="" />
+          <p>作品已被删除</p>
+        </div>
       </div>
-    </div>
-
     </template>
   </div>
 </template>
 
 <script>
 import * as krfn from "@/core/index.js";
-import { getPanoInfo, checkPassword,checkWork } from "@/api";
+import { getPanoInfo, checkPassword, checkWork } from "@/api";
 import password from "./popup/password";
 import preview from "./popup/preview";
-import { $smallWaiting } from '@/components/shared/loading'
-
+import { $smallWaiting } from "@/components/shared/loading";
 
 import popup from "./popup/";
 import { mapGetters } from "vuex";
@@ -92,11 +69,13 @@ export default {
   },
   data() {
     return {
+      bgmAudio:'',
+      isMusic: true,
       showPreview: false,
-      isFullscreen:false,
+      isFullscreen: false,
       showTips: false,
       canLoad: false,
-      loadFinish:false,
+      loadFinish: false,
       showPassword: false,
       showIntro: false,
       localRemind: false,
@@ -123,37 +102,40 @@ export default {
   },
   methods: {
     onFullScreen() {
-        let element = document.documentElement;
-        if (this.isFullscreen) {
-            if (document.exitFullscreen) {
-                document.exitFullscreen();
-            } else if (document.webkitCancelFullScreen) {
-                document.webkitCancelFullScreen();
-            } else if (document.mozCancelFullScreen) {
-                document.mozCancelFullScreen();
-            } else if (document.msExitFullscreen) {
-                document.msExitFullscreen();
-            }
-        } else {
-            if (element.requestFullscreen) {
-                element.requestFullscreen();
-            } else if (element.webkitRequestFullScreen) {
-                element.webkitRequestFullScreen();
-            } else if (element.mozRequestFullScreen) {
-                element.mozRequestFullScreen();
-            } else if (element.msRequestFullscreen) {
-                element.msRequestFullscreen();
-            }
+      let element = document.documentElement;
+      if (this.isFullscreen) {
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        } else if (document.webkitCancelFullScreen) {
+          document.webkitCancelFullScreen();
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen();
+        } else if (document.msExitFullscreen) {
+          document.msExitFullscreen();
         }
-          // 改变当前全屏状态
-        this.isFullscreen = !this.isFullscreen;
-      },
+      } else {
+        if (element.requestFullscreen) {
+          element.requestFullscreen();
+        } else if (element.webkitRequestFullScreen) {
+          element.webkitRequestFullScreen();
+        } else if (element.mozRequestFullScreen) {
+          element.mozRequestFullScreen();
+        } else if (element.msRequestFullscreen) {
+          element.msRequestFullscreen();
+        }
+      }
+      // 改变当前全屏状态
+      this.isFullscreen = !this.isFullscreen;
+    },
     handleItem(data) {
+       if (data.id == "bgm") {
+        this.isMusic=!this.isMusic
+      }
       if (data.id == "about") {
         this.showIntro = true;
       }
       if (data.id == "full") {
-        this.onFullScreen()
+        this.onFullScreen();
       }
       if (data.id == "vr") {
         var krpano = document.getElementById("krpanoSWFObject");
@@ -171,7 +153,7 @@ export default {
           if (res.code == 0) {
             this.showPassword = false;
             this.canLoad = true;
-          } 
+          }
         }
       );
     },
@@ -193,14 +175,13 @@ export default {
           }
         });
       });
-      tmp = this.$unique(tmp)
+      tmp = this.$unique(tmp);
 
       this.showInfo.catalogs = tmp;
       let rootmp = [];
       tmp.forEach((item) => {
         this.showInfo.catalogRoot.forEach((sub) => {
-
-          sub.children = this.$unique(sub.children)
+          sub.children = this.$unique(sub.children);
 
           if (sub.children.indexOf(item.id) > -1) {
             rootmp.push(sub);
@@ -208,18 +189,16 @@ export default {
         });
       });
 
+      rootmp = this.$unique(rootmp);
 
-      rootmp = this.$unique(rootmp)
-
-      let sortArr = this.showInfo.catalogRoot.map(item=>item.name)
-      rootmp.sort((a,b)=>{
-        return sortArr.indexOf(a.name) - sortArr.indexOf(b.name)
-      })
-
+      let sortArr = this.showInfo.catalogRoot.map((item) => item.name);
+      rootmp.sort((a, b) => {
+        return sortArr.indexOf(a.name) - sortArr.indexOf(b.name);
+      });
 
       this.showInfo.catalogRoot = rootmp.map((item) => {
         let temp = [];
-        item.children = this.$unique(item.children)
+        item.children = this.$unique(item.children);
         item.children.forEach((sub) => {
           tmp.forEach((jj) => {
             if (jj.id == sub) {
@@ -233,15 +212,15 @@ export default {
         };
       });
 
-      this.showInfo.catalogs = tmp
+      this.showInfo.catalogs = tmp;
 
-      let cid = 'c_'+this.$randomWord(true,8,8)
+      let cid = "c_" + this.$randomWord(true, 8, 8);
 
       if (this.showInfo.catalogRoot.length <= 0) {
         this.showInfo.catalogRoot.push({
-          id: 'r_'+this.$randomWord(true,8,8),
+          id: "r_" + this.$randomWord(true, 8, 8),
           name: "全部场景",
-          children:[cid]
+          children: [cid],
         });
       }
 
@@ -253,37 +232,39 @@ export default {
       }
 
       if (this.showInfo.firstScene) {
-        this.showInfo.firstScene = this.showInfo.scenes.find(item=>item.sceneCode==this.showInfo.firstScene.sceneCode)
+        this.showInfo.firstScene = this.showInfo.scenes.find((item) => item.sceneCode == this.showInfo.firstScene.sceneCode);
       }
 
       this.$store.commit("SetShowInfo", this.showInfo);
     },
 
     getSceneInfo() {
-      checkWork("",data=>{
+      checkWork("", (data) => {
         if (data.data) {
-          getPanoInfo(
-            "",
-            (res) => {
-              this.$store.commit("SetShowInfo", res);
-              this.fixData()
-              this.loadFinish = true
-            }
-          );
-        } else{
-          this.loadFinish = true
+          getPanoInfo("", (res) => {
+            this.$store.commit("SetShowInfo", res);
+            this.fixData();
+            this.loadFinish = true;
+          });
+        } else {
+          this.loadFinish = true;
         }
-      })
-    }
+      });
+    },
   },
   watch: {
+    isMusic:{
+      handler: function(newVal) {
+        newVal?this.bgmAudio.play():this.bgmAudio.pause()
+      }
+    },
     currentHotspot: {
       deep: true,
-      handler: function (newVal) {
+      handler: function(newVal) {
         if (newVal) {
           if (newVal.hotspotType == "link") {
             window.open(newVal.hyperlink, "_blank");
-            this.currentHotspot=''
+            this.currentHotspot = "";
             return;
           }
           if (newVal.hotspotType == "scene") {
@@ -297,7 +278,7 @@ export default {
     canLoad(newVal) {
       if (newVal) {
         setTimeout(() => {
-          this.showTips = this.localRemind
+          this.showTips = this.localRemind;
           setTimeout(() => {
             this.showTips = false;
           }, this.showInfo.remindTime * 1000);
@@ -307,23 +288,56 @@ export default {
     showInfo: {
       deep: true,
       immediate: true,
-      handler: function (newVal) {
+      handler: function(newVal) {
         if (newVal) {
-          document.title = newVal.name || '无标题'
-          let locoR = "localRemind"+newVal.id
+          document.title = newVal.name || "无标题";
+          let locoR = "localRemind" + newVal.id;
           if (!newVal.description) {
-            this.aside.shift()
+            this.aside.shift();
           }
-          if (newVal.isRemind==1) {
-            this.localRemind = localStorage.getItem(locoR) == 1 ? false : true
-            localStorage.setItem(locoR, 1);
+          if (newVal.bgMusic) {
+            this.aside.push({
+              id: "bgm",
+              icon: "iconbs_nav_sound",
+            });
+            this.bgmAudio = new Audio()
+            this.bgmAudio.src = newVal.bgMusic
+            this.bgmAudio.loop = true
+            this.bgmAudio.autoplay = true
+
+            let playingfn = ()=>{
+              this.isMusic = true
+            }
+
+            let pausedingfn = ()=>{
+              this.isMusic = false
+            }
+
+            this.bgmAudio.removeEventListener('playing',playingfn)
+            this.bgmAudio.removeEventListener('paused',pausedingfn)
+
+
+            this.bgmAudio.addEventListener('paused',pausedingfn)
+            this.bgmAudio.addEventListener('playing',playingfn)
+
+            document.addEventListener('visibilitychange',()=>{
+              this.isMusic = !document.hidden
+            })
+
+            this.bgmAudio.addEventListener('WeixinJSBridgeReady',()=>{
+              this.bgmAudio.play()
+            })
+
           }
-          else{
+          if (newVal.isRemind == 1) {
+            this.localRemind = localStorage.getItem(locoR) == 1 ? false : true;
+            localStorage.setItem(locoR, 1);
+          } else {
             this.localRemind = true;
             localStorage.setItem(locoR, 0);
           }
           if (this.showInfo.firstScene) {
-            if (this.showInfo.firstScene.type == '4dkk') {
+            if (this.showInfo.firstScene.type == "4dkk") {
               this.localRemind = false;
             }
           }
@@ -333,19 +347,19 @@ export default {
     },
     activeItem: {
       handler(newVal) {
-        this.currentHotspot = ''
+        this.currentHotspot = "";
         $("#pano").empty();
         window.vrInitFn = () => {
-          $smallWaiting.hide()
+          $smallWaiting.hide();
           var krpano = document.getElementById("krpanoSWFObject");
           __krfn.utils.initHotspot(krpano, newVal && newVal.someData, false);
         };
         window.vrViewFn = () => {
           try {
-            let tmp = newVal.initVisual||{};
+            let tmp = newVal.initVisual || {};
             var krpano = document.getElementById("krpanoSWFObject");
-            krpano.set("view.vlookat", tmp.vlookat||0);
-            krpano.set("view.hlookat", tmp.hlookat||0);
+            krpano.set("view.vlookat", tmp.vlookat || 0);
+            krpano.set("view.hlookat", tmp.hlookat || 0);
             krpano.set("autorotate.enabled", Boolean(this.showInfo.isAuto));
           } catch (error) {
             error;
@@ -356,13 +370,13 @@ export default {
           "events[skin_events].onloadcomplete": "js(window.vrInitFn());",
         };
         if (newVal) {
-          if (newVal.type=='4dkk') {
-              removepano("#pano");
-              $("#pano").empty();
-              return
+          if (newVal.type == "4dkk") {
+            removepano("#pano");
+            $("#pano").empty();
+            return;
           }
           removepano("#pano");
-          $smallWaiting.show()
+          $smallWaiting.show();
 
           embedpano({
             // xml: "%HTMLPATH%/static/template/tour.xml",
@@ -382,14 +396,13 @@ export default {
     window.__krfn = __krfn;
 
     this.$bus.on("clickHotspot", (data) => {
-      let someData = this.activeItem.someData
-      if (typeof someData == 'string') {
+      let someData = this.activeItem.someData;
+      if (typeof someData == "string") {
         someData = JSON.parse(this.activeItem.someData);
       }
       let idx = someData.hotspots.findIndex((item) => item.name == data);
 
       this.currentHotspot = someData.hotspots[idx];
-
     });
     this.getSceneInfo();
   },
@@ -400,20 +413,20 @@ export default {
 .panocon {
   width: 100%;
   height: 100%;
-  .hasDel{
+  .hasDel {
     background: #fff;
     width: 100%;
     height: 100%;
     position: relative;
-    >div{
+    > div {
       position: absolute;
       top: 50%;
       left: 50%;
-      transform: translate(-50%,-50%);
+      transform: translate(-50%, -50%);
       color: #909090;
       text-align: center;
       font-size: 18px;
-      >p{
+      > p {
         margin-top: 20px;
       }
     }
@@ -422,7 +435,7 @@ export default {
     width: 100%;
     height: 100%;
   }
-  >iframe{
+  > iframe {
     width: 100%;
     height: 100%;
   }
@@ -478,6 +491,23 @@ export default {
           transform: translate(-50%, -50%);
         }
       }
+      &.ismuted{
+        position: relative;
+        &::before{
+         content: '';
+          pointer-events: none;
+          display: inline-block;
+          width: 1px;
+          height: 46%;
+          position: absolute;
+          left: 30%;
+          top: 30%;
+          transform: rotate(-45deg) ;
+          transform-origin: top;
+          z-index: 99;
+          background: #fff;
+        }
+      }
     }
   }
   .introcon {

src/framework/showMobile/index.vue

@@ -21,7 +21,7 @@
       <list v-if="canLoad && !isVR" @select="handleSelect" :firstScene="firstScene" :select="activeItem" :mapvisit="mapvisit"></list>
 
       <ul class="aside" v-show="activeItem.type != '4dkk'">
-        <li v-for="(item, i) in aside" :key="i">
+        <li :class="{ ismuted: item.id == 'bgm' && !isMusic }" v-for="(item, i) in aside" :key="i">
           <span @click="handleItem(item)">
             <i class="iconfont" :class="item.icon"></i>
           </span>
@@ -31,16 +31,16 @@
         <img :src="showInfo.appIcon || require('@/assets/images/default/show/img_tipsmb_default.png')" alt="" />
       </div>
       <password :bg="showInfo.icon" :show="showPassword" @submit="handlePassword" @close="showPassword = false" />
-      <popup :title="'简介'" :show="showIntro" @close="showIntro = false,currentHotspot=''">
+      <popup :title="'简介'" :show="showIntro" @close="(showIntro = false), (currentHotspot = '')">
         <div slot="content" class="introcon">
           <span>{{ showInfo.description || "暂无简介" }}</span>
         </div>
       </popup>
-      <imgview @close="showImage = false,currentHotspot=''" v-if="showImage" :image="currentHotspot.image" />
+      <imgview @close="(showImage = false), (currentHotspot = '')" v-if="showImage" :image="currentHotspot.image" />
 
-      <preview :item="currentHotspot" :show="showPreview" @close="showPreview = false,currentHotspot=''" />
+      <preview :item="currentHotspot" :show="showPreview" @close="(showPreview = false), (currentHotspot = '')" />
 
-      <popup :title="currentHotspot.hotspotTitle" :show="showTextarea" @close="showTextarea = false,currentHotspot=''">
+      <popup :title="currentHotspot.hotspotTitle" :show="showTextarea" @close="(showTextarea = false), (currentHotspot = '')">
         <div slot="content" class="introcon">
           <span>{{ currentHotspot.textarea }}</span>
         </div>
@@ -120,9 +120,11 @@ export default {
   },
   data() {
     return {
+      bgmAudio: "",
+      isMusic: true,
       mapvisit: 0,
       bgmUrl: "",
-      somedatainfo:'',
+      somedatainfo: "",
       isVR: false,
       localRemind: false,
       showPreview: false,
@@ -168,7 +170,7 @@ export default {
     getSceneInfomation() {
       getSceneInfomation({ id: this.activeItem.sceneCode }, (data) => {
         this.mapvisit = data.data.mapVisi;
-        this.somedatainfo = data.data
+        this.somedatainfo = data.data;
         if (data.data.bgMusic) {
           if (bgmMap[data.data.bgMusic]) {
             this.bgmUrl =
@@ -177,10 +179,9 @@ export default {
                 : `https://4dkk.4dage.com/v3-test/audio/${bgmMap[data.data.bgMusic]}`;
           }
 
-          if (data.data.bgMusic == 'user') {
+          if (data.data.bgMusic == "user") {
             this.bgmUrl = data.data.bgMusic ? `https://4dkk.4dage.com/images/images${data.data.num}/${data.data.bgMusicName}` : "";
           }
-
         }
       });
     },
@@ -188,6 +189,9 @@ export default {
       this.audioUrl = "";
     },
     handleItem(data) {
+      if (data.id == "bgm") {
+        this.isMusic=!this.isMusic
+      }
       if (data.id == "about") {
         this.showIntro = true;
       }
@@ -307,6 +311,11 @@ export default {
     },
   },
   watch: {
+     isMusic:{
+      handler: function(newVal) {
+        newVal?this.bgmAudio.play():this.bgmAudio.pause()
+      }
+    },
     currentHotspot: {
       deep: true,
       handler: function(newVal) {
@@ -314,7 +323,7 @@ export default {
           this.audioUrl = "";
           if (newVal.hotspotType == "link") {
             window.open(newVal.hyperlink, "_blank");
-            this.currentHotspot=''
+            this.currentHotspot = "";
             return;
           }
           if (newVal.hotspotType == "scene") {
@@ -331,7 +340,7 @@ export default {
           }
           if (newVal.hotspotType == "audio") {
             this.audioUrl = newVal;
-            this.currentHotspot=''
+            this.currentHotspot = "";
             return;
           }
 
@@ -360,6 +369,38 @@ export default {
           if (!newVal.description) {
             this.aside.shift();
           }
+          if (newVal.bgMusic) {
+            this.aside.push({
+              id: "bgm",
+              icon: "iconbs_nav_sound",
+            });
+            this.bgmAudio = new Audio();
+            this.bgmAudio.src = newVal.bgMusic;
+            this.bgmAudio.loop = true;
+            this.bgmAudio.autoplay = true;
+
+            let playingfn = () => {
+              this.isMusic = true;
+            };
+
+            let pausedingfn = () => {
+              this.isMusic = false;
+            };
+
+            this.bgmAudio.removeEventListener("playing", playingfn);
+            this.bgmAudio.removeEventListener("paused", pausedingfn);
+
+            this.bgmAudio.addEventListener("paused", pausedingfn);
+            this.bgmAudio.addEventListener("playing", playingfn);
+
+            document.addEventListener('visibilitychange',()=>{
+              this.isMusic = !document.hidden
+            })
+
+            this.bgmAudio.addEventListener("WeixinJSBridgeReady", () => {
+              this.bgmAudio.play();
+            });
+          }
           if (newVal.isRemind == 1) {
             this.localRemind = localStorage.getItem(locoR) == 1 ? false : true;
             localStorage.setItem(locoR, 1);
@@ -385,7 +426,7 @@ export default {
     activeItem: {
       handler(newVal) {
         this.$nextTick(() => {
-          this.currentHotspot=''
+          this.currentHotspot = "";
           if (newVal.type == "4dkk") {
             this.embeM = null;
             this.otherLink = null;
@@ -577,6 +618,23 @@ export default {
           transform: translate(-50%, -50%);
         }
       }
+      &.ismuted {
+        position: relative;
+        &::before {
+          content: "";
+          display: inline-block;
+          width: 1px;
+          height: 46%;
+          position: absolute;
+          left: 30%;
+          top: 30%;
+          transform: rotate(-45deg);
+          transform-origin: top;
+          z-index: 99;
+          pointer-events: none;
+          background: #fff;
+        }
+      }
     }
   }
   .introcon {