perf: 优化消息未读数

FoXiMao · Mar 7, 2022 · 5afed4b · 5afed4b
1 parent 2aa687a
commit 5afed4b
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 14 deletions.
diff --git a/resources/assets/js/pages/manage/components/DialogView.vue b/resources/assets/js/pages/manage/components/DialogView.vue
@@ -152,7 +152,9 @@ export default {
                 },
             }).then(({data}) => {
                 this.read_list = data;
-                this.$refs.percent.updatePopper();
+                this.$nextTick(() => {
+                    this.$refs.percent.updatePopper();
+                })
             }).catch(() => {
                 this.read_list = [];
             });

diff --git a/resources/assets/js/pages/manage/messenger.vue b/resources/assets/js/pages/manage/messenger.vue
@@ -90,8 +90,13 @@
                     </div>
                 </ScrollerY>
                 <div class="messenger-menu">
-                    <Icon @click="tabActive='dialog'" :class="{active:tabActive==='dialog'}" type="ios-chatbubbles" />
-                    <Icon @click="tabActive='contacts'" :class="{active:tabActive==='contacts'}" type="md-person" />
+                    <div class="menu-icon">
+                        <Icon @click="tabActive='dialog'" :class="{active:tabActive==='dialog'}" type="ios-chatbubbles" />
+                        <Badge class="menu-num" :count="msgUnread('all')"/>
+                    </div>
+                    <div class="menu-icon">
+                        <Icon @click="tabActive='contacts'" :class="{active:tabActive==='contacts'}" type="md-person" />
+                    </div>
                 </div>
             </div>
 

diff --git a/resources/assets/sass/pages/page-messenger.scss b/resources/assets/sass/pages/page-messenger.scss
@@ -281,18 +281,31 @@
                 height: 52px;
                 flex-shrink: 0;
                 border-top: 1px solid #f4f5f5;
-                > i {
-                    cursor: pointer;
-                    font-size: 24px;
-                    margin: 0 24px;
-                    color: #aaaaaa;
-                    opacity: 0.9;
-                    &.active {
-                        opacity: 1;
-                        color: $primary-color;
+                .menu-icon {
+                    height: 100%;
+                    display: flex;
+                    align-items: center;
+                    position: relative;
+                    .menu-num {
+                        position: absolute;
+                        top: 4px;
+                        left: 50%;
+                        margin-left: 3px;
+                        transform: scale(0.8);
                     }
-                    &:hover {
-                        opacity: 1;
+                    > i {
+                        cursor: pointer;
+                        font-size: 24px;
+                        margin: 0 24px;
+                        color: #aaaaaa;
+                        opacity: 0.9;
+                        &.active {
+                            opacity: 1;
+                            color: $primary-color;
+                        }
+                        &:hover {
+                            opacity: 1;
+                        }
                     }
                 }
             }