BUG 25784

src/apps/AppBuilding/map.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="map">
+    <div class="build-btn">
+      <img src="./components/img/model-icon.png" alt="" @click="toDetail"> 楼栋<br/>模型
+    </div>
+    <div class="map-content">
+      <AiTMap v-if="user.areaId" :areaId="user.areaId" :map.sync="map" :lib.sync="lib" :ops="ops" :libraries="['service', 'tools']"></AiTMap>
+    </div>
+    <div class="footer">
+      <div class="click" @click="isFlag=true">点击定位</div>
+      <div class="btn" @click="confirm">确认定位</div>
+    </div>
+    <!-- <u-popup v-model="show" mode="bottom" border-radius="14">
+      <div class="popup">
+        <div class="bg"></div>
+        <div class="title">恒大城西社区居委会</div>
+        <p class="address">山东省济南市历城区王舍人街道恒大商业广场蓝天新城</p>
+        <div class="info-flex">
+          <span class="label">所属社区</span>
+          <span class="value">后西一街袁集村</span>
+        </div>
+        <div class="info-flex">
+          <span class="label">所属小区</span>
+          <span class="value">蓝天新城世纪花园</span>
+        </div>
+        <div class="info-flex">
+          <span class="label">房屋类型</span>
+          <span class="value">单元(公寓)楼</span>
+        </div>
+        <div class="info-flex">
+          <span class="label">所属网格</span>
+          <span class="value">蓝天新城基础网格一</span>
+        </div>
+        <div class="info-flex">
+          <span class="label">网格管理员</span>
+          <span class="value">林珊珊</span>
+        </div>
+        <div class="info-flex">
+          <span class="label">楼栋长</span>
+          <span class="value">林珊珊&nbsp;&nbsp;13782951281
+            <img :src="$cdn + 'common/phone.png'" alt="" @click="call(item)" class="phone-icon">
+          </span>
+        </div>
+      </div>
+      <div class="popup-btn">查看楼栋模型</div>
+    </u-popup> -->
+  </div>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+
+export default {
+  data() {
+    return {
+      ops: {},
+      lib: null,
+      map: null,
+      markerLayer: '',
+      isFlag: false,
+      latLng: {lat: '', lng: ''},
+      retryTimes: 0
+    }
+  },
+  computed: {...mapState(['user'])},
+  mounted() {
+    this.initMap()
+  },
+  methods: {
+    initMap() {  //初始化地图
+      this.$nextTick(() => {
+        let {lib: TMap, map, retryTimes} = this
+        if (map) {
+          map.setZoom(15)
+          map.on("click", (evt) => {
+            if (this.markerLayer) {
+              this.markerLayer.setMap(null);
+            }
+
+            this.markerLayer = new TMap.MultiMarker({
+              id: 'marker-layer',
+              map: map
+            });
+            if (this.isFlag) {
+              this.markerLayer.add({
+                position: evt.latLng
+              });
+              this.latLng = {
+                lat: evt.latLng.lat,
+                lng: evt.latLng.lng
+              }
+            }
+
+          });
+        } else {
+          if (retryTimes < 5)
+            setTimeout(() => {
+              this.retryTimes++
+              this.initMap()
+            }, 1000)
+        }
+      })
+    },
+    confirm() {
+      if (!this.latLng.lat) {
+        return this.$u.toast(`未获取到定位信息，无法定位`)
+      }
+      let {id} = this.$route.query
+      this.$http.post(`/app/appcommunitybuildinginfo/updateLocation`, null, {
+        params: {
+          id,
+          lat: this.latLng.lat,
+          lng: this.latLng.lng,
+        }
+      }).then(res => {
+        if (res.code == 0) {
+          this.$u.toast('提交成功')
+          setTimeout(() => {
+            this.$emit('change', {
+              type: 'List',
+            })
+          }, 600)
+        }
+      })
+    },
+    toDetail() {
+      uni.navigateTo({url: `./detail?id=${this.$route.query.id}`})
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+uni-page-body {
+  height: 100%;
+}
+
+.map {
+  height: 100%;
+
+  .build-btn {
+    width: 80px;
+    height: 160px;
+    background: #FFF;
+    box-shadow: 0 4px 8px 0 rgba(138, 138, 138, 0.5);
+    border-radius: 8px;
+    position: fixed;
+    bottom: 136px;
+    right: 24px;
+    z-index: 99999;
+    padding: 16px 16px 0;
+    box-sizing: border-box;
+    font-size: 24px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #666;
+    line-height: 30px;
+
+    img {
+      width: 48px;
+      height: 48px;
+      margin-bottom: 8px;
+    }
+  }
+
+  .map-content {
+    width: 100%;
+    height: 100%;
+  }
+
+  .footer {
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 99999;
+    display: flex;
+    font-size: 32px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    height: 112px;
+    line-height: 112px;
+    text-align: center;
+
+    .click {
+      flex: 1;
+      color: #333;
+      background-color: #fff;
+    }
+
+    .btn {
+      flex: 2;
+      background: #1365DD;
+      color: #FFF;
+    }
+  }
+}
+</style>