update

package.json

@@ -37,7 +37,7 @@
     "vue-i18n": "^9.2.2",
     "vue-router": "4",
     "vue3-autocounter": "^1.0.6",
-    "vue3-otp-input": "^0.3.6"
+    "vue3-otp-input": "^0.3.7"
   },
   "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.6
+  vue3-otp-input: ^0.3.7
 
 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.6_vue@3.2.41
+  vue3-otp-input: 0.3.7_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.6_vue@3.2.41:
-    resolution: {integrity: sha512-08A/33P3dvk8DBQ6ACJ6ajNCNdkJL2Di5CVVLxcYK7+izM4KFMeWsFnZsx2fD0VfLE7t6jpi+cNgNU83nP7/TQ==}
+  /vue3-otp-input/0.3.7_vue@3.2.41:
+    resolution: {integrity: sha512-MkUxCMTWrru5GJ+u567ZlAtboWlmaUBONgBt4TdJFjWzwERDg78Sg/6z5pJtv+Th8Z+vcua6zsshRlOgDaqKyA==}
     engines: {node: '>=14.0.0', npm: '>=7.0.0'}
     peerDependencies:
       vue: ^3.0.*

src/api/room.ts

@@ -9,6 +9,7 @@ import {
 import axios from './instance'
 import type { PageResult, Scene } from './'
 import type { SScene } from './scene'
+import type { Dayjs } from 'dayjs'
 
 type SRoom = {
   roomId: number
@@ -19,6 +20,12 @@ type SRoom = {
   roomCoverUrl: string
   roomViewCount: number
   createTime: string
+  useTimeList?: Dayjs[],
+  visitPassword?: string,
+  maxMan?: number,
+  isRoamMode?: boolean,
+  freeRoamLock?: boolean
+  takeLookLock?: boolean
 }
 
 export interface RoomScene {
@@ -36,6 +43,12 @@ export interface Room {
   cover: string
   leaderName: string
   roomStatus?: number
+  useTimeList?: Dayjs[],
+  visitPassword?: string,
+  maxMan?: number,
+  isRoamMode?: boolean,
+  freeRoamLock?: boolean
+  takeLookLock?: boolean
 }
 
 export type Rooms = Room[]
@@ -48,7 +61,9 @@ const serverToLocal = (sroom: SRoom): Room => ({
   viewCount: sroom.roomViewCount,
   cover: sroom.roomCoverUrl,
   leaderName: sroom.roomHostName,
-  roomStatus: sroom.roomStatus
+  useTimeList: sroom.useTimeList,
+  maxMan: sroom.maxMan,
+  visitPassword: sroom.visitPassword,
 })
 const localToServer = (room: Room): SRoom => ({
   roomId: room.id,
@@ -58,7 +73,10 @@ const localToServer = (room: Room): SRoom => ({
   roomCoverUrl: room.cover,
   roomViewCount: room.viewCount,
   createTime: room.time,
-  roomStatus: room.roomStatus || 0
+  roomStatus: room.roomStatus || 0,
+  useTimeList: room.useTimeList,
+  maxMan: room.maxMan,
+  visitPassword: room.visitPassword,
 })
 
 export const fetchRomms = async (): Promise<Rooms> => {
@@ -76,14 +94,17 @@ export const deleteRoom = async (room: Room) => {
 
 export const insertRoom = async (
   room: Omit<Room, 'id'>,
-  numList: Scene['num'][]
+  numList: Scene['num'][],
+
 ) => {
-  const sroom = await axios.post<SRoom>(SET_ROOM, {
+  const param = {
     ...localToServer({ ...room, id: -1 }),
     roomId: null,
     createTime: null,
     numList
-  })
+  }
+  console.log('param', param)
+  const sroom = await axios.post<SRoom>(SET_ROOM, param)
   return serverToLocal(sroom)
 }
 

src/components.d.ts

@@ -8,7 +8,6 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     AAvatar: typeof import('ant-design-vue/es')['Avatar']
-    ABadgeRibbon: typeof import('ant-design-vue/es')['BadgeRibbon']
     AButton: typeof import('ant-design-vue/es')['Button']
     ACard: typeof import('ant-design-vue/es')['Card']
     ACol: typeof import('ant-design-vue/es')['Col']

src/store/modules/room.ts

@@ -22,7 +22,12 @@ export type Room = SRoom & {
   miniCode?: string
   leaderMiniCode?: string
   scenes: Scenes
-  period?: string[]
+  // useTimeList?: string[],
+  // visitPassword?: string,
+  // maxMan?: number,
+  // isRoamMode?: boolean,
+  // freeRoamLock?: boolean
+  // takeLookLock?: boolean
 }
 
 export interface ShareLinkType {
@@ -48,8 +53,10 @@ export const createRoom = (room: Partial<Room>): Room => {
     desc: '',
     cover: '',
     scenes: [],
-    period: [],
-    ...room
+    useTimeList: [],
+    maxMan: 10,
+    ...room,
+
   }
 }
 
@@ -99,6 +106,7 @@ 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 })

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

@@ -103,52 +103,50 @@
           <a-form-item
             label="使用时间"
             class="select-scene"
-            name="scenes"
+            name="useTimeList"
             style="margin-bottom: 2px"
+            :rules="[{ required: true, message: `请输入房间使用时间` }]"
           >
             <a-range-picker
               :show-time="{ format: 'HH:mm' }"
-              format="YYYY-MM-DD HH:mm"
+              format="YYYY-MM-DD HH:mm:ss"
               style="width: 80%"
-              v-model:value="current.period"
+              v-model:value="current.useTimeList"
             />
           </a-form-item>
 
           <a-form-item
             label="设置密码"
-            class="select-scene"
-            name="scenes"
+            name="visitPassword"
             style="margin-bottom: 2px"
           >
             <v-otp-input
+              v-model:value="current.visitPassword"
               class="otp-container"
-              ref="otpInput"
               input-classes="otp-input"
+              input-type="number"
               separator="-"
               :num-inputs="4"
-              :should-auto-focus="true"
+              :should-auto-focus="false"
               :is-input-num="true"
               :conditionalClass="['one', 'two', 'three', 'four']"
               :placeholder="['-', '-', '-', '-']"
             />
           </a-form-item>
-          <a-form-item
-            label="授权"
-            class="select-scene"
-            name="scenes"
-            style="margin-bottom: 2px"
-          >
+          <a-form-item label="授权" name="scenes" style="margin-bottom: 2px">
             <a-button type="primary" ghost>
               <template #icon><plus-outlined /></template>添加用户</a-button
             >
           </a-form-item>
           <a-form-item
             label="设置房间人数"
-            class="select-scene"
-            name="scenes"
+            class="maxMan"
+            name="maxMan"
             style="margin-bottom: 2px"
+            :rules="[{ required: true, message: t('room.form.titleRequired') }]"
           >
             <a-input-number
+              v-model:value.trim="current.maxMan"
               placeholder="请输入房间人数"
               :min="5"
               :max="50"
@@ -160,16 +158,11 @@
             </a-input-number>
           </a-form-item>
 
-          <a-form-item
-            label="设置模式"
-            class="select-scene"
-            name="mode"
-            style="margin-bottom: 2px"
-          >
+          <a-form-item label="设置模式" name="mode" style="margin-bottom: 2px">
             <!-- v-model:value="value" -->
-            <a-radio-group name="radioGroup">
-              <a-radio value="1">带看</a-radio>
-              <a-radio value="2">自由观看模式</a-radio>
+            <a-radio-group name="radioGroup" v-model:value="current.isRoamMode">
+              <a-radio :value="0">带看</a-radio>
+              <a-radio :value="1">自由观看模式</a-radio>
             </a-radio-group>
           </a-form-item>
         </a-form>
@@ -191,6 +184,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'
 
 // const titleValidator = ref({
 //   validator: (_, value) =>
@@ -215,9 +209,15 @@ export default defineComponent({
       }
       return unref(getLocale)
     })
-
+    const otpInput = ref('')
     const formRef = ref<FormInstance>()
     const current = reactive(createRoom(props.room || {}))
+    if (current.useTimeList?.length) {
+      current.useTimeList = current.useTimeList?.map(i => dayjs(i))
+    }
+    if (!current.visitPassword?.length) {
+      current.visitPassword = ''
+    }
     const deleteScene = (scene: Scene) => {
       const index = current.scenes.indexOf(scene)
       if (~index) {
@@ -230,6 +230,7 @@ export default defineComponent({
         return message.error(t('room.form.addLeastScene'))
       }
       current.cover = current.scenes[0].cover
+      console.log('current', current)
       props.onSave && props.onSave(current)
       visible.value = false
     }
@@ -262,7 +263,9 @@ export default defineComponent({
       // startSync,
       mainURL,
       unScenePng,
-      getAntdLocale
+      getAntdLocale,
+      dayjs,
+      otpInput
     }
   }
 })

src/views/statistic/tab/tab1.vue

@@ -76,23 +76,44 @@
       <a-col :span="12">
         <a-card title="带看次数排行（前5）" :bordered="false">
           <ul class="topic-list">
-            <li>Coffee</li>
-            <li>Tea</li>
-            <li>Milk</li>
-            <li>Milk</li>
-            <li>Milk</li>
+            <li>
+              <p><span>Coffee</span> <span>20,200</span></p>
+            </li>
+            <li>
+              <p><span>Coffee</span> <span>20,200</span></p>
+            </li>
+            <li>
+              <p><span>Coffee</span> <span>20,200</span></p>
+            </li>
+            <li>
+              <p><span>Coffee</span> <span>20,200</span></p>
+            </li>
+            <li>
+              <p><span>Coffee</span> <span>20,200</span></p>
+            </li>
           </ul>
         </a-card>
       </a-col>
       <a-col :span="12">
         <a-card title="留言数排行（前5）" :bordered="false">
-          <ul class="topic-list">
-            <li>Coffee</li>
-            <li>Tea</li>
-            <li>Milk</li>
-            <li>Milk</li>
-            <li>Milk</li>
+           <ul class="topic-list">
+            <li>
+              <p><span>Coffee</span> <span>20,200</span></p>
+            </li>
+            <li>
+              <p><span>Coffee</span> <span>20,200</span></p>
+            </li>
+            <li>
+              <p><span>Coffee</span> <span>20,200</span></p>
+            </li>
+            <li>
+              <p><span>Coffee</span> <span>20,200</span></p>
+            </li>
+            <li>
+              <p><span>Coffee</span> <span>20,200</span></p>
+            </li>
           </ul>
+         
         </a-card>
       </a-col>
     </a-row>
@@ -180,6 +201,15 @@ onMounted(() => {
     counter-increment: li-counter;
     line-height: 20px;
     margin: 15px 0;
+    display: flex;
+      flex-direction: row;
+    > p {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      flex:1;
+
+    }
     &::before {
       content: '' counter(li-counter) '';
       display: inline-block;

src/views/statistic/tab/tab3.vue

@@ -1,30 +1,35 @@
 <template>
   <div>
     <a-row>
-      <div class="container search-container">
-        <a-form
-          layout="inline"
-          :model="formState"
-          @finish="handleFinish"
-          @finishFailed="handleFinishFailed"
-        >
-          <a-form-item label="房间名称" name="roomTitle">
-            <a-input v-model:value="formState.roomTitle" placeholder="房间名称">
-            </a-input>
-          </a-form-item>
-          <a-form-item label="使用时间" name="username">
-            <a-range-picker
-              :show-time="{ format: 'HH:mm' }"
-              format="YYYY-MM-DD HH:mm"
-              style="width: 80%"
-              v-model:value="formState.userTime"
-            />
-          </a-form-item>
-          <a-form-item>
-            <a-button type="primary" html-type="submit"> 确定 </a-button>
-          </a-form-item>
-        </a-form>
-      </div>
+      <a-col :span="24">
+        <div class="container search-container">
+          <a-form
+            layout="inline"
+            :model="formState"
+            @finish="handleFinish"
+            @finishFailed="handleFinishFailed"
+          >
+            <a-form-item label="房间名称" name="roomTitle">
+              <a-input
+                v-model:value="formState.roomTitle"
+                placeholder="房间名称"
+              >
+              </a-input>
+            </a-form-item>
+            <a-form-item label="使用时间" name="username">
+              <a-range-picker
+                :show-time="{ format: 'HH:mm' }"
+                format="YYYY-MM-DD HH:mm"
+                style="width: 80%"
+                v-model:value="formState.userTime"
+              />
+            </a-form-item>
+            <a-form-item>
+              <a-button type="primary" html-type="submit"> 确定 </a-button>
+            </a-form-item>
+          </a-form>
+        </div>
+      </a-col>
     </a-row>
     <a-row>
       <div class="container">