全景图页面 解说音频播放逻辑；bug fix: 从全景列表页按关闭按钮返回全景图页，不需要重新加载全景图。

src/components/panoDesc.vue

@@ -1,16 +1,21 @@
 <template>
   <div class="pano-desc">
+    <audio
+      ref="audio"
+      src="@/assets/audios/bacMusic.mp3"
+      loop
+    />
     <div class="title-bar">
       <button
         class="audio"
         :class="{
-          play: !isPanoDescAudioPlaying,
-          stop: isPanoDescAudioPlaying
+          play: isAudioPlaying,
+          stop: !isAudioPlaying
         }"
-        @click="togglePanoDescAudioStatus"
+        @click="toggleAudio"
       >
         <img
-          :src="isPanoDescAudioPlaying ? require(`@/assets/images/pano/desc-audio-play.png`) : require(`@/assets/images/pano/desc-audio-stop.png`)"
+          :src="isAudioPlaying ? require(`@/assets/images/pano/desc-audio-play.png`) : require(`@/assets/images/pano/desc-audio-stop.png`)"
           alt=""
           draggable="false"
         >
@@ -54,21 +59,40 @@ export default {
   },
   data() {
     return {
+      isAudioPlaying: false,
     }
   },
   computed: {
     ...globalMapState([
-      'isPanoDescAudioPlaying',
       'isPanoDescExpanded',
     ])
   },
   mounted() {
   },
+  beforeDestroy() {
+    if (this.isAudioPlaying) {
+      this.isAudioPlaying = false
+      this.$refs.audio.pause()
+      this.cancelMustMute()
+    }
+  },
   methods: {
     ...globalMapMutations([
-      'togglePanoDescAudioStatus',
+      'mustMute',
+      'cancelMustMute',
       'togglePanoDescExpandStatus',
     ]),
+    toggleAudio() {
+      if (this.isAudioPlaying) {
+        this.isAudioPlaying = false
+        this.$refs.audio.pause()
+        this.cancelMustMute()
+      } else {
+        this.isAudioPlaying = true
+        this.$refs.audio.play()
+        this.mustMute()
+      }
+    }
   },
 }
 </script>
@@ -76,6 +100,9 @@ export default {
 <style lang="less" scoped>
 .pano-desc {
   position: relative;
+  > audio {
+    display: none;
+  }
   > .title-bar {
     width: 100%;
     height: 100%;
@@ -94,12 +121,14 @@ export default {
     }
     > h1 {
       font-size: 1.67rem;
+      line-height: 1.1em;
       color: #FFFFFF;
       width: 13.33rem;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: pre;
       text-align: center;
+      padding-top: 0.25rem;
     }
     > button.expand-status {
       width: 1.75rem;

src/store/index.js

@@ -10,7 +10,6 @@ export default new Vuex.Store({
     isFullScreen: false,
 
     panoData: null,
-    isPanoDescAudioPlaying: false,
     isPanoDescExpanded: false,
   },
   getters: {
@@ -94,15 +93,9 @@ export default new Vuex.Store({
     setPanoData(state, value) {
       state.panoData = value
     },
-    setIsPanoDescAudioPlaying(state, value) {
-      state.isPanoDescAudioPlaying = value
-    },
     setIsPanoDescExpanded(state, value) {
       state.isPanoDescExpanded = value
     },
-    togglePanoDescAudioStatus(state) {
-      state.isPanoDescAudioPlaying = !state.isPanoDescAudioPlaying
-    },
     togglePanoDescExpandStatus(state) {
       state.isPanoDescExpanded = !state.isPanoDescExpanded
     }

src/views/PanoView.vue

@@ -53,8 +53,10 @@ export default {
   beforeRouteUpdate(to, from, next) {
     next()
     if (to.name === 'PanoView') {
-      this.scene = this.$route.params.scene
-      this.loadScene()
+      if (this.$route.params.scene) {
+        this.scene = this.$route.params.scene
+        this.loadScene()
+      }
     }
   },
   data() {