新增背景音乐、网站信息这两个按钮和对应的功能

src/App.vue

@@ -87,12 +87,20 @@
       </button>
     </nav>
 
+    <Teleport to="body">
+      <audio
+        ref="bgAudio"
+        loop
+        :src="bgMusicUrl"
+      />
+    </Teleport>
     <button
-      v-show="!$route.meta.hideNavBar"
+      v-show="!$route.meta.hideNavBar && bgMusicUrl"
       class="music-switch"
       :style="{
-        backgroundImage: isShowNavBar ? `url(${require(`@/assets/images/icon_music_2_on.png`)})` : `url(${require(`@/assets/images/icon_music_2_off.png`)})`,
+        backgroundImage: bgMusicStatus ? `url(${require(`@/assets/images/icon_music_2_on.png`)})` : `url(${require(`@/assets/images/icon_music_2_off.png`)})`,
       }"
+      @click="onClickBgMusicBtn"
     />
     <Teleport
       to="body"
@@ -102,13 +110,10 @@
         ref="infoTooltip"
         class="info-tooltip"
       >
-        <p>
-          <span class="key">版本号：</span><span class="value">{{ versionNumber }}</span>
-        </p>
-        <p>
+        <p v-show="contactMethod">
           <span class="key">联系方式：</span><span class="value">{{ contactMethod }}</span>
         </p>
-        <p>
+        <p v-show="email">
           <span class="key">电子邮箱：</span><span class="value">{{ email }}</span>
         </p>
         <div
@@ -118,7 +123,7 @@
       </div>
     </Teleport>
     <button
-      v-show="!$route.meta.hideNavBar"
+      v-show="!$route.meta.hideNavBar && (contactMethod || email)"
       ref="infoButton"
       class="info"
       :style="{
@@ -165,12 +170,14 @@
 import HomeFadeIn from "@/components/HomeFadeIn.vue"
 import {
   computed,
+  getCurrentInstance,
+  nextTick,
   onMounted,
   reactive,
   ref,
-  getCurrentInstance,
-  nextTick,
+  watch,
 } from 'vue'
+import { useStore } from "vuex"
 import { computePosition, offset, shift, arrow } from '@floating-ui/dom'
 import { onClickOutside } from '@vueuse/core'
 
@@ -180,6 +187,7 @@ export default {
   },
   setup () {
     const internalInstance = getCurrentInstance()
+    const store = useStore()
 
     const isShowFadeInMask = ref(false)
     const progress = ref(0)
@@ -265,25 +273,47 @@ export default {
     const navBarHeight = internalInstance.appContext.config.globalProperties.$isMobile ? `${90 / 1080 * window.innerHeight}px` : '90px'
 
     /**
+     * 背景音乐按钮相关
+     */
+    function onClickBgMusicBtn() {
+      store.commit('switchBgMusic')
+    }
+    const bgMusicStatus = computed(() => {
+      return store.state.bgMusicStatus
+    })
+    const bgAudio = ref(null)
+    const bgMusicUrl = ref('')
+    watch(bgMusicStatus, (v) => {
+      if (v) {
+        bgAudio.value.play()
+      } else {
+        bgAudio.value.pause()
+      }
+    })
+    document.addEventListener('click', function onFirstClick() {
+      if (bgMusicUrl.value) {
+        bgAudio.value.play()
+        document.removeEventListener('click', onFirstClick)
+      }
+    })
+
+    /**
      *  信息展示弹框tooltip相关
      */
     const infoButton = ref(null)
     const infoTooltip = ref(null)
     const tooltipArrow = ref(null)
     const isShowInfoTooltip = ref(false)
-    const versionNumber = ref('v1.4.5')
-    const contactMethod = ref('135-7826-7133')
-    const email = ref('y.ddzyyagf@igbp.hk')
+    const contactMethod = ref('')
+    const email = ref('')
 
-    // onMounted(() => {
-    //   api.getSiteInfo().then((res) => {
-    //     console.log(res, 'salfklsfljsdlf')
-    //     versionNumber.value = res.
-    //     contactMethod.value = res.phone
-    //     email.value = res.email
-
-    //   })
-    // })
+    onMounted(() => {
+      api.getSiteInfo().then((res) => {
+        contactMethod.value = res.phone
+        email.value = res.email
+        // bgMusicUrl.value = res.filePath
+      })
+    })
 
     function onClickInfoButton() {
       isShowInfoTooltip.value = true
@@ -307,7 +337,6 @@ export default {
           })
 
           const { x: arrowX, y: arrowY } = middlewareData.arrow
-          console.log(arrowX, 'sdfkjsdlkfjl;ksdjf')
           const arrowPlacement = {
             top: 'bottom',
             right: 'left',
@@ -343,6 +372,9 @@ export default {
 
     return {
       activeNavItemIdx,
+      bgAudio,
+      bgMusicUrl,
+      bgMusicStatus,
       contactMethod,
       email,
       infoButton,
@@ -351,10 +383,10 @@ export default {
       isShowInfoTooltip,
       isShowNavBar,
       navBarHeight,
+      onClickBgMusicBtn,
       onClickInfoButton,
       progress,
       tooltipArrow,
-      versionNumber,
     }
   },
 }
@@ -706,6 +738,26 @@ html, body {
         }
       }
     }
+    >button.music-switch {
+      position: fixed;
+      right: calc((82 + (36 + 80) * 2) / 1080 * 83vh);
+      bottom: calc(28 / 1080 * 83vh);
+      width: calc(36 / 1080 * 83vh);
+      height: calc(36 / 1080 * 83vh);
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center center;
+    }
+    >button.info {
+      position: fixed;
+      right: calc((82 + (36 + 80) * 1) / 1080 * 83vh);
+      bottom: calc(28 / 1080 * 83vh);
+      width: calc(36 / 1080 * 83vh);
+      height: calc(36 / 1080 * 83vh);
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center center;
+    }
     >button.show-hide {
       position: fixed;
       right: calc(82 / 1080 * 83vh);

src/store/index.js

@@ -3,6 +3,8 @@ import { createStore } from 'vuex'
 export default createStore({
   state: {
     treasureListScrollLeft: 0,
+    bgMusicStatus: false,
+    bgMusicStatusStore: false,
   },
   getters: {
   },
@@ -10,6 +12,18 @@ export default createStore({
     setTreasureListScrollLeft(state, value) {
       state.treasureListScrollLeft = value
     },
+    switchBgMusic(state) {
+      state.bgMusicStatus = !state.bgMusicStatus
+    },
+    guarenteeBgMusicMute(state) {
+      state.bgMusicStatusStore = state.bgMusicStatus
+      if (state.bgMusicStatus) {
+        state.bgMusicStatus = false
+      }
+    },
+    restoreBgMusicStatus(state) {
+      state.bgMusicStatus = state.bgMusicStatusStore
+    },
   },
   actions: {
   },

src/views/TreasureDetail.vue

@@ -133,6 +133,9 @@
               :src="`${prefix}${item.filePath}`"
               controls
               class="treasure-detail-video"
+              @play="onVideoPlay"
+              @ended="onVideoEnd"
+              @pause="onVideoPause"
             />
             <button
               v-show="fullScreenStatus"
@@ -267,18 +270,20 @@ import {
   watch,
 } from 'vue'
 import { useRoute } from "vue-router"
+import { useStore } from "vuex"
 import Swiper from 'swiper/bundle'
 import 'swiper/css/bundle'
 
 export default {
   setup () {
     const prefix = process.env.VUE_APP_API_ORIGIN
-
     /**
      * 路由
      */
     const route = useRoute()
 
+    const store = useStore()
+
     /**
      * 针对微信中背景视频无法自动播放的问题
      */
@@ -288,6 +293,19 @@ export default {
     })
 
     /**
+     * 详情视频播放与停止会影响网站背景音乐
+     */
+    function onVideoPlay() {
+      store.commit('guarenteeBgMusicMute')
+    }
+    function onVideoEnd() {
+      store.commit('restoreBgMusicStatus')
+    }
+    function onVideoPause() {
+      store.commit('restoreBgMusicStatus')
+    }
+
+    /**
      * tab bar
      */
     const activeTabIndex = ref(0)
@@ -347,7 +365,7 @@ export default {
     })
 
     /**
-     * 背景音乐相关
+     * 背景音乐相关。暂时没有详情页背景音乐数据。如果有，会与整个网站的背景音乐相冲突，再考虑视频播放时的声音，会更复杂。
      */
     const bgAudio = ref(null)
     const hasMusic = ref(false)
@@ -429,8 +447,8 @@ export default {
     return {
       activeSwiperItemIndex,
       activeTabIndex,
-      bgVideo,
       bgAudio,
+      bgVideo,
       cancelFullScreen,
       canRecord,
       encodeURIComponent,
@@ -442,6 +460,9 @@ export default {
       modelUrlList,
       musicUrl,
       onClickFullScreen,
+      onVideoEnd,
+      onVideoPause,
+      onVideoPlay,
       prefix,
       rawData,
       videoUrlList,