增加对两个视角已读未读消息的处理，并调整触发时机；增加map维护已读数量
This commit is contained in:
parent
676ad46ab5
commit
29dcfac775
@ -678,6 +678,37 @@ const state = ref({
|
||||
tempWaitDoCheck: [], //当前获取别人发送已读回执的元素
|
||||
})
|
||||
|
||||
// 创建一个响应式的 Map 来维护已读数量
|
||||
const recordReadsMap = ref(new Map())
|
||||
|
||||
// 监听 Map 的变化，更新 UI
|
||||
watch(
|
||||
recordReadsMap,
|
||||
(newMap) => {
|
||||
console.error(newMap, 'newMap')
|
||||
requestAnimationFrame(() => {
|
||||
console.error('requestAnimationFrame')
|
||||
newMap.forEach((readNum, msgId) => {
|
||||
console.error(readNum, 'readNum')
|
||||
console.error(msgId, 'msgId')
|
||||
const element = document.getElementById(`zp-id-${msgId}`)
|
||||
if (element) {
|
||||
console.error(element, 'element')
|
||||
element.dataset.readNum = readNum
|
||||
// const readNumElement = element.querySelector('.read-num')
|
||||
// if (readNumElement) {
|
||||
// console.error(readNumElement, 'readNumElement')
|
||||
// readNumElement.textContent = readNum
|
||||
// }
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
{
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
|
||||
uniOnload(async (options) => {
|
||||
console.log('onLoad' + JSON.stringify(options))
|
||||
if (options.sessionId) {
|
||||
@ -1376,6 +1407,39 @@ watch(
|
||||
state.value.localPageLoadDone = false
|
||||
}
|
||||
}
|
||||
|
||||
// 处理新消息
|
||||
if (oldValue && oldValue.length > 0) {
|
||||
const lastOldMsgId = oldValue[0].msg_id
|
||||
const lastIndex = newValue.findIndex(
|
||||
(msg) => msg.msg_id === lastOldMsgId,
|
||||
)
|
||||
console.error(lastIndex, 'lastIndex')
|
||||
|
||||
if (lastIndex === -1) {
|
||||
// 没找到lastOldMsgId，说明都是新消息
|
||||
newValue.forEach((msg) => {
|
||||
nextTick(() => {
|
||||
const element = document.getElementById(`zp-id-${msg.msg_id}`)
|
||||
if (element) {
|
||||
messageRecordElementRefs.value.unshift(element)
|
||||
}
|
||||
})
|
||||
})
|
||||
} else if (lastIndex > 0) {
|
||||
// 找到了lastOldMsgId，它前面的都是新消息
|
||||
for (let i = 0; i < lastIndex; i++) {
|
||||
const msg = newValue[i]
|
||||
console.error(msg, '新消息msg')
|
||||
nextTick(() => {
|
||||
const element = document.getElementById(`zp-id-${msg.msg_id}`)
|
||||
if (element) {
|
||||
messageRecordElementRefs.value.unshift(element)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -1383,6 +1447,7 @@ watch(
|
||||
},
|
||||
)
|
||||
|
||||
|
||||
const onScrollToLower = async () => {
|
||||
if (state.value.useCustomLoadMore) {
|
||||
const tempVirtualList = lodash.cloneDeep(virtualList.value).reverse()
|
||||
@ -1927,8 +1992,8 @@ const checkVisibleElements = () => {
|
||||
state.value.visibleElements.forEach((el) => {
|
||||
// console.log(el)
|
||||
const msgId = el.dataset.msgid
|
||||
const talkType = el.dataset.talktype
|
||||
const receiverId = el.dataset.receiverid
|
||||
const talkType = Number(el.dataset.talktype)
|
||||
const receiverId = Number(el.dataset.receiverid)
|
||||
// console.log(msgId, talkType, receiverId)
|
||||
if (waitDoRead.length === 0) {
|
||||
waitDoRead.push({
|
||||
@ -1937,20 +2002,19 @@ const checkVisibleElements = () => {
|
||||
receiver_id: receiverId,
|
||||
})
|
||||
} else {
|
||||
waitDoRead.forEach((doReadItem) => {
|
||||
if (
|
||||
doReadItem.talk_type === talkType &&
|
||||
doReadItem.receiver_id === receiverId
|
||||
) {
|
||||
doReadItem.msg_ids.push(msgId)
|
||||
} else {
|
||||
waitDoRead.push({
|
||||
msg_ids: [msgId],
|
||||
talk_type: talkType,
|
||||
receiver_id: receiverId,
|
||||
})
|
||||
}
|
||||
})
|
||||
const existingItem = waitDoRead.find(
|
||||
(item) =>
|
||||
item.talk_type === talkType && item.receiver_id === receiverId,
|
||||
)
|
||||
if (existingItem) {
|
||||
existingItem.msg_ids.push(msgId)
|
||||
} else {
|
||||
waitDoRead.push({
|
||||
msg_ids: [msgId],
|
||||
talk_type: talkType,
|
||||
receiver_id: receiverId,
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
// console.error(waitDoRead)
|
||||
@ -1962,10 +2026,10 @@ const checkVisibleElements = () => {
|
||||
prev.talk_type === doReadItem.talk_type &&
|
||||
prev.receiver_id === doReadItem.receiver_id,
|
||||
)
|
||||
// 如果找不到上一次的项，或者msg_ids数量不一致，则发送
|
||||
// 如果找不到上一次的项，或者msg_ids不一致，则发送
|
||||
if (
|
||||
!prevItem ||
|
||||
prevItem.msg_ids.length !== doReadItem.msg_ids.length
|
||||
!doReadItem.msg_ids.every((id) => prevItem.msg_ids.includes(id))
|
||||
) {
|
||||
console.error('====发送了已读回执=====', doReadItem)
|
||||
//发送已读回执
|
||||
@ -1986,8 +2050,8 @@ const checkVisibleOutElements = () => {
|
||||
state.value.visibleOutElements.forEach((el) => {
|
||||
// console.log(el)
|
||||
const msgId = el.dataset.msgid
|
||||
const talkType = el.dataset.talktype
|
||||
const receiverId = el.dataset.receiverid
|
||||
const talkType = Number(el.dataset.talktype)
|
||||
const receiverId = Number(el.dataset.receiverid)
|
||||
if (waitDoCheck.length === 0) {
|
||||
waitDoCheck.push({
|
||||
msg_ids: [msgId],
|
||||
@ -1995,46 +2059,66 @@ const checkVisibleOutElements = () => {
|
||||
receiver_id: receiverId,
|
||||
})
|
||||
} else {
|
||||
waitDoCheck.forEach((doReadItem) => {
|
||||
if (
|
||||
doReadItem.talk_type === talkType &&
|
||||
doReadItem.receiver_id === receiverId
|
||||
) {
|
||||
doReadItem.msg_ids.push(msgId)
|
||||
} else {
|
||||
waitDoCheck.push({
|
||||
msg_ids: [msgId],
|
||||
talk_type: talkType,
|
||||
receiver_id: receiverId,
|
||||
})
|
||||
}
|
||||
})
|
||||
const existingItem = waitDoCheck.find(
|
||||
(item) =>
|
||||
item.talk_type === talkType && item.receiver_id === receiverId,
|
||||
)
|
||||
if (existingItem) {
|
||||
existingItem.msg_ids.push(msgId)
|
||||
} else {
|
||||
waitDoCheck.push({
|
||||
msg_ids: [msgId],
|
||||
talk_type: talkType,
|
||||
receiver_id: receiverId,
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
// console.error(waitDoCheck)
|
||||
if (waitDoCheck.length > 0) {
|
||||
waitDoCheck.forEach((doCheckItem) => {
|
||||
// 查找上一次存储的对应项
|
||||
const prevItem = state.value.tempWaitDoCheck.find(
|
||||
(prev) =>
|
||||
prev.talk_type === doCheckItem.talk_type &&
|
||||
prev.receiver_id === doCheckItem.receiver_id,
|
||||
)
|
||||
// 如果找不到上一次的项，或者msg_ids数量不一致，则发送
|
||||
if (
|
||||
!prevItem ||
|
||||
prevItem.msg_ids.length !== doCheckItem.msg_ids.length
|
||||
) {
|
||||
// const prevItem = state.value.tempWaitDoCheck.find(
|
||||
// (prev) =>
|
||||
// prev.talk_type === doCheckItem.talk_type &&
|
||||
// prev.receiver_id === doCheckItem.receiver_id,
|
||||
// )
|
||||
// // 如果找不到上一次的项，或者msg_ids不一致，则发送
|
||||
// if (
|
||||
// !prevItem ||
|
||||
// !doCheckItem.msg_ids.every((id) => prevItem.msg_ids.includes(id))
|
||||
// ) {
|
||||
console.error('====调用了已读回执查询接口=====', doCheckItem)
|
||||
// ServeReadConditionList({
|
||||
// type: 'list', //list是列表，detail是详情
|
||||
// talkType: talkParams.type,
|
||||
// receiverId: talkParams.receiver_id,
|
||||
// msgIds: waitDoCheck,
|
||||
// }).then(({ code, data }) => {
|
||||
// console.log(data)
|
||||
// })
|
||||
}
|
||||
let params = Object.assign({}, doCheckItem, {
|
||||
talkType: doCheckItem.talk_type, //1私聊2群聊
|
||||
receiverId: doCheckItem.talk_type === 1 ? talkParams.uid : talkParams.receiver_id, //私聊的时候是对方用户id，群聊的时候是对方群id
|
||||
msgIds: doCheckItem.msg_ids,
|
||||
type: 'list', //list是列表，detail是详情
|
||||
})
|
||||
|
||||
const resp = ServeReadConditionList(params)
|
||||
// console.log(resp)
|
||||
resp.then(({ code, data }) => {
|
||||
// console.log(data)
|
||||
if (code == 200) {
|
||||
// 处理批量更新
|
||||
if (Array.isArray(data.data)) {
|
||||
console.error('处理批量更新', data.data)
|
||||
data.data.forEach(item => {
|
||||
if (item.msgId && item.readNum !== undefined) {
|
||||
console.error('修改recordReadsMap', item)
|
||||
recordReadsMap.value.set(item.msgId, item.readNum)
|
||||
}
|
||||
})
|
||||
} else if (data.data && data.data.readNum !== undefined) {
|
||||
console.error('处理单个更新', data.data)
|
||||
doCheckItem.msg_ids.forEach(msgId => {
|
||||
recordReadsMap.value.set(msgId, data.data.readNum)
|
||||
})
|
||||
}
|
||||
}
|
||||
}).catch(() => {})
|
||||
// }
|
||||
})
|
||||
}
|
||||
// 更新完成后再保存当前数据
|
||||
@ -2056,7 +2140,8 @@ const observeElement = (el, index) => {
|
||||
// 观察者函数
|
||||
const handleIntersection = (entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
|
||||
// 确保元素有足够比例可见
|
||||
// 元素进入视口
|
||||
let elData = entry.target.dataset
|
||||
const msgType = elData.msgtype
|
||||
@ -2069,6 +2154,10 @@ const handleIntersection = (entries) => {
|
||||
//我发的消息，需要获取别人发送的已读回执列表
|
||||
state.value.visibleOutElements.add(entry.target)
|
||||
}
|
||||
} else {
|
||||
// 元素离开视口，从集合中移除
|
||||
state.value.visibleElements.delete(entry.target)
|
||||
state.value.visibleOutElements.delete(entry.target)
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -2571,4 +2660,26 @@ const onTextAreaMention = (user) => {
|
||||
:deep(.mention) {
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
// 添加已读数量显示样式
|
||||
[data-msgid] {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: attr(data-read-num);
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 5px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
padding: 2px 6px;
|
||||
border-radius: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&[data-read-num]:not([data-read-num=""])::after {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user