feat: ✨ 商家端使用最新地址选择器，默认在config关闭高德地图功能，开启后可继续使用

seller/src/views/my-components/map/index.vue

@@ -1,31 +1,23 @@
 <template>
   <div class="map">
-    <Modal v-model="showMap" title="选择地址" width="800">
-      <div class="address">{{ addrContent.address }}</div>
-      <div id="map-container"></div>
 
-      <div class="search-con">
-        <Input
-          placeholder="输入关键字搜索"
-          id="input-map"
-          v-model="mapSearch"
-        />
-        <ul>
-          <li
-            v-for="(tip, index) in tips"
-            :key="index"
-            @click="selectAddr(tip.location)"
-          >
-            <p>{{ tip.name }}</p>
-            <p>{{ tip.district + tip.address }}</p>
-          </li>
-        </ul>
-      </div>
-      <div slot="footer">
-        <Button type="default" @click="showMap = false">取消</Button>
-        <Button type="primary" :loading="loading" @click="ok">确定</Button>
-      </div>
-    </Modal>
+    <div class="address">{{ addrContent.address }}</div>
+    <div id="map-container"></div>
+
+    <div class="search-con">
+      <Input placeholder="输入关键字搜索" id="input-map" v-model="mapSearch" />
+      <ul>
+        <li v-for="(tip, index) in tips" :key="index" @click="selectAddr(tip.location)">
+          <p>{{ tip.name }}</p>
+          <p>{{ tip.district + tip.address }}</p>
+        </li>
+      </ul>
+    </div>
+    <div slot="footer" class="footer">
+
+      <Button type="primary" :loading="loading" @click="ok">确定</Button>
+    </div>
+
   </div>
 </template>
 <script>
@@ -56,21 +48,25 @@ export default {
   },
   methods: {
     ok() {
-      // 确定选择
-      this.loading = true;
-      const params = {
-        cityCode: this.addrContent.regeocode.addressComponent.citycode,
-        townName: this.addrContent.regeocode.addressComponent.township,
-      };
-      getRegion(params).then((res) => {
-        if (res.success) {
-          this.addrContent.addr = res.result.name.replace(/,/g, " ");
-          this.addrContent.addrId = res.result.id;
-          this.loading = false;
-          this.showMap = false;
-          this.$emit("getAddress", this.addrContent);
-        }
-      });
+
+      if (this.addrContent && this.addrContent.regeocode) {
+        const params = {
+          cityCode: this.addrContent.regeocode.addressComponent.citycode,
+          townName: this.addrContent.regeocode.addressComponent.township,
+        };
+        getRegion(params).then((res) => {
+          if (res.success) {
+            this.addrContent.addr = res.result.name.replace(/,/g, " ");
+            this.addrContent.addrId = res.result.id;
+            this.loading = false;
+
+            this.$emit("getAddress", this.addrContent);
+          }
+        });
+      } else {
+        this.$Message.error('未获取到坐标信息！请查看高德API配置是否正确')
+      }
+
     },
     init() {
       AMapLoader.load({
@@ -122,7 +118,7 @@ export default {
             that.addrContent = positionResult;
           });
         })
-        .catch((e) => {});
+        .catch((e) => { });
     },
     searchOfMap(val) {
       // 地图搜索
@@ -162,16 +158,20 @@ export default {
   right: 20px;
   top: 64px;
   width: 260px;
+
   ul {
     width: 260px;
-    height: 400px;
+    height: 360px;
     overflow: scroll;
+
     li {
       padding: 5px;
+
       p:nth-child(2) {
         color: #999;
         font-size: 12px;
       }
+
       &:hover {
         background-color: #eee;
         cursor: pointer;
@@ -185,4 +185,9 @@ export default {
   // color: $theme_color;
   font-weight: bold;
 }
+
+.footer {
+  text-align: right;
+  margin: 10px 0;
+}
 </style>

seller/src/views/my-components/map/multiple-map.vue

@@ -0,0 +1,143 @@
+<template>
+  <Modal width="800" footer-hide v-model="enableMap">
+    <RadioGroup @on-change="changeMap" v-model="mapDefault" type="button">
+      <Radio label="select">级联选择</Radio>
+      <Radio label="map" v-if="aMapSwitch">高德地图</Radio>
+    </RadioGroup>
+    <div>
+      <div v-if="mapDefault === 'select'">
+        <div class="selector">
+          <div class="selector-item" v-for="(plant, plantIndex) in Object.keys(data)" :key="plantIndex">
+            <div :class="{ 'active': chiosend[plantIndex].id == item.id }" v-for="(item, index) in data[plant]"
+              :key="index"
+              @click="init(item, plantIndex != Object.keys(data).length - 1 ? Object.keys(data)[plantIndex + 1] : 0, plantIndex)"
+              class="map-item">
+              {{ item.name }}
+            </div>
+          </div>
+
+        </div>
+        <div class="footer">
+          <Button type="primary" @click="finished">确定</Button>
+        </div>
+      </div>
+      <mapping v-if="mapDefault === 'map'" ref="map" @getAddress="getAddress" />
+
+    </div>
+
+
+  </Modal>
+</template>
+
+<script>
+import { aMapSwitch } from '@/config/index'
+import mapping from "@/views/my-components/map/index.vue";
+import * as API_Setup from "@/api/common.js";
+export default {
+  components: { mapping },
+  data() {
+    return {
+      aMapSwitch,
+      enableMap: false,
+      mapDefault: "select",
+      data: {
+        province: [], //省
+        city: [], //市
+        area: [], //区
+        street: [], //街道
+      },
+      chiosend: [],
+
+    };
+  },
+  mounted() {
+
+    this.chiosend = new Array(4).fill("");
+
+  },
+  methods: {
+    open() {
+      this.enableMap = true
+      this.init({ id: 0 }, 'province');
+    },
+    changeMap(val) {
+      this.mapDefault = val
+
+
+    },
+    init(val, level = 'province', index) {
+      if (level == 0) {
+        // 说明选择到了街道，将街道id存入数组
+        this.chiosend.splice(3, 1, val);
+      }
+      else {
+        API_Setup.getChildRegion(val.id).then((res) => {
+          if (res.result.length && val.id !== 0) {
+            this.chiosend[index] = val
+          }
+          this.data[level] = res.result;
+          if (level == 'city') {
+            this.data.area = []
+            this.data.street = []
+          }
+          if (level == 'area') {
+            this.data.street = []
+          }
+        });
+      }
+    },
+    getAddress(center) {
+      this.$emit('callback', {
+        type: this.mapDefault,
+        data: center
+      })
+      this.enableMap = false;
+    },
+    // 选择完成
+    finished() {
+      const params = this.chiosend.filter((item) => item.value !== "");
+      this.enableMap = false;
+      this.$emit('callback', {
+        type: this.mapDefault,
+        data: params
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.selector {
+
+
+  height: 400px;
+  padding: 10px 0;
+  display: flex;
+}
+
+.selector-item {
+  width: 100%;
+  flex: 1;
+  overflow: auto;
+}
+
+.map-item {
+  width: 100%;
+  padding: 10px;
+  border-bottom: 1px solid #eee;
+  cursor: pointer;
+
+  &:hover {
+    background: #eee;
+  }
+}
+
+.active {
+  background: #eee;
+}
+
+.footer {
+  text-align: right;
+  margin: 10px 0;
+}
+</style>