daikan-international/src/components/chatRoom/memberList.vue

<template>
  <div class="layer member-list" v-if="show" @click.self="closeMember">
    <div class="memberContent animated" :class="animateActive ? 'fadeInUpBig' : 'fadeOutDownBig'">
      <div class="blurBox"></div>
      <div class="content">
        <div class="memberHeader">
          <span> {{ t('base.memberManager') }} ({{ data?.length }})</span>
          <i class="iconfont"></i>
        </div>
        <div class="memberList">
          <div
            class="memberItem"
            v-for="(i, idx) in data"
            :key="idx"
            :class="i.IsOnline ? 'online' : 'offline'"
          >
            <div class="userMsg">
              <div class="avatar" :class="`${role}`">
                <!-- 头像会存在一次到两次encodeURIComponent -->
                <img
                  :src="
                    i?.Avatar?.length
                      ? decodeURIComponent(decodeURIComponent(i?.Avatar))
                      : defaultAvatar
                  "
                  alt=""
                />
                <div class="avatar-crown" v-show="i.Role === 'leader'"></div>
                <div
                  class="avatar-crown-assistant"
                  v-show="i.Role !== 'leader' && i.IsAssistant"
                ></div>
              </div>
              <div class="name">{{ i.Nickname }}</div>
            </div>
            <div class="button">
              <!-- T人 -->

              <!-- <div class="micBtn remove" @click="isNativeLeader && userCanKick(i)"></div> -->
              <div
                class="micBtn"
                v-if="i?.Role !== 'leader'"
                :class="i.IsWords ? 'ban_speak_on' : 'ban_speak_off'"
                :wo="i.IsWords"
                @click="isLeaderOrAssistant && userCanInput(i)"
              ></div>
              <ImageIcon
                class="assistant_icon"
                v-if="isNativeLeader && i.Role !== 'leader'"
                type="assistants"
                @click="(isNativeLeader || i.IsAssistant) && userCanBeAssistant(i)"
              />
              <ImageIcon
                class="kick_icon"
                v-if="isLeaderOrAssistant && i?.Role !== 'leader'"
                type="kick_user"
                @click="isLeaderOrAssistant && userCanKick(i)"
              />
              <!-- mic -->
              <div
                class="micBtn"
                :class="i.IsMuted ? 'mute_one_mic_off' : 'mute_one_mic_on'"
                @click="isLeaderOrAssistant && userCanSpeak(i)"
              ></div>
              <!-- mic -->
              <!-- <div
                  class="micBtn"
                  :class="i.IsMuted ? 'mute_one_mic_off' : 'mute_one_mic_on'"
                  @click="onMemberMuted(i)"
                ></div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { propTypes } from '/@/utils/propTypes';
  import { UserInfoType, useRtcStore } from '/@/store/modules/rtc';
  import defaultAvatar from '/@/assets/images/rtcLive/avatar_small@2x.png';
  import { computed, watchEffect } from 'vue';
  import { useSocket } from '/@/hooks/userSocket';
  import { useI18n } from '/@/hooks/useI18n';
  import ImageIcon from '/@/components/basic/icon/index.vue';
  import { useMiniApp } from '/@/hooks/useMiniApp';
  import { useRtcSdk } from '/@/hooks/useTRTC';
  // import Dialog from '../basic/dialog';
  const rtcStore = useRtcStore();
  const { t } = useI18n();
  const role = computed(() => rtcStore.role);
  const currentUserId = computed(() => rtcStore.userId);

  const isLeaderOrAssistant = computed(() => rtcStore.isLeader || rtcStore.isAssistant);
  const isNativeLeader = computed(() => rtcStore.isLeader);
  // const isAssistant = computed(() => rtcStore.isAssistant);
  // const animateActive = ref(false);
  // const props =
  defineProps({
    show: propTypes.bool.def(false),
    animateActive: propTypes.bool.def(false),
    data: {
      type: Array as PropType<UserInfoType[]>,
      default: () => [],
    },
    currentListUser: {
      type: Object as PropType<UserInfoType>,
      default: () => {},
    },
  });

  watchEffect(() => {
    // console.log('memberList', props.data);
  });
  // watch(
  //   () => props.data,
  //   (val) => {
  //     if (val.length > 3 && unref(role) == 'customer') {
  //       Dialog.toast({ content: `房间已满员` });
  //       const { closeSocket } = useSocket();
  //       closeSocket();
  //     }
  //   },
  //   { deep: true },
  // );
  const emit = defineEmits(['openMember', 'closeMember']);

  function closeMember(): void {
    emit('closeMember');
  }
  function userCanInput(member: UserInfoType) {
    const { socket } = useSocket();
    member.IsWords = !member.IsWords;
    socket.emit('action', {
      type: 'users-words',
      words: member.IsWords,
      userId: member.UserId,
    });
  }

  function userCanKick(member: UserInfoType) {
    const { socket } = useSocket();
    // member.IsWords = !member.IsWords;
    socket.emit('action', {
      type: 'users-kicked',
      userId: member.UserId,
    });
  }
  function userCanBeAssistant(member: UserInfoType) {
    const { socket } = useSocket();
    member.IsAssistant = !member.IsAssistant;
    socket.emit('action', {
      type: 'set-assistant',
      userId: member.UserId,
      status: member.IsAssistant,
    });
  }
  function userCanSpeak(member: UserInfoType) {
    const { socket } = useSocket();
    const { isUsingMiniApp } = useMiniApp();
    const { unMutedAudio, mutedAudio } = useRtcSdk();
    member.IsMuted = !member.IsMuted;
    socket.emit('action', {
      type: 'users-muted',
      muted: member.IsMuted,
      userId: member.UserId,
    });
    if (member.UserId === currentUserId.value) {
      if (!isUsingMiniApp.value) {
        console.warn('H5-主持人-操作MIC');
        if (member.IsMuted) {
          mutedAudio();
        } else {
          unMutedAudio();
        }
      }
    }
  }
</script>

<style lang="scss">
  @import './chatroom.scss';
  @media screen and (min-width: 768px) {
    .member-list {
      max-width: 11rem;
      width: 11rem;
      margin: 0 auto;
      transform: translate(-50%, 0);
      background: none !important;
      left: 50% !important;
    }
  }
</style>