fix 完善浮动窗口显示逻辑

hookehuyr
Commit 62dc4b7c6fde292540ec02a927afd43db2f16c61 62dc4b7c 1 parent a9b2bbfb
Showing 2 changed files with 115 additions and 38 deletions
src/views/bieyuan/info.vue
src/views/bieyuan/map.vue
--- a/src/views/bieyuan/info.vue
View file @62dc4b7
+++ b/src/views/bieyuan/info.vue
View file @62dc4b7
 <!--
  * @Date: 2024-09-15 22:08:49
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-18 14:17:43
+ * @LastEditTime: 2024-09-18 16:39:55
  * @FilePath: /map-demo/src/views/bieyuan/info.vue
  * @Description: 文件描述
 -->
@@ -47,9 +47,11 @@
               <div style="color: #47525F; margin-top: 1rem;">静心咖啡绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍</div>
             </div>
             <div class="audio-wrapper">
-              <div @click="playAudio(item, index)" :class="['audio-item', play_audio_index === index ? 'click' : '']" v-for="(item, index) in audioList" :key="index">
+              <div :class="['audio-item', play_audio_index === index ? 'click' : '']" v-for="(item, index) in audioList" :key="index">
                 <div>{{ item.text }}</div>
-                <div :class="['audio-icon', play_audio_index === index ? 'click' : '']"></div>
+                <!-- <div :class="['audio-icon', play_audio_index === index ? 'click' : '']"></div> -->
+                <van-icon @click="stopAudio(item, index)" v-if="item.play" size="2rem" name="stop-circle-o" color="#DD7850" />
+                <van-icon v-else @click="playAudio(item, index)" size="2rem" name="https://cdn.ipadbiz.cn/bieyuan/map/icon/audio_icon.png" />
               </div>
             </div>
             <div style="width: 100%;">
@@ -105,14 +107,16 @@ const audioList = ref([{
   play: false,
 }])
-const playAudio = ({src}, index) => {
+const playAudio = (item, index) => {
-  audio.value.src = src;
+  audioList.value.forEach(item => item.play = false);
+  audio.value.src = item.src;
   play_audio_index.value = index;
   let play_status = audio.value.play() // 播放
   if (play_status) {
     console.warn('start');
     play_status.then(() => {
       console.warn('success');
+      item.play = true;
     }).catch((e) => {
       // 失败
       console.log('Operation is too fast, audio play fails')
@@ -120,11 +124,24 @@ const playAudio = ({src}, index) => {
   }
 }
+const stopAudio = (item, index) => {
+  item.play = false;
+  audio.value.pause();
+}
+
 const audio = ref(new Audio());
 const audio_play = (src, index) => {
   audio.value.src = src;
 }
+
+const outerStopAudio = () => {
+  audio.value.pause();
+}
+
+defineExpose({
+  outerStopAudio
+})
 </script>
 <style lang="less">
--- a/src/views/bieyuan/map.vue
View file @62dc4b7
+++ b/src/views/bieyuan/map.vue
View file @62dc4b7
 <!--
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-18 09:49:17
+ * @LastEditTime: 2024-09-18 16:43:00
  * @FilePath: /map-demo/src/views/bieyuan/map.vue
  * @Description: 公众地图主体页面
 -->
@@ -19,7 +19,10 @@
     <van-config-provider :theme-vars="themeVars">
       <van-floating-panel v-model:height="info_height" :anchors="anchors" @height-change="onHeightChange">
-        <page-info></page-info>
+        <page-info ref="pageInfo"></page-info>
+        <div v-if="showClose" @click="closeFloatPanel" class="close-float-panel">
+          <van-icon name="cross" color="#FFF" size="1.5rem" />
+        </div>
       </van-floating-panel>
     </van-config-provider>
   </div>
@@ -116,10 +119,11 @@ export default {
       data_paths: {}, // 接口获取-地图导航路径
       data_path_list: [], // 接口获取-地图导航路径
       info_height: 0,
-      anchors: [0,  Math.round(0.4 * window.innerHeight),  Math.round(1 * window.innerHeight)],
+      anchors: [0,  (0.5 * window.innerHeight),  (1 * window.innerHeight)],
       themeVars: {
         floatingPanelHeaderHeight: 0,
-      }
+      },
+      showClose: false,
     }
   },
   async mounted() {
@@ -162,9 +166,11 @@ export default {
     // 设置贴片地图
     this.setTitleLayer();
     //
-    setTimeout(() => {
+    // setTimeout(() => {
-      this.info_height = Math.round(0.4 * window.innerHeight);
+    //   this.info_height = (0.5 * window.innerHeight);
-    }, 2000);
+    //   // 浮动面板样式
+    //   $('.van-floating-panel__content').css('borderRadius', '1rem');
+    // }, 2000);
   },
   watch: {
   },
@@ -211,7 +217,7 @@ export default {
           marker_icon = entity_info[i].icon;
         }
         if (entity_info[i]?.writing_mode === 'vertical') { // 标题文字垂直
-          var textMarker = new AMap.Text({
+          let textMarker = new AMap.Text({
             zooms: [18, 20], // 点标记显示的层级范围，超过范围不显示。
             text: entity_info[i].name, //标记显示的文本内容
             anchor: "center", //设置文本标记锚点位置
@@ -222,8 +228,8 @@ export default {
               //设置文本样式，Object 同 css 样式表
               "padding": ".5rem .2rem .5rem .2rem",
               // "margin-bottom": "1rem",
-              // "border-radius": ".25rem",
+              "border-radius": ".25rem",
-              "background-color": "#965f13",
+              "background-color": "#DD7850",
               // "width": "1rem",
               // "border-width": 0,
               // "box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
@@ -238,38 +244,72 @@ export default {
             },
             position: entity_info[i].position, //点标记在地图上显示的位置
           });
+          textMarker.setMap(this.map); //将文本标记设置到地图上
+          this.markerSum.push(textMarker);
           if (clickListener1) {
             textMarker.off('click', clickListener)
           }
           // 绑定景点的点击事件 - 文字出现才能触发
           var clickListener1 = textMarker.on('click', (e) => {
-            // console.warn(e);
+            // 还原样式
-            this.itemInfo = entity_info[i];
+            this.markerSum.forEach(item => {
-            // 不同弹框类型
+              if (e.target.hS !== item.hS) {
-            // if (entity_info[i].window_type === 'normal') {
+                // 修改文本的样式
-            //   this.showInfoPopup = true;
+                item.setStyle({
-            // } else if (entity_info[i].window_type === 'lite') {
+                  //设置文本样式，Object 同 css 样式表
-            //   this.showInfoLitePopup = true;
+                  "padding": ".5rem .2rem .5rem .2rem",
-            // } else if (entity_info[i].window_type === 'warn') {
+                  // "margin-bottom": "1rem",
-            //   this.showInfoWarnPopup = true;
+                  "border-radius": ".25rem",
-            // }
+                  "background-color": "#DD7850",
+                  // "width": "1rem",
+                  // "border-width": 0,
+                  // "box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
+                  // "text-align": "center",
+                  "font-size": "0.8rem",
+                  "color": "white",
+                  "writing-mode": "vertical-rl",
+                  "text-orientation": "mixed",
+                  "display": "flex",
+                  "justify-content": "center",
+                  "align-items": "center",
+                });
+              }
+            })
             // 修改文本的样式
-            textMarker.setStyle({
+            e.target.setStyle({
-                'font-size': '20px',               // 修改字体大小
+                //设置文本样式，Object 同 css 样式表
-                'color': '#ff0000',                // 修改字体颜色
+                "padding": ".5rem .2rem .5rem .2rem",
-                'background-color': '#0000ff',     // 修改背景颜色
+                // "margin-bottom": "1rem",
-                'border': '1px solid #fff',        // 增加边框
+                "border-color": "#DD7850",
-                'padding': '10px',                 // 调整内边距
+                "border-radius": ".25rem",
-                'border-radius': '10px'            // 调整圆角
+                "background-color": "#FFF",
+                // "width": "1rem",
+                // "border-width": 0,
+                // "box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
+                // "text-align": "center",
+                "font-size": "0.8rem",
+                "color": "#DD7850",
+                "writing-mode": "vertical-rl",
+                "text-orientation": "mixed",
+                "display": "flex",
+                "justify-content": "center",
+                "align-items": "center",
             });
             // 修改文本内容
-            textMarker.setText('样式已修改');
+            // textMarker.setText('样式已修改');
+            //
+
+            // console.warn(e);
+            this.itemInfo = entity_info[i];
+
+            // 打开浮动面板
+            this.info_height = (0.5 * window.innerHeight);
+            // 浮动面板样式
+            $('.van-floating-panel__content').css('borderRadius', '1rem');
           })
-          textMarker.setMap(this.map); //将文本标记设置到地图上
-          this.markerSum.push(textMarker);
         }
-      })
+      });
       this.map.add(this.markerSum);
     },
     isPointInRing() { // 是否在景区范围
@@ -533,8 +573,22 @@ export default {
       //   path: '/bieyuan/scan'
       // })
     },
-    onHeightChange ({ height }) {
+    onHeightChange ({ height }) { // 监听浮动面板高度变化
-      console.warn('拖动完成', height);
+      if (height === window.innerHeight) {
+        // 浮动面板样式
+        $('.van-floating-panel__content').css('borderRadius', '0');
+        this.showClose = true;
+      } else {
+        $('.van-floating-panel__content').css('borderRadius', '1rem');
+        this.showClose = false;
+      }
+    },
+    closeFloatPanel () {
+      this.info_height = (0.5 * window.innerHeight);
+      $('.van-floating-panel__content').css('borderRadius', '1rem');
+      this.showClose = false;
+      // 关闭音频
+      this.$refs.pageInfo.outerStopAudio();
     }
   }
 }
@@ -716,4 +770,10 @@ export default {
   padding: 5px 12px;
   font-size: 0.8rem;
 }
+
+.close-float-panel {
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+}
 </style>