✨ feat: 在浮动窗点击音频播放，跳转到详情页并且播放

客户需求

 <!--
 <!--
  * @Date: 2024-09-15 22:08:49
  * @Date: 2024-09-15 22:08:49
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-27 12:16:50
+ * @LastEditTime: 2024-10-30 16:46:08
  * @FilePath: /map-demo/src/views/bieyuan/info.vue
  * @FilePath: /map-demo/src/views/bieyuan/info.vue
  * @Description: 文件描述
  * @Description: 文件描述
 -->
 -->
@@ -26,7 +26,7 @@
         <div style="display: flex; justify-content: space-between;">
         <div style="display: flex; justify-content: space-between;">
           <p class="info-title">{{ page_details.name }}</p>
           <p class="info-title">{{ page_details.name }}</p>
           <div style="display: flex;">
           <div style="display: flex;">
-            <div v-if="show_audio" @click="onClickAudioList" style="margin-right: 0.75rem;">
+            <div @click="onClickAudioList" style="margin-right: 0.75rem;">
               <van-icon v-if="!audio_list_height" name="https://cdn.ipadbiz.cn/bieyuan/map/icon/%E8%AF%AD%E9%9F%B31@3x.png" size="1.65rem" />
               <van-icon v-if="!audio_list_height" name="https://cdn.ipadbiz.cn/bieyuan/map/icon/%E8%AF%AD%E9%9F%B31@3x.png" size="1.65rem" />
               <van-icon v-else name="https://cdn.ipadbiz.cn/bieyuan/map/icon/%E8%AF%AD%E9%9F%B32@3x.png" size="1.65rem" />
               <van-icon v-else name="https://cdn.ipadbiz.cn/bieyuan/map/icon/%E8%AF%AD%E9%9F%B32@3x.png" size="1.65rem" />
             </div>
             </div>
@@ -233,6 +233,10 @@ onMounted(async () => {
       scrollTop.value = $(evt.currentTarget).scrollTop(); // 获取滚动的垂直距离
       scrollTop.value = $(evt.currentTarget).scrollTop(); // 获取滚动的垂直距离
     })
     })
   })
   })
+  // 如果是从浮动窗口点击进来音频播放，自动打开
+  if ($route.query.source === 'click_audio') {
+    audio_list_height.value = (0.2 * window.innerHeight);
+  }
 });
 });
 
 
 onUnmounted(() => { // 离开页面时关闭音频播放
 onUnmounted(() => { // 离开页面时关闭音频播放
@@ -381,24 +385,36 @@ const show_shrink = computed(() => {
 const audio_list_height = ref(0);
 const audio_list_height = ref(0);
 
 
 const onClickAudioList = () => {
 const onClickAudioList = () => {
+  if ($('.info-page').height() < $(window).height()) { // 在浮动模式下点击音频列表
+    // 打开页面
+    $router.push({
+      path: '/bieyuan/info',
+      query: {
+        id: $route.query.id,
+        marker_id: props.info.id,
+        source: 'click_audio'
+      }
+    });
+  } else { // 详情页内点击
     audio_list_height.value = (0.2 * window.innerHeight);
     audio_list_height.value = (0.2 * window.innerHeight);
+  }
 }
 }
 
 
 const onCloseAudioList = () => {
 const onCloseAudioList = () => {
   audio_list_height.value = 0;
   audio_list_height.value = 0;
 }
 }
 
 
-const show_audio = ref(true);
+// const show_audio = ref(true);
 
 
 const onStatusAudioList = (status) => { // 音频列表组件，状态改变
 const onStatusAudioList = (status) => { // 音频列表组件，状态改变
   page_details.value.experience_audio?.forEach(item => item.play = false);
   page_details.value.experience_audio?.forEach(item => item.play = false);
   audio.value.pause();
   audio.value.pause();
   play_audio_index.value = null;
   play_audio_index.value = null;
   store.changeAudioStatus('pause');
   store.changeAudioStatus('pause');
-  // 反馈播放列表数量为空时，隐藏图标
-  if (status === 'none') {
-    show_audio.value = false;
-  }
+  // // 反馈播放列表数量为空时，隐藏图标
+  // if (status === 'none') {
+  //   show_audio.value = false;
+  // }
 }
 }
 </script>
 </script>