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

seller/src/config/index.js

@@ -10,6 +10,7 @@ module.exports = {
   aMapSecurityJsCode: "2bd0fbf621881f4c77be74f0e76495f3", // 高德web端js申请的安全密钥
   aMapKey: "7f11113750315d8543daaf5c3ba353ca", //高德web端js申请的api key
   website: "https://www.pickmall.cn", //官网地址
+  aMapSwitch:false, //是否开启高德定位
   enableCDN: true, //生产环境 是否启用cdn加载 vue等js
   port: 10002, //端口
   inputMaxLength: "140", //全局输入框默认最大输入长度字

seller/src/main.js

@@ -19,7 +19,7 @@ import {
 } from "@/libs/axios";
 import {setStore, getStore, removeStore} from "@/libs/storage";
 
-import i18nBox from '@/views/lili-components/i18n-translate'
+
 import util from "@/libs/util";
 
 import VueLazyload from "vue-lazyload";
@@ -55,7 +55,7 @@ copyViewUi.Input.props.maxlength.default = inputMaxLength // 挂载最大输入
 Vue.use(copyViewUi);
 
 Vue.component('liliDialog', liliDialog)
-Vue.component('i18nBox', i18nBox)
+
 Vue.component('liliDialog', liliDialog)
 Vue.component("vue-qr", vueQr); //此处将vue-qr添加为全局组件
 

seller/src/views/lili-components/i18n-translate.vue

@@ -1,55 +0,0 @@
-<template>
-  <div>
-    <Button @click="enable = true">语言设定</Button>
-    <Modal v-model="enable" draggable sticky scrollable :mask="false" :title="title">
-
-      <Tabs closable type="card" @on-tab-remove="handleTabRemove" :value="language[0].title">
-        <TabPane v-for="(item,index) in language" :key="index" :label="item.title" :name="item.title">
-          <Input v-model="item.___i18n" />
-        </TabPane>
-      </Tabs>
-    </Modal>
-  </div>
-</template>
-
-<script>
-import {language} from "./languages";
-export default {
-  /**
-   * tabs 循环的语言内容格式 [{'title':'test','value':'val'}]
-   */
-  props: {
-    value: {
-      type: null,
-      default: "",
-    },
-  },
-  watch: {
-    language: {
-      handler(val) {
-        this.$emit("language", { language: [...val], val: this.value });
-      },
-      deep: true,
-    },
-  },
-  data() {
-    return {
-      language,
-      tabVal: "",
-      enable: false, //是否开启modal
-      title: "转换语言",
-    };
-  },
-  methods: {
-    //   删除tab标签将没有用的语音进行删除
-    handleTabRemove(tab) {
-      this.language = this.language.filter((item) => {
-        return item.value != tab;
-      });
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-</style>

seller/src/views/lili-components/languages.js

@@ -1 +0,0 @@
-export const language = [{ title: "中文",value:1 }, { title: "英文" ,value:2}];

seller/src/views/lili-components/region.vue

@@ -1,119 +0,0 @@
-<template>
-  <div>
-    <Cascader
-      :data="data"
-      :load-data="loadData"
-      change-on-select
-      @on-visible-change="handleChangeOnSelect"
-      @on-change="change"
-    ></Cascader>
-  
-  </div>
-</template>
-<script>
-
-import * as API_Setup from "@/api/common.js";
-export default {
-  data() {
-    return {
-      dd:"",
-      data: [], // 地区数据
-      selected: [], // 已选地区
-      changeOnSelect: false, // 选择时的变化
-      id: 0 // 0层id
-    };
-  },
-  mounted() {
-    this.init();
-  },
-
-  props: ['addressId'],
-  methods: {
-    // 选择地区回显
-    change(val, selectedData) {
-      /**
-       * @returns [regionId,region]
-       */
-      this.$emit("selected", [
-        val,
-        selectedData[selectedData.length - 1].__label.split("/"),
-      ]);
-    },
-    /**
-     * 动态设置change-on-select的值
-     * 当级联选择器弹窗展开时，设置change-on-select为true，即可以点选菜单选项值发生变化
-     * 当级联选择器弹窗关闭时，设置change-on-select为false，即能够设置初始值
-     */
-    handleChangeOnSelect(value) {
-      this.changeOnSelect = value;
-    },
-    // 动态加载数据
-    loadData(item, callback) {
-      item.loading = true;
-      API_Setup.getChildRegion(item.value).then((res) => {
-        if (res.result.length <= 0) {
-          item.loading = false;
-          this.selected = item;
-
-          /**
-           * 处理数据并返回
-           */
-        } else {
-          res.result.forEach((child) => {
-            item.loading = false;
-
-            let data = {
-              value: child.id,
-              label: child.name,
-              loading: false,
-              children: [],
-            };
-
-            if (
-              child.level == "street" ||
-              item.label == "香港特别行政区" ||
-              item.label == "澳门特别行政区"
-            ) {
-              item.children.push({
-                value: child.id,
-                label: child.name,
-              });
-            } else {
-              item.children.push(data);
-            }
-          });
-          this.selected = item;
-          callback();
-        }
-      });
-    },
-    // 初始化数据
-    init() {
-      API_Setup.getChildRegion(this.id).then((res) => {
-        let way = [];
-
-        res.result.forEach((item) => {
-          let data;
-          // 台湾省做处理
-          if (item.name == "台湾省") {
-            data = {
-              value: item.id,
-              label: item.name,
-            };
-          } else {
-            data = {
-              value: item.id,
-              label: item.name,
-              loading: false,
-              children: [],
-            };
-          }
-          way.push(data);
-        });
-
-        this.data = way;
-      });
-    },
-  },
-};
-</script>

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">
+    <div class="address">{{ addrContent.address }}</div>
-        <Input
+    <div id="map-container"></div>
-          placeholder="输入关键字搜索"
+
-          id="input-map"
+    <div class="search-con">
-          v-model="mapSearch"
+      <Input placeholder="输入关键字搜索" id="input-map" v-model="mapSearch" />
-        />
+      <ul>
-        <ul>
+        <li v-for="(tip, index) in tips" :key="index" @click="selectAddr(tip.location)">
-          <li
+          <p>{{ tip.name }}</p>
-            v-for="(tip, index) in tips"
+          <p>{{ tip.district + tip.address }}</p>
-            :key="index"
+        </li>
-            @click="selectAddr(tip.location)"
+      </ul>
-          >
+    </div>
-            <p>{{ tip.name }}</p>
+    <div slot="footer" class="footer">
-            <p>{{ tip.district + tip.address }}</p>
+
-          </li>
+      <Button type="primary" :loading="loading" @click="ok">确定</Button>
-        </ul>
+    </div>
-      </div>
+
-      <div slot="footer">
-        <Button type="default" @click="showMap = false">取消</Button>
-        <Button type="primary" :loading="loading" @click="ok">确定</Button>
-      </div>
-    </Modal>
   </div>
 </template>
 <script>
@@ -56,21 +48,25 @@ export default {
   },
   methods: {
     ok() {
-      // 确定选择
+
-      this.loading = true;
+      if (this.addrContent && this.addrContent.regeocode) {
-      const params = {
+        const params = {
-        cityCode: this.addrContent.regeocode.addressComponent.citycode,
+          cityCode: this.addrContent.regeocode.addressComponent.citycode,
-        townName: this.addrContent.regeocode.addressComponent.township,
+          townName: this.addrContent.regeocode.addressComponent.township,
-      };
+        };
-      getRegion(params).then((res) => {
+        getRegion(params).then((res) => {
-        if (res.success) {
+          if (res.success) {
-          this.addrContent.addr = res.result.name.replace(/,/g, " ");
+            this.addrContent.addr = res.result.name.replace(/,/g, " ");
-          this.addrContent.addrId = res.result.id;
+            this.addrContent.addrId = res.result.id;
-          this.loading = false;
+            this.loading = false;
-          this.showMap = false;
+
-          this.$emit("getAddress", this.addrContent);
+            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>

seller/src/views/order/order/orderDetail.vue

@@ -12,7 +12,7 @@
 
         <Button @click="sfPrint" type="primary" ghost
           v-if="allowOperation.showLogistics && logisticsType == 'SHUNFENG'">下载面单</Button>
-        <Button @click="Toprint" type="primary" ghost
+        <Button @click="toPrint" type="primary" ghost
           v-if="allowOperation.ship && logisticsType != 'SHUNFENG'">打印电子面单</Button>
       </div>
     </Card>
@@ -290,11 +290,11 @@
             <Input v-model="addressForm.consigneeMobile" size="large" maxlength="11"></Input>
           </FormItem>
           <FormItem label="地址信息" prop="consigneeAddressPath">
-            <Input v-model="addressForm.consigneeAddressPath" disabled style="width: 325px" v-if="showRegion == false" />
+            <span>{{ addressForm.consigneeAddressPath }}</span>
-            <Button v-if="showRegion == false" size="small" @click="regionClick" :loading="submitLoading" type="primary"
+            <Button  size="small" type="default" @click="$refs.map.open()"
               style="margin-left: 8px">修改
             </Button>
-            <region style="width: 400px" @selected="selectedRegion" v-if="showRegion == true" />
+
           </FormItem>
           <FormItem label="详细地址" prop="consigneeDetail">
             <Input v-model="addressForm.consigneeDetail" size="large" maxlength="11"></Input>
@@ -471,24 +471,27 @@
         <Button type="primary" v-print="printInfoObj">打印发货单</Button>
       </div>
     </Modal>
+
+    <multipleMap ref="map" @callback="getAddress"></multipleMap>
   </div>
 </template>
 
 <script>
 import * as API_Order from "@/api/order";
 import * as API_Logistics from "@/api/logistics";
-import liliMap from "@/views/my-components/map/index";
 import * as RegExp from "@/libs/RegExp.js";
-import region from "@/views/lili-components/region";
+
+import multipleMap from "@/views/my-components/map/multiple-map";
+
 
 export default {
   name: "orderDetail",
   components: {
-    liliMap,
+    multipleMap,
-    region,
   },
   data () {
     return {
+      loading:false,
       typeList: [],
       showPrices: false,
       printHiddenFlag: false,//隐藏信息
@@ -498,10 +501,8 @@ export default {
         extraHead: '',//头部文字 默认空
       },
       submitLoading: false, // 添加或编辑提交状态
-      region: [], //地区
-      regionId: [], //地区id
       logisticsType: 'KUAIDINIAO', //物流类型
-      showRegion: false,
+
       someJSONdata: '',
       faceSheetForm: {
         logisticsId: '',
@@ -692,11 +693,20 @@ export default {
     };
   },
   methods: {
-    //修改地址
+    // 回调地址信息
-    regionClick () {
+    getAddress(val){
-      this.showRegion = true;
+      if(val.type === 'select'){
-      this.regionId = "";
+          const paths = val.data.map(item => item.name).join(',')
+          const ids = val.data.map(item => item.id).join(',')
+          this.$set(this.addressForm, 'consigneeAddressPath', paths)
+          this.$set(this.addressForm, 'consigneeAddressIdPath', ids)
+      }
+      else{
+          this.$set(this.addressForm, 'consigneeAddressPath', val.data.addr)
+          this.$set(this.addressForm, 'consigneeAddressIdPath', val.data.addrId)
+      }
     },
+
     //弹出订单核销框
     orderTake () {
       this.orderTakeForm.qrCode = this.orderInfo.order.verificationCode;
@@ -766,7 +776,7 @@ export default {
         }
       });
     },
-    Toprint () {
+    toPrint () {
       this.facesheetFlag = true;
       API_Logistics.getCheckedOn().then(res => {
         if (res.success) {
@@ -797,11 +807,6 @@ export default {
         }
       });
     },
-    // 选中的地址
-    selectedRegion (val) {
-      this.region = val[1];
-      this.regionId = val[0];
-    },
     //查询物流
     logistics () {
       this.logisticsModal = true;
@@ -869,7 +874,7 @@ export default {
         }
       })
     },
-    Toprints () {
+    toPrints () {
       if (this.form.logisticsId != null && this.form.logisticsId != '') {
         this.orderDeliverModal = false;
       }
@@ -882,7 +887,7 @@ export default {
             API_Order.getOrderFaceSheet(this.sn, this.faceSheetForm).then(res => {
               if (res.success) {
                 this.someJSONdata = res.result.printTemplate;
-                this.Toprints();
+                this.toPrints();
               }
             })
           }
@@ -906,9 +911,6 @@ export default {
     //弹出修改收货地址框
     editAddress () {
       this.addressModal = true;
-      this.showRegion = false;
-      this.regionId = this.orderInfo.order.consigneeAddressIdPath;
-      this.region = this.orderInfo.order.consigneeAddressPath;
       this.addressForm.consigneeName = this.orderInfo.order.consigneeName;
       this.addressForm.consigneeMobile = this.orderInfo.order.consigneeMobile;
       this.addressForm.consigneeDetail = this.orderInfo.order.consigneeDetail;
@@ -919,12 +921,6 @@ export default {
     },
     //修改收货地址
     editAddressSubmit () {
-      if (this.regionId == "") {
-        this.$Message.error("请选择地址");
-        return;
-      }
-      this.addressForm.consigneeAddressPath = this.region;
-      this.addressForm.consigneeAddressIdPath = this.regionId;
       this.$refs.addressForm.validate((valid) => {
         if (valid) {
           API_Order.editOrderConsignee(this.sn, this.addressForm).then(

seller/src/views/shop/shopAddress.vue

@@ -36,7 +36,8 @@
           <Input v-model="form.addressName" clearable style="width: 90%"/>
         </FormItem>
         <FormItem label="详细地址" prop="address">
-          <Input v-model="form.address" @on-focus="$refs.liliMap.showMap = true" clearable style="width: 90%"/>
+          <span>{{ form.address || '暂无地址' }}</span>
+          <Button type="default" style="margin-left: 10px;" @click="$refs.map.open()">选择地址</Button>
         </FormItem>
         <FormItem label="联系电话" prop="mobile">
           <Input v-model="form.mobile" clearable style="width: 90%" maxlength="11"/>
@@ -50,20 +51,21 @@
         >
       </div>
     </Modal>
-    <liliMap ref="liliMap" @getAddress="getAddress"></liliMap>
+    <multipleMap ref="map" @callback="getAddress"></multipleMap>
   </div>
 </template>
 
 <script>
   import * as API_Shop from "@/api/shops";
   import { validateMobile } from "@/libs/validate";
-  import liliMap from "@/views/my-components/map/index";
+
+  import multipleMap from "@/views/my-components/map/multiple-map";
 
 
   export default {
     name: "shopAddress",
     components: {
-      liliMap
+      multipleMap
     },
     data() {
       return {
@@ -224,10 +226,19 @@
         this.getDataList();
       },
       //获取地址
-      getAddress(item){
+      getAddress(val){
-        this.$set(this.form, 'address', item.addr)
+        if(val.type === 'select'){
-        this.form.address = item.address
+          const paths = val.data.map(item => item.name).join(',')
-        this.form.center = item.position.lat + "," + item.position.lng
+          this.$set(this.form, 'address', paths)
+
+          this.form.center = val.data[val.data.length - 1].center
+        }
+        else{
+            this.$set(this.form, 'address', val.data.addr)
+            this.form.address = val.data.address
+            this.form.center = val.data.position.lng + "," + val.data.position.lat
+        }
+
       },
       // 获取数据
       getDataList() {

seller/src/views/shop/shopSetting.vue

@@ -3,115 +3,50 @@
     <Card style="margin-left: 10px">
       <Tabs v-model="type" @on-click="handleClickType">
         <TabPane label="基本信息" name="INFO">
-          <Form
+          <Form ref="form" :model="form" :label-width="100" :rules="formValidate">
-            ref="form"
-            :model="form"
-            :label-width="100"
-            :rules="formValidate"
-          >
             <FormItem label="店铺名称">
-              <Input
+              <Input v-model="storeName" disabled clearable style="width: 20%" />
-                v-model="storeName"
-                disabled
-                clearable
-                style="width: 20%"
-              />
             </FormItem>
-            <FormItem label="店铺地址" prop="address">
+            <FormItem label="店铺地址" prop="storeAddressPath">
-              <Input
+              <span>{{ form.storeAddressPath }}</span>
-                v-model="form.address"
+              <Button style="margin-left: 10px;" @click="handleChangeAddress('storeAddress')">选择</Button>
-                @on-focus="$refs.liliMap.showMap = true"
-                clearable
-                style="width: 20%"
-              />
             </FormItem>
             <FormItem label="详细地址" prop="shopAddressDetail">
-              <Input
+              <Input v-model="form.storeAddressDetail" clearable style="width: 20%" maxlength="50" />
-                v-model="form.storeAddressDetail"
-                clearable
-                style="width: 20%"
-                maxlength="50"
-              />
             </FormItem>
             <FormItem label="店铺LOGO：">
-              <upload-pic-thumb
+              <upload-pic-thumb v-model="form.storeLogo" :multiple="false"></upload-pic-thumb>
-                v-model="form.storeLogo"
-                :multiple="false"
-              ></upload-pic-thumb>
             </FormItem>
             <FormItem label="店铺简介" prop="content" class="wangEditor">
-              <Input
+              <Input type="textarea" :rows="8" v-model="form.storeDesc" style="width: 30%"></Input>
-                type="textarea"
-                :rows="8"
-                v-model="form.storeDesc"
-                style="width: 30%"
-              ></Input>
             </FormItem>
             <FormItem label="店铺楼层" prop="content" class="wangEditor">
               <i-switch v-model="form.pageShow" @on-change="pageShow"></i-switch>
-               <span class="desc">店铺楼层装修是否开启，开启后移动端PC端将会自动展示装修的内容</span>
+              <span class="desc">店铺楼层装修是否开启，开启后移动端PC端将会自动展示装修的内容</span>
             </FormItem>
             <FormItem label="开启自提" prop="content" class="wangEditor">
               <i-switch v-model="form.selfPickFlag" @on-change="changeSelfPickFlag"></i-switch>
-               <span class="desc">店铺是否开启自提功能</span>
+              <span class="desc">店铺是否开启自提功能</span>
             </FormItem>
             <Form-item>
-              <Button
+              <Button @click="handleSubmit" :loading="submitLoading" type="primary" style="margin-right: 5px">修改
-                @click="handleSubmit"
-                :loading="submitLoading"
-                type="primary"
-                style="margin-right: 5px"
-                >修改
               </Button>
             </Form-item>
           </Form>
         </TabPane>
         <TabPane label="发货地址">
-          <Form
+          <Form ref="addressGoods" :model="addressGoods" :label-width="100" :rules="addressGoodsValidate">
-            ref="addressGoods"
-            :model="addressGoods"
-            :label-width="100"
-            :rules="addressGoodsValidate"
-          >
             <FormItem label="发货人姓名" prop="salesConsignorName">
-              <Input
+              <Input v-model="addressGoods.salesConsignorName" maxlength="11" clearable style="width: 20%">
-                v-model="addressGoods.salesConsignorName"
-                maxlength="11"
-                clearable
-                style="width: 20%"
-              >
               </Input>
             </FormItem>
             <FormItem label="发货人手机号" prop="salesConsignorMobile">
-              <Input
+              <Input v-model="addressGoods.salesConsignorMobile" maxlength="11" clearable style="width: 20%">
-                v-model="addressGoods.salesConsignorMobile"
-                maxlength="11"
-                clearable
-                style="width: 20%"
-              >
               </Input>
             </FormItem>
             <FormItem label="地址" prop="salesConsignorAddressId">
-              <Input
+              <span>{{ addressGoods.salesConsignorAddressPath }}</span>
-                v-model="regionGoods"
+              <Button style="margin-left: 10px;" @click="handleChangeAddress('addressGoods')">选择</Button>
-                clearable
-                disabled
-                style="width: 20%"
-                v-if="showRegion == false"
-              >
-              </Input>
-              <regionMap
-                style="width: 20%"
-                @selected="selectedRegionGoods"
-                v-if="showRegion == true"
-              />
-              <Button
-                v-if="showRegion == false"
-                @click="regionClicks"
-                type="primary"
-                style="margin-left: 8px"
-              >修改
-              </Button>
             </FormItem>
             <!-- <FormItem label="地址名称" prop="salesConsignorAddressPath">
               <Input
@@ -122,110 +57,45 @@
               </Input>
             </FormItem> -->
             <FormItem label="详细地址" prop="salesConsignorDetail">
-              <Input
+              <Input v-model="addressGoods.salesConsignorDetail" clearable style="width: 20%">
-                v-model="addressGoods.salesConsignorDetail"
-                clearable
-                style="width: 20%"
-              >
               </Input>
             </FormItem>
-            <Button
+            <Button @click="setAddressGoods" type="primary" style="margin-left: 8px">确认
-              @click="SetAddressGoods"
-              type="primary"
-              style="margin-left: 8px"
-            >确认
             </Button>
           </Form>
         </TabPane>
         <TabPane label="退货地址" name="REFUND_GOODS_ADDRESS">
-          <Form
+          <Form ref="addressForm" :model="addressForm" :label-width="100" :rules="afterFormValidate">
-            ref="addressForm"
-            :model="addressForm"
-            :label-width="100"
-            :rules="afterFormValidate"
-          >
             <FormItem label="收货人" prop="salesConsigneeName">
-              <Input
+              <Input v-model="addressForm.salesConsigneeName" maxlength="11" clearable style="width: 20%" />
-                v-model="addressForm.salesConsigneeName"
-                maxlength="11"
-                clearable
-                style="width: 20%"
-              />
             </FormItem>
             <FormItem label="收货人电话" prop="salesConsigneeMobile">
-              <Input
+              <Input v-model="addressForm.salesConsigneeMobile" maxlength="11" style="width: 20%" />
-                v-model="addressForm.salesConsigneeMobile"
-                maxlength="11"
-                style="width: 20%"
-              />
             </FormItem>
             <FormItem label="售后地址">
-              <Input
+              <span>{{ addressForm.salesConsigneeAddressPath }}</span>
-                v-model="region"
+              <Button style="margin-left: 10px;" @click="handleChangeAddress('salesConsigneeAddressPath')">选择</Button>
-                disabled
-                style="width: 20%"
-                v-if="showRegion == false"
-              />
-              <Button
-                v-if="showRegion == false"
-                @click="regionClick"
-                :loading="submitLoading"
-                type="primary"
-                style="margin-left: 8px"
-                >修改
-              </Button>
-              <regionMap
-                style="width: 20%"
-                @selected="selectedRegion"
-                v-if="showRegion == true"
-              />
             </FormItem>
             <FormItem label="详细地址" prop="salesConsigneeDetail">
-              <Input
+              <Input v-model="addressForm.salesConsigneeDetail" clearable style="width: 20%" maxlength="50" />
-                v-model="addressForm.salesConsigneeDetail"
-                clearable
-                style="width: 20%"
-                maxlength="50"
-              />
             </FormItem>
 
             <Form-item>
-              <Button
+              <Button @click="afterHandleSubmit" :loading="submitLoading" type="primary" style="margin-right: 5px">修改
-                @click="afterHandleSubmit"
-                :loading="submitLoading"
-                type="primary"
-                style="margin-right: 5px"
-                >修改
               </Button>
             </Form-item>
           </Form>
         </TabPane>
         <TabPane label="库存预警" name="STOCK_WARNING">
-          <Form
+          <Form ref="stockWarningForm" :model="stockWarningForm" :label-width="100" :rules="stockWarningFormValidate">
-            ref="stockWarningForm"
-            :model="stockWarningForm"
-            :label-width="100"
-            :rules="stockWarningFormValidate"
-          >
             <FormItem label="预警数" prop="stockWarning">
-              <InputNumber
+              <InputNumber :min="0" :max="99999" v-model="stockWarningForm.stockWarning" type="number" maxlength="6"
-                :min="0"
+                clearable style="width: 20%" />
-                :max="99999"
-                v-model="stockWarningForm.stockWarning"
-                type="number"
-                maxlength="6"
-                clearable
-                style="width: 20%"
-              />
             </FormItem>
 
             <Form-item>
-              <Button
+              <Button @click="stockWarningHandleSubmit" :loading="submitLoading" type="primary"
-                @click="stockWarningHandleSubmit"
+                style="margin-right: 5px">修改
-                :loading="submitLoading"
-                type="primary"
-                style="margin-right: 5px"
-                >修改
               </Button>
             </Form-item>
           </Form>
@@ -260,7 +130,7 @@
       </Tabs>
     </Card>
 
-    <liliMap ref="liliMap" @getAddress="getAddress"></liliMap>
+    <multipleMap ref="map" @callback="callbackAddress" />
   </div>
 </template>
 
@@ -268,23 +138,25 @@
 import * as API_Shop from "@/api/shops";
 import { validateMobile } from "@/libs/validate";
 import uploadPicThumb from "@/views/my-components/lili/upload-pic-thumb";
-import liliMap from "@/views/my-components/map/index";
+
-import regionMap from "@/views/lili-components/region";
+import multipleMap from "@/views/my-components/map/multiple-map";
 import * as RegExp from "@/libs/RegExp.js";
 import Cookies from "js-cookie";
 export default {
   name: "shopSetting",
   components: {
     uploadPicThumb,
-    liliMap,
+
-    regionMap,
+    multipleMap
   },
   data() {
     return {
+      currentKey: "", //存储当前点击地址的key
+      showMap: false, // 是否展示地图
       type: "INFO",
-      showRegion: false, // 选择地址模态框显隐
+
       storeName: "", //店铺名称
-      region: "", // 地区名称
+
       regionId: [], // 地区id
       addressForm: {
         // 退货地址
@@ -304,7 +176,7 @@ export default {
       },
       stockWarningFormValidate: {
         stockWarning: [
-          { required: true, type:'number', message: "请输入库存预警数", trigger: "blur" },
+          { required: true, type: 'number', message: "请输入库存预警数", trigger: "blur" },
         ],
       },
       udeskFormValidate: {
@@ -386,13 +258,13 @@ export default {
       submitLoading: false, // 添加或编辑提交状态
       //发货地址
       addressGoods: {
-        salesConsignorName:" ",
+        salesConsignorName: " ",
-        salesConsignorMobile:" ",
+        salesConsignorMobile: " ",
         salesConsignorAddressId: " ",
         salesConsignorAddressPath: " ",
         salesConsignorDetail: " ",
       },
-      regionGoods:"",//发货地址
+
       addressGoodsValidate: {
         salesConsignorName: [
           { required: true, message: "请输入发货人姓名", trigger: "blur" },
@@ -412,31 +284,63 @@ export default {
     };
   },
   methods: {
+    // 回调地址
+    callbackAddress(val) {
+      if (val.type === 'select') {
+        const paths = val.data.map(item => item.name).join(',')
+
+        const ids = val.data.map(item => item.id).join(',')
+
+        if (this.currentKey === 'storeAddress') {
+          this.form.storeAddressPath = paths
+          this.form.storeAddressIdPath = ids
+          this.form.storeCenter = val.data[val.data.length - 1].center
+        }
+        if (this.currentKey === 'addressGoods') {
+          this.addressGoods.salesConsignorAddressPath = paths
+          this.addressGoods.salesConsignorAddressId = ids
+        }
+        if (this.currentKey === 'salesConsigneeAddressPath') {
+          this.addressForm.salesConsigneeAddressPath = paths
+          this.addressForm.salesConsigneeAddressId = ids
+        }
+
+      }
+      else {
+        if (this.currentKey === 'storeAddressstoreAddress') {
+          this.form.storeAddressPath = val.data.addr;
+          this.form.storeAddressIdPath = val.data.addrId;
+          this.form.storeCenter = val.data.position.lng + "," + val.data.position.lat;
+        }
+        if (this.currentKey === 'addressGoods') {
+          this.addressGoods.salesConsignorAddressPath = val.data.addr;
+          this.addressGoods.salesConsignorAddressId = val.data.addrId;
+        }
+        if (this.currentKey === 'salesConsigneeAddressPath') {
+          this.addressForm.salesConsigneeAddressPath = val.data.addr;
+          this.addressForm.salesConsigneeAddressId = val.data.addrId;
+        }
+      }
+    },
+    // 修改地址
+    handleChangeAddress(key) {
+      this.currentKey = key
+      this.$refs.map.open();
+    },
     // 初始化数据
     init() {
       this.getShopInfo();
       this.getDeliverAddress()
     },
-    selectedRegionGoods(val){
+
-      this.regionGoods = val[1];
+
-      this.regionIdS = val[0];
+    setAddressGoods() {
-    },
-    regionClicks(){
-      this.showRegion = true;
-      this.regionIdS = "";
-    },
-    SetAddressGoods(){
       console.log(this.$refs.addressGoods)
-      if (this.regionIdS == "") {
+
-        this.$Message.error("请选择地址");
-        return;
-      }
       this.$refs.addressGoods.validate((valid) => {
         if (valid) {
-          this.addressGoods.salesConsignorAddressPath = this.regionGoods;
+          API_Shop.editDeliverAddress(this.addressGoods).then(res => {
-          this.addressGoods.salesConsignorAddressId = this.regionIdS;
+            if (res.success) {
-          API_Shop.editDeliverAddress(this.addressGoods).then(res=>{
-            if(res.success){
               this.$Message.success("修改成功")
             }
           })
@@ -450,7 +354,7 @@ export default {
         this.loading = false;
         if (res.success) {
           this.form = res.result;
-          this.$set(this.form, "address", res.result.storeAddressPath);
+
           this.storeName = res.result.storeName;
           this.form.storeCenter = res.result.storeCenter;
           Cookies.set("userInfoSeller", JSON.stringify(res.result));
@@ -468,15 +372,15 @@ export default {
     pageShow(type) {
       this.form.pageShow = type
     },
-    changeSelfPickFlag(item){
+    changeSelfPickFlag(item) {
-      if(item){
+      if (item) {
         this.form.selfPickFlag = item
       }
     },
-    getDeliverAddress(){
+    getDeliverAddress() {
-      API_Shop.getDeliverAddress().then(res=>{
+      API_Shop.getDeliverAddress().then(res => {
-        if(res.success){
+        if (res.success) {
-          if(res.result!= '' && res.result != null){
+          if (res.result != '' && res.result != null) {
             this.addressGoods = res.result;
             this.regionGoods = res.result.salesConsignorAddressPath;
             this.regionIdS = res.result.salesConsignorAddressId;
@@ -484,11 +388,7 @@ export default {
         }
       })
     },
-    //修改售后地址
+
-    regionClick() {
-      this.showRegion = true;
-      this.regionId = "";
-    },
     //重置
     handleReset() {
       this.$refs.form.resetFields();
@@ -537,11 +437,7 @@ export default {
         }
       });
     },
-    // 选中的地址
+
-    selectedRegion(val) {
-      this.region = val[1];
-      this.regionId = val[0];
-    },
     //tab切换
     handleClickType(v) {
       //退款
@@ -558,40 +454,24 @@ export default {
       API_Shop.getRefundGoodsAddress().then((res) => {
         if (res.result != null) {
           this.addressForm = res.result;
-          this.regionId = res.result.salesConsigneeAddressId;
-          this.region = res.result.salesConsigneeAddressPath;
         }
       });
     },
     //提交保存
     afterHandleSubmit() {
-      if (this.regionId == "") {
-        this.$Message.error("请选择地址");
-        return;
-      }
       this.$refs.addressForm.validate((valid) => {
         if (valid) {
-          this.addressForm.salesConsigneeAddressPath = this.region;
-          this.addressForm.salesConsigneeAddressId = this.regionId;
           this.submitLoading = true;
           API_Shop.saveRefundGoodsAddress(this.addressForm).then((res) => {
             this.submitLoading = false;
             if (res.success) {
               this.$Message.success("修改成功");
               this.getRefundGoodsAddress();
-              this.showRegion = false;
             }
           });
         }
       });
     },
-    //获取地址
-    getAddress(item) {
-      this.$set(this.form, "address", item.addr);
-      this.form.storeAddressPath = item.addr;
-      this.form.storeAddressIdPath = item.addrId;
-      this.form.storeCenter = item.position.lng + "," + item.position.lat;
-    },
   },
   mounted() {
     this.init();
@@ -599,7 +479,7 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-.desc{
+.desc {
   margin-left: 10px;
   color: #999;
 }