建筑景点样式调整

hookehuyr
Commit 11e5ddb3e42e268d1fb92a7abf0cd085db0c2c27 11e5ddb3 1 parent eb9362e8
Showing 4 changed files with 124 additions and 48 deletions
components.d.ts
src/common/tiantan_v2.js
src/components/InfoWindow.vue
src/views/index.vue
--- a/components.d.ts
View file @11e5ddb
+++ b/components.d.ts
View file @11e5ddb
@@ -12,8 +12,12 @@ declare module '@vue/runtime-core' {
     InfoWindow: typeof import('./src/components/InfoWindow.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    VanCol: typeof import('vant/es')['Col']
     VanDialog: typeof import('vant/es')['Dialog']
     VanIcon: typeof import('vant/es')['Icon']
     VanPopup: typeof import('vant/es')['Popup']
+    VanRow: typeof import('vant/es')['Row']
+    VanTab: typeof import('vant/es')['Tab']
+    VanTabs: typeof import('vant/es')['Tabs']
   }
 }
--- a/src/common/tiantan_v2.js
View file @11e5ddb
+++ b/src/common/tiantan_v2.js
View file @11e5ddb
--- a/src/components/InfoWindow.vue
View file @11e5ddb
+++ b/src/components/InfoWindow.vue
View file @11e5ddb
@@ -2,16 +2,19 @@
   <div style="position: relative;">
     <div class="info-window-wrapper">
       <div :style="{ width: (widow_info.width * 0.8) + 'px', overflow: 'auto' }">
-        <div style="color: #AB8F57; font-size: 1.5rem; margin-bottom: 0.5rem;">三宝楼</div>
+        <div class="hideScrollBar info-window-title">
-        <div>
+          <div v-for="(item, index) in info.details" :key="index" @click="handleTitle(index)"
-          <div class="info-text van-multi-ellipsis--l3">
+            :class="[isActive === index ? 'checked' : '', 'item']">
-            大雄宝殿是寺院的中心建筑，兴建于清末民初时期。重檐歇山，面阔七楹，飞檐翘角，气势雄伟，风格挺秀。梁枋均施苏式彩绘，典雅富丽，绚丽夺目。
+            <span>{{ item.name }}</span>
-
+          </div>
-            大殿二重檐下，悬“大雄宝殿”四个遒劲有力的金字，气势雄浑，据说这四个字是陆润庠所提。陆润庠是苏州历史上第五十五位，也是最后一位状元，官至一品、大学士(即宰相级别)。大雄宝殿是佛教寺院中供奉佛像的正殿，是整座寺院的核心建筑，也是僧众朝暮集中修持的地方。因释迦牟尼佛德号“大雄”，所以称大雄宝殿。为什么叫大雄？大者，是包含万有的意思；雄者，是摄伏群魔的意思。释迦牟尼佛具足圆觉智慧，能雄镇大千世界，降伏四魔（烦恼魔、阴魔、死魔、自在天魔），因此尊称佛陀为大雄。
+        </div>
-
+          <div v-if="info?.details?.length > 3" @click="handleNavScroll()" style="position: fixed; right: 0.75rem; width: 1rem; background-color: #FFF;top: 1.5rem;">
-            檐枋悬有三块匾额，中门之上为“西乾应迹”匾额。西者西方，乾者天也，西乾即是指佛教的发源地古印度，因当时地处中国的西方而得名，相应地，中国则被称为东土。应迹谓应化垂迹，即佛、菩萨应众生之机缘而将其本体示现种种身以济度众生。
+            <van-icon v-if="!nav_scroll" name="arrow" color="#888" size="1.25rem" style="vertical-align: sub;" />
+            <van-icon v-else name="arrow-left" color="#888" size="1.25rem" style="vertical-align: sub;" />
           </div>
-          <div class="info-control">
+        <div v-for="(item, index) in info.details" :key="index">
+          <div v-if="isActive === index" :class=" [item.audio ? 'info-text-audio' : 'info-text', 'van-multi-ellipsis--l3'] ">{{ item.note }}</div>
+          <div v-if="isActive === index && item.audio" class="info-control">
             <div v-if="!is_play" @click="play()" class="control-play">
               <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E6%92%AD%E6%94%BE%E6%9A%82%E5%81%9C@2x.png" size="3rem"
                 color="#FFF" style="margin-top: 0.5rem;" />
@@ -25,14 +28,15 @@
         </div>
       </div>
       <div class="van-hairline--top" style="margin: 1rem 0;">
-        <div style="width: 50%; float: left; text-align: center; margin-top: 1rem;" class="van-hairline--right">
+        <div @click="goTo()" style="width: 50%; float: left; text-align: center; margin-top: 1rem;"
+          class="van-hairline--right">
           <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%89%8D%E5%BE%80@2x.png" size="1.5rem" color="#FFF"
-          style="vertical-align: bottom;" />&nbsp;
+            style="vertical-align: bottom;" />&nbsp;
           <span style="color: #AB8F57; font-size: 1.1rem;">详情</span>
         </div>
         <div style="width: 50%; float: left; text-align: center; margin-top: 1rem;">
           <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%89%8D%E5%BE%80@2x.png" size="1.5rem" color="#FFF"
-          style="vertical-align: bottom;" />&nbsp;
+            style="vertical-align: bottom;" />&nbsp;
           <span style="color: #AB8F57; font-size: 1.1rem;">前往</span>
         </div>
       </div>
@@ -59,6 +63,7 @@
 </template>
 <script>
+import $ from 'jquery'
 export default {
   props: {
@@ -66,9 +71,9 @@ export default {
       type: Object,
       default: () => { }
     },
-    title: {
+    info: {
-      type: String,
+      type: Object,
-      default: ''
+      default: () => { }
     },
     rect: {
       type: Object,
@@ -76,7 +81,6 @@ export default {
     },
   },
   mounted() {
-
   },
   watch: {
     rect(val) {
@@ -85,7 +89,7 @@ export default {
     infoWindow(val) {
       if (val) {
         // 加载录音
-        this.audio.src = 'https://file.365daoyou.cn/mimi-001_1505799708494-k3xkyzv8';
+        this.audio.src = this.info.details[this.isActive]['audio'];
         let play_status = this.audio.play() // 播放
         if (play_status) {
           play_status.then(() => {
@@ -110,11 +114,13 @@ export default {
       is_play: false,
       audio: new Audio(),
       widow_info: {},
-      play_time: '00:00'
+      play_time: '00:00',
+      isActive: 0,
+      nav_scroll: false,
     }
   },
   methods: {
-    getAudioTime (audio) {
+    getAudioTime(audio) {
       let time = Math.floor(audio);
       var minute = time / 60;
       var minutes = parseInt(minute);
@@ -145,6 +151,10 @@ export default {
       // 处理音频
       this.voice_pause();
       this.audio.currentTime = 0
+      // 默认选中项
+      this.isActive = 0;
+      // 滚动状态
+      this.nav_scroll = false;
     },
     showDetail() {
       this.show_popup = true;
@@ -153,7 +163,7 @@ export default {
       this.video_src = 'https://video.pearvideo.com/mp4/short/20200209/cont-1650197-14888002-hd.mp4'
     },
     play() {
-      this.voice_play('https://file.365daoyou.cn/mimi-001_1505799708494-k3xkyzv8', 0)
+      this.voice_play(this.info.details[this.isActive]['audio'], 0)
     },
     pause() {
       this.voice_pause()
@@ -189,6 +199,33 @@ export default {
     voice_pause() {
       this.audio.pause();
       this.is_play = false;
+    },
+    goTo(url) {
+      location.href = this.info.details[this.isActive].url;
+    },
+    handleTitle (index) {
+      this.isActive = index;
+      this.voice_pause()
+      // 标题滚动
+      if (index === 2 && this.info.details.length > 3) {
+        this.handleNavScroll()
+      }
+    },
+    handleNavScroll () { // 滚动标题
+      this.nav_scroll = !this.nav_scroll;
+      if (this.nav_scroll) {
+        setTimeout(() => {
+          $('.info-window-title').animate({
+            scrollLeft: $('.info-window-title').outerWidth()
+          }, 1000);
+        }, 100);
+      } else {
+        setTimeout(() => {
+          $('.info-window-title').animate({
+            scrollLeft: 0
+          }, 1000);
+        }, 100);
+      }
     }
   }
 }
@@ -202,10 +239,16 @@ export default {
   box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
   text-align: left;
   border-radius: 5px;
-  padding: 1rem 1.25rem;
+  padding: 1.5rem 1.25rem;
   overflow: auto;
   .info-text {
+    width: 100%;
+    line-height: 1.5;
+    float: left;
+    color: #7A6C6C;
+  }
+  .info-text-audio {
     width: 80%;
     line-height: 1.5;
     float: left;
@@ -318,4 +361,29 @@ export default {
   background-size: 1rem 1rem;
   box-shadow: none;
 }
+
+.info-window-title {
+  display: flex;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  position: relative;
+  text-align: left;
+
+  .item {
+    width: 33.333%;
+    flex-shrink: 0;
+    color: #888;
+    font-size: 1.2rem;
+    margin-bottom: 0.75rem;
+    display: inline-block;
+  }
+
+  .checked {
+    color: #AB8F57;
+    span {
+      border-bottom: 1.5px solid #AB8F57; padding-bottom: 3px;
+    }
+  }
+}
 </style>
--- a/src/views/index.vue
View file @11e5ddb
+++ b/src/views/index.vue
View file @11e5ddb
 <!--
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-06-05 11:38:09
+ * @LastEditTime: 2023-06-05 16:47:36
  * @FilePath: /map-demo/src/views/index.vue
  * @Description: 文件描述
 -->
@@ -9,8 +9,7 @@
   <div ref="root" style="height: 100vh; position: relative; overflow: hidden;">
     <div id="container"></div>
     <div class="nav-bar-wrapper">
-      <div class="hideScrollBar"
+      <div class="hideScrollBar" style="display: flex; overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; position: relative;">
-        style="display: flex; overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; position: relative;">
         <div v-for="(item, index) in navBarList" :key="index" style="width: 30%; flex-shrink: 0; padding-top: 1rem;" :class="[isActive === index ? 'checked' : '', 'item']"
           @click="setNavLayer(item, index)">
           <van-icon name="shop-o" size="1.5rem" /><br />
@@ -28,10 +27,9 @@
       <van-popup v-model:show="show_nav_popup" position="bottom" duration="0" :overlay="false"
         :style="{ padding: '1rem', bottom: '4.5rem' }">
         <div style="text-align: left;">
-          <div @click="positionMarker()" style="margin-bottom: 1rem; font-size: 1.15rem;"><van-icon name="fire-o" color="red" />&nbsp;&nbsp;三宝楼</div>
+          <div v-for="(item, index) in navList[navName]" :key="index"  @click="positionMarker(item)" style="margin-bottom: 1rem; font-size: 1.15rem;">
-          <div style="margin-bottom: 1rem; font-size: 1.15rem;"><van-icon name="fire-o" color="red" />&nbsp;&nbsp;法云堂</div>
+            <van-icon name="fire-o" color="red" />&nbsp;&nbsp;{{ item.name }}
-          <div style="margin-bottom: 1rem; font-size: 1.15rem;"><van-icon name="fire-o" color="red" />&nbsp;&nbsp;罗汉堂</div>
+          </div>
-          <div style="margin-bottom: 1rem; font-size: 1.15rem;"><van-icon name="fire-o" color="red" />&nbsp;&nbsp;大雄宝殿</div>
         </div>
       </van-popup>
     </div>
@@ -92,7 +90,7 @@
     <!-- 自定义组件InfoWindow，初始时需要隐藏 -->
     <!-- 隐藏不要使用v-if，因为我们需要渲染完成后的原生html结构作为信息框的dom对象使用 -->
-    <InfoWindow v-show="showInfoWindow" ref="infoWindow" :info-window="infoWindow" :title="infoWindowTitle" :rect="rect"></InfoWindow>
+    <InfoWindow v-show="showInfoWindow" ref="infoWindow" :info-window="infoWindow" :info="itemInfo" :rect="rect"></InfoWindow>
   </div>
 </template>
@@ -215,21 +213,23 @@ export default {
       show_nav_popup: false,
       showInfoWindow: false,
       infoWindow: {},
-      infoWindowTitle: '',
+      itemInfo: '',
       navBarList: [],
-      rect: {}
+      rect: {},
+      navList: [],
+      navName: 'spotInfo'
     }
   },
   mounted() {
     this.navBarList = [{
       key: 'spot',
-      name: '景区信息'
+      name: '景点'
     }, {
       key: 'activity',
-      name: '活动设施'
+      name: '餐饮'
     }, {
       key: 'public',
-      name: '公共设施'
+      name: '出入口'
     }, {
       key: 'toilet',
       name: '卫生间'
@@ -244,6 +244,7 @@ export default {
     this.getLocation()
     // 打开贴片地图
     this.setTitleLayer()
+    this.navList = coord;
   },
   watch: {
     show_popup(val) {
@@ -459,23 +460,22 @@ export default {
             },
             label: {
               content: coord.spotInfo[i].name,
-              position: 'TM',
+              position: 'BM',
+              offset: new AMap.Pixel(0, 10),
               minZoom: 18
             }
+          }, {
+            icon: {},
+            label: {}
           }],
-          zoomStyleMapping
+          zoomStyleMapping: coord.spotInfo[i].zoom ? coord.spotInfo[i].zoom : zoomStyleMapping
         });
         if (clickListener) {
           marker.off('click', clickListener)
         }
         // 绑定景点的点击事件 - 文字出现才能触发
         var clickListener = marker.on('click', (e) => {
-          // this.show_popup = true;
+          this.positionMarker(coord.spotInfo[i]);
-          // this.popup_title = x.name;
-          // this.popup_content = x.note;
-          // this.video_src = 'https://video.pearvideo.com/mp4/short/20200209/cont-1650197-14888002-hd.mp4'
-          // this.positionMarker(coord.spotInfo[i].position);
-          this.positionMarker([120.587519, 31.315924]);
         })
         //
         this.spotInfo.push(marker);
@@ -899,15 +899,19 @@ export default {
     setNavLayer({ key }, index) { // 选择地图图层显示
       this.isActive = index;
       if (key === 'spot') {
+        this.navName = 'spotInfo'
         this.setSpotLayer()
       }
       if (key === 'toilet') {
+        this.navName = 'toiletInfo'
         this.setToiletLayer()
       }
       if (key === 'activity') {
+        this.navName = 'activityInfo'
         this.setActivityLayer()
       }
       if (key === 'public') {
+        this.navName = 'publicInfo'
         this.setPublicLayer()
       }
     },
@@ -923,11 +927,11 @@ export default {
     handleNavPopup() {
       this.show_nav_popup = !this.show_nav_popup
     },
-    positionMarker(position = [120.587519, 31.315924]) {
+    positionMarker(item) {
       // 点击后创建自定义信息窗口
-      this.setInfoWindows(position)
+      this.setInfoWindows(item)
       // 把地图中心点设置为当前点击的标记点
-      this.map.setZoomAndCenter(this.zoom, position);
+      this.map.setZoomAndCenter(this.zoom, item.position);
       //
       this.show_nav_popup = false;
       // 禁止缩放
@@ -935,7 +939,7 @@ export default {
         zoomEnable: false
       });
     },
-    setInfoWindows(position) {
+    setInfoWindows(item) {
       // 此时需要把组件的样式设置为可见
       this.showInfoWindow = true
       // 设置marker头部的标题信息窗口
@@ -948,9 +952,9 @@ export default {
         offset: new AMap.Pixel(0, -30),
       })
       this.infoWindow = infoWindow;
-      this.infoWindowTitle = 'xxxx'
+      this.itemInfo = item
       // 信息窗口打开
-      infoWindow.open(this.map, position)
+      infoWindow.open(this.map, item.position)
     }
   }