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

2025-12-21 02:15:54 +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/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() {