no message

This commit is contained in:
kuaifan 2021-06-18 23:38:18 +08:00
parent 14a645472d
commit 437cd7d944
4 changed files with 87 additions and 32 deletions

View File

@ -22,16 +22,21 @@
</slot>
<ScrollerY
ref="scroller"
class="dialog-scroller"
class="dialog-scroller overlay-y"
:auto-bottom="autoBottom"
@on-scroll="chatScroll"
static>
<div ref="manageList" class="dialog-list">
<ul>
<li v-if="dialogMsgHasMorePages" class="history" @click="$store.dispatch('getDialogMsgListNextPage')">{{$L('加载历史消息')}}</li>
<li v-if="dialogMsgHasMorePages" class="history" @click="loadNextPage">{{$L('加载历史消息')}}</li>
<li v-else-if="dialogMsgLoad > 0 && dialogMsgList.length === 0" class="loading"><Loading/></li>
<li v-else-if="dialogMsgList.length === 0" class="nothing">{{$L('暂无消息')}}</li>
<li v-for="(item, key) in dialogMsgList" :key="key" :class="{self:item.userid == userId}">
<li
v-for="item in dialogMsgLists"
:id="'view_' + item.id"
:key="item.id"
:class="{self:item.userid == userId, 'history-tip': topId == item.id}">
<em v-if="topId == item.id" class="history-text">{{$L('历史消息')}}</em>
<div class="dialog-avatar">
<UserAvatar :userid="item.userid" :tooltip-disabled="item.userid == userId" :size="30"/>
</div>
@ -88,8 +93,8 @@ export default {
dialogDrag: false,
msgText: '',
msgLength: 0,
msgNew: 0,
topId: 0,
}
},
@ -107,30 +112,35 @@ export default {
'dialogId',
'dialogDetail',
'dialogMsgLoad',
'dialogMsgPush',
'dialogMsgList',
'dialogMsgHasMorePages',
]),
dialogMsgLists() {
const {dialogMsgList} = this;
return dialogMsgList.sort((a, b) => {
return a.id - b.id;
});
},
peopleNum() {
return this.dialogDetail.type === 'group' ? $A.runNum(this.dialogDetail.people) : 0;
}
},
watch: {
dialogMsgList(list) {
if (!this.autoBottom) {
let length = list.length - this.msgLength;
if (length > 0) {
this.msgNew+= length;
}
} else {
dialogMsgPush() {
if (this.autoBottom) {
this.$nextTick(this.goBottom);
} else {
this.msgNew++;
}
this.msgLength = list.length;
},
dialogId() {
this.msgNew = 0;
this.topId = -1;
}
},
@ -302,6 +312,26 @@ export default {
dialog_id: this.dialogDetail.id
});
},
loadNextPage() {
let topId = this.dialogMsgLists[0].id;
this.$store.dispatch('getDialogMsgListNextPage').then(() => {
this.$nextTick(() => {
this.topId = topId;
let dom = document.getElementById("view_" + topId);
if (dom) {
try {
dom.scrollIntoView(true);
} catch (e) {
scrollIntoView(dom, {
behavior: 'instant',
inline: 'start',
})
}
}
});
});
}
}
}
</script>

View File

@ -903,26 +903,31 @@ export default {
* @param commit
*/
getDialogMsgListNextPage({state, dispatch, commit}) {
if (!state.dialogMsgHasMorePages) {
return;
}
state.dialogMsgHasMorePages = false;
state.dialogMsgCurrentPage++;
//
const dialog_id = state.dialogId;
//
state.dialogMsgLoad++;
dispatch("call", {
url: 'dialog/msg/lists',
data: {
dialog_id: dialog_id,
page: state.dialogMsgCurrentPage
},
}).then(result => {
state.dialogMsgLoad--;
commit("dialogMsgListSuccess", result.data);
}).catch(() => {
state.dialogMsgLoad--;
return new Promise(function (resolve, reject) {
if (!state.dialogMsgHasMorePages) {
reject()
return;
}
state.dialogMsgHasMorePages = false;
state.dialogMsgCurrentPage++;
//
const dialog_id = state.dialogId;
//
state.dialogMsgLoad++;
dispatch("call", {
url: 'dialog/msg/lists',
data: {
dialog_id: dialog_id,
page: state.dialogMsgCurrentPage
},
}).then(result => {
state.dialogMsgLoad--;
commit("dialogMsgListSuccess", result.data);
resolve(result)
}).catch((result) => {
state.dialogMsgLoad--;
reject(result)
});
});
},
@ -1106,6 +1111,7 @@ export default {
if (dialog_id == state.dialogId) {
let index = state.dialogMsgList.findIndex(({id}) => id == data.id);
if (index === -1) {
state.dialogMsgPush = data;
state.dialogMsgList.push(data);
} else {
state.dialogMsgList.splice(index, 1, data);

View File

@ -283,6 +283,7 @@ state.dialogList = [];
state.dialogDetail = {};
state.dialogMsgUnread = 0;
state.dialogMsgLoad = 0;
state.dialogMsgPush = {};
state.dialogMsgList = [];
state.dialogMsgCurrentPage = 1;
state.dialogMsgHasMorePages = false;

View File

@ -187,6 +187,24 @@
opacity: 1;
}
}
&.history-tip {
position: relative;
padding-top: 60px;
.history-text {
font-style: normal;
position: absolute;
top: 10px;
left: 50%;
height: 22px;
line-height: 22px;
padding: 0 48px;
text-align: center;
font-size: 12px;
border-radius: 2px;
background: #f5f5f5;
transform: translateX(-50%);
}
}
&.loading {
padding: 12px 0;
justify-content: center;