消息通知增加未读

src/components/notificationMsg.vue

@@ -7,7 +7,7 @@
         <div class="notifation-wrap">
             <!-- 防止tabs在popover前渲染,会导致tab选中状态不正确 -->
             <el-tabs v-model="activeName" v-if="visible">
-                <el-tab-pane label="研报审批" name="first"></el-tab-pane>
+                <el-tab-pane :label="`研报审批(${UnreadTotal})`" name="first"></el-tab-pane>
             </el-tabs>
             <div class="massage-list" v-if="visible">
                 <div class="message-item" :class="{'IsRead':item.IsRead}" v-for="item in msgList" :key="item.Id" @click="readMsg(item)">
@@ -19,17 +19,18 @@
                             <span class="title">{{item.Content}}</span>
                             <span class="time">{{item.CreateTime}}</span>
                         </div>
-                        <div class="content">{{item.Remark||'无'}}</div>
+                        <div class="content">{{item.Remark||''}}&nbsp;</div>
                     </div>
                 </div>
                 <tableNoData v-if="!msgList.length" text="暂无消息"></tableNoData>
             </div>
             <el-button type="text" class="close-btn" @click="visible=false">关闭</el-button>
         </div>
-        <span slot="reference" @click="visible = !visible" style="cursor: pointer;display:inline-block;width: 50px;text-align: center;">
+        <span slot="reference" @click="visible = !visible" class="msg-btn">
             <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M16.7344 15.4904L15.2941 12.9564V7.84847C15.2941 5.89142 13.8231 3.77337 11.6786 2.99732C11.5741 1.96012 10.8811 1.20374 9.97287 1.20374C9.06595 1.20374 8.37036 1.96014 8.26717 2.99732C6.12392 3.77337 4.65292 5.8914 4.65292 7.84847V12.9564L3.14258 15.6146C3.04183 15.7903 3.04429 16.0054 3.14504 16.1799C3.24581 16.3544 3.43263 16.4601 3.63415 16.4601H7.22871C7.49293 17.7357 8.62233 18.6967 9.97289 18.6967C11.3247 18.6967 12.4541 17.7357 12.7171 16.4601H16.3116C16.3215 16.4601 16.3288 16.4601 16.3374 16.4601C16.6508 16.4601 16.904 16.2082 16.904 15.8948C16.904 15.7362 16.8401 15.5925 16.7344 15.4904ZM9.97287 2.33803C10.1769 2.33803 10.3415 2.49286 10.4472 2.7239C10.2899 2.70792 10.1375 2.67106 9.97287 2.67106C9.8082 2.67106 9.65583 2.70792 9.49851 2.7239C9.60422 2.49284 9.76889 2.33803 9.97287 2.33803ZM9.97287 17.5636C9.25396 17.5636 8.65303 17.1016 8.41951 16.4601H11.5262C11.2927 17.1015 10.693 17.5636 9.97287 17.5636ZM4.60745 15.3282L5.71102 13.3853C5.76015 13.3017 5.78719 13.2034 5.78719 13.1051V7.84847C5.78719 5.93934 7.57648 3.80413 9.97287 3.80413C12.3692 3.80413 14.161 5.93934 14.161 7.84847V13.1051C14.161 13.2034 14.1868 13.3017 14.2347 13.3853L15.3395 15.3282H4.60745Z" fill="currentColor"/>
             </svg>
+            <div class="unread" v-if="UnreadTotal">{{UnreadTotal>99?'99+':UnreadTotal}}</div>
         </span>
     </el-popover>
 </template>
@@ -42,7 +43,8 @@ export default {
         return {
             activeName:'first',
             visible:false,
-            msgList:[]
+            msgList:[],
+            UnreadTotal:0
         };
     },
     watch:{
@@ -77,6 +79,7 @@ export default {
             }).then(res=>{
                 if(res.Ret!==200) return 
                 this.msgList = res.Data.List||[]
+                this.UnreadTotal = res.Data.UnreadTotal||0
             })
         }
     }
@@ -97,7 +100,7 @@ export default {
             border-bottom: 1px solid #E4E7ED;
             color:#333;
             &.IsRead{
-                color:gray;
+                color:#999;
             }
             .icon{
                 width:40px;
@@ -122,4 +125,22 @@ export default {
         box-sizing: border-box;
     }
 }
+.msg-btn{
+    cursor: pointer;
+    display: inline-block;
+    width: 50px;
+    text-align: center;
+    position: relative;
+    .unread{
+        position: absolute;
+        width:23px;
+        height:14px;
+        color:#fff;
+        background-color:#AD352F;
+        border-radius: 40px;
+        top:-4px;
+        right:4px;
+        font-size: 12px;
+    }
+}
 </style>