积分超市店铺位置

project/fengdu/app/AppIntegratingSupermarket/components/AddStore.vue

@@ -24,6 +24,13 @@
                 <el-radio label="1">仅指定网格可见</el-radio>
               </el-radio-group>
             </el-form-item>
+            <el-form-item label="店铺地点" style="width: 100%;" prop="address" :rules="[{required: true, message: '请选择店铺地点', trigger: 'change'}]">
+              <el-input v-model="form.address" disabled size="small">
+                <template slot="append">
+                  <el-button @click="showMap = true">选择位置</el-button>
+                </template>
+              </el-input>
+            </el-form-item>
             <el-form-item label="选择网格" v-if="form.serviceType === '1'" style="width: 100%;" label-width="120px"  prop="visibleNames" :rules="[{ required: true, message: '请选择网格', trigger: 'change' }]">
               <ai-picker
                 :instance="instance"
@@ -178,6 +185,24 @@
           </el-table-column>
         </ai-table>
       </ai-dialog>
+
+      <ai-dialog title="地图" :visible.sync="showMap" @opened="initMap" :destroyOnclose="false" width="800px" class="mapDialog" @onConfirm="selectMap">
+        <div id="map"></div>
+        <el-form label-width="80px" style="padding: 10px 20px 0 20px;">
+          <el-row type="flex" justify="space-between">
+            <el-form-item label="经度">
+              <el-input disabled size="small" v-model="placeDetail.lng"></el-input>
+            </el-form-item>
+            <el-form-item label="纬度">
+              <el-input disabled size="small" v-model="placeDetail.lat"></el-input>
+            </el-form-item>
+          </el-row>
+        </el-form>
+        <el-input id="searchPlaceInput" size="medium" class="searchPlaceInput" clearable v-model="searchPlace" autocomplete="on" @change="placeSearch.search(searchPlace)" placeholder="请输入关键字">
+          <el-button type="primary" slot="append" @click="placeSearch.search(searchPlace)">搜索</el-button>
+        </el-input>
+        <div id="searchPlaceOutput" />
+      </ai-dialog>
     </template>
     <template #footer>
       <el-button @click="cancel">取消</el-button>
@@ -187,6 +212,7 @@
 </template>
 
 <script>
+  import AMapLoader from '@amap/amap-jsapi-loader'
   export default {
     name: 'AddStore',
 
@@ -205,7 +231,8 @@
           serviceType: '0',
           visibleNames: '',
           girdList: [],
-          goodsList: []
+          goodsList: [],
+          address: ''
         },
         girdList: [],
         id: '',
@@ -237,7 +264,19 @@
           { prop: 'onlineTime',  label: '上架时间', align: 'center' },
           { prop: 'status', width: 90,  label: '状态', align: 'center', format: v => this.dict.getLabel('integralSGStatus', v) }
         ],
-        chooseList: []
+        chooseList: [],
+        mapDetail: null,
+        map: null,
+        placeSearch: null,
+        placeDetail: {
+          lng: '',
+          lat: '',
+          address: ''
+        },
+        lng: '',
+        lat: '',
+        showMap: false,
+        searchPlace: '',
       }
     },
 
@@ -253,6 +292,83 @@
     },
 
     methods: {
+      selectMap() {
+        this.form.lng = this.placeDetail.lng
+        this.form.lat = this.placeDetail.lat
+        this.form.address = this.placeDetail.address
+        this.showMap = false
+      },
+      initMap() {
+        if (this.map) return
+        AMapLoader.load({
+          key: '54a02a43d9828a8f9cd4f26fe281e74e',
+          version: '2.0',
+          plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete', 'AMap.Geocoder'],
+        }).then((AMap) => {
+          this.map = new AMap.Map('map', {
+            resizeEnable: true,
+            zooms: [6, 20],
+            center: this.form.lng ? [this.form.lng, this.form.lat] : [this.lng, this.lat],
+            zoom: 11,
+          })
+          this.placeSearch = new AMap.PlaceSearch({ map: this.map })
+          new AMap.AutoComplete({
+            input: 'searchPlaceInput',
+            output: 'searchPlaceOutput',
+          }).on('select', (e) => {
+            if (e?.poi) {
+              this.placeSearch.setCity(e.poi.adcode)
+              this.movePosition(e.poi.location)
+            }
+          })
+          this.map.on('click', (e) => {
+            console.log(e)
+            new AMap.Geocoder().getAddress(e.lnglat, (sta, res) => {
+              if (res?.regeocode) {
+                console.log(res)
+                this.placeDetail = {
+                  lng: e.lnglat?.lng,
+                  lat: e.lnglat?.lat,
+                  address: res.regeocode.formattedAddress,
+                }
+              }
+            })
+            this.movePosition(e.lnglat)
+          })
+        })
+      },
+      movePosition(center) {
+        if (this.map) {
+          this.map.clearMap()
+          this.map.panTo(center)
+          this.map.add([
+            new AMap.Marker({
+              position: center,
+              clickable: true,
+            }),
+          ])
+          this.map.setFitView()
+        }
+      },
+      getMap(lng,lat,address) {
+        AMapLoader.load({
+          key: '54a02a43d9828a8f9cd4f26fe281e74e',
+          version: '2.0',
+          plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete', 'AMap.Geocoder'],
+        }).then((AMap) => {
+          this.mapDetail = new AMap.Map(document.getElementById("mapDetail"), {
+            resizeEnable: true,
+            zooms: [6, 20],
+            zoom: 11,
+            center:[lng,lat],
+          })
+          let marker = new AMap.Marker({
+            position: new AMap.LngLat(lng,lat),
+            title: address
+          })
+          this.mapDetail.add(marker);
+        })
+      },
       getList () {
         this.instance.post(`/app/appintegralsupermarketgoods/list`, null, {
           params: {
@@ -352,6 +468,9 @@
                 girdName: v.visibleName
               }
             })
+            this.placeDetail.lng = res.data.lng
+            this.placeDetail.lat = res.data.lat
+            this.getMap(this.info.lng,this.info.lat,this.info.address)
           }
         })
       },