update

src/api/room.ts

@@ -29,6 +29,7 @@ export type SRoom = {
   freeRoamLock?: number
   takeLookLock?: number
   userObjList?: AuthUser[]
+  location?: string
 }
 
 export interface RoomScene {
@@ -73,7 +74,7 @@ const serverToLocal = (sroom: SRoom): Room => ({
   useTimeList: sroom.useTimeList,
   maxMan: sroom.maxMan,
   roomStatus: sroom.roomStatus,
-  hostStatus:sroom.hostStatus,
+  hostStatus: sroom.hostStatus,
   visitPassword: sroom.visitPassword,
   userObjList: sroom.userObjList
 })

src/components.d.ts

@@ -12,6 +12,7 @@ declare module '@vue/runtime-core' {
     ACard: typeof import('ant-design-vue/es')['Card']
     ACol: typeof import('ant-design-vue/es')['Col']
     AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
+    ADrawer: typeof import('ant-design-vue/es')['Drawer']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
     AEmpty: typeof import('ant-design-vue/es')['Empty']
     AForm: typeof import('ant-design-vue/es')['Form']

src/hook/useScript.ts

@@ -0,0 +1,46 @@
+import { onMounted, onUnmounted, ref } from 'vue';
+
+interface ScriptOptions {
+  src: string;
+}
+
+export function useScript(opts: ScriptOptions) {
+  const isLoading = ref(false);
+  const error = ref(false);
+  const success = ref(false);
+  let script: HTMLScriptElement;
+
+  const promise = new Promise((resolve, reject) => {
+    onMounted(() => {
+      script = document.createElement('script');
+      script.type = 'text/javascript';
+      script.onload = function () {
+        isLoading.value = false;
+        success.value = true;
+        error.value = false;
+        resolve('');
+      };
+
+      script.onerror = function (err) {
+        isLoading.value = false;
+        success.value = false;
+        error.value = true;
+        reject(err);
+      };
+
+      script.src = opts.src;
+      document.head.appendChild(script);
+    });
+  });
+
+  onUnmounted(() => {
+    script && script.remove();
+  });
+
+  return {
+    isLoading,
+    error,
+    success,
+    toPromise: () => promise,
+  };
+}

src/views/room/edit-room/index.vue

@@ -1,7 +1,8 @@
 <template>
   <a-config-provider :locale="getAntdLocale">
-    <a-modal
+    <a-drawer
       :visible="visible"
+      placement="right"
       :title="
         isRoomEnd
           ? t('room.endRoomTitle')
@@ -9,27 +10,29 @@
           ? t('room.createRoom')
           : t('room.editRoom')
       "
-      :after-close="onCancel"
-      width="912px"
-      :style="{
-        top: '10px',
-        minWidth: '912px'
-      }"
-      @cancel="visible = false"
+      @close="onCancel"
+      width="476px"
     >
       <template #footer>
-        <a-button class="action-bottom" size="middle" @click="visible = false">
-          {{ t('base.cancel') }}
-        </a-button>
-        <a-button
-          v-if="!isRoomEnd"
-          class="action-bottom"
-          type="primary"
-          size="middle"
-          @click="saveRoom"
-        >
-          {{ t('base.save') }}
-        </a-button>
+        <div class="footer">
+          <a-button
+            class="action-bottom"
+            size="middle"
+            @click="visible = false"
+          >
+            {{ t('base.cancel') }}
+          </a-button>
+          <a-button
+            v-if="!isRoomEnd"
+            class="action-bottom"
+            type="primary"
+            size="middle"
+            @click="saveRoom"
+          >
+            {{ t('base.save') }}
+          </a-button>
+        </div>
+
         <!-- <a-button
         v-if="room"
         class="action-bottom"
@@ -70,6 +73,17 @@
               :disabled="isRoomEnd"
             />
           </a-form-item>
+          <a-form-item label="位置" name="map">
+            <a-input
+              v-model:value.trim="current.visitPassword"
+              :placeholder="t('room.form.titleplaceHolder')"
+              :maxlength="15"
+              show-count
+              :disabled="isRoomEnd"
+            />
+            <div style="margin: 10px 0"></div>
+            <div ref="mapRef" style="width: 100%; height: 194px"></div>
+          </a-form-item>
           <a-form-item :label="t('room.form.desc')" name="desc">
             <a-textarea
               v-model:value="current.desc"
@@ -214,7 +228,7 @@
           </a-form-item>
         </a-form>
       </div>
-    </a-modal>
+    </a-drawer>
 
     <a-modal
       v-model:visible="authvisible"
@@ -280,6 +294,8 @@ import dayjs, { Dayjs } from 'dayjs'
 import duration from 'dayjs/plugin/duration'
 import { addAuthUser } from '@/api'
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
+import { useScript } from '@/hook/useScript'
+import { onMounted } from 'vue'
 dayjs.extend(duration)
 // const titleValidator = ref({
 //   validator: (_, value) =>
@@ -300,7 +316,7 @@ export default defineComponent({
   setup(props) {
     const visible = ref(true)
     const authvisible = ref(false)
-
+    const mapRef = ref<HTMLDivElement | null>(null)
     const authformState: UnwrapRef<AuthUserFormState> = reactive({
       userName: ''
       // useTimeList: []
@@ -451,6 +467,40 @@ export default defineComponent({
       })
       console.log('onRangeChange', event)
     }
+    const onCancel = () => {
+      visible.value = false
+    }
+    const A_MAP_URL =
+      'https://webapi.amap.com/maps?v=2.0&key=e661b00bdf2c44cccf71ef6070ef41b8'
+    const { toPromise } = useScript({ src: A_MAP_URL })
+
+    const initMap = async () => {
+      await toPromise()
+      console.log('mapRef', unref(mapRef))
+      const AMap = (window as any).AMap
+      console.log('AMap', AMap)
+      // const center = [120.262337, 30.178285]
+      const map = new AMap.Map(unref(mapRef), {
+        zoom: 15,
+        // center: center,
+        viewMode: '3D',
+        resizeEnable: true,
+        floorControl: true,
+        showIndoorMap: true
+      })
+
+      AMap.plugin('AMap.Geocoder', function () {
+        var geocoder = new AMap.Geocoder({
+          city: '全国' // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
+        })
+        console.log('geocoder', geocoder)
+      })
+      console.log('map', map)
+    }
+
+    onMounted(() => {
+      initMap()
+    })
 
     return {
       handleNickRegex,
@@ -477,9 +527,9 @@ export default defineComponent({
       createVNode,
       Modal,
       ExclamationCircleOutlined,
-      onRangeChange
-      // authTargetUser,
-      // authTargetUserTime
+      onRangeChange,
+      onCancel,
+      mapRef
     }
   }
 })
@@ -488,12 +538,16 @@ export default defineComponent({
 <style lang="scss" scoped>
 .edit-room-layout {
   display: flex;
-  max-height: 700px;
-  overflow: hidden;
+  // max-height: 700px;
+  min-height: 100%;
+  width: 100%;
+  // overflow: hidden;
 
   .info {
-    max-height: 700px;
+    // max-height: 700px;
+    width: 100%;
     overflow-y: scroll;
+    min-height: 100%;
     overflow-x: hidden;
   }
 }
@@ -506,6 +560,7 @@ export default defineComponent({
   background: #f7f8fa;
   display: flex;
   align-items: center;
+  display: none;
 
   iframe {
     width: 320px;
@@ -549,11 +604,23 @@ export default defineComponent({
     opacity: 0.5;
   }
 }
+.footer {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  > button {
+    &:first-child {
+      margin-right: 10px;
+    }
+  }
+}
 </style>
 
 <style lang="scss">
 .edit-room-layout {
-  min-width: 864px;
+  // min-width: 864px;
+
   .ant-form-item {
     margin-bottom: 16px;
   }

src/views/room/edit-room/scene-list.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-list :grid="{ gutter: 20, column: 4 }" :data-source="current">
+  <a-list :grid="{ gutter: 20, column: 3 }" :data-source="current">
     <template #renderItem="{ item }: { item: Scene | typeof addMarked }">
       <a-list-item class="scene-item">
         <div v-if="item === addMarked" class="add-scene" @click="selectScenes">