新增后台音频播放功能组件

hookehuyr
Commit a40a6b582a2809409061b1dd23e22ea6f1d951b5 a40a6b58 1 parent c2c63ae2
Showing 5 changed files with 121 additions and 6 deletions
components.d.ts
src/components/InfoWindow.vue
src/components/audioBackground.vue
src/store/index.js
src/views/index.vue
--- a/components.d.ts
View file @a40a6b5
+++ b/components.d.ts
View file @a40a6b5
@@ -9,13 +9,18 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    AudioBackground: typeof import('./src/components/audioBackground.vue')['default']
     InfoWindow: typeof import('./src/components/InfoWindow.vue')['default']
     InfoWindowLite: typeof import('./src/components/InfoWindowLite.vue')['default']
     InfoWindowWarn: typeof import('./src/components/InfoWindowWarn.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    VanCol: typeof import('vant/es')['Col']
     VanDialog: typeof import('vant/es')['Dialog']
     VanIcon: typeof import('vant/es')['Icon']
     VanPopup: typeof import('vant/es')['Popup']
+    VanRow: typeof import('vant/es')['Row']
+    VanTab: typeof import('vant/es')['Tab']
+    VanTabs: typeof import('vant/es')['Tabs']
   }
 }
--- a/src/components/InfoWindow.vue
View file @a40a6b5
+++ b/src/components/InfoWindow.vue
View file @a40a6b5
@@ -64,6 +64,8 @@
 <script>
 import $ from 'jquery'
+import { mapState, mapActions } from 'pinia'
+import { mainStore } from '@/store'
 export default {
   props: {
@@ -82,12 +84,17 @@ export default {
   },
   mounted() {
   },
+  computed: {
+    ...mapState(mainStore, ['audio_entity', 'audio_src', 'audio_status'])
+  },
   watch: {
     rect(val) {
       this.widow_info = val;
     },
     infoWindow(val) {
       if (val) {
+        // 存放到pinia里面控制
+        this.changeAudio(this.audio);
         // 加载录音
         this.audio.src = this.info?.details[this.isActive]['audio'];
         let play_status = this.audio.play() // 播放
@@ -102,6 +109,11 @@ export default {
           })
         }
       }
+    },
+    audio_status (v) {
+      if (v === 'pause') {
+        this.voice_pause()
+      }
     }
   },
   data() {
@@ -120,6 +132,7 @@ export default {
     }
   },
   methods: {
+    ...mapActions(mainStore, ['changeAudio', 'changeAudioSrc', 'changeAudioStatus']),
     getAudioTime(audio) {
       let time = Math.floor(audio);
       var minute = time / 60;
@@ -149,8 +162,9 @@ export default {
       // 高德地图信息窗关闭的api
       this.infoWindow.close()
       // 处理音频
-      this.voice_pause();
+      // TAG：临时屏蔽关闭窗口暂停音频播放测试
-      this.audio.currentTime = 0
+      // this.voice_pause();
+      // this.audio.currentTime = 0
       // 默认选中项
       this.isActive = 0;
       // 滚动状态
@@ -164,9 +178,12 @@ export default {
     },
     play() {
       this.voice_play(this.info.details[this.isActive]['audio'], 0)
+      this.changeAudioSrc(this.audio.src);
+      this.changeAudioStatus('play');
     },
     pause() {
-      this.voice_pause()
+      this.voice_pause();
+      this.changeAudioStatus('pause');
     },
     // 声音播放
     voice_play(src, index) {
--- a/src/components/audioBackground.vue 0 → 100644
View file @a40a6b5
+++ b/src/components/audioBackground.vue 0 → 100644
View file @a40a6b5
+<!--
+ * @Date: 2023-06-12 11:23:10
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2023-06-12 14:51:13
+ * @FilePath: /map-demo/src/components/audioBackground.vue
+ * @Description: 文件描述
+-->
+<template>
+  <div v-if="audio_src" class="audio-background-page">
+    <div @click="handleAudio" :class="['icon', audio_status === 'pause' ? 'play' : 'pause']"></div>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'pinia'
+import { mainStore } from '@/store'
+import $ from 'jquery';
+
+export default {
+  data () {
+    return {
+    }
+  },
+  mounted () {
+
+  },
+  computed: {
+    ...mapState(mainStore, ['audio_entity', 'audio_src', 'audio_status'])
+  },
+  methods: {
+    ...mapActions(mainStore, ['changeAudio', 'changeAudioSrc', 'changeAudioStatus']),
+    handleAudio () {
+      if (this.audio_status === 'play') {
+        this.audio_entity.pause();
+        this.changeAudioStatus('pause');
+      } else {
+        this.audio_entity.play();
+        this.changeAudioStatus('play');
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.audio-background-page {
+  position: fixed;
+  right: 1.25rem;
+  bottom: 7rem;
+  .icon {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    background-size: contain;
+  }
+
+  .play {
+    background-image: url('https://cdn.ipadbiz.cn/xys/map/%E6%92%AD%E6%94%BE%E6%9A%82%E5%81%9C@2x.png');
+  }
+  .pause {
+    background-image: url('https://cdn.ipadbiz.cn/xys/map/%E6%92%AD%E6%94%BE@2x.png');
+    animation: rotate 4s linear infinite;
+  }
+
+  @keyframes rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  .paused {
+    animation-play-state: paused;
+  }
+}
+</style>
--- a/src/store/index.js
View file @a40a6b5
+++ b/src/store/index.js
View file @a40a6b5
 /*
  * @Date: 2022-04-18 15:59:42
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-06-13 11:30:40
+ * @LastEditTime: 2023-06-12 14:50:57
- * @FilePath: /tswj/src/store/index.js
+ * @FilePath: /map-demo/src/store/index.js
  * @Description: 文件描述
  */
 import { defineStore } from 'pinia';
@@ -23,6 +23,9 @@ export const mainStore = defineStore('main', {
       scrollTopLike: 0,
       scrollTopPerson: 0,
       keepPages: ['default'], // 很坑爹，空值全部都缓存
+      audio_entity: '',
+      audio_src: '',
+      audio_status: 'pause',
     };
   },
   getters: {
@@ -67,6 +70,15 @@ export const mainStore = defineStore('main', {
       const $router = useRouter();
       const page = $router.currentRoute.value.meta.name;
       _.remove(this.keepPages, item => item === page)
+    },
+    changeAudio (v) {
+      this.audio_entity = v;
+    },
+    changeAudioSrc (v) {
+      this.audio_src = v
+    },
+    changeAudioStatus (v) {
+      this.audio_status = v;
     }
   },
 });
--- a/src/views/index.vue
View file @a40a6b5
+++ b/src/views/index.vue
View file @a40a6b5
 <!--
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-06-12 10:38:39
+ * @LastEditTime: 2023-06-12 14:04:04
  * @FilePath: /map-demo/src/views/index.vue
  * @Description: 地图主体页面
 -->
@@ -80,6 +80,8 @@
       :rect="rect"></InfoWindowLite>
     <InfoWindowWarn v-show="showInfoWindowWarn" ref="infoWindowWarn" :info-window="infoWindowWarn" :info="itemInfo"
       :rect="rect"></InfoWindowWarn>
+
+    <audioBackground></audioBackground>
   </div>
 </template>
@@ -92,6 +94,7 @@ import $ from 'jquery';
 import InfoWindow from '@/components/InfoWindow'
 import InfoWindowLite from '@/components/InfoWindowLite'
 import InfoWindowWarn from '@/components/InfoWindowWarn'
+import audioBackground from '@/components/audioBackground'
 import { useRect } from '@vant/use';
 const GPS = {