task#5914 添加报备页面，地图页面

src/views/report/addressMap.vue

@@ -0,0 +1,206 @@
+<template>
+  <div class="address_wrap">
+    <div class="map_wrap" id="mapId">
+    </div>
+    <div class="button_wrap">
+      <div class="cancel_btn" @click="cancelHandler">取消</div>
+      <div class="confirm_btn" @click="successHandler">完成</div>
+    </div>
+    <div class="search_wrap">
+      <div class="section">
+        <input type="text" v-model="keyword" @change="searchHandler" placeholder="请输入地址" />
+      </div>
+      <div class="server_list" v-if="keyword">
+        <div class="text_box" v-for="(item, index) in addressList" :key="index" @click="chooseHandler(item, index)" :class="{'active': index == activeIndex}">
+          <div class="address_name">{{ item.name }}</div>
+          <div class="address_detail">{{ ( item.district || '' ) + ( item.address || '' ) }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { searchFun } from '@/utils/map'
+  export default {
+    name: "addressMap",
+    data() {
+      return {
+        keyword: '',
+        addressList: [],
+        activeIndex: '',
+        map: '',
+        marker: null,
+      }
+    },
+    watch: {
+      keyword() {
+        this.searchHandler()
+      }
+    },
+    async mounted() {
+      sessionStorage.setItem('reportAddress', '')
+      await this.initMap()
+    },
+    methods: {
+      initMap() {   // 初始化地图
+        this.map = new AMap.Map('mapId', {
+          viewMode: '2D',  // 默认使用 2D 模式
+          zoom:11,  //初始化地图层级
+        })
+      },
+      async searchHandler() {
+        this.activeIndex = null
+        if( this.keyword ) {
+          this.addressList = await searchFun(this.map, '', this.keyword)
+          this.addressList = this.addressList.filter(item => !!item.location)
+        } else {
+          this.addressList = []
+        }
+      },
+      chooseHandler(item, index) {
+        this.activeIndex = index;
+        this.addMarker()
+      },
+      addMarker() {
+        if( this.marker ) {
+          this.map.remove(this.marker)
+        }
+        let content = '<div class="dest-position"></div>';
+        let activeObj = this.addressList[this.activeIndex];
+        this.marker = new AMap.Marker({
+          position: new AMap.LngLat( activeObj.location.lng, activeObj.location.lat ),
+          content: content,
+          offset: new AMap.Pixel(-13, -30)
+        });
+        this.map.add(this.marker)
+        this.map.setCenter([activeObj.location.lng, activeObj.location.lat])
+      },
+      successHandler() {
+        if( this.activeIndex == null ) {
+          this.$toast('请选择具体地址')
+          return
+        }
+        let activeObj = this.addressList[this.activeIndex];
+        let _tempObj = {
+          startPoiAddress: activeObj?.district + activeObj?.address + activeObj?.name,
+          startLat: activeObj?.location?.lat,
+          startLng: activeObj?.location?.lng,
+          adCode: activeObj?.adcode,
+        }
+        sessionStorage.setItem('reportAddress', JSON.stringify(_tempObj))
+        setTimeout(() => {
+          this.$router.go(-1)
+        }, 1)
+      },
+      // 取消 返回上一页
+      cancelHandler() {
+        this.$router.go(-1)
+      },
+    }
+  }
+</script>
+<style>
+  .dest-position {
+    width: 30px;
+    height: 36px;
+    background-size: 100% 100%;
+    background-image: url("~@/assets/report/destMarker.png");
+  }
+</style>
+<style scoped lang="scss">
+  .address_wrap {
+    height: 100%;
+  }
+  .map_wrap {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 60%;
+    z-index: -1;
+  }
+  .button_wrap {
+    width: 100%;
+    padding: 5px;
+    box-sizing: border-box;
+    zoom: 1;
+    position: fixed;
+    top: 0;
+    .cancel_btn {
+      width: 50px;
+      height: 27px;
+      background: #F37877;
+      font-size: 12px;
+      text-align: center;
+      line-height: 27px;
+      color: #fff;
+      border-radius: 3px;
+      float: left;
+    }
+    .confirm_btn {
+      width: 50px;
+      height: 27px;
+      background: rgba(5,193,98,1);
+      font-size: 12px;
+      text-align: center;
+      line-height: 27px;
+      color: #fff;
+      border-radius: 3px;
+      float: right;
+    }
+  }
+  .search_wrap {
+    background-color: #fff;
+    position: fixed;
+    width: 100%;
+    height: 60%;
+    bottom: 0;
+    left: 0;
+    overflow: auto;
+    .section {
+      height: 35px;
+      width: 100%;
+      background-color: #fff;
+      position: fixed;
+      top: 40%;
+      padding-top: 10px;
+      input {
+        width: 90%;
+        margin: 0 auto;
+        display: block;
+        border: none;
+        height: 30px;
+        border-radius: 3px;
+        padding: 0 10px;
+        background: #e2e0e0;
+        font-size: 14px;
+      }
+    }
+    .server_list {
+      overflow-y: auto;
+      padding-top: 30px;
+      .text_box {
+        margin: 10px 25px;
+        padding-top: 10px;
+        .address_name {
+          font-size: 14px !important;
+          color: rgba(0,0,0,0.8);
+        }
+        .address_detail {
+          margin-top: 3px;
+          color: #c3c3c3 !important;
+          font-size: 12px !important;
+        }
+      }
+      .active {
+        .address_name {
+          color: green !important;
+        }
+        .address_detail {
+          color: green !important;
+        }
+      }
+    }
+  }
+</style>