From b855312cf9cee012fa3a7d844250a54c7e9d0f45 Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Fri, 3 Jun 2022 11:24:07 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=BF=94=E5=9B=9E=E6=89=8B?=
 =?UTF-8?q?=E5=8A=BF=E6=8A=96=E5=8A=A8=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../assets/js/components/Mobile/Back.vue      | 11 +++++-
 .../assets/js/components/Mobile/Tabbar.vue    |  1 -
 .../pages/manage/components/DialogWrapper.vue | 18 ----------
 resources/assets/sass/components/mobile.scss  | 34 +++++++++++++------
 .../sass/pages/components/dialog-wrapper.scss |  9 -----
 5 files changed, 33 insertions(+), 40 deletions(-)

diff --git a/resources/assets/js/components/Mobile/Back.vue b/resources/assets/js/components/Mobile/Back.vue
index 08bab6b86..01deebae4 100644
--- a/resources/assets/js/components/Mobile/Back.vue
+++ b/resources/assets/js/components/Mobile/Back.vue
@@ -1,5 +1,8 @@
 <template>
-    <div v-if="show" class="mobile-back" :style="style"></div>
+    <div class="mobile-back">
+        <div v-show="windowScrollY > 0" ref="bar" class="back-bar"></div>
+        <div v-if="show" class="back-semicircle" :style="style"></div>
+    </div>
 </template>
 
 <script>
@@ -27,12 +30,14 @@ export default {
     },
 
     mounted() {
+        this.$refs.bar.addEventListener('touchmove', this.barListener)
         document.addEventListener('touchstart', this.touchstart)
         document.addEventListener('touchmove', this.touchmove)
         document.addEventListener('touchend', this.touchend)
     },
 
     beforeDestroy() {
+        this.$refs.bar.removeEventListener('touchmove', this.barListener)
         document.removeEventListener('touchstart', this.touchstart)
         document.removeEventListener('touchmove', this.touchmove)
         document.removeEventListener('touchend', this.touchend)
@@ -67,6 +72,10 @@ export default {
             this.y = touch.clientY
         },
 
+        barListener(event) {
+            event.preventDefault()
+        },
+
         touchstart(event) {
             this.getXY(event)
             // 判断是否是边缘滑动
diff --git a/resources/assets/js/components/Mobile/Tabbar.vue b/resources/assets/js/components/Mobile/Tabbar.vue
index 661ab2386..0979ae908 100644
--- a/resources/assets/js/components/Mobile/Tabbar.vue
+++ b/resources/assets/js/components/Mobile/Tabbar.vue
@@ -30,7 +30,6 @@
                 </template>
             </li>
         </ul>
-        <div class="mobile-back"></div>
     </div>
 </template>
 
diff --git a/resources/assets/js/pages/manage/components/DialogWrapper.vue b/resources/assets/js/pages/manage/components/DialogWrapper.vue
index d2cbca3c4..1c2f62533 100644
--- a/resources/assets/js/pages/manage/components/DialogWrapper.vue
+++ b/resources/assets/js/pages/manage/components/DialogWrapper.vue
@@ -208,9 +208,6 @@
             :size="380">
             <DialogGroupInfo v-if="groupInfoShow" :dialogId="dialogId"/>
         </DrawerOverlay>
-
-        <!--滑动拦截-->
-        <div ref="back" v-show="isFocus" class="dialog-wrapper-back"></div>
     </div>
 </template>
 
@@ -255,7 +252,6 @@ export default {
             msgText: '',
             msgNew: 0,
             topId: 0,
-            isFocus: false,
 
             allMsgs: [],
             tempMsgs: [],
@@ -285,14 +281,6 @@ export default {
         }
     },
 
-    mounted() {
-        this.$refs.back.addEventListener('touchmove', this.backListener)
-    },
-
-    beforeDestroy() {
-        this.$refs.back.removeEventListener('touchmove', this.backListener)
-    },
-
     computed: {
         ...mapState([
             'userId',
@@ -648,12 +636,10 @@ export default {
         },
 
         onEventFocus() {
-            this.isFocus = true;
             this.$emit("on-focus")
         },
 
         onEventBlur() {
-            this.isFocus = false;
             this.$emit("on-blur")
         },
 
@@ -832,10 +818,6 @@ export default {
                     break;
             }
         },
-
-        backListener(e) {
-            e.preventDefault()
-        },
     }
 }
 </script>
diff --git a/resources/assets/sass/components/mobile.scss b/resources/assets/sass/components/mobile.scss
index cd5032241..7ba2755d8 100644
--- a/resources/assets/sass/components/mobile.scss
+++ b/resources/assets/sass/components/mobile.scss
@@ -129,19 +129,31 @@
 
 .mobile-back {
     display: none;
-    position: fixed;
-    top: 200px;
-    left: -50px;
-    width: 500px;
-    height: 500px;
-    background-color: rgba(0, 0, 0, 0.1);
-    z-index: 9999;
-    border-radius: 50%;
-    transform: translate(-460px, -50%);
-    transition: left 0.2s;
 
-    &.show-back {
+    .back-bar {
+        position: fixed;
+        top: 0;
         left: 0;
+        bottom: 0;
+        width: 20px;
+        z-index: 9998;
+    }
+
+    .back-semicircle {
+        position: fixed;
+        top: 200px;
+        left: -50px;
+        width: 500px;
+        height: 500px;
+        background-color: rgba(0, 0, 0, 0.1);
+        z-index: 9999;
+        border-radius: 50%;
+        transform: translate(-460px, -50%);
+        transition: left 0.2s;
+
+        &.show-back {
+            left: 0;
+        }
     }
 }
 
diff --git a/resources/assets/sass/pages/components/dialog-wrapper.scss b/resources/assets/sass/pages/components/dialog-wrapper.scss
index 64061e97c..b73d56427 100644
--- a/resources/assets/sass/pages/components/dialog-wrapper.scss
+++ b/resources/assets/sass/pages/components/dialog-wrapper.scss
@@ -931,15 +931,6 @@
     }
 }
 
-.dialog-wrapper-back {
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: 20px;
-    z-index: 9998;
-}
-
 @media (max-width: 768px) {
     .dialog-wrapper {
         .dialog-nav {