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

buyer/src/components/addressManage/index.vue

@@ -12,12 +12,8 @@
           <i-input v-model="formData.name" style="width: 600px"></i-input>
         </FormItem>
         <FormItem label="收件地区" prop="address">
-          <i-input
+          {{ formData.address || '暂无地址' }}
-            v-model="formData.address"
+          <Button type="primary" style="margin-left: 10px;" size="small" @click="$refs.map.open()">选择</Button>
-            disabled
-            style="width: 600px"
-          ></i-input>
-          <Button type="primary" size="small" @click="$refs.map.showMap = true">选择</Button>
         </FormItem>
         <FormItem label="详细地址" prop="detail">
           <i-input v-model="formData.detail" style="width: 600px"></i-input>
@@ -43,12 +39,12 @@
         <Button type="primary" class="mr_10" :loading="loading" @click="save">保存收货地址</Button>
       </div>
     </Modal>
-    <lili-map ref="map" @getAddress="getAddress"></lili-map>
+    <multipleMap ref="map" @callback="getAddress"></multipleMap>
   </div>
 </template>
 
 <script>
-import liliMap from '@/components/map';
+import multipleMap from "@/components/map/multiple-map";
 import {
   newMemberAddress,
   editMemberAddress,
@@ -129,14 +125,24 @@ export default {
         }
       });
     },
-    getAddress (item) {
+    getAddress (val) {
-      // 获取地图选择信息
+       // 获取地图选择信息
-      this.mapMsg = item;
+       if(val.type === 'select'){
-      this.$set(this.formData, 'address', item.addr);
+        const paths = val.data.map(item => item.name).join(',')
-      this.$set(this.formData, 'consigneeAddressIdPath', item.addrId);
+        const ids = val.data.map(item => item.id).join(',')
-      this.$set(this.formData, 'detail', item.detail);
+        this.$set(this.formData,'address',paths)
-      this.formData.lat = item.position.lat;
+        this.$set(this.formData,'consigneeAddressIdPath',ids)
-      this.formData.lon = item.position.lng;
+        const coord = val.data[val.data.length - 1].center.split(',')
+        this.formData.lat = coord[1]
+        this.formData.lon = coord[0]
+      }else{
+        this.$set(this.formData, "address", val.data.addr);
+        this.$set(this.formData, "consigneeAddressIdPath", val.data.addrId);
+        this.$set(this.formData, "detail", val.data.address);
+        this.formData.lat = val.data.position.lat;
+        this.formData.lon = val.data.position.lng;
+      }
+
     },
     show () { // 地址模态框显示
       this.showAddr = true;
@@ -158,7 +164,7 @@ export default {
     }
   },
   components: {
-    liliMap
+    multipleMap
   }
 };
 </script>

buyer/src/components/map/index.vue

@@ -1,114 +1,94 @@
 <template>
-  <div class="lili-map">
+  <div class="map">
-    <Modal v-model="showMap" title="选择地址" width="800">
+
-      <div class="address">{{ addrContent.address }}</div>
+    <div class="address">{{ addrContent.address }}</div>
-      <div id="map-container"></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 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>
 </template>
 <script>
-import AMapLoader from '@amap/amap-jsapi-loader';
+import AMapLoader from "@amap/amap-jsapi-loader";
-import { handleRegion } from '@/api/address.js';
+import { handleRegion } from "@/api/address.js";
 
+const config = require('@/config/index')
 export default {
-  name: 'map',
+  name: "map",
-  props: {
+  data() {
-    useApi: {
-      default: true,
-      type: Boolean
-    }
-  },
-  data () {
     return {
-      config:require('@/config'),
+      config,
-      showMap: false, // 展示地图
+      showMap: false, // 地图显隐
-      mapSearch: '', // 地图搜索
+      mapSearch: "", // 地图搜索
       map: null, // 初始化地图
       autoComplete: null, // 初始化搜索方法
       geocoder: null, // 初始化地理、坐标转化
       positionPicker: null, // 地图拖拽选点
-      tips: [], // 搜索关键字列表
+      tips: [], //搜索关键字列表
       addrContent: {}, // 回显地址信息
-      loading: false // 加载状态
+      loading: false, // 加载状态
     };
   },
   watch: {
-    // 监听搜索框搜索地图
     mapSearch: function (val) {
       this.searchOfMap(val);
-    }
+    },
   },
   methods: {
-    ok () {
+    ok() {
-      // 确定选择
+
-      this.loading = true;
+      if (this.addrContent && this.addrContent.regeocode) {
-      const address = this.addrContent.address;
+        const params = {
-      const township = this.addrContent.regeocode.addressComponent.township;
+          cityCode: this.addrContent.regeocode.addressComponent.citycode,
-      const index = address.indexOf(township) + township.length;
+          townName: this.addrContent.regeocode.addressComponent.township,
-      this.addrContent.detail = address.substring(index);
+        };
-      const params = {
-        cityCode: this.addrContent.regeocode.addressComponent.citycode,
-        townName: this.addrContent.regeocode.addressComponent.township
-      };
-      if (this.useApi) {
         handleRegion(params).then((res) => {
-          this.loading = false;
           if (res.success) {
-            this.showMap = false;
+            this.addrContent.addr = res.result.name.replace(/,/g, " ");
-            this.addrContent.addr = res.result.name.replace(/,/g, ' ');
             this.addrContent.addrId = res.result.id;
-            this.$emit('getAddress', this.addrContent);
+            this.loading = false;
+
+            this.$emit("getAddress", this.addrContent);
           }
         });
       } else {
-        this.loading = false;
+        this.$Message.error('未获取到坐标信息！请查看高德API配置是否正确')
-        this.showMap = false;
-        this.$emit('getAddress', this.addrContent);
       }
+
     },
-    init () { // 初始化地图
+    init() {
       AMapLoader.load({
         key: this.config.aMapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
-        version: '', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+        version: "", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
         plugins: [
-          'AMap.ToolBar',
+          "AMap.ToolBar",
-          'AMap.Autocomplete',
+          "AMap.Autocomplete",
-          'AMap.PlaceSearch',
+          "AMap.PlaceSearch",
-          'AMap.Geolocation',
+          "AMap.Geolocation",
-          'AMap.Geocoder'
+          "AMap.Geocoder",
         ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
         AMapUI: {
           // 是否加载 AMapUI，缺省不加载
-          version: '1.1', // AMapUI 缺省 1.1
+          version: "1.1", // AMapUI 缺省 1.1
-          plugins: ['misc/PositionPicker'] // 需要加载的 AMapUI ui插件
+          plugins: ["misc/PositionPicker"], // 需要加载的 AMapUI ui插件
-        }
+        },
       })
         .then((AMap) => {
           let that = this;
-          this.map = new AMap.Map('map-container', {
+          this.map = new AMap.Map("map-container", {
-            zoom: 12
+            zoom: 12,
           });
           that.map.addControl(new AMap.ToolBar());
           that.map.addControl(new AMap.Autocomplete());
@@ -117,15 +97,15 @@ export default {
 
           // 实例化Autocomplete
           let autoOptions = {
-            city: '全国'
+            city: "全国",
           };
           that.autoComplete = new AMap.Autocomplete(autoOptions); // 搜索
           that.geocoder = new AMap.Geocoder(autoOptions);
 
           that.positionPicker = new AMapUI.PositionPicker({
             // 拖拽选点
-            mode: 'dragMap',
+            mode: "dragMap",
-            map: that.map
+            map: that.map,
           });
           that.positionPicker.start();
           /**
@@ -134,38 +114,37 @@ export default {
            * 需要字段可以查找
            *
            */
-          that.positionPicker.on('success', function (positionResult) {
+          that.positionPicker.on("success", function (positionResult) {
-            // console.log(positionResult);
             that.addrContent = positionResult;
           });
         })
-        .catch((e) => {});
+        .catch((e) => { });
     },
-    searchOfMap (val) {
+    searchOfMap(val) {
       // 地图搜索
       let that = this;
       this.autoComplete.search(val, function (status, result) {
         // 搜索成功时，result即是对应的匹配数据
-        if (status === 'complete' && result.info === 'OK') {
+        if (status == "complete" && result.info == "OK") {
           that.tips = result.tips;
         } else {
           that.tips = [];
         }
       });
     },
-    selectAddr (location) {
+    selectAddr(location) {
       // 选择坐标
       if (!location) {
-        this.$Message.warning('请选择正确点位');
+        this.$Message.warning("请选择正确点位");
         return false;
       }
       const lnglat = [location.lng, location.lat];
       this.positionPicker.start(lnglat);
-    }
+    },
   },
-  mounted () {
+  mounted() {
     this.init();
-  }
+  },
 };
 </script>
 <style lang="scss" scoped>
@@ -179,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;
@@ -199,6 +182,12 @@ export default {
 
 .address {
   margin-bottom: 10px;
+  // color: $theme_color;
   font-weight: bold;
 }
+
+.footer {
+  text-align: right;
+  margin: 10px 0;
+}
 </style>

buyer/src/components/map/multiple-map.vue

@@ -0,0 +1,147 @@
+<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 "@/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.getRegion(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() {
+      if(!this.chiosend[0]){
+        this.$Message.error("请选择地址")
+        return
+      }
+      const params = this.chiosend.filter((item) => 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>

buyer/src/config/index.js

@@ -16,6 +16,7 @@ module.exports = {
   //FIXME 请检查当前高德key创建的日期，如果2021年12月02日之前申请的 无需填写安全密钥
   aMapSecurityJsCode:"2bd0fbf621881f4c77be74f0e76495f3", // 高德web端js申请的安全密钥
   aMapKey: "7f11113750315d8543daaf5c3ba353ca", //高德web端js申请的api key
+  aMapSwitch:false, //是否开启高德定位
   enableCDN: true, //生产环境 是否启用cdn加载 vue等js
   port: 10000, //端口
   inputMaxLength:'140' //全局输入框默认最大输入长度字

buyer/src/pages/home/orderCenter/AddAddress.vue

@@ -7,8 +7,9 @@
           <i-input v-model="formData.name" placeholder="请输入收件人姓名" style="width: 600px"></i-input>
         </FormItem>
         <FormItem label="收件地区" prop="address">
-          <i-input v-model="formData.address" disabled placeholder="请选择收货地址" style="width: 600px"></i-input>
+          <span>{{ formData.address || '暂无地址' }}</span>
-          <Button type="primary" size="small" @click="$refs.map.showMap = true">选择</Button>
+
+          <Button type="default" style="margin-left: 10px;" size="small" @click="$refs.map.open()">选择</Button>
         </FormItem>
         <FormItem label="详细地址" prop="detail">
           <i-input v-model="formData.detail" placeholder="请输入详细地址" style="width: 600px"></i-input>
@@ -29,14 +30,15 @@
       <Button type="primary" class="mr_10" :loading="loading" @click="save">保存收货地址</Button>
       <Button @click="$router.back()">返回</Button>
     </div>
-    <lili-map ref="map" @getAddress="getAddress"></lili-map>
+
+    <multipleMap  ref="map" @callback="getAddress" />
   </div>
 </template>
 
 <script>
 import card from "@/components/card";
-import liliMap from "@/components/map";
 
+import multipleMap from "@/components/map/multiple-map";
 import * as RegExp from "@/plugins/RegExp.js";
 import {
   newMemberAddress,
@@ -117,15 +119,25 @@ export default {
         }
       });
     },
-    getAddress(item) {
+    getAddress(val) {
       // 获取地图选择信息
-      console.log(item);
+      if(val.type === 'select'){
-      this.mapMsg = item;
+        const paths = val.data.map(item => item.name).join(',')
-      this.$set(this.formData, "address", item.addr);
+        const ids = val.data.map(item => item.id).join(',')
-      this.$set(this.formData, "consigneeAddressIdPath", item.addrId);
+        this.$set(this.formData,'address',paths)
-      this.$set(this.formData, "detail", item.detail);
+        this.$set(this.formData,'consigneeAddressIdPath',ids)
-      this.formData.lat = item.position.lat;
+        const coord = val.data[val.data.length - 1].center.split(',')
-      this.formData.lon = item.position.lng;
+        this.formData.lat = coord[1]
+        this.formData.lon = coord[0]
+      }else{
+        this.$set(this.formData, "address", val.data.addr);
+        this.$set(this.formData, "consigneeAddressIdPath", val.data.addrId);
+        this.$set(this.formData, "detail", val.data.address);
+        this.formData.lat = val.data.position.lat;
+        this.formData.lon = val.data.position.lng;
+      }
+
+
     },
   },
   mounted() {
@@ -134,7 +146,7 @@ export default {
   },
   components: {
     card,
-    liliMap,
+    multipleMap
   },
 };
 </script>

buyer/src/pages/shopEntry/FirstApply.vue

@@ -10,11 +10,8 @@
         />
       </FormItem>
       <FormItem prop="companyAddressIdPath" label="公司所在地">
-        <region
+        <span>{{ form.companyAddressPath || '暂无地址' }}</span>
-          style="width: 250px"
+        <Button type="default" style="margin-left: 10px;" @click="$refs.map.open()">选择</Button>
-          @selected="selectedRegion"
-          :addressId="address"
-        />
       </FormItem>
       <FormItem prop="companyAddress" label="公司详细地址">
         <Input
@@ -187,16 +184,18 @@
     <Modal title="View Image" v-model="visible">
       <img :src="previewPicture" v-if="visible" style="width: 100%" />
     </Modal>
+
+    <multipleMap ref="map" @callback="getAddress" />
   </div>
 </template>
 <script>
 import { applyFirst } from '@/api/shopentry';
 import * as RegExp from '@/plugins/RegExp.js';
-import region from '@/components/map/region.vue';
+import multipleMap from "@/components/map/multiple-map";
 import storage from '@/plugins/storage';
 import { commonUrl } from '@/plugins/request.js';
 export default {
-  components: { region },
+  components: { multipleMap },
   props: {
     content: {
       default: {},
@@ -209,7 +208,7 @@ export default {
       accessToken: {}, // 验证token
       visible: false, // 预览图片
       loading: false, // 加载状态
-      address: '', // 地址
+
       previewPicture: '', // 预览图片url
       form: { // 表单数据
         legalPhoto: [],
@@ -258,6 +257,19 @@ export default {
     };
   },
   methods: {
+    // 获取店铺地址
+    getAddress(val){
+      if(val.type === 'select'){
+        const paths = val.data.map(item => item.name).join(',')
+        const ids = val.data.map(item => item.id).join(',')
+        this.$set(this.form, 'companyAddressIdPath', ids)
+        this.$set(this.form, 'companyAddressPath', paths)
+      }else{
+        this.$set(this.form, 'companyAddressIdPath', val.data.addrId)
+        this.$set(this.form, 'companyAddressPath', val.data.addr)
+      }
+    },
+
     // 下一步
     next () {
       this.$refs.firstForm.validate((valid) => {
@@ -279,15 +291,7 @@ export default {
         }
       });
     },
-    // 地址选择回显
+
-    selectedRegion (item) {
-      this.$set(this.form, 'companyAddressIdPath', item[0].toString());
-      this.$set(
-        this.form,
-        'companyAddressPath',
-        item[1].toString().replace(/\s/g, '')
-      );
-    },
     // 上传之前
     beforeUpload () {
       this.uploadLoading = true;
@@ -354,7 +358,7 @@ export default {
       if (this.form.licencePhoto) {
         this.form.legalPhoto = this.content.legalPhoto.split(',');
         this.form.licencePhoto = this.content.licencePhoto.split(',');
-        this.address = this.form.companyAddressIdPath;
+
       }
     }
   }

buyer/src/pages/shopEntry/ThirdApply.vue

@@ -60,24 +60,10 @@
           >
         </Select>
       </FormItem>
-      <FormItem prop="storeCenter" label="店铺定位">
+
-        <Button
-          type="info"
-          v-if="!form.storeCenter"
-          @click="$refs.liliMap.showMap = true"
-        >点击获取店铺定位</Button>
-        <Button
-          type="success"
-          v-else
-          @click="$refs.liliMap.showMap = true"
-        >已定位</Button>
-      </FormItem>
       <FormItem prop="storeAddressIdPath" label="店铺所在地">
-        <region
+        <span>{{ form.storeAddressPath || '暂无地址' }}</span>
-          style="width: 250px"
+        <Button type="default" style="margin-left: 10px;" @click="$refs.map.open()">选择</Button>
-          @selected="selectedRegion"
-          :addressId="address"
-        />
       </FormItem>
       <FormItem prop="storeAddressDetail" label="店铺详细地址">
         <Input
@@ -107,16 +93,20 @@
     <Modal title="View Image" v-model="visible">
       <img :src="previewPicture" v-if="visible" style="width: 100%" />
     </Modal>
-    <lili-map ref="liliMap" @getAddress="getAddress" :useApi="false"></lili-map>
+    <multipleMap ref="map" @callback="getAddress" />
   </div>
 </template>
 <script>
 import { applyThird } from '@/api/shopentry';
 import { getCategory } from '@/api/goods';
-import Map from '@/components/map/index';
+
 import storage from '@/plugins/storage';
 import { commonUrl } from '@/plugins/request.js';
-import region from '@/components/map/region.vue';
+
+
+import multipleMap from "@/components/map/multiple-map";
+
+
 export default {
   props: {
     content: {
@@ -124,7 +114,7 @@ export default {
       type: Object
     }
   },
-  components: { liliMap: Map, region },
+  components: { multipleMap },
   data () {
     return {
       loading: false, // 加载状态
@@ -132,7 +122,7 @@ export default {
       action: commonUrl + '/common/common/upload/file', // 上传地址
       accessToken: {}, // 验证token
       previewPicture: '', // 预览图片
-      address: '', // 回显地址
+
       visible: false, // 图片预览
       form: { // 表单数据
         storeLogo: []
@@ -217,12 +207,22 @@ export default {
       this.form[listName].splice(index, 1);
     },
     // 选择坐标回调
-    getAddress (item) {
+    getAddress (val) {
-      this.$set(
+      if(val.type === 'select'){
-        this.form,
+        const paths = val.data.map(item => item.name).join(',')
-        'storeCenter',
+        const ids = val.data.map(item => item.id).join(',')
-        item.position.lng + ',' + item.position.lat
+        this.$set(this.form, "storeAddressPath", paths);
-      );
+        this.$set(this.form, "storeAddressIdPath", ids);
+        this.form.storeCenter = val.data[val.data.length - 1].center
+      }else{
+        this.$set(this.form, "storeAddressPath", val.data.addr);
+        this.$set(this.form, "storeAddressIdPath", val.data.addrId);
+        this.$set(
+          this.form,
+          'storeCenter',
+          val.data.position.lng + ',' + val.data.position.lat
+        );
+      }
     },
     // 获取商品分类
     getCategoryList () {
@@ -230,15 +230,8 @@ export default {
         if (res.success) this.categoryList = res.result;
       });
     },
-    // 地址选择回显
+
-    selectedRegion (item) {
+
-      this.$set(this.form, 'storeAddressIdPath', item[0].toString());
-      this.$set(
-        this.form,
-        'storeAddressPath',
-        item[1].toString().replace(/\s/g, '')
-      );
-    }
   },
   mounted () {
     this.accessToken.accessToken = storage.getItem('accessToken');
@@ -253,7 +246,6 @@ export default {
       } else {
         this.form.storeLogo = [];
       }
-      this.address = this.form.storeAddressIdPath;
       this.$forceUpdate();
     }
     this.$refs.thirdForm.resetFields()