|
|
@@ -0,0 +1,575 @@
|
|
|
+<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="submit">确定</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: 120px;">
|
|
|
+ <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: 650px;
|
|
|
+ overflow-x: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+ // display: none;
|
|
|
+ opacity: 0;
|
|
|
+ height: 0;
|
|
|
+ transition: all .2s ease;
|
|
|
+ &.show {
|
|
|
+ // display: block;
|
|
|
+ opacity: 1;
|
|
|
+ height: 650px;
|
|
|
+ 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>
|
