Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
679e230a 1 parent 5f5f9e6d

音频播放时，点击内容项可以控制播放暂停

Inline Side-by-side
Showing 2 changed files with 18 additions and 3 deletions
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
11 <div class="van-hairline--top" style="padding: 1rem;"> 11 <div class="van-hairline--top" style="padding: 1rem;">
12 <div v-for="(item, index) in audio_list" :key="index" class="van-hairline--bottom audio-item"> 12 <div v-for="(item, index) in audio_list" :key="index" class="van-hairline--bottom audio-item">
13 <div :class="['point', audio_index === index ? 'checked' : '']"></div> 13 <div :class="['point', audio_index === index ? 'checked' : '']"></div>
14 - <div :class="['text', audio_index === index ? 'checked' : '', 'van-ellipsis']" @click="handleAudioPlay(item, index)"> 14 + <div :class="['text', audio_index === index ? 'checked' : '', 'van-ellipsis']" @click="toggleHandleAudio(item, index)">
15 {{ index + 1 }}. {{ item.title }}<span v-if="item.play" class="text-center">正在播放</span> 15 {{ index + 1 }}. {{ item.title }}<span v-if="item.play" class="text-center">正在播放</span>
16 16
17 </div> 17 </div>
...@@ -169,6 +169,14 @@ const pauseProgress = () => { ...@@ -169,6 +169,14 @@ const pauseProgress = () => {
169 clearInterval(intervalId); 169 clearInterval(intervalId);
170 } 170 }
171 171
172 +const toggleHandleAudio = (item, index) => { // 切换播放或者暂停操作
173 + if (item.play) {
174 + handleAudioPause(item, index);
175 + } else {
176 + handleAudioPlay(item, index);
177 + }
178 +}
179 +
172 /** 180 /**
173 * 暂停播放回调 181 * 暂停播放回调
174 * @param item 182 * @param item
......
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-23 09:18:49 4 + * @LastEditTime: 2024-10-27 12:16:50
5 * @FilePath: /map-demo/src/views/bieyuan/info.vue 5 * @FilePath: /map-demo/src/views/bieyuan/info.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
53 <div id="experience" v-html="page_details.experience" style="padding: 0 1rem;"></div> 53 <div id="experience" v-html="page_details.experience" style="padding: 0 1rem;"></div>
54 </div> 54 </div>
55 <div v-if="page_details.experience_audio.length" class="audio-wrapper"> 55 <div v-if="page_details.experience_audio.length" class="audio-wrapper">
56 - <div @click="playAudio(item, index)" :class="['audio-item', play_audio_index === index ? 'click' : '']" v-for="(item, index) in page_details.experience_audio" :key="index"> 56 + <div @click="toggleHandleAudio(item, index)" :class="['audio-item', play_audio_index === index ? 'click' : '']" v-for="(item, index) in page_details.experience_audio" :key="index">
57 <div>{{ item.description }}</div> 57 <div>{{ item.description }}</div>
58 <van-icon @click.stop="stopAudio(item, index)" v-if="item.play" size="2rem" name="stop-circle-o" color="#DD7850" /> 58 <van-icon @click.stop="stopAudio(item, index)" v-if="item.play" size="2rem" name="stop-circle-o" color="#DD7850" />
59 <van-icon v-else @click="playAudio(item, index)" size="2rem" name="https://cdn.ipadbiz.cn/bieyuan/map/icon/audio_icon.png" /> 59 <van-icon v-else @click="playAudio(item, index)" size="2rem" name="https://cdn.ipadbiz.cn/bieyuan/map/icon/audio_icon.png" />
...@@ -148,6 +148,13 @@ const play_audio_index = ref(null); ...@@ -148,6 +148,13 @@ const play_audio_index = ref(null);
148 // src: 'https://cdn.ipadbiz.cn/bieyuan/map/audio/%E5%8D%81%E5%88%86%E9%92%9F%E6%AD%A3%E5%BF%B5%E9%9D%99%E5%9D%9020210510.mp3', 148 // src: 'https://cdn.ipadbiz.cn/bieyuan/map/audio/%E5%8D%81%E5%88%86%E9%92%9F%E6%AD%A3%E5%BF%B5%E9%9D%99%E5%9D%9020210510.mp3',
149 // play: false, 149 // play: false,
150 // }]) 150 // }])
151 +const toggleHandleAudio = (item, index) => { // 切换播放或者暂停操作
152 + if (item.play) {
153 + stopAudio(item, index);
154 + } else {
155 + playAudio(item, index);
156 + }
157 +}
151 158
152 const playAudio = (item, index) => { 159 const playAudio = (item, index) => {
153 page_details.value.experience_audio.forEach(item => item.play = false); 160 page_details.value.experience_audio.forEach(item => item.play = false);
......