From 82d6f0b533dd31c375b77f616ec21848d61fd843 Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Sun, 29 May 2022 07:52:50 +0800
Subject: [PATCH] no message

---
 .../assets/js/components/Mobile/Back.vue      |  6 +++++
 .../manage/components/ChatInput/index.vue     | 18 ++++++++-----
 .../pages/manage/components/DialogWrapper.vue | 25 ++++++++++---------
 .../pages/manage/components/ProjectPanel.vue  | 13 ++++++++--
 resources/assets/js/store/state.js            |  1 +
 resources/assets/sass/components/mobile.scss  |  3 +++
 .../sass/pages/components/dialog-wrapper.scss |  1 +
 .../assets/sass/pages/page-messenger.scss     |  3 +++
 8 files changed, 50 insertions(+), 20 deletions(-)

diff --git a/resources/assets/js/components/Mobile/Back.vue b/resources/assets/js/components/Mobile/Back.vue
index 6f9f44f65..0d287e9c1 100644
--- a/resources/assets/js/components/Mobile/Back.vue
+++ b/resources/assets/js/components/Mobile/Back.vue
@@ -45,6 +45,12 @@ export default {
         },
     },
 
+    watch: {
+        show(s) {
+            this.$store.state.touchBackInProgress = s;
+        }
+    },
+
     methods: {
         getXY(event) {
             let touch = event.touches[0]
diff --git a/resources/assets/js/pages/manage/components/ChatInput/index.vue b/resources/assets/js/pages/manage/components/ChatInput/index.vue
index 6443bde5a..676b554f4 100755
--- a/resources/assets/js/pages/manage/components/ChatInput/index.vue
+++ b/resources/assets/js/pages/manage/components/ChatInput/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="chat-input-box" :class="boxClass">
+    <div class="chat-input-box" :class="boxClass" v-clickoutside="hidePopover">
         <div class="chat-input-wrapper" @click.stop="focus">
             <!-- 输入框 -->
             <div
@@ -110,11 +110,12 @@ import "quill-mention-hi";
 import ChatEmoji from "./emoji";
 import touchmouse from "../../../../directives/touchmouse";
 import TransferDom from "../../../../directives/transfer-dom";
+import clickoutside from "../../../../directives/clickoutside";
 
 export default {
     name: 'ChatInput',
     components: {ChatEmoji},
-    directives: {touchmouse, TransferDom},
+    directives: {touchmouse, TransferDom, clickoutside},
     props: {
         dialogId: {
             type: Number,
@@ -429,6 +430,9 @@ export default {
 
             // Mark model as touched if editor lost focus
             this.quill.on('selection-change', range => {
+                if (this.timerScroll) {
+                    clearInterval(this.timerScroll);
+                }
                 if (!range) {
                     this.$emit('on-blur', this.quill)
                 } else {
@@ -438,11 +442,13 @@ export default {
                         // ios11.0-11.3 对scrollTop及scrolIntoView解释有bug
                         // 直接执行会导致输入框滚到底部被遮挡
                     } else {
-                        for (let i = 1; i <= 5; i++) {
-                            setTimeout(() => {
+                        this.timerScroll = setInterval(() => {
+                            if (this.quill.hasFocus()) {
                                 $A.scrollToView(this.$refs.editor, true)
-                            }, 200 * i);
-                        }
+                            } else {
+                                clearInterval(this.timerScroll);
+                            }
+                        }, 200);
                     }
                 }
             })
diff --git a/resources/assets/js/pages/manage/components/DialogWrapper.vue b/resources/assets/js/pages/manage/components/DialogWrapper.vue
index b45b7369e..fc7d1548d 100644
--- a/resources/assets/js/pages/manage/components/DialogWrapper.vue
+++ b/resources/assets/js/pages/manage/components/DialogWrapper.vue
@@ -221,19 +221,19 @@ export default {
             dialogDrag: false,
             groupInfoShow: false,
 
-            windowScrollY: 0
+            wrapperStyle: {},
         }
     },
 
     mounted() {
         if ($A.isIos()) {
-            window.addEventListener('scroll', this.onScrollEvent);
+            window.addEventListener('scroll', this.onWindowScroll);
         }
     },
 
     beforeDestroy() {
         if ($A.isIos()) {
-            window.removeEventListener('scroll', this.onScrollEvent);
+            window.removeEventListener('scroll', this.onWindowScroll);
         }
     },
 
@@ -321,13 +321,6 @@ export default {
         isMyDialog() {
             const {dialogData, userId} = this;
             return dialogData.dialog_user && dialogData.dialog_user.userid == userId
-        },
-
-        wrapperStyle() {
-            const {windowScrollY} = this;
-            return {
-                top: windowScrollY + 'px'
-            }
         }
     },
 
@@ -695,8 +688,16 @@ export default {
             }, 100)
         },
 
-        onScrollEvent() {
-            this.windowScrollY = window.scrollY
+        onWindowScroll() {
+            const {scrollE} = this.scrollInfo();
+            this.wrapperStyle =  {
+                top: window.scrollY + 'px'
+            }
+            if (scrollE <= 10) {
+                this.$nextTick(_ => {
+                    this.onToBottom();
+                })
+            }
         }
     }
 }
diff --git a/resources/assets/js/pages/manage/components/ProjectPanel.vue b/resources/assets/js/pages/manage/components/ProjectPanel.vue
index 4224ca71e..e68c43b3f 100644
--- a/resources/assets/js/pages/manage/components/ProjectPanel.vue
+++ b/resources/assets/js/pages/manage/components/ProjectPanel.vue
@@ -92,7 +92,7 @@
                 </div>
             </div>
         </div>
-        <div v-if="tabTypeActive === 'column'" class="project-column">
+        <div v-if="tabTypeActive === 'column'" class="project-column" :style="columnStyle">
             <Draggable
                 :list="columnList"
                 :animation="150"
@@ -538,6 +538,7 @@ export default {
     computed: {
         ...mapState([
             'windowWidth',
+            'touchBackInProgress',
 
             'userId',
             'cacheDialogs',
@@ -557,7 +558,7 @@ export default {
         },
 
         tabTypeStyle() {
-            let style = {}
+            const style = {}
             switch (this.tabTypeActive) {
                 case 'column':
                     style.left = '0'
@@ -574,6 +575,14 @@ export default {
             return style
         },
 
+        columnStyle() {
+            const style = {}
+            if (this.touchBackInProgress) {
+                style.overflow = 'hidden';
+            }
+            return style
+        },
+
         userWaitRemove() {
             const {userids, useridbak} = this.userData;
             if (!userids) {
diff --git a/resources/assets/js/store/state.js b/resources/assets/js/store/state.js
index 2974c6849..77ab604f6 100644
--- a/resources/assets/js/store/state.js
+++ b/resources/assets/js/store/state.js
@@ -11,6 +11,7 @@ const stateData = {
     loadUserBasic: false,
     loadProjects: 0,
     loadDialogs: 0,
+    touchBackInProgress: false,
 
     // User
     cacheUserActive: {},
diff --git a/resources/assets/sass/components/mobile.scss b/resources/assets/sass/components/mobile.scss
index b7a003bdf..dc65b9a8e 100644
--- a/resources/assets/sass/components/mobile.scss
+++ b/resources/assets/sass/components/mobile.scss
@@ -232,6 +232,9 @@
 
 .mobile-dialog-leave-active {
     transition: all 0.3s ease;
+    .dialog-wrapper {
+        bottom: -60px;
+    }
 }
 
 .mobile-dialog-enter,
diff --git a/resources/assets/sass/pages/components/dialog-wrapper.scss b/resources/assets/sass/pages/components/dialog-wrapper.scss
index 71ec97690..c6057a6d5 100644
--- a/resources/assets/sass/pages/components/dialog-wrapper.scss
+++ b/resources/assets/sass/pages/components/dialog-wrapper.scss
@@ -979,6 +979,7 @@
         .dialog-scroller {
             padding-right: 14px;
             padding-left: 14px;
+            overscroll-behavior: none;
         }
         .dialog-footer {
             background-color: #f8f8f8;
diff --git a/resources/assets/sass/pages/page-messenger.scss b/resources/assets/sass/pages/page-messenger.scss
index 2f4e0365c..c1478014f 100644
--- a/resources/assets/sass/pages/page-messenger.scss
+++ b/resources/assets/sass/pages/page-messenger.scss
@@ -478,6 +478,9 @@
             .messenger-msg {
                 z-index: 49;
                 background-color: #f8f8f8;
+                .msg-dialog-bg {
+                    display: none;
+                }
             }
         }
     }