【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>