✨ feat: 播放列表关闭后操作优化，详情页tab切换滚动页面优化

@@ -18,8 +18,8 @@
             <div class="progress-ring">
             <div class="progress-ring">
               <div class="circle">
               <div class="circle">
                 <div class="pause-icon">
                 <div class="pause-icon">
-                  <van-icon @click="handleAudioPause(item, index)" v-if="item.play" name="https://cdn.ipadbiz.cn/bieyuan/map/icon/pauseButton@3x.png" size="2.05rem" />
-                  <van-icon @click="handleAudioPlay(item, index)" v-else name="https://cdn.ipadbiz.cn/bieyuan/map/icon/play@3x.png" size="2.05rem" />
+                  <van-icon @click="handleAudioPause(item, index)" v-if="item.play" name="https://cdn.ipadbiz.cn/bieyuan/map/icon/pauseButton1@3x.png" size="2.2rem" />
+                  <van-icon @click="handleAudioPlay(item, index)" v-else name="https://cdn.ipadbiz.cn/bieyuan/map/icon/play1@3x.png" size="2.2rem" />
                 </div>
                 </div>
                 <div :class="['progress', item.play ? 'checked' : '']"></div>
                 <div :class="['progress', item.play ? 'checked' : '']"></div>
               </div>
               </div>
@@ -83,6 +83,7 @@ const onClose = () => { // 关闭列表回调
   // 播放进度条
   // 播放进度条
   $('.progress').css('background', 'conic-gradient(#f07142 0%, transparent 0%)');
   $('.progress').css('background', 'conic-gradient(#f07142 0%, transparent 0%)');
   audio_list.value.forEach(item => item.play = false);
   audio_list.value.forEach(item => item.play = false);
+  audio_index.value = null;
   emit('close');
   emit('close');
 }
 }
 
 
@@ -109,6 +110,21 @@ onMounted(() => {
       src: 'https://img.tukuppt.com/newpreview_music/01/65/86/63c0264040bd4441.mp3',
       src: 'https://img.tukuppt.com/newpreview_music/01/65/86/63c0264040bd4441.mp3',
       play: false
       play: false
     },
     },
+    {
+      title: '3',
+      src: 'https://img.tukuppt.com/newpreview_music/01/62/01/63b515415b482633.mp3',
+      play: false
+    },
+    {
+      title: '2',
+      src: 'https://img.tukuppt.com/newpreview_music/01/66/20/63c0c3db3f8de739.mp3',
+      play: false
+    },
+    {
+      title: '风纺声(测试)(风的声音)风纺声(测试)(风的声音)',
+      src: 'https://img.tukuppt.com/newpreview_music/01/65/86/63c0264040bd4441.mp3',
+      play: false
+    },
   ];
   ];
 });
 });
 
 
@@ -239,6 +255,11 @@ watch(
   },
   },
   { immediate: true }
   { immediate: true }
 );
 );
+
+onUnmounted(() => { // 离开页面时关闭音频播放
+  onClose();
+  store.changeAudioStatus('pause');
+})
 </script>
 </script>
 
 
 <style lang="less" scoped>
 <style lang="less" scoped>
@@ -285,7 +306,7 @@ watch(
     }
     }
   }
   }
 
 
-  .progress-ring {
+.progress-ring {
   position: relative;
   position: relative;
   width: 2.5rem;
   width: 2.5rem;
   height: 2.5rem;
   height: 2.5rem;

 <!--
 <!--
  * @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-09 11:06:12
+ * @LastEditTime: 2024-10-09 13:43:35
  * @FilePath: /map-demo/src/views/bieyuan/info.vue
  * @FilePath: /map-demo/src/views/bieyuan/info.vue
  * @Description: 文件描述
  * @Description: 文件描述
 -->
 -->
@@ -34,7 +34,7 @@
         </div>
         </div>
         <div class="info-sub-title">{{ page_details.note }}</div>
         <div class="info-sub-title">{{ page_details.note }}</div>
       </div>
       </div>
-      <div style="margin-top: 0.5rem;">
+      <div id="tab-wrapper" style="margin-top: 0.5rem;">
         <van-config-provider :theme-vars="themeVars">
         <van-config-provider :theme-vars="themeVars">
           <van-tabs ref="tabsRef" v-model:active="active" @click-tab="clickTab" color="#DD7850" title-active-color="#DD7850" title-inactive-color="#DD7850" :shrink="show_shrink" sticky animated>
           <van-tabs ref="tabsRef" v-model:active="active" @click-tab="clickTab" color="#DD7850" title-active-color="#DD7850" title-inactive-color="#DD7850" :shrink="show_shrink" sticky animated>
             <van-tab title="介 绍" v-if="page_details.introduction">
             <van-tab title="介 绍" v-if="page_details.introduction">
@@ -179,6 +179,7 @@ const stopAudio = (item, index) => {
 
 
 const audio = ref(new Audio());
 const audio = ref(new Audio());
 const img_height = ref('15rem');
 const img_height = ref('15rem');
+const scrollTop = ref(0);
 
 
 onMounted(async () => {
 onMounted(async () => {
   // 通过ID查询到标记点详情
   // 通过ID查询到标记点详情
@@ -219,6 +220,12 @@ onMounted(async () => {
   var screenHeight = screenWidth * 3 / 4;
   var screenHeight = screenWidth * 3 / 4;
   // 设置容器的高度
   // 设置容器的高度
   img_height.value = screenHeight + 'px';
   img_height.value = screenHeight + 'px';
+  //
+  nextTick(() => {
+    $('.info-page').on('scroll', (evt) => {
+      scrollTop.value = $(evt.currentTarget).scrollTop(); // 获取滚动的垂直距离
+    })
+  })
 });
 });
 
 
 onUnmounted(() => { // 离开页面时关闭音频播放
 onUnmounted(() => { // 离开页面时关闭音频播放
@@ -307,6 +314,11 @@ const clickTab = (evt) => { // 标签切换
       // 图片有5个像素的圆角
       // 图片有5个像素的圆角
       $(img).css('border-radius', '5px');
       $(img).css('border-radius', '5px');
     });
     });
+    // 滚动高度大于tabs高度后才滚动到指定高度
+    let offsetTop = $('#tab-wrapper')[0].offsetTop;
+    if (scrollTop.value >= offsetTop) {
+      $('.info-page').scrollTop(offsetTop);
+    }
   });
   });
 }
 }