feat 门店

src/App.vue

@@ -11,6 +11,9 @@ import { defineComponent, nextTick, onMounted, provide, ref, watch } from 'vue'
 import { useRouter } from 'vue-router';
 import emitter from '@/util/eventBus'
 import { message } from 'ant-design-vue';
+window._AMapSecurityConfig = {
+  securityJsCode: '23cf1bca0e52bbf8cb129047cdb46f10',
+}
 const router = useRouter()
 let nickName = ref<string>('')
 let avatar = ref<string>('https://joeschmoe.io/api/v1/random')

src/components/MapContainer.vue

@@ -0,0 +1,55 @@
+<script setup lang='ts'>
+import { onMounted, ref } from 'vue'
+import { shallowRef } from '@vue/reactivity'
+import AMapLoader from '@amap/amap-jsapi-loader';
+let map = shallowRef(null);
+const emit = defineEmits(["getMapData"]);
+const initMap = () => {
+  AMapLoader.load({
+    key: "21132ea36aed6ab1884085a836f12ca9",             // 申请好的Web端开发者Key，首次调用 load 时必填
+    version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+    plugins: ['AMap.ToolBar', 'AMap.Driving'],
+    AMapUI: {
+      version: "1.1",
+      plugins: ['misc/PositionPicker'],
+
+    },
+    Loca: {
+      version: "2.0.0"
+    }
+  }).then((AMap) => {
+    AMapUI.loadUI(['misc/PositionPicker'], (PositionPicker: new (arg0: { mode: string; map: any; }) => any) => {
+      map = new AMap.Map("container", {  //设置地图容器id
+        viewMode: "3D",    //是否为3D地图模式
+        zoom: 16,           //初始化地图级别
+        center: [120.67012, 31.266833], //初始化地图中心点位置
+      });
+      let positionPicker = new PositionPicker({
+        mode: 'dragMarker',
+        map: map
+      });
+      positionPicker.on('success', (positionResult: any) => {
+        console.log('positionResult:', positionResult);
+        emit('getMapData',JSON.stringify(positionResult))
+      });
+      positionPicker.start();
+    })
+  }).catch((e: String) => {
+    console.log(e);
+  })
+}
+onMounted(() => {
+  initMap()
+})
+</script>
+<template>
+  <div id="container"></div>
+</template>
+<style lang='scss' scoped>
+#container {
+  padding: 0px;
+  margin: 0px;
+  width: 100%;
+  height: 80vh;
+}
+</style>

src/views/management/shop/shop.vue

@@ -2,7 +2,10 @@
 import { onMounted, reactive, ref } from 'vue'
 import { shopList, deleteShop, getShopDetail, getProductList } from '@/api'
 import { message } from 'ant-design-vue';
+import MapContainer from "@/components/MapContainer.vue";
+
 let visible = ref<Boolean>(false)
+let showMap = ref<Boolean>(true)
 let title = ref<String>('新增门店')
 let deliveries = reactive({
   arr: [{
@@ -40,6 +43,12 @@ interface formType {
   address: String;
   poiAddress: String;
   street: String;
+  provinceName: String;
+  cityName: String;
+  cityCode: String;
+  districtName: String;
+  lng?: Number;
+  lat?: Number
 }
 let form = reactive<formType>({
   name: '',
@@ -49,6 +58,10 @@ let form = reactive<formType>({
   address: '',
   poiAddress: '',
   street: '',
+  provinceName: '',
+  cityName: '',
+  cityCode: '',
+  districtName: '',
 })
 const columns = reactive([
   {
@@ -187,6 +200,20 @@ const showStatus = (bindStatus: Number, authMsg: String) => {
 const confirm = () => {
 
 }
+const getMapData = (v: string) => {
+  let mapData = JSON.parse(v)
+  console.log('地图数据：', mapData);
+  let regeocode = mapData.regeocode
+  let poi = regeocode.pois[0]
+  form.address = poi.name
+  form.poiAddress = poi.address
+  form.provinceName = regeocode.addressComponent.province
+  form.cityName = regeocode.addressComponent.city
+  form.cityCode = regeocode.addressComponent.citycode
+  form.districtName = regeocode.addressComponent.district
+  form.lng = poi.location[0]
+  form.lat = poi.location[1]
+}
 onMounted(() => {
 
 })
@@ -251,14 +278,8 @@ onMounted(() => {
       <a-form-item label="详细地址" name="address">
         <!-- <a-input v-model:value="form.address" /> -->
         <a-input-group compact>
-          <a-input v-model:value="address" style="width: calc(100% - 200px)" />
-          <a-tooltip title="copy git url">
-            <a-button>
-              <template #icon>
-                <CopyOutlined />
-              </template>
-            </a-button>
-          </a-tooltip>
+          <a-input v-model:value="address" style="width: calc(100% - 32px)" placeholder="请点击右侧图标选择详细地址" />
+          <img src="@/assets/images/23.png" class="cursor-pointer w-32px h-32px" alt="">
         </a-input-group>
       </a-form-item>
       <a-form-item label="门牌号" name="street">
@@ -289,6 +310,9 @@ onMounted(() => {
       </a-form-item>
     </a-form>
   </a-modal>
+  <a-modal v-model:visible="showMap" title="选择地址" :footer="null" width="1000px" style="top:20px;">
+    <MapContainer @getMapData="getMapData"></MapContainer>
+  </a-modal>
 </template>
 <style lang='scss' scoped>
 .category_box {