zh_order_food_xcx/pages/chat/msg-item.vue

<template>
	<view class="">
		<view class="dialogue-box"
			:class="item.msg_type == 2 ||item.msg_type == 3 ?'dialogue-box-one':'dialogue-box-two'">
			<view class="time">
				{{item.created_at}}
			</view>
			<view class="dialogue">
				<view class="dialogue-text" :class="item.msg_type == 2 ?'dialogue-text-one':'dialogue-text-two'"
					v-if="(item.msg_type == 1 ||item.msg_type == 2) && showText">
					<!-- {{item.content}} -->
					<!--					{{showText}}-->
					<view class="" :class="item.msg_type == 2?'showText-color-one':'showText-color-two'"
						v-html="showText"></view>
					<view class="align-items-center flex-justify-end" v-if="item.msg_type == 2">
						<view class="fs-28 fc-9 fz-class" @click="copy(showText)">
							复制
						</view>
					</view>
					<view class="voice-box" v-if="item.voice_url">
						<view class="voice-box-left" v-if="item.msg_type == 1">
							<image @click="voiceTwo" v-if="!voiceShwo" class="voice-img"
								src="@/static/img/chat/voice-n.png" mode="">
							</image>
							<image @click="voice(true,item)" v-else class="voice-img"
								src="@/static/img/chat/voice-y.png" mode="">
							</image>
						</view>
						<view class="voice-box-left" v-else-if="item.msg_type == 2">
							<image @click="voiceTwo" v-if="!voiceShwo" class="voice-img"
								src="@/static/img/chat/voice-n-two.png" mode=""></image>
							<image @click="voice(true,item)" v-else class="voice-img"
								src="@/static/img/chat/voice-y-two.png" mode="">
							</image>
						</view>
						<image v-if="item.msg_type == 2" class="voice-box-right"
							src="../../static/img/chat/voice-img.png" mode="">
						</image>
						<image v-else class="voice-box-right" src="../../static/img/chat/voice-two-img.png" mode="">
						</image>
					</view>
				</view>
				<view class="dialogue-text dialogue-text-one loading " v-if="item.msg_type == 2 && showText ==''">
					<text></text>
					<text></text>
					<text></text>
					<text></text>
				</view>
				<view class="initial-box dialogue-text-one" v-if="item.msg_type == 3">
					<view class="initial-title">
						{{item.title}}
					</view>
					<view class="initial-style" v-for="(itemTwo,indexTwo) in item.text" :key="indexTwo"
						@click="selectStyle(itemTwo.type)">
						{{itemTwo.msg}}
					</view>
				</view>
			</view>
			<view class="dialogue">
				<view class="diaologue-img-box" v-if="item.img_url">
					<image class="diaologue-img" @click="lookImg(item.img_url)" :src="item.img_url" mode="aspectFill">
					</image>
				</view>
			</view>
			<view class="dialogue">
				<view class="diaologue-file-box" v-if="item.file_url">
					<image class="diaologue-file-img" src="@/static/img/chat/wj-img.png" mode="aspectFill"></image>
					<view class="diaologue-file-name-box">
						<view class="diaologue-file-name">
							{{fileName(item.file_url)}}
						</view>
						<!-- <view class="diaologue-file-time">
							2023-12-15
						</view> -->
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import tools from '@/service/tools'
	export default {
		props: {
			item: {
				default: function() {
					return ''
				}
			},
			msgText: {
				default: function() {
					return ''
				}
			},
			showType: {
				default: function() {
					return false
				}
			}
		},
		data() {
			return {
				showText: '',
				num: 1,
				id: '',
				voiceShwo: true,
				voiceUrl: '',
				voiceStyle: true,
			};
		},
		watch: {
			'msgText': function() {
				if (this.msgText !== '') {
					this.setText()
				}
			}
		},
		mounted() {
			this.setText()
		},
		methods: {
			copy(value) {
				uni.setClipboardData({
					data: value,
					success() {
						tools.success('复制成功')
					},
					fail() {
						tools.error("复制失败")
					}
				})
			},
			voice(bur, id) {
				if (this.voiceStyle) {
					this.voiceUrl = uni.createInnerAudioContext();
					this.voiceUrl.autoplay = true;
					this.voiceUrl.src = this.item.voice_url;
					this.voiceUrl.play();
					this.voiceShwo = false;
				} else {
					this.voiceUrl.play();
					this.voiceShwo = false;
				};
				this.voiceUrl.onEnded((res) => {
					this.voiceShwo = true;
					this.voiceStyle = true
				})
			},
			voiceTwo() {
				this.voiceUrl.pause();
				this.voiceShwo = true;
				this.voiceStyle = false
			},
			fileName(item) {
				let fileName = item.match(/\/([^\/]+)$/)[1];
				return fileName
			},
			lookImg(item) {
				let imgList = []
				imgList.push(item)
				uni.previewImage({
					current: 0,
					urls: imgList,
				});
			},
			selectStyle(type) {
				this.$emit('selectStyle', type)
			},
			setText() {
				if (this.showType) {
					this.appear(this.msgText)
				} else {
					// console.log('---------------------------------'+this.msgText)
					// this.showText = this.msgText.replace(/\/n/g, 'aaaaa');
					this.showText = this.msgText;
					// console.log(this.showText)
				}
			},
			appear(content) {
				if (content === '') {
					return
				}
				const _this = this;
				this.showText = "";
				clearTimeout(this.timer);
				let speed = 50; //设置定时的速度 越来越快
				let count = 1;
				content = content.replace(/\/n/g, '<br/>');
				// console.log(content)
				let num = 1;

				function changeContent() {
					_this.showText = content.substring(0, count); //截取字符串
					count++;
					if (count !== content.length + 1) {
						speed -= 1;
						if (speed < 5) speed = 5;

						_this.timer = setTimeout(changeContent, speed);
						if (_this.showText.length % 100 === 0) _this.$emit('refresh', false)
					} else {
						console.log("执行");
						_this.$emit('refresh', true)
					}
				}
				changeContent();
			},
		}
	}
</script>

<style lang="scss">
	.fz-class {
		padding: 5rpx 0 0;
	}

	.loading {
		width: auto;
		height: 15rpx;
		display: flex;
		align-items: center;
		padding: 17rpx 30rpx;
	}

	.loading text {
		// display: inline-block;
		width: 15rpx;
		height: 15rpx;
		margin-right: 5px;
		border-radius: 50%;
		background: #F2BA0B;
		-webkit-animation: load 1.04s ease infinite;
	}

	.loading text:last-child {
		margin-right: 0px;
	}

	@-webkit-keyframes load {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	.loading text:nth-child(1) {
		-webkit-animation-delay: 0.13s;
	}

	.loading text:nth-child(2) {
		-webkit-animation-delay: 0.26s;
	}

	.loading text:nth-child(3) {
		-webkit-animation-delay: 0.39s;
	}

	.loading text:nth-child(4) {
		-webkit-animation-delay: 0.52s;
	}

	.dialogue-box {
		// width: 100%;
		height: auto;
		margin: 0 0 40rpx 0;
		display: flex;
		flex-direction: column;

		.time {
			font-size: 24rpx;
			color: #999999;
			margin: 0 0 8rpx 0;
		}

		.dialogue {
			// word-break: break-all;
			// font-size: 30rpx;

			.dialogue-text {
				padding: 24rpx;
				box-sizing: border-box;
				white-space: pre-wrap;

				.voice-box {
					padding: 20rpx 0 0 0;
					display: flex;
					align-items: center;

					.voice-box-left {
						.voice-img {
							width: 48rpx;
							height: 48rpx;
							margin: 0 16rpx 0 0;
						}
					}

					.voice-box-right {
						width: 120rpx;
						height: 26rpx;
					}
				}
			}

			.showText-color-one {
				color: #333333;
			}

			.showText-color-two {
				color: #FFFFFF;
			}

			.diaologue-img-box {
				max-width: 638rpx;
				height: auto;
				background: #fff;
				margin: 8rpx 0 0 0;

				.diaologue-img {
					border-radius: 20rpx;
				}
			}

			.diaologue-file-box {
				display: flex;
				align-items: center;
				padding: 24rpx;
				box-sizing: border-box;
				// background: #fff;
				border: 2rpx solid #EEEEEE;
				border-radius: 10rpx;
				margin: 8rpx 0 0 0;

				.diaologue-file-img {
					width: 63rpx;
					height: 77rpx;
					margin: 0 16rpx 0 0;
				}

				.diaologue-file-name-box {
					.diaologue-file-name {
						max-width: 534rpx;
						font-size: 30rpx;
						color: #323333;
						margin: 0 0 4rpx 0;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						word-break: break-all;
					}

					.diaologue-file-time {
						font-size: 24rpx;
						color: #999999;
					}
				}
			}



			.dialogue-text-one {
				background: #F7F8FC;
				border-radius: 10rpx 10rpx 10rpx 0;
			}

			.dialogue-text-two {
				background: #5CC2FF;
				border-radius: 10rpx 10rpx 0 10rpx;
				max-width: 592rpx;
			}

			.initial-box {
				padding: 24rpx;
				box-sizing: border-box;

				.initial-title {
					font-size: 30rpx;
					font-weight: 600;
					color: #333333;
					// margin: 0 0 12rpx 0;
					padding: 0 0 12rpx 0;
				}

				.initial-style {
					font-size: 30rpx;
					color: #2F80ED;
					margin: 0 0 12rpx 0;
				}

				.initial-style:last-child {
					margin: 0;
				}
			}
		}
	}

	.dialogue-box-one {
		align-items: flex-start;
	}

	.dialogue-box-two {
		align-items: flex-end;
	}
</style>