变更聊天示例页面添加未读消息提示

index.html

@@ -86,6 +86,7 @@
 </template>
 <template id="user">
     <div class="ui-itemUser" :class="{active:user.id==channel}" @click="change(user.id)">
+        <span class="ui-chatBadge">{{noReaderNum}}</span>
         <div class="ui-itemUser-avatar">
             <img :src="user.avatarUrl" alt="" class="img">
         </div>
@@ -164,6 +165,18 @@
                     str=_this.user.messages[_this.user.messages.length-1].text;
                 }
                 return str;
+            },
+            noReaderNum:function () {
+                var num=0;
+                var _this=this;
+                if(_this.user.messages&&_this.user.messages.length>0){
+                  _this.user.messages.forEach(function (item) {
+                    if(!item.isReader){
+                      num++;
+                    }
+                  })
+                }
+                return num;
             }
         },
         methods:{
@@ -281,6 +294,7 @@
                     user:user,
                     type:type,
                     text:text,
+                    isReader:false,
                     time:new Date().getTime()
                 };
                 this.users.forEach(function (item,index) {

static/css/thread.css

@@ -287,8 +287,21 @@ body{
 .ui-itemUser{
     padding: 10px 18px;
     border-bottom: 1px solid #4c4c4c;
+    position: relative;
     cursor: pointer;
 }
+.ui-chatBadge{
+    position: absolute;
+    background-color: #f56c6c;
+    border-radius: 10px;
+    color: #fff;
+    font-size: 12px;
+    line-height: 12px;
+    padding: 3px 6px;
+    text-align: center;
+    white-space: nowrap;
+    right: 10px;
+}
 .ui-itemUser.active,.ui-itemUser:hover{
     background: #3a3f45;
 }