全屏功能

src/components/BottomBar.vue

@@ -67,10 +67,10 @@
       </button>
       <button
         v-show="$route.meta.canFullScreen"
-        @click="onClickFullScreen"
+        @click="toggleFullScreen"
       >
         <img
-          src="@/assets/images/enlarge.png"
+          :src="!isFullScreen ? require(`@/assets/images/enlarge.png`) : require(`@/assets/images/shrink.png`)"
           alt="全屏"
           draggable="false"
         >
@@ -104,11 +104,13 @@ export default {
   computed: {
     ...globalMapState([
       'isMuted',
+      'isFullScreen',
     ])
   },
   methods: {
     ...globalMapMutations([
       'toggleMute',
+      'toggleFullScreen',
     ]),
     onClickLike() {
       const res = globalApi.like()
@@ -124,8 +126,6 @@ export default {
     onClickShare() {
       this.isShowShareModal = true
     },
-    onClickFullScreen() {
-    }
   }
 }
 </script>

src/router/index.js

@@ -35,7 +35,15 @@ const routes = [
     meta: {
       isShowBottomBar: true,
       canFullScreen: true,
-    }
+    },
+    beforeEnter (to, from, next) {
+      const audioNode = document.getElementById('global-audio')
+      if (audioNode.src !== require(`@/assets/audios/${globalConfig.audioName.relicsAppr}.mp3`)) {
+        audioNode.src = require(`@/assets/audios/${globalConfig.audioName.relicsAppr}.mp3`)
+        audioNode.play()
+      }
+      next()
+    },
   },
   {
     path: '/relics-appr',

src/store/index.js

@@ -6,12 +6,37 @@ Vue.use(Vuex)
 export default new Vuex.Store({
   state: {
     isMuted: false,
+    isFullScreen: false,
   },
   getters: {
   },
   mutations: {
     toggleMute(state) {
       state.isMuted = !state.isMuted
+    },
+    toggleFullScreen(state) {
+      state.isFullScreen = !state.isFullScreen
+      if (state.isFullScreen) {
+        if (document.documentElement.requestFullscreen) {
+          document.documentElement.requestFullscreen()
+        } else if (document.documentElement.webkitRequestFullScreen) {
+          document.documentElement.webkitRequestFullScreen()
+        } else if (document.documentElement.mozRequestFullScreen) {
+          document.documentElement.mozRequestFullScreen()
+        } else if (document.documentElement.msRequestFullscreen) {
+          document.documentElement.msRequestFullscreen()
+        }
+      } else {
+        if (document.exitFullscreen) {
+          document.exitFullscreen()
+        } else if (document.webkitCancelFullScreen) {
+          document.webkitCancelFullScreen()
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen()
+        } else if (document.msExitFullscreen) {
+          document.msExitFullscreen()
+        }
+      }
     }
   },
   actions: {

src/views/SwkkView.vue

@@ -319,6 +319,7 @@ export default {
         height: 5rem;
       }
       > div {
+        margin-top: 0.17rem;
         color: #fff;
         font-size: 1.17rem;
       }