update

src/pinia/SystemStore/index.js

@@ -1,14 +1,53 @@
 import {defineStore} from "pinia";
 import {reactive, ref} from "vue";
+import Api from "../../api/index.js";
 
 export const useSystemStore = defineStore('SystemStore', () => {
     const accountManagementPo = reactive({
         pid: null,
     });
     const message = ref([]);
+    const messageCount = ref({
+        one: 0,
+        two: 0,
+    });
+
+    const getMessageCount = async () => {
+        const {data: {list}} = await Api.system.getMessageCenter({type: 2});
+        list.forEach(data => {
+            const now = message.value.find(v => v.id === data.id);
+            if (!now) message.value.push({...data, is_read: false});
+        })
+        const {data: {count}} = await Api.system.getChildrenCount();
+
+        messageCount.value.one = count;
+        messageCount.value.two = message.value.filter(v => !v.is_read).length;
+
+        // 生成角标
+        const tabbar = document.querySelectorAll('.uni-tabbar__item')[2].querySelector('.uni-tabbar__bd');
+        tabbar.style.position = 'relative';
+        const div = document.createElement('div');
+        div.style.position = 'absolute';
+        div.style.backgroundColor = 'red';
+        div.style.color = 'white';
+        div.style.width = '16px';
+        div.style.height = '16px';
+        div.style.borderRadius = '50%';
+        div.style.display = 'flex';
+        div.style.justifyContent = 'center';
+        div.style.alignItems = 'center';
+        div.style.fontSize = '12px';
+        div.style.right = '-12px';
+        div.style.top = '0';
+        div.innerText = messageCount.value.one + messageCount.value.two;
+        tabbar.appendChild(div);
+    }
+
     return {
         accountManagementPo,
         message,
+        messageCount,
+        getMessageCount,
     }
 }, {
     persist: {