no message

resources/assets/js/pages/manage/components/DialogWrapper.vue

@@ -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) {
+        dialogMsgPush() {
-            if (!this.autoBottom) {
+            if (this.autoBottom) {
-                let length = list.length - this.msgLength;
-                if (length > 0) {
-                    this.msgNew+= length;
-                }
-            } else {
                 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>

resources/assets/js/store/actions.js

@@ -903,7 +903,9 @@ export default {
      * @param commit
      */
     getDialogMsgListNextPage({state, dispatch, commit}) {
+        return new Promise(function (resolve, reject) {
             if (!state.dialogMsgHasMorePages) {
+                reject()
                 return;
             }
             state.dialogMsgHasMorePages = false;
@@ -921,8 +923,11 @@ export default {
             }).then(result => {
                 state.dialogMsgLoad--;
                 commit("dialogMsgListSuccess", result.data);
-        }).catch(() => {
+                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);

resources/assets/js/store/state.js

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

resources/assets/sass/pages/components/dialog-wrapper.scss

@@ -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;