#96229

src/layout/components/header.vue

@@ -17,7 +17,8 @@
       <!-- <a-icon type="search" /> -->
     </div>
     <div class="news-container">
-      <a-badge @click="openNotice">
+      <a-badge @click="openNotice"
+               :dot="getUnReadNoticeLength().length > 0">
         <svg class="icon svg-icon"
              aria-hidden="true">
           <use xlink:href="#icon-xiaoxi"></use>
@@ -53,6 +54,7 @@ import { getUserName } from '@/services/bus/user';
 import { logout } from '@/services/bus/login';
 import APP from '@/services';
 import Router from '@/router';
+import { handleNotice } from '@/views/setting/notice/setup';
 
 // 设置
 const setFn = () => {
@@ -100,9 +102,11 @@ export default defineComponent({
     },
     setup() {
         const { openAction: openNotice } = openModal('notice');
+        const { getUnReadNoticeLength } = handleNotice();
         return {
             openNotice,
             getUserName,
+            getUnReadNoticeLength,
             ...setFn(),
             ...onSearch(),
         };

src/views/setting/notice/components/noticeContent.vue

@@ -32,8 +32,9 @@
 import { defineComponent, PropType, reactive, computed } from 'vue';
 import { QueryNoticeRsp } from '@/services/go/commonService/interface';
 import { mergeObj } from '@/utils/objHandle';
+import { handleNotice } from '../setup';
 
-function chooseNotice() {
+function chooseNotice(fn: Function) {
     interface ItemNotice {
         title: string;
         content: string; //内容
@@ -45,6 +46,7 @@ function chooseNotice() {
         createtime: '',
     });
     function choose(item: QueryNoticeRsp) {
+        fn(item);
         mergeObj(chooseItemNotice, item);
     }
     return { chooseItemNotice, choose };
@@ -59,7 +61,9 @@ export default defineComponent({
         },
     },
     setup(props) {
-        const { chooseItemNotice, choose } = chooseNotice();
+        // 公告消息
+        const { readNotice } = handleNotice();
+        const { chooseItemNotice, choose } = chooseNotice(readNotice);
         computed(() => {
             props.noticeList.length && mergeObj(chooseItemNotice, props.noticeList[0]);
         });

src/views/setting/notice/index.vue

@@ -10,21 +10,21 @@
         <template #tab>
           <span>
             公告
-            <a-badge count="25"
+            <a-badge :count="getUnReadNoticeByType([1])"
                      :number-style="{ backgroundColor: '#FF9000' }" />
           </span>
         </template>
-        <NoticeContent :noticeList="noticeList" />
+        <NoticeContent :noticeList="getNoticeByType([1])" />
       </a-tab-pane>
       <a-tab-pane key="2">
         <template #tab>
           <span>
             系统消息
-            <a-badge count="25"
+            <a-badge :count="getUnReadNoticeByType([2])"
                      :number-style="{ backgroundColor: '#FF9000' }" />
           </span>
         </template>
-        <NoticeContent />
+        <NoticeContent :noticeList="getNoticeByType([2])" />
       </a-tab-pane>
     </a-tabs>
   </a-modal>
@@ -35,8 +35,7 @@ import { defineComponent, ref } from 'vue';
 import { closeModal } from '@/common/setup/modal/index';
 import NoticeContent from './components/noticeContent.vue';
 import { initData } from '@/common/methods';
-import { queryNotice } from '@/services/go/commonService/index';
-import { QueryNoticeRsp } from '@/services/go/commonService/interface';
+import { handleNotice } from './setup';
 
 export default defineComponent({
     name: 'notice',
@@ -46,17 +45,18 @@ export default defineComponent({
     setup() {
         const { visible, cancel } = closeModal('notice');
         // 公告消息
-        const noticeList = ref<QueryNoticeRsp[]>([]);
+        const { noticeList, queryNoticeAction, getNoticeByType, updateNotice, getUnReadNoticeByType } = handleNotice();
 
         initData(() => {
-            queryNotice().then((res) => {
-                noticeList.value = res.filter((e) => e.msgtype === 1);
-            });
+            queryNoticeAction();
+            updateNotice();
         });
         return {
             visible,
             cancel,
             noticeList,
+            getNoticeByType,
+            getUnReadNoticeByType,
             activeKey: ref('1'),
         };
     },

src/views/setting/notice/setup.ts

@@ -0,0 +1,42 @@
+import { queryNotice, queryNoticeReaded } from "@/services/go/commonService";
+import { QueryNoticeRsp } from '@/services/go/commonService/interface';
+import timerUtil from '@/utils/timer/timerUtil';
+import { ref } from "vue";
+
+// 消息
+const noticeList = ref<QueryNoticeRsp[]>([]);
+
+export function handleNotice() {
+    // 查询通知数据
+    function queryNoticeAction() {
+        queryNotice().then((res) => {
+            noticeList.value = res;
+        });
+    }
+    // 查询通知数据
+    function getNoticeByType(type: number[]): QueryNoticeRsp[] {
+        //消息类型 - 1:公告通知 2:系统消息 3:商品到期提货通知
+        return noticeList.value.filter((e: QueryNoticeRsp) => type.includes(e.msgtype));
+    }
+    // 获取具体某个类型未读通知的个数
+    function getUnReadNoticeByType(type: number[]): number {
+        return getNoticeByType(type).filter(e => !e.readed).length
+    }
+    // 设置已读消息
+    function readNotice({ readed, autoid }: QueryNoticeRsp) {
+        if (!readed) {
+            queryNoticeReaded(autoid).then(() => {
+                queryNoticeAction()
+            });
+        }
+    }
+    // 更新通知，通知没有推送，所有需要轮询
+    function updateNotice() {
+        timerUtil.setInterval(queryNoticeAction, 1 * 60 * 1000, 'pollingNotice')
+    }
+    // 获取未读通知的消息的个数
+    function getUnReadNoticeLength() {
+        return noticeList.value.filter(e => !e.readed).length
+    }
+    return { noticeList, queryNoticeAction, getNoticeByType, readNotice, updateNotice, getUnReadNoticeLength, getUnReadNoticeByType }
+}