udpate

src/components/chatRoom/controls/actions.ts

@@ -12,10 +12,13 @@ interface ActionDataType {
     data: any,
     members?: UserInfoType[],
     open?: boolean,
-    user?: UserInfoType
+    user?: UserInfoType,
+    userId?: string,
+    words?: boolean
+
 }
 
-export function handleActions({ data, type, members, open, user }: ActionDataType) {
+export function handleActions({ data, type, members, open, user, userId, words }: ActionDataType) {
     switch (type) {
         case 'user-init':
             handleUserInit()
@@ -38,6 +41,7 @@ export function handleActions({ data, type, members, open, user }: ActionDataTyp
             break
 
         case "users-words":
+            handleUserSetWords(userId, words,members)
             break;
         case "leader-dismiss":
             break;
@@ -49,13 +53,19 @@ export function handleActions({ data, type, members, open, user }: ActionDataTyp
         case 'tagclose':
             break;
         case 'tag-image-index':
+            handleTagImageIndex(data)
             break;
-
         case 'ask-currentscene':
+            handleAskCurrentscene(data)
             break;
+        case 'error':
+            Dialog.toast({ content: `房间未找到`, type: "error" });
         default:
             break;
     }
+    if (members?.length) {
+        console.log('发烧的',members)
+    }
 
 }
 
@@ -159,4 +169,30 @@ const handleChangeScene = (data) => {
     // debugger
     changeScene(data)
 
+}
+//
+const handleAskCurrentscene = (data) => {
+
+}
+
+const handleTagImageIndex = (data) => {
+
+}
+
+const handleUserSetWords = (UserId?: string, words?: boolean,  members?:UserInfoType[]) => {
+    const rtcStore = useRtcStore();
+    console.log('handleUserSetWords', UserId, words)
+    if (UserId == rtcStore.userId) {
+   
+        members && rtcStore.setMemberList(members)
+
+        // rtcStore.updateMemberDatabyId(UserId, {
+        //     IsWords: words
+        // })
+        Dialog.toast({
+            content: !words
+                ? `主持人设置了禁言`
+                : `主持人已解除禁言`,
+        });
+    }
 }

src/components/chatRoom/index.vue

@@ -43,8 +43,8 @@
 
         <div class="invitation"></div>
         <!-- @click="openMember" -->
-        <div v-if="isNativeLeader" class="members" @click="openMember"></div>
-        <template v-if="isNativeLeader">
+        <div class="members" @click="openMember"></div>
+        <template >
           <div class="mic_on" v-if="!audioMuted" @click="handleMute"></div>
           <div class="mic_no" v-if="audioMuted" @click="handleNoMute"></div>
         </template>

src/components/chatRoom/memberList.vue

@@ -11,36 +11,9 @@
           <i class="iconfont"></i>
         </div>
         <div class="memberList">
-          <div class="memberItem">
-            <!-- <div class="userMsg">
-              <div class="avatar">
-                <img :src="currentListUser?.Avatar || avatarSmall" alt="" />
-              </div>
-              <div class="name" v-if="currentListUser?.Role == 'leader'">
-                {{ currentListUser?.Nickname }} (主持人,我)
-              </div>
-              <div class="name" v-else>
-                {{ currentListUser?.Nickname }} (我)
-              </div>
-            </div> -->
-
-            <!-- <div class="button" v-if="user_info.Role == 'leader'">
-                <div
-                  @click="setAllMuted(!all_mute_mic)"
-                  class="micBtn mute_all_mic"
-                  :class="{ open_all_mic: all_mute_mic }"
-                ></div>
-              </div> -->
-          </div>
-
-          <div
-            v-show="currentListUser?.UserId != i.UserId && i.Role != 'leader'"
-            class="memberItem"
-            v-for="(i, idx) in data"
-            :key="idx"
-          >
+          <div class="memberItem" v-for="(i, idx) in data" :key="idx">
             <div class="userMsg">
-              <div class="avatar">
+              <div class="avatar" :class="`${role}`">
                 <img
                   :src="
                     i?.Avatar ||
@@ -48,19 +21,25 @@
                   "
                   alt=""
                 />
+                <div class="avatar-crown" v-show="i.Role === 'leader'"></div>
               </div>
               <div class="name">{{ i.Nickname }}</div>
             </div>
-            <div class="button" v-if="currentListUser?.Role == 'leader'">
+            <div class="button">
+              {{ i?.Role }}
               <div
                 class="micBtn"
+                v-if="i?.Role !== 'leader'"
                 :class="i.IsWords ? 'ban_speak_on' : 'ban_speak_off'"
                 :wo="i.IsWords"
-                @click="userCanSpeak(i)"
+                @click="isNativeLeader && userCanSpeak(i)"
               ></div>
+              <!-- mic -->
               <div
-                  class="micBtn mute_one_mic_on"
-                ></div>
+                class="micBtn mute_one_mic_on"
+                v-if="i?.Role == 'leader'"
+              ></div>
+              <!-- mic -->
               <!-- <div
                   class="micBtn"
                   :class="i.IsMuted ? 'mute_one_mic_off' : 'mute_one_mic_on'"
@@ -76,10 +55,14 @@
 
 <script lang="ts" setup>
 import { propTypes } from "/@/utils/propTypes";
-import { UserInfoType } from "/@/store/modules/rtc";
-import avatarSmall from "/@/assets/images/rtcLive/avatar_small@2x.png";
-import { watchEffect } from "vue";
+import { UserInfoType, useRtcStore } from "/@/store/modules/rtc";
+// import avatarSmall from "/@/assets/images/rtcLive/avatar_small@2x.png";
+import { computed, watchEffect } from "vue";
+import { useSocket } from "/@/hooks/userSocket";
+const rtcStore = useRtcStore();
 
+const role = computed(() => rtcStore.role);
+const isNativeLeader = computed(() => rtcStore.isLeader);
 // const animateActive = ref(false);
 const props = defineProps({
   show: propTypes.bool.def(false),
@@ -102,8 +85,14 @@ const emit = defineEmits(["openMember", "closeMember"]);
 function closeMember(): void {
   emit("closeMember");
 }
-function userCanSpeak(member) {
-
+function userCanSpeak(member: UserInfoType) {
+  const socket = useSocket();
+  member.IsWords = !member.IsWords;
+  socket.emit("action", {
+    type: "users-words",
+    words: member.IsWords,
+    userId: member.UserId,
+  });
 }
 </script>
 

src/store/modules/rtc.ts

@@ -2,6 +2,8 @@ import { defineStore } from 'pinia';
 import consola from 'consola'
 import { genTestUserSig } from '/@/utils/generateTestUserSig'
 import type { RemoteStream } from "trtc-js-sdk";
+import sortBy from 'lodash-es/sortBy'
+import { object } from 'vue-types';
 interface RtcState {
     socket: Nullable<SocketIOClient.Socket>,
     showDaoGou: boolean,
@@ -46,15 +48,16 @@ export interface UserInfoType {
     Avatar: string
     Id: string
     InTime: string
-    IsClient: string
-    IsMuted: string
-    IsWords: string
+    IsClient: boolean
+    IsMuted: boolean
+    IsWords: boolean
     JoinTime: string
     Nickname: string
     Role: RoleType
     RoomId: string
     UserId: string
     text?: string
+    order: number
 }
 export type RoleType = 'leader' | 'customer'
 export interface SocketParams {
@@ -180,14 +183,31 @@ export const useRtcStore = defineStore({
             this.chatList.push(content)
         },
         setMemberList(members: UserInfoType[]) {
-            const memberList = members.reduce(function (prev: UserInfoType[], current: UserInfoType) {
+            const memberList = members.reduce((prev: UserInfoType[], current: UserInfoType, index) => {
                 if (prev.findIndex((ele: UserInfoType) => ele.UserId === current.UserId) === -1) {
-                    console.log(current);
+                    // console.log(current);
+                    current.order = index > 1 ? index : 2
+                    if (current.Role === 'leader') {
+                        current.order = 0
+                    }
+                    if (current.Role === this.userId) {
+                        current.order = 1
+                    }
+
                     prev.push(current);
                 }
                 return prev;
             }, []);
-            this.memberList = memberList
+            const sortList = sortBy(memberList, ['order', 'UserId'], ['asc', 'asc'])
+            console.log('sortList', sortList)
+            this.memberList = sortList
+        },
+        updateMemberDatabyId(UserId: string, data: Partial<UserInfoType>) {
+            const updateIndex = this.memberList.findIndex(member => member.UserId === UserId)
+            if (updateIndex > -1) {
+                this.memberList[updateIndex] = Object.assign({}, this.memberList[updateIndex], data)
+            }
+
         },
         mute() {
             this.audioMuted = true