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

2025-12-20 09:55:53 +08:00 · 2023-08-03 10:37:53 +08:00
parent 8a43335b75
commit 8b33dbe8d7
18 changed files with 246 additions and 239 deletions
--- a/manager/src/views/home/home.vue
+++ b/manager/src/views/home/home.vue
@@ -200,12 +200,10 @@ import { homeStatistics, hotGoods, hotShops, getNoticePage } from "@/api/index";
 import * as API_Goods from "@/api/goods";
 import { Chart } from "@antv/g2";
 import * as API_Member from "@/api/member";
-// import i18nBox from '@/components/i18n-translate'
+
 export default {
  name: "home",
-  // components:{
-  //   i18nBox
-  // },
+
  data() {
    return {
      // 测试数据
--- a/manager/src/views/member/list/index.vue
+++ b/manager/src/views/member/list/index.vue
@@ -85,26 +85,23 @@
          <DatePicker type="date" format="yyyy-MM-dd" v-model="form.birthday" style="width: 220px"></DatePicker>
        </FormItem>
        <FormItem label="所在地" prop="mail">
-          <div class="form-item" v-if="!updateRegion">
-            <Input disabled style="width: 250px" :value="form.region" />
-            <Button type="text" @click="() => {
-                  this.updateRegion = !this.updateRegion;
-                }">修改</Button>
-          </div>
-          <div class="form-item" v-else>
-            <region style="width: 250px" @selected="selectedRegion" />
-          </div>
+          {{ form.region || '暂无地址' }}
+
+
+          <Button style="margin-left: 10px;" @click="$refs.map.open()">选择</Button>
+
        </FormItem>
      </Form>
    </Modal>
    <Modal width="1200px" v-model="picModelFlag">
      <ossManage @callback="callbackSelected" ref="ossManage" />
    </Modal>
+    <multipleMap ref="map" @callback="selectedRegion"/>
  </div>
 </template>

 <script>
-import region from "@/components/region";
+import multipleMap from "@/components/map/multiple-map";
 import * as API_Member from "@/api/member.js";
 import ossManage from "@/views/sys/oss-manage/ossManage";
 import * as RegExp from "@/libs/RegExp.js";
@@ -112,7 +109,7 @@ import * as RegExp from "@/libs/RegExp.js";
 export default {
  name: "member",
  components: {
-    region,
+    multipleMap,
    ossManage,
  },
  data() {
@@ -121,7 +118,7 @@ export default {
      descFlag: false, //编辑查看框
      loading: true, // 表单加载状态
      addFlag: false, // modal显隐控制
-      updateRegion: false, // 地区
+
      addMemberForm: {
        // 添加用户表单
        mobile: "",
@@ -382,7 +379,7 @@ export default {
    editPerm(val) {
      this.descTitle = `查看用户 ${val.username}`;
      this.descFlag = true;
-      this.updateRegion = false;
+
      this.getMemberInfo(val.id);
    },
    addMember() {
@@ -434,8 +431,18 @@ export default {

    // 选中的地址
    selectedRegion(val) {
-      this.region = val[1];
-      this.regionId = val[0];
+      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,'region',paths)
+        this.$set(this.form,'regionId',ids)
+
+      }
+      else{
+        this.$set(this.form,'region',val.data.addr)
+        this.$set(this.form,'regionId',val.data.addrId)
+      }
    },
    //查看会员
    detail(row) {
@@ -466,13 +473,13 @@ export default {

    // 提交修改数据
    handleSubmitModal() {
-      const { nickName, sex, username, face, newPassword,id } = this.form;
+      const { nickName, sex, username, face, newPassword,id,regionId,region } = this.form;
      let time = new Date(this.form.birthday);
      let birthday = this.form.birthday=== undefined?'':
        time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate();
      let submit = {
-        regionId: this.form.regionId,
-        region: this.form.region,
+        regionId,
+        region,
        nickName,
        username,
        sex,
@@ -480,10 +487,7 @@ export default {
        face,
        id
      };
-      if (this.region != "undefined") {
-        submit.regionId = this.regionId;
-        submit.region = this.region;
-      }
+
      if (newPassword) {
        submit.password = this.md5(newPassword);
      }
--- a/manager/src/views/member/list/memberDetail.vue
+++ b/manager/src/views/member/list/memberDetail.vue
@@ -331,8 +331,8 @@
          <Input v-model="addressForm.mobile" clearable style="width: 80%" maxlength="11"/>
        </FormItem>
        <FormItem label="收货人地址" prop="consigneeAddressPath">
-          <Input v-model="addressForm.consigneeAddressPath" @on-focus="$refs.liliMap.showMap = true" clearable
-                 style="width: 80%"/>
+          <span>{{ addressForm.consigneeAddressPath || '暂无地址' }}</span>
+          <Button @click="$refs.map.open()" style="margin-left: 10px;">选择</Button>
        </FormItem>
        <FormItem label="详细地址" prop="detail">
          <Input v-model="addressForm.detail" maxlength="35" clearable style="width: 80%"/>
@@ -352,24 +352,23 @@
        <Button type="primary" :loading="submitLoading" @click="addressSubmit">保存</Button>
      </div>
    </Modal>
-    <liliMap ref="liliMap" @getAddress="getAddress"></liliMap>
+    <multipleMap ref="map" @callback="getAddress"></multipleMap>
  </div>
 </template>

 <script>
-  import region from "@/components/region";
+
  import * as API_Member from "@/api/member.js";
  import ossManage from "@/views/sys/oss-manage/ossManage";
-  import liliMap from "@/components/map/index";
+  import multipleMap from "@/components/map/multiple-map";
  import * as RegExp from '@/libs/RegExp.js';
  import * as API_Order from "@/api/order.js";

  export default {
    name: "memberDetail",
    components: {
-      region,
      ossManage,
-      liliMap
+      multipleMap
    },
    data() {
      return {
@@ -381,7 +380,9 @@
        addressModalVisible: false, //会员地址操作弹出框
        addressForm: {
          id: "",
-          isDefault: "0"
+          isDefault: "0",
+          consigneeAddressPath:"",
+          consigneeAddressIdPath:""

        },//会员地址操作form
        selectDate: null, // 选择时间段
@@ -1004,12 +1005,24 @@

      },
      //获取地址
-      getAddress(item) {
-        this.$set(this.addressForm, 'consigneeAddressPath', item.addr)
-        this.$set(this.addressForm, 'consigneeAddressIdPath', item.addrId)
-        this.addressForm.address = item.address
-        this.addressForm.lat = item.position.lat
-        this.addressForm.lon = item.position.lng
+      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.addressForm,'consigneeAddressPath',paths)
+          this.$set(this.addressForm,'consigneeAddressIdPath',ids)
+
+          // 解析center 转为经纬度
+          const coord = val.data[val.data.length - 1].center.split(',')
+          this.addressForm.lat = coord[1]
+          this.addressForm.lon = coord[0]
+        }else{
+          this.$set(this.addressForm,'consigneeAddressPath', val.data.addr)
+          this.$set(this.addressForm,'consigneeAddressIdPath',val.data.addrId)
+          this.addressForm.lat = val.data.position.lat
+          this.addressForm.lon = val.data.position.lng
+        }
      },
      //删除会员地址
      memberAddressRemove(v) {
--- a/manager/src/views/member/list/memberRecycle.vue
+++ b/manager/src/views/member/list/memberRecycle.vue
@@ -134,40 +134,29 @@
          ></DatePicker>
        </FormItem>
        <FormItem label="所在地" prop="mail">
-          <div class="form-item" v-if="!updateRegion">
-            <Input disabled style="width: 250px" :value="formValidate.region" />
-            <Button
-              type="text"
-              @click="
-                () => {
-                  this.updateRegion = !this.updateRegion;
-                }
-              "
-              >修改
-            </Button>
-          </div>
-          <div class="form-item" v-else>
-            <region style="width: 250px" @selected="selectedRegion" />
-          </div>
+          {{ formValidate.region || '暂无地址' }}
+          <Button style="margin-left: 10px;" @click="$refs.map.open()">选择</Button>
        </FormItem>
      </Form>
    </Modal>
    <Modal width="1200px" v-model="picModelFlag">
      <ossManage @callback="callbackSelected" ref="ossManage" />
    </Modal>
+    <multipleMap ref="map" @callback="selectedRegion" />
  </div>
 </template>

 <script>
-import region from "@/components/region";
+
 import * as API_Member from "@/api/member.js";
 import ossManage from "@/views/sys/oss-manage/ossManage";
-
+import multipleMap from "@/components/map/multiple-map";
 export default {
  name: "memberRecycle",
  components: {
-    region,
+
    ossManage,
+    multipleMap
  },
  data() {
    return {
@@ -176,7 +165,7 @@ export default {
      descFlag: false, //编辑查看框
      openSearch: true, // 显示搜索
      loading: true, // 表单加载状态
-      updateRegion: false, // 显示所在地
+
      searchForm: {
        // 请求参数
        pageNumber: 1,
@@ -363,7 +352,7 @@ export default {
    editPerm(val) {
      this.descTitle = `查看用户 ${val.username}`;
      this.descFlag = true;
-      this.updateRegion = false;
+
      this.getMemberInfo(val.id);
    },
    /**
@@ -394,8 +383,18 @@ export default {

    // 选中的地址
    selectedRegion(val) {
-      this.region = val[1];
-      this.regionId = val[0];
+      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.formValidate,'region',paths)
+        this.$set(this.formValidate,'regionId',ids)
+
+      }
+      else{
+        this.$set(this.formValidate,'region',val.data.addr)
+        this.$set(this.formValidate,'regionId',val.data.addrId)
+      }
    },

    //详细
@@ -427,14 +426,14 @@ export default {

    // 提交修改数据
    handleSubmitModal() {
-      const { nickName, sex, username, face, newPassword, id } =
+      const { nickName, sex, username, face, newPassword, id ,regionId,region} =
        this.formValidate;
      let time = new Date(this.formValidate.birthday);
      let birthday =
        time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate();
      let submit = {
-        regionId: this.regionId || "",
-        region: this.region || "",
+        regionId:regionId,
+        region: region,
        nickName,
        username,
        sex,
--- a/manager/src/views/member/point/point.vue
+++ b/manager/src/views/member/point/point.vue
@@ -49,7 +49,7 @@
 </template>

 <script>
-  import region from "@/components/region";
+
  import * as API_Member from "@/api/member.js";
  import ossManage from "@/views/sys/oss-manage/ossManage";

@@ -57,7 +57,7 @@
    // 积分历史页面
    name: "point",
    components: {
-      region,
+
      ossManage,
    },
    data() {
--- a/manager/src/views/order/order/orderDetail.vue
+++ b/manager/src/views/order/order/orderDetail.vue
@@ -345,11 +345,8 @@
            <Input v-model="addressForm.consigneeMobile" size="large" maxlength="11"></Input>
          </FormItem>
          <FormItem label="地址信息" prop="consigneeAddressPath">
-            <Input v-model="addr" disabled style="width: 305px" v-if="showRegion == false" />
-            <Button v-if="showRegion == false" @click="regionClick" :loading="submitLoading" type="primary"
-              icon="ios-create-outline" style="margin-left: 8px">修改
-            </Button>
-            <region style="width: 400px" @selected="selectedRegion" v-if="showRegion == true" />
+            {{ addr }}
+            <Button type="default" @click="$refs.map.open()">选择</Button>
          </FormItem>
          <FormItem label="详细地址" prop="consigneeDetail">
            <Input v-model="addressForm.consigneeDetail" size="large" maxlength="50"></Input>
@@ -433,18 +430,23 @@
        <Button type="primary" v-print="printInfoObj">打印发货单</Button>
      </div>
    </Modal>
+
+
+    <multipleMap ref="map" @callback="selectedRegion" />
  </div>
 </template>

 <script>
 import * as API_Order from "@/api/order";
 import * as RegExp from "@/libs/RegExp.js";
-import region from "@/components/region";
+
+import multipleMap from "@/components/map/multiple-map";
 import vueQr from "vue-qr";
 export default {
  name: "orderList",
  components: {
-    region,
+
+    multipleMap,
    "vue-qr": vueQr,
  },
  data () {
@@ -458,10 +460,10 @@ export default {
        extraHead: '',//头部文字 默认空
      },
      loading: false, //加载表格
-      submitLoading: false, // 添加或编辑提交状态
+
      addr: "", //地区
-      regionId: [], //地区id
-      showRegion: false, // 显示地区
+
+
      orderLogInfo: [], //订单日志数据
      orderLogModal: false, //弹出调整价格框
      checkedLogistics: [], //选中的物流公司集合
@@ -638,11 +640,7 @@ export default {
    gotoHomes () {
      return false
    },
-    //修改地址
-    regionClick () {
-      this.showRegion = true;
-      this.regionId = "";
-    },
+
    //确认收款
    confirmPrice () {
      this.$Modal.confirm({
@@ -719,8 +717,17 @@ export default {
    },
    // 选中的地址
    selectedRegion (val) {
-      this.addr = val[1];
-      this.regionId = val[0];
+      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,'addr',paths)
+        this.$set(this,'regionId',ids)
+      }
+      else{
+        this.$set(this,'addr',val.data.addr)
+        this.$set(this,'regionId',val.data.addrId)
+      }
+
    },
    //订单取消
    orderCancel () {
@@ -761,7 +768,6 @@ export default {
    //弹出修改收货地址框
    editAddress () {
      this.addressModal = true;
-      this.showRegion = false;
      this.addr = this.orderInfo.order.consigneeAddressPath;
      this.regionId = this.orderInfo.order.consigneeAddressIdPath;
      this.addressForm.consigneeName = this.orderInfo.order.consigneeName;
--- a/manager/src/views/seller/shop/shopAuditList.vue
+++ b/manager/src/views/seller/shop/shopAuditList.vue
@@ -37,14 +37,9 @@
 <script>
  import {
    getShopListData,
-    shopAudit
  } from "@/api/shops";
-  import shopOperation from "./shopOperation";
  export default {
    name: "shop",
-    components: {
-      shopOperation,
-    },
    data() {
      return {
        loading: true, // 表单加载状态
@@ -198,7 +193,7 @@
      edit(v) {
        this.$router.push({ path: '/shop-operation', query: { shopId: v.id } });
      },
-      
+
    },
    mounted() {
      this.init();
--- a/manager/src/views/seller/shop/shopDetail.vue
+++ b/manager/src/views/seller/shop/shopDetail.vue
@@ -566,7 +566,7 @@
 </template>

 <script>
-  import region from "@/components/region";
+
  import ossManage from "@/views/sys/oss-manage/ossManage";
  import * as RegExp from '@/libs/RegExp.js';
  import {getCategoryTree} from "@/api/goods";
@@ -577,7 +577,7 @@
  export default {
    name: "member",
    components: {
-      region,
+
      ossManage,
    },
    data() {
--- a/manager/src/views/seller/shop/shopList.vue
+++ b/manager/src/views/seller/shop/shopList.vue
@@ -232,6 +232,7 @@ export default {
                "Button",
                {
                  props: {
+                    type:"default",
                    size: "small",
                  },
                  style: {
--- a/manager/src/views/seller/shop/shopOperation.vue
+++ b/manager/src/views/seller/shop/shopOperation.vue
@@ -19,7 +19,7 @@
              <FormItem label="会员名称" prop="memberName">
                <div class="item">
                  <Input disabled v-model="shopForm.memberName" />
-                  <Button @click="selectMember()" v-if="!$route.query.shopId"
+                  <Button type="default" @click="selectMember()" v-if="!$route.query.shopId"
                    >选择会员</Button
                  >
                </div>
@@ -39,9 +39,21 @@
                </RadioGroup>
              </FormItem>

-              <FormItem label="店铺定位" prop="shopCenter">
-                <!-- <Input v-model="shopForm.storeCenter" @on-focus="$refs.liliMap.showMap = true" clearable style="width: 350px" /> -->
-                <Button
+              <FormItem label="店铺所在地" prop="storeAddressPath">
+                <span>{{shopForm.storeAddressPath || '暂无地址'}}</span>
+                <Button style="margin-left: 10px;" type="default" @click="handleClickAddress('storeAddressPath')">选择</Button>
+              </FormItem>
+
+              <FormItem label="店铺详细地址" prop="storeAddressDetail">
+                <Input
+                  v-model="shopForm.storeAddressDetail"
+                  clearable
+                  style="width: 350px"
+                />
+              </FormItem>
+
+              <!-- <FormItem label="店铺定位" prop="shopCenter">
+                 <Button
                  type="info"
                  v-if="!shopForm.storeCenter"
                  @click="$refs.liliMap.showMap = true"
@@ -50,22 +62,9 @@
                <Button type="success" v-else @click="$refs.liliMap.showMap = true"
                  >已定位</Button
                >
-              </FormItem>
+              </FormItem> -->
+

-              <FormItem label="店铺所在地" prop="storeAddressPath">
-                <Input
-                  disabled
-                  v-model="shopForm.storeAddressPath"
-                  style="width: 350px"
-                />
-              </FormItem>
-              <FormItem label="店铺详细地址" prop="storeAddressDetail">
-                <Input
-                  v-model="shopForm.storeAddressDetail"
-                  clearable
-                  style="width: 350px"
-                />
-              </FormItem>

              <FormItem label="店铺logo" class="storeLogo">
                <Avatar
@@ -112,11 +111,8 @@
                />
              </FormItem>
              <FormItem label="地址信息">
-                <region
-                  style="width: 350px"
-                  @selected="selectedConsigneeRegion"
-                  :addressId="returnAddress"
-                />
+                {{ shopForm.salesConsigneeAddressPath || '暂无地址' }}
+                <Button style="margin-left: 10px;" type="default" @click="handleClickAddress('salesConsigneeAddressPath')">选择</Button>
              </FormItem>
              <FormItem label="详细地址">
                <Input
@@ -150,11 +146,13 @@
                <Input v-model="shopForm.companyPhone" clearable style="width: 350px" />
              </FormItem>
              <FormItem label="公司所在地" prop="companyAddressIdPath">
-                <region
+                <span>{{ shopForm.companyAddressPath }}</span>
+                <Button style="margin-left: 10px;" @click="handleClickAddress('companyAddressPath')">选择</Button>
+                <!-- <region
                  style="width: 350px"
                  @selected="selectedRegion"
                  :addressId="address"
-                />
+                /> -->
              </FormItem>
              <FormItem label="公司详细地址" prop="companyAddress">
                <Input v-model="shopForm.companyAddress" clearable style="width: 350px" />
@@ -374,7 +372,7 @@
        </Button>
      </div>
    </Card>
-    <liliMap ref="liliMap" @getAddress="getAddress"></liliMap>
+

    <Modal width="1200px" v-model="picModalFlag">
      <ossManage @callback="callbackSelected" ref="ossManage" />
@@ -405,6 +403,8 @@
        >
      </div>
    </Modal>
+
+    <multipleMap ref="map" @callback="getAddress" />
  </div>
 </template>

@@ -414,17 +414,15 @@ import ossManage from "@/views/sys/oss-manage/ossManage";
 import { getCategoryTree } from "@/api/goods";
 import { shopDetail, shopAdd, shopEdit, getShopByMemberId, shopAudit } from "@/api/shops";
 import uploadPicInput from "@/components/lili/upload-pic-input";
-import region from "@/components/region";
-import liliMap from "@/components/map/index";
+import multipleMap from "@/components/map/multiple-map";

 export default {
  name: "shop-operation",
  components: {
    uploadPicInput,
    ossManage,
-    region,
    memberLayout,
-    liliMap,
+    multipleMap,
  },

  data() {
@@ -448,6 +446,7 @@ export default {
      shopValidate: {
        // 表单验证规则
        memberName: [{ required: true, message: "会员不能为空" }],
+        storeAddressPath: [{ required: true, message: "店铺地址不能为空" }],
        storeName: [{ required: true, message: "店铺名称不能为空" }],
        companyAddress: [{ required: true, message: "公司地址不能为空" }],
        storeAddressDetail: [{ required: true, message: "店铺详细地址不能为空" }],
@@ -511,6 +510,8 @@ export default {
      settlementCycle: [], // 结算周期
      shopForm: {
        // 店铺数据
+        storeAddressPath:"",
+
        settlementCycle: "",
        selfOperated: "false",
        memberName: "",
@@ -546,9 +547,16 @@ export default {

      infoResult: {}, // 店铺详情
      picIndex: "", // 存储身份证图片下标，方便赋值
+      currentAddress:"", //当前选中的地址
    };
  },
  methods: {
+    // 选择地址
+    handleClickAddress(val){
+      this.currentAddress = val;
+      this.$refs.map.open();
+
+    },
    // 选择会员的回调
    callbackMember(val) {
      if (val) {
@@ -723,10 +731,43 @@ export default {
      });
    },
    // 点击定位获取店铺地址
-    getAddress(item) {
-      this.shopForm.storeCenter = item.position.lng + "," + item.position.lat;
-      this.$set(this.shopForm, "storeAddressPath", item.addr);
-      this.$set(this.shopForm, "storeAddressIdPath", item.addrId);
+    getAddress(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.currentAddress === 'storeAddressPath'){
+          this.$set(this.shopForm, "storeAddressPath", paths);
+          this.$set(this.shopForm, "storeAddressIdPath", ids);
+
+          this.shopForm.center = val.data[val.data.length - 1].center
+        }else if(this.currentAddress === 'salesConsigneeAddressPath'){
+          this.$set(this.shopForm, "salesConsigneeAddressPath", paths);
+          this.$set(this.shopForm, "salesConsigneeAddressId", ids);
+        }else if(this.currentAddress === 'companyAddressPath'){
+          this.$set(this.shopForm, "companyAddressPath", paths);
+          this.$set(this.shopForm, "companyAddressIdPath", ids);
+        }
+
+
+      }
+      else{
+        if(this.currentAddress === 'storeAddressPath'){
+          this.shopForm.storeCenter = val.data.position.lng + "," + val.data.position.lat;
+          this.$set(this.shopForm, "storeAddressPath", val.data.addr);
+          this.$set(this.shopForm, "storeAddressIdPath", val.data.addrId);
+        }else if(this.currentAddress === 'salesConsigneeAddressPath'){
+          this.$set(this.shopForm, "salesConsigneeAddressPath", val.data.addr);
+          this.$set(this.shopForm, "salesConsigneeAddressId", val.data.addrId);
+        }else if(this.currentAddress === 'companyAddressPath'){
+          this.$set(this.shopForm, "companyAddressPath", val.data.addr);
+          this.$set(this.shopForm, "companyAddressIdPath", val.data.addrId);
+        }
+
+        console.log(this.shopForm.storeAddressPath)
+
+      }
    },
    // 全部选中
    handleCheckAll() {