feat(map): map update

src/api/sys/model/userModel.ts

@@ -1,3 +1,4 @@
+import type { UserInfo } from '/#/store';
 /**
  * @description: Login interface parameters
  */
@@ -44,22 +45,22 @@ export interface LoginResultModel {
   role?: RoleInfo;
   user: RoleInfo;
 }
-
+export type GetUserInfoModel = UserInfo;
 /**
  * @description: Get user information return value
  */
-export interface GetUserInfoModel {
-  roles: RoleInfo[];
-  // 用户id
-  id: string | number;
+// export interface GetUserInfoModel {
+//   roles: RoleInfo[];
+//   // 用户id
+//   id: string | number;
 
-  // userId: string | number;
-  // 用户名
-  userName: string;
-  // 真实名字
-  realName: string;
-  // 头像
-  avatar: string;
-  // 介绍
-  desc?: string;
-}
+//   // userId: string | number;
+//   // 用户名
+//   userName: string;
+//   // 真实名字
+//   realName: string;
+//   // 头像
+//   avatar: string;
+//   // 介绍
+//   desc?: string;
+// }

src/api/sys/user.ts

@@ -3,6 +3,7 @@ import { LoginParams, LoginResultModel, GetUserInfoModel } from './model/userMod
 import { encodeStr } from '/@/utils/encodeUtil';
 import { ErrorMessageMode } from '/#/axios';
 import { ContentTypeEnum } from '/@/enums/httpEnum';
+
 // import { encode } from 'js-base64';
 
 enum Api {

src/views/scenes/liveDrawer.vue

@@ -6,6 +6,7 @@
     :title="getTitle"
     width="60%"
     @ok="handleSubmit"
+    @close="handleClose"
   >
     <div class="entry-x">
       <BasicForm @register="registerForm">
@@ -14,6 +15,23 @@
           <div ref="wrapRef" style="width: 100%; height: 400px"></div>
           <!-- </Card> -->
         </template>
+        <!-- ="{ model, field }" -->
+        <template #detailAddr>
+          <a-input
+            class="live-drawer"
+            v-bind="$attrs"
+            v-model:value="detailAddr"
+            :allowClear="true"
+            placeholder=""
+          >
+            <template #addonAfter>
+              <a-button type="primary" class="mr-10px" @click="handleMapSearch">
+                {{ t('common.queryText') }}
+              </a-button>
+              <a-button @click="handleMapReset"> {{ t('common.resetText') }}</a-button>
+            </template>
+          </a-input>
+        </template>
       </BasicForm>
     </div>
   </BasicDrawer>
@@ -45,7 +63,19 @@
     emits: ['success', 'register'],
     setup() {
       const isUpdate = ref(true);
+      const detailAddr = ref('');
       const wrapRef = ref<HTMLDivElement | null>(null);
+      interface AddressComponentType {
+        city: string;
+        district: string;
+        province: string;
+      }
+      interface GeocodesType {
+        adcode: string;
+        addressComponent: AddressComponentType;
+        formattedAddress: string;
+      }
+      let map;
       // Lat(120.262337, 30.178285),
       const defaultAddress = reactive({
         address: '山阴路688号恒隆广场B座1217',
@@ -138,6 +168,7 @@
             },
             onChange: (data) => {
               console.log('data', data);
+              defaultAddress.location = data;
             },
           },
           colProps: {
@@ -148,6 +179,7 @@
           field: 'detailAddr',
           label: t('routes.scenes.detailAddr'),
           component: 'Input',
+          slot: 'detailAddr',
           colProps: {
             span: 10,
           },
@@ -161,6 +193,14 @@
             span: 20,
           },
         },
+        // {
+        //   field: 'livePic',
+        //   label: '直播间图片',
+        //   component: 'Upload',
+        //   colProps: {
+        //     span: 20,
+        //   },
+        // },
       ];
       // updateSchema, validate
       const [registerForm, { resetFields, setFieldsValue, updateSchema }] = useForm({
@@ -194,21 +234,13 @@
         const wrapEl = unref(wrapRef);
         console.log('wrapEl', wrapEl);
         if (!wrapEl) return;
-        const AMap = (window as any).AMap;
-        console.log('AMap', AMap);
+
         // center: [this.longitude || 120.262337, this.latitude || 30.178285],
         // const geocoder = new AMap.Geocoder({});
-        interface AddressComponentType {
-          city: string;
-          district: string;
-          province: string;
-        }
-        interface GeocodesType {
-          adcode: string;
-          addressComponent: AddressComponentType;
-          formattedAddress: string;
-        }
-        const map = new AMap.Map(wrapEl, {
+
+        const AMap = (window as any).AMap;
+
+        map = new AMap.Map(wrapEl, {
           zoom: 18,
           center: [120.262337, 30.178285],
           viewMode: '3D',
@@ -242,17 +274,18 @@
                 });
                 await setFieldsValue({
                   location: defaultAddress.location,
+                  // detailAddr: defaultAddress.address,
                 });
+                detailAddr.value = defaultAddress.address;
               }
             }
           });
+          const marker = new AMap.Marker({
+            position: new AMap.LngLat(defaultAddress.lng, defaultAddress.lat),
+            title: 'lala',
+          });
+          map && map.add(marker);
         });
-
-        const marker = new AMap.Marker({
-          position: new AMap.LngLat(defaultAddress.lng, defaultAddress.lat),
-          title: 'lala',
-        });
-        map.add(marker);
       }
 
       function getCodeArray(code: string) {
@@ -262,9 +295,96 @@
       }
       const getTitle = computed(() => (!unref(isUpdate) ? '新增直播间' : '编辑直播间'));
 
-      async function handleSubmit() {}
+      async function handleSubmit() {
+        map && map.destroy();
+      }
+      async function handleClose() {
+        map && map.destroy();
+      }
+      async function handleMapSearch() {
+        if (detailAddr.value?.length > 0) {
+          console.log('detailAddr.value', detailAddr.value);
+          const AMap = (window as any).AMap;
+          console.log('adcode', defaultAddress.location[2]);
+          AMap.plugin('AMap.Geocoder', function () {
+            const geocoder = new AMap.Geocoder({
+              // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
+              city:
+                defaultAddress.location[2] ||
+                defaultAddress.location[1] ||
+                defaultAddress.location[0],
+              // adcode: defaultAddress.location[2],
+              // citycode: '0571',
+            });
+            console.log('geocoder', geocoder);
+            geocoder.getLocation(detailAddr.value, async function (status, result) {
+              if (status === 'complete' && result.info === 'OK') {
+                // result中对应详细地理坐标信息
+                console.log('result', result);
+                const { geocodes } = result;
+                if (geocodes?.length > 0) {
+                  // map.setCenter([lng, lat]);
+                  const { adcode, addressComponent, formattedAddress, location } =
+                    geocodes[0] as any as GeocodesType;
+                  console.log('location', location);
+                  map.setCenter(location);
+                  const marker = new AMap.Marker({
+                    position: new AMap.LngLat(location.lng, location.lat),
+                    title: formattedAddress,
+                  });
+                  map.add(marker);
+                  defaultAddress.location = getCodeArray(adcode);
+                  await updateSchema({
+                    field: 'location',
+                    componentProps: {
+                      displayRenderArray: [
+                        addressComponent.province,
+                        addressComponent.city,
+                        addressComponent.district,
+                      ],
+                    },
+                  });
+                  await setFieldsValue({
+                    location: defaultAddress.location,
+                    // detailAddr: defaultAddress.address,
+                  });
+                  //   detailAddr.value = defaultAddress.address;
+                }
+              }
+            });
+          });
+        }
+      }
+      async function handleMapReset() {
+        detailAddr.value = '山阴路688号恒隆广场B座1217';
+        handleMapSearch();
+      }
 
-      return { registerDrawer, registerForm, getTitle, handleSubmit, wrapRef };
+      return {
+        detailAddr,
+        registerDrawer,
+        registerForm,
+        getTitle,
+        handleSubmit,
+        wrapRef,
+        handleMapSearch,
+        handleMapReset,
+        handleClose,
+        t,
+      };
     },
   });
 </script>
+<style lang="less">
+  .live-drawer {
+    .ant-input-group-addon {
+      padding-right: 0;
+      background-color: transparent;
+      border: none;
+
+      button {
+        font-size: 14px;
+      }
+    }
+  }
+</style>