|
|
@@ -43,7 +43,7 @@ const userIds = useUserStore();
|
|
|
// main元素的初始高度,在onMounted时需要重新计算
|
|
|
let height = ref(document.documentElement.clientHeight - 16 + "px;");
|
|
|
const messageText = ref(""); //发送的内容
|
|
|
-const headerName = ref("");
|
|
|
+let headerName = ref("");
|
|
|
const total = ref(0);
|
|
|
const sendId = ref(""); //选择发送的文件id
|
|
|
const isForward = ref(false);
|
|
|
@@ -67,27 +67,19 @@ const searchData = ref([]);
|
|
|
|
|
|
//聊天列表数据模拟
|
|
|
const personList = reactive({ data: [] });
|
|
|
+let getchatUserState = false //获取会话人员列表状态.获取动作完成前接收到的消息需要临时缓存
|
|
|
+let tmpMsgList = ref([]) //临时消息队列。主要存储会话人员还未获取完成前收到的消息
|
|
|
//获取好友列表
|
|
|
const getMsgList = async () => {
|
|
|
+ getchatUserState = true
|
|
|
const resFriend = await msgFriend();
|
|
|
personList.data = resFriend.rows;
|
|
|
- // .filter(
|
|
|
- // (item) => item.toId !== useUserStore().uid
|
|
|
- // );
|
|
|
-
|
|
|
searchData.value = personList.data;
|
|
|
- if (clickPersonId.value ==0 && personList.data.length>0) {
|
|
|
- clickPersonId.value = personList.data[0].fromId
|
|
|
+ if(personList.data.length==0){
|
|
|
+ getchatUserState = false
|
|
|
+ return
|
|
|
}
|
|
|
//圆点======
|
|
|
- /*
|
|
|
- searchData.value.map((i) => {
|
|
|
- if (i.fromId == websoctStore.messOne?.fromId) {
|
|
|
- i.showCircel = true;
|
|
|
- }
|
|
|
- });
|
|
|
- */
|
|
|
- //圆点======
|
|
|
sendCont.data.toId =
|
|
|
personList.data[0]?.toId == userIds.uid
|
|
|
? personList.data[0].fromId
|
|
|
@@ -96,6 +88,25 @@ const getMsgList = async () => {
|
|
|
personList.data[0]?.toId == userIds.uid
|
|
|
? personList.data[0].fromName
|
|
|
: personList.data[0].toName;
|
|
|
+ // 默认点击第一个对话人
|
|
|
+ if (clickPersonId.value ==0 && personList.data.length>0) {
|
|
|
+ clickPersonId.value = sendCont.data.toId
|
|
|
+ }
|
|
|
+ getchatUserState = false
|
|
|
+ if(tmpMsgList.value.length>0){
|
|
|
+ //处理临时缓存消息:将发送者标记为消息未读提示
|
|
|
+ searchData.value.map((user) => {
|
|
|
+ let charUserid = user?.toId == userIds.uid ? user.fromId : user.toId;
|
|
|
+ for(let i=0;i<tmpMsgList.value.length;i++){
|
|
|
+ let tmpFromID = tmpMsgList.value[i].fromId
|
|
|
+ if (tmpFromID == charUserid && sendCont.data.toId!=tmpFromID) {
|
|
|
+ user.showCircel = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ tmpMsgList.value = []
|
|
|
+ console.log("临时缓存消息处理完成:",searchData.value)
|
|
|
+ }
|
|
|
if (sendCont.data.toId) {
|
|
|
//调用聊天记录
|
|
|
msgRecordEvent(sendCont.data.toId);
|
|
|
@@ -115,6 +126,7 @@ const boottmScroll = () => {
|
|
|
};
|
|
|
//获取用户的聊天记录
|
|
|
const msgRecordEvent = async (toIdValue) => {
|
|
|
+ if(clickPersonId.value!=toIdValue) return;
|
|
|
const queryParams = {
|
|
|
pageNum: 1,
|
|
|
pageSize: 10,
|
|
|
@@ -184,40 +196,61 @@ const clickPerson = (index, item) => {
|
|
|
msgRecordEvent(sendCont.data.toId);
|
|
|
};
|
|
|
//删除聊天
|
|
|
-const delClick = (msgId) => {
|
|
|
+const delClick = (toId) => {
|
|
|
proxy.$modal
|
|
|
- .confirm("删除后,将清空该聊天的消息记录")
|
|
|
+ .confirm("删除后,将清空与该人员的所有会话记录,确定吗?")
|
|
|
.then(function () {
|
|
|
- return delMsg(msgId);
|
|
|
+ return delMsg(toId);
|
|
|
})
|
|
|
.then(() => {
|
|
|
+ chatRecords.data=[]
|
|
|
+ headerName.value=''
|
|
|
+ clickPersonId.value=0
|
|
|
getMsgList();
|
|
|
proxy.$modal.msgSuccess("删除成功");
|
|
|
});
|
|
|
};
|
|
|
|
|
|
//树选中的人传过来的选中人的信息,push进入列表中
|
|
|
-const changeMsg = async (val) => {
|
|
|
+// val 新的会话人员信息对象
|
|
|
+// isnew:false或null:自己添加的 true:其他人员发起的新消息会话
|
|
|
+const changeMsg = async (val,isnew) => {
|
|
|
const resInfo = await userInfo(val.id);
|
|
|
+ resInfo.fromId = val.id
|
|
|
+ resInfo.content = val.content
|
|
|
+ resInfo.file = val.file
|
|
|
if (searchData.value.length > 0) {
|
|
|
//判断是否有相同的聊天人
|
|
|
const filerData = searchData.value.filter(
|
|
|
(vPerson) =>
|
|
|
(vPerson.toId && vPerson.toId == resInfo.userId) ||
|
|
|
- (vPerson.userId && vPerson.userId == resInfo.userId)
|
|
|
+ (vPerson.fromId && vPerson.fromId == resInfo.userId)
|
|
|
);
|
|
|
if (filerData.length > 0) {
|
|
|
- return ElMessage({ message: "该聊天已存在", type: "error" });
|
|
|
+ // 存在就算了,无需提示
|
|
|
+ //return ElMessage({ message: "该聊天已存在", type: "error" });
|
|
|
} else {
|
|
|
+ if(isnew!=null){
|
|
|
+ resInfo.showCircel = true
|
|
|
+ }
|
|
|
searchData.value.unshift(resInfo);
|
|
|
}
|
|
|
} else {
|
|
|
//为空数组的时候无需判断
|
|
|
searchData.value.unshift(resInfo);
|
|
|
}
|
|
|
- sendCont.data.toId = resInfo.userId;
|
|
|
- msgRecordEvent(sendCont.data.toId);
|
|
|
- headerName.value = resInfo.nickName;
|
|
|
+ if(isnew==null){
|
|
|
+ // 自己添加的会话人员,默认选中进行对话
|
|
|
+ sendCont.data.toId = resInfo.userId;
|
|
|
+ headerName.value = resInfo.nickName;
|
|
|
+ clickPersonId.value = resInfo.userId
|
|
|
+ clickPerson(0,searchData.value[0]);
|
|
|
+ }else if(searchData.value.length==1){
|
|
|
+ sendCont.data.toId = resInfo.userId;
|
|
|
+ headerName.value = resInfo.nickName;
|
|
|
+ clickPersonId.value = val.id
|
|
|
+ clickPerson(0,searchData.value[0]);
|
|
|
+ }
|
|
|
};
|
|
|
|
|
|
//发送聊天
|
|
|
@@ -281,48 +314,53 @@ const sendFileClick = async () => {
|
|
|
const handleNewMessage = async () => {
|
|
|
if (websoctStore.newMessage) {
|
|
|
msgRecordEvent(sendCont.data.toId); //获取用户的聊天记录
|
|
|
- const resFriend = await msgFriend();
|
|
|
- getMsgList();
|
|
|
+ // const resFriend = await msgFriend();
|
|
|
+ //getMsgList();
|
|
|
websoctStore.newMessage = false; // 重置新消息标记
|
|
|
}
|
|
|
};
|
|
|
-
|
|
|
+//接收到的新消息
|
|
|
watchEffect(async() => {
|
|
|
- console.log("===============有新消息了:",websoctStore.messOne)
|
|
|
- console.log(router.currentRoute.value.path)
|
|
|
- if(router.currentRoute.value.path!='/index') return;
|
|
|
- console.log("clickPersonId:",clickPersonId.value)
|
|
|
+ let newMessages = {}
|
|
|
+ newMessages = websoctStore.messOne
|
|
|
+ console.log("===============有新消息了:",newMessages)
|
|
|
+ if(router.currentRoute.value.path!='/index' || newMessages.fromId==null) return;
|
|
|
+ //此处判断messOne是否已发生更改,如果还未发生更改则清除该消息
|
|
|
+ if(websoctStore.messOne.fromId==newMessages.fromId){
|
|
|
+ websoctStore.messOne={}
|
|
|
+ }
|
|
|
+ console.log("clickPersonId:",clickPersonId.value)
|
|
|
+ if(getchatUserState){
|
|
|
+ //会话列表还处理完成,临时缓存消息
|
|
|
+ tmpMsgList.value.push(newMessages)
|
|
|
+ // console.log("===============会话列表还处理完成,临时缓存消息:",tmpMsgList.value)
|
|
|
+ return
|
|
|
+ }
|
|
|
if(websoctStore.noReadList!=null) {
|
|
|
- if(clickPersonId.value!=websoctStore.messOne.fromId){
|
|
|
+ // 是否正在对话的人员
|
|
|
+ if(clickPersonId.value!=newMessages.fromId){
|
|
|
+ let isExist=false // 当前消息发送人员是否已在对话人员列表中
|
|
|
for(let i=0;i<searchData.value.length;i++){
|
|
|
- if(searchData.value[i].fromId==websoctStore.messOne.fromId){
|
|
|
+ let chatUserID = searchData.value[i].fromId
|
|
|
+ if(chatUserID==userIds.uid) chatUserID = searchData.value[i].toId
|
|
|
+ if(chatUserID==newMessages.fromId){
|
|
|
+ isExist = true
|
|
|
searchData.value[i].showCircel = true
|
|
|
+ searchData.value[i].content = newMessages.content
|
|
|
+ searchData.value[i].file = newMessages.file
|
|
|
}
|
|
|
}
|
|
|
+ if(!isExist){
|
|
|
+ // 接收到其他人员发来的第一次会话消息,需要将该人员添加到会话人员列表
|
|
|
+ changeMsg({"id":newMessages.fromId,"content":newMessages.content,"file":newMessages.file},true)
|
|
|
+ }
|
|
|
return;
|
|
|
}
|
|
|
- msgRecordEvent(websoctStore.messOne.fromId);
|
|
|
- setTimeout(() => {
|
|
|
- websoctStore.messOne={}
|
|
|
- }, 1000);
|
|
|
+ msgRecordEvent(newMessages.fromId);
|
|
|
// getYuan()
|
|
|
- getMsgList();
|
|
|
+ // getMsgList();
|
|
|
}
|
|
|
});
|
|
|
- //圆点======
|
|
|
-// const getYuan=async ()=>{
|
|
|
-// const res= await msgFriend();
|
|
|
-
|
|
|
-// searchData.value.forEach(k=>{
|
|
|
-// res.rows.forEach((i) => {
|
|
|
-// if (i.fromId == websoctStore.messOne?.fromId) {
|
|
|
-// k=i
|
|
|
-// k.showCircel = true
|
|
|
-// }
|
|
|
-// });
|
|
|
-// })
|
|
|
-// }
|
|
|
- // 圆点======
|
|
|
// 滚动翻页========
|
|
|
const mainContainer = ref(null);
|
|
|
const handleScroll = (event) => {
|
|
|
@@ -404,11 +442,16 @@ downLoadfile(file)
|
|
|
//搜索的点击事件
|
|
|
const SearchChat = () => {
|
|
|
if (searchText.value) {
|
|
|
- searchData.value = personList.data.filter((i) => {
|
|
|
- return i.toName == searchText.value;
|
|
|
+ searchData.value.map((user) => {
|
|
|
+ let charUserName = user?.toId == userIds.uid ? user.fromName : user.toName;
|
|
|
+ if(charUserName==null) charUserName = user.nickName
|
|
|
+ if(charUserName.indexOf(searchText.value.replace(/ /gi,''))>-1) user['display'] = 1
|
|
|
+ else user['display'] = 0
|
|
|
});
|
|
|
} else {
|
|
|
- getMsgList();
|
|
|
+ searchData.value.map((user) => {
|
|
|
+ user['display'] = 1
|
|
|
+ });
|
|
|
}
|
|
|
};
|
|
|
//转聊天记录的/n为实际样式
|
|
|
@@ -486,21 +529,22 @@ onMounted(() => {
|
|
|
<div
|
|
|
:class="
|
|
|
clickPersonIndex == index
|
|
|
- ? 'activ-left-container left-container'
|
|
|
- : 'left-container'
|
|
|
+ ? 'activ-left-container left-container shouzhi'
|
|
|
+ : 'left-container shouzhi'
|
|
|
"
|
|
|
v-for="(item, index) in searchData"
|
|
|
:key="index"
|
|
|
@click="clickPerson(index, item)"
|
|
|
>
|
|
|
+ <template v-if="item.display==null || item.display==1">
|
|
|
<img :src="cebian" class="cebian" v-if="clickPersonIndex == index" />
|
|
|
- <!-- <button
|
|
|
+ <button
|
|
|
class="del-chat"
|
|
|
v-if="clickPersonIndex == index"
|
|
|
- @click="delClick(item.msgId)"
|
|
|
+ @click="delClick(item.toId == userIds.uid?item.fromId:item.toId)"
|
|
|
>
|
|
|
- 删除聊天
|
|
|
- </button> -->
|
|
|
+ 删除会话
|
|
|
+ </button>
|
|
|
<div>
|
|
|
<!-- <img :src="item.avatar?item.avatar : chat" class="head-sculpture" /> -->
|
|
|
<img
|
|
|
@@ -544,6 +588,7 @@ onMounted(() => {
|
|
|
class="yuandian"
|
|
|
v-if="item.showCircel && $route.path == '/index' && clickPersonId!==item.fromId"
|
|
|
></span>
|
|
|
+ </template>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 右侧聊天 -->
|