Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
b75b8777 1 parent 1e278c10

测试音频功能

Inline Side-by-side
Showing 6 changed files with 376 additions and 14 deletions
1 <!-- 1 <!--
2 * @Date: 2023-06-12 11:23:10 2 * @Date: 2023-06-12 11:23:10
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-06-12 14:51:13 4 + * @LastEditTime: 2024-09-20 17:40:03
5 * @FilePath: /map-demo/src/components/audioBackground.vue 5 * @FilePath: /map-demo/src/components/audioBackground.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
......
1 /* 1 /*
2 * @Date: 2023-05-29 11:10:19 2 * @Date: 2023-05-29 11:10:19
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-09-18 09:38:42 4 + * @LastEditTime: 2024-09-20 17:29:12
5 * @FilePath: /map-demo/src/route.js 5 * @FilePath: /map-demo/src/route.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
...@@ -64,7 +64,7 @@ export default [ ...@@ -64,7 +64,7 @@ export default [
64 }, 64 },
65 { 65 {
66 path: '/bieyuan/info', 66 path: '/bieyuan/info',
67 - component: () => import('@/views/bieyuan/info.vue'), 67 + component: () => import('@/views/bieyuan/info_w.vue'),
68 meta: { 68 meta: {
69 title: '详情页', 69 title: '详情页',
70 }, 70 },
......
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-09-20 15:56:20 4 + * @LastEditTime: 2024-09-20 17:35:46
5 * @FilePath: /map-demo/src/views/bieyuan/info.vue 5 * @FilePath: /map-demo/src/views/bieyuan/info.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -73,14 +73,14 @@ ...@@ -73,14 +73,14 @@
73 </div> 73 </div>
74 <div class="van-hairline--bottom" style="margin: 0 1rem;"></div> 74 <div class="van-hairline--bottom" style="margin: 0 1rem;"></div>
75 </div> 75 </div>
76 - <div class="audio-wrapper"> 76 + <!--<div class="audio-wrapper">
77 <div :class="['audio-item', play_audio_index === index ? 'click' : '']" v-for="(item, index) in audioList" :key="index"> 77 <div :class="['audio-item', play_audio_index === index ? 'click' : '']" v-for="(item, index) in audioList" :key="index">
78 <div>{{ item.text }}</div> 78 <div>{{ item.text }}</div>
79 - <!-- <div :class="['audio-icon', play_audio_index === index ? 'click' : '']"></div> --> 79 + <!~~ <div :class="['audio-icon', play_audio_index === index ? 'click' : '']"></div> ~~>
80 <van-icon @click="stopAudio(item, index)" v-if="item.play" size="2rem" name="stop-circle-o" color="#DD7850" /> 80 <van-icon @click="stopAudio(item, index)" v-if="item.play" size="2rem" name="stop-circle-o" color="#DD7850" />
81 <van-icon v-else @click="playAudio(item, index)" size="2rem" name="https://cdn.ipadbiz.cn/bieyuan/map/icon/audio_icon.png" /> 81 <van-icon v-else @click="playAudio(item, index)" size="2rem" name="https://cdn.ipadbiz.cn/bieyuan/map/icon/audio_icon.png" />
82 </div> 82 </div>
83 - </div> 83 + </div>-->
84 <div style="padding: 0 1rem;"> 84 <div style="padding: 0 1rem;">
85 <img src="https://cdn.ipadbiz.cn/bieyuan/map/xcx.png" style="width: 100%;"> 85 <img src="https://cdn.ipadbiz.cn/bieyuan/map/xcx.png" style="width: 100%;">
86 </div> 86 </div>
...@@ -100,9 +100,15 @@ ...@@ -100,9 +100,15 @@
100 </template> 100 </template>
101 101
102 <script setup> 102 <script setup>
103 -import { ref } from 'vue' 103 +import { ref, watch } from 'vue'
104 import { useRoute, useRouter } from 'vue-router' 104 import { useRoute, useRouter } from 'vue-router'
105 105
106 +import { storeToRefs } from 'pinia'
107 +import { mainStore } from '@/store';
108 +
109 +const store = mainStore();
110 +const { audio_status } = storeToRefs(store);
111 +
106 const $route = useRoute(); 112 const $route = useRoute();
107 const $router = useRouter(); 113 const $router = useRouter();
108 114
...@@ -121,15 +127,15 @@ const play_audio_index = ref(null); ...@@ -121,15 +127,15 @@ const play_audio_index = ref(null);
121 127
122 const audioList = ref([{ 128 const audioList = ref([{
123 text: '5分钟观呼吸', 129 text: '5分钟观呼吸',
124 - src: 'https://cdn.ipadbiz.cn/bieyuan/map/1130958712.mp3', 130 + src: 'https://cdn.ipadbiz.cn/bieyuan/map/audio/%E6%AD%A3%E5%BF%B5%E5%91%BC%E5%90%B8%EF%BC%8810%E5%88%86%E9%92%9F%EF%BC%89.mp3',
125 play: false, 131 play: false,
126 }, { 132 }, {
127 text: '10分钟正念静坐', 133 text: '10分钟正念静坐',
128 - src: 'https://cdn.ipadbiz.cn/bieyuan/map/1130958712.mp3', 134 + 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',
129 play: false, 135 play: false,
130 }, { 136 }, {
131 text: '15分钟正念静坐', 137 text: '15分钟正念静坐',
132 - src: 'https://cdn.ipadbiz.cn/bieyuan/map/1130958712.mp3', 138 + 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',
133 play: false, 139 play: false,
134 }]) 140 }])
135 141
...@@ -143,6 +149,9 @@ const playAudio = (item, index) => { ...@@ -143,6 +149,9 @@ const playAudio = (item, index) => {
143 play_status.then(() => { 149 play_status.then(() => {
144 console.warn('success'); 150 console.warn('success');
145 item.play = true; 151 item.play = true;
152 + // 存放到pinia里面控制
153 + store.changeAudioSrc(audio.value.src);
154 + store.changeAudioStatus('play');
146 }).catch((e) => { 155 }).catch((e) => {
147 // 失败 156 // 失败
148 console.log('Operation is too fast, audio play fails') 157 console.log('Operation is too fast, audio play fails')
...@@ -157,6 +166,19 @@ const stopAudio = (item, index) => { ...@@ -157,6 +166,19 @@ const stopAudio = (item, index) => {
157 166
158 const audio = ref(new Audio()); 167 const audio = ref(new Audio());
159 168
169 +onMounted(() => {
170 + // 存放到pinia里面控制
171 + if (store.changeAudio(audio.value)){
172 + store.changeAudio(audio.value);
173 + store.changeAudioStatus('pause');
174 + }
175 +})
176 +
177 +// onUnmounted(() => {
178 +// audio.value.pause();
179 +// store.changeAudioStatus('pause');
180 +// })
181 +
160 const audio_play = (src, index) => { 182 const audio_play = (src, index) => {
161 audio.value.src = src; 183 audio.value.src = src;
162 } 184 }
...@@ -183,6 +205,22 @@ const goTo = () => { // 打开标记地图显示 ...@@ -183,6 +205,22 @@ const goTo = () => { // 打开标记地图显示
183 } 205 }
184 } 206 }
185 207
208 +const voicePause = () => {
209 + audio.value.pause();
210 + store.changeAudioStatus('pause');
211 +}
212 +
213 +watch(
214 + () => audio_status.value,
215 + (v) => {
216 + if (v === 'pause') {
217 + voicePause();
218 + audioList.value.forEach(item => item.play = false);
219 + }
220 + },
221 + { immediate: true }
222 +);
223 +
186 defineExpose({ 224 defineExpose({
187 outerStopAudio 225 outerStopAudio
188 }) 226 })
......
1 +<!--
2 + * @Date: 2024-09-15 22:08:49
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2024-09-20 17:44:30
5 + * @FilePath: /map-demo/src/views/bieyuan/info_w.vue
6 + * @Description: 文件描述
7 +-->
8 +<template>
9 + <div class="info-page">
10 + <div>
11 + <van-config-provider :theme-vars="themeVars">
12 + <van-swipe class="my-swipe" indicator-color="#DD7850" lazy-render :autoplay="5000">
13 + <van-swipe-item v-for="image in images" :key="image">
14 + <van-image fit="cover" width="100%" height="13rem" :src="image" />
15 + </van-swipe-item>
16 + </van-swipe>
17 + </van-config-provider>
18 + </div>
19 + <div class="info-content-wrapper">
20 + <div class="info-header">
21 + <div>
22 + <p class="info-title">选佛场</p>
23 + <p class="info-sub-title">南楼2层</p>
24 + </div>
25 + <div @click="goTo()" class="info-btn">前往</div>
26 + </div>
27 + <div class="van-hairline--bottom">
28 + <van-tabs v-model:active="active" color="#DD7850" title-active-color="#DD7850" sticky>
29 + <van-tab title="介 绍">
30 + <div class="info-content">
31 + <p style="line-height: 1.75; padding: 0 0.85rem; color: #47525F;">选佛场是一个宗教活动场所，集禅堂与讲堂功能于一体。其设计仿制古代石窟样式，把古代人修行的场所“石窟”搬进室内。禅堂内的释迦牟尼佛像，仿麦积山石窟第44号特窟“东方的微笑”的造型。禅堂设计自然古朴，匠心独运，星光、烛光、月光三光辉映，营造出“一个人不孤单，一千人不喧闹”的宁静祥和的氛围。禅堂可容纳千人，开展讲经、禅修、法会等多种活动，提供礼佛、供灯、静坐等体验。</p>
32 + <div class="van-hairline--bottom" style="margin: 1rem 0;"></div>
33 + <div style="padding: 1rem;">
34 + <div style="color: #DD7850;">•&nbsp;五方塔</div>
35 + <div style="color: #47525F; margin-top: 1rem; line-height: 1.75;">禅堂外的草坪，安立着大小不一五座佛塔。信众可绕塔或悬挂风铃祝愿祈福，在肃静庄严的氛围中得到佛力加持，自净其意，心想事成。</div>
36 + </div>
37 + </div>
38 + </van-tab>
39 + <van-tab title="故 事">
40 + <div style="padding: 0 1rem;">
41 + <div style="padding: 1rem;">
42 + <div style="color: #DD7850;">•&nbsp;选官何如选佛</div>
43 + </div>
44 + <div style="padding: 0 1rem;">
45 + <van-image width="100%" height="11rem" fit="cover" src="https://cdn.ipadbiz.cn/bieyuan/map/Mix_20230612_201951.png" />
46 + </div>
47 + <div style="padding: 1rem;">
48 + <p style="color: #47525F; line-height: 1.75;">过去把禅堂叫作选佛场，意思是选择作佛的场所。这个典故与丹霞禅师有关。 <br />他原本是一个秀才，赴京赶考的途中遇到一位禅师，这位禅师跟他讲，选官何如选佛？考官还不如成佛利益更大。世间功名如过眼云烟，即便追求得到也是暂时利益，执著于此就会烦恼重重，甚至不断造业。而学佛修行，考佛就是要成佛，成就生命永恒的福祉。这是永久的利益，尽未来际的利益。每个生命原本具备觉悟的潜质，具有无尽的功德宝藏，取之不尽用之不竭。成佛，可以断除一切迷惑烦恼，可以彻底地开发我们生命的潜质，全然觉醒，这个利益无量无边。丹霞禅师深具慧根，一经点拨，马上出家。</p>
49 + </div>
50 + <div class="van-hairline--bottom" style="margin: 0 1rem;"></div>
51 + </div>
52 + <div style="padding: 0 1rem;">
53 + <div style="padding: 1rem;">
54 + <div style="color: #DD7850;">•&nbsp;把洞窟搬进讲堂</div>
55 + </div>
56 + <div style="padding: 0 1rem;">
57 + <van-image width="100%" height="11rem" fit="cover" src="https://cdn.ipadbiz.cn/bieyuan/map/Mix_20240815_211927.png" />
58 + </div>
59 + <div style="padding: 1rem;">
60 + <p style="color: #47525F; line-height: 1.75;">洞窟，是传统的佛教建筑形式，最早在印度盛行，古代僧人喜欢在崇山峻岭的幽僻处开凿洞窟，遁世修行。选佛场集禅堂与讲堂的功能于一体，把洞窟搬进讲堂，既有回归佛教本怀的宁静温暖，又体现出融入泰宁岩穴文化的祥和之气。</p>
61 + </div>
62 + <div class="van-hairline--bottom" style="margin: 0 1rem;"></div>
63 + </div>
64 + </van-tab>
65 + <van-tab title="体 验">
66 + <div style="padding: 0 1rem;">
67 + <div style="padding: 1rem;">
68 + <div style="color: #DD7850;">•&nbsp;供灯</div>
69 + <div style="color: #47525F; margin-top: 1rem; line-height: 1.75;">禅堂内自助供灯。</div>
70 + </div>
71 + <div style="padding: 0 1rem;">
72 + <van-image width="100%" height="11rem" fit="cover" src="https://cdn.ipadbiz.cn/bieyuan/map/Mix_20240815_211927.png" />
73 + </div>
74 + <div class="van-hairline--bottom" style="margin: 0 1rem;"></div>
75 + </div>
76 + <div class="audio-wrapper">
77 + <div :class="['audio-item', play_audio_index === index ? 'click' : '']" v-for="(item, index) in audioList" :key="index">
78 + <div>{{ item.text }}</div>
79 + <!-- <div :class="['audio-icon', play_audio_index === index ? 'click' : '']"></div> -->
80 + <van-icon @click="stopAudio(item, index)" v-if="item.play" size="2rem" name="stop-circle-o" color="#DD7850" />
81 + <van-icon v-else @click="playAudio(item, index)" size="2rem" name="https://cdn.ipadbiz.cn/bieyuan/map/icon/audio_icon.png" />
82 + </div>
83 + </div>
84 + <div style="padding: 0 1rem;">
85 + <img src="https://cdn.ipadbiz.cn/bieyuan/map/xcx.png" style="width: 100%;">
86 + </div>
87 + </van-tab>
88 + </van-tabs>
89 + </div>
90 + </div>
91 + <div style="display: flex; justify-content: center; margin: 3rem;">
92 + <van-image
93 + width="3rem"
94 + height="3rem"
95 + fit="contain"
96 + src="https://cdn.ipadbiz.cn/bieyuan/map/icon/scan_logo.png"
97 + />
98 + </div>
99 + </div>
100 +</template>
101 +
102 +<script setup>
103 +import { ref, watch } from 'vue'
104 +import { useRoute, useRouter } from 'vue-router'
105 +
106 +import { storeToRefs } from 'pinia'
107 +import { mainStore } from '@/store';
108 +
109 +const store = mainStore();
110 +const { audio_status, audio_entity } = storeToRefs(store);
111 +
112 +const $route = useRoute();
113 +const $router = useRouter();
114 +
115 +const themeVars = ref({
116 + swipeIndicatorInactiveBackground: '#fff',
117 +});
118 +
119 +const images = ref([
120 + 'https://cdn.ipadbiz.cn/bieyuan/map/swiper_img.png',
121 + 'https://cdn.ipadbiz.cn/bieyuan/map/Mix_20230612_201951.png',
122 + 'https://cdn.ipadbiz.cn/bieyuan/map/Mix_20240815_211927.png',
123 +]);
124 +
125 +const active = ref(0);
126 +const play_audio_index = ref(null);
127 +
128 +const audioList = ref([{
129 + text: '5分钟观呼吸',
130 + src: 'https://cdn.ipadbiz.cn/bieyuan/map/audio/%E6%AD%A3%E5%BF%B5%E5%91%BC%E5%90%B8%EF%BC%8810%E5%88%86%E9%92%9F%EF%BC%89.mp3',
131 + play: false,
132 +}, {
133 + text: '10分钟正念静坐',
134 + 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',
135 + play: false,
136 +}, {
137 + text: '15分钟正念静坐',
138 + 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',
139 + play: false,
140 +}])
141 +
142 +const playAudio = (item, index) => {
143 + audioList.value.forEach(item => item.play = false);
144 + audio.value.src = item.src;
145 + play_audio_index.value = index;
146 + let play_status = audio.value.play() // 播放
147 + if (play_status) {
148 + console.warn('start');
149 + // if (audio_status.value === 'play') {
150 + // audio_entity.value.pause();
151 + // }
152 + play_status.then(() => {
153 + console.warn('success');
154 + item.play = true;
155 + // 存放到pinia里面控制
156 + // store.changeAudioSrc(audio.value.src);
157 + // store.changeAudioStatus('play');
158 + }).catch((e) => {
159 + // 失败
160 + console.log('Operation is too fast, audio play fails')
161 + })
162 + }
163 +}
164 +
165 +const stopAudio = (item, index) => {
166 + item.play = false;
167 + audio.value.pause();
168 +}
169 +
170 +const audio = ref(new Audio());
171 +
172 +onMounted(() => {
173 + // 存放到pinia里面控制
174 + store.changeAudio(audio.value);
175 + // store.changeAudioStatus('pause');
176 +})
177 +
178 +onUnmounted(() => {
179 + audio.value.pause();
180 + store.changeAudioStatus('pause');
181 +})
182 +
183 +const audio_play = (src, index) => {
184 + audio.value.src = src;
185 +}
186 +
187 +const outerStopAudio = () => {
188 + audio.value.pause();
189 +}
190 +
191 +const emit = defineEmits(["closeFloat", 'route']);
192 +const goTo = () => { // 打开标记地图显示
193 + if ($router.currentRoute.value.path === '/bieyuan/info') { // 详情页
194 + $router.push({
195 + path: '/bieyuan/map',
196 + query: {
197 + id: $route.query.id,
198 + marker_id: '12345'
199 + }
200 + })
201 + } else { // 地图页
202 + //
203 + emit("closeFloat", false);
204 + //
205 + emit("route", 'marker_id');
206 + }
207 +}
208 +
209 +const voicePause = () => {
210 + audio.value.pause();
211 + store.changeAudioStatus('pause');
212 +}
213 +
214 +watch(
215 + () => audio_status.value,
216 + (v) => {
217 + if (v === 'pause') {
218 + voicePause();
219 + audioList.value.forEach(item => item.play = false);
220 + }
221 + },
222 + { immediate: true }
223 +);
224 +
225 +defineExpose({
226 + outerStopAudio
227 +})
228 +</script>
229 +
230 +<style lang="less">
231 +.info-page {
232 + background-color: #EBEBEB;
233 + height: 100vh;
234 + overflow: scroll;
235 + position: relative;
236 + .info-content-wrapper {
237 + // position: absolute;
238 + // top: 14.9rem;
239 + margin: 1rem;
240 + margin-top: 0;
241 + // padding: 1rem;
242 + border-radius: 0.5rem;
243 + background-color: white;
244 + .info-header {
245 + padding: 1rem 2rem 0;
246 + display: flex;
247 + justify-content: space-between;
248 + // align-items: center;
249 + .info-title {
250 + font-size: 1.25rem;
251 + margin-bottom: 0.5rem;
252 + }
253 + .info-sub-title {
254 + font-size: 0.85rem;
255 + color: #A0A8B1;
256 + }
257 + .info-btn {
258 + width: 3rem;
259 + height: 1.5rem;
260 + border: 1px solid #DD7850;
261 + color: #DD7850;
262 + border-radius: 0.8rem;
263 + font-size: 0.85rem;
264 + text-align: center;
265 + line-height: 1.5rem;
266 + }
267 + }
268 + .info-content {
269 + padding: 1rem;
270 + }
271 + .audio-wrapper {
272 + padding: 1rem;
273 + .audio-item {
274 + color: #47525F;
275 + display: flex;
276 + justify-content: space-between;
277 + align-items: center;
278 + padding: 1rem;
279 + background-color: #FFF;
280 + border-radius: 0.25rem;
281 + margin: 1rem;
282 + box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
283 + &.click {
284 + border: 1px solid #DD7850;
285 + }
286 + .audio-icon {
287 + width: 2rem;
288 + height: 2rem;
289 + background-image: url('https://cdn.ipadbiz.cn/bieyuan/map/icon/audio_icon.png'); /* 使用上传的图标 */
290 + background-size: cover;
291 + &.click {
292 + animation: pulse 1.5s infinite;
293 + }
294 + }
295 +
296 + @keyframes pulse {
297 + 0% {
298 + transform: scale(1);
299 + }
300 + 50% {
301 + transform: scale(1.2);
302 + }
303 + 100% {
304 + transform: scale(1);
305 + }
306 + }
307 + }
308 + }
309 + }
310 +}
311 +</style>
1 <!-- 1 <!--
2 * @Date: 2023-05-19 14:54:27 2 * @Date: 2023-05-19 14:54:27
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-09-20 16:14:21 4 + * @LastEditTime: 2024-09-20 17:45:35
5 * @FilePath: /map-demo/src/views/bieyuan/map.vue 5 * @FilePath: /map-demo/src/views/bieyuan/map.vue
6 * @Description: 公众地图主体页面 6 * @Description: 公众地图主体页面
7 --> 7 -->
...@@ -56,6 +56,8 @@ ...@@ -56,6 +56,8 @@
56 <van-dialog v-model:show="dialog_show" title="温馨提示"> 56 <van-dialog v-model:show="dialog_show" title="温馨提示">
57 <div style="padding: 1rem; text-align: center;">{{ dialog_text }}</div> 57 <div style="padding: 1rem; text-align: center;">{{ dialog_text }}</div>
58 </van-dialog> 58 </van-dialog>
59 +
60 + <!-- <audioBackground></audioBackground> -->
59 </div> 61 </div>
60 </template> 62 </template>
61 63
...@@ -70,6 +72,9 @@ import { useRect } from '@vant/use'; ...@@ -70,6 +72,9 @@ import { useRect } from '@vant/use';
70 import { mapAPI } from '@/api/map.js' 72 import { mapAPI } from '@/api/map.js'
71 import wx from 'weixin-js-sdk' 73 import wx from 'weixin-js-sdk'
72 import pageInfo from '@/views/bieyuan/info.vue' 74 import pageInfo from '@/views/bieyuan/info.vue'
75 +import audioBackground from '@/components/audioBackground'
76 +import { mapState, mapActions } from 'pinia'
77 +import { mainStore } from '@/store'
73 78
74 const GPS = { 79 const GPS = {
75 PI: 3.14159265358979324, 80 PI: 3.14159265358979324,
...@@ -128,7 +133,7 @@ const GPS = { ...@@ -128,7 +133,7 @@ const GPS = {
128 }; 133 };
129 134
130 export default { 135 export default {
131 - components: { pageInfo }, 136 + components: { pageInfo, audioBackground },
132 data() { 137 data() {
133 return { 138 return {
134 map: '', 139 map: '',
...@@ -257,7 +262,11 @@ export default { ...@@ -257,7 +262,11 @@ export default {
257 // deep: true // 如果 query 是嵌套对象，可以设置 deep 监听深层变化 262 // deep: true // 如果 query 是嵌套对象，可以设置 deep 监听深层变化
258 // } 263 // }
259 }, 264 },
265 + computed: {
266 + ...mapState(mainStore, ['audio_entity', 'audio_src', 'audio_status'])
267 + },
260 methods: { 268 methods: {
269 + ...mapActions(mainStore, ['changeAudio', 'changeAudioSrc', 'changeAudioStatus']),
261 initMap() { 270 initMap() {
262 // 初始化地图 271 // 初始化地图
263 this.map = new AMap.Map('container', { 272 this.map = new AMap.Map('container', {
...@@ -609,6 +618,10 @@ export default { ...@@ -609,6 +618,10 @@ export default {
609 // // 浮动面板样式 618 // // 浮动面板样式
610 // $('.van-floating-panel__content').css('borderRadius', '0'); 619 // $('.van-floating-panel__content').css('borderRadius', '0');
611 // this.showClose = true; 620 // this.showClose = true;
621 + // 清空设置
622 + // this.changeAudio('');
623 + // this.changeAudioStatus('pause');
624 + //
612 this.$router.push({ 625 this.$router.push({
613 path: '/bieyuan/info', 626 path: '/bieyuan/info',
614 query: { 627 query: {
......
1 <!-- 1 <!--
2 * @Date: 2023-05-19 14:54:27 2 * @Date: 2023-05-19 14:54:27
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-09-12 16:28:53 4 + * @LastEditTime: 2024-09-20 16:30:49
5 * @FilePath: /map-demo/src/views/index.vue 5 * @FilePath: /map-demo/src/views/index.vue
6 * @Description: 公众地图主体页面 6 * @Description: 公众地图主体页面
7 --> 7 -->
......