xie.bx
3 years ago
6 changed files with 182 additions and 445 deletions
@ -1,251 +0,0 @@ |
|||||
<template> |
|
||||
<el-container class="r-chat-box"> |
|
||||
<el-header height="60px"> |
|
||||
{{chat.showName}} |
|
||||
</el-header> |
|
||||
<el-main class="im-chat-main" id="chatScrollBox"> |
|
||||
<div class="im-chat-box"> |
|
||||
<ul> |
|
||||
<li v-for="msgInfo in chat.messages" :key="msgInfo.id"> |
|
||||
<message-item :mine="msgInfo.sendId == mine.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-eleme" ref="emotion" @click="switchEmotionBox()"> |
|
||||
<emotion v-show="showEmotion" :pos="emoBoxPos" @emotion="handleEmotion"></Emotion> |
|
||||
</div> |
|
||||
<div> |
|
||||
<file-upload :action="imageAction" :maxSize="5*1024*1024" :fileTypes="['image/jpeg', 'image/png', 'image/jpg','image/webp', 'image/gif']" |
|
||||
@before="handleImageBefore" @success="handleImageSuccess" @fail="handleImageFail"> |
|
||||
<i class="el-icon-picture-outline"></i> |
|
||||
</file-upload> |
|
||||
</div> |
|
||||
<div> |
|
||||
<file-upload :action="fileAction" :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="sendText" ref="sendBox" class="send-text-area" @keyup.enter="sendTextMessage()"></textarea> |
|
||||
<div class="im-chat-send"> |
|
||||
<el-button type="primary" @click="sendTextMessage()">发送</el-button> |
|
||||
</div> |
|
||||
</el-footer> |
|
||||
</el-container> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import MessageItem from "./MessageItem.vue"; |
|
||||
import FileUpload from "../common/FileUpload.vue"; |
|
||||
import Emotion from "../common/Emotion.vue"; |
|
||||
|
|
||||
export default { |
|
||||
name: "chatPrivate", |
|
||||
components: { |
|
||||
MessageItem, |
|
||||
FileUpload, |
|
||||
Emotion |
|
||||
}, |
|
||||
props: { |
|
||||
chat: { |
|
||||
type: Object |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
sendText: "", |
|
||||
showEmotion: false, |
|
||||
emoBoxPos: { |
|
||||
x: 0, |
|
||||
y: 0 |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
handleImageSuccess(res, file) { |
|
||||
let msgInfo = { |
|
||||
recvId: file.raw.targetId, |
|
||||
content: JSON.stringify(res.data), |
|
||||
type: 1 |
|
||||
} |
|
||||
this.$http({ |
|
||||
url: '/message/private/send', |
|
||||
method: 'post', |
|
||||
data: msgInfo |
|
||||
}).then((data) => { |
|
||||
let info = { |
|
||||
type: 'PRIVATE', |
|
||||
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 = { |
|
||||
type: 'PRIVATE', |
|
||||
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 |
|
||||
} |
|
||||
let msgInfo = { |
|
||||
fileId: file.uid, |
|
||||
sendId: this.mine.id, |
|
||||
recvId: this.chat.targetId, |
|
||||
content: JSON.stringify(data), |
|
||||
sendTime: new Date().getTime(), |
|
||||
selfSend: true, |
|
||||
type: 1, |
|
||||
loadStatus: "loading" |
|
||||
} |
|
||||
// 插入消息 |
|
||||
this.$store.commit("insertMessage", msgInfo); |
|
||||
// 滚动到底部 |
|
||||
this.scrollToBottom(); |
|
||||
// 借助file对象保存对方id |
|
||||
file.targetId = this.chat.targetId; |
|
||||
}, |
|
||||
handleFileSuccess(res, file) { |
|
||||
console.log(res.data); |
|
||||
let data = { |
|
||||
name: file.name, |
|
||||
size: file.size, |
|
||||
url: res.data |
|
||||
} |
|
||||
let msgInfo = { |
|
||||
recvId: file.raw.targetId, |
|
||||
content: JSON.stringify(data), |
|
||||
type: 2 |
|
||||
} |
|
||||
this.$http({ |
|
||||
url: '/message/private/send', |
|
||||
method: 'post', |
|
||||
data: msgInfo |
|
||||
}).then(() => { |
|
||||
let info = { |
|
||||
type: 'PRIVATE', |
|
||||
targetId: file.raw.targetId, |
|
||||
fileId: file.raw.uid, |
|
||||
content: JSON.stringify(data), |
|
||||
loadStatus: "ok" |
|
||||
} |
|
||||
this.$store.commit("handleFileUpload", info); |
|
||||
}) |
|
||||
}, |
|
||||
handleFileFail(res, file) { |
|
||||
let info = { |
|
||||
type: 'PRIVATE', |
|
||||
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, |
|
||||
sendId: this.mine.id, |
|
||||
recvId: this.chat.targetId, |
|
||||
content: JSON.stringify(data), |
|
||||
sendTime: new Date().getTime(), |
|
||||
selfSend: true, |
|
||||
type: 2, |
|
||||
loadStatus: "loading" |
|
||||
} |
|
||||
// 插入消息 |
|
||||
this.$store.commit("insertMessage", msgInfo); |
|
||||
// 滚动到底部 |
|
||||
this.scrollToBottom(); |
|
||||
// 借助file对象保存对方id |
|
||||
file.targetId = this.chat.targetId; |
|
||||
}, |
|
||||
switchEmotionBox() { |
|
||||
this.showEmotion = !this.showEmotion; |
|
||||
let width = this.$refs.emotion.offsetWidth; |
|
||||
let left = this.$elm.fixLeft(this.$refs.emotion); |
|
||||
let top = this.$elm.fixTop(this.$refs.emotion); |
|
||||
this.emoBoxPos.y = top; |
|
||||
this.emoBoxPos.x = left + width/2; |
|
||||
}, |
|
||||
handleEmotion(emoText) { |
|
||||
this.sendText += emoText; |
|
||||
}, |
|
||||
sendTextMessage() { |
|
||||
let msgInfo = { |
|
||||
recvId: this.chat.targetId, |
|
||||
content: this.sendText, |
|
||||
type: 0 |
|
||||
} |
|
||||
this.$http({ |
|
||||
url: '/message/private/send', |
|
||||
method: 'post', |
|
||||
data: msgInfo |
|
||||
}).then((data) => { |
|
||||
this.$message.success("发送成功"); |
|
||||
this.sendText = ""; |
|
||||
msgInfo.sendTime = new Date().getTime(); |
|
||||
msgInfo.sendId = this.$store.state.userStore.userInfo.id; |
|
||||
msgInfo.selfSend = true; |
|
||||
this.$store.commit("insertMessage", msgInfo); |
|
||||
// 保持输入框焦点 |
|
||||
this.$refs.sendBox.focus(); |
|
||||
// 滚动到底部 |
|
||||
this.scrollToBottom(); |
|
||||
}) |
|
||||
}, |
|
||||
showName(msg) { |
|
||||
return msg.sendId == this.mine.id ? this.mine.nickName : this.chat.showName |
|
||||
}, |
|
||||
headImage(msg) { |
|
||||
return msg.sendId == this.mine.id ? this.mine.headImageThumb : this.chat.headImage |
|
||||
}, |
|
||||
scrollToBottom() { |
|
||||
this.$nextTick(() => { |
|
||||
const div = document.getElementById("chatScrollBox"); |
|
||||
div.scrollTop = div.scrollHeight; |
|
||||
}); |
|
||||
} |
|
||||
}, |
|
||||
computed: { |
|
||||
mine() { |
|
||||
return this.$store.state.userStore.userInfo; |
|
||||
}, |
|
||||
imageAction() { |
|
||||
return `${process.env.VUE_APP_BASE_API}/image/upload`; |
|
||||
}, |
|
||||
fileAction() { |
|
||||
return `${process.env.VUE_APP_BASE_API}/file/upload`; |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
console.log("private mount...") |
|
||||
this.scrollToBottom(); |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style> |
|
||||
</style> |
|
||||
Loading…
Reference in new issue