样式调整，定位功能调整

hookehuyr
Commit 45b20416d50bb67f3d787eb583e556cb0f9e9c7f 45b20416 1 parent 746bbc56
Showing 7 changed files with 171 additions and 112 deletions
.env
components.d.ts
src/App.vue
src/common/yard.js
src/components/InfoWindowYard.vue
src/views/index.vue
src/views/inner.vue
--- a/.env
View file @45b2041
+++ b/.env
View file @45b2041
@@ -11,7 +11,7 @@ VITE_PROXY_PREFIX = /srv/
 VITE_OUTDIR = map
 # 是否开启调试
-VITE_CONSOLE = 0
+VITE_CONSOLE = 1
 # appID相关
 VITE_APPID=微信appID
--- a/components.d.ts
View file @45b2041
+++ b/components.d.ts
View file @45b2041
@@ -10,7 +10,6 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     AudioBackground: typeof import('./src/components/audioBackground.vue')['default']
-    copy: typeof import('./src/components/InfoWindowWarn copy.vue')['default']
     InfoWindow: typeof import('./src/components/InfoWindow.vue')['default']
     InfoWindowLite: typeof import('./src/components/InfoWindowLite.vue')['default']
     InfoWindowWarn: typeof import('./src/components/InfoWindowWarn.vue')['default']
@@ -23,8 +22,6 @@ declare module '@vue/runtime-core' {
     VanDialog: typeof import('vant/es')['Dialog']
     VanIcon: typeof import('vant/es')['Icon']
     VanImage: typeof import('vant/es')['Image']
-    VanImagePreview: typeof import('vant/es')['ImagePreview']
-    VanOverlay: typeof import('vant/es')['Overlay']
     VanPopup: typeof import('vant/es')['Popup']
     VanRow: typeof import('vant/es')['Row']
   }
--- a/src/App.vue
View file @45b2041
+++ b/src/App.vue
View file @45b2041
@@ -2,7 +2,7 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-26 23:52:36
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-07-18 14:17:19
+ * @LastEditTime: 2023-07-19 10:42:05
  * @FilePath: /map-demo/src/App.vue
  * @Description:
 -->
@@ -46,11 +46,7 @@ watchEffect(
 // });
 onMounted(async () => {
-  // 获取当前域名
+  const { data } = await wxJsAPI();
-  if (!wxInfo().isMobile && !wxInfo().isWeiXin) {
-    location.href = location.origin + '/f/map/' + location.hash;
-  }
-  const { data } = await wxJsAPI({ url: '/f/map/#/' });
   data.jsApiList = apiList;
   wx.config(data);
   wx.ready(() => {
--- a/src/common/yard.js
View file @45b2041
+++ b/src/common/yard.js
View file @45b2041
 /*
  * @Date: 2023-07-10 16:14:10
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-07-18 16:00:25
+ * @LastEditTime: 2023-07-19 11:01:52
  * @FilePath: /map-demo/src/common/yard.js
  * @Description: 文件描述
  */
@@ -15,7 +15,7 @@ const testInfo = {
   list: [
     {
       name: '拈花堂',
-      position: [120.586269, 31.313723],
+      position: [120.586212, 31.31433],
       icon: 'https://cdn.ipadbiz.cn/space/Fg-vUZrzlULP6Ls61gRtxgaeTN-y.png',
       details: [
         {
@@ -30,6 +30,30 @@ const testInfo = {
           img_url: ['https://cdn.ipadbiz.cn/xys/temp/6e3cddf62ff6369c97fac8fa65299f9a.jpg'], // 图片链接
           book_url: '1', // 预定链接
         },
+        {
+          id: '0',
+          name: '拈花堂-南厅',
+          type: '会议室',
+          sum: 130,
+          manager: '西仓库运营组长',
+          contact: '13876476873',
+          status: '正常',
+          note: '预订须知',
+          img_url: ['https://cdn.ipadbiz.cn/xys/temp/6e3cddf62ff6369c97fac8fa65299f9a.jpg'], // 图片链接
+          book_url: '1', // 预定链接
+        },
+        {
+          id: '0',
+          name: '拈花堂-二层',
+          type: '会议室',
+          sum: 230,
+          manager: '西仓库运营组长',
+          contact: '13876476873',
+          status: '正常',
+          note: '预订须知',
+          img_url: ['https://cdn.ipadbiz.cn/xys/temp/6e3cddf62ff6369c97fac8fa65299f9a.jpg'], // 图片链接
+          book_url: '1', // 预定链接
+        },
       ],
       window_type: 'yard',
     },
--- a/src/components/InfoWindowYard.vue
View file @45b2041
+++ b/src/components/InfoWindowYard.vue
View file @45b2041
 <template>
   <div style="position: relative;">
-    <div class="info-window-warn-wrapper">
+    <div class="info-window-yarn-wrapper">
       <div :style="{ width: (widow_info.width * 0.8) + 'px', overflow: 'auto' }">
         <div class="hideScrollBar info-window-title">
           <div v-for="(item, index) in info?.details" :key="index" @click="handleTitle(index)"
@@ -21,8 +21,8 @@
               <div>联系电话: {{ item.contact }}</div>
               <div>状态: {{ item.status }}</div>
             </div>
-            <div v-if="warn_info.img_url" class="info-control">
+            <div v-if="yard_info.img_url" class="info-control">
-              <viewer :images="warn_info.img_url" :options="options" class="images clearfix">
+              <viewer :images="yard_info.img_url" :options="options" class="images clearfix">
                 <template #default="scope">
                   <van-image v-for="src in scope.images" width="100%" fit="contain" :src="src" />
                 </template>
@@ -32,13 +32,13 @@
         </div>
       </div>
       <div class="van-hairline--top warn-button-wrapper">
-        <div @click="goToUrl()" style="width: 50%; float: left; text-align: center; margin-top: 0.75rem;"
+        <div @click="goToNote()" style="width: 50%; float: left; text-align: center; margin-top: 0.75rem;"
           class="van-hairline--right">
           <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E8%AF%A6%E6%83%85@2x.png" size="1.25rem" color="#FFF"
             style="vertical-align: sub;" />&nbsp;
           <span style="color: #AB8F57; font-size: 1rem;">须知</span>
         </div>
-        <div @click="goToUrl()" style="width: 50%; float: left; text-align: center; margin-top: 0.75rem;"
+        <div @click="goToOrder()" style="width: 50%; float: left; text-align: center; margin-top: 0.75rem;"
           class="van-hairline--right">
           <van-icon name="https://cdn.ipadbiz.cn/xys/map/icon/%E9%A2%84%E5%AE%9A@2x.png" size="1.25rem" color="#FFF"
             style="vertical-align: sub;" />&nbsp;
@@ -54,6 +54,22 @@
     <div class="leaflet-popup-tip-container" style="left: 50%; position: relative;">
       <div class="leaflet-popup-tip"></div>
     </div>
+
+    <van-popup
+      v-model:show="showPopup"
+      position="bottom"
+      :overlay="true"
+      :style="{ height: '90%' }"
+      teleport="body"
+    >
+      <van-icon name="cross" size="1.35rem" @click="showPopup = false" style="float: right; color: gray; margin-right: 1rem; margin-top: 1rem;" />
+      <div style="clear: both;">
+        <div style="color: #965f13; text-align: center; margin: 1rem; font-size: 1.25rem;">
+          用户须知
+        </div>
+        <div v-html="yard_info.note" style="padding: 1rem;"></div>
+      </div>
+    </van-popup>
   </div>
 </template>
@@ -80,8 +96,8 @@ export default {
   computed: {
     warn_span1() {
       let flag = false;
-      if (this.warn_info.case_url) {
+      if (this.yard_info.case_url) {
-        if (this.warn_info.notice_url || this.warn_info.handle_url) {
+        if (this.yard_info.notice_url || this.yard_info.handle_url) {
           flag = true
         }
       }
@@ -89,8 +105,8 @@ export default {
     },
     warn_span2() {
       let flag = false;
-      if (this.warn_info.notice_url) {
+      if (this.yard_info.notice_url) {
-        if (this.warn_info.handle_url) {
+        if (this.yard_info.handle_url) {
           flag = true
         }
       }
@@ -103,7 +119,7 @@ export default {
     },
     infoWindow(val) {
       if (val) {
-        this.warn_info = this.info.details[0]
+        this.yard_info = this.info.details[0]
       }
     }
   },
@@ -119,7 +135,7 @@ export default {
       play_time: '00:00',
       isActive: 0,
       nav_scroll: false,
-      warn_info: {},
+      yard_info: {},
       showBottom: false,
       img_url: '',
       show: false,
@@ -128,7 +144,8 @@ export default {
         title: false,
         toolbar: false,
         navbar: false,
-      }
+      },
+      showPopup: false
     }
   },
   methods: {
@@ -141,24 +158,12 @@ export default {
       // 滚动状态
       this.nav_scroll = false;
     },
-    goToCase(url) {
+    goToNote () {
-      if (url) {
+      this.showPopup = true;
-        location.href = url;
+      console.warn(this.yard_info);
-      }
-    },
-    goToList(id) {
-      this.$router.push({
-        path: '/noticeList',
-        query: {
-          id
-        }
-      })
-    },
-    goToHandle(url) {
-      // if (url) {
-      //   location.href = url;
-      // }
     },
+    goToOrder () {},
+    goToLocation () {},
     onClose () {
       window.devicePixelRatio = 1;
     },
@@ -168,7 +173,7 @@ export default {
       // if (index === 2 && this.info.details.length > 3) {
       //   this.handleNavScroll()
       // }
-      this.warn_info = this.info.details[index]
+      this.yard_info = this.info.details[index]
     },
     handleNavScroll() { // 滚动标题
       this.nav_scroll = !this.nav_scroll;
@@ -191,7 +196,7 @@ export default {
 </script>
 <style lang="less">
-.info-window-warn-wrapper {
+.info-window-yarn-wrapper {
   background: #fff;
   color: #333;
   -webkit-box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
@@ -311,7 +316,7 @@ export default {
     text-align: left;
     .item {
-      width: 30%;
+      width: 35%;
       flex-shrink: 0;
       color: #888;
       font-size: 1.1rem;
--- a/src/views/index.vue
View file @45b2041
+++ b/src/views/index.vue
View file @45b2041
 <!--
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-07-18 15:02:13
+ * @LastEditTime: 2023-07-19 06:38:25
  * @FilePath: /map-demo/src/views/index.vue
  * @Description: 地图主体页面
 -->
@@ -25,7 +25,7 @@
       </div>
       <van-popup v-model:show="show_nav_popup" position="bottom" duration="0" :overlay="false"
-        :style="{ padding: '1rem', bottom: '4.5rem' }">
+        :style="{ padding: '1rem', bottom: '6rem' }">
         <div style="text-align: left;">
           <div v-for="(item, index) in navList" :key="index" @click="handleNavMarker(item)"
             style="margin-bottom: 1rem; font-size: 1.15rem;">
--- a/src/views/inner.vue
View file @45b2041
+++ b/src/views/inner.vue
View file @45b2041
 <!--
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-07-18 16:48:31
+ * @LastEditTime: 2023-07-19 11:23:33
  * @FilePath: /map-demo/src/views/inner.vue
  * @Description: 地图主体页面
 -->
@@ -25,7 +25,7 @@
       </div>
       <van-popup v-model:show="show_nav_popup" position="bottom" duration="0" :overlay="false"
-        :style="{ padding: '1rem', bottom: '4.5rem' }">
+        :style="{ padding: '1rem', bottom: '6rem' }">
         <div style="text-align: left;">
           <div v-for="(item, index) in navList" :key="index" @click="handleNavMarker(item)"
             style="margin-bottom: 1rem; font-size: 1.15rem;">
@@ -36,10 +36,10 @@
     </div>
     <div class="operate-bar-wrapper">
       <div class="box-wrapper">
-        <!-- <div class="item" @click="setLocation">
+        <div class="item" @click="setLocation">
           <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8Dloc@2x.png" size="1.5rem"
             style="vertical-align: middle;" />
-        </div> -->
+        </div>
         <div class="item" @click="selectRoute">
           <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8Dloc@2x.png" size="1.5rem"
             style="vertical-align: middle;" />
@@ -83,28 +83,28 @@
     <!-- 隐藏不要使用v-if，因为我们需要渲染完成后的原生html结构作为信息框的dom对象使用 -->
     <InfoWindow v-show="showInfoWindow" ref="infoWindow" :info-window="infoWindow" :info="itemInfo" :rect="rect"
       @onLocation="infoWindowLocation" @onPlay="onPlay" @onPause="onPause"></InfoWindow>
-    <!-- <InfoWindowLite v-show="showInfoWindowLite" ref="infoWindowLite" :info-window="infoWindowLite" :info="itemInfo"
+    <InfoWindowLite v-show="showInfoWindowLite" ref="infoWindowLite" :info-window="infoWindowLite" :info="itemInfo"
       :rect="rect" @onLocation="infoWindowLocation"></InfoWindowLite>
     <InfoWindowWarn v-show="showInfoWindowWarn" ref="infoWindowWarn" :info-window="infoWindowWarn" :info="itemInfo"
-      :rect="rect"></InfoWindowWarn> -->
+      :rect="rect"></InfoWindowWarn>
     <InfoWindowYard v-show="showInfoWindowYard" ref="infoWindowYard" :info-window="infoWindowYard" :info="itemInfo"
       :rect="rect"></InfoWindowYard>
     <!-- <audioBackground></audioBackground> -->
     <van-popup v-model:show="show_member_popup" position="bottom" :overlay="true" :style="{ padding: '1rem 0', height: '80%', background: '#F7F8FA' }">
-      <van-icon name="cross" size="1.35rem" @click="show_member_popup = false" style="float: right; color: gray; margin-right: 1rem;" />
+      <van-icon name="cross" size="1.35rem" @click="closeMember" style="float: right; color: gray; margin-right: 1rem;" />
       <div id="member-list" class="popup-wrapper" style="clear: both;">
         <div style="color: #965f13; text-align: center; margin-bottom: 1rem; font-size: 1.25rem;">
           {{ itemInfo.name }}
         </div>
         <div v-for="(item, index) in itemInfo.details" :key="index" style="margin-bottom: 1rem;">
           <!-- 临时引用演示 -->
-          <van-cell-group inset v-show="false">
+          <!-- <van-cell-group inset v-show="false">
             <van-cell title="姓名" :value="item.name" />
             <van-cell title="手机号" :value="item.contact" />
             <van-cell title="组别" :value="item.group" />
-          </van-cell-group>
+          </van-cell-group> -->
           <!-- end -->
           <div class="van-cell-group van-cell-group--inset">
             <div class="van-cell">
@@ -203,7 +203,7 @@ const GPS = {
 };
 export default {
-  components: { InfoWindow },
+  components: { InfoWindow, InfoWindowLite, InfoWindowWarn, InfoWindowYard  },
   data() {
     return {
       map: '',
@@ -301,16 +301,6 @@ export default {
     //   this.map.resize();
     //   console.warn(0);
     // }, 1000 * 10);
-    // wx.getLocation({
-    //   type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
-    //   success: function (res) {
-    //     var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
-    //     var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
-    //     var speed = res.speed; // 速度，以米/每秒计
-    //     var accuracy = res.accuracy; // 位置精度
-    //     console.warn(res);
-    //   }
-    // });
   },
   watch: {
     show_popup(val) {
@@ -526,31 +516,32 @@ export default {
     //     fillColor: '#CFE7AA'
     //   });
     // },
-    // isPointInRing() { // 是否在景区范围
+    isPointInRing() { // 是否在景区范围
-    //   let isPointInRing = AMap.GeometryUtil.isPointInRing([this.current_lng, this.current_lat], [
+      let isPointInRing = AMap.GeometryUtil.isPointInRing([this.current_lng, this.current_lat], [
-    //     [120.585111, 31.316084], [120.585111, 31.316084], [120.589488, 31.313197], [120.585422, 31.313005]
+        [120.585111, 31.316084], [120.585111, 31.316084], [120.589488, 31.313197], [120.585422, 31.313005]
-    //   ]);
+      ]);
-    //   return isPointInRing
+      return isPointInRing
-    // },
+    },
-    // setLocation() { // 开启定位服务
+    setLocation() { // 开启定位服务
-    //   // this.map.addControl(this.geolocation); // 添加定位图标 自动跳转当前位置
+      // this.map.addControl(this.geolocation); // 添加定位图标 自动跳转当前位置
-    //   if (!this.current_lng || !this.current_lat) {
+      if (!this.current_lng || !this.current_lat) {
-    //     this.getLocation()
+        this.getLocation()
-    //   } else {
+      } else {
-    //     // 使用纠正偏移后的地址，打一个定位标记
+        // 使用纠正偏移后的地址，打一个定位标记
-    //     var marker = new AMap.Marker({
+        var marker = new AMap.Marker({
-    //       position: new AMap.LngLat(this.current_lng, this.current_lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+          position: new AMap.LngLat(this.current_lng, this.current_lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
-    //     });
+        });
-    //     this.map.add(marker);
+        this.map.add(marker);
-    //     // 定位到地图中心-西园寺
+        // 定位到地图中心-西园寺
-    //     this.map.setCenter([120.587334, 31.314823]);
+        // this.map.setCenter([120.587334, 31.314823]);
-    //     // 判断是否在范围内
+        this.map.setZoomAndCenter(this.zoom, [this.current_lng, this.current_lat]);
-    //     if (!this.isPointInRing()) {
+        // 判断是否在范围内
-    //       this.dialog_show = true;
+        // if (!this.isPointInRing()) {
-    //       this.dialog_text = '您不在景区范围内';
+        //   this.dialog_show = true;
-    //     }
+        //   this.dialog_text = '您不在景区范围内';
-    //   }
+        // }
-    // },
+      }
+    },
     getLocation() { // 获取经纬度
       AMap.plugin(['AMap.Geolocation'], () => {
         this.geolocation = new AMap.Geolocation(this.location_options);
@@ -570,6 +561,19 @@ export default {
           }
         })
       });
+      // 微信获取地址
+      wx.getLocation({
+        type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
+        success: (res) => {
+          var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
+          var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
+          var speed = res.speed; // 速度，以米/每秒计
+          var accuracy = res.accuracy; // 位置精度
+          this.current_lng = GPS.gcj_encrypt(latitude, longitude).lon;
+          this.current_lat = GPS.gcj_encrypt(latitude, longitude).lat;
+          console.warn(this.current_lng, this.current_lat);
+        }
+      });
     },
     setZoom(type) { // 设置放大缩小地图
       const zoom = this.map.getZoom();
@@ -946,10 +950,6 @@ export default {
       this.map.setZoomAndCenter(this.zoom, [item.position[0], item.position[1] + 0.000300]);
       //
       this.show_nav_popup = false;
-      // 禁止缩放
-      this.map.setStatus({
-        zoomEnable: false
-      });
     },
     setInfoWindows(item) {
       // 此时需要把组件的样式设置为可见
@@ -1050,32 +1050,23 @@ export default {
     closeInfoWindow() {
       if (this.showInfoWindow) {
         this.$refs['infoWindow'].close();
-        // 打开缩放
-        this.map.setStatus({
-          zoomEnable: true
-        });
       }
       if (this.showInfoWindowLite) {
         this.$refs['infoWindowLite'].close();
-        // 打开缩放
-        this.map.setStatus({
-          zoomEnable: true
-        });
       }
       if (this.showInfoWindowWarn) {
         this.$refs['infoWindowWarn'].close();
-        // 打开缩放
-        this.map.setStatus({
-          zoomEnable: true
-        });
       }
       if (this.showInfoWindowYard) {
         this.$refs['infoWindowYard'].close();
-        // 打开缩放
-        this.map.setStatus({
-          zoomEnable: true
-        });
       }
+      // 打开缩放
+      this.map.setStatus({
+        zoomEnable: true
+      });
+    },
+    closeMember () {
+      this.show_member_popup = false;
     },
     onPlay (name) {
       // var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
@@ -1300,7 +1291,7 @@ export default {
 }
 .popup-wrapper {
-  margin-top: 1rem;
+  margin: 1rem;
   .title {
     font-size: 1.25rem;
@@ -1341,4 +1332,50 @@ export default {
   font-size: 0.8rem;
 }
+.van-cell-group--inset {
+  margin: 0 0.466667vw;
+  border-radius: 2.133333vw;
+  overflow: hidden;
+}
+.van-cell-group {
+  background: '#fff';
+}
+.van-cell {
+  position: relative;
+  display: flex;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 2.666667vw 4.266667vw;
+  overflow: hidden;
+  color: #323233;
+  font-size: 3.733333vw;
+  line-height: 6.4vw;
+  background: #fff;
+}
+
+.van-cell__title, .van-cell__value {
+  flex: 1;
+}
+
+.van-cell__value {
+  position: relative;
+  overflow: hidden;
+  color: #969799;
+  text-align: right;
+  vertical-align: middle;
+  word-wrap: break-word;
+}
+
+.van-cell:after {
+  position: absolute;
+  box-sizing: border-box;
+  content: " ";
+  pointer-events: none;
+  right: 4.266667vw;
+  bottom: 0;
+  left: 4.266667vw;
+  border-bottom: 1px solid #ebedf0;
+  transform: scaleY(.5);
+}
+
 </style>