app进入后台 音频停止播放

src/doctor/Doctor.vue

@@ -48,6 +48,8 @@ export default {
     },
     created() {
         this.init()
+        // 监听页面是否隐藏
+        document.addEventListener('visibilitychange', this.visibilitychange)
     },
     methods: {
         async init() {
@@ -55,7 +57,7 @@ export default {
             if (!token) {
                 token = sessionStorage.getItem('token')
                 if (process.env.NODE_ENV !== 'production') {
-                    token = '0e47db8c-e9a7-4de9-9d8f-32b3ee256bad'
+                    token = '80fa0d29-73b2-4593-87b8-fc46b53bf49e'
                 }
             }
             if (token) {
@@ -64,13 +66,21 @@ export default {
                 this.store.$patch({ dict: res.data || {} })
                 const user = await getAuthInfo()
                 this.store.$patch({authInfo: user.data || {}})
-
                 this.visible = true
             } else {
                 backHome()
             }
-
+        },
+        visibilitychange() {
+            if (document.hidden) {
+                this.store.onDocumentHidden(true)
+            } else {
+                this.store.onDocumentHidden(false)
+            }
         }
+    },
+    beforeUnmount() {
+        document.removeEventListener('visibilitychange', this.visibilitychange)
     }
 }
 </script>

src/doctor/components/mediaPlay/Mp3.vue

@@ -25,6 +25,7 @@
 <script>
 import { musicPlayer } from './mp3.js'
 import { showToast } from 'vant'
+import { useStore } from '@/doctor/store/index.js'
 
 export default {
     props: {
@@ -35,6 +36,7 @@ export default {
     emits: ['play', 'onRemove'],
     data() {
         return {
+            store: useStore(),
             player: {},
             // 正在播放的items
             activeAudio: {},
@@ -90,6 +92,7 @@ export default {
             if (!value) {
                 return '00:00'
             }
+            // value = value + ''
             let date = Math.ceil(value)
             let minutes = Math.floor(date / 60)
             let seconds = date % 60
@@ -109,6 +112,13 @@ export default {
             if (val !== this.file.annexUrl) {
                 this.stop()
             }
+        },
+        'store.documentHidden': {
+            handler(val) {
+                if (val && this.activeMediaUrl == this.file.annexUrl) {
+                    this.stop()
+                }
+            }
         }
     }
 }

src/doctor/components/mediaPlay/Mp4.vue

@@ -34,6 +34,8 @@
 </template>
 
 <script>
+import { useStore } from '@/doctor/store/index.js'
+
 export default {
     props: {
         files: { default: () => [] },
@@ -44,7 +46,8 @@ export default {
     data() {
         return {
             visible: false,
-            activeVideo: {}
+            activeVideo: {},
+            store: useStore()
         }
     },
     methods: {
@@ -63,6 +66,14 @@ export default {
                 const dom = this.$refs.video
                 dom && dom.pause()
             }
+        },
+        'store.documentHidden': {
+            handler(val) {
+                if (val && this.activeMediaUrl == this.activeVideo.annexUrl) {
+                    const dom = this.$refs.video
+                    dom && dom.pause()
+                }
+            }
         }
     }
 }

src/doctor/followUp/generalFU/detail/Detail.vue

@@ -363,7 +363,6 @@ export default {
     created() {
         document.title = '通用随访详情'
         this.load()
-        document.addEventListener('visibilitychange', this.visibilitychange)
     },
     methods: {
         async load() {
@@ -429,18 +428,7 @@ export default {
         },
         onBack() {
             this.$router.back()
-        },
-        visibilitychange() {
-            if (document.hidden) {
-                this.hideActiveMediaUrl = this.activeMediaUrl
-                this.activeMediaUrl = ''
-            } else {
-                this.activeMediaUrl = this.hideActiveMediaUrl
-            }
         }
-    },
-    beforeUnmount() {
-        document.removeEventListener('visibilitychange', this.visibilitychange)
     }
 }
 </script>

src/doctor/store/index.js

@@ -8,7 +8,9 @@ export const useStore = defineStore('chronic', {
             //登录医生相关基本信息
             authInfo: {},
             // 刷新标记
-            refreshMark: 1
+            refreshMark: 1,
+            // 页面是否处于隐藏状态
+            documentHidden: false
         }
     },
     getters: {},
@@ -33,5 +35,9 @@ export const useStore = defineStore('chronic', {
         onRefreshMark() {
             this.refreshMark++
         }
+        ,
+        onDocumentHidden(value) {
+            this.documentHidden = value
+        }
     }
 })