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

<template>
	<view class="message_quote_wrap">
		<view class="message_quote_text">
			<u-parse :content="getSenderNickname" />
			<view style="margin-left: 6rpx" class="message_quote_media">
				<image v-if="isReplyFile" src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/chating_message_file.png" alt="file" />
				<image v-if="isReplyImage" :src="getQuoteMessage.pictureElem.sourcePicture.url" alt="img" @click="clickImageItem" />
				<my-avatar v-if="isReplyCard" :src="getQuoteMessage.cardElem.faceURL" :desc="getQuoteMessage.cardElem.nickname" size="26" @click="clickCardUser" />
				<image v-if="isReplyVideo" :src="getQuoteMessage.videoElem.snapshotUrl" alt="video" />
				<image v-if="isReplyVideo" class="play_icon" src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/chating_message_video_play.png" alt="" srcset="" @click.stop="clickMediaItem" />
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import { checkFileIsExist } from '../../../../../util/common';
import UParse from '../../../../../components/gaoyia-parse/parse.vue';
import { parseMessageByType } from '../../../../../util/imCommon';
import { MessageType } from 'openim-uniapp-polyfill';
import MyAvatar from '../../../../../components/MyAvatar/index.vue';
import { myPreview } from '../../../../../util/preview';
const extraTypes = [MessageType.FileMessage, MessageType.LocationMessage, MessageType.PictureMessage, MessageType.VideoMessage, MessageType.CardMessage];
export default {
	name: '',
	components: {
		UParse,
		MyAvatar
	},
	props: {
		message: Object
	},
	data() {
		return {};
	},
	computed: {
		...mapGetters(['storeCacheMap']),
		hasExtra() {
			return extraTypes.includes(this.message.quoteElem.quoteMessage.contentType);
		},
		isAtMessage() {
			return this.message.contentType === MessageType.AtTextMessage;
		},
		getQuoteMessage() {
			return this.isAtMessage ? this.message.atTextElem.quoteMessage : this.message.quoteElem.quoteMessage;
		},
		isReplyImage() {
			return this.getQuoteMessage.contentType === MessageType.PictureMessage;
		},
		isReplyVideo() {
			return this.getQuoteMessage.contentType === MessageType.VideoMessage;
		},
		isReplyFile() {
			return this.getQuoteMessage.contentType === MessageType.FileMessage;
		},
		isReplyCard() {
			return this.getQuoteMessage.contentType === MessageType.CardMessage;
		},
		isLocationMessage() {
			return this.getQuoteMessage.contentType === MessageType.LocationMessage;
		},
		isRevokedMessage() {
			return this.getQuoteMessage.contentType === MessageType.RevokeMessage;
		},
		getMessageContent() {
			if (this.isReplyImage || this.isReplyVideo) {
				return '';
			}
			if (this.isRevokedMessage) {
				return '引用内容已被撤回';
			}
			return parseMessageByType(this.getQuoteMessage);
		},
		getSenderNickname() {
			return `${this.getQuoteMessage.senderNickname}: ${this.getMessageContent}`;
		}
	},
	methods: {
		clickImageItem() {
			myPreview(0, [this.getQuoteMessage.pictureElem.sourcePicture.url]);
		},
		async clickMediaItem() {
			if (this.isReplyVideo) {
				const message = this.getQuoteMessage;
				const path = this.storeCacheMap[message.clientMsgID]?.path;
				const localPath = await checkFileIsExist({
					key: message.clientMsgID,
					path
				});
				const previewVideoUrl = localPath || message.videoElem.videoUrl;
				uni.navigateTo({
					url: `/pages_im/pages/conversation/previewVideo/index?clientMsgID=${message.clientMsgID}&previewVideoUrl=${previewVideoUrl}&snapshotUrl=${message.videoElem.snapshotUrl}`
				});
			}
		},
		clickCardUser() {
			uni.navigateTo({
				url: `/pages_im/pages/common/userCard/index?sourceID=${this.getQuoteMessage.cardElem.userID}`
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.message_quote_wrap {
	display: flex;
	justify-content: flex-end;
	margin-top: 8rpx;

	.message_quote_text {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: fit-content;
		padding: 16rpx 16rpx;
		border-radius: 6rpx;
		color: #666;
		font-size: 24rpx;
		background-color: #f0f0f0;

		::v-deep uni-view {
			@include ellipsisWithLine(3);
		}
	}

	.message_quote_media {
		position: relative;

		image {
			width: 26px;
			height: 26px;
		}

		.play_icon {
			width: 13px !important;
			height: 13px !important;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}
}
</style>