update1424

src/framework/show/index.vue

@@ -23,7 +23,7 @@
       <preview :item="currentHotspot" :show="showPreview" @close="(showPreview = false), (currentHotspot = '')" />
 
       <ul class="aside" v-if="activeItem.type != '4dkk'">
-        <li :class="{ismuted:item.id=='bgm'&&!isMusic}" 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>
@@ -69,7 +69,7 @@ export default {
   },
   data() {
     return {
-      bgmAudio:'',
+      bgmAudio: "",
       isMusic: false,
       showPreview: false,
       isFullscreen: false,
@@ -128,8 +128,9 @@ export default {
       this.isFullscreen = !this.isFullscreen;
     },
     handleItem(data) {
-       if (data.id == "bgm") {
-        this.isMusic=!this.isMusic
+      if (data.id == "bgm") {
+        this.isMusic = !this.isMusic;
+        localStorage.setItem("g_bgmstatus", this.isMusic ? "open" : "close");
       }
       if (data.id == "about") {
         this.showIntro = true;
@@ -253,10 +254,10 @@ export default {
     },
   },
   watch: {
-    isMusic:{
+    isMusic: {
       handler: function(newVal) {
-        newVal?this.bgmAudio.play():this.bgmAudio.pause()
-      }
+        newVal ? this.bgmAudio.play() : this.bgmAudio.pause();
+      },
     },
     currentHotspot: {
       deep: true,
@@ -300,43 +301,54 @@ export default {
               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)
-
-            this.bgmAudio.addEventListener('canplay',()=>{
-              this.bgmAudio.play()
-            })
+            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.$nextTick(() => {
+              setTimeout(() => {
+                if (this.bgmAudio.paused) {
+                  this.isMusic = false;
+                  localStorage.setItem("g_bgmstatus", this.isMusic ? "open" : "close");
+                }
+              });
+            });
 
+            this.bgmAudio.removeEventListener("playing", playingfn);
+            this.bgmAudio.removeEventListener("paused", pausedingfn);
 
-            document.addEventListener('visibilitychange',()=>{
-              this.isMusic = !document.hidden
-            })
+            this.bgmAudio.addEventListener("paused", pausedingfn);
+            this.bgmAudio.addEventListener("playing", playingfn);
 
-            document.addEventListener('visibilitychange',()=>{
-              this.isMusic = !document.hidden
-            })
+            this.bgmAudio.addEventListener("canplay", () => {
+              this.bgmAudio.play();
+              localStorage.setItem("g_bgmstatus", this.isMusic ? "open" : "close");
+            });
 
-            document.addEventListener('WeixinJSBridgeReady',()=>{
-              this.bgmAudio.play()
-            })
+            document.addEventListener("visibilitychange", () => {
+              let data = document.hidden;
+              if (data) {
+                this.isMusic = false;
+              } else {
+                let status = localStorage.getItem("g_bgmstatus");
+                if (status === "open") {
+                  this.isMusic = true;
+                }
+              }
+            });
 
+            document.addEventListener("WeixinJSBridgeReady", () => {
+              this.bgmAudio.play();
+            },false);
           }
           if (newVal.isRemind == 1) {
             this.localRemind = localStorage.getItem(locoR) == 1 ? false : true;
@@ -500,10 +512,10 @@ export default {
           transform: translate(-50%, -50%);
         }
       }
-      &.ismuted{
+      &.ismuted {
         position: relative;
-        &::before{
-         content: '';
+        &::before {
+          content: "";
           pointer-events: none;
           display: inline-block;
           width: 1px;
@@ -511,7 +523,7 @@ export default {
           position: absolute;
           left: 30%;
           top: 30%;
-          transform: rotate(-45deg) ;
+          transform: rotate(-45deg);
           transform-origin: top;
           z-index: 99;
           background: #fff;

src/framework/showMobile/index.vue

@@ -191,6 +191,7 @@ export default {
     handleItem(data) {
       if (data.id == "bgm") {
         this.isMusic=!this.isMusic
+        localStorage.setItem("g_bgmstatus", this.isMusic ? "open" : "close");
       }
       if (data.id == "about") {
         this.showIntro = true;
@@ -387,26 +388,41 @@ export default {
               this.isMusic = false;
             };
 
+            this.$nextTick(() => {
+              setTimeout(() => {
+                if (this.bgmAudio.paused) {
+                  this.isMusic = false;
+                  localStorage.setItem("g_bgmstatus", this.isMusic ? "open" : "close");
+                }
+              });
+            });
+
             this.bgmAudio.removeEventListener("playing", playingfn);
             this.bgmAudio.removeEventListener("paused", pausedingfn);
 
             this.bgmAudio.addEventListener("paused", pausedingfn);
             this.bgmAudio.addEventListener("playing", playingfn);
 
+            this.bgmAudio.addEventListener("canplay", () => {
+              this.bgmAudio.play();
+              localStorage.setItem("g_bgmstatus", this.isMusic ? "open" : "close");
+            });
 
-
-            this.bgmAudio.addEventListener('canplay',()=>{
-              this.bgmAudio.play()
-            })
-            
-
-            document.addEventListener('visibilitychange',()=>{
-              this.isMusic = !document.hidden
-            })
+            document.addEventListener("visibilitychange", () => {
+              let data = document.hidden;
+              if (data) {
+                this.isMusic = false;
+              } else {
+                let status = localStorage.getItem("g_bgmstatus");
+                if (status === "open") {
+                  this.isMusic = true;
+                }
+              }
+            });
 
             document.addEventListener("WeixinJSBridgeReady", () => {
               this.bgmAudio.play();
-            });
+            },false);
           }
           if (newVal.isRemind == 1) {
             this.localRemind = localStorage.getItem(locoR) == 1 ? false : true;