im/pages/conversation/conversationList/components/ConversationItem.vue

<template>
	<view @longtap.prevent="longtapConversationItem" @tap.prevent="clickConversationItem" :class="['conversation_item',source.isPinned?'pinned' : '']">
		<view class="left_info">
			<view class="avatar">
				<my-avatar :isGroup="isGroup" :isNotify="isNotify" :src="source.faceURL" :desc="source.showName" size="46" />
				<u-badge max="99" :value="source.unreadCount"></u-badge>
			</view>
			<view class="details">
				<view class="title">
					<text class="conversation_name">
						{{ source.showName }}
					</text>
					<view class="right_desc">
						<text class="send_time">{{ latestMessageTime }}</text>
					</view>
				</view>
				<view class="lastest_msg_wrap">
					<text class="lastest_msg_content">{{ latestMessage }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {SessionType,} from "openim-uniapp-polyfill";
	import MyAvatar from "@/components/MyAvatar/index.vue";
	import UParse from "@/components/gaoyia-parse/parse.vue";
	import {getConversationContent,formatConversionTime,prepareConversationState,} from "@/util/imCommon";

	export default {
		components: {
			MyAvatar,
			UParse,
		},
		props: {
			source: {
				type: Object,
				default: () => {},
			},
		},
		computed: {
			latestMessage() {
				if (this.source.latestMsg === "") return "";
				let parsedMessage;
				try {
					parsedMessage = JSON.parse(this.source.latestMsg);
				} catch (e) {}
				if (!parsedMessage) return "";
				return getConversationContent(parsedMessage);
			},
			latestMessageTime() {
				return this.source.latestMsgSendTime ? formatConversionTime(this.source.latestMsgSendTime) : "";
			},
			isGroup() {
				return this.source.conversationType === SessionType.WorkingGroup;
			},
			isNotify() {
				return this.source.conversationType === SessionType.Notification;
			},
		},
		data() {
			return {};
		},
		methods: {
			clickConversationItem() {
				//console.log(this.source);
				prepareConversationState(this.source);
			},
			longtapConversationItem() {
				//console.log(this.source);
				this.$emit('longtapEvent',this.source);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.conversation_item {
		@include btwBox();
		flex-direction: column;
		position: relative;
		&::after {
			content: " ";
			border-bottom: 1px solid #eee;
			display: inline-block;
			position: absolute;
			left: 140rpx;
			bottom: 0;
			right: 0;
		}
		&.pinned{
			background-color: #ededed;
		}

		&_active {
			background-color: #f3f3f3;
		}

		.left_info {
			@include btwBox();
			width: 100%;
			box-sizing: border-box;
			padding: 12rpx 44rpx 20rpx;
			flex:1;
			.avatar{
				position: relative;
				.u-badge{
					position: absolute;
					right: -6rpx;
					top: -6rpx;
				}
			}
			.details {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				flex:1;
				margin-left: 24rpx;
				height: 46px;
				color: $u-main-color;
				.title{
					@include btwBox();
					.conversation_name {
						@include nomalEllipsis();
						max-width: 40vw;
						font-size: 32rpx;
						font-weight: 400;
					}

					.right_desc {
						@include colBox(true);
						align-items: flex-end;
						width: max-content;
						justify-content: space-between;

						.send_time {
							width: max-content;
							font-size: 24rpx;
							color: #999;
						}

						.u-badge {
							width: fit-content;
						}
					}
				}

				.lastest_msg_wrap {
					display: flex;
					font-size: 24rpx;
					margin: 10rpx 0;
					color: #666;

					.lastest_msg_prefix {
						margin-right: 6rpx;

						&_active {
							color: $u-primary;
						}
					}

					.lastest_msg_content {
						flex: 1;
						margin-right: 160rpx;
						// ::v-deepuni-view {
						@include ellipsisWithLine(1);
						// }
					}
				}
			}
		}
		
	}
</style>