im/pages/conversation/chating/components/MessageItem/index.vue

<template>
	<view v-if="!getNoticeContent" :id="`auchor${source.clientMsgID}`" class="message_item"
		:class="{ message_item_self: isSender, message_item_active: isActive }">
		<my-avatar size="42" :desc="source.senderNickname" :src="source.senderFaceUrl" @click="viewDetail" />
		<view class="message_container">
			<view class="message_sender" :style="{ 'flex-direction': !isSender ? 'row-reverse' : 'row' }">
				<text>{{ formattedMessageTime }}</text>
				<text style="margin-left: 2rpx; margin-right: 2rpx">{{ "" }}</text>
				<text v-if="!isSingle">{{ source.senderNickname }}</text>
			</view>
			<view class="message_send_state_box">
				<view style="height: 100%;display: flex;justify-items: center;align-items: center;">
					<view class="message_send_state">
						<u-loading-icon v-if="showSending && !isPreview" />
						<image v-if="isFailedMessage && !isPreview" class="state_img" src="@/static/images/chating_message_failed.png" />
					</view>
				</view>
				<view class="message_content_wrap message_content_wrap_shadow" :id="`message_content_wrap_${source.clientMsgID}`" @longtap.stop.prevent="longtapEvent($event)">
					<text-message-render v-if="showTextRender" :message="source" />
					<media-message-render v-else-if="showMediaRender" :message="source" />
					<error-message-render v-else />
				</view>
			</view>
		</view>
		
	</view>

	<view v-else class="notice_message_container" style="margin: 0 auto;" :id="`auchor${source.clientMsgID}`">
		<text>{{ getNoticeContent }}</text>
	</view>
</template>

<script>
	import {mapGetters} from "vuex";
	import {MessageStatus,MessageType,SessionType,} from "openim-uniapp-polyfill";
	import MyAvatar from "@/components/MyAvatar/index.vue";
	import TextMessageRender from "./TextMessageRender";
	import MediaMessageRender from "./MediaMessageRender";
	import ErrorMessageRender from "./ErrorMessageRender";
	import {noticeMessageTypes} from "@/constant";
	import {tipMessaggeFormat,formatMessageTime} from "@/util/imCommon";

	const textRenderTypes = [MessageType.TextMessage];

	const mediaRenderTypes = [MessageType.PictureMessage];

	export default {
		components: {
			MyAvatar,
			TextMessageRender,
			MediaMessageRender,
			ErrorMessageRender
		},
		props: {
			source: Object,
			isSender: {
				type: Boolean,
				default: false,
			},
			isPreview: Boolean,
			isActive: Boolean,
		},
		data() {
			return {
				toolTipX: 0,
				toolTipY: 0,
				toolTipFlag: false,
				popPostion:"default",
				toolTipData: [],
			};
		},
		computed: {
			...mapGetters([
				"storeCurrentConversation",
				"storeSelfInfo",
			]),
			isSingle() {
				return (
					this.storeCurrentConversation.conversationType === SessionType.Single
				);
			},
			formattedMessageTime() {
				return formatMessageTime(this.source.sendTime);
			},
			showTextRender() {
				return textRenderTypes.includes(this.source.contentType);
			},
			showMediaRender() {
				return mediaRenderTypes.includes(this.source.contentType);
			},
			getNoticeContent() {
				const isNoticeMessage = noticeMessageTypes.includes(
					this.source.contentType
				);
				return !isNoticeMessage ?
					"" :
					tipMessaggeFormat(
						this.source,
						this.$store.getters.storeCurrentUserID
					);
			},
			isSuccessMessage() {
				return this.source.status === MessageStatus.Succeed;
			},
			isFailedMessage() {
				return this.source.status === MessageStatus.Failed;
			},
			showSending() {
				return this.source.status === MessageStatus.Sending && !this.sendingDelay;
			},
		},
		mounted() {
			this.$emit("messageItemRender", this.source.clientMsgID);
			this.setSendingDelay();
		},
		methods: {
			viewDetail(){
				if(this.isSender){
				}else{
					uni.navigateTo({
						url:"/pages/common/userCard/index?sourceID="+this.source.sendID
					})
				}
			},
			setSendingDelay() {
				if (this.source.status === MessageStatus.Sending) {
					setTimeout(() => {
						this.sendingDelay = false;
					}, 2000);
				}
			},
			longtapEvent(e){
				console.log('longtapEvent');
				this.$emit('userEvent',{type:"longtapMsgContent"},this.source);
			},
			
		},
	};
</script>

<style scoped lang="scss">
	.message_item {
		display: flex;
		flex-direction: row;
		padding: 16rpx 44rpx;
		// padding-top: 48rpx;
		position: relative;

		.check_wrap {
			@include centerBox();
			box-sizing: border-box;
			width: 40rpx;
			min-width: 40rpx;
			height: 40rpx;
			min-height: 40rpx;
			border: 2px solid #979797;
			border-radius: 50%;
			margin-top: 16rpx;
			margin-right: 24rpx;

			&_active {
				background-color: #1d6bed;
				border: none;
			}

			&_disabled {
				background-color: #c8c9cc;
			}
		}

		.message_container {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			margin-left: 20rpx;
			// text-align: flex-start;
			max-width: 80%;
			position: relative;

			.message_sender {
				@include nomalEllipsis();
				display: flex;
				max-width: 480rpx;
				// font-size: 24rpx;
				font-size: 0.85rem;
				color: #666;
				margin-bottom: 6rpx;
			}
			.message_content_wrap_shadow {
				box-shadow: 0px 0px 2px rgba(0,0,0,0.1);
			}
			.message_content_wrap {
				@include vCenterBox();
				text-align: flex-start;
				// font-size: 14px;
				color: $uni-text-color;
				width: fit-content;
				word-wrap: break-word;
				word-break: break-word;

				.bg_container {
					padding: 16rpx 24rpx;
					border-radius: 12rpx;
					background-color: #fff;
				}
			}
		}

		.message_send_state_box {
			display: flex;
			flex-direction: row-reverse;
		}

		.message_send_state {
			@include centerBox();
			margin-left: 12rpx;
			// margin-top: 48rpx;
			width: 48rpx;
			height: 48rpx;

			.read_limit_count {
				// font-size: 24rpx;
				font-size: 0.85rem;
				color: #999;
			}

			.state_img {
				width: 16px;
				height: 16px;
			}
		}

		::v-deep.emoji_display {
			width: 24px;
			height: 18px;
			vertical-align: sub;
		}

		&_self {
			flex-direction: row-reverse;

			.check_wrap {
				margin-right: 0;
				margin-left: 24rpx;
			}

			.message_container {
				margin-left: 0;
				margin-right: 20rpx;
				// text-align: end;
				align-items: flex-end;
				.message_content_wrap_shadow {
					box-shadow: 0px 0px 2px #95e261;
				}
				.message_content_wrap {
					flex-direction: row-reverse;
				
					.bg_container {
						border-radius: 12rpx 0 12rpx 12rpx;
						background-color: #94ec68 !important;
					}
				}
			}

			.message_send_state_box {
				flex-direction: row;
			}

			.message_send_state {
				margin-left: 0rpx;
				margin-right: 12rpx;
			}
		}

		&_active {
			background-color: #fdf5e9;
		}
	}
	
	.notice_message_container {
		@include ellipsisWithLine(2);
		text-align: center;
		margin: 24rpx 48rpx;
		// font-size: 24rpx;
		font-size: 0.85rem;
		color: #999;
		position: relative;
	}

	.fade-leave,
	.fade-enter-to {
		opacity: 1;
	}

	.fade-leave-active,
	.fade-enter-active {
		transition: all 0.5s;
	}

	.fade-leave-to,
	.fade-enter {
		opacity: 0;
	}
</style>