From 437cd7d944a8d8c7267dfc9e5876c651423a2466 Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Fri, 18 Jun 2021 23:38:18 +0800
Subject: [PATCH] no message

---
 .../pages/manage/components/DialogWrapper.vue | 54 ++++++++++++++-----
 resources/assets/js/store/actions.js          | 46 +++++++++-------
 resources/assets/js/store/state.js            |  1 +
 .../sass/pages/components/dialog-wrapper.scss | 18 +++++++
 4 files changed, 87 insertions(+), 32 deletions(-)

diff --git a/resources/assets/js/pages/manage/components/DialogWrapper.vue b/resources/assets/js/pages/manage/components/DialogWrapper.vue
index da3e8250..9e3bece1 100644
--- a/resources/assets/js/pages/manage/components/DialogWrapper.vue
+++ b/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) {
-            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>
diff --git a/resources/assets/js/store/actions.js b/resources/assets/js/store/actions.js
index 50fc0cca..9ac6757b 100644
--- a/resources/assets/js/store/actions.js
+++ b/resources/assets/js/store/actions.js
@@ -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);
diff --git a/resources/assets/js/store/state.js b/resources/assets/js/store/state.js
index 060ea328..baf516cc 100644
--- a/resources/assets/js/store/state.js
+++ b/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;
diff --git a/resources/assets/sass/pages/components/dialog-wrapper.scss b/resources/assets/sass/pages/components/dialog-wrapper.scss
index 64047efa..aaa7bf2c 100644
--- a/resources/assets/sass/pages/components/dialog-wrapper.scss
+++ b/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;