bug fix: 国之重器详情页没有实现背景音乐功能。

src/App.vue

@@ -282,7 +282,9 @@ export default {
       return store.state.bgMusicStatus
     })
     const bgAudio = ref(null)
-    const bgMusicUrl = ref('')
+    const bgMusicUrl = computed(() => {
+      return store.state.bgMusicUrl
+    })
     watch(bgMusicStatus, (v) => {
       if (v) {
         bgAudio.value.play()
@@ -290,6 +292,15 @@ export default {
         bgAudio.value.pause()
       }
     })
+    watch(bgMusicUrl, (v) => {
+      if (v && bgMusicStatus.value) {
+        console.log('sdkfjlsfllsflsfljsdfl')
+        nextTick(() => {
+          bgAudio.value.play()
+        })
+      }
+    })
+
     document.addEventListener('click', function onFirstClick() {
       if (bgMusicUrl.value) {
         bgAudio.value.play()
@@ -312,7 +323,7 @@ export default {
       api.getSiteInfo().then((res) => {
         contactMethod.value = res.phone
         email.value = res.email
-        bgMusicUrl.value = res.filePath
+        store.commit('initBgMusicUrl', res.filePath)
       })
     })
 

src/api.js

@@ -38,7 +38,6 @@ export default {
         "Content-Type": "application/json",
       },
     }).then((res) => {
-      console.log('sdfsdfsdf', JSON.parse(res.data.data))
       return JSON.parse(res.data.data)
     })
   },

src/store/index.js

@@ -5,6 +5,8 @@ export default createStore({
     treasureListScrollLeft: 0,
     bgMusicStatus: false,
     bgMusicStatusStore: false,
+    bgMusicUrl: '',
+    bgMusicUrlStore: '', // 国之重器详情页如果有专门的背景音乐，就需要播放专门的背景音乐，为了退出详情页时能复原，就需要这个变量。
   },
   getters: {
   },
@@ -24,6 +26,17 @@ export default createStore({
     restoreBgMusicStatus(state) {
       state.bgMusicStatus = state.bgMusicStatusStore
     },
+    initBgMusicUrl(state, v) {
+      state.bgMusicUrl = v
+      state.bgMusicUrlStore = v
+    },
+    changeBgMusicUrl(state, v) {
+      state.bgMusicUrlStore = state.bgMusicUrl
+      state.bgMusicUrl = v
+    },
+    restoreBgMusicUrl(state) {
+      state.bgMusicUrl = state.bgMusicUrlStore
+    },
   },
   actions: {
   },

src/views/TreasureDetail.vue

@@ -217,17 +217,6 @@
         >
       </button>
       <button
-        v-if="hasMusic"
-        @click="isMusicOn = !isMusicOn"
-      >
-        <img
-          class=""
-          :src="require(`@/assets/images/icon_music_${isMusicOn ? 'on' : 'off'}.png`)"
-          alt=""
-          draggable="false"
-        >
-      </button>
-      <button
         v-if="canRecord && activeTabIndex === 0"
         @click="$router.push({name: 'RecordView', query: {
           url: encodeURI(`${prefix}/web-model/index.html#/relic-detail?model-path=${encodeURIComponent(modelUrlList[activeSwiperItemIndex].filePath)}`)
@@ -249,13 +238,6 @@
         >
       </button>
     </menu>
-
-    <audio
-      v-if="hasMusic"
-      ref="bgAudio"
-      :src="musicUrl"
-      style="display: none;"
-    />
   </div>
 </template>
 
@@ -268,6 +250,7 @@ import {
   ref,
   toRefs,
   watch,
+  onUnmounted,
 } from 'vue'
 import { useRoute } from "vue-router"
 import { useStore } from "vuex"
@@ -365,22 +348,6 @@ export default {
     })
 
     /**
-     * 背景音乐相关。暂时没有详情页背景音乐数据。如果有，会与整个网站的背景音乐相冲突，再考虑视频播放时的声音，会更复杂。
-     */
-    const bgAudio = ref(null)
-    const hasMusic = ref(false)
-    const musicUrl = ref(require('@/assets/mock/02.mp3'))
-    const isMusicOn = ref(false)
-    watch(isMusicOn, (newV) => {
-      console.log('change!', newV)
-      if (newV) {
-        bgAudio.value.play()
-      } else {
-        bgAudio.value.pause()
-      }
-    })
-
-    /**
      * 录屏相关
      */
     const canRecord = ref(navigator?.mediaDevices?.getDisplayMedia)
@@ -418,6 +385,7 @@ export default {
     const modelUrlList = reactive([])
     const videoUrlList = reactive([])
     const imageUrlList = reactive([])
+    let isBgAudioChanged = false
     api.getTreasureDetail(route.query.id).then((res) => {
       rawData.value = res
       for (const iterator of rawData.value.file) {
@@ -431,6 +399,12 @@ export default {
         case 'img':
           imageUrlList.push(iterator)
           break
+        case 'audio':
+          if (!isBgAudioChanged) {
+            store.commit('changeBgMusicUrl', iterator.filePath)
+            isBgAudioChanged = true
+          }
+          break
         default:
           break
         }
@@ -444,21 +418,23 @@ export default {
       }
     })
 
+    onUnmounted(() => {
+      if (isBgAudioChanged) {
+        store.commit('restoreBgMusicUrl')
+      }
+    })
+
     return {
       activeSwiperItemIndex,
       activeTabIndex,
-      bgAudio,
       bgVideo,
       cancelFullScreen,
       canRecord,
       encodeURIComponent,
       fullScreenStatus,
-      hasMusic,
       imageUrlList,
-      isMusicOn,
       isShowTabbar,
       modelUrlList,
-      musicUrl,
       onClickFullScreen,
       onVideoEnd,
       onVideoPause,