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

<template>
	<view v-if="isNoticeMessage" class="notice_message_container" :id="`auchor${source.clientMsgID}`">
		<text>{{ getNoticeContent }}</text>
	</view>
	<view v-else-if="source.contentType == 1519" class="notice_message_container" :id="`auchor${source.clientMsgID}`">
		<text @click="toAnnouncement">{{ announcementElem.opUser.nickname }}更新了群公告</text>
	</view>
	<view v-else class="message_wrapper">
		<template v-if="selectFlag">
			<uni-icons class="selectedIcon" size="30" color="#07c160" type="checkbox-filled" v-if="selectClientMsgIDItems.indexOf(source.clientMsgID)>-1"></uni-icons>
			<uni-icons class="selectedIcon" size="30" color="#ccc" type="circle" v-else></uni-icons>
		</template>
		<view :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)">
						<component v-if="component" :is="component" 
						@messageEvent="onMessageEvent" 
						:isSender="isSender" 
						:message="source" 
						:conversationID="conversationID"
						></component>
					</view>
				</view>
			</view>
		</view>
		<view class="selected_overlay" v-if="selectFlag"></view>
	</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 PictureMessageRender from "./PictureMessageRender";
	import VoiceMessageRender from "./VoiceMessageRender";
	import VideoMessageRender from "./VideoMessageRender";
	import FileMessageRender from "./FileMessageRender";
	import AtTextMessageRender from "./AtTextMessageRender";
	import MergeMessageRender from "./MergeMessageRender";
	import CardMessageRender from "./CardMessageRender";
	import LocationMessageRender from "./LocationMessageRender";
	import CustomMessageRender from "./CustomMessageRender";
	import TypingMessageRender from "./TypingMessageRender";
	import QuoteMessageRender from "./QuoteMessageRender";
	import FaceMessageRender from "./FaceMessageRender";
	import MarkdownMessageRender from "./MarkdownMessageRender";
	import StreamMessageRender from "./StreamMessageRender";
	import OANotificationRender from "./OANotificationRender";
	import NotificationRender from "./NotificationRender";
	
	import ErrorMessageRender from "./ErrorMessageRender";
	import {noticeMessageTypes} from "@/constant";
	import {tipMessaggeFormat,formatMessageTime} from "@/util/imCommon";
	import { ca } from "date-fns/locale";

	export default {
		components: {
			MyAvatar,
			TextMessageRender,
			PictureMessageRender,
			VoiceMessageRender,
			VideoMessageRender,
			FileMessageRender,
			AtTextMessageRender,
			MergeMessageRender,
			CardMessageRender,
			LocationMessageRender,
			CustomMessageRender,
			TypingMessageRender,
			QuoteMessageRender,
			FaceMessageRender,
			MarkdownMessageRender,
			StreamMessageRender,
			OANotificationRender,
			NotificationRender,
			ErrorMessageRender
		},
		props: {
			source: Object,
			isSender: {
				type: Boolean,
				default: false,
			},
			conversationID:String,
			isPreview: Boolean,
			isActive: Boolean,
			selectFlag:{
				type:Boolean,
				default:false
			},
			selectItems:{
				type:Array,
				default(){
					return [];
				}
			}
		},
		data() {
			return {
				toolTipX: 0,
				toolTipY: 0,
				toolTipFlag: false,
				popPostion:"default",
				toolTipData: [],
				component:"",
				announcementElem:{opUser:{nickname:""}}
			};
		},
		computed: {
			...mapGetters([
				"storeCurrentConversation",
				"storeSelfInfo",
			]),
			isSingle() {
				return (
					this.storeCurrentConversation.conversationType === SessionType.Single
				);
			},
			formattedMessageTime() {
				return formatMessageTime(this.source.sendTime);
			},
			isNoticeMessage(){
				return noticeMessageTypes.includes(this.source.contentType);
			},
			getNoticeContent() {
				if(this.isNoticeMessage){
					return tipMessaggeFormat(
						this.source,
						this.$store.getters.storeCurrentUserID
					);
				}
				return "";
			},
			isSuccessMessage() {
				return this.source.status === MessageStatus.Succeed;
			},
			isFailedMessage() {
				return this.source.status === MessageStatus.Failed;
			},
			showSending() {
				return this.source.status === MessageStatus.Sending && !this.sendingDelay;
			},
			selectClientMsgIDItems(){
				let arr = [];
				this.selectItems.forEach((v,k)=>{
					arr.push(v.clientMsgID);
				});
				return arr;
			}
		},
		mounted() {
			if(this.source.contentType == MessageType.GroupAnnouncementUpdated){
				this.announcementElem = JSON.parse(this.source.notificationElem.detail)
			}else{
				const MsgType2Components = {
					['type_'+MessageType.TextMessage] : "TextMessageRender",
					['type_'+MessageType.PictureMessage] : "PictureMessageRender",
					['type_'+MessageType.VoiceMessage] : "VoiceMessageRender",
					['type_'+MessageType.VideoMessage] : "VideoMessageRender",
					['type_'+MessageType.FileMessage] : "FileMessageRender",
					['type_'+MessageType.AtTextMessage] : "AtTextMessageRender",
					['type_'+MessageType.MergeMessage] : "MergeMessageRender",
					['type_'+MessageType.CardMessage] : "CardMessageRender",
					['type_'+MessageType.LocationMessage] : "LocationMessageRender",
					['type_'+MessageType.CustomMessage] : "CustomMessageRender",
					['type_'+MessageType.TypingMessage] : "TypingMessageRender",
					['type_'+MessageType.QuoteMessage] : "QuoteMessageRender",
					['type_'+MessageType.FaceMessage] : "FaceMessageRender",
					['type_'+MessageType.MarkdownMessage] : "MarkdownMessageRender",
					['type_'+MessageType.StreamMessage] : "StreamMessageRender",
					['type_'+MessageType.OANotification] : "OANotificationRender",
					'type_2001' : "NotificationRender"
				};
				this.component = MsgType2Components['type_'+this.source.contentType] || "ErrorMessageRender";
			}
			this.$emit('userEvent',{type:"messageItemRender"},this.source.clientMsgID);
			this.setSendingDelay();
		},
		methods: {
			viewDetail(){
				this.$emit('userEvent',{type:"avatarClick"},this.source);
			},
			toAnnouncement(){
				uni.navigateTo({
					url:"/pages/conversation/groupSettings/announcement"
				})
			},
			setSendingDelay() {
				if (this.source.status === MessageStatus.Sending) {
					setTimeout(() => {
						this.sendingDelay = false;
					}, 2000);
				}
			},
			longtapEvent(e){
				this.$emit('userEvent',{type:"longtapMsgContent"},this.source);
			},
			onMessageEvent(e,data){
				this.$emit('userEvent',e,data);
			},
		},
	};
</script>

<style scoped lang="scss">
	.message_wrapper{
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		width: 100%;
		position: relative;
		.selected_overlay{
			position: absolute;
			left:0;
			top:0;
			bottom: 0;
			right: 0;
			z-index: 10;
		}
	}
	.message_item {
		display: flex;
		flex-direction: row;
		flex:1;
		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 0px 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 0px #95e261;
				}
				.message_content_wrap {
					flex-direction: row-reverse;
				
					.bg_container {
						border-radius: 6rpx;
						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;
		padding: 24rpx 48rpx;
		word-break: break-word;
		// font-size: 24rpx;
		font-size: 0.85rem;
		text-align: center;
		color: #999;
		width: 100%;
		box-sizing: border-box;
		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>