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

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>
-          <Button type="primary" size="small" @click="$refs.map.showMap = true">选择</Button>
+          <span>{{ formData.address || '暂无地址' }}</span>
+
+          <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);
-      this.mapMsg = item;
-      this.$set(this.formData, "address", item.addr);
-      this.$set(this.formData, "consigneeAddressIdPath", item.addrId);
-      this.$set(this.formData, "detail", item.detail);
-      this.formData.lat = item.position.lat;
-      this.formData.lon = item.position.lng;
+      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.formData,'address',paths)
+        this.$set(this.formData,'consigneeAddressIdPath',ids)
+        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;
+      }
+
+
     },
   },
   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
-          style="width: 250px"
-          @selected="selectedRegion"
-          :addressId="address"
-        />
+        <span>{{ form.companyAddressPath || '暂无地址' }}</span>
+        <Button type="default" style="margin-left: 10px;" @click="$refs.map.open()">选择</Button>
       </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
-          style="width: 250px"
-          @selected="selectedRegion"
-          :addressId="address"
-        />
+        <span>{{ form.storeAddressPath || '暂无地址' }}</span>
+        <Button type="default" style="margin-left: 10px;" @click="$refs.map.open()">选择</Button>
       </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) {
-      this.$set(
-        this.form,
-        'storeCenter',
-        item.position.lng + ',' + item.position.lat
-      );
+    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, "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()