|
|
@@ -4,7 +4,7 @@
|
|
|
|
|
|
<div class="chat-header">
|
|
|
<img class="chat-icon" :src=avatar alt="在线会话" />
|
|
|
- <span>{{ this.$store.state.user.name }}</span>
|
|
|
+ <span @click="clickShowMessage">{{ this.$store.state.user.name }}</span>
|
|
|
<span class="chat-status online"></span>
|
|
|
<span class="chat-close" @click="$emit('close')">×</span>
|
|
|
</div>
|
|
|
@@ -39,7 +39,7 @@
|
|
|
<div class="searchBoxMain">
|
|
|
<div class="searchBox">
|
|
|
<el-input
|
|
|
- placeholder="请输入内容"
|
|
|
+ placeholder="请输入账号/群聊全称"
|
|
|
prefix-icon="el-icon-search"
|
|
|
v-model="searchConversation"
|
|
|
@keyup.enter.native="searchUserConversation"
|
|
|
@@ -561,7 +561,7 @@
|
|
|
<div class="hallRight" v-if="pagestatus==1||pagestatus==4">
|
|
|
<div class="ifHallRigthNoMessage">恒星管理平台</div>
|
|
|
</div>
|
|
|
- <div class="hallRight" v-if="pagestatus==2">
|
|
|
+ <div class="hallRight newFriendBox" v-if="pagestatus==2">
|
|
|
<div class="UserNameBox">
|
|
|
<div class="userName">新的朋友</div>
|
|
|
</div>
|
|
|
@@ -927,7 +927,7 @@
|
|
|
<div class="fileWindowMessageItemName">用户名称</div>
|
|
|
<div class="fileWindowMessageItemTime">12:40</div>
|
|
|
</div>
|
|
|
- <div class="fileWindowMessageItemText">用用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息</div>
|
|
|
+ <div class="fileWindowMessageItemText">用用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -1239,7 +1239,7 @@
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
<!--修改备注弹出框 end------------------------------------------------------------>
|
|
|
- <el-dialog :visible.sync="searchWindowStatus" title="聊天记录" :close-on-click-modal="false" width="420px" modal="false">
|
|
|
+ <el-dialog :visible.sync="searchWindowStatus" title="聊天记录" :close-on-click-modal="false" width="420px" :modal="false">
|
|
|
<div class="searchFriendBox">
|
|
|
<div class="searchFriendItem">
|
|
|
<div class="searchFriendAvatar">
|
|
|
@@ -1278,6 +1278,8 @@
|
|
|
name: "ChatPanel",
|
|
|
data() {
|
|
|
return {
|
|
|
+ ones:0,
|
|
|
+ messageContent:{},
|
|
|
avatar:this.$store.state.user.avatar,
|
|
|
showfrindDialog:false,
|
|
|
activeTab: 0,
|
|
|
@@ -1447,6 +1449,40 @@
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ clickShowMessage() {
|
|
|
+ // 先关闭所有旧消息
|
|
|
+ this.$message.closeAll();
|
|
|
+
|
|
|
+ this.$message({
|
|
|
+ dangerouslyUseHTMLString: true,
|
|
|
+ message: `
|
|
|
+ <div
|
|
|
+ class="my-custom-message"
|
|
|
+ style="display:flex;align-items:center;background:#fff !important;color:#000 !important;padding:8px 16px;border-radius:4px;cursor:pointer;border:none !important;box-shadow:none !important;">
|
|
|
+ <img src="http://img.bjzxtw.org.cn/master/image/webp/chatinfo.png" style="width:24px;height:24px;margin-right:10px;" alt="info"/>
|
|
|
+ <span>收到新消息</span>
|
|
|
+ </div>
|
|
|
+ `,
|
|
|
+ duration: 3000,
|
|
|
+ });
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ const el = document.querySelector('.my-custom-message');
|
|
|
+ if (el) {
|
|
|
+ el.onclick = () => {
|
|
|
+ this.onCustomMessageClick();
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }, 50);
|
|
|
+ },
|
|
|
+ onCustomMessageClick() {
|
|
|
+ if(this.messageContent.receiver_id && this.messageContent.receiver_id.length==18){
|
|
|
+ this.selectGroup(this.messageContent);
|
|
|
+ }else{
|
|
|
+ this.selectConversation(this.messageContent);
|
|
|
+ }
|
|
|
+ console.log('自定义消息弹窗被点击了');
|
|
|
+ },
|
|
|
//1.会话列表 start---------------------------------------->
|
|
|
//1.1获取会话列表
|
|
|
getConversationList(){
|
|
|
@@ -2385,8 +2421,19 @@
|
|
|
//5.1 接受消息
|
|
|
handleIncomingMessage(event) {
|
|
|
const message = JSON.parse(event.data);
|
|
|
- console.log("监听消息：",message)
|
|
|
-
|
|
|
+ this.clickShowMessage();
|
|
|
+ console.log("监听消息1：",message)
|
|
|
+ if(this.ones==0){
|
|
|
+ this.ones = 1
|
|
|
+ this.getConversationList();
|
|
|
+ }
|
|
|
+ console.log(message.receiver_id)
|
|
|
+ this.conversationList.forEach(item => {
|
|
|
+ if(item.receiver_id==message.receiver_id){
|
|
|
+ console.log("当前消息属于当前的聊天窗口！")
|
|
|
+ this.messageContent = message;
|
|
|
+ }
|
|
|
+ });
|
|
|
// console.log(message.receiver_id.length == 18)
|
|
|
//第一步：先判断是否为群消息
|
|
|
if (message.receiver_id && message.receiver_id.length == 18) {
|
|
|
@@ -2696,6 +2743,7 @@
|
|
|
closeAddUser(){
|
|
|
this.pagestatus = 2;
|
|
|
this.searchWindowStatus = false;
|
|
|
+ this.searchUserName = "";
|
|
|
},
|
|
|
//1.1获取联系人列表
|
|
|
getUserFriendList(){
|
|
|
@@ -2924,7 +2972,7 @@
|
|
|
},
|
|
|
//发送消息===
|
|
|
sendMessageToFriend(item){
|
|
|
-
|
|
|
+ this.showfrindDialog = false;
|
|
|
this.showDialog = true;
|
|
|
console.log("发送消息消息体1：",item)
|
|
|
//选择会话的时候开启loading框
|
|
|
@@ -3026,6 +3074,35 @@
|
|
|
}
|
|
|
};
|
|
|
//从通讯录创建单聊 end---------------------------------------->
|
|
|
+
|
|
|
+ // if (!document.getElementById('custom-message-style')) {
|
|
|
+ // const style = document.createElement('style');
|
|
|
+ // style.id = 'custom-message-style';
|
|
|
+ // style.innerHTML = `
|
|
|
+ // .el-message {
|
|
|
+ // min-width: auto !important;
|
|
|
+ // padding: 0 !important;
|
|
|
+ // background: transparent !important;
|
|
|
+ // border: none !important;
|
|
|
+ // box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
|
|
|
+ // border-radius:100px !important;
|
|
|
+ // }
|
|
|
+ // .el-message .el-message__icon {
|
|
|
+ // display: none !important;
|
|
|
+ // }
|
|
|
+ // .el-message .my-custom-message {
|
|
|
+ // background: #fff !important;
|
|
|
+ // color: #000 !important;
|
|
|
+ // border-radius: 4px !important;
|
|
|
+ // box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
|
|
|
+ // border: none !important;
|
|
|
+ // padding: 8px 16px !important;
|
|
|
+ // display: flex;
|
|
|
+ // align-items: center;
|
|
|
+ // }
|
|
|
+ // `;
|
|
|
+ // document.head.appendChild(style);
|
|
|
+ // }
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
//页面销毁的时候清除定时器获取列表
|
|
|
@@ -3172,6 +3249,7 @@
|
|
|
position: relative;
|
|
|
box-sizing: border-box;
|
|
|
border-right: 4px solid #fff;
|
|
|
+ margin-top:10px;
|
|
|
.newFriendImg {
|
|
|
border-radius: 4px;
|
|
|
background: #5570F1;
|
|
|
@@ -4030,6 +4108,9 @@
|
|
|
color: #999;
|
|
|
}
|
|
|
}
|
|
|
+ .newFriendBox{
|
|
|
+ height: 400px;
|
|
|
+ }
|
|
|
//右侧
|
|
|
.hallRight {
|
|
|
flex: 1;
|
|
|
@@ -4040,6 +4121,8 @@
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
position: relative;
|
|
|
+ // height: 400px;
|
|
|
+ overflow:auto;
|
|
|
.hallRightLoading {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
@@ -4097,7 +4180,7 @@
|
|
|
line-height: 40px;
|
|
|
font-size: 16px;
|
|
|
background:url('../../../assets/chat/notice.png') no-repeat 10px center #F6F8FE;
|
|
|
- left: 30px;
|
|
|
+ // left: 30px;
|
|
|
box-sizing: border-box;
|
|
|
padding-left: 40px;
|
|
|
bottom: 10px;
|
|
|
@@ -4736,7 +4819,7 @@
|
|
|
margin-top: 5vh !important;
|
|
|
}
|
|
|
.list002{
|
|
|
- height: 280px;
|
|
|
+ height: 270px;
|
|
|
}
|
|
|
.list001{
|
|
|
height: 330px;
|
|
|
@@ -4987,7 +5070,7 @@
|
|
|
.hallRight {
|
|
|
flex: 1;
|
|
|
background: #fff;
|
|
|
- border-radius: 20px;
|
|
|
+ border-radius: 0px;
|
|
|
position: relative;
|
|
|
// height: 740px;
|
|
|
.rightNewFriendBox {
|
|
|
@@ -5862,4 +5945,6 @@
|
|
|
height: 400px;
|
|
|
line-height: 400px;
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
</style>
|
rkljw
