|
|
|
@ -7,55 +7,12 @@ |
|
|
|
</el-input> |
|
|
|
</div> |
|
|
|
<div v-for="(chat,index) in chatStore.chats" :key="chat.targetId"> |
|
|
|
<chat-item :chat="chat" :index="index" @click.native="handleActiveItem(index)" @del="handleDelItem(chat,index)" :active="index === chatStore.activeIndex"></chat-item> |
|
|
|
<chat-item :chat="chat" :index="index" @click.native="handleActiveItem(index)" @del="handleDelItem(chat,index)" |
|
|
|
:active="index === chatStore.activeIndex"></chat-item> |
|
|
|
</div> |
|
|
|
</el-aside> |
|
|
|
<el-container class="r-chat-box"> |
|
|
|
<el-header height="60px"> |
|
|
|
{{activeChat.showName}} |
|
|
|
</el-header> |
|
|
|
<el-main class="im-chat-main" id="chatScrollBox"> |
|
|
|
<div class="im-chat-box"> |
|
|
|
<ul> |
|
|
|
<li v-for="msgInfo in activeChat.messages" :key="msgInfo.id"> |
|
|
|
<message-item :mine="msgInfo.sendUserId == $store.state.userStore.userInfo.id" |
|
|
|
:headImage="headImage(msgInfo)" |
|
|
|
:showName="showName(msgInfo)" :msgInfo="msgInfo"> |
|
|
|
</message-item> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</el-main> |
|
|
|
<el-footer height="25%" class="im-chat-footer"> |
|
|
|
<div class="chat-tool-bar"> |
|
|
|
<div class="el-icon-service"></div> |
|
|
|
<div> |
|
|
|
<file-upload action="/api/image/upload" |
|
|
|
:maxSize="5*1024*1024" |
|
|
|
:fileTypes="['image/jpeg', 'image/png', 'image/jpg', 'image/gif']" |
|
|
|
@before="handleImageBefore" |
|
|
|
@success="handleImageSuccess" |
|
|
|
@fail="handleImageFail" > |
|
|
|
<i class="el-icon-picture-outline"></i> |
|
|
|
</file-upload> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<file-upload action="/api/file/upload" |
|
|
|
:maxSize="10*1024*1024" |
|
|
|
@before="handleFileBefore" |
|
|
|
@success="handleFileSuccess" |
|
|
|
@fail="handleFileFail" > |
|
|
|
<i class="el-icon-wallet"></i> |
|
|
|
</file-upload> |
|
|
|
</div> |
|
|
|
<div class="el-icon-chat-dot-round"></div> |
|
|
|
</div> |
|
|
|
<textarea v-model="messageContent" ref="sendBox" class="send-text-area" @keyup.enter="handleSendMessage()"></textarea> |
|
|
|
<div class="im-chat-send"> |
|
|
|
|
|
|
|
<el-button type="primary" @click="handleSendMessage()">发送</el-button> |
|
|
|
</div> |
|
|
|
</el-footer> |
|
|
|
<chat-private :chat="activeChat"></chat-private> |
|
|
|
</el-container> |
|
|
|
</el-container> |
|
|
|
</template> |
|
|
|
@ -66,6 +23,7 @@ |
|
|
|
import MessageItem from "../components/chat/MessageItem.vue"; |
|
|
|
import HeadImage from "../components/common/HeadImage.vue"; |
|
|
|
import FileUpload from "../components/common/FileUpload.vue"; |
|
|
|
import ChatPrivate from "../components/chat/ChatPrivate.vue"; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: "chat", |
|
|
|
@ -74,7 +32,8 @@ |
|
|
|
ChatTime, |
|
|
|
HeadImage, |
|
|
|
FileUpload, |
|
|
|
MessageItem |
|
|
|
MessageItem, |
|
|
|
ChatPrivate |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
@ -85,155 +44,34 @@ |
|
|
|
methods: { |
|
|
|
handleActiveItem(index) { |
|
|
|
this.$store.commit("activeChat", index); |
|
|
|
// 获取对方 |
|
|
|
let userId = this.chatStore.chats[index].targetId; |
|
|
|
this.$http({ |
|
|
|
url: `/api/user/find/${userId}`, |
|
|
|
method: 'get' |
|
|
|
}).then((user) => { |
|
|
|
// 如果发现好友的头像和昵称改了，进行更新 |
|
|
|
let chat = this.chatStore.chats[index]; |
|
|
|
if (user.headImageThumb != chat.headImage || |
|
|
|
user.nickName != chat.showName) { |
|
|
|
this.updateFriendInfo(user, index) |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
handleSendMessage() { |
|
|
|
let msgInfo = { |
|
|
|
recvUserId: this.activeChat.targetId, |
|
|
|
content: this.messageContent, |
|
|
|
type: 0 |
|
|
|
let chat = this.chatStore.chats[index]; |
|
|
|
if (chat.type == "GROUP") { |
|
|
|
let groupId = this.chatStore.chats[index].targetId; |
|
|
|
|
|
|
|
} else { |
|
|
|
this.refreshNameAndHeadImage(chat); |
|
|
|
} |
|
|
|
this.sendMessage(msgInfo); |
|
|
|
|
|
|
|
}, |
|
|
|
handleDelItem(chat, index) { |
|
|
|
this.$store.commit("removeChat", index); |
|
|
|
}, |
|
|
|
|
|
|
|
handleImageSuccess(res, file) { |
|
|
|
let msgInfo = { |
|
|
|
recvUserId: file.raw.targetId, |
|
|
|
content: JSON.stringify(res.data), |
|
|
|
type: 1 |
|
|
|
} |
|
|
|
this.$http({ |
|
|
|
url: '/api/message/single/send', |
|
|
|
method: 'post', |
|
|
|
data: msgInfo |
|
|
|
}).then((data) => { |
|
|
|
let info = { |
|
|
|
targetId : file.raw.targetId, |
|
|
|
fileId: file.raw.uid, |
|
|
|
content: JSON.stringify(res.data), |
|
|
|
loadStatus: "ok" |
|
|
|
} |
|
|
|
this.$store.commit("handleFileUpload", info); |
|
|
|
}) |
|
|
|
}, |
|
|
|
handleImageFail(res,file){ |
|
|
|
let info = { |
|
|
|
targetId : file.raw.targetId, |
|
|
|
fileId: file.raw.uid, |
|
|
|
loadStatus: "fail" |
|
|
|
} |
|
|
|
this.$store.commit("handleFileUpload", info); |
|
|
|
}, |
|
|
|
handleImageBefore(file) { |
|
|
|
let url = URL.createObjectURL(file); |
|
|
|
let data = { |
|
|
|
originUrl : url, |
|
|
|
thumbUrl: url |
|
|
|
} |
|
|
|
sendGroupMessage() { |
|
|
|
let msgInfo = { |
|
|
|
fileId: file.uid, |
|
|
|
sendUserId: this.$store.state.userStore.userInfo.id, |
|
|
|
recvUserId: this.activeChat.targetId, |
|
|
|
content: JSON.stringify(data), |
|
|
|
sendTime: new Date().getTime(), |
|
|
|
selfSend: true, |
|
|
|
type: 1, |
|
|
|
loadStatus: "loadding" |
|
|
|
} |
|
|
|
// 插入消息 |
|
|
|
this.$store.commit("insertMessage", msgInfo); |
|
|
|
// 滚动到底部 |
|
|
|
this.scrollToBottom(); |
|
|
|
// 借助file对象保存对方id |
|
|
|
file.targetId = this.activeChat.targetId; |
|
|
|
}, |
|
|
|
handleFileSuccess(res, file) { |
|
|
|
console.log(res.data); |
|
|
|
let data = { |
|
|
|
name: file.name, |
|
|
|
size: file.size, |
|
|
|
url: res.data |
|
|
|
} |
|
|
|
let msgInfo = { |
|
|
|
recvUserId: file.raw.targetId, |
|
|
|
content: JSON.stringify(data), |
|
|
|
type: 2 |
|
|
|
} |
|
|
|
this.$http({ |
|
|
|
url: '/api/message/single/send', |
|
|
|
method: 'post', |
|
|
|
data: msgInfo |
|
|
|
}).then(() => { |
|
|
|
let info = { |
|
|
|
targetId : file.raw.targetId, |
|
|
|
fileId: file.raw.uid, |
|
|
|
content: JSON.stringify(data), |
|
|
|
loadStatus: "ok" |
|
|
|
} |
|
|
|
this.$store.commit("handleFileUpload", info); |
|
|
|
}) |
|
|
|
}, |
|
|
|
handleFileFail(res, file) { |
|
|
|
let info = { |
|
|
|
targetId : file.raw.targetId, |
|
|
|
fileId: file.raw.uid, |
|
|
|
loadStatus: "fail" |
|
|
|
} |
|
|
|
this.$store.commit("handleFileUpload", info); |
|
|
|
}, |
|
|
|
handleFileBefore(file) { |
|
|
|
let url = URL.createObjectURL(file); |
|
|
|
let data = { |
|
|
|
name: file.name, |
|
|
|
size: file.size, |
|
|
|
url: url |
|
|
|
} |
|
|
|
let msgInfo = { |
|
|
|
fileId: file.uid, |
|
|
|
sendUserId: this.$store.state.userStore.userInfo.id, |
|
|
|
recvUserId: this.activeChat.targetId, |
|
|
|
content: JSON.stringify(data), |
|
|
|
sendTime: new Date().getTime(), |
|
|
|
selfSend: true, |
|
|
|
type: 2, |
|
|
|
loadStatus: "loading" |
|
|
|
groupId: this.activeChat.targetId, |
|
|
|
content: this.messageContent, |
|
|
|
type: 0 |
|
|
|
} |
|
|
|
|
|
|
|
// 插入消息 |
|
|
|
this.$store.commit("insertMessage", msgInfo); |
|
|
|
// 滚动到底部 |
|
|
|
this.scrollToBottom(); |
|
|
|
// 借助file对象保存对方id |
|
|
|
file.targetId = this.activeChat.targetId; |
|
|
|
}, |
|
|
|
sendMessage(msgInfo) { |
|
|
|
this.$http({ |
|
|
|
url: '/api/message/single/send', |
|
|
|
url: '/api/message/group/send', |
|
|
|
method: 'post', |
|
|
|
data: msgInfo |
|
|
|
}).then((data) => { |
|
|
|
this.$message.success("发送成功"); |
|
|
|
this.messageContent = ""; |
|
|
|
msgInfo.sendTime = new Date().getTime(); |
|
|
|
msgInfo.sendUserId = this.$store.state.userStore.userInfo.id; |
|
|
|
msgInfo.sendId = this.$store.state.userStore.userInfo.id; |
|
|
|
msgInfo.selfSend = true; |
|
|
|
msgInfo.loadStatus = "ok"; |
|
|
|
this.$store.commit("insertMessage", msgInfo); |
|
|
|
// 保持输入框焦点 |
|
|
|
this.$refs.sendBox.focus(); |
|
|
|
@ -241,7 +79,22 @@ |
|
|
|
this.scrollToBottom(); |
|
|
|
}) |
|
|
|
}, |
|
|
|
updateFriendInfo(user, index) { |
|
|
|
refreshNameAndHeadImage(chat){ |
|
|
|
// 获取对方最新信息 |
|
|
|
let userId = chat.targetId; |
|
|
|
this.$http({ |
|
|
|
url: `/api/user/find/${userId}`, |
|
|
|
method: 'get' |
|
|
|
}).then((user) => { |
|
|
|
// 如果发现好友的头像和昵称改了，进行更新 |
|
|
|
if (user.headImageThumb != chat.headImage || |
|
|
|
user.nickName != chat.showName) { |
|
|
|
this.updateFriendInfo(user) |
|
|
|
this.$store.commit("updateChatFromUser", user); |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
updateFriendInfo(user) { |
|
|
|
let friendInfo = { |
|
|
|
id: user.id, |
|
|
|
nickName: user.nickName, |
|
|
|
@ -253,29 +106,8 @@ |
|
|
|
data: friendInfo |
|
|
|
}).then(() => { |
|
|
|
this.$store.commit("updateFriend", friendInfo); |
|
|
|
this.$store.commit("updateChatFromUser", user); |
|
|
|
}) |
|
|
|
}, |
|
|
|
showName(msg) { |
|
|
|
if (msg.sendUserId == this.$store.state.userStore.userInfo.id) { |
|
|
|
return this.$store.state.userStore.userInfo.nickName; |
|
|
|
} |
|
|
|
return this.activeChat.showName; |
|
|
|
}, |
|
|
|
headImage(msg) { |
|
|
|
|
|
|
|
if (msg.sendUserId == this.$store.state.userStore.userInfo.id) { |
|
|
|
return this.$store.state.userStore.userInfo.headImageThumb; |
|
|
|
} |
|
|
|
return this.activeChat.headImage; |
|
|
|
}, |
|
|
|
scrollToBottom(){ |
|
|
|
this.$nextTick(() => { |
|
|
|
const div = document.getElementById("chatScrollBox"); |
|
|
|
div.scrollTop = div.scrollHeight; |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
computed: { |
|
|
|
chatStore() { |
|
|
|
@ -287,16 +119,14 @@ |
|
|
|
if (index >= 0 && chats.length > 0) { |
|
|
|
return chats[index]; |
|
|
|
} |
|
|
|
return this.emptyChat; |
|
|
|
}, |
|
|
|
emptyChat() { |
|
|
|
// 当没有激活任何会话时，创建一个空会话，防止报错 |
|
|
|
return { |
|
|
|
// 当没有激活任何会话时，创建一个空会话，不然控制台会有很多报错 |
|
|
|
let emptyChat = { |
|
|
|
targetId: -1, |
|
|
|
showName: "", |
|
|
|
headImage: "", |
|
|
|
messages: [] |
|
|
|
} |
|
|
|
return emptyChat; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -308,6 +138,7 @@ |
|
|
|
border: #dddddd solid 1px; |
|
|
|
background: white; |
|
|
|
width: 3rem; |
|
|
|
|
|
|
|
.l-chat-header { |
|
|
|
padding: 5px; |
|
|
|
background-color: white; |
|
|
|
@ -318,27 +149,28 @@ |
|
|
|
.r-chat-box { |
|
|
|
background: white; |
|
|
|
border: #dddddd solid 1px; |
|
|
|
|
|
|
|
.el-header { |
|
|
|
padding: 5px; |
|
|
|
background-color: white; |
|
|
|
line-height: 50px; |
|
|
|
} |
|
|
|
|
|
|
|
.im-chat-main { |
|
|
|
padding: 0; |
|
|
|
border: #dddddd solid 1px; |
|
|
|
|
|
|
|
.im-chat-box { |
|
|
|
ul { |
|
|
|
padding: 20px; |
|
|
|
|
|
|
|
li { |
|
|
|
list-style-type:none; |
|
|
|
list-style-type: none; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.im-chat-footer { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
@ -352,6 +184,7 @@ |
|
|
|
height: 40px; |
|
|
|
text-align: left; |
|
|
|
border: #dddddd solid 1px; |
|
|
|
|
|
|
|
>div { |
|
|
|
margin-left: 10px; |
|
|
|
font-size: 22px; |
|
|
|
@ -361,10 +194,8 @@ |
|
|
|
|
|
|
|
&:hover { |
|
|
|
color: black; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.send-text-area { |
|
|
|
|
xie.bx
3 years ago