wujingling0908 6 days ago
commit f68c2249c5
  1. 38
      src/components/chat-new.vue

@ -54,7 +54,7 @@ function appraiseIsClose(val, param) {
const historylist = ref([]) const historylist = ref([])
const historyLoading = ref(false) const historyLoading = ref(false)
const historyReady = ref(false) const historyReady = ref(true)
const introReadyCount = ref(0) const introReadyCount = ref(0)
const businessHandleRef = ref(null) const businessHandleRef = ref(null)
const businessClick = () => { const businessClick = () => {
@ -323,6 +323,10 @@ function onMainScroll(event) {
const top = event?.target?.scrollTop const top = event?.target?.scrollTop
if (top == null) return if (top == null) return
persistScrollTop(top, { allowZero: true }) persistScrollTop(top, { allowZero: true })
// 上滑到顶部附近时加载更多历史记录
if (top <= 60 && !nolist.value && !historyLoading.value) {
getChatHistory()
}
} }
onBeforeRouteLeave(() => { onBeforeRouteLeave(() => {
@ -374,7 +378,7 @@ function getHeaderUrl(context, payload) {
}); });
}); });
} }
const getChatHistory = async () => { const getChatHistory = async (isAuto = false) => {
const params = { const params = {
page: pageNum.value, page: pageNum.value,
pageSize: pageSize.value, pageSize: pageSize.value,
@ -382,10 +386,6 @@ const getChatHistory = async () => {
userId: userId.value || store?.userId, userId: userId.value || store?.userId,
} }
historyLoading.value = true historyLoading.value = true
if (pageNum.value === 1) {
historyReady.value = false
introReadyCount.value = 0
}
Post('history/chatInfo', params) Post('history/chatInfo', params)
.then((response) => { .then((response) => {
@ -444,7 +444,8 @@ const getChatHistory = async () => {
updateReadStatus(dataList) updateReadStatus(dataList)
nextTick(() => { nextTick(() => {
if (pageNum.value <= 2) { if (isAuto) {
// 参考 chat-main:有未读自动加载时滚到底部并提示未读
if (isLostMessage.value === 3) { if (isLostMessage.value === 3) {
showToast('您有新消息未读,请及时查看历史消息') showToast('您有新消息未读,请及时查看历史消息')
} }
@ -458,6 +459,11 @@ const getChatHistory = async () => {
setTimeout(() => { setTimeout(() => {
if (view) scrollMainTo(view.offsetTop - 20) if (view) scrollMainTo(view.offsetTop - 20)
}, 150) }, 150)
} else {
// 首次手动上拉加载:停在顶部
setTimeout(() => {
scrollMainTo(0)
}, 150)
} }
}) })
} else { } else {
@ -466,15 +472,14 @@ const getChatHistory = async () => {
} }
}) })
.catch(() => { .catch(() => {
// 网络异常不置 nolist,用户再次上滑可重试(chat-main 靠下拉手势重置 nolist,这里等价放开)
historyLoading.value = false historyLoading.value = false
historyReady.value = true historyReady.value = true
pageNum.value-- pageNum.value--
nolist.value = true
}) })
} }
onMounted(async () => { onMounted(async () => {
getHeaderUrl() getHeaderUrl()
getChatHistory()
await nextTick() await nextTick()
if (mainContainerRef.value) { if (mainContainerRef.value) {
store?.setMescrollContent?.(mainContainerRef.value) store?.setMescrollContent?.(mainContainerRef.value)
@ -483,6 +488,12 @@ onMounted(async () => {
if (persisted != null && persisted > 0) { if (persisted != null && persisted > 0) {
shouldRestoreScroll.value = true shouldRestoreScroll.value = true
restoreScrollPosition() restoreScrollPosition()
} else {
// 参考 chat-main 的 mescroll down.auto:有未读消息或投诉直连渠道时,进入页面自动加载历史
const hasUnread = isLostMessage.value == '1' || isLostMessage.value == '3'
if (hasUnread || store.source === '95460000') {
getChatHistory(true)
}
} }
}) })
watch( watch(
@ -504,6 +515,7 @@ watch(
<div class="history-loading" v-if="historyLoading"> <div class="history-loading" v-if="historyLoading">
<van-loading type="spinner" size="18rem" /> <van-loading type="spinner" size="18rem" />
</div> </div>
<div class="empty-tips opacity" v-if="nolist">{{ nolistTxt }}</div>
<div class="historicRecords" v-if="historylist.length > 0"> <div class="historicRecords" v-if="historylist.length > 0">
<chatContent <chatContent
:historylist="historylist" :historylist="historylist"
@ -544,6 +556,14 @@ watch(
.van-overlay.appraise-popup-box { .van-overlay.appraise-popup-box {
background: rgba(0, 0, 0, 0.5) !important; background: rgba(0, 0, 0, 0.5) !important;
} }
.empty-tips {
font-family: PingFangSC-Regular;
font-size: 11rem;
line-height: 16rem;
color: #666666;
text-align: center;
padding: 0 0 15rem 0;
}
.chat-new { .chat-new {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;

Loading…
Cancel
Save