feat:新增通知功能 (#71)

src/components/header.vue

@@ -4,8 +4,13 @@
             <search class="search"></search>
             <div class="header-right">
                 <i class="iconfont icon-calendar-check-solid"></i>
-                <router-link to="/notification" style="text-decoration: none;">
-                    <div class="notifications-count"></div>
+                <router-link 
+                    v-if="isLogin"
+                    to="/notification" 
+                    style="text-decoration: none;"
+                    @click="hasNotification = false"
+                >
+                    <div class="notifications-count" v-if="hasNotification"></div>
                     <i class="iconfont icon-bell"></i>
                 </router-link>
                 <i class="iconfont icon-cog-solid"></i>
@@ -26,15 +31,37 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
+import { judgeHasLogin } from '@/utils/judge'
+import { getAllNotificationCount } from '@/utils/public' 
 import Search from '@/components/search.vue'
 import Avatar from '@/components/avatar.vue'
 import popup from '@/views/home/popup.vue'
 
+const isLogin = ref(false)
 const isPopup = ref(false)
+const hasNotification = ref(false)
+
+onMounted(() => {
+    isLogin.value = judgeHasLogin()
+    if (isLogin.value) {
+        timingGetNotificationCount()
+    }
+})
 
 const mouseoverPopup = () => { isPopup.value = true } 
 const mouseleavePopup = () => { isPopup.value = false }
+const timingGetNotificationCount = () => {
+    if (!hasNotification.value) {
+        getAllNotificationCount(() => {
+        }).then((res) => {
+            hasNotification.value = res
+            setTimeout(() => {
+                timingGetNotificationCount()
+            }, 30000)
+        })
+    }
+}
 </script>
 
 <style scoped lang="css">

src/utils/judge.ts

@@ -9,3 +9,12 @@ export const judgePassword = (password: string):boolean => {
     const objExp = new RegExp(expression)
     return objExp.test(password)
 }
+
+export const judgeHasLogin = () => {
+    if (localStorage.getItem('LongToken') || sessionStorage.getItem('LongToken')) {
+        return true
+    }
+    else {
+        return false
+    }
+}

src/utils/public.ts

@@ -0,0 +1,32 @@
+import { get } from './request'
+
+export const getAllNotificationCount = async(fn: () => void): Promise<boolean> => {
+    let total: number = 0
+    await get('/system/getNotificationCount')
+    .then((res: any) => {
+        total = res.total
+        fn()
+        console.log('total=', total);
+    })
+    return total > 0
+}
+export const getTypeNotificationCount = async(type: number, fn: () => {}): Promise<number> => {
+    let total: number = 0
+    const url = `/system/getNotificationCount?type=${type}`
+    await get(url)
+    .then((res: any) => {
+        total = res
+        fn()
+    })
+    return total
+}
+
+export const turnTime = (time: number) => {
+    const date = new Date(time); 
+    const year = date.getFullYear();
+    const month = (date.getMonth() + 1).toString().padStart(2, '0');  
+    const day = date.getDate().toString().padStart(2, '0');
+    const hours = date.getHours().toString().padStart(2, '0');
+    const minutes = date.getMinutes().toString().padStart(2, '0');
+    return `${year}-${month}-${day} ${hours}:${minutes}`;
+}

src/utils/request.ts

@@ -2,7 +2,6 @@ import axios, { AxiosError } from 'axios'
 import { useStore } from '@/store/index'
 import { ElMessage } from 'element-plus'
 import type { AxiosResponse, InternalAxiosRequestConfig } from 'axios'
-import { ref } from 'vue'
 import { errorMsg } from './message'
 
 interface myResponseType<T> extends AxiosResponse {

src/views/home/popup.vue

@@ -28,23 +28,15 @@ import { useStore } from '@/store/index'
 import { onMounted, ref } from 'vue'
 import { successMsg } from '@/utils/message';
 import { getUserDetail } from '../information/utils';
+import { judgeHasLogin } from '@/utils/judge';
 
 const store = useStore()
 const isLogin = ref(false)
 
 onMounted(() => {
-    judgeIsLogin()
+    isLogin.value = judgeHasLogin()
 })
 
-const judgeIsLogin = () => {
-    if (localStorage.getItem('LongToken') || sessionStorage.getItem('LongToken')) {
-        isLogin.value = true
-    }
-    else {
-        isLogin.value = false
-    }
-}
-
 const logout = () => {
     store.loginOut()
     isLogin.value = false