事件上报

src/project/wuxi/AppHandSnapshot/Add.vue

@@ -12,7 +12,7 @@
 
         <div class="line"></div>
         <u-form-item label="上报位置" prop="mapInfo" required :border-bottom="false" right-icon="arrow-right" class="border">
-          <span @click="show = true" class="right-span" :style="forms.mapInfo.name ? '' : 'color:#999;'">{{ forms.mapInfo.name || '请选择上报位置' }}</span>
+          <span @click="toMap" class="right-span" :style="forms.mapInfo.address ? '' : 'color:#999;'">{{ forms.mapInfo.address || '请选择上报位置' }}</span>
         </u-form-item>
         <u-form-item label="所属网格" prop="girdName" required :border-bottom="false">
           <AiPagePicker type="gird" v-model="forms.girdId" @change="confirmGird" valueObj nodeKey="id" formType="2" class="right-span">
@@ -45,6 +45,7 @@
 </template>
 
 <script>
+import {mapState} from 'vuex'
 export default {
   name: 'Add',
   data() {
@@ -53,7 +54,7 @@ export default {
         groupName: '',
         groupId: '',
         content: '',
-        mapInfo: {},
+        mapInfo: {address: ''},
         girdId: '',
         girdName: '',
         files: [],
@@ -65,11 +66,19 @@ export default {
       myList: []
     }
   },
+  computed: {
+    ...mapState(['user']),
+  },
   onLoad() {
     this.typeList()
   },
   onShow() {
     document.title = '事件添加'
+    this.forms.name = this.user.name
+    this.forms.phone = this.user.phone
+    uni.$on('chooseLat', res => {
+      this.forms.mapInfo = {...res}
+    })
   },
   methods: {
     typeList() {
@@ -92,11 +101,40 @@ export default {
       this.forms.girdId = v.id
       this.forms.girdName = v.girdName
     },
-
+    toMap() {
+      uni.navigateTo({url: `./Map`})
+    },
     confirm() {
-      // if (this.status == 1 && !this.forms.name) {
-      //   //return this.$u.toast('请选择转交对象')
-      // }
+      if(this.flag) return
+
+      if (!this.forms.groupName) {
+        return this.$u.toast('请选择事件类型')
+      }
+      if (!this.forms.content) {
+        return this.$u.toast('请输入事件描述')
+      }
+      if (!this.forms.mapInfo.address) {
+        return this.$u.toast('请选择上报位置')
+      }
+      if (!this.forms.girdName) {
+        return this.$u.toast('请选择所属网格')
+      }
+      if (!this.forms.name) {
+        return this.$u.toast('请输入姓名')
+      }
+      if (!this.forms.phone) {
+        return this.$u.toast('请输入手机号')
+      }
+      this.flag = true
+      this.$http.post(``).then((res) => {
+        if (res.code == 0) {
+          this.$u.toast('事件添加成功')
+          uni.$emit('getListInit')
+          setTimeout(() => {
+            uni.navigateBack()
+          }, 600)
+        }
+      })
 
     },
 

src/project/wuxi/AppHandSnapshot/Map.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="map">
+    <!-- <div class="build-btn locate" @click="getLocale">
+      <img src="https://cdn.cunwuyun.cn/dvcp/h5/Location2.png" alt=""/>
+      当前<br>位置
+    </div> -->
+    <div class="map-content">
+      <AiTMap :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, mapActions} from 'vuex'
+
+export default {
+  data() {
+    return {
+      ops: {},
+      lib: null,
+      map: null,
+      markerLayer: '',
+      isFlag: false,
+      latLng: {lat: '', lng: ''},
+      address: ''
+    }
+  },
+  computed: {...mapState(['user'])},
+  mounted() {
+    this.initMap()
+  },
+  onShow() {
+    document.title = "选择上报位置"
+  },
+  methods: {
+    ...mapActions(['injectJWeixin']),
+    initMap(retryTimes = 0) {  //初始化地图
+      this.$nextTick(() => {
+        let {map} = this
+        if (map) {
+          map.setZoom(15)
+          map.on("click", (evt) => {
+            this.handleMapClick(evt)
+          });
+        } else {
+          if (retryTimes < 10)
+            setTimeout(() => {
+              this.initMap(++retryTimes)
+            }, 500)
+          else console.error("地图渲染失败")
+        }
+      })
+    },
+    getLocale() {
+      uni.getLocation({
+        type: 'wgs84',
+        geocode: true,
+        success: (res) => {
+          const lat = res.latitude;
+          const lng = res.longitude;
+          this.handleMapClick({latlng: {lat, lng}})
+        },
+      });
+    },
+    handleMapClick(evt) {
+      console.log(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
+      this.address = evt.poi.name
+    },
+    confirm() {
+      if (!this.latLng.lat) {
+        return this.$u.toast(`未获取到定位信息，无法定位`)
+      }
+
+      uni.$emit('chooseLat', {
+        lat: this.latLng.lat,
+        lng: this.latLng.lng, 
+        address: this.address
+      })
+      uni.navigateBack({
+        delta: 1
+      })
+    },
+  }
+}
+</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>