udpate

package.json

@@ -37,7 +37,7 @@
     "vue-i18n": "^9.2.2",
     "vue-router": "4",
     "vue3-autocounter": "^1.0.6",
-    "vue3-otp-input": "^0.3.7"
+    "vue3-otp-input": "^0.3.8"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.6",

pnpm-lock.yaml

@@ -38,7 +38,7 @@ specifiers:
   vue-router: '4'
   vue-tsc: ^0.40.4
   vue3-autocounter: ^1.0.6
-  vue3-otp-input: ^0.3.7
+  vue3-otp-input: ^0.3.8
 
 dependencies:
   '@ant-design/icons-vue': 6.1.0_vue@3.2.41
@@ -57,7 +57,7 @@ dependencies:
   vue-i18n: 9.2.2_vue@3.2.41
   vue-router: 4.1.6_vue@3.2.41
   vue3-autocounter: 1.0.6_vue@3.2.41
-  vue3-otp-input: 0.3.7_vue@3.2.41
+  vue3-otp-input: 0.3.8_vue@3.2.41
 
 devDependencies:
   '@types/lodash-es': 4.17.6
@@ -2696,8 +2696,8 @@ packages:
       vue: 3.2.41
     dev: false
 
-  /vue3-otp-input/0.3.7_vue@3.2.41:
-    resolution: {integrity: sha512-MkUxCMTWrru5GJ+u567ZlAtboWlmaUBONgBt4TdJFjWzwERDg78Sg/6z5pJtv+Th8Z+vcua6zsshRlOgDaqKyA==}
+  /vue3-otp-input/0.3.8_vue@3.2.41:
+    resolution: {integrity: sha512-SZSxCM1scYR/psGbRZR1gfQu2CrtLAkzcTSCKDWc2GlHz/s78+iR26LMWyw4JyMyXFse3Hl5pPzsgRqhTAPbDw==}
     engines: {node: '>=14.0.0', npm: '>=7.0.0'}
     peerDependencies:
       vue: ^3.0.*

src/api/room.ts

@@ -24,8 +24,9 @@ type SRoom = {
   visitPassword?: string,
   maxMan?: number,
   isRoamMode?: boolean,
-  freeRoamLock?: boolean
-  takeLookLock?: boolean
+  freeRoamLock?: number
+  takeLookLock?: number
+  userObjList?: AuthUser[]
 }
 
 export interface RoomScene {
@@ -34,6 +35,10 @@ export interface RoomScene {
   cover: string
 }
 
+export type AuthUser = {
+  userName: string
+  useTimeList: Dayjs[]
+}
 export interface Room {
   id: number
   title: string
@@ -47,8 +52,9 @@ export interface Room {
   visitPassword?: string,
   maxMan?: number,
   isRoamMode?: boolean,
-  freeRoamLock?: boolean
-  takeLookLock?: boolean
+  freeRoamLock?: number
+  takeLookLock?: number
+  userObjList?: AuthUser[]
 }
 
 export type Rooms = Room[]
@@ -64,6 +70,7 @@ const serverToLocal = (sroom: SRoom): Room => ({
   useTimeList: sroom.useTimeList,
   maxMan: sroom.maxMan,
   visitPassword: sroom.visitPassword,
+  userObjList: sroom.userObjList
 })
 const localToServer = (room: Room): SRoom => ({
   roomId: room.id,
@@ -77,6 +84,9 @@ const localToServer = (room: Room): SRoom => ({
   useTimeList: room.useTimeList,
   maxMan: room.maxMan,
   visitPassword: room.visitPassword,
+  takeLookLock: room.takeLookLock || 0,
+  freeRoamLock: room.freeRoamLock || 0,
+  userObjList: room.userObjList
 })
 
 export const fetchRomms = async (): Promise<Rooms> => {

src/api/user.ts

@@ -1,5 +1,6 @@
 import axios from './instance'
 import { GET_USER } from './constant'
+import { Dayjs } from 'dayjs'
 
 export interface User {
   nickname: string
@@ -25,6 +26,6 @@ export const fetchUser = async (): Promise<User> => {
 export const postLogout = () => axios.post('/takelook/fdLogout')
 
 
-export const addAuthUser = async (userName: string): Promise<any> => {
-  return await axios.get<SUser>('takelook/roomUser/addUserCheck', { params: { userName } })
+export const addAuthUser = async (userName: string): Promise<boolean> => {
+  return await axios.get<boolean>('takelook/roomUser/addUserCheck', { params: { userName } })
 }

src/shared/mount.ts

@@ -17,7 +17,7 @@ export function mount<P>(
   if (app && app._context) vNode.appContext = app._context
   if (el) {
     render(vNode, el)
-    console.log('render', el)
+    // console.log('render', el)
   } else if (typeof document !== 'undefined') {
     render(vNode, (el = document.createElement('div')))
   }

src/store/modules/room.ts

@@ -22,12 +22,6 @@ export type Room = SRoom & {
   miniCode?: string
   leaderMiniCode?: string
   scenes: Scenes
-  // useTimeList?: string[],
-  // visitPassword?: string,
-  // maxMan?: number,
-  // isRoamMode?: boolean,
-  // freeRoamLock?: boolean
-  // takeLookLock?: boolean
 }
 
 export interface ShareLinkType {
@@ -106,7 +100,6 @@ export const useRoomStore = defineStore('room', {
       await this.fetchList()
     },
     async insert(room: Omit<Room, 'id'>) {
-      // debugger
       await insertRoom(room, this.getNums(room))
       // const sroom =
       // this.list.push({ ...room, ...sroom })
@@ -114,6 +107,7 @@ export const useRoomStore = defineStore('room', {
     },
     async setRoomScenes(room: Room) {
       const roomInfo = await fetchRoomDetail(room.id)
+      // debugger
       // const scenes = await fetchRoomScenes(room.id)
       room.scenes = roomInfo.sceneData.map(serverToLocal)
       return roomInfo

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

@@ -134,9 +134,21 @@
             />
           </a-form-item>
           <a-form-item label="授权" name="scenes" style="margin-bottom: 2px">
-            <a-button type="primary" ghost @click="authvisible = true">
+            <a-button
+              type="primary"
+              size="small"
+              ghost
+              @click="authvisible = true"
+            >
               <template #icon><plus-outlined /></template>添加用户</a-button
             >
+
+            <a-button
+              style="margin-left: 5px"
+              v-for="lab in current.userObjList"
+              size="small"
+              >{{ lab.userName }}</a-button
+            >
           </a-form-item>
           <a-form-item
             label="设置房间人数"
@@ -146,7 +158,7 @@
             :rules="[{ required: true, message: t('room.form.titleRequired') }]"
           >
             <a-input-number
-              v-model:value.trim="current.maxMan"
+              v-model:value="current.maxMan"
               placeholder="请输入房间人数"
               :min="5"
               :max="50"
@@ -157,17 +169,6 @@
               </template>
             </a-input-number>
           </a-form-item>
-
-          <!-- <a-form-item label="设置模式" name="mode" style="margin-bottom: 2px">
-            <a-checkbox-group
-              v-model:value="current.isRoamMode"
-              :options="[
-                { label: '带看', value: 'Pear' },
-                { label: '自由观看模式', value: 'Apple' }
-              ]"
-            />
-       
-          </a-form-item> -->
         </a-form>
       </div>
     </a-modal>
@@ -178,18 +179,38 @@
       centered
       @ok="handleAuthConfirm"
     >
-      <a-form-item label="用户账号" name="authTargetUser">
-        <a-input
-          v-model:value="authTargetUser"
-          placeholder="请输入完整的账号"
-        />
-      </a-form-item>
+      <a-form layout="inline" :model="authformState">
+        <a-form-item
+          label="用户账号"
+          name="userName"
+          style="margin-bottom: 20px"
+          :rules="[{ required: true, message: `请输入房间使用时间` }]"
+        >
+          <a-input
+            v-model:value="authformState.userName"
+            placeholder="请输入完整的账号"
+          />
+        </a-form-item>
+        <a-form-item
+          label="使用时间"
+          name="useTimeList"
+          style="margin-bottom: 20px"
+          :rules="[{ required: true, message: `请输入房间使用时间` }]"
+        >
+          <a-range-picker
+            :show-time="{ format: 'HH:mm' }"
+            format="YYYY-MM-DD HH:mm:ss"
+            style="width: 90%"
+            v-model:value="authformState.useTimeList"
+          />
+        </a-form-item>
+      </a-form>
     </a-modal>
   </a-config-provider>
 </template>
 
 <script lang="ts">
-import { ref, defineComponent, reactive, computed, unref } from 'vue'
+import { ref, UnwrapRef, defineComponent, reactive, computed, unref } from 'vue'
 import { createRoom, useRoomStore } from '@/store/modules/room'
 import { props } from './props'
 import { message } from 'ant-design-vue'
@@ -201,7 +222,7 @@ import type { Scene } from '@/store/modules/scene'
 import type { FormInstance } from 'ant-design-vue'
 import { useI18n } from '@/hook/useI18n'
 import { useLocale } from '@/locales/useLocale'
-import dayjs from 'dayjs'
+import dayjs, { Dayjs } from 'dayjs'
 import { addAuthUser } from '@/api'
 
 // const titleValidator = ref({
@@ -211,6 +232,11 @@ import { addAuthUser } from '@/api'
 //       : Promise.reject(new Error('No spaces allowed'))
 // })
 
+interface AuthUserFormState {
+  userName: string
+  useTimeList: Dayjs[]
+}
+
 export default defineComponent({
   name: 'EditRoom',
   components: { EditScenes, VOtpInput },
@@ -218,7 +244,11 @@ export default defineComponent({
   setup(props) {
     const visible = ref(true)
     const authvisible = ref(false)
-    const authTargetUser = ref('')
+
+    const authformState: UnwrapRef<AuthUserFormState> = reactive({
+      userName: '',
+      useTimeList: []
+    })
     const { getAntdLocale } = useLocale()
     const roomStore = useRoomStore()
     const { getLocale } = useLocale()
@@ -235,9 +265,13 @@ export default defineComponent({
     if (current.useTimeList?.length) {
       current.useTimeList = current.useTimeList?.map(i => dayjs(i))
     }
-    if (!current.visitPassword?.length) {
+    if (!current.visitPassword) {
       current.visitPassword = ''
     }
+    if (!current.userObjList) {
+      current.userObjList = []
+    }
+
     const deleteScene = (scene: Scene) => {
       const index = current.scenes.indexOf(scene)
       if (~index) {
@@ -255,9 +289,11 @@ export default defineComponent({
         current.visitPassword.length < 4
       ) {
         return message.error('密码缺失，请填写完整！')
+      } else {
+        current.takeLookLock = 1
       }
       current.cover = current.scenes[0].cover
-      console.log('current', current)
+      console.log('save', current)
       props.onSave && props.onSave(current)
       visible.value = false
     }
@@ -279,10 +315,21 @@ export default defineComponent({
     }
 
     const handleAuthConfirm = async () => {
-      if (unref(authTargetUser)?.length) {
-        const userName = unref(authTargetUser)
+      if (authformState.userName?.length) {
+        const userName = authformState.userName
         const res = await addAuthUser(userName)
-        console.log('res', res)
+        if (res) {
+          const isExist = current.userObjList?.findIndex(
+            i => i.userName === authformState.userName
+          )
+          console.log('isExist', isExist === -1)
+          if (isExist === -1) {
+            current.userObjList?.push(authformState)
+          }
+
+          authvisible.value = false
+          console.log('current', current)
+        }
       } else {
         message.error('用户账号不能为空！')
       }
@@ -305,7 +352,9 @@ export default defineComponent({
       otpInput,
       authvisible,
       handleAuthConfirm,
-      authTargetUser
+      authformState
+      // authTargetUser,
+      // authTargetUserTime
     }
   }
 })

src/views/room/list.vue

@@ -185,6 +185,7 @@ const editRoom = async (room?: Room) => {
       message.error(t('room.roomOnfired'))
       return
     }
+    room = Object.assign({}, room, scenes)
   }
   // debugger
   renderModal(EditRoom, {