14

pages/conversation/chating/components/MessageItem/AtTextMessageRender.vue

@@ -1,10 +1,13 @@
 <template>
 	<view class="at_text_message_container bg_container">
-		消息
+		<u-parse :content="getContent" :previewImg="false" :showImgMenu="false" selectable></u-parse>
 	</view>
 </template>
 
 <script>
+	import {
+		parseBr
+	} from "@/util/common";
 	export default {
 		name: "AtTextMessageRender",
 		components: {},
@@ -12,6 +15,11 @@
 			message: Object,
 			conversationID:String,
 		},
+		computed: {
+			getContent() {
+				return parseBr(this.message.textElem?.content);
+			},
+		},
 		data() {
 			return {};
 		},

pages/conversation/chating/components/MessageItem/LocationMessageRender.vue

@@ -1,10 +1,34 @@
 <template>
 	<view class="location_message_container bg_container">
-		消息
+		<u--image 
+			:showLoading="true" 
+			:width="selfWidth" 
+			:height="maxHeight" 
+			mode="widthFix" 
+			v-if="src"
+			:src="src"
+			@load="onLoaded" 
+			@click="clickMediaItem">
+			<template v-slot:loading>
+				<u-loading-icon color="red"></u-loading-icon>
+			</template>
+		</u--image>
+		<u--image 
+			v-else
+			:showLoading="true" 
+			:width="selfWidth" 
+			mode="widthFix" 
+			src="/static/images/sync_error.png">
+		</u--image>
+		<u--text class="address" :style="{
+			width:selfWidth+'px'
+		}" :lines="1" :size="20" :text="desc"></u--text>
 	</view>
 </template>
 
 <script>
+	import util from "@/util"
+	import md5 from "md5";
 	export default {
 		name: "LocationMessageRender",
 		components: {},
@@ -13,12 +37,85 @@
 			conversationID:String,
 		},
 		data() {
-			return {};
+			return {
+				selfWidth:200,
+				loadingWidth: "200px",
+				src:"",
+				coverDownloading:false,
+				coverDownloadProgress:"",
+				apisrc:"",
+				maxHeight:"",
+				desc:""
+			};
+		},
+		created() {
+			let loc = this.message.locationElem;
+			this.desc = loc.description;
+			this.apisrc = "http://api.tianditu.gov.cn/staticimage?"
+				+"center="+loc.longitude+","+loc.latitude
+				+"&width=400"
+				+"&height=300"
+				+"&zoom=10"
+				+"&markers="+loc.longitude+","+loc.latitude
+				+"&tk=5255a4be64441ba9fa2ebe605ca472bf";
+				//
+			//this.apisrc="http://192.168.1.222/staticimage.png";
+			this.init();
 		},
 		methods: {
+			getImageInfo(src){
+				const _this = this;
+				uni.getImageInfo({
+					src:src,
+					success(res) {
+						const imageHeight = res.height;
+						const imageWidth = res.width;
+						const aspectRatio = imageHeight / imageWidth;
+						_this.maxHeight =  (_this.selfWidth * aspectRatio);
+						console.log(res)
+						_this.src = src;
+					}
+				})
+			},
+			async init(){
+				const self = this;
+				let url = "";
+				// 如果有远程 snapshotUrl，则下载到 coverCachePath
+				const snapshotUrl = this.apisrc ;
+				const key = md5(snapshotUrl || '');
+				const dir_name = `${this.conversationID}`;
+				const save_file_name = `loc_${key}.png`;
+				const coverCachePath = `${dir_name}/${save_file_name}`;
+				if (typeof plus === 'undefined' || !coverCachePath) return;
+				self.coverDownloading = true;
+				util.cacheFile(snapshotUrl,coverCachePath,(fn)=>{
+					self.coverDownloading = false;
+					self.getImageInfo(fn);
+					console.log(fn);
+				},(e)=>{
+					console.log(e);
+				},(e)=>{
+					console.log(e);
+				});
+			},
+			clickMediaItem() {
+				let loc = this.message.locationElem;
+				uni.navigateTo({
+					url:"/pages/common/map?type=viewlocation&lng="+loc.longitude+"&lat="+loc.latitude+"&address="+loc.description
+				})
+			},
+			onLoaded() {
+				this.loadingWidth = "auto";
+			},
 
 		},
 	};
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+	.location_message_container{
+		.address{
+			margin-top: 20rpx;
+		}
+	}
+</style>

pages/conversation/chating/components/MessageItem/PictureMessageRender.vue

@@ -13,6 +13,13 @@
 				<u-loading-icon color="red"></u-loading-icon>
 			</template>
 		</u--image>
+		<u--image 
+			v-else
+			:showLoading="true" 
+			width="120" 
+			mode="widthFix" 
+			src="/static/images/sync_error.png">
+		</u--image>
 	</view>
 </template>
 
@@ -54,41 +61,22 @@
 				// 如果有远程 snapshotUrl，则下载到 coverCachePath
 				const snapshotUrl = (this.message.pictureElem.snapshotPicture?.url ?? this.message.pictureElem.sourcePath );
 				const key = md5(snapshotUrl || '');
-				this.coverCachePath = `_doc/${this.conversationID}/img_${key}.jpg`;
-				if (typeof plus === 'undefined' || !this.coverCachePath) return;
-				try {
-					// 检查封面是否存在
-					const coverExists = await util.fileExsit(self.coverCachePath);
-					this.coverExists = !!coverExists;
-					if (this.coverExists) {
-						this.src = this.coverCachePath;
-						return;
-					}
-					if (!snapshotUrl) {
-						this.src="/static/images/sync_error.png";
-						return;
-					}
-					this.coverDownloading = true;
-					await new Promise((resolve, reject) => {
-						util.downloadFile(snapshotUrl, self.coverCachePath, function(localPath) {
-							self.coverDownloading = false;
-							self.coverExists = true;
-							resolve(localPath);
-						}, function(err) {
-							self.coverDownloading = false;
-							reject(err);
-						}, function(progress) {
-							self.coverDownloadProgress = progress;
-						});
-					});
-				} catch (e) {
-					this.coverDownloading = false;
-				}
+				this.coverCachePath = `${this.conversationID}/img_${key}.jpg`;
+				util.cacheFile(snapshotUrl,this.coverCachePath,(e)=>{
+					self.coverDownloading = false;
+					self.src = coverCachePath;
+					console.log(e);
+				},(e)=>{
+					console.log(e);
+				},(e)=>{
+					console.log(e);
+				});
 			},
 			clickMediaItem() {
 				uni.previewImage({
 					current: 0,
-					urls: [this.message.pictureElem.sourcePicture.url],
+					//urls: [this.message.pictureElem.sourcePicture.url],
+					urls: ["_doc/"+this.coverCachePath],
 					indicator: "none",
 				});
 			},
@@ -104,21 +92,5 @@
 		position: relative;
 		border-radius: 16rpx;
 		overflow: hidden;
-
-		.play_icon {
-			width: 48px;
-			height: 48px;
-			position: absolute;
-			top: 50%;
-			left: 50%;
-			transform: translate(-50%, -50%);
-		}
-
-		.video_duration {
-			position: absolute;
-			bottom: 12rpx;
-			right: 24rpx;
-			color: #fff;
-		}
 	}
 </style>

pages/conversation/chating/components/MessageItem/TextMessageRender.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="text_message_container bg_container">
-		<mp-html :previewImg="false" :showImgMenu="false" :lazyLoad="false" selectable :content="getContent" />
+		<u-parse :content="getContent" :previewImg="false" :showImgMenu="false" selectable></u-parse>
 	</view>
 </template>
 

pages/conversation/chating/components/MessageItem/VideoMessageRender.vue

@@ -96,9 +96,7 @@
 				coverDownloadProgress: 0,
 				videoDownloading: false,
 				videoDownloadProgress: 0,
-				coverExists: false,
 				videoExists: false,
-                coverCachePath:"",
                 videoCachePath:"",
                 previewVideoFlag: false,
                 previewVideoSrc: "",
@@ -121,44 +119,19 @@
 				// 如果有远程 snapshotUrl，则下载到 coverCachePath
 				const snapshotUrl = this.message?.videoElem?.snapshotUrl;
 				const key = md5(this.message?.videoElem?.videoUrl || '');
-				this.coverCachePath = `_doc/${this.conversationID}/cover_${key}.jpg`;
-				this.videoCachePath = `_doc/${this.conversationID}/${key}.mp4`;
-				const coverExists = await util.fileExsit(this.coverCachePath);
-				
-				// 自动缓存封面到 this.coverCachePath
-				const self = this;
-				if (typeof plus === 'undefined' || !this.coverCachePath) return;
-				try {
-					// 检查封面是否存在
-					const coverExists = await util.fileExsit(self.coverCachePath);
-					this.coverExists = !!coverExists;
-					// 同时检查视频缓存是否存在
-					const vidExists = await util.fileExsit(self.videoCachePath);
-					this.videoExists = !!vidExists;
-					if (this.coverExists) {
-						this.src = this.coverCachePath;
-						return;
-					}
-					if (!snapshotUrl) {
-						this.src="/static/images/sync_error.png";
-						return;
-					}
-					this.coverDownloading = true;
-					await new Promise((resolve, reject) => {
-						util.downloadFile(snapshotUrl, self.coverCachePath, function(localPath) {
-							self.coverDownloading = false;
-							self.coverExists = true;
-							resolve(localPath);
-						}, function(err) {
-							self.coverDownloading = false;
-							reject(err);
-						}, function(progress) {
-							self.coverDownloadProgress = progress;
-						});
-					});
-				} catch (e) {
-					this.coverDownloading = false;
-				}
+				const coverCachePath = `${this.conversationID}/cover_${key}.jpg`;
+				this.videoCachePath = `${this.conversationID}/${key}.mp4`;
+				this.videoExists = await util.fileExists(this.videoCachePath);
+				self.coverDownloading = true;
+				util.cacheFile(snapshotUrl,coverCachePath,(e)=>{
+					self.coverDownloading = false;
+					self.src = coverCachePath;
+					console.log(e);
+				},(e)=>{
+					console.log(e);
+				},(e)=>{
+					console.log(e);
+				});
 			},
 			clickMediaItem() {
 				uni.previewImage({
@@ -173,7 +146,7 @@
 			onOverlayClick() {
 				// 点击覆盖层：如果视频已缓存则直接播放，否则开始下载
 				if (this.videoExists) {
-					this.playVideo(this.videoCachePath);
+					this.playVideo("_doc/"+this.videoCachePath);
 					return;
 				}
 				const url = this.message?.videoElem?.videoUrl || this.message?.videoElem?.videoPath;
@@ -186,7 +159,7 @@
 				util.downloadFile(url, this.videoCachePath, (localPath) => {
 					this.videoDownloading = false;
 					this.videoExists = true;
-					this.playVideo(localPath);
+					this.playVideo("_doc/"+localPath);
 				}, (err) => {
 					this.videoDownloading = false;
 					uni.showToast({ title: '下载失败' });

pages/conversation/chating/components/MessageItem/VoiceMessageRender.vue

@@ -1,24 +1,144 @@
 <template>
 	<view class="voice_message_container bg_container">
-		消息
+		<view @tap="handleAudio"
+			:class="{'content-audio-container':true,'chat-audio-container-me':true}"
+			:style="'width:'+((message.soundElem.duration)*2+130)+'rpx'">
+			<view class="voice_icon" 
+					:class="[ 
+							{ voice_icon_right: isSender },
+							{ voice_icon_left: !isSender },
+							{ voice_icon_right_an: isSender && message.clientMsgID == storeCurrentMsg.clientMsgID},
+							{ voice_icon_left_an: !isSender && message.clientMsgID == storeCurrentMsg.clientMsgID }
+					]">
+			</view>
+			<view class="">{{message.soundElem.duration}}s</view>
+		</view>
 	</view>
 </template>v
 
 <script>
+	import {mapGetters,mapActions} from "vuex";
+	import util from "@/util"
+	import md5 from "md5";
 	export default {
 		name: "VoiceMessageRender",
 		components: {},
 		props: {
 			message: Object,
+			isSender: {
+				type: Boolean,
+				default: false,
+			},
 			conversationID:String,
 		},
 		data() {
-			return {};
+			console.log(this.message);
+			return {
+				src:"",
+			};
+		},
+		computed:{
+			...mapGetters(["storeCurrentMsg"]),	
+		},
+		created() {
+			this.init();
 		},
 		methods: {
-
+			async init(){
+				console.log(this.message);
+				const self = this;
+				let audio = this.message.soundElem;
+				//soundPath
+				// 如果有远程 snapshotUrl，则下载到 cachePath
+				const snapshotUrl = audio.sourceUrl;
+				const key = md5(snapshotUrl || '');
+				const save_file_name = `audio_${key}.${audio.soundType}`;
+				const cachePath = `${this.conversationID}/${save_file_name}`;
+				if (typeof plus === 'undefined' || !cachePath) return;
+				util.cacheFile(snapshotUrl,cachePath,(fn)=>{
+					self.src = fn;
+					console.log(fn);
+				},(e)=>{
+					console.log(e);
+				},(e)=>{
+					console.log(e);
+				});
+			},
+			handleAudio(){
+				const event = {
+					message:this.message,
+					src:this.src,
+					type:'audio_msg_click'
+				};
+				this.$emit("messageEvent",event);
+			}
 		},
 	};
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+	//语音信息样式
+	.content-audio-container {
+		border-radius: 10rpx;
+		padding: 0 20rpx;
+		/* #ifndef APP-NVUE */
+		max-width: 500rpx;
+		/* #endif */
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+
+		.voice_icon {
+			height: 34rpx;
+			width: 34rpx;
+			background-repeat: no-repeat;
+			background-size: 100%;
+		}
+
+		.voice_icon_right {
+			background-image: url('@/static/images/chat/voice/voice-left-3.png');
+			margin-left: 10rpx;
+		}
+
+		.voice_icon_left {
+			background-image: url('@/static/images/chat/voice/voice-right-3.png');
+			margin-right: 10rpx;
+		}
+
+		.voice_icon_right_an {
+			animation: voiceAn_right 1s linear alternate infinite;
+		}
+
+		.voice_icon_left_an {
+			animation: voiceAn_left 1s linear alternate infinite;
+		}
+
+		@keyframes voiceAn_right {
+			0% {
+				background-image: url('@/static/images/chat/voice/voice-left-1.png');
+			}
+
+			50% {
+				background-image: url('@/static/images/chat/voice/voice-left-2.png');
+			}
+
+			100% {
+				background-image: url('@/static/images/chat/voice/voice-left-3.png');
+			}
+		}
+
+		@keyframes voiceAn_left {
+			0% {
+				background-image: url('@/static/images/chat/voice/voice-right-1.png');
+			}
+
+			50% {
+				background-image: url('@/static/images/chat/voice/voice-right-2.png');
+			}
+
+			100% {
+				background-image: url('@/static/images/chat/voice/voice-right-3.png');
+			}
+		}
+	}
+</style>

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

@@ -16,7 +16,12 @@
 					</view>
 				</view>
 				<view class="message_content_wrap message_content_wrap_shadow" :id="`message_content_wrap_${source.clientMsgID}`" @longtap.stop.prevent="longtapEvent($event)">
-					<component :is="component" :message="source" :conversationID="conversationID"></component>
+					<component :is="component" 
+					@messageEvent="onMessageEvent" 
+					:isSender="isSender" 
+					:message="source" 
+					:conversationID="conversationID"
+					></component>
 				</view>
 			</view>
 		</view>
@@ -172,7 +177,9 @@
 				console.log('longtapEvent');
 				this.$emit('userEvent',{type:"longtapMsgContent"},this.source);
 			},
-			
+			onMessageEvent(e){
+				this.$emit('userEvent',e);
+			},
 		},
 	};
 </script>
@@ -295,7 +302,7 @@
 					flex-direction: row-reverse;
 				
 					.bg_container {
-						border-radius: 12rpx 0 12rpx 12rpx;
+						border-radius: 6rpx;
 						background-color: #94ec68 !important;
 					}
 				}