map

src/saas/AppConflictMediation/add.vue

@@ -80,8 +80,8 @@
           </div>
         </div>
         <div class="flow-option">
-          <div class="byself" :class="!form.opts? 'current': ''" @click="form.opts = 0">自己结办</div>
-          <div class="report" :class="form.opts? 'current': ''" @click="form.opts = 1">上报处理</div>
+          <div class="byself" :class="!form.opts? 'current': ''" @click="form.opts = 2">自己结办</div>
+          <div class="report" :class="form.opts? 'current': ''" @click="form.opts = 0">上报处理</div>
         </div>
       </div>
     </div>
@@ -142,7 +142,7 @@
           flag: false,
           result: '',
           resultFiles: [],
-          opts: 1,
+          opts: 0,
           name: ''
         },
         dictList: [],
@@ -165,36 +165,7 @@
 
     methods: {
       chooseAddress () {
-        uni.authorize({
-          scope: 'scope.userLocation',
-          success: () => {
-            uni.chooseLocation({
-              success: res => {
-                this.form.address = res.address
-                this.form.lat = res.latitude
-                this.form.lng = res.longitude
-              }
-            })
-          },
-          fail: () => {
-            this.$dialog.confirm({
-              content: '您未授权定位权限，无法选择位置'
-            }).then(() => {
-              wx.openSetting({
-                success: res => {
-                  if (!res.authSetting['scope.userLocation']) {
-                    this.$dialog.alert({
-                      content: '您未授权定位权限，无法选择位置'
-                    }).then(() => {
-                    })
-                  } else {
-                    console.log('设置定位权限')
-                  }
-                }
-              })
-            })
-          }
-        })
+        uni.navigateTo({ url: './map' })
       },
 
       confirmSelect(e) {

src/saas/AppConflictMediation/map.vue

@@ -0,0 +1,173 @@
+<template>
+  <div class="map">
+    <div class="build-btn">
+      <!-- <img src="./components/img/model-icon.png" alt="" @click="toDetail"> 楼栋<br/>模型 -->
+    </div>
+    <div class="build-btn locate">
+      <img src="https://cdn.cunwuyun.cn/dvcp/h5/Location2.png" alt="" @click="getLocale"/>
+      当前<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']"/>
+    </div>
+    <div class="footer">
+      <div class="btn" @click="confirm">确认定位</div>
+    </div>
+  </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()
+  },
+  onShow() {
+    document.title = "以房找人"
+  },
+  methods: {
+    initMap() {  //初始化地图
+      this.$nextTick(() => {
+        let {map, retryTimes} = this
+        if (map) {
+          map.setZoom(15)
+          map.on("click", (evt) => {
+            this.handleMapClick(evt)
+          });
+        } else {
+          if (retryTimes < 5)
+            setTimeout(() => {
+              this.retryTimes++
+              this.initMap()
+            }, 1000)
+        }
+      })
+    },
+    getLocale() {
+      wx.getLocation({
+        type: 'gcj02',
+        success: res => {
+          let {latitude: lat, longitude: lng} = res
+          this.handleMapClick({latlng: {lat, lng}})
+        }
+      })
+    },
+    handleMapClick(evt) {
+      let {lib: TMap, map} = this
+      if (this.markerLayer) {
+        this.markerLayer.setMap(null);
+      }
+      this.markerLayer = new TMap.MultiMarker({id: 'marker-layer', map});
+      this.markerLayer.add({
+        position: evt.latLng
+      });
+      this.latLng = evt.latlng
+    },
+    confirm() {
+      if (!this.latLng.lat) {
+        return this.$u.toast(`未获取到定位信息，无法定位`)
+      }
+      let {id} = this.$route.query
+      this.$http.post(`/app/appcommunitybuildinginfo/updateLocation`, null, {
+        params: {id, ...this.latLng}
+      }).then(res => {
+        if (res?.code == 0) {
+          this.$u.toast('提交成功')
+          uni.$emit('updateList')
+          setTimeout(() => {
+            uni.navigateBack({})
+          }, 600)
+        }
+      })
+    },
+    toDetail() {
+      uni.navigateTo({url: `./detail?id=${this.$route.query.id}`})
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+uni-page-body {
+  height: 100%;
+}
+
+.map {
+  height: 100vh;
+
+  .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;
+
+    &.locate {
+      transform: translateY(calc(-100% - 20px));
+    }
+
+    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>