no message

resources/assets/js/app.js

@@ -75,11 +75,19 @@ if (!isElectron && !isEEUiApp) {
         failedColor: '#ff0000'
     });
     router.beforeEach((to, from, next) => {
-        ViewUI.LoadingBar.start();
+        ViewUI.LoadingBar._timer && clearTimeout(ViewUI.LoadingBar._timer)
+        ViewUI.LoadingBar._timer = setTimeout(_ => {
+            ViewUI.LoadingBar._load = true;
+            ViewUI.LoadingBar.start();
+        }, 300)
         next();
     });
     router.afterEach(() => {
-        ViewUI.LoadingBar.finish();
+        ViewUI.LoadingBar._timer && clearTimeout(ViewUI.LoadingBar._timer)
+        if (ViewUI.LoadingBar._load === true) {
+            ViewUI.LoadingBar._load = false;
+            ViewUI.LoadingBar.finish();
+        }
     });
 }
 
@@ -99,7 +107,7 @@ Vue.prototype.goBack = function (number) {
     if ($A.runNum(history['::count']) > 2) {
         app.$router.go(typeof number === 'number' ? number : -1);
     } else {
-        app.$router.replace(typeof number === "object" ? number : {path: '/'}).then(() => {}).catch(() => {});
+        app.$router.replace(typeof number === "object" ? number : {path: '/'}).catch(_ => {});
     }
 };
 

resources/assets/js/pages/manage/messenger.vue

@@ -119,13 +119,16 @@
                 </div>
             </div>
 
-            <div class="messenger-msg" :class="{'show768':dialogId > 0}">
+            <transition :name="windowMax768 ? 'mobile-dialog' : ''">
-                <div class="msg-dialog-bg">
+                <div v-if="dialogId || !windowMax768" class="messenger-msg">
-                    <div class="msg-dialog-bg-icon"><Icon type="ios-chatbubbles" /></div>
+                    <div class="msg-dialog-bg">
-                    <div class="msg-dialog-bg-text">{{$L('选择一个会话开始聊天')}}</div>
+                        <div class="msg-dialog-bg-icon"><Icon type="ios-chatbubbles" /></div>
+                        <div class="msg-dialog-bg-text">{{$L('选择一个会话开始聊天')}}</div>
+                    </div>
+                    <DialogWrapper v-if="dialogId > 0" :dialogId="dialogId" @on-active="scrollIntoActive"/>
                 </div>
-                <DialogWrapper v-if="dialogTmpId > 0" :dialogId="dialogTmpId" @on-active="scrollIntoActive"/>
+            </transition>
-            </div>
+
         </div>
     </div>
 </template>
@@ -149,7 +152,6 @@ export default {
             ],
             dialogActive: '',
             dialogKey: '',
-            dialogTmpId: 0,
 
             contactsKey: '',
             contactsLoad: 0,
@@ -173,7 +175,7 @@ export default {
     },
 
     computed: {
-        ...mapState(['userId', 'cacheDialogs', 'loadDialogs']),
+        ...mapState(['userId', 'cacheDialogs', 'loadDialogs', 'windowMax768']),
 
         dialogId() {
             const {dialogId} = this.$route.params;
@@ -302,16 +304,8 @@ export default {
         dialogId: {
             handler(id) {
                 if (id > 0) {
-                    this.dialogTmpId = id;
                     $A.setStorage("messenger::dialogId", id);
                     this.scrollIntoActive()
-                } else {
-                    this.timerA && clearTimeout(this.timerA);
-                    this.timerA = setTimeout(_ => {
-                        if (this.dialogId == 0) {
-                            this.dialogTmpId = 0;
-                        }
-                    }, 300)
                 }
             },
             immediate: true

resources/assets/sass/components/mobile.scss

@@ -181,6 +181,7 @@
     }
 }
 
+// 渐见
 .mobile-fade-enter-active {
     transition: all 0.2s ease;
 }
@@ -194,6 +195,7 @@
     opacity: 0;
 }
 
+// 底部划上
 .mobile-slide-enter-active {
     transition: all 0.2s ease;
 }
@@ -204,10 +206,11 @@
 
 .mobile-slide-enter,
 .mobile-slide-leave-to {
-    transform: translate(0, 15%) scale(0.98);
+    transform: translate(0, 15%);
     opacity: 0;
 }
 
+// 通知（顶部划入）
 .mobile-notify-enter-active {
     transition: all 0.3s ease;
 }
@@ -222,6 +225,21 @@
     opacity: 0;
 }
 
+// 对话框（右侧划入）
+.mobile-dialog-enter-active {
+    transition: all 0.3s ease;
+}
+
+.mobile-dialog-leave-active {
+    transition: all 0.3s ease;
+}
+
+.mobile-dialog-enter,
+.mobile-dialog-leave-to {
+    transform: translate(100%, 0);
+    opacity: 0;
+}
+
 @media (max-width: 768px) {
     .mobile-tabbar {
         display: flex;

resources/assets/sass/pages/page-messenger.scss

@@ -454,14 +454,6 @@
             }
             .messenger-msg {
                 z-index: 49;
-                transition: transform 0.3s;
-                transform: translateX(120%);
-                .msg-dialog-bg {
-                    display: none;
-                }
-                &.show768 {
-                    transform: translateX(0);
-                }
             }
         }
     }