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

<template>
  <div class="layer" 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> 成员管理（{{ data?.length }}）</span>
          <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="userMsg">
              <div class="avatar">
                <img
                  :src="
                    i?.Avatar ||
                    require('@/assets/images/rtcLive/avatar_small@2x.png')
                  "
                  alt=""
                />
              </div>
              <div class="name">{{ i.Nickname }}</div>
            </div>
            <div class="button" v-if="currentListUser?.Role == 'leader'">
              <div
                class="micBtn"
                :class="i.IsWords ? 'ban_speak_on' : 'ban_speak_off'"
                :wo="i.IsWords"
                @click="userCanSpeak(i)"
              ></div>
              <!-- <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 } from "/@/store/modules/rtc";
import avatarSmall from "/@/assets/images/rtcLive/avatar_small@2x.png";
import { watchEffect } from "vue";

// 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);
});
const emit = defineEmits(["openMember", "closeMember"]);

function closeMember(): void {
  emit("closeMember");
}
function userCanSpeak() {}
</script>

<style lang="scss">
@import "./chatroom.scss";
</style>