表单完成

src/api/room.ts

@@ -89,10 +89,11 @@ const localToServer = (room: Room): SRoom => ({
   userObjList: room.userObjList
 })
 
-export const fetchRomms = async (): Promise<Rooms> => {
+export const fetchRomms = async (status: number = 1): Promise<Rooms> => {
   const res = await axios.post<PageResult<SRoom>>(GET_ROOM_LIST, {
     pageNum: 1,
-    pageSize: 1000
+    pageSize: 1000,
+    roomStatus: status,
   })
   const rooms = res.list.map(serverToLocal)
   return rooms

src/components.d.ts

@@ -10,6 +10,7 @@ declare module '@vue/runtime-core' {
     AAvatar: typeof import('ant-design-vue/es')['Avatar']
     AButton: typeof import('ant-design-vue/es')['Button']
     ACard: typeof import('ant-design-vue/es')['Card']
+    ACheckboxGroup: typeof import('ant-design-vue/es')['CheckboxGroup']
     ACol: typeof import('ant-design-vue/es')['Col']
     AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
@@ -29,6 +30,7 @@ declare module '@vue/runtime-core' {
     AppstoreOutlined: typeof import('@ant-design/icons-vue')['AppstoreOutlined']
     ARangePicker: typeof import('ant-design-vue/es')['RangePicker']
     ARow: typeof import('ant-design-vue/es')['Row']
+    ASelect: typeof import('ant-design-vue/es')['Select']
     ATable: typeof import('ant-design-vue/es')['Table']
     ATabPane: typeof import('ant-design-vue/es')['TabPane']
     ATabs: typeof import('ant-design-vue/es')['Tabs']

src/store/modules/room.ts

@@ -57,6 +57,8 @@ export const createRoom = (room: Partial<Room>): Room => {
 export const useRoomStore = defineStore('room', {
   state: () => ({
     list: [] as Rooms,
+    endlist: [] as Rooms,
+    roomStatus: 1,
     shareLink: ''
   }),
   getters: {
@@ -80,14 +82,28 @@ export const useRoomStore = defineStore('room', {
 
       return liveStreamURL + '?' + search.toString()
     },
-    filter: state => (keyowrd: string) =>
-      state.list.filter(room => room.title.includes(keyowrd))
+    filter: state => (keyowrd: string) => {
+      if (state.roomStatus === 1) {
+        return state.list.filter(room => room.title.includes(keyowrd))
+      } else {
+        return state.endlist.filter(room => room.title.includes(keyowrd))
+      }
+
+    }
+
   },
   actions: {
+    setRoomStatus(status: number) {
+      this.roomStatus = status
+    },
     async fetchList() {
       const srooms = await fetchRomms()
       this.list = srooms.map(room => ({ ...room, scenes: [] }))
     },
+    async fetchEndList() {
+      const srooms = await fetchRomms(2)
+      this.endlist = srooms.map(room => ({ ...room, scenes: [] }))
+    },
     async delete(room: Room) {
       await deleteRoom(room)
       const index = this.list.indexOf(room)

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

@@ -60,6 +60,7 @@
               :placeholder="t('room.form.titleplaceHolder')"
               :maxlength="15"
               show-count
+              :disabled="isRoomEnd"
             />
           </a-form-item>
           <a-form-item :label="t('room.form.desc')" name="desc">
@@ -68,6 +69,7 @@
               :placeholder="t('room.form.descplaceHolder')"
               :maxlength="200"
               show-count
+              :disabled="isRoomEnd"
             />
           </a-form-item>
           <h4>{{ t('room.form.host') }}</h4>
@@ -84,6 +86,7 @@
               :placeholder="t('room.form.nicknameDesc')"
               :maxlength="15"
               show-count
+              :disabled="isRoomEnd"
             />
           </a-form-item>
           <h4>{{ t('room.form.selectScene') }}</h4>
@@ -95,6 +98,7 @@
           >
           </a-form-item>
           <EditScenes
+            :class="{ disabled: isRoomEnd }"
             :scenes="current.scenes"
             @delete="deleteScene"
             @insert="scene => current.scenes.push(scene)"
@@ -111,6 +115,7 @@
               :show-time="{ format: 'HH:mm' }"
               format="YYYY-MM-DD HH:mm:ss"
               style="width: 80%"
+              :disabled="isRoomEnd"
               v-model:value="current.useTimeList"
             />
           </a-form-item>
@@ -128,6 +133,7 @@
               separator="-"
               :num-inputs="4"
               :should-auto-focus="false"
+              :class="{ disabled: isRoomEnd }"
               :is-input-num="true"
               :conditionalClass="['one', 'two', 'three', 'four']"
               :placeholder="['-', '-', '-', '-']"
@@ -138,17 +144,20 @@
               type="primary"
               size="small"
               ghost
+              :disabled="isRoomEnd"
               @click="authvisible = true"
             >
               <template #icon><plus-outlined /></template>添加用户</a-button
             >
 
-            <a-button
+            <span
+              class="user-label"
               style="margin-left: 5px"
               v-for="lab in current.userObjList"
-              size="small"
-              >{{ lab.userName }}</a-button
             >
+              {{ lab.userName }}
+              <CloseOutlined @click="handleAssistantUseDelete(lab.userName)" />
+            </span>
           </a-form-item>
           <a-form-item
             label="设置房间人数"
@@ -162,6 +171,7 @@
               placeholder="请输入房间人数"
               :min="5"
               :max="50"
+              :disabled="isRoomEnd"
               style="width: 80%"
             >
               <template #addonBefore>
@@ -251,6 +261,7 @@ export default defineComponent({
     })
     const { getAntdLocale } = useLocale()
     const roomStore = useRoomStore()
+    const isRoomEnd = computed(() => roomStore.roomStatus === 2)
     const { getLocale } = useLocale()
     const { t } = useI18n()
     const returnLocale = computed(() => {
@@ -292,6 +303,10 @@ export default defineComponent({
       } else {
         current.takeLookLock = 1
       }
+
+      if (current.visitPassword?.length === 0) {
+        current.takeLookLock = 0
+      }
       current.cover = current.scenes[0].cover
       console.log('save', current)
       props.onSave && props.onSave(current)
@@ -335,6 +350,14 @@ export default defineComponent({
       }
     }
 
+    const handleAssistantUseDelete = (userName: string) => {
+      const users = current.userObjList || []
+      const index = users.findIndex(i => i.userName === userName) 
+      if (index > -1) {
+        current.userObjList?.splice(index, 1)
+      }
+    }
+
     return {
       handleNickRegex,
       returnLocale,
@@ -352,7 +375,9 @@ export default defineComponent({
       otpInput,
       authvisible,
       handleAuthConfirm,
-      authformState
+      authformState,
+      isRoomEnd,
+      handleAssistantUseDelete
       // authTargetUser,
       // authTargetUserTime
     }
@@ -409,6 +434,16 @@ export default defineComponent({
     }
   }
 }
+.disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.user-label {
+  background: #eee;
+  padding: 5px 5px;
+  font-size: 13px;
+}
 </style>
 
 <style lang="scss">

src/views/room/list.vue

@@ -1,6 +1,15 @@
 <template>
   <div ref="headerRef" class="header">
-    <h3>{{ t('room.myRoom') }}({{ roomStore.list.length }})</h3>
+    <div style="display: flex; flex-direction: row">
+      <a-button type="text" @click="roomStore.setRoomStatus(1)">
+        <h3>{{ t('room.myRoom') }}({{ roomStore.list.length }})</h3>
+      </a-button>
+
+      <a-button type="text" @click="roomStore.setRoomStatus(2)">
+        <h3>已结束房间 ({{ roomStore.endlist.length }})</h3>
+      </a-button>
+    </div>
+
     <a-input
       v-model:value="keyword"
       :placeholder="t('room.searchRoom')"
@@ -37,12 +46,19 @@
             @mini-sync="miniSyncRoom(item, 'leader')"
             @edit="editRoom(item)"
           />
-          <a-card v-else class="add-room" hoverable @click="editRoom()">
-            <a-button shape="circle" class="button" type="primary">
-              <plus-outlined class="add-room-icon" />
-            </a-button>
-            <p>{{ t('room.createRoom') }}</p>
-          </a-card>
+          <template v-else>
+            <a-card
+              v-if="!isRoomEnd"
+              class="add-room"
+              hoverable
+              @click="editRoom()"
+            >
+              <a-button shape="circle" class="button" type="primary">
+                <plus-outlined class="add-room-icon" />
+              </a-button>
+              <p>{{ t('room.createRoom') }}</p>
+            </a-card>
+          </template>
         </a-list-item>
       </template>
     </a-list>
@@ -87,12 +103,18 @@ const isMiniApp = ref(import.meta.env.VITE_IS_MINIAPP)
 const addMarked = Symbol('add-room')
 const roomStore = useRoomStore()
 roomStore.fetchList()
+roomStore.fetchEndList()
 
 const { t } = useI18n()
 
 const keyword = ref('')
-const roomList = computed(() => [addMarked, ...roomStore.filter(keyword.value)])
+const roomList = computed(() =>
+  roomStore.roomStatus === 1
+    ? [addMarked, ...roomStore.filter(keyword.value)]
+    : roomStore.filter(keyword.value)
+)
 
+const isRoomEnd = computed(() => roomStore.roomStatus === 2)
 const deleteRoom = (room: Room) => {
   Modal.confirm({
     content: t('room.deletedScenesWaring'),

src/views/room/sign.vue

@@ -1,38 +1,46 @@
 <template>
-  <a-card hoverable class="room-card">
+  <a-card hoverable class="room-card" :class="{ isEnd: isRoomEnd }">
     <template #cover>
       <div class="room-cover">
         <img alt="example" :src="room.cover" />
         <div class="action">
-          <a-button
-            v-if="Number(isMiniApp) === 1"
-            class="botton"
-            shape="round"
-            type="ghost"
-            size="large"
-            @click="$emit('miniSync')"
-          >
-            {{ t('room.startMiniAppLivestreaming') }}
-          </a-button>
-          <a-button
-            v-else
-            class="botton"
-            shape="round"
-            type="ghost"
-            size="large"
-            @click="$emit('webSync')"
-          >
-            <!-- 开始带看 -->
-            {{ t('room.startLivestreaming') }}
-          </a-button>
+          <template v-if="!isRoomEnd">
+            <a-button
+              v-if="Number(isMiniApp) === 1"
+              class="botton"
+              shape="round"
+              type="ghost"
+              size="large"
+              @click="$emit('miniSync')"
+            >
+              {{ t('room.startMiniAppLivestreaming') }}
+            </a-button>
+            <a-button
+              v-else
+              class="botton"
+              shape="round"
+              type="ghost"
+              size="large"
+              @click="$emit('webSync')"
+            >
+              <!-- 开始带看 -->
+              {{ t('room.startLivestreaming') }}
+            </a-button>
+          </template>
+
           <div class="more">
-            <span style="--hover-color: #0076f6" @click="$emit('edit')">
+            <span
+              class="edit"
+              style="--hover-color: #0076f6"
+              @click="$emit('edit')"
+            >
               <i class="iconfont icon-works_editor" />
               <!-- 编辑 -->
-              {{ t('base.edit') }}
+              {{ !isRoomEnd ? t('base.edit') : '查看' }}
               <!-- <edit-outlined /> -->
             </span>
             <span
+              class="share"
               style="--hover-color: rgba(255, 255, 255, 0.5)"
               @click="$emit('share')"
             >
@@ -40,7 +48,11 @@
               <!-- 分享 -->
               {{ t('base.share') }}
             </span>
-            <span style="--hover-color: #fa5555" @click="$emit('delete')">
+            <span
+              class="delete"
+              style="--hover-color: #fa5555"
+              @click="$emit('delete')"
+            >
               <i class="iconfont icon-works_delete" />
               <!-- 删除 -->
               {{ t('base.delete') }}
@@ -66,12 +78,14 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { useI18n } from '@/hook/useI18n'
-import type { Room } from '@/store/modules/room'
+import { Room, useRoomStore } from '@/store/modules/room'
 import Dayjs from 'dayjs'
 
 const isMiniApp = ref(import.meta.env.VITE_IS_MINIAPP)
+const roomStore = useRoomStore()
+const isRoomEnd = computed(() => roomStore.roomStatus === 2)
 
 const { t } = useI18n()
 type RoomSignProps = { room: Room }
@@ -176,6 +190,19 @@ defineEmits<RoomSignEmit>()
 }
 .room-card {
   border-radius: 4px;
+  &.isEnd {
+    .action {
+      cursor: not-allowed;
+      .share {
+        pointer-events: none;
+        opacity: 0.5;
+      }
+      .edit,
+      .delete {
+        cursor: pointer;
+      }
+    }
+  }
 }
 
 .room-card,