heshanApp/pages_im/pages/conversation/chating/components/MessageItem/MediaMessageRender.vue

<template>
	<view class="media_message_container" @click="clickMediaItem">
		<image
			class="image_content"
			:src="getImgUrl"
			:style="{ width: '120px', height: maxHeight + 'px' }"
			mode="scaleToFill"
		></image>
		<view v-if="isVideo" class="play_icon_wrapper">
			<image class="play_icon" src="@/pages_im/static/images/chating_message_video_play.png" alt="" srcset="" />
		</view>
		<text v-if="isVideo" class="video_duration">{{ getDuration }}</text>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
// import { checkFileIsExist } from '../../../../../util/common';
import { secFormat } from '../../../../../util/imCommon';
import { myPreview } from '../../../../../util/preview';
import { MessageType } from '@/pages_im/constant/imConstants';
export default {
	name: '',
	props: {
		message: Object
	},
	data() {
		return {};
	},
	computed: {
		...mapGetters(['storeCacheMap']),
		isVideo() {
			return this.message.contentType === MessageType.VideoMessage;
		},
		getImgUrl() {
			if (this.isVideo) {
				return this.message.videoElem.snapshotUrl;
			}
			
			return this.message.pictureElem.snapshotPicture?.url ?? this.message.pictureElem.sourcePath;
		},
		getDuration() {
			if (!this.isVideo) {
				return 0;
			}
			return secFormat(this.message.videoElem.duration);
		},
		maxHeight() {
			const imageHeight = this.isVideo ? this.message.videoElem.snapshotHeight : this.message.pictureElem.sourcePicture.height;
			const imageWidth = this.isVideo ? this.message.videoElem.snapshotWidth : this.message.pictureElem.sourcePicture.width;
			const aspectRatio = imageHeight / imageWidth;
			// 200rpx = 100px
			return 100 * aspectRatio;
		}
	},
	methods: {
		/**
		 * 触摸开始，记录时间
		 */
		handleTouchStart() {
			this.touchStartTime = Date.now();
			this.isLongPress = false;
		},
		/**
		 * 长按事件
		 */
		handleLongPress() {
			this.isLongPress = true;
			this.$emit('longpress', this.message);
		},
		/**
		 * 点击媒体项，拦截长按误触
		 */
		async clickMediaItem() {
			// 通过时间差和标志位双重拦截
			const duration = Date.now() - this.touchStartTime;
			if (this.isLongPress || duration > 350) return;
			
			// console.log('clickMediaItem triggered', this.isVideo);
			// uni.showToast({ title: 'Clicked', icon: 'none' }); 
			if (this.isVideo) {
				const path = this.storeCacheMap[this.message.clientMsgID]?.path;
				const localPath = await this.checkFileIsExist({
					key: this.message.clientMsgID,
					path
				});
				const previewVideoUrl = localPath || this.message.videoElem.videoUrl;
				this.$emit('enterSubPage');
				uni.navigateTo({
					url: `/pages_im/pages/conversation/previewVideo/index?clientMsgID=${this.message.clientMsgID}&previewVideoUrl=${previewVideoUrl}&snapshotUrl=${this.message.videoElem.snapshotUrl}`
				});
			} else {
				this.$emit('enterSubPage');
				const list = this.$store.getters.storePreviewImageList;
				const currentUrl = this.message.pictureElem.sourcePicture.url;
				const idx = list.findIndex((item) => item === currentUrl);
				
				// Fallback if not found in list
				if (idx === -1) {
					myPreview(0, [currentUrl]);
				} else {
					myPreview(idx, list);
				}
			}
		},
		checkFileIsExist({ key, path }){
		  return new Promise((resolve) => {
		    if (!path) {
		      resolve("");
		      return;
		    }
		    plus.io.resolveLocalFileSystemURL(
		      path,
		      (res) => {
		        resolve(path);
		      },
		      (err) => {
		        // console.log(err);
		        getStore().dispatch("user/deleteCacheData", key);
		        resolve("");
		      },
		    );
		  });
		}
	}
};
</script>

<style lang="scss" scoped>
.media_message_container {
	position: relative;
	border-radius: 16rpx;
	overflow: hidden;
	width: 120px;
	background-color: #E0E0E0;
}

.image_content {
	width: 120px;
	border-radius: 12rpx;
}

.play_icon_wrapper {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	justify-content: center;
	align-items: center;
	z-index: 10;
}

.play_icon {
	width: 30px;
	height: 30px;
}

.video_duration {
	position: absolute;
	bottom: 12rpx;
	right: 24rpx;
	color: #fff;
	font-size: 16px;
}
</style>