129 lines
3.8 KiB
Vue
129 lines
3.8 KiB
Vue
|
<template>
|
|||
|
|
<div>
|
|||
|
|
<el-dialog
|
|||
|
|
:title="user.displayName"
|
|||
|
|
append-to-body
|
|||
|
|
top="15vh"
|
|||
|
|
width="60%"
|
|||
|
|
:visible.sync="dialogVisible"
|
|||
|
|
center
|
|||
|
|
@close="handleCancel"
|
|||
|
|
>
|
|||
|
|
<div class="el-dialog-div" style="height:60vh;">
|
|||
|
|
<lemon-imui
|
|||
|
|
width="100%"
|
|||
|
|
height="60vh"
|
|||
|
|
position="center"
|
|||
|
|
:user='this.user' ref="IMUI"
|
|||
|
|
@pull-messages='handlePullMessages'
|
|||
|
|
@send="handleSend"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</el-dialog>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {getAuthorChatList} from "@/api/business/chat/chat";
|
|||
|
|
import {isNotEmpty} from "@/utils";
|
|||
|
|
import Websocket from "@/api/websocket.js";
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: "Im",
|
|||
|
|
props: {
|
|||
|
|
sellList: Array,
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
dialogVisible: false,
|
|||
|
|
temp:{},
|
|||
|
|
user:{id:8,displayName:'官方客服-薯队长',avatar:'http://8.146.211.120:8080/upload/avatar/kefu.jpg'},
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted(){
|
|||
|
|
Websocket.initWebSocket('ws://192.168.1.136:9326/?authorId=8').then(response=>{
|
|||
|
|
console.log(response.onmessage = this.handleMessage)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
handleMessage(e) {
|
|||
|
|
console.log('在Vue组件中接收到消息并处理，消息内容:');
|
|||
|
|
// 这里可以根据组件的业务逻辑，比如将消息展示在页面上，更新组件状态等操作
|
|||
|
|
},
|
|||
|
|
open() {
|
|||
|
|
this.dialogVisible = true
|
|||
|
|
this.getAuthorList()
|
|||
|
|
},
|
|||
|
|
getAuthorList(){
|
|||
|
|
getAuthorChatList().then(response=> {
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
const {IMUI} = this.$refs;
|
|||
|
|
const authorList = response.data;
|
|||
|
|
const contacts = [];
|
|||
|
|
for (let item of authorList) {
|
|||
|
|
let data = {
|
|||
|
|
id: item.id,
|
|||
|
|
displayName: item.displayName,
|
|||
|
|
avatar: item.avatar,
|
|||
|
|
index: item.index,
|
|||
|
|
unread: item.unread,
|
|||
|
|
//最近一条消息的内容，如果值为空，不会出现在“聊天”列表里面。
|
|||
|
|
//lastContentRender 函数会将 file 消息转换为 '[文件]', image 消息转换为 '[图片]'，对 text 会将文字里的表情标识替换为img标签,
|
|||
|
|
//最近一条消息的发送时间
|
|||
|
|
lastSendTime: item.lastSendTime,
|
|||
|
|
}
|
|||
|
|
if(isNotEmpty(item.lastContent)){
|
|||
|
|
data.lastContent = IMUI.lastContentRender({type: 'text', content: item.lastContent})
|
|||
|
|
}
|
|||
|
|
contacts.push(data)
|
|||
|
|
}
|
|||
|
|
IMUI.initContacts(contacts);
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
handleCancel(){
|
|||
|
|
this.dialogVisible = false
|
|||
|
|
},
|
|||
|
|
submit(){
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
handleSend(message, next, file) {
|
|||
|
|
console.log('发送了信息')
|
|||
|
|
message.handlerType = '6'
|
|||
|
|
Websocket.sendMessage(JSON.stringify(message))
|
|||
|
|
|
|||
|
|
|
|||
|
|
//执行到next消息会停止转圈，如果接口调用失败，可以修改消息的状态 next({status:'failed'});
|
|||
|
|
next();
|
|||
|
|
},
|
|||
|
|
handlePullMessages(contact, next) {
|
|||
|
|
console.log('拉取信息')
|
|||
|
|
//从后端请求消息数据，包装成下面的样子
|
|||
|
|
const messages = [{
|
|||
|
|
id: '唯一消息ID',
|
|||
|
|
status: 'succeed',
|
|||
|
|
type: 'text',
|
|||
|
|
sendTime: 1566047865417,
|
|||
|
|
content: '你什么才能对接完？',
|
|||
|
|
toContactId: contact.id,
|
|||
|
|
fromUser:this.user
|
|||
|
|
}]
|
|||
|
|
//将第二个参数设为true，表示已到末尾，聊天窗口顶部会显示“暂无更多消息”，不然会一直转圈。
|
|||
|
|
next(messages,true);
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<style scoped>
|
|||
|
|
/deep/ .el-dialog__headerbtn{
|
|||
|
|
top:10px;
|
|||
|
|
}
|
|||
|
|
/deep/ .el-dialog__header{
|
|||
|
|
padding: 5px 20px 5px;background: #F7F7F7;
|
|||
|
|
}
|
|||
|
|
/deep/ .el-dialog--center .el-dialog__body{
|
|||
|
|
padding:0;
|
|||
|
|
}
|
|||
|
|
</style>
|