【Vue】未读消息标记功能

页面展示的效果如图，需要定时更新未读消息

首先是后台的接口，查询未处理的消息数量

因为是七张消息表，数据我需要合在一起返回给前台：

这里使用UNION连接各个表

SELECT COUNT(*) AS `UNREAD_MSG`, 'CLEAN_MSG' AS `MSG_TYPE` FROM aisw_e_service_clean_msg WHERE MERCHANT_ID = #{merchantId} AND `ACCEPT_STATUS` = 0
UNION ALL
SELECT COUNT(*) AS `UNREAD_MSG`, 'DELIVERY_MSG' FROM aisw_e_service_delivery_msg WHERE MERCHANT_ID = #{merchantId} AND `ACCEPT_STATUS` = 0
UNION ALL
SELECT COUNT(*) AS `UNREAD_MSG`, 'FAULT_MSG' FROM aisw_e_service_fault_msg WHERE MERCHANT_ID = #{merchantId} AND `ACCEPT_STATUS` = 0
UNION ALL
SELECT COUNT(*) AS `UNREAD_MSG`, 'INVOICE_MSG' FROM aisw_e_service_invoice_msg WHERE MERCHANT_ID = #{merchantId} AND `ACCEPT_STATUS` = 0
UNION ALL
SELECT COUNT(*) AS `UNREAD_MSG`, 'ONE_CHECKOUT_MSG' FROM aisw_e_service_one_checkout_msg WHERE MERCHANT_ID = #{merchantId} AND `ACCEPT_STATUS` = 0
UNION ALL
SELECT COUNT(*) AS `UNREAD_MSG`, 'RENEWAL_MSG' FROM aisw_e_service_renewal_msg WHERE MERCHANT_ID = #{merchantId} AND `ACCEPT_STATUS` = 0
UNION ALL
SELECT COUNT(*) AS `UNREAD_MSG`, 'WAKE_MSG' FROM aisw_e_service_wake_msg WHERE MERCHANT_ID = #{merchantId} AND `ACCEPT_STATUS` = 0

结果集的样子：

+------------+------------------+
| UNREAD_MSG | MSG_TYPE         |
+------------+------------------+
|          9 | CLEAN_MSG        |
|          4 | DELIVERY_MSG     |
|          2 | FAULT_MSG        |
|          7 | INVOICE_MSG      |
|          8 | ONE_CHECKOUT_MSG |
|          6 | RENEWAL_MSG      |
|          2 | WAKE_MSG         |
+------------+------------------+
7 rows in set (0.03 sec)

丢给前台的JSON：

{
    "code": 200,
    "data": [
        {
            "UNREAD_MSG": 8,
            "MSG_TYPE": "CLEAN_MSG"
        },
        {
            "UNREAD_MSG": 5,
            "MSG_TYPE": "DELIVERY_MSG"
        },
        {
            "UNREAD_MSG": 1,
            "MSG_TYPE": "FAULT_MSG"
        },
        {
            "UNREAD_MSG": 1,
            "MSG_TYPE": "INVOICE_MSG"
        },
        {
            "UNREAD_MSG": 8,
            "MSG_TYPE": "ONE_CHECKOUT_MSG"
        },
        {
            "UNREAD_MSG": 11,
            "MSG_TYPE": "RENEWAL_MSG"
        },
        {
            "UNREAD_MSG": 2,
            "MSG_TYPE": "WAKE_MSG"
        }
    ],
    "message": "操作成功！",
    "status": "success"
}

前台封装的API接口：

/**
 * 获取未受理的消息数量
 */
export function getTagUnreads() {
  return requestDefault({
    url: '/sys/room/message/unreads',
    method: 'get',
  })
}

文件位置：

E:\nsp.asw\code\ehotel-web\src\api\roomService\serviceMessage.js

组件引入接口对象：

import { getTagUnreads } from '../../api/roomService/serviceMessage.js'

封装一个定时函数：

  methods: {
    freshData() {
      return setInterval(() => {
        getTagUnreads()
        .then(res => {
          if (res.code === 200 && res.status === 'success') {
            this.tags = res.data
          }
        })
      }, 1000 * 5)
    },
  }

data属性存储一个timer引用：

  data() {
    return {
      activeName: 'extension',
      tags: [],
      timer: null,
    }
  },

然后可以在Vue几个生命周期函数中调用

- Beforecreate() 实例创建之前

- Created() 实例创建后

- Mounted() 数据挂载后

在实例被销毁的时候，顺带把定时任务也释放

运行的时候我发现页面很慢加载出来，原因是因为定时设定了5秒后执行

我用了v-if动态渲染，如果初始数据没有就不加载了。。。（这个原因找了半天）

所以在执行之前初始化的时候就调用一次接口拿数据过来

之后在设置延迟获取

  created() {
    getTagUnreads()
    .then(res => {
      if (res.code === 200 && res.status === 'success') {
        this.tags = res.data
      }
    })

    if (this.timer) clearInterval(this.timer)
    else setTimeout(() => {this.timer = this.freshData()}, 3000)

  },
  destroyed() {
    clearInterval(this.timer)
  }

然后各个标签获取需要翻译：

这里封装一个取数据的方法

    getCount(key) {
      return this.tags.find(x => x.MSG_TYPE === key)['UNREAD_MSG']
    }

渲染的时候判断消息数量是否大于0，等于0的情况就不要渲染消息标记出来

      <el-tab-pane label="故障报修申请" name="fault">
        <span class="badge-container" slot="label">
          故障报修申请
          <span  v-if="getCount('FAULT_MSG') > 0" class="tag">
            {{getCount('FAULT_MSG')}}
          </span>
        </span>
        <fault-list ref="fault" />
      </el-tab-pane>