siyu_app/pages/TUIKit/TUIPages/TUIConversation/conversation-list.vue

<template>
	<view class="TUI-conversation-list" @click="dialogID = ''">
		<view class="no-data-box" v-if="conversationList.length == 0 && noticeList.length == 0">
			<image src="https://cos.his.cdwjyyh.com/fs/20240423/cf4a86b913a04341bb44e34bb4d37aa2.png"></image>
			<view class="empty-title">暂无数据</view>
		</view>
		<view v-if="conversationList.length > 0" v-for="(item, index) in conversationList" :key="index"
		style='background-color: #fff;'>
			<view
				class="TUI-conversation-item"
				:class="[dialogID === item.conversationID && 'selected', item.isPinned && 'pinned']"
				@click="handleGotoItem(item)"
				@longpress="handleItemLongpress(item)">
				<aside class="left">
					<image mode="aspectFill" class="avatar" :src="handleItemAvator(item)" />
					<span class="num" v-if="item.unreadCount > 0 && item.messageRemindType !== 'AcceptNotNotify'">
						{{ item.unreadCount > 99 ? '99+' : item.unreadCount }}
					</span>
					<span class="num-notNotify" v-if="item.unreadCount > 0 && item.messageRemindType === 'AcceptNotNotify'"></span>
				</aside>
				<main class="content">
					<header class="content-header">
						<label>
							<p class="name">{{ handleItemName(item) }}</p>
						</label>
					</header>
					<footer class="content-footer">
						<span class="content-footer-unread" v-if="item.unreadCount > 0 && item.messageRemindType === 'AcceptNotNotify'">
							[{{ item.unreadCount > 99 ? '99+' : item.unreadCount }}条]
						</span>
						<span class="message-text">{{ handleItemMessage(item.lastMessage) }}</span>
						<view class="conversation-line"></view>
					</footer>
					<view class="item-footer">
						<span class="time">{{ handleItemTime(item.lastMessage.lastTime) }}</span>
						<image class="mute-icon" v-if="item.messageRemindType === 'AcceptNotNotify'" src="../../assets/icon/mute.svg"></image>
					</view>
				</main>
			
				<view class="dialog-box dialog-item" v-if="item.conversationID === dialogID">
					<view class="conversation-options" @click.stop="handleConversation('delete', dialogID)">删除会话</view>
					<view class="conversation-options" v-if="!item.isPinned" @tap.stop="handleConversation('ispinned', dialogID)">置顶会话</view>
					<view class="conversation-options" v-if="item.isPinned" @click.stop="handleConversation('dispinned', dialogID)">取消置顶</view>
					<view
						class="conversation-options"
						v-if="item.messageRemindType === '' || item.messageRemindType === 'AcceptAndNotify'"
						@click.stop="handleConversation('mute', dialogID)">
						消息免打扰
					</view>
					<view class="conversation-options" v-if="item.messageRemindType === 'AcceptNotNotify'" @click.stop="handleConversation('notMute', dialogID)">取消免打扰</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, watchEffect } from 'vue';
import { caculateTimeago } from '../../utils/date';
const TUIConversationList = defineComponent({
	props: {
		conversationList: {
			type: Array,
			default: () => {
				return [];
			}
		},
		currentID: {
			type: String,
			default: () => {
				return '';
			}
		},
		noticeList: {
			type: [String, Array],
			default: []
		}
	},
	setup(props: any, ctx: any) {
		const obj = reactive({
			conversationList: [],
			currentID: '',
			isOpened: 'none',
			currentConversation: {},
			dialogID: ''
		});
		watchEffect(() => {
			obj.conversationList = props.conversationList;
			obj.currentID = props.currentID;
		});
		// 处理头像
		const handleItemAvator = (item: any) => {
			let avatar = '';
			switch (item.type) {
				case uni.$TIM.TYPES.CONV_C2C:
					avatar = item?.userProfile?.avatar || 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png';
					break;
				case uni.$TIM.TYPES.CONV_GROUP:
					avatar = item?.groupProfile?.avatar || 'https://web.sdk.qcloud.com/component/TUIKit/assets/group_avatar.png';
					break;
				case uni.$TIM.TYPES.CONV_SYSTEM:
					avatar = item?.groupProfile?.avatar || 'https://web.sdk.qcloud.com/component/TUIKit/assets/group_avatar.png';
					break;
			}
			return avatar;
		};
		// 处理昵称
		const handleItemName = (item: any) => {
			let name = '';
			switch (item.type) {
				case uni.$TIM.TYPES.CONV_C2C:
					name = item?.userProfile.nick || item?.userProfile?.userID || '';
					break;
				case uni.$TIM.TYPES.CONV_GROUP:
					name = item.groupProfile.name || item?.groupProfile?.groupID || '';
					break;
				case uni.$TIM.TYPES.CONV_SYSTEM:
					name = '系统通知';
					break;
			}
			return name;
		};
		// 处理时间
		const handleItemTime = (time: number) => {
			if (time > 0) {
				return caculateTimeago(time * 1000);
			}
			return '';
		};
		// 处理lastMessage
		const handleItemMessage = (message: any) => {
			switch (message.type) {
				case uni.$TIM.TYPES.MSG_TEXT:
					return message.payload.text;
				default:
					return message.messageForShow;
			}
		};

		const handleGotoItem = (item: any) => {
			ctx.emit('handleGotoItem', item);
		};

		const handleItemLongpress = (item: any) => {
			//长按
			obj.currentConversation = item;
			obj.dialogID = item.conversationID;
			if (item.type === 'C2C') {
				obj.currentuserID = item.userProfile.userID;
			} else if (item.type === 'GROUP') {
				obj.currentuserID = item.groupProfile.groupID;
			}
			obj.conversationType = item.type;
		};

		// todo
		const handlerIsOpened = (item: any) => {
			if (item.conversationID === obj.doalogID) {
				return 'right';
			} else {
				return 'none';
			}
		};

		// 删除会话,后续TODO,置顶聊天,消息免打扰
		const handleConversation = (type: string) => {
			switch (type) {
				case 'delete':
					uni.$TUIKit.TUIConversationServer.deleteConversation(obj.dialogID).then((imResponse: any) => {
						const { conversationID } = imResponse.data;
					});
					obj.dialogID = '';
					break;
				case 'ispinned':
					if (type === 'ispinned') {
						const options: any = {
							conversationID: obj.dialogID,
							isPinned: true
						};
						uni.$TUIKit.TUIConversationServer.pinConversation(options).then((imResponse: any) => {
							console.log(imResponse);
						});
					}
					obj.dialogID = '';
					break;
				case 'dispinned':
					if (type === 'dispinned') {
						const options: any = {
							conversationID: obj.dialogID,
							isPinned: false
						};
						uni.$TUIKit.TUIConversationServer.pinConversation(options).then((imResponse: any) => {});
					}
					obj.dialogID = '';
					break;
				case 'mute':
					if (type === 'mute' && obj.conversationType === 'C2C') {
						const options: any = {
							userIDList: [obj.currentuserID],
							messageRemindType: uni.$TIM.TYPES.MSG_REMIND_ACPT_NOT_NOTE
						};
						uni.$TUIKit.TUIConversationServer.muteConversation(options).then((imResponse: any) => {
							console.log(imResponse);
						});
					} else if (type === 'mute' && obj.conversationType === 'GROUP') {
						const options: any = {
							groupID: obj.currentuserID,
							messageRemindType: uni.$TIM.TYPES.MSG_REMIND_ACPT_NOT_NOTE
						};
						uni.$TUIKit.TUIConversationServer.muteConversation(options).then((imResponse: any) => {
							console.log(imResponse);
						});
					}
					obj.dialogID = '';
					break;
				case 'notMute':
					if (type === 'notMute' && obj.conversationType === 'C2C') {
						const options: any = {
							userIDList: [obj.currentuserID],
							messageRemindType: uni.$TIM.TYPES.MSG_REMIND_ACPT_AND_NOTE
						};
						uni.$TUIKit.TUIConversationServer.muteConversation(options).then((imResponse: any) => {
							console.log(imResponse);
						});
					} else if (type === 'notMute' && obj.conversationType === 'GROUP') {
						const options: any = {
							groupID: obj.currentuserID,
							messageRemindType: uni.$TIM.TYPES.MSG_REMIND_ACPT_AND_NOTE
						};
						uni.$TUIKit.TUIConversationServer.muteConversation(options).then((imResponse: any) => {
							console.log(imResponse);
						});
					}
					obj.dialogID = '';
					break;
			}
		};
		return {
			...toRefs(obj),
			handleGotoItem,
			handleItemAvator,
			handleItemTime,
			handleItemMessage,
			handleItemName,
			handleItemLongpress,
			handleConversation,
			handlerIsOpened
		};
	}
});
export default TUIConversationList;
</script>
<style lang="scss" scoped>
.TUI-conversation {
	font-family: PingFangSC-Regular;
	font-weight: 400;
	letter-spacing: 0;

	&-list {
		list-style: none;
	}

	&-item {
		position: relative;
		padding: 12px;
		display: flex;
		align-items: center;
		.left {
			position: relative;
			margin-right: 10px;

			.num {
				font-family: PingFangSC-Regular;
				position: absolute;
				display: inline-block;
				right: -8px;
				top: -8px;
				background: red;
				width: 20px;
				height: 20px;
				font-size: 11px;
				text-align: center;
				line-height: 20px;
				border-radius: 50%;
				color: #ffffff;
				font-weight: 600;
				letter-spacing: 0;
			}

			.num-notNotify {
				position: absolute;
				display: inline-block;
				right: -4px;
				top: -4px;
				background: red;
				width: 11px;
				height: 11px;
				border-radius: 50%;
				color: #ffffff;
			}

			.avatar {
				width: 48px;
				height: 48px;
				border-radius: 6px;
			}
		}

		.content {
			flex: 1;
			// padding-left: 10px;
			position: relative;

			p {
				width: 200px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-weight: 400;
				font-size: 14px;
				color: #999999;
				letter-spacing: 0;
				line-height: 19px;
				font-family: PingFangSC-Regular;
			}

			.conversation-line {
				position: absolute;
				display: block;
				left: 0;
				right: -12px;
				height: 0.5px;
				transform: scaleY(0.2);
				background: #b0b0b0;
				/* padding-top: 10px; */
				bottom: -15px;
			}

			.name {
				font-weight: 400;
				font-size: 16px;
				color: #000000;
				letter-spacing: 0;
				margin-bottom: 5px;
				font-family: PingFangSC-Regular;
			}

			&-header {
				display: flex;
				justify-content: space-between;
				align-items: center;

				label {
					flex: 1;
					font-size: 14px;
					color: #000000;

					.name {
						width: 110px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}

				.time {
					font-size: 12px;
					color: #b0b0b0;
					line-height: 16px;
					display: inline-block;
					max-width: 75px;
					font-weight: 400;
				}
			}

			&-footer {
				color: #999999;
				line-height: 16px;
				display: flex;

				.message-text {
					margin-left: 4px;
					display: block;
					width: 240px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.item-footer {
				position: absolute;
				right: 0;
				top: 0;
				justify-items: center;
				display: flex;
				flex-direction: column;
				align-items: flex-end;

				.time {
					font-size: 12px;
					color: #b0b0b0;
					line-height: 16px;
					display: inline-block;
					max-width: 75px;
					font-weight: 400;
					margin-bottom: 5px;
				}

				.mute-icon {
					display: block;
					width: 20px;
					height: 20px;
				}
			}
		}

		.dialog-box {
			position: absolute;
			z-index: 5;
			background: #fff;
			border: 1px solid #dddddd;
			padding: 15px 20px;
			right: 15px;
			top: 30px;

			&-item {
				top: 60px;
				right: 40px;
				box-shadow: 0 11px 20px 0 rgb(0 0 0 / 30%);
				background: #ffffff;
				border: 1px solid #e0e0e0;
				box-shadow: 0 -4px 12px 0 rgb(0 0 0 / 6%);
				border-radius: 8px;
			}

			.conversation-options {
				height: 35px;
				font-family: PingFangSC-Regular;
				font-weight: 400;
				font-size: 14px;
				color: #4f4f4f;
				letter-spacing: 0;
				line-height: 35px;
			}
		}
	}
}
.selected {
	background: #edf0f5;
}

.pinned {
	background: #eef0f3;
}
</style>