增加密码锁

.env.development

@@ -4,8 +4,8 @@ VITE_APP_RESOURCE_URL=https://4dkk.4dage.com/
 VITE_APP_CDN_URL=https://4dkk.4dage.com/v4/www/
 # sdk文件地址
 VITE_APP_SDK_DIR=https://4dkk.4dage.com/v4/sdk/4.5.0
-VITE_APP_SOCKET_URL=ws://127.0.0.1:8889
-# VITE_APP_SOCKET_URL=wss://testws.4dkankan.com
+# VITE_APP_SOCKET_URL=ws://127.0.0.1:8889
+VITE_APP_SOCKET_URL=wss://testws.4dkankan.com
 # VITE_APP_SOCKET_URL=wss://221.4.210.172:16666
 # 静态资源目录
 VITE_APP_STATIC_DIR=viewer

package.json

@@ -21,6 +21,7 @@
     "axios": "^1.1.3",
     "clipboard": "^2.0.11",
     "consola": "^2.15.3",
+    "crypto-js": "^4.1.1",
     "dayjs": "^1.11.6",
     "lodash-es": "^4.17.21",
     "pinia": "^2.0.23",

pnpm-lock.yaml

@@ -11,6 +11,7 @@ specifiers:
   clipboard: ^2.0.11
   commitizen: ^4.2.5
   consola: ^2.15.3
+  crypto-js: ^4.1.1
   cz-customizable: ^7.0.0
   dayjs: ^1.11.6
   eslint: ^8.23.1
@@ -50,6 +51,7 @@ dependencies:
   axios: 1.1.3
   clipboard: 2.0.11
   consola: 2.15.3
+  crypto-js: 4.1.1
   dayjs: 1.11.6
   lodash-es: 4.17.21
   pinia: 2.0.23_l7r24p6nevbtlimqmqcwa3ouhu
@@ -2071,6 +2073,10 @@ packages:
       which: 2.0.2
     dev: true
 
+  /crypto-js/4.1.1:
+    resolution: {integrity: sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw==}
+    dev: false
+
   /cssesc/3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}

src/components/chatRoom/dialog/password.vue

@@ -5,12 +5,13 @@
 
       <div class="content">
         <div class="dialog_title">请输入房间密码</div>
-        <div class="user_name">
+        <div class="pass_container">
           <v-otp-input
             class="otp-input-container"
             ref="otpInput"
             input-classes="otp-input"
             separator="-"
+            input-type="password"
             :num-inputs="4"
             :should-auto-focus="true"
             :is-input-num="true"
@@ -32,17 +33,23 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, watchEffect } from 'vue';
-
-  // import Dialog from '/@/components/basic/dialog';
+  import { ref, watchEffect, computed, unref } from 'vue';
+  import md5 from 'crypto-js/md5';
+  import Dialog from '/@/components/basic/dialog';
   import { useI18n } from '/@/hooks/useI18n';
+
   // import { useSocket } from '/@/hooks/userSocket';
   import VOtpInput from 'vue3-otp-input';
+  import { useRoom } from '/@/hooks/useRoom';
+  import { useRtcStore } from '/@/store/modules/rtc';
+
+  const rtcStore = useRtcStore();
   const emit = defineEmits(['closeDialog', 'confirmDialog']);
   const { t } = useI18n();
   // const regex = new RegExp('^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z0-9_]){1,15}$');
 
   const password = ref('');
+  const roomId = computed(() => rtcStore.roomId);
   // const rtcStore = useRtcStore();
   const ifShow = ref(false);
   const props = defineProps({
@@ -52,20 +59,24 @@
     },
   });
   watchEffect(() => {
-    if (props.show) {
-      ifShow.value = props.show;
-    }
+    ifShow.value = props.show;
   });
 
   const closeCreated = () => {
     ifShow.value = false;
-    // const { closeSocket } = useSocket();
-    // emit('closeDialog');
-    // closeSocket();
     emit('closeDialog');
   };
-  const createdConfirm = () => {
-    emit('confirmDialog');
+  const createdConfirm = async () => {
+    const { validPassRoom } = useRoom();
+    if (unref(password).length > 0 && unref(password).length === 4) {
+      const encyrptPassword = md5(unref(password)).toString();
+      const res = await validPassRoom(unref(roomId), encyrptPassword);
+      if (res) {
+        emit('confirmDialog');
+      } else {
+        Dialog.toast({ content: '请正确输入房间密码', type: 'error' });
+      }
+    }
   };
   const handleOnChange = () => {};
 
@@ -171,7 +182,7 @@
         border-bottom-width: 1px;
         border-bottom-color: rgba(255, 255, 255, 0.1);
       }
-      .user_name {
+      .pass_container {
         width: 100%;
         height: 1.11rem;
         padding: 0 0.56rem;
@@ -180,6 +191,8 @@
         line-height: 1.11rem;
         margin: 0.56rem 0;
         position: relative;
+        overflow: hidden;
+        display: flex;
         .limitNum {
           position: absolute;
           right: 0.64rem;
@@ -269,8 +282,9 @@
       }
     }
     .otp-input {
-      width: 80px;
-      height: 60px;
+      width: 100%;
+      min-height: 60px;
+      line-height: 60px;
       padding: 5px;
       margin: 0 10px;
       font-size: 22px;
@@ -278,6 +292,9 @@
       background: rgba(46, 46, 46, 0.9);
       text-align: center;
       caret-color: #ed5d18;
+      &::placeholder{
+        font-size: 22px;
+      }
     }
     /* Background colour of an input field with value */
     .otp-input.is-complete {

src/components/chatRoom/index.vue

@@ -144,7 +144,7 @@
     @confirm-dialog="handleCloseRoom"
   />
   <CreatedName :show="showCreateNameDialog" @confirm-dialog="handleNameConfirm" />
-  <PasswordDialog :show="false" />
+  <PasswordDialog :show="showPasswordDialog" @confirm-dialog="handlePasswordConfirm" />
 </template>
 
 <script lang="ts" setup>
@@ -201,6 +201,7 @@
   const canUndo = ref(false);
   const animateActive = ref(false);
   const showMember = ref(false);
+  const showPasswordDialog = ref(false);
   // const disableMic = ref(false);
   const connectStatus = computed(() => rtcStore.connectStatus);
   const isJoined = computed(() => rtcStore.isJoined);
@@ -264,21 +265,25 @@
   );
 
   //设置socket 参数
-  const startJoin = (callback?: () => void) => {
+  const startJoin = async (callback?: () => void) => {
     consola.info({
       message: initParams,
       tag: 'socket参数',
     });
     rtcStore.setSocketParams(initParams);
+    await nextTick();
+    await initialRoom();
+    const { room } = useRoom();
+    console.log('room', room);
+    if (unref(room)?.takeLookLock === 1) {
+      showPasswordDialog.value = true;
+      return;
+    }
+
     const socket = createSocket();
     initSocketEvent(socket);
     const { createRTCSocket } = useRtcSdk();
-
-    (async () => {
-      await nextTick();
-      await initialRoom();
-      await createRTCSocket();
-    })();
+    await createRTCSocket();
     callback && callback();
   };
   console.log('initParams', rtcStore.userId);
@@ -591,6 +596,13 @@
       muteVideoLeader.value = false;
     }
   };
+  const handlePasswordConfirm = async () => {
+    showPasswordDialog.value = false;
+    const socket = createSocket();
+    initSocketEvent(socket);
+    const { createRTCSocket } = useRtcSdk();
+    await createRTCSocket();
+  };
 </script>
 
 <style scoped lang="scss">

src/components/chatRoom/roomControl.ts

@@ -1,9 +1,11 @@
+import { unref } from 'vue';
 import { useRtcStore } from '/@/store/modules/rtc';
 import consola from 'consola';
 import type { ConsolaLogObject } from 'consola';
 import { handleActions, handleSync, handleReceivePaint, handleJoin } from './controls';
 import type { SocketParams } from '/@/store/modules/rtc';
 import Dialog from '/@/components/basic/dialog';
+import { useRoom } from '/@/hooks/useRoom';
 // 所有socket业务事件集中点
 
 export function initSocketEvent(socket: SocketIOClient.Socket): void {
@@ -19,9 +21,11 @@ export function initSocketEvent(socket: SocketIOClient.Socket): void {
         isClient: false,
       };
       if (rtcStore.role === 'leader') {
+        const { room } = useRoom();
+        const limit = unref(room)?.maxMan || 10;
         params.roomConfig = {
           masterId: rtcStore.userId,
-          limit: 5,
+          limit: limit,
         };
       }
       socket.emit('join', params);

src/hooks/useRoom.ts

@@ -5,7 +5,7 @@ import { useRtcStore } from '../store/modules/rtc';
 
 const roomParam = browser.getURLParam('roomId');
 
-interface roomDataType {
+interface roomDataType extends SceneItemType {
   sceneData: SceneItemType[];
 }
 export interface SceneItemType {
@@ -26,10 +26,12 @@ export interface SceneItemType {
   type: number;
   phone: Nullable<string>;
   bind: boolean;
+  takeLookLock: number;
+  maxMan: number;
 }
 
 export const room = ref<Nullable<roomDataType>>(null);
-export const roomId = roomParam && roomParam.substr(7);
+export const roomId = roomParam;
 export const sceneList = computed<SceneItemType[]>(() => unref(room)?.sceneData || []);
 export const isLeader = browser.getURLParam('role') === 'leader';
 
@@ -64,6 +66,7 @@ function createNewURLEntry(params: roomParamsType) {
 
 export function useRoom() {
   return {
+    room,
     sceneList,
     currentScene,
     changeScene,
@@ -73,6 +76,7 @@ export function useRoom() {
     createNewURLEntry,
     createNewURL,
     getSign,
+    validPassRoom,
   };
 }
 
@@ -109,11 +113,15 @@ export const initialRoom = async () => {
 
 export const enterRoom = async () => {
   if (!isLeader) return;
+  const rtcStore = useRtcStore();
+  const userID = rtcStore.userId || browser.getURLParam('vruserId');
+  console.log('111', room.value);
   await shopAxios.get('/takelook/inOrOutRoom', {
     params: {
       type: 0,
       role: 'leader',
       roomId,
+      userId: userID,
     },
   });
 };
@@ -141,3 +149,12 @@ export const getSign = async (userId: string): Promise<getSignType> => {
   });
   return res.data.data;
 };
+
+export const validPassRoom = async (roomId: string, password: string) => {
+  const res = await shopAxios.post('/takelook/checkRoomVisitPassword', {
+    roomId: roomId,
+    password: password,
+  });
+
+  return res.data?.data || false;
+};

src/store/modules/rtc.ts

@@ -72,15 +72,15 @@ export interface UserInfoType {
 export type RoleType = 'leader' | 'customer';
 
 interface RoomConfigType {
-  limit: IntRange<5, 50>;
+  limit: number;
   masterId: string;
 }
 
-type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N
-  ? Acc[number]
-  : Enumerate<N, [...Acc, Acc['length']]>;
+// type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N
+//   ? Acc[number]
+//   : Enumerate<N, [...Acc, Acc['length']]>;
 
-type IntRange<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;
+// type IntRange<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;
 
 export interface SocketParams {
   userId: string;