实现未读消息实时提醒

 

 

 

 

 

 

 

html部分：

<div class="bell-wrapper" style="position:relative;" @click="handleNotic">
       <img src="../../../assets/notice.png" style="width:24px;margin-bottom:-8px;">
       <span v-if="unreadMessageCount > 0" class="bell-circleRed" style="position:absolute;top:7px; left:14px;">
          <span class="bell-number">{{ unreadMessageCount }}</span>
        　<span v-else class="bell-circleGrey" style="position:absolute;top:7px; left:14px;">
            <span class="bell-number">{{ unreadMessageCount }}</span>
        </span>
 </div>

　

<script>
    import {
     unreadMessage // 查询消息未读数量
     } from '@/api/personalCenter' 
 
    export default {
        data() {
            return {
                timer: '',
                unreadMessageCount: 0 // 未读消息
            }
        },
       
        created() {
           this.getUnreadMessage()
         },
        mounted() {
           // 调用定时任务实时获取未读消息
           this.timer = setInterval(this.getUnreadMessage, 30000)
        },
         methods: {
    
             // 查询未读消息数量
            getUnreadMessage() {
                   unreadMessage().then((res) => {
                        if (res.data.code === '000') {
                              this.unreadMessageCount = res.data.content
                                  console.log(res)
                          }
                      }).catch((err) => {
                              console.log(err)
                       })
             },
            handleNotic() {
                  this.$router.push('/personalCenterManagement/information')
            }
         }
    }                     

　　css部分：

.bell-circleGrey {
          border-radius: 50%;
          height: 16px;
          width: 16px;
          display: inline-block;
          background: #c3bebe;
          vertical-align: top;
      }
      .bell-circleRed {
          border-radius: 50%;
          height: 16px;
          width: 16px;
          display: inline-block;
          background: red;
          vertical-align: top;
        }
        .bell-number {
          display: block;
          color: #FFFFFF;
          height: 16px;
          line-height: 16px;
          text-align: center;
          font-size:6px;
        }