Showing
3 changed files
with
32 additions
and
19 deletions
| ... | @@ -39,7 +39,7 @@ import { storeToRefs } from 'pinia' | ... | @@ -39,7 +39,7 @@ import { storeToRefs } from 'pinia' |
| 39 | import { mainStore } from '@/store'; | 39 | import { mainStore } from '@/store'; |
| 40 | 40 | ||
| 41 | const store = mainStore(); | 41 | const store = mainStore(); |
| 42 | -const { audio_status, audio_entity } = storeToRefs(store); | 42 | +const { audio_status, audio_entity, audio_list_status, audio_list_entity } = storeToRefs(store); |
| 43 | 43 | ||
| 44 | const props = defineProps({ | 44 | const props = defineProps({ |
| 45 | height: Number, | 45 | height: Number, |
| ... | @@ -69,13 +69,14 @@ watch( | ... | @@ -69,13 +69,14 @@ watch( |
| 69 | info_height.value = v; | 69 | info_height.value = v; |
| 70 | } | 70 | } |
| 71 | ) | 71 | ) |
| 72 | -// watch( | 72 | +watch( |
| 73 | -// () => props.status, | 73 | + () => props.status, |
| 74 | -// (v) => { | 74 | + (v) => { |
| 75 | -// if (v) { // 监听详情页播放状态,关闭浮层音频播放 | 75 | + if (v) { // 监听详情页播放状态,关闭浮层音频播放 |
| 76 | -// } | 76 | + console.warn(v); |
| 77 | -// } | 77 | + } |
| 78 | -// ) | 78 | + } |
| 79 | +) | ||
| 79 | 80 | ||
| 80 | const onClose = () => { // 关闭列表回调 | 81 | const onClose = () => { // 关闭列表回调 |
| 81 | audio.value.pause(); // 暂停音频播放 | 82 | audio.value.pause(); // 暂停音频播放 |
| ... | @@ -211,7 +212,7 @@ const handleAudioPlay = (item, index) => { | ... | @@ -211,7 +212,7 @@ const handleAudioPlay = (item, index) => { |
| 211 | if (audio_index.value !== index) { | 212 | if (audio_index.value !== index) { |
| 212 | audio.value.src = item.src; | 213 | audio.value.src = item.src; |
| 213 | } | 214 | } |
| 214 | - // 后台有播放器运行时,先暂停 | 215 | + // 后台有播放器运行时,先暂停详情页播放器 |
| 215 | if (audio_status.value === 'play'){ | 216 | if (audio_status.value === 'play'){ |
| 216 | audio_entity.value.pause(); | 217 | audio_entity.value.pause(); |
| 217 | } | 218 | } |
| ... | @@ -222,9 +223,9 @@ const handleAudioPlay = (item, index) => { | ... | @@ -222,9 +223,9 @@ const handleAudioPlay = (item, index) => { |
| 222 | play_status.then(() => { | 223 | play_status.then(() => { |
| 223 | item.play = true; | 224 | item.play = true; |
| 224 | // 存放到pinia里面控制 | 225 | // 存放到pinia里面控制 |
| 225 | - store.changeAudio(audio.value); | 226 | + store.changeAudioList(audio.value); |
| 226 | - store.changeAudioSrc(audio.value.src); | 227 | + store.changeAudioListSrc(audio.value.src); |
| 227 | - store.changeAudioStatus('play'); | 228 | + store.changeAudioListStatus('play'); |
| 228 | // | 229 | // |
| 229 | startProgress(duration.value, index); // 开始更新进度 | 230 | startProgress(duration.value, index); // 开始更新进度 |
| 230 | if (audio_index.value !== index) { // 点击非同一音频 | 231 | if (audio_index.value !== index) { // 点击非同一音频 |
| ... | @@ -242,13 +243,13 @@ const handleAudioPlay = (item, index) => { | ... | @@ -242,13 +243,13 @@ const handleAudioPlay = (item, index) => { |
| 242 | const voicePause = () => { | 243 | const voicePause = () => { |
| 243 | audio.value.pause(); | 244 | audio.value.pause(); |
| 244 | pauseProgress(); // 暂停进度更新 | 245 | pauseProgress(); // 暂停进度更新 |
| 245 | - store.changeAudioStatus('pause'); | 246 | + store.changeAudioListStatus('pause'); |
| 246 | } | 247 | } |
| 247 | 248 | ||
| 248 | watch( | 249 | watch( |
| 249 | () => audio_status.value, | 250 | () => audio_status.value, |
| 250 | (v) => { | 251 | (v) => { |
| 251 | - if (v === 'pause') { | 252 | + if (v === 'play') { |
| 252 | voicePause(); | 253 | voicePause(); |
| 253 | audio_list.value.forEach(item => item.play = false); | 254 | audio_list.value.forEach(item => item.play = false); |
| 254 | } | 255 | } | ... | ... |
| 1 | /* | 1 | /* |
| 2 | * @Date: 2022-04-18 15:59:42 | 2 | * @Date: 2022-04-18 15:59:42 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2023-06-12 14:50:57 | 4 | + * @LastEditTime: 2024-10-10 21:27:15 |
| 5 | * @FilePath: /map-demo/src/store/index.js | 5 | * @FilePath: /map-demo/src/store/index.js |
| 6 | * @Description: 文件描述 | 6 | * @Description: 文件描述 |
| 7 | */ | 7 | */ |
| ... | @@ -26,6 +26,9 @@ export const mainStore = defineStore('main', { | ... | @@ -26,6 +26,9 @@ export const mainStore = defineStore('main', { |
| 26 | audio_entity: '', | 26 | audio_entity: '', |
| 27 | audio_src: '', | 27 | audio_src: '', |
| 28 | audio_status: 'pause', | 28 | audio_status: 'pause', |
| 29 | + audio_list_entity: '', | ||
| 30 | + audio_list_src: '', | ||
| 31 | + audio_list_status: 'pause', | ||
| 29 | }; | 32 | }; |
| 30 | }, | 33 | }, |
| 31 | getters: { | 34 | getters: { |
| ... | @@ -79,6 +82,15 @@ export const mainStore = defineStore('main', { | ... | @@ -79,6 +82,15 @@ export const mainStore = defineStore('main', { |
| 79 | }, | 82 | }, |
| 80 | changeAudioStatus (v) { | 83 | changeAudioStatus (v) { |
| 81 | this.audio_status = v; | 84 | this.audio_status = v; |
| 85 | + }, | ||
| 86 | + changeAudioList (v) { | ||
| 87 | + this.audio_list_entity = v; | ||
| 88 | + }, | ||
| 89 | + changeAudioListSrc (v) { | ||
| 90 | + this.audio_list_src = v | ||
| 91 | + }, | ||
| 92 | + changeAudioListStatus (v) { | ||
| 93 | + this.audio_list_status = v; | ||
| 82 | } | 94 | } |
| 83 | }, | 95 | }, |
| 84 | }); | 96 | }); | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2024-09-15 22:08:49 | 2 | * @Date: 2024-09-15 22:08:49 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2024-10-09 13:43:35 | 4 | + * @LastEditTime: 2024-10-10 21:29:30 |
| 5 | * @FilePath: /map-demo/src/views/bieyuan/info.vue | 5 | * @FilePath: /map-demo/src/views/bieyuan/info.vue |
| 6 | * @Description: 文件描述 | 6 | * @Description: 文件描述 |
| 7 | --> | 7 | --> |
| ... | @@ -97,7 +97,7 @@ import $ from 'jquery'; | ... | @@ -97,7 +97,7 @@ import $ from 'jquery'; |
| 97 | import { mapAPI } from '@/api/map.js' | 97 | import { mapAPI } from '@/api/map.js' |
| 98 | 98 | ||
| 99 | const store = mainStore(); | 99 | const store = mainStore(); |
| 100 | -const { audio_status, audio_entity } = storeToRefs(store); | 100 | +const { audio_status, audio_entity, audio_list_status, audio_list_entity } = storeToRefs(store); |
| 101 | 101 | ||
| 102 | const $route = useRoute(); | 102 | const $route = useRoute(); |
| 103 | const $router = useRouter(); | 103 | const $router = useRouter(); |
| ... | @@ -153,8 +153,8 @@ const playAudio = (item, index) => { | ... | @@ -153,8 +153,8 @@ const playAudio = (item, index) => { |
| 153 | page_details.value.experience_audio.forEach(item => item.play = false); | 153 | page_details.value.experience_audio.forEach(item => item.play = false); |
| 154 | audio.value.src = item.src; | 154 | audio.value.src = item.src; |
| 155 | // 后台有播放器运行时,先暂停 | 155 | // 后台有播放器运行时,先暂停 |
| 156 | - if (audio_status.value === 'play'){ | 156 | + if (audio_list_status.value === 'play'){ |
| 157 | - audio_entity.value.pause(); | 157 | + audio_list_entity.value.pause(); |
| 158 | } | 158 | } |
| 159 | play_audio_index.value = index; | 159 | play_audio_index.value = index; |
| 160 | let play_status = audio.value.play() // 播放 | 160 | let play_status = audio.value.play() // 播放 | ... | ... |
-
Please register or login to post a comment