|
@@ -186,7 +186,7 @@
|
|
|
</div> -->
|
|
|
|
|
|
<!--群聊邀请-->
|
|
|
- <div class="meUserMessage">
|
|
|
+ <!-- <div class="meUserMessage">
|
|
|
<div class="meUserMessageText">
|
|
|
<div class="messageGroupInvite" @click="openGroupInviteWindow">
|
|
|
<div class="messageGroupInviteTop">
|
|
@@ -206,24 +206,31 @@
|
|
|
<div class="meUserIcon">
|
|
|
<img src="@/assets/chat/user/user.png">
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
<div class="sendMessageBox">
|
|
|
<div class="sendMessageTools">
|
|
|
<!--上传文件 start-->
|
|
|
<div class="toolsBigBox">
|
|
|
<div class="toolsBox">
|
|
|
- <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeAvatarUpload">
|
|
|
+ <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeImgUpload">
|
|
|
<img src="@/assets/chat/send_img.png">
|
|
|
</el-upload>
|
|
|
- <img src="@/assets/chat/send_file.png">
|
|
|
+ <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeFileUpload">
|
|
|
+ <img src="@/assets/chat/send_file.png">
|
|
|
+ </el-upload>
|
|
|
<img src="@/assets/chat/send_message.png" @click="fileWindowStatus=true">
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="fileBox" v-if="sendMessage.img.imgUrl!=''">
|
|
|
<img :src="sendMessage.img.imgUrl">
|
|
|
<div class="fileBoxText">{{ sendMessage.img.oldFileName }}</div>
|
|
|
- <div><i class="el-icon-close"></i></div>
|
|
|
+ <div @click="deFileUpload"><i class="el-icon-close"></i></div>
|
|
|
+ </div>
|
|
|
+ <div class="fileBox" v-if="sendMessage.file.fileUrl!=''">
|
|
|
+ <img src="@/assets/chat/file.png">
|
|
|
+ <div class="fileBoxText">{{ sendMessage.file.oldFileName }}</div>
|
|
|
+ <div @click="deFileUpload"><i class="el-icon-close"></i></div>
|
|
|
</div>
|
|
|
<!--上传文件 end-->
|
|
|
</div>
|
|
@@ -235,11 +242,12 @@
|
|
|
:rows="6"
|
|
|
resize="none"
|
|
|
maxlength="200"
|
|
|
+ @keyup.enter.native="sendUserMessage"
|
|
|
>
|
|
|
</el-input>
|
|
|
</div>
|
|
|
<div class="sendMessageButton">
|
|
|
- <el-button type="primary" size="medium">发送 <i class="el-icon-position"></i></el-button>
|
|
|
+ <el-button type="primary" size="medium" @click="sendUserMessage">发送 <i class="el-icon-position"></i></el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--右侧菜单 start------------------------------------------------------------>
|
|
@@ -251,15 +259,43 @@
|
|
|
<i class="el-icon-close"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <!--2216-->
|
|
|
<div class="rightSlideSearch">
|
|
|
<div class="searchBox">
|
|
|
<el-input
|
|
|
placeholder="请输入内容"
|
|
|
prefix-icon="el-icon-search"
|
|
|
- v-model="searchUser">
|
|
|
+ v-model="searchUser"
|
|
|
+ @keyup.enter.native="rightSearchUser"
|
|
|
+ >
|
|
|
</el-input>
|
|
|
</div>
|
|
|
+ <!--弹出框-->
|
|
|
+ <div class="searchFriendBox" v-if="groupRightSearchWindow">
|
|
|
+ <div class="searchFriendClose">
|
|
|
+ <div @click="closeRightSearchUser" class="rightSlideBoxCloseIcon">
|
|
|
+ <i class="el-icon-close"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="searchFriendItem">
|
|
|
+ <div class="searchFriendAvatar">
|
|
|
+ <img :src="groupRightUserInfo.avatar">
|
|
|
+ </div>
|
|
|
+ <div class="searchFriendInfo">
|
|
|
+ <div class="searchFriendName">
|
|
|
+ <div class="searchFriendNameText">{{groupRightUserInfo.user_name}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="searchFriendPhone">账号:{{groupRightUserInfo.user_name}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="searchFriendButton">
|
|
|
+ <el-button type="primary" @click="selectConversation(selectConversationItem)">分享名片</el-button>
|
|
|
+ <el-button type="primary" @click="selectConversation(selectConversationItem)">发送消息</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+
|
|
|
<div class="rightSlideUserBox">
|
|
|
<div class="rightSlideUserItem" v-for="item in groupUserList" :key="item.user_id">
|
|
|
<div class="rightSlideUserItemIcon">
|
|
@@ -425,7 +461,7 @@
|
|
|
<!--搜索用户弹出框 start------------------------------------------------------------>
|
|
|
<div class="searchFriendBox" v-if="groupFriendsWindowStatus">
|
|
|
<div class="searchFriendClose">
|
|
|
- <div @click="closeAddGroupUserWindow" class="rightSlideBoxCloseIcon">
|
|
|
+ <div @click="closeSearchFriendWindow" class="rightSlideBoxCloseIcon">
|
|
|
<i class="el-icon-close"></i>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -441,8 +477,8 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="searchFriendButton">
|
|
|
- <el-button v-if="groupSearchUser.status==false" type="primary" @click="addGroupUser(groupSearchUser)">添加</el-button>
|
|
|
- <el-button v-else type="warning" @click="addGroupUser(groupSearchUser)">移除</el-button>
|
|
|
+ <el-button v-if="groupFriendSearchUser.status==false" type="primary" @click="addSearchFriendWindow">添加</el-button>
|
|
|
+ <el-button v-else type="warning" @click="addSearchFriendWindow">移除</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--搜索用户弹出框 end------------------------------------------------------------>
|
|
@@ -884,7 +920,6 @@ import URL from '@/utils/baseUrl';
|
|
|
import hallTitle from './components/hallTitle.vue';
|
|
|
import RingChart from '../dashboard/admin/components/RingChart.vue';
|
|
|
|
|
|
-
|
|
|
export default {
|
|
|
components: {
|
|
|
hallTitle
|
|
@@ -905,9 +940,12 @@ export default {
|
|
|
chatrecords:[],//聊天记录
|
|
|
ifTop:false,//是否为置顶
|
|
|
searchConversation:'',//搜索会话
|
|
|
+
|
|
|
//2.会话列表 end---------------------------------------->
|
|
|
|
|
|
//3.聊天记录 start---------------------------------------->
|
|
|
+ receiverId:'',//接收消息的id
|
|
|
+ receiverType:'',//接收消息的类型 1单聊 2群聊
|
|
|
ifNoMessage:true,//如果没有选择任何聊天记录
|
|
|
searchChatRecords:"",//搜索聊天记录
|
|
|
userMessage:'',//用户发送的消息
|
|
@@ -938,6 +976,8 @@ export default {
|
|
|
groupEditWindowStatus:false,//编辑群成员弹出框
|
|
|
groupEditMainWindowStatus:false,//编辑弹框中搜索人员
|
|
|
searchUser:"",//右侧菜单的搜索框
|
|
|
+ groupRightUserInfo:{},//直接从右侧群组菜单中搜索成员
|
|
|
+ groupRightSearchWindow:false,//右侧群组详情弹出框
|
|
|
//4.群聊 end---------------------------------------->
|
|
|
|
|
|
//6.名片 start---------------------------------------->
|
|
@@ -960,6 +1000,10 @@ export default {
|
|
|
img:{
|
|
|
imgUrl:'',//图片地址
|
|
|
oldFileName:"",//文件名
|
|
|
+ },
|
|
|
+ file:{
|
|
|
+ fileUrl:'',
|
|
|
+ oldFileName:"",//文件名
|
|
|
}
|
|
|
}
|
|
|
//8.发消息 end---------------------------------------->
|
|
@@ -993,6 +1037,9 @@ export default {
|
|
|
},
|
|
|
//1.2选择会话
|
|
|
selectConversation(item){
|
|
|
+ //使用receiverId判断当前是哪个会话
|
|
|
+ this.receiverId = item.receiver_id;
|
|
|
+ this.receiverType = 1;//单聊
|
|
|
//关闭搜索会话搜索框
|
|
|
this.closeSearchConversation();
|
|
|
//清理单聊状态
|
|
@@ -1130,6 +1177,8 @@ export default {
|
|
|
console.log(this.searchGroup)
|
|
|
console.log(this.friendsList)
|
|
|
console.log(flag)
|
|
|
+
|
|
|
+ console.log(this.groupFriendSearchUser)
|
|
|
//this.searchGroup 搜索的内容
|
|
|
//this.groupEditWindowStatus 弹出框状态
|
|
|
//this.groupSearchUser 搜索出来的成员
|
|
@@ -1139,10 +1188,23 @@ export default {
|
|
|
this.groupFriendsWindowStatus = true;
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
+ //2.1.7 把用户添加到选择框里面
|
|
|
+ addSearchFriendWindow(){
|
|
|
+ this.groupFriendSearchUser.status=!this.groupFriendSearchUser.status;
|
|
|
+ this.closeSearchFriendWindow();
|
|
|
+ },
|
|
|
+ //2.1.7 关闭搜索弹出框
|
|
|
+ closeSearchFriendWindow(){
|
|
|
+ this.groupFriendsWindowStatus = false;
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
//2.2 选择群聊
|
|
|
//2.1.1 在会话列表中选择一个群聊
|
|
|
selectGroup(item){
|
|
|
+ //使用receiverId判断当前是哪个会话
|
|
|
+ this.receiverId = item.receiver_id;
|
|
|
+ this.receiverType = 2;//群聊
|
|
|
console.log("选择群聊")
|
|
|
//清理单聊状态
|
|
|
this.conversationList.forEach(conversation => {
|
|
@@ -1262,12 +1324,14 @@ export default {
|
|
|
group_name:this.messageTitle//群名称
|
|
|
}
|
|
|
this.$store.dispatch('chat/updateGroup',data).then(res=> {
|
|
|
- this.$message.success('成功添加群公告')
|
|
|
+ this.$message.success('成功修改群聊名称!');
|
|
|
//重新获取群详情
|
|
|
- this.getGroupSystem(this.groupId)
|
|
|
- this.editGroupNoticeWindow = false;
|
|
|
+ this.getGroupSystem(this.groupId);
|
|
|
+ //重新获取会话列表
|
|
|
+ this.getConversationList();
|
|
|
+ this.editGroupNameWindow = false;
|
|
|
}).catch(() => {
|
|
|
- this.$message.error('编辑群公告失败!')
|
|
|
+ this.$message.error('修改群聊名称失败!')
|
|
|
})
|
|
|
},
|
|
|
//2.3.7 右侧菜单编辑群公告
|
|
@@ -1277,10 +1341,11 @@ export default {
|
|
|
profile:this.groupProfile//群公告
|
|
|
}
|
|
|
this.$store.dispatch('chat/updateGroup',data).then(res=> {
|
|
|
+ this.editGroupNoticeWindow = false;
|
|
|
this.$message.success('成功添加群公告')
|
|
|
//重新获取群详情
|
|
|
this.getGroupSystem(this.groupId)
|
|
|
- this.editGroupNameWindow = false;
|
|
|
+
|
|
|
}).catch(() => {
|
|
|
this.$message.error('编辑群公告失败!')
|
|
|
})
|
|
@@ -1422,7 +1487,35 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
+ //2.3.25 右侧菜单编辑成员
|
|
|
+ rightSearchUser(){
|
|
|
+ this.groupRightUserInfo = {};
|
|
|
+ let flag = false; //是否找到成员
|
|
|
+ for(let item of this.groupUserList){
|
|
|
+ if(item.user_name==this.searchUser||item.remark==this.searchUser){
|
|
|
+ this.groupRightUserInfo = item;
|
|
|
+ flag = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(this.searchUser)
|
|
|
+ console.log(this.groupUserList)
|
|
|
+ console.log(flag)
|
|
|
+ //this.searchGroup 搜索的内容
|
|
|
+ //this.groupEditWindowStatus 弹出框状态
|
|
|
+ //this.groupSearchUser 搜索出来的成员
|
|
|
+ if(!flag){
|
|
|
+ this.$message.error('没有找到该成员!')
|
|
|
+ }else{
|
|
|
+ this.groupRightSearchWindow = true;
|
|
|
+ }
|
|
|
|
|
|
+ },
|
|
|
+ //2.3.26 关闭弹出框
|
|
|
+ closeRightSearchUser(){
|
|
|
+ this.searchUser = "";
|
|
|
+ this.groupRightUserInfo = {};
|
|
|
+ this.groupRightSearchWindow = false;
|
|
|
+ },
|
|
|
|
|
|
//2.4 加入群聊
|
|
|
//2.4.1 打开群聊邀请窗口
|
|
@@ -1438,7 +1531,6 @@ export default {
|
|
|
this.$message.error('加入群聊失败!')
|
|
|
})
|
|
|
},
|
|
|
-
|
|
|
//2.群聊 end---------------------------------------->
|
|
|
|
|
|
//3.全局应用 start---------------------------------------->
|
|
@@ -1455,8 +1547,11 @@ export default {
|
|
|
//3.全局应用 end---------------------------------------->
|
|
|
|
|
|
//4.会话框 start---------------------------------------->
|
|
|
- //4.1上传文件
|
|
|
- beforeAvatarUpload(file) {
|
|
|
+ //4.1上传
|
|
|
+ //4.1.1上传图片
|
|
|
+ beforeImgUpload(file) {
|
|
|
+ //先清理一下上传的缩略窗口
|
|
|
+ this.deFileUpload()
|
|
|
const isJPG = file.type === 'image/jpeg';
|
|
|
const isPNG = file.type === 'image/png';
|
|
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
|
@@ -1474,8 +1569,6 @@ export default {
|
|
|
formData.append('file', file);
|
|
|
|
|
|
this.$store.dispatch('pool/uploadFile',formData).then(res=> {
|
|
|
- // this.imgUrl = res.data.imgUrl;//显示缩略图
|
|
|
- // this.form.imgurl = res.data.imgUrl;//提供表单地址
|
|
|
this.sendMessage.img.imgUrl = res.data.imgUrl;//获取上传的图片地址
|
|
|
this.sendMessage.img.oldFileName = res.data.oldFileName;
|
|
|
console.log(res.data.imgUrl)
|
|
@@ -1489,94 +1582,111 @@ export default {
|
|
|
// 阻止默认的上传行为
|
|
|
return false;
|
|
|
},
|
|
|
- //4.会话框 end---------------------------------------->
|
|
|
-
|
|
|
+ //4.1.2上传文件
|
|
|
+ beforeFileUpload(file) {
|
|
|
+ //先清理一下上传的缩略窗口
|
|
|
+ this.deFileUpload()
|
|
|
+ console.log(file)
|
|
|
+ //允许的文件类型
|
|
|
+ const isDoc = file.type === 'application/msword';
|
|
|
+ const isDocx = file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
|
|
|
+ const isXls = file.type === 'application/vnd.ms-excel';
|
|
|
+ const isXlsx = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
|
|
|
+ const isPptx = file.type === 'application/vnd.openxmlformats-officedocument.presentationml.presentation';
|
|
|
+ const isRar = file.type === 'application/x-rar-compressed';
|
|
|
+ const isZip = file.type === 'application/x-zip-compressed';
|
|
|
+ const isTxt = file.type === 'text/plain';
|
|
|
+ //文件大小不能超过2M
|
|
|
+ const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
|
|
|
+ if (!isTxt && !isDoc && !isDocx && !isXls && !isXlsx && !isPptx && !isRar && !isZip) {
|
|
|
+ this.$message.error('该文件类型不允许上传!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (!isLt2M) {
|
|
|
+ this.$message.error('发送的文件大小不能超过2M!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
|
|
|
+ const formData = new FormData();
|
|
|
+ formData.append('file', file);
|
|
|
|
|
|
+ this.$store.dispatch('pool/uploadFile',formData).then(res=> {
|
|
|
+ this.sendMessage.file.fileUrl = res.data.imgUrl;
|
|
|
+ this.sendMessage.file.oldFileName = res.data.oldFileName;
|
|
|
+ console.log(res.data)
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '网络错误,请重试!'
|
|
|
+ });
|
|
|
+ })
|
|
|
+
|
|
|
+ // 阻止默认的上传行为
|
|
|
+ return false;
|
|
|
+ },
|
|
|
+ //4.1.3 删除上传的文件
|
|
|
+ deFileUpload(){
|
|
|
+ this.sendMessage.img.imgUrl = "";
|
|
|
+ this.sendMessage.img.oldFileName = "";
|
|
|
+ this.sendMessage.file.fileUrl = "";
|
|
|
+ this.sendMessage.file.oldFileName = "";
|
|
|
+ },
|
|
|
+ //4.会话框 end---------------------------------------->
|
|
|
+
|
|
|
|
|
|
- //老刘的代码 start---------------------------------------->
|
|
|
- // selectConversation(conversation) {
|
|
|
- // this.activeConversation = conversation;
|
|
|
- // },
|
|
|
- // sendMessage() {
|
|
|
- // if (this.newMessage.trim() !== '') {
|
|
|
- // //msg_type 消息类型 talk_type:聊天类型 1单聊 2群聊
|
|
|
- // const message = {
|
|
|
- // msg_type:1,
|
|
|
- // talk_type:this.activeConversation.talk_type,
|
|
|
- // content:this.newMessage,
|
|
|
- // session_id:this.activeConversation.session_id,
|
|
|
- // msg_type:1,
|
|
|
- // receiver_id:this.activeConversation.user_id?this.activeConversation.user_id:this.activeConversation.group_id
|
|
|
- // };
|
|
|
- // // this.activeConversation.messages.push(message);
|
|
|
- // console.log("发送消息",this.ws,WebSocket.OPEN)
|
|
|
- // if (this.ws && this.ws.readyState === WebSocket.OPEN) {
|
|
|
- // this.ws.send(JSON.stringify(message));
|
|
|
- // }
|
|
|
- // this.newMessage = '';
|
|
|
- // }
|
|
|
- // },
|
|
|
- // handleIncomingMessage(event) {
|
|
|
- // const message = JSON.parse(event.data);
|
|
|
- // console.log("监听消息:",message)
|
|
|
- // const conversation = this.conversations.find(conv => conv.session_id === message.session_id); // 假设所有消息都发送给Alice
|
|
|
- // if (conversation) {
|
|
|
- // conversation.messages.push(message);
|
|
|
- // }
|
|
|
- // },
|
|
|
- // //获取会话列表
|
|
|
- // getTalkSessionList(){
|
|
|
- // let parames = {
|
|
|
- // 'page':1,
|
|
|
- // 'pageSize':10
|
|
|
- // }
|
|
|
- // // this.$api.chat.getTalkSessionList(parames).then(res=>{
|
|
|
- // // this.conversations = res.data.row
|
|
|
- // // });
|
|
|
- // this.$store.dispatch('chat/getTalkSessionList',parames).then(res=> {
|
|
|
- // this.conversations = res.data.row
|
|
|
- // }).catch(() => {
|
|
|
- // this.$message({
|
|
|
- // type: 'info',
|
|
|
- // message: '获取聊天记录失败!'
|
|
|
- // });
|
|
|
- // })
|
|
|
- // },
|
|
|
- // showContextMenu(event, conversation) {
|
|
|
- // this.contextMenuVisible = true; // 显示右键菜单
|
|
|
- // this.contextMenuX = event.clientX; // 获取鼠标 X 坐标
|
|
|
- // this.contextMenuY = event.clientY; // 获取鼠标 Y 坐标
|
|
|
- // this.selectedConversation = conversation; // 保存选中的对话
|
|
|
- // },
|
|
|
- // handleMenuCommand(command) {
|
|
|
- // switch (command) {
|
|
|
- // case 'view':
|
|
|
- // this.viewConversation(this.selectedConversation);
|
|
|
- // break;
|
|
|
- // case 'delete':
|
|
|
- // this.deleteConversation(this.selectedConversation);
|
|
|
- // break;
|
|
|
- // case 'edit':
|
|
|
- // this.editConversation(this.selectedConversation);
|
|
|
- // break;
|
|
|
- // }
|
|
|
- // this.contextMenuVisible = false; // 隐藏右键菜单
|
|
|
- // },
|
|
|
- // viewConversation(conversation) {
|
|
|
- // // 查看对话的逻辑
|
|
|
- // console.log('查看对话:', conversation);
|
|
|
- // },
|
|
|
- // deleteConversation(conversation) {
|
|
|
- // // 删除对话的逻辑
|
|
|
- // console.log('删除对话:', conversation);
|
|
|
- // },
|
|
|
- // editConversation(conversation) {
|
|
|
- // // 编辑对话的逻辑
|
|
|
- // console.log('编辑对话:', conversation);
|
|
|
- // },
|
|
|
- //老刘的代码 end---------------------------------------->
|
|
|
+ //5.websocket会话 start---------------------------------------->
|
|
|
+ //5.1 接受消息
|
|
|
+ handleIncomingMessage(event) {
|
|
|
+ const message = JSON.parse(event.data);
|
|
|
+ console.log("监听消息:",message)
|
|
|
+
|
|
|
+ if(Number(this.receiverId) == Number(message.receiver_id)){
|
|
|
+ //如果message的receiverId和会话的receiverId一致,说明这条信息是自己发的回显
|
|
|
+ let receiveMessage = {
|
|
|
+ action:"said",//是谁说的
|
|
|
+ user_avatar:message.user_avatar,//头像
|
|
|
+ content:message.content,//内容
|
|
|
+ }
|
|
|
+ console.log("回显自己的消息:"+this.receiverId,message.receiver_id)
|
|
|
+ console.log(message)
|
|
|
+ //消息添加到聊天记录
|
|
|
+ this.chatrecords.push(receiveMessage);
|
|
|
+ //滚动条滚动到底部
|
|
|
+ this.scorllBottom();
|
|
|
+ }else if(Number(this.receiverId) == Number(message.user_id)){
|
|
|
+ let receiveMessage = {
|
|
|
+ action:"recieved",//是谁说的
|
|
|
+ receiver_avatar:message.user_avatar,//头像
|
|
|
+ content:message.content,//内容
|
|
|
+ }
|
|
|
+ //如果message的receiverId和会话的receiverId不一致,说明这条信息是别人发的,需要添加到聊天记录
|
|
|
+ //消息添加到聊天记录
|
|
|
+ console.log("来自单聊消息:"+this.receiverId,message.user_id)
|
|
|
+ this.chatrecords.push(receiveMessage);
|
|
|
+ console.log(message)
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ // 5.2 发送消息
|
|
|
+ sendUserMessage() {
|
|
|
+ if (this.userMessage.trim() !== '') {
|
|
|
+ const message = {
|
|
|
+ talk_type:this.receiverType,//当前的会话类型
|
|
|
+ receiver_id:this.receiverId,//当前的会话id
|
|
|
+ content:this.userMessage,//用户发发送的消息
|
|
|
+ msg_type:1,//消息类型 1:文本 2:图片 3:文件 4:好友卡片 5:系统消息;6:加群卡片
|
|
|
+ };
|
|
|
+ //发送消息
|
|
|
+ if (this.ws && this.ws.readyState === WebSocket.OPEN) {
|
|
|
+ this.ws.send(JSON.stringify(message));
|
|
|
+ }
|
|
|
+ this.userMessage = '';
|
|
|
+ }else{
|
|
|
+ this.$message.error('消息不能为空!')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //5.websocket会话 end---------------------------------------->
|
|
|
},
|
|
|
mounted() {
|
|
|
//1.获取会话列表
|
|
@@ -1584,36 +1694,29 @@ export default {
|
|
|
//2.获取我的用户id
|
|
|
this.myUserId = this.$store.state.user.userid;
|
|
|
|
|
|
- //老刘的代码 start---------------------------------------->
|
|
|
+ //开启websocket连接 start---------------------------------------->
|
|
|
//1.获取admin-token
|
|
|
- // const adminToken = document.cookie.split('; ').find(row => row.startsWith('Admin-Token=')).split('=')[1];
|
|
|
- // //console.log("Admin-Token:", adminToken);
|
|
|
- // //2.连接websocket
|
|
|
- // let websocketNewUrl = URL.WebsocketUrl +"?token=" + adminToken;
|
|
|
- // this.ws = new WebSocket(websocketNewUrl);
|
|
|
- // this.ws.addEventListener('message', this.handleIncomingMessage);
|
|
|
+ const adminToken = document.cookie.split('; ').find(row => row.startsWith('Admin-Token=')).split('=')[1];
|
|
|
+ //console.log("Admin-Token:", adminToken);
|
|
|
|
|
|
- // this.ws.addEventListener('close', function (event) {
|
|
|
- // // 连接关闭时执行的操作
|
|
|
- // console.log("关闭链接",event)
|
|
|
- // });
|
|
|
+ //2.连接websocket
|
|
|
+ let websocketNewUrl = URL.WebsocketUrl +"?token=" + adminToken;
|
|
|
+ this.ws = new WebSocket(websocketNewUrl);
|
|
|
+ this.ws.addEventListener('message', this.handleIncomingMessage);
|
|
|
|
|
|
- // this.getTalkSessionList()
|
|
|
- // // 监听全局点击事件以关闭右键菜单
|
|
|
- // document.addEventListener('click', () => {
|
|
|
- // this.contextMenuVisible = false;
|
|
|
- // });
|
|
|
- //老刘的代码 end---------------------------------------->
|
|
|
+ //当连接关闭的时候关闭websocket
|
|
|
+ this.ws.addEventListener('close', function (event) {
|
|
|
+ // 连接关闭时执行的操作
|
|
|
+ console.log("关闭链接",event)
|
|
|
+ });
|
|
|
+ //开启websocket连接 end---------------------------------------->
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
- // if (this.ws) {
|
|
|
- // this.ws.removeEventListener('message', this.handleIncomingMessage);
|
|
|
- // this.ws.close();
|
|
|
- // }
|
|
|
- // // 清理事件监听
|
|
|
- // document.removeEventListener('click', () => {
|
|
|
- // this.contextMenuVisible = false;
|
|
|
- // });
|
|
|
+ //页面销毁的时候关闭websocket
|
|
|
+ if (this.ws) {
|
|
|
+ this.ws.removeEventListener('message', this.handleIncomingMessage);
|
|
|
+ this.ws.close();
|
|
|
+ }
|
|
|
}
|
|
|
};
|
|
|
|
|
@@ -2102,6 +2205,118 @@ export default {
|
|
|
}
|
|
|
.rightSlideSearch {
|
|
|
padding: 30px 25px 0 25px;
|
|
|
+ position: relative;
|
|
|
+ .searchFriendBox {
|
|
|
+ position: absolute;
|
|
|
+ width: 280px;
|
|
|
+ border-radius: 8px;
|
|
|
+ top: 65px;
|
|
|
+ left: -260px;
|
|
|
+ background: #fff;
|
|
|
+ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 8px;
|
|
|
+ z-index: 100;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 20px 0 30px 0;
|
|
|
+ .searchFriendClose {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ padding-right: 10px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ .rightSlideBoxCloseIcon {
|
|
|
+ cursor: pointer;
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ line-height: 28px;
|
|
|
+ text-align: center;
|
|
|
+ background: #EFEFEF;
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .searchFriendItem {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ border-bottom: 1px solid #E9EDF7;
|
|
|
+ padding: 0 20px 30px 20px;
|
|
|
+ .searchFriendAvatar {
|
|
|
+ img {
|
|
|
+ width: 66px;
|
|
|
+ height: 66px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ margin-right: 15px;
|
|
|
+ }
|
|
|
+ .searchFriendInfo {
|
|
|
+ flex: 1;
|
|
|
+ .searchFriendName {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .gender {
|
|
|
+ img {
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .searchFriendNameText {
|
|
|
+ font-size: 18px;
|
|
|
+ width: 120px;
|
|
|
+ height: 28px;
|
|
|
+ line-height: 28px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .searchFriendPhone {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .searchFriendLineBox {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ padding: 20px;
|
|
|
+ border-bottom: 1px solid #E9EDF7;
|
|
|
+ .searchFriendLineTitle{
|
|
|
+ font-size: 16px;
|
|
|
+ color: #999999;
|
|
|
+ width: 90px;
|
|
|
+ }
|
|
|
+ .searchFriendLineContent{
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333;
|
|
|
+ flex: 1;
|
|
|
+ .searchFriendLineContentItem{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .searchFriendButton {
|
|
|
+ padding:40px 0 10px 0;
|
|
|
+ text-align: center;
|
|
|
+ .searchFriendButtonItem {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #5570F1;
|
|
|
+ img {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.rightSlideUserBox {
|
|
|
box-sizing: border-box;
|