imChat/src/TUIKit/TUIComponents/container/TUIChat/manage-components/manage-mute.vue

<template>
  <main class="member">
    <n-spin :show="muteLoading" stroke="#198CFE">
        <div class="sectionSearch">
            <n-input
                class="TheSearch noBorder"
                style="--n-font-size: 12px; --n-height: 35px; --n-caret-color: #198cfe; --n-border-hover: 1px solid #198cfe; --n-border-focus: 1px solid #198cfe; --n-loading-color: #198cfe; --n-box-shadow-focus: 0 0 0 2px rgba(25 140 254, 0.2)"
                round
                clearable
                placeholder="请输入群成员名称"
                v-model:value="keyword"
                @keyup="onKeyup"
            >
                <template #prefix> <span class="icon-search-input"></span></template>
                <template #suffix><n-button @click="debouncedRequest('')" round color="#198cfe" >搜索</n-button></template>
            </n-input>
        </div>
        <ul class="list">
        <li class="list-item" v-for="(item, index) in list" :key="index" @click="onSelectItem(item)">
            <aside>
            <!-- icon icon-selected -->
            <i :class="['icon', isSelect(item) ? 'icon-selected' : 'icon-unselected']"></i>
            <img class="avatar" :src="item?.avatar || 'https://oss.dayaedu.com/news-info/07/1690787574969.png'" onerror="this.src='https://oss.dayaedu.com/news-info/07/1690787574969.png'" />
            <span class="name">{{ item?.nickname || item?.userID }}</span>
            </aside>
            <!-- <i v-if="item.role !== 'Owner' && isShowDel" class="icon icon-del" @click="submit(item)"></i> -->
        </li>
        <li class="list-item" v-if="list.length < total && total > 0 && !muteLoading" @click="getMore">
            {{ $t(`TUIChat.manage.查看更多`) }}
        </li>
        </ul>
        <div class="theEmpty" v-if="!muteLoading && list.length <= 0" style="height: 75%">
            <img class="emptyImg" src="../../../assets/nomore.png" />
            <p>暂无数据</p>
        </div>
        <div class="footer">
            <div class="selectUser" @click="onSelectAll">
                <i :class="['icon', isSelectAll ? 'icon-selected' : 'icon-unselected']"></i>
                <span>全选(已选择{{ selectList.length || 0 }})：</span>
            </div>
            <div class="userInfo">
                <div class="userList" @click="showMore = true">
                    <img class="avatar" v-for="(item, index) in selectList" :key="index" :src="item?.avatar || 'https://oss.dayaedu.com/news-info/07/1690787574969.png'" onerror="this.src='https://oss.dayaedu.com/news-info/07/1690787574969.png'"  />
                </div>
                <span :class="['muteBtn', selectList.length <=0 ? 'disabled' : '']" @click="submit">
                    {{ currentModel === 'not_mute' ? '禁言' : '解除禁言' }}
                </span>
            </div>
        </div>

         <div v-if="showMore" class="maskMute"></div>
        <div :class="['selectListSection', showMore ? 'show': '']">
            <div class="selectHeader">
                <i class="icon-close" @click="showMore = false"></i>
                <span class="title">已选择 ({{ selectList.length || 0 }})</span>
                <span :class="['sureBtn', selectList.length <=0 ? 'disabled' : '']" @click="showMore = false">确定</span>
            </div>
            <div class="selectContainer">
             <div class="list-item" v-for="(item, index) in selectList" :key="index" @click="onSelectItem(item)">
                <aside>
                  <img class="avatar" :src="item?.avatar || 'https://oss.dayaedu.com/news-info/07/1690787574969.png'" onerror="this.src='https://oss.dayaedu.com/news-info/07/1690787574969.png'" />
                  <span class="name">{{ item?.nickname || item?.userID }}</span>
                </aside>
                <i class="icon icon-remove" ></i>
              </div>
              <div class="theEmpty" v-if="selectList.length <= 0" style="margin-top: 20px;margin-bottom: 0;">
                <img class="emptyImg" src="../../../assets/nomore.png" />
                <p>暂无数据</p>
              </div>
            </div>
        </div>
    </n-spin>
  </main>
</template>

<script lang="ts">
import { defineComponent, watchEffect, reactive, toRefs } from "vue";
import TIM from "@tencentcloud/chat";
import { imGroupGroupMute, imGroupMemberPage } from "../../../../api";
import { useThrottleFn } from "@vueuse/core";
const ManageMember = defineComponent({
  components: {},
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    currentModel: {
        type: String,
        default: '',
    },
    muteLoading: {
        type: Boolean,
        default: false
    },
    total: {
        type: Number,
        default: 0
    },
    conversation: {
      type: Object,
      default: () => ({}),
    },
    isShowDel: {
      type: Boolean,
      default: () => false,
    },
    self: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props: any, ctx: any) {
    const types: any = TIM.TYPES;
    const data: any = reactive({
      conversation: {},
      currentModel: '',
      total: 0,
      muteLoading: false,
      list: [],
      page: 1,
      isShowDel: false,
      self: {},
      keyword: '',
      showMore: false, // 显示更多 
      selectList: [],
      isSelectAll: false, // 是否全部选择
    });

    watchEffect(() => {
        if(data.currentModel !== props.currentModel) {
            data.selectList = []
        }
        data.conversation = props.conversation;
        data.muteLoading = props.muteLoading;
        data.total = props.total;
        data.isShowDel = props.isShowDel;
        data.list = props.list;
        data.self = props.self;
        data.currentModel = props.currentModel;
    });

    const handleRoleName = (item: any) => {
      const { t } = (window as any).TUIKitTUICore.config.i18n.useI18n();
      let name = "";
      console.log(item, data.self, "self");
      switch (item?.groupRoleType) {
        case "Admin":
          name = t("TUIChat.manage.管理员");
          break;
        case "Owner":
          name = t("TUIChat.manage.群主");
          break;
      }
      if (name) {
        name = `(${name})`;
      }
      if (item.imUserId === data.self.userID) {
        name += ` (${t("TUIChat.manage.我")})`;
      }
      return name;
    };

    const submit = async (item: any) => {
    //   ctx.emit("del", [item]);
    try {
        if(data.selectList.length <= 0) return
        const userIds = data.selectList.map((item: any) => {
            return item.userId
        })
        await imGroupGroupMute({
            "groupId": data.conversation?.groupProfile?.groupID,
            "muteTime": -1,
            "groupMute":  data.currentModel === 'not_mute' ? true : false,
            userIds
        })
        onBack()
    } catch {

    }
    };

    const onSelectItem = (item: any) => {
        const index = data.selectList.findIndex(child => child.userId === item.userId)
        if(index === -1) {
            data.selectList.push(item)
        } else {
            data.selectList.splice(index, 1)
        }

        data.isSelectAll = data.list.length === data.selectList.length ? true : false
       
    }

    const isSelect = (item: any)　=> {
        const index = data.selectList.findIndex(child => child.userId === item.userId)
        return index === -1 ? false : true
    }

    const onSelectAll = (item: any) => {
        if(data.list.length === data.selectList.length) {
            data.selectList = []
            data.isSelectAll = false
        } else {
            data.selectList = [...data.list]
            data.isSelectAll = true
        }
    }

    const handleMemberProfileShow = (user: any) => {
      ctx.emit("handleMemberProfileShow", user);
    };

    const onBack = () => {
        ctx.emit("back");
    }

     const onSearch = (val: string) => {
        ctx.emit('search', data.keyword)
    };

    const debouncedRequest = useThrottleFn((val: string) => {
      onSearch(val);
    }, 500);

    const onKeyup = (e: any) => {
      e.stopPropagation();
      if (e.code === "Enter") {
        debouncedRequest(data.keyword);
      }
    };

    return {
      ...toRefs(data),
      submit,
      isSelect,
      debouncedRequest,
      onKeyup,
      onSearch,
      onSelectItem,
      onSelectAll,
      handleRoleName,
      handleMemberProfileShow,
    };
  },
});
export default ManageMember;
</script>

<style lang="scss" scoped>
@import url("../../../styles/common.scss");
@import url("../../../styles/icon.scss");
.member {
    position: relative;
    flex: 1;
    background: #F8F9FC;
  
  .list {
    display: flex;
    flex-direction: column;
    // background: #f4f5f9;
    padding-top: 12px;
    &-item {
      padding: 13px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #ffffff;
      font-size: 14px;
      overflow: hidden;
      cursor: pointer;
      aside {
        display: flex;
        align-items: center;
        width: 100%;
        overflow: hidden;
        .avatar {
            margin-left: 12px;
            flex-shrink: 0;
        }
        .name {
          padding-left: 8px;
          font-weight: 400;
          font-size: 14px;
          color: #000000;
          flex: 1;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 4px;
}


.sectionSearch {
  padding: 4px 12px 0;
}

::deep .TheSearch .n-input--focus {
  .active {
    display: block;
  }

  .default {
    display: none;
  }


  .n-button {
    opacity: 1;
  }
}


.n-spin-container {
    height: 100%;
    :deep(.n-spin-content) {
        min-height: 100%;
        display: flex;
        flex-direction: column;
    }
}

.TheSearch {
  border-radius: 20Px !important;

  &.noBorder {
    --n-border: none !important;
  }

    .n-button {
        :deep(.n-button__content) {
            color: #fff;
        }
    }

  :deep(.n-input-wrapper) {
    padding-left: 12Px;
    padding-right: 4Px;
    height: 35Px !important;
  }

  .n-button {
    height: 26Px;
    font-size: 12Px;
    font-weight: 500;
    width: auto;
    opacity: 0.7;
  }



  .active {
    display: none;
  }

  .active,
  .default {
    width: 14Px;
    height: 14Px;
  }

  &:hover {

    .n-button {
      opacity: 1;
    }

  }
}
.icon-unselected, .icon-selected {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    // width: 100%;
    padding: 0 12px;
    height: 66px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
}
.selectUser {
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 14px;
    color: #777777;
    line-height: 20px;
    flex-shrink: 0;
    cursor: pointer;
    span {
        padding-left: 12px;
    }
}
.userInfo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;

    .userList {
        max-width: 110px;
        overflow-x: auto;
        overflow-y: hidden;
        display: flex;
        align-items: center;
        cursor: pointer;
        .avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            margin-right: 5px;
            &:last-child {
                margin-right: 0;
            }
        }
    }
    .muteBtn {
        cursor: pointer;
        width: 80px;
        line-height: 30px;
        background: #198CFE;
        border-radius: 20px;
        font-weight: 500;
        font-size: 14px;
        color: #FFFFFF;
        text-align: center;
        font-style: normal;

        &.disabled {
            opacity: 0.7;
            cursor: not-allowed;
        }
    }
}
::-webkit-scrollbar {
//   width: 4Px;
  height: 4Px;
  background-color: transparent;
}

::-webkit-scrollbar-track {
  border-radius: 10Px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10Px;
  background-color: #d8d8d8;
}

 .theEmpty {
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   flex: 1;
   margin-bottom: 106px;

   .emptyImg {
     width: 210px;
     height: 210px;
   }
 }

 .selectListSection {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #FFFFFF;
  border-radius: 10px 10px 0px 0px;
  height: 70vh;
  overflow-x: hidden;
  overflow-y: auto;
  // display: none;
  opacity: 0;
  height: 0;
  transition: all .2s ease;
  &.show {
    // display: block;
    opacity: 1;
    height: 70vh;
    transition: all .2s ease;
  }
 }
 .selectHeader {
  padding: 16px 20px 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 99;
  background-color: #fff;

  .icon-close {
    cursor: pointer;
  }

  .title {
    font-weight: 600;
    font-size: 16px;
    color: #131415;
    line-height: 22px;
  }
  .sureBtn {
    cursor: pointer;
    width: 52px;
    line-height: 26px;
    background: #198CFE;
    border-radius: 6px;
    font-weight: 500;
    font-size: 14px;
    color: #FFFFFF;
    text-align: center;
      &.disabled {
            opacity: 0.7;
            cursor: not-allowed;
        }
  }
 }

 .selectContainer {
  .list-item {
    padding: 10px 20px;
    cursor: default;

    &:first-child {
      padding-top: 0;
    }
    .avatar {
      margin-left: 0 !important;
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
    .name {
      padding-left: 11px;
      font-weight: 500;
      font-size: 14px;
      color: #333333;
      line-height: 20px;
    }

    .icon-remove {
      cursor: pointer;
    }
  }
 }

 .maskMute {
  position: absolute;
  left: 0;
  right: 0;
  top: -58px;
  bottom: 0;
  background:rgba(0, 0, 0, 0.6);
 }
</style>