update

src/components/chatRoom/dialog/createdName.vue

@@ -42,14 +42,14 @@
   import { ref, unref, watchEffect } from 'vue';
 
   import Dialog from '/@/components/basic/dialog';
-  import { useRtcStore } from '/@/store/modules/rtc';
+  // import { useRtcStore } from '/@/store/modules/rtc';
   // import browser from '/@/utils/browser';
   // import Cropper from '@/components/cropper/cropper.vue';
   // Cropper
   const emit = defineEmits(['closeDialog', 'confirmDialog']);
 
   const userName = ref('');
-  const rtcStore = useRtcStore();
+  // const rtcStore = useRtcStore();
   const ifShow = ref(false);
   const props = defineProps({
     show: {
@@ -71,16 +71,9 @@
     if (unref(userName).length === 0) {
       Dialog.toast({ content: '请输入入您的昵称', type: 'error' });
     } else {
-      console.log('userName', unref(userName));
-      rtcStore.setNickName(unref(userName));
-      const search = new URLSearchParams(location.search);
-      search.set('name', decodeURIComponent(unref(userName)));
-      const replaceUrl = location.origin + location.pathname + '?' + search.toString();
-      console.log('replaceUrl', replaceUrl);
-      history.replaceState(null, '', replaceUrl);
       Dialog.toast({ content: '保存成功！', type: 'success' });
       ifShow.value = false;
-      emit('confirmDialog');
+      emit('confirmDialog', unref(userName));
     }
   };
 </script>

src/components/chatRoom/index.vue

@@ -184,7 +184,7 @@
     { deep: true, immediate: true },
   );
   //设置socket 参数
-  const startJoin = () => {
+  const startJoin = (callback?: () => void) => {
     consola.info({
       message: initParams,
       tag: 'socket参数',
@@ -198,9 +198,14 @@
       await createRTCSocket();
     })();
     initialRoom();
+    callback && callback();
   };
+  console.log('initParams', rtcStore.userId);
   const initParams: SocketParams = {
-    userId: browser.getURLParam('vruserId') || `user_${Math.floor(Math.random() * 100000000)}`,
+    userId:
+      browser.getURLParam('vruserId') ||
+      rtcStore.userId ||
+      `user_${Math.floor(Math.random() * 100000000)}`,
     roomId: browser.getURLParam('roomId') || `room_${Math.floor(Math.random() * 100000000)}`,
     role: (browser.getURLParam('role') as RoleType) || 'leader',
     avatar: browser.getURLParam('avatar'),
@@ -214,11 +219,21 @@
     startJoin();
   }
 
-  const handleNameConfirm = () => {
+  const handleNameConfirm = (userName: string) => {
     const rtcStore = useRtcStore();
+    console.log('userName', unref(userName));
+    rtcStore.setNickName(unref(userName));
+    const search = new URLSearchParams(location.search);
+    search.set('name', decodeURIComponent(unref(userName)));
+    // search.set('vruserId', rtcStore.userId);
     initParams.nickname = rtcStore.nickname;
     console.log('输入后', initParams);
-    startJoin();
+    startJoin(() => {
+      search.set('vruserId', rtcStore.userId);
+      const replaceUrl = location.origin + location.pathname + '?' + search.toString();
+      console.log('replaceUrl', replaceUrl);
+      history.replaceState(null, '', replaceUrl);
+    });
   };
 
   onMounted(async () => {
@@ -361,7 +376,7 @@
     });
   };
 
-  const handleCloseRoom = () => {
+  const handleCloseRoom = async () => {
     showCloseDialog.value = false;
     const { closeSocket } = useSocket();
     closeSocket();
@@ -370,7 +385,7 @@
   const handleCreateShare = () => {
     const search = new URLSearchParams();
     search.set('isTour', '0');
-    search.set('vruserId', `user_${Math.floor(Math.random() * 100000000)}`);
+    // search.set('vruserId', `user_${Math.floor(Math.random() * 100000000)}`);
     search.set('role', 'customer');
     search.set('name', '');
     search.set('roomId', `${rtcStore.roomId}`);

src/components/chatRoom/memberList.vue

@@ -11,8 +11,13 @@
           <div class="memberItem" v-for="(i, idx) in data" :key="idx">
             <div class="userMsg">
               <div class="avatar" :class="`${role}`">
+                <!-- 头像会存在一次到两次encodeURIComponent -->
                 <img
-                  :src="i?.Avatar?.length ? decodeURIComponent(i?.Avatar) : defaultAvatar"
+                  :src="
+                    i?.Avatar?.length
+                      ? decodeURIComponent(decodeURIComponent(i?.Avatar))
+                      : defaultAvatar
+                  "
                   alt=""
                 />
                 <div class="avatar-crown" v-show="i.Role === 'leader'"></div>

src/store/modules/rtc.ts

@@ -122,10 +122,16 @@ export const useRtcStore = defineStore({
     baseDialog: defaultBaseDialog,
     ifBaseDialog: false,
   }),
-  persist: {
-    storage: localStorage,
-    paths: ['memberList'],
-  },
+  persist: [
+    {
+      storage: localStorage,
+      paths: ['memberList'],
+    },
+    {
+      storage: sessionStorage,
+      paths: ['userId'],
+    },
+  ],
   getters: {
     checkUserInMemberList() {
       return (userId: string) => this.memberList.find((item) => item.UserId === userId);
@@ -248,6 +254,7 @@ export const useRtcStore = defineStore({
 
     clearMemberList(): void {
       this.memberList = [];
+      this.userId = '';
     },
     updateMemberDatabyId(UserId: string, data: Partial<UserInfoType>) {
       const updateIndex = this.memberList.findIndex((member) => member.UserId === UserId);