From 9feddf33ab42ab5d952203384ab426b8753315df Mon Sep 17 00:00:00 2001 From: "xie.bx" Date: Tue, 8 Nov 2022 11:02:55 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B0=86=E7=A7=81=E8=81=8A=E5=92=8C=E7=BE=A4?= =?UTF-8?q?=E8=81=8A=E6=95=B4=E5=90=88=E6=88=90=E4=B8=80=E4=B8=AA=E7=BB=84?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- im-ui/src/api/emotion.js | 1 - .../chat/{ChatGroup.vue => ChatBox.vue} | 218 ++++++++++++--- im-ui/src/components/chat/ChatPrivate.vue | 251 ------------------ im-ui/src/store/chatStore.js | 8 +- im-ui/src/view/Chat.vue | 147 +--------- im-ui/src/view/Friend.vue | 2 +- 6 files changed, 182 insertions(+), 445 deletions(-) rename im-ui/src/components/chat/{ChatGroup.vue => ChatBox.vue} (63%) delete mode 100644 im-ui/src/components/chat/ChatPrivate.vue diff --git a/im-ui/src/api/emotion.js b/im-ui/src/api/emotion.js index 3e571f2..fb4d0d1 100644 --- a/im-ui/src/api/emotion.js +++ b/im-ui/src/api/emotion.js @@ -2,7 +2,6 @@ const emoTextList = ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', ' let transform = (content) => { - console.log(content) return content.replace(/\#[\u4E00-\u9FA5]{1,3}\;/gi, textToImg); } diff --git a/im-ui/src/components/chat/ChatGroup.vue b/im-ui/src/components/chat/ChatBox.vue similarity index 63% rename from im-ui/src/components/chat/ChatGroup.vue rename to im-ui/src/components/chat/ChatBox.vue index ae91911..91949b3 100644 --- a/im-ui/src/components/chat/ChatGroup.vue +++ b/im-ui/src/components/chat/ChatBox.vue @@ -2,7 +2,7 @@ {{title}} - + @@ -54,7 +54,7 @@ import MessageItem from "./MessageItem.vue"; import FileUpload from "../common/FileUpload.vue"; import Emotion from "../common/Emotion.vue"; - + export default { name: "chatPrivate", components: { @@ -70,12 +70,13 @@ }, data() { return { - sendText: "", - showSide: false, + friend: {}, group: {}, groupMembers: [], - showEmotion: false, - emoBoxPos: { + sendText: "", + showSide: false, // 是否显示群聊信息栏 + showEmotion: false, // 是否显示emoji表情 + emoBoxPos: { // emoji表情弹出位置 x: 0, y: 0 } @@ -84,17 +85,19 @@ methods: { handleImageSuccess(res, file) { let msgInfo = { - groupId: file.raw.targetId, + recvId: file.raw.targetId, content: JSON.stringify(res.data), type: 1 } + // 填充对方id + this.setTargetId(msgInfo, this.chat.targetId); this.$http({ - url: '/message/group/send', + url: this.messageAction, method: 'post', data: msgInfo }).then((data) => { let info = { - type: 'GROUP', + type: this.chat.type, targetId: file.raw.targetId, fileId: file.raw.uid, content: JSON.stringify(res.data), @@ -105,7 +108,7 @@ }, handleImageFail(res, file) { let info = { - type: 'GROUP', + type: this.chat.type, targetId: file.raw.targetId, fileId: file.raw.uid, loadStatus: "fail" @@ -121,13 +124,14 @@ let msgInfo = { fileId: file.uid, sendId: this.mine.id, - groupId: this.chat.targetId, content: JSON.stringify(data), sendTime: new Date().getTime(), selfSend: true, type: 1, loadStatus: "loading" } + // 填充对方id + this.setTargetId(msgInfo, this.chat.targetId); // 插入消息 this.$store.commit("insertMessage", msgInfo); // 滚动到底部 @@ -142,17 +146,18 @@ url: res.data } let msgInfo = { - groupId: file.raw.targetId, content: JSON.stringify(data), type: 2 } + // 填充对方id + this.setTargetId(msgInfo, this.chat.targetId); this.$http({ - url: '/message/group/send', + url: this.messageAction, method: 'post', data: msgInfo }).then(() => { let info = { - type: 'GROUP', + type: this.chat.type, targetId: file.raw.targetId, fileId: file.raw.uid, content: JSON.stringify(data), @@ -163,7 +168,7 @@ }, handleFileFail(res, file) { let info = { - type: 'GROUP', + type: this.chat.type, targetId: file.raw.targetId, fileId: file.raw.uid, loadStatus: "fail" @@ -180,13 +185,14 @@ let msgInfo = { fileId: file.uid, sendId: this.mine.id, - groupId: this.chat.targetId, content: JSON.stringify(data), sendTime: new Date().getTime(), selfSend: true, type: 2, loadStatus: "loading" } + // 填充对方id + this.setTargetId(msgInfo, this.chat.targetId); // 插入消息 this.$store.commit("insertMessage", msgInfo); // 滚动到底部 @@ -207,6 +213,15 @@ }, handleEmotion(emoText) { this.sendText += emoText; + // 保持输入框焦点 + this.$refs.sendBox.focus(); + }, + setTargetId(msgInfo, targetId) { + if (this.chat.type == "GROUP") { + msgInfo.groupId = targetId; + } else { + msgInfo.recvId = targetId; + } }, sendTextMessage() { @@ -215,12 +230,13 @@ return } let msgInfo = { - groupId: this.chat.targetId, content: this.sendText, type: 0 } + // 填充对方id + this.setTargetId(msgInfo, this.chat.targetId); this.$http({ - url: '/message/group/send', + url: this.messageAction, method: 'post', data: msgInfo }).then((data) => { @@ -235,7 +251,7 @@ // 滚动到底部 this.scrollToBottom(); }) - const e = window.event || arguments[0] + const e = window.event || arguments[0]; if (e.key === 'Enter' || e.code === 'Enter' || e.keyCode === 13) { e.returnValue = false; e.preventDefault(); @@ -249,6 +265,8 @@ }).then((group) => { this.group = group; this.$store.commit("updateChatFromGroup", group); + this.$store.commit("updateGroup", group); + }); this.$http({ @@ -257,15 +275,34 @@ }).then((groupMembers) => { this.groupMembers = groupMembers; }); - + }, + loadFriend(friendId) { + // 获取对方最新信息 + this.$http({ + url: `/user/find/${friendId}`, + method: 'get' + }).then((friend) => { + this.friend = friend; + this.$store.commit("updateChatFromFriend", friend); + this.$store.commit("updateFriend", friend); + }) }, showName(msgInfo) { - let member = this.groupMembers.find((m) => m.userId == msgInfo.sendId); - return member ? member.aliasName : ""; + if (this.chat.type == 'Group') { + let member = this.groupMembers.find((m) => m.userId == msgInfo.sendId); + return member ? member.aliasName : ""; + } else { + return msgInfo.sendId == this.mine.id ? this.mine.nickName : this.chat.showName + } + }, headImage(msgInfo) { - let member = this.groupMembers.find((m) => m.userId == msgInfo.sendId); - return member ? member.headImage : ""; + if (this.chat.type == 'Group') { + let member = this.groupMembers.find((m) => m.userId == msgInfo.sendId); + return member ? member.headImage : ""; + } else { + return msgInfo.sendId == this.mine.id ? this.mine.headImageThumb : this.chat.headImage + } }, scrollToBottom() { this.$nextTick(() => { @@ -279,41 +316,134 @@ return this.$store.state.userStore.userInfo; }, title() { - let size = this.groupMembers.filter(m => !m.quit).length; - return `${this.chat.showName}(${size})`; + let title = this.chat.showName; + if (this.chat.type == "GROUP") { + let size = this.groupMembers.filter(m => !m.quit).length; + title += `(${size})`; + } + return title; }, imageAction() { return `${process.env.VUE_APP_BASE_API}/image/upload`; }, fileAction() { return `${process.env.VUE_APP_BASE_API}/file/upload`; + }, + messageAction() { + return `/message/${this.chat.type.toLowerCase()}/send`; } - }, - mounted() { - console.log("group mount...") - this.loadGroup(this.chat.targetId); - this.scrollToBottom(); + watch: { + chat: { + handler(newChat, oldChat) { + if(newChat.type != oldChat.type || newChat.targetId != oldChat.targetId){ + if (this.chat.type == "GROUP") { + this.loadGroup(this.chat.targetId); + } else { + this.loadFriend(this.chat.targetId); + } + this.scrollToBottom(); + this.sendText = ""; + // 保持输入框焦点 + this.$refs.sendBox.focus(); + } + }, + deep: true // 深度监听 + } } } - diff --git a/im-ui/src/components/chat/ChatPrivate.vue b/im-ui/src/components/chat/ChatPrivate.vue deleted file mode 100644 index 8ece220..0000000 --- a/im-ui/src/components/chat/ChatPrivate.vue +++ /dev/null @@ -1,251 +0,0 @@ - - - - - diff --git a/im-ui/src/store/chatStore.js b/im-ui/src/store/chatStore.js index 38ff629..9328c18 100644 --- a/im-ui/src/store/chatStore.js +++ b/im-ui/src/store/chatStore.js @@ -102,12 +102,12 @@ export default { msg.content = info.content; } }, - updateChatFromUser(state, user) { + updateChatFromFriend(state, friend) { for (let i in state.chats) { let chat = state.chats[i]; - if (chat.type=='PRIVATE' && chat.targetId == user.id) { - chat.headImage = user.headImageThumb; - chat.showName = user.nickName; + if (chat.type=='PRIVATE' && chat.targetId == friend.id) { + chat.headImage = friend.headImageThumb; + chat.showName = friend.nickName; break; } } diff --git a/im-ui/src/view/Chat.vue b/im-ui/src/view/Chat.vue index 4b181f4..fd9903c 100644 --- a/im-ui/src/view/Chat.vue +++ b/im-ui/src/view/Chat.vue @@ -14,31 +14,20 @@ - - +