fix

virgo.wzfrontend/console/src/layout/components/chatBox.vue

@@ -17,12 +17,28 @@
 			</div>
 		</div>
 		<div class="chat-send">
-			<el-button type="primary" size="medium">发送</el-button>
+			<div class="file-list">
+				<input type="file" ref="fileadd" style="opacity: 0;width: 0;height: 0;" @change="changeImage"
+					accept="image/*" />
+				<i class="el-icon-picture" @click="uploadImage"></i>
+			</div>
+			<el-input type="textarea" :rows="5" resize="none" placeholder="请输入内容" :maxlength="200"
+				v-model="sendMessage">
+			</el-input>
+			<div class="chat-send-btn">
+				<el-button type="primary" size="medium" @click="send" :loading="sendLoading" :disabled="!sendMessage">
+					发送
+				</el-button>
+			</div>
 		</div>
 	</div>
 </template>
 
 <script>
+	import {
+		YeIMUniSDK, // SDK
+		YeIMUniSDKDefines // 预定义常量
+	} from 'yeim-uni-sdk'
 	import MescrollVue from 'mescroll.js/mescroll.vue'
 	export default {
 		props: ['body'],
@@ -31,7 +47,9 @@
 				dataList: [],
 				nextMessageId: null,
 				hasTopData: true,
-				loading: false
+				loading: false,
+				sendMessage: '',
+				sendLoading: false
 			}
 		},
 		created() {
@@ -39,11 +57,14 @@
 				// 设置onscroll事件处理函数
 				this.$refs.chatList.onscroll = this.chatScroll;
 				this.mescrollUpFunc('init');
+				YeIMUniSDK.getInstance().addEventListener(YeIMUniSDKDefines.EVENT.MESSAGE_RECEIVED, this
+					.onMessage);
 			})
 		},
 		methods: {
 			chatScroll() {
 				if (!this.hasTopData) return;
+				if (!this.$refs.chatList) return;
 				let scrollHeight = this.$refs.chatList.scrollTop;
 				if (scrollHeight === 0) this.mescrollUpFunc();
 			},
@@ -80,6 +101,80 @@
 					});
 				})
 			},
+			onMessage(e) {
+				let message = e;
+				if (this.body.conversationId != message.conversationId) return;
+				this.dataList.push(message);
+				this.$nextTick(() => {
+					this.$refs.chatList.scrollTo(0, 99999);
+				})
+				this.$chat.clearConversationUnread(this.body.conversationId);
+			},
+			changeImage(e) {
+				let currentfile = this.$refs.fileadd.files[0];
+				this.$loading();
+				if (currentfile) {
+					const blobUrl = URL.createObjectURL(currentfile); // 创建Blob URL
+					let img = new Image();
+					img.src = blobUrl;
+					img.onload = () => {
+						this.sendImage({
+							path: blobUrl,
+							width: img.width,
+							height: img.height
+						})
+					}
+				}
+			},
+			uploadImage() {
+				this.$refs.fileadd.click();
+			},
+			sendImage(option) {
+				//创建图片消息
+				let message = YeIMUniSDK.getInstance().createImageMessage({
+					toId: this.body.conversationId, //接收者用户ID字符串
+					conversationType: YeIMUniSDKDefines
+						.CONVERSATION_TYPE
+						.PRIVATE, //会话类型：私聊
+					body: {
+						file: {
+							tempFilePath: option.path, //本地图片临时路径
+							width: option.width, //图片宽度
+							height: option.height //图片高度
+						}
+					},
+					extra: "",
+					onProgress: (progress) => {
+						// console.log(progress);
+					}
+				});
+				YeIMUniSDK.getInstance().sendMessage({
+					message: message,
+					success: this.sendSuccess,
+					fail: (err) => {
+						this.$loading.close();
+					}
+				});
+
+			},
+			// 发送信息
+			send() {
+				if (!this.sendMessage) return this.$message.warning('内容不能为空');
+				this.sendLoading = true;
+				this.$chat.sendText(this.body.conversationId, this.sendMessage, this.sendSuccess, (e) => {
+					this.$message.error('发送失败');
+					this.sendLoading = false;
+				});
+			},
+			sendSuccess(res) {
+				this.$loading.close();
+				this.dataList.push(res.data);
+				this.sendMessage = '';
+				this.sendLoading = false;
+				this.$nextTick(() => {
+					this.$refs.chatList.scrollTo(0, 99999);
+				})
+			}
 		},
 		components: {
 			MescrollVue
@@ -95,6 +190,15 @@
 		flex-direction: column;
 		position: relative;
 
+		.file-list {
+			padding: 10px 10px 0 10px;
+
+			.el-icon-picture {
+				font-size: 22px;
+				cursor: pointer;
+			}
+		}
+
 		.chat-item {
 			display: flex;
 			padding: 10px;
@@ -204,14 +308,17 @@
 		}
 
 		.chat-send {
-			height: 200px;
 			border-top: 1px solid $--color-border;
 			position: relative;
 
-			.el-button {
-				position: absolute;
-				right: 10px;
-				bottom: 10px;
+			.el-textarea__inner {
+				border: none;
+
+			}
+
+			.chat-send-btn {
+				padding: 10px;
+				text-align: right;
 			}
 		}
 	}

virgo.wzfrontend/console/src/uitls/chat.js

@@ -92,56 +92,8 @@ const $chat = {
 			});
 		});
 	},
-	sendImage(userId, success) {
-		connect(() => {
-			uni.chooseImage({
-				count: 1, //图片数量
-				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
-				sourceType: ['album'], //从相册选择
-				success: res => {
-					uni.getImageInfo({
-						src: res.tempFilePaths[0],
-						success: image => {
-							//创建图片消息
-							let message = YeIMUniSDK.getInstance()
-								.createImageMessage({
-									toId: userId, //接收者用户ID字符串
-									conversationType: YeIMUniSDKDefines
-										.CONVERSATION_TYPE
-										.PRIVATE, //会话类型：私聊
-									body: {
-										file: {
-											tempFilePath: res.tempFilePaths[
-												0], //本地图片临时路径
-											width: image.width, //图片宽度
-											height: image.height //图片高度
-										}
-									},
-									extra: "",
-									onProgress: (progress) => {
-										// console.log(progress);
-									}
-								});
-							//发送消息
-							uni.showLoading();
-							YeIMUniSDK.getInstance().sendMessage({
-								message: message,
-								success: success,
-								fail: (err) => {
-									uni.hideLoading();
-									uni.showToast({
-										title: '发送失败',
-										icon: "none"
-									});
-								}
-							});
-						}
-					});
-				}
-			});
-		});
-	},
-	sendText(userId, content, success) {
+	sendImage(userId, option, success) {},
+	sendText(userId, content, success, fail) {
 		connect(() => {
 			//创建文字消息
 			let message = YeIMUniSDK.getInstance().createTextMessage({
@@ -156,13 +108,7 @@ const $chat = {
 			YeIMUniSDK.getInstance().sendMessage({
 				message: message,
 				success: success,
-				fail: (err) => {
-					uni.hideLoading();
-					uni.showToast({
-						title: '发送失败',
-						icon: "none"
-					});
-				}
+				fail: fail
 			});
 		});
 	},