yijianbao_user_uniapp/pages_im/pages/conversation/chating/components/MessageItem/index.vue

<template>
	<view
		v-if="!getNoticeContent"
		@click="clickMessageItem"
		:id="`auchor${source.clientMsgID}`"
		class="message_item"
		:class="{ message_item_self:isSender,message_item_active: isActive }">
		<view v-if="mutipleCheckVisible" class="check_wrap" :class="{ check_wrap_active: source.checked, check_wrap_disabled: canMutipleCheck }">
			<u-icon v-show="source.checked" name="checkbox-mark" size="12" color="#fff" />
		</view>

		<my-avatar @longpress="atUser" @click="showInfo" size="48" :desc="avatarDesc" :src="announcePublisher.faceURL || source.senderFaceUrl">
			<image v-if="getRole()==1" class="taoj"  src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/doctor.svg"></image>
			<image v-if="getRole()==2" class="taoj"  src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/guanjia.svg"></image>
		</my-avatar>	
			
		<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">{{ announcePublisher.nickname || 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 @click="reSendMessage" v-if="isFailedMessage && !isPreview" src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/chating_message_failed.png" />
						<text v-if="readLimitSensitive" class="read_limit_count">{{ `${count}s` }}</text>
					</view>
				</view>

				<view @longpress.prevent="showMenu" class="message_content_wrap" :class="{ message_content_wrap_shadow: !!meetingMessageData }">
					<text-message-render v-if="showTextRender" :message="source" @showInfo="showInfo" />
					<media-message-render v-else-if="showMediaRender" :message="source" />
					<audio-message-render v-else-if="showAudioRender" :message="source" :isSender="isSender" />
					<face-message-render v-else-if="showFaceRender" :message="source" />
					<file-message-render v-else-if="showFileRender" :message="source" />
					<card-message-render v-else-if="showCardRender" :message="source" />
					<merge-message-render v-else-if="showMergeRender" :message="source" />
					<location-message-render v-else-if="showLocationRender" :message="source" />
					<group-announce-render v-else-if="showGroupAnnouncement" :message="source" />
					<rtc-message-render v-else-if="rtcMessageData" :data="rtcMessageData" :isSender="isSender" />
					<meeting-invite-message-render v-else-if="meetingMessageData" :data="meetingMessageData" />
					<mass-message-render v-else-if="massMessageData" :data="massMessageData" :isSender="isSender" />
					<custom-message-render v-else-if="showCustomRender" :message="source" />
					<error-message-render v-else />
				</view>
				
			</view>

			<quote-message-render :message="source" v-if="isQuoteMessage" />
			
			<message-read-state :message="source" v-if="isSender && isSuccessMessage && !showGroupAnnouncement && !isPreview && !rtcMessageData && isShowAsRead" />

			<transition name="fade">
				<message-menu
					v-if="menuState.visible"
					:message="source"
					:isSender="isSender"
					:is_bottom="menuState.isBottom"
					:paterWidth="menuState.paterWidth"
					@close="menuState.visible = false"/>
			</transition>
		</view>
		
		<!-- <view class="message_send_state">
      <u-loading-icon v-if="showSending && !isPreview" />
      <image
        @click="reSendMessage"
        v-if="isFailedMessage && !isPreview"
        src="@https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/chating_message_failed.png"
      />
      <text v-if="readLimitSensitive" class="read_limit_count">{{
        `${count}s`
      }}</text>
    </view> -->

	</view>

	<view v-else class="notice_message_container" :id="`auchor${source.clientMsgID}`">
		<!-- <text>{{ getNoticeContent }}</text> -->
		<mp-html @linktap="navigate" :previewImg="false" :showImgMenu="false" :lazyLoad="false" :content="getNoticeContent" />
	</view>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import IMSDK, { AllowType, IMMethods, MessageStatus, MessageType, SessionType } from 'openim-uniapp-polyfill';
import MyAvatar from '../../../../../components/MyAvatar/index.vue';
import ChatingList from '../ChatingList.vue';
import TextMessageRender from './TextMessageRender.vue';
import MediaMessageRender from './MediaMessageRender.vue';
import AudioMessageRender from './AudioMessageRender.vue';
import FaceMessageRender from './FaceMessageRender.vue';
import FileMessageRender from './FileMessageRender.vue';
import CardMessageRender from './CardMessageRender.vue';
import CustomMessageRender from './CustomMessageRender.vue';
import MergeMessageRender from './MergeMessageRender.vue';
import QuoteMessageRender from './QuoteMessageRender.vue';
import LocationMessageRender from './LocationMessageRender.vue';
import GroupAnnounceRender from './GroupAnnounceRender.vue';
import RtcMessageRender from './RTCMessageRender.vue';
import MeetingInviteMessageRender from './MeetingInviteMessageRender.vue';
import ErrorMessageRender from './ErrorMessageRender.vue';
import MessageMenu from './MessageMenu.vue';
import MessageReadState from './MessageReadState.vue';
import MassMessageRender from './MassMessageRender.vue';
import { CustomType, noticeMessageTypes, PageEvents, UpdateMessageTypes } from '../../../../../constant';
import { tipMessaggeFormat, offlinePushInfo, formatMessageTime } from '../../../../../util/imCommon';

const textRenderTypes = [MessageType.TextMessage, MessageType.AtTextMessage, MessageType.QuoteMessage];
const mediaRenderTypes = [MessageType.VideoMessage, MessageType.PictureMessage];

export default {
	components: {
		MyAvatar,
		TextMessageRender,
		MediaMessageRender,
		AudioMessageRender,
		FaceMessageRender,
		FileMessageRender,
		CardMessageRender,
		CustomMessageRender,
		MergeMessageRender,
		QuoteMessageRender,
		LocationMessageRender,
		GroupAnnounceRender,
		RtcMessageRender,
		MeetingInviteMessageRender,
		ErrorMessageRender,
		MessageMenu,
		MessageReadState,
		MassMessageRender
	},
	props: {
		source: Object,
		isSender: {
			type: Boolean,
			default: false
		},
		mutipleCheckVisible: {
			type: Boolean,
			default: false
		},
		menuOutsideFlag: Number,
		isPreview: Boolean,
		isActive: Boolean
	},
	data() {
		return {
			menuState: {
				visible: false,
				isBottom: false,
				paterWidth: false,
				sendingDelay: true
			},
			count: 30,
			timer: null,
			announcePublisher: {},
			conversationID: ''
		};
	},
	computed: {
		...mapGetters(['storeCurrentConversation', 'storeCurrentGroup', 'storeSelfInfo', 'storeRevokeMap']),
		isSingle() {
			return this.storeCurrentConversation.conversationType === SessionType.Single;
		},
		formattedMessageTime() {
			return formatMessageTime(this.source.sendTime);
		},
		massMessageData() {
			if (this.source.contentType === MessageType.CustomMessage) {
				try {
					const customData = JSON.parse(this.source.customElem.data);
					if (customData.customType === CustomType.MassMsg) {
						return customData.data;
					}
				} catch (e) {}
			}
			return null;
		},
		showTextRender() {
			return textRenderTypes.includes(this.source.contentType);
		},
		showMediaRender() {
			return mediaRenderTypes.includes(this.source.contentType);
		},
		showAudioRender() {
			return this.source.contentType === MessageType.VoiceMessage;
		},
		showFaceRender() {
			return this.source.contentType === MessageType.FaceMessage;
		},
		showFileRender() {
			return this.source.contentType === MessageType.FileMessage;
		},
		showCardRender() {
			return this.source.contentType === MessageType.CardMessage;
		},
		showMergeRender() {
			return this.source.contentType === MessageType.MergeMessage;
		},
		showLocationRender() {
			return this.source.contentType === MessageType.LocationMessage;
		},
		showCustomRender(){
			return this.source.contentType===MessageType.CustomMessage;
		},
		rtcMessageData() {
			if (this.source.contentType === MessageType.CustomMessage) {
				try {
					const customData = JSON.parse(this.source.customElem.data);
					if (customData.customType === CustomType.Call) {
						return customData.data;
					}
				} catch (e) {}
			}
			return null;
		},
		meetingMessageData() {
			if (this.source.contentType === MessageType.CustomMessage) {
				try {
					const customData = JSON.parse(this.source.customElem.data);
					if (customData.customType === CustomType.MeetingInvitation) {
						return customData.data;
					}
				} catch (e) {}
			}
			return null;
		},
		showGroupAnnouncement() {
			return this.source.contentType === MessageType.GroupAnnouncementUpdated;
		},
		getNoticeContent() {
			if (this.showGroupAnnouncement) {
				return '';
			}
			const isNoticeMessage = noticeMessageTypes.includes(this.source.contentType);
			const showEdit = Boolean(this.storeRevokeMap[this.source.clientMsgID]);
			const perfix = showEdit ? `<a style="color:#0089FF; text-decoration:none;" href="${this.source.clientMsgID}"'>重新编辑</a>` : '';
			return !isNoticeMessage ? '' : tipMessaggeFormat(this.source, this.$store.getters.storeCurrentUserID) + perfix;
		},
		isQuoteMessage() {
			let isQuoteMessage=this.source.contentType === MessageType.QuoteMessage || this.source.atTextElem?.quoteMessage;
			if(isQuoteMessage){
				console.log("qxj source:");
				console.log(this.source);
			}
			return isQuoteMessage;
		},
		isSuccessMessage() {
			return this.source.status === MessageStatus.Succeed;
		},
		isFailedMessage() {
			return this.source.status === MessageStatus.Failed;
		},
		showSending() {
			return this.source.status === MessageStatus.Sending && !this.sendingDelay;
		},
		readLimitSensitive() {
			return this.source.attachedInfoElem?.isPrivateChat && this.source.isRead && !this.isPreview;
		},
		canMutipleCheck() {
			return this.source.disabled || this.source.contentType === MessageType.GroupAnnouncementUpdated;
		},
		isShowAsRead() {
			return this.source.sessionType === SessionType.Single || (this.source.sessionType === SessionType.WorkingGroup && this.storeCurrentGroup.displayIsRead);
		},
		avatarDesc() {
			if (this.isSingle) {
				return this.storeCurrentConversation.showName;
			}
			return this.announcePublisher.nickname || this.source.senderNickname;
		}
	},
	mounted() {
		this.conversationID = this.$store.getters.storeCurrentConversation.conversationID;
		this.$emit('messageItemRender', this.source.clientMsgID);
		this.isReadObserver();
		this.setSendingDelay();
		
	},
	beforeDestroy() {
		if (this.count !== 0 && !this.isPreview) {
			this.checkPrivateMessage();
		}
	},
	watch: {
		menuOutsideFlag(newVal) {
			if (this.menuState.visible) {
				this.menuState.visible = false;
			}
		},
		readLimitSensitive: {
			handler(newVal) {
				if (newVal) {
					this.startCount();
				}
			},
			immediate: true
		},
		showGroupAnnouncement: {
			handler(newVal) {
				if (newVal) {
					this.getAnnouncementPublisher();
				}
			},
			immediate: true
		}
	},
	methods: {
		...mapActions('message', ['updateOneMessage', 'deleteMessages']),
		navigate(link) {
			if (link.innerText == '重新编辑') {
				uni.$emit(PageEvents.ReEditMessage, link.href);
				return;
			}
			this.showInfo(link.href);
		},
		reSendMessage() {
			this.updateOneMessage({
				message: this.source,
				type: UpdateMessageTypes.KeyWords,
				keyWords: [
					{
						key: 'status',
						value: MessageStatus.Sending
					}
				]
			});
			IMSDK.asyncApi(IMMethods.SendMessage, IMSDK.uuid(), {
				recvID: this.storeCurrentConversation.userID,
				groupID: this.storeCurrentConversation.groupID,
				message: this.source,
				offlinePushInfo
			})
				.then(({ data }) => {
					this.updateOneMessage({
						message: data,
						isSuccess: true
					});
				})
				.catch(({ data, errCode, errMsg }) => {
					this.updateOneMessage({
						message: data,
						type: UpdateMessageTypes.KeyWords,
						keyWords: [
							{
								key: 'status',
								value: MessageStatus.Failed
							},
							{
								key: 'errCode',
								value: errCode
							}
						]
					});
				});
		},
		async showMenu() {
			if (this.isPreview) {
				return;
			}
			this.$emit('closeMenu');
			this.$nextTick(() => {
				uni.createSelectorQuery()
					.in(this)
					.select('.message_content_wrap')
					.boundingClientRect((res) => {
						console.log(res.top);
						this.menuState.paterWidth = res.width;
						this.menuState.isBottom = res.top < 250;
						this.menuState.visible = true;
					}).exec();
			});
		},
		getAnnouncementPublisher() {
			let group = {};
			try {
				group = JSON.parse(this.source.notificationElem.detail).group;
			} catch (e) {}
			if (!group.notificationUserID) return;
			IMSDK.asyncApi(IMSDK.IMMethods.GetSpecifiedGroupMembersInfo, IMSDK.uuid(), {
				groupID: group.groupID,
				userIDList: [group.notificationUserID]
			}).then(({ data }) => (this.announcePublisher = data[0] ?? {}));
		},
		checkPrivateMessage() {
			if (this.source.attachedInfoElem?.isPrivateChat) {
				this.clearPrivateMessage();
			}
			if (this.timer) {
				clearInterval(this.timer);
			}
		},
		startCount() {
			this.count = this.source.attachedInfoElem?.burnDuration || 30;
			this.timer = setInterval(() => {
				if (this.count > 0) {
					this.count -= 1;
				} else {
					this.checkPrivateMessage();
				}
			}, 1000);
		},
		clearPrivateMessage() {
			IMSDK.asyncApi(IMSDK.IMMethods.DeleteMessage, IMSDK.uuid(), {
				conversationID: this.conversationID,
				clientMsgID: this.source.clientMsgID
			}).then(() => {
				this.deleteMessages([this.source]);
			}).catch(() => uni.$u.toast('删除失败'));
		},
		setSendingDelay() {
			if (this.source.status === MessageStatus.Sending) {
				setTimeout(() => {
					this.sendingDelay = false;
				}, 2000);
			}
		},
		markGroupMessageReadState() {
			if (this.source.isRead || this.source.seq === 0) return;
			if (!this.source.groupID) {
				this.source.isRead = true;
			} else {
				if (!this.isShowAsRead) return;
				IMSDK.asyncApi('sendGroupMessageReadReceipt', IMSDK.uuid(), {
					conversationID: this.$store.getters.storeCurrentConversation.conversationID,
					clientMsgIDList: [this.source.clientMsgID]
				}).then(() => (this.source.isRead = true));
			}
		},
		isReadObserver() {
			const isNoticeMessage = noticeMessageTypes.includes(this.source.contentType);

			if (this.isPreview || this.isSender || isNoticeMessage) {
				return;
			}
			const observer = uni.createIntersectionObserver(ChatingList);
			observer.relativeTo('#scroll_view').observe(`#auchor${this.source.clientMsgID}`, ({ intersectionRatio }) => {
				if (intersectionRatio > 0) {
					this.markGroupMessageReadState();
					if (this.source.isAppend) {
						this.updateOneMessage({
							message: this.source,
							type: UpdateMessageTypes.KeyWords,
							keyWords: {
								key: 'isAppend',
								value: false
							}
						});
					}

					observer.disconnect();
				}
			});
		},
		atUser() {
			if (!this.isSender && this.source.groupID && !this.isPreview) {
				uni.$emit(PageEvents.AtSomeOne, {
					userID: this.source.sendID,
					nickname: this.source.senderNickname
				});
			}
		},
		showInfo(userID) {
			if (this.showGroupAnnouncement || this.isPreview || this.mutipleCheckVisible) {
				return;
			}

			const sourceID = userID ?? this.source.sendID;

			if (this.source.sessionType === SessionType.Single) {
				uni.navigateTo({
					url: `/pages/common/userCard/index?sourceID=${sourceID}`
				});
			} else {
				if (this.$store.getters.storeCurrentGroup.lookMemberInfo === AllowType.NotAllowed) {
					return;
				}
				IMSDK.asyncApi(IMSDK.IMMethods.GetSpecifiedGroupMembersInfo, IMSDK.uuid(), {
					groupID: this.source.groupID,
					userIDList: [sourceID]
				}).then(({ data }) => {
					const member = data[0];
					uni.$u.route('/pages/common/userCard/index', {
						sourceID,
						memberInfo: member ? JSON.stringify(member) : '',
						disableAdd: this.$store.getters.storeCurrentGroup.applyMemberFriend === AllowType.NotAllowed
					});
				});
			}
		},
		clickMessageItem() {
			console.log("--qxj msg item:");
			console.log(this.source);
			if (this.mutipleCheckVisible && !this.canMutipleCheck) {
			    console.log("---qxj mutipleCheckVisible:");
				this.updateOneMessage({
					message: {
						...this.source,
						checked: !this.source.checked,
					}
				});
			}
		},
		getRole(){
			let userType=0;
			let userId="";
			if(this.isSender){
				userId=this.storeCurrentUserID;
			}else{
				userId=this.source.sendID;
			}
			if(userId!=undefined  && (userId!="" || userId.length>0)){
				if(userId.indexOf('U')!==-1){
					userType=0;
				}
				if(userId.indexOf('D')!==-1){
					userType=1;
				}
				
				if(userId.indexOf('C')!==-1){
					userType=2;
				}
			}
			return userType;
		}
	}
};
</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: 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 {
			@include vCenterBox();
			text-align: start;
			// font-size: 14px;
			color: $uni-text-color;
			width: fit-content;
			overflow: hidden;
			.bg_container {
				padding: 16rpx 24rpx;
				border-radius: 0rpx 12rpx 12rpx 12rpx;
				background-color: #f0f0f0;
			}
		}
		
		
	}

	.message_send_state_box {
		display: flex;
		flex-direction: row-reverse;
		max-width: 100%;
	}

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

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

		image {
			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 {
				flex-direction: row-reverse;
				overflow: hidden;
				.bg_container {
					border-radius: 12rpx 0 12rpx 12rpx;
					background-color: #dcebfe !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;
}

.taoj{
	position: absolute;
	left: -1px;
	top: -1px;
	width: 50px;
	height: 50px;
}
	
</style>