MeetMateApp/pages/chat/components/message.vue

<template>
	<view class="chat-message">
		<view class="chat-message-item" v-for="(item, index) in flist" :key="`${item.from}-${index}`" :class="[
				`${item._isMy ? 'is-right' : 'is-left'}`,
				`is-${item._mode}`,
				{
					'is-animation': item.animation,
				},
			]">
			<!-- 发言时间 -->
			<view class="date" v-if="item._date">
				<text>{{ item._date }}</text>
			</view>

			<!-- 内容 -->
			<view class="main">
				<!-- 头像 -->
				<view class="avatar" @tap="toDetail(item.from)">
					<!-- <view class="avatorImg2" v-if="item._isMy">{{item.avatar}}</view>
					<view class="avatorImg" v-else>{{item.avatar}}</view> -->
					<image :src="item.avatar" mode="aspectFill" />
				</view>

				<!-- 详细 -->
				<view class="det">
					<template v-if="conversationType=='GROUP' && !item._isMy">
						<view class="name-sex">
							<view class="name">{{item.nick}}</view>
							<view class="man" v-if="item.sex == 0">
								<image src="@/static/icon/brief-icon-1.png" mode="aspectFill" />
							</view>
							<view class="woman" v-else-if="item.sex == 1">
								<image src="@/static/icon/brief-icon-2.png" mode="aspectFill" />
							</view>
						</view>
					</template>

					<!-- 内容 -->
					<view class="content" @tap="tapCont(item)" @longpress="longPressItem(item)">
						<!-- 文本 -->
						<template v-if="item._mode === 'text'">
							{{ item.payload.text }}
						</template>

						<!-- 图片 -->
						<template v-else-if="item._mode === 'image'">
							<cl-loading-mask color="#fff" :loading="item.loading" :text="`${item.progress}%`">
								<image mode="widthFix" :src="item.payload.url"></image>
							</cl-loading-mask>
						</template>

						<!-- 表情 -->
						<template v-else-if="item._mode === 'emoji'">
							<image :src="item.content.imageUrl"></image>
						</template>

						<!-- 语音 -->
						<template v-else-if="item._mode === 'voice'">
							<icon-voice v-if="item._isMy" name="icon-voice-right" :play="item.isPlay"></icon-voice>
							<!-- <text class="duration">{{ item.payload.second }}</text> -->
							<text style="color:#007AFF;">语音消息，点击收听</text>
							<icon-voice v-if="!item._isMy" name="icon-voice-left" :play="item.isPlay"></icon-voice>
						</template>

						<!-- 视频 -->
						<template v-else-if="item._mode === 'video'">
							<cl-loading-mask color="#000" :loading="item.loading" :text="`${item.progress}%`">
								<view class="item">
									<image class="cover" :src="item.payload.thumbUrl" mode="aspectFill" />
									<text v-if="!item.loading" class="chat-iconfont icon-play"></text>
								</view>
							</cl-loading-mask>
						</template>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import dayjs from "../../../uni_modules/cl-uni/utils/dayjs";
	import IconVoice from "./icon-voice";

	// 音频
	const innerAudioContext = uni.createInnerAudioContext();

	// 模式，对应 contentType
	const modes = ["text", "image", "emoji", "voice", "video"];

	export default {
		components: {
			IconVoice,
		},

		props: {
			/*
			 * text: 文本
			 * duration: 时长
			 * videoUrl: 视频地址
			 * voiceUrl: 语音地址
			 * videoCoverUrl: 视频封面
			 * imageUrl: 图片地址
			 */
			list: Array,
			conversationType: String,
		},

		data() {
			return {
				voice: {
					timer: null,
				},
				// 登录的用户信息
				userInfo: {
					userId: 1,
					name: 'ai',
					avatarUrl: ''
				},
			};
		},

		computed: {
			flist() {
				let date = "";

				const {
					avatarUrl,
					name,
					userId
				} = this.userInfo;

				let temp = this.list.map((e) => {
					// 处理日期
					e._date = date ?
						dayjs(e.create_time).isBefore(dayjs(date).add(5, "minute")) ?
						"" :
						e.create_time :
						e.create_time;

					date = e.create_time;
					console.log("ismy:", e.from + "||" + getApp().globalData.userId);

					// 是否是自己
					e._isMy = e.from == getApp().globalData.userId;

					if (e._isMy) {
						e.avatarUrl = e.avatar;
						e.nick = name;
						e.userId = userId;
					} else {
						e.avatarUrl = e.avatar;
					}

					// 消息模型
					e._mode = e.mode;
					// switch (e.type) {
					// 	case "TIMTextElem":
					// 		e._mode = "text";
					// 		break;
					// 	case "TIMImageElem":
					// 		e._mode = "image";
					// 		break;
					// 	case "TIMVideoFileElem":
					// 		e._mode = "video";
					// 		break;
					// 	case "TIMSoundElem":
					// 		e._mode = "voice";
					// 		break;
					// 	default:
					// 		e._mode = "error";
					// 		break;
					// }

					if (e._mode == "error") {
						return null;
					}

					if (e.isRevoked) {
						return null;
					}

					return e;
				});
				let result = []
				for (let i = 0; i < temp.length; i++) {
					if (temp[i] != null) {
						result.push(temp[i])
					}
				}

				return result;
			},
		},

		filters: {
			duration(val) {
				return Math.ceil((val || 1) / 1000);
			},
		},

		destroyed() {
			this.voicePause();
		},

		methods: {
			// 点击内容
			tapCont(item) {
				switch (item._mode) {
					case "image":
						this.previewImage(item);
						break;
					case "video":
						this.videoPlay(item);
						break;
					case "voice":
						this.voicePlay(item);
						break;
				}
			},
			// 前往详情
			toDetail(uid) {
				if (uid == this.userInfo.userId) {
					return;
				}
				uni.navigateTo({
					url: "/pages/detail/index?uid=" + uid,
				});
			},

			// 长按
			longPressItem(item) {
				// console.log('create_time:', item.create_time);
				let actList = [];
				switch (item._mode) {
					case "text":
						actList.push('复制');
						break;
				}
				const result = this.isWithinLast3Minutes(item.create_time);

				if (result) {
					// actList.push('撤回');
				}
				let that = this;
				if (actList.length > 0) {
					uni.showActionSheet({
						title: '',
						itemList: actList,
						success: function(res) {
							if (res.tapIndex == 0) {
								uni.setClipboardData({
									data: item.payload.text,
								});
							} else {

							}
						},
						fail: function(res) {
							console.log(res.errMsg);
						}
					});
				}
			},

			// 图片预览
			previewImage(item) {
				uni.previewImage({
					current: item.payload.url,
					urls: this.list.filter((e) => e._mode == "image").map((e) => e.payload.url),
				});
			},

			// 视频播放
			videoPlay(item) {
				this.$root.video.url = item.payload.videoUrl;
				this.$root.video.visible = true;
			},

			// 播放录音
			voicePlay(item) {
				// 设置播放状态
				this.list.map((e) => {
					this.$set(e, "isPlay", e.ID == item.ID ? e.isPlay : false);
				});

				item.isPlay = !item.isPlay;

				// console.log(item.payload.url);
				if (item.isPlay) {
					// 开始播放
					innerAudioContext.src = item.payload.url;
					innerAudioContext.play();
					// console.log("now play");
				} else {
					// 暂停播放
					this.voicePause();
				}

				// 清除计时器
				clearTimeout(this.voice.timer);

				// x 秒后暂停
				this.voice.timer = setTimeout(() => {
					item.isPlay = false;
				}, item.payload.second * 1000 || 1000);
			},

			// 暂停播放
			voicePause() {
				innerAudioContext.stop();
				this.list.map((e) => {
					e.isPlay = false;
				});
			},
			isWithinLast3Minutes(timeString) {
				// 将时间字符串转换为 Date 对象
				const inputTime = new Date(timeString);

				// 获取当前时间的 Date 对象
				const currentTime = new Date();

				// 获取时间差（以毫秒为单位）
				const timeDifference = currentTime - inputTime;

				// 将3分钟转换为毫秒
				const threeMinutesInMilliseconds = 3 * 60 * 1000;

				// 判断时间差是否在3分钟内（过去的3分钟）
				return timeDifference >= 0 && timeDifference <= threeMinutesInMilliseconds;
			}


		},
	};
</script>

<style lang="scss" scoped>
	@keyframes fadeInRight {
		from {
			opacity: 0;
			transform: translate3d(100%, 0, 0);
		}

		to {
			opacity: 1;
			transform: translate3d(0, 0, 0);
		}
	}

	@keyframes fadeInLeft {
		from {
			opacity: 0;
			transform: translate3d(-100%, 0, 0);
		}

		to {
			opacity: 1;
			transform: translate3d(0, 0, 0);
		}
	}

	.chat-message {
		&-item {
			font-size: 26rpx;
			padding: 20rpx;

			.date {
				text-align: center;
				margin: 10rpx 0 40rpx 0;

				text {
					font-size: 24rpx;
					color: #fff;
					padding: 4rpx 10rpx;
					letter-spacing: 1rpx;
				}
			}

			.main {
				display: flex;

				.avatar {
					flex-shrink: 0;
					height: 84rpx;

					image {
						height: 84rpx;
						width: 84rpx;
						border-radius: 42rpx;
					}

					.avatorImg {
						width: 90rpx;
						height: 90rpx;
						background-color: #0492fe;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #fff;
						font-weight: bold;
						font-size: 40rpx;
					}

					.avatorImg2 {
						width: 90rpx;
						height: 90rpx;
						background-color: #d4237a;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #fff;
						font-weight: bold;
						font-size: 40rpx;
					}
				}

				.det {
					display: flex;
					flex-direction: column;
					max-width: 60%;



					.content {
						display: inline-block;
						padding: 24rpx 36rpx;
						border-radius: 16rpx;
						box-sizing: border-box;
						position: relative;
						font-size: 28rpx !important;
					}
				}
			}

			&.is-left {
				.main {
					.det {
						margin-left: 20rpx;
						align-items: flex-start;

						.content {
							background: #282828;
							border-radius: 0rpx 36rpx 36rpx 36rpx;
							font-size: 35rpx;
							font-weight: 400;
							color: #fff;
						}
					}
				}
			}

			&.is-right {
				.main {
					flex-direction: row-reverse;

					.det {
						margin-right: 20rpx;
						align-items: flex-end;

						.content {
							background: #2B313B;
							border-radius: 36rpx 36rpx 0rpx 36rpx;
							font-size: 35rpx;
							font-weight: 400;
							color: #fff;
						}
					}
				}

				&.is-voice {
					.content {
						justify-content: flex-end;
					}
				}
			}

			&.is-animation {
				&.is-left {
					animation: fadeInLeft 0.5s ease both;
				}

				&.is-right {
					animation: fadeInRight 0.5s ease both;
				}
			}

			&.is-text {
				.content {
					max-width: 100%;
					min-width: 80rpx;
					word-wrap: break-word;
				}
			}

			&.is-text,
			&.is-voice {
				.content {
					padding: 20rpx;
					line-height: 40rpx;
					letter-spacing: 1rpx;
				}
			}

			&.is-emoji {
				.content {
					padding: 20rpx;

					image {
						height: 40rpx;
						width: 40rpx;
					}
				}
			}

			&.is-voice {
				.det {
					.content {
						display: flex;
						align-items: center;
						// width: 130rpx;

						.duration {
							&::after {
								content: '"';
							}
						}
					}
				}
			}

			&.is-video {
				.item {
					height: 300rpx;
					width: 500rpx;
					text-align: center;
					line-height: 300rpx;
					position: relative;
					overflow: hidden;

					.cover {
						height: 100%;
						width: 100%;
						position: absolute;
						left: 0;
						top: 0;
						border-radius: 10rpx;
					}

					.chat-iconfont {
						color: gray;
						font-size: 100rpx;
						position: relative;
					}
				}
			}

			&.is-image {
				.main {
					.det {
						.content {
							background-color: #2B313B;

							image {
								display: block;
								max-width: 300rpx;
								border-radius: 16rpx;
							}
						}
					}
				}
			}
		}
	}

	.name-sex {
		display: flex;
		align-items: center;
	}

	.man {
		image {
			width: 17rpx;
			height: 17rpx;
		}

		background-color: #58bcff;
		border-radius: 50%;
		width: 25rpx;
		height: 25rpx;
		justify-content: center;
		align-items: center;
		display: flex;
		margin-left: 10rpx;
	}

	.woman {
		image {
			width: 17rpx;
			height: 17rpx;
		}

		background-color: #ff5a70;
		border-radius: 50%;
		width: 25rpx;
		height: 25rpx;
		justify-content: center;
		align-items: center;
		display: flex;
		margin-left: 10rpx;
	}

	.name {
		margin-bottom: 10rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #bbccd8;
	}
</style>