fix:消息提醒

.env.development

@@ -5,7 +5,7 @@ VITE_APP_TITLE = 掌柜运营平台
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
 # VITE_APP_API_BASEURL = https://test.baoxianzhanggui.com/web-api #默认地址
 # VITE_APP_API_BASEURL = http://192.168.0.253:8001  #田智
-VITE_APP_API_BASEURL = http://192.168.0.253:8001  #董鑫
+VITE_APP_API_BASEURL = http://192.168.0.55:8001  #董鑫
 # VITE_APP_API_BASEURL = http://192.168.0.106:8001  #屈晨
 # VITE_APP_API_BASEURL = http://192.168.0.59:8001  #徐强
 

src/api/modules/content.ts

@@ -18,10 +18,20 @@ const contentApi = (axiosInstance: ApiInstance) => ({
   //删除消息通知
   noticeDelete: (data: contentData) => axiosInstance.delete('/msssageNotice/noticeDelete?ids='+data,),
 
-  //通知人员分页列表
-  
+  //通知消息人员分页列表
   contentUserList: (data: contentData) => axiosInstance.post('/msssageNotice/userList', data, {}),
 
+  //消息列表
+  messageList: (data: contentData) => axiosInstance.post('/message/messageList', data, {}),
+
+  // 消息数量
+  noticeCount: (params: contentData) => axiosInstance.get('/message/getMessageCount', {params}),
+
+  // 阅读消息
+  readMessage: (data: contentData) => axiosInstance.post('/message/readEdit', data, {}),
+
+  
+  
 })
 
 export default contentApi

src/layouts/components/Topbar/Toolbar/rightSide.vue

@@ -2,11 +2,12 @@
 import useSettingsStore from '@/store/modules/settings'
 import useUserStore from '@/store/modules/user'
 import eventBus from '@/utils/eventBus'
-import ColorScheme from './ColorScheme/index.vue'
-import Fullscreen from './Fullscreen/index.vue'
-import NavSearch from './NavSearch/index.vue'
-import PageReload from './PageReload/index.vue'
-
+// import ColorScheme from './ColorScheme/index.vue'
+// import Fullscreen from './Fullscreen/index.vue'
+// import NavSearch from './NavSearch/index.vue'
+// import PageReload from './PageReload/index.vue'
+import {Bell} from "@element-plus/icons-vue"
+import {useRouter} from "vue-router"
 defineOptions({
   name: 'Tools',
 })
@@ -26,10 +27,13 @@ watch(() => userStore.avatar, () => {
 
 <template>
   <div class="flex items-center">
-    <NavSearch v-if="settingsStore.settings.toolbar.navSearch" />
-    <Fullscreen v-if="settingsStore.settings.toolbar.fullscreen" />
-    <PageReload v-if="settingsStore.settings.toolbar.pageReload" />
-    <ColorScheme v-if="settingsStore.settings.toolbar.colorScheme" />
+    <el-icon @click="router.push({
+      path:'/content/notice',
+    })"><Bell /></el-icon>
+    <!-- <NavSearch v-if="settingsStore.settings.toolbar.navSearch" /> -->
+    <!-- <Fullscreen v-if="settingsStore.settings.toolbar.fullscreen" /> -->
+    <!-- <PageReload v-if="settingsStore.settings.toolbar.pageReload" /> -->
+    <!-- <ColorScheme v-if="settingsStore.settings.toolbar.colorScheme" /> -->
     <HDropdownMenu
       :items="[
         [

src/router/modules/content.ts

@@ -32,6 +32,17 @@ const routes: RouteRecordRaw = {
         
       ]
     },
+    {
+      path: 'notice',
+      name: 'contentNotice',
+      component: () => import('@/views/contentManagement/notice.vue'),
+      meta: {
+        title: '消息提醒',
+        menu:false
+      },
+      
+      
+    },
     
     
    

src/views/contentManagement/notice.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="notice-main">
+    <div class="list">
+      <div :class="type==0 ?'on':''" @click="tabChange(0)">
+        <el-badge :value="countObj[0]" class="item" > 增员消息 </el-badge>
+      </div>
+      <div :class="type==1 ?'on':''" @click="tabChange(1)">
+        <el-badge :value="countObj[1]" class="item" > 待我审批 </el-badge>
+      </div>
+    </div>
+    <div class="message">
+      <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
+        <li
+          v-for="item in messageList"
+          :key="item.id"
+          class="infinite-list-item"
+          @click="readMessage(item)"
+        >
+          <p>
+            <span>{{ item.createTime.split(" ")[1] }}</span>
+            <b>{{ item.title }}</b>
+          </p>
+          <p :class="item.isRead == 1 ? 'onRead' : 'notRead'">
+            <span>{{ item.createTime.split(" ")[0] }}</span>
+            <b>{{ item.content }}</b>
+          </p>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
+import api from "@/api";
+import { ElMessage } from "element-plus";
+
+onMounted(() => {
+  getMessageList();
+  getCount();
+});
+const pageInfo = reactive({
+  pageSize: 10,
+  pageNum: 1,
+});
+const load = () => {
+  // count.value += 2
+  pageInfo.pageSize += 10;
+  getMessageList();
+};
+//消息tab切换
+
+
+
+//获取消息列表
+interface Message {
+  [key: string]: any;
+}
+const type=ref(0)
+
+
+function tabChange(num:number){
+  type.value=num
+  getMessageList();
+}
+
+const messageList = ref<Message>([]);
+function getMessageList() {
+  api.contentApi
+    .messageList({
+      type: type.value,
+      pages: pageInfo.pageNum,
+      size: pageInfo.pageSize,
+    })
+    .then((res: any) => {
+      if (res.code === 200) {
+        messageList.value = res.data.records;
+      }
+    });
+}
+//统计消息数量
+interface Count {
+  [key: string]: any;
+}
+const countObj = ref<Count>({});
+function getCount() {
+  api.contentApi.noticeCount({}).then((res: any) => {
+    // console.log(res)
+    if (res.code === 200) {
+      countObj.value = res.data;
+    }
+  });
+}
+//阅读消息
+function readMessage(item: any) {
+  api.contentApi
+    .readMessage({
+      id: item.id,
+    })
+    .then((res: any) => {
+      if (res.code === 200) {
+        ElMessage.success(res.msg);
+        getMessageList();
+      }
+    });
+}
+</script>
+<style lang="scss" scoped>
+.notice-main {
+  display: flex;
+  min-height: 740px;
+  // background: #fff;
+  padding: 15px;
+  box-sizing: border;
+  > div {
+    flex: none;
+    background: #fff;
+    min-height: 800px;
+  }
+  > div.list {
+    width: 15%;
+    border-right: 1px solid #ccc;
+    > div {
+      padding: 15px; 
+      box-sizing: border-box;
+      cursor: pointer;
+
+    }
+    .on{
+      background: #ccc;
+    }
+  }
+  > div.message {
+    flex: 1;
+  }
+}
+.infinite-list {
+  height: 800px;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+.infinite-list .infinite-list-item {
+  // display: flex;
+  align-items: center;
+  justify-content: center;
+  height: auto;
+  // background: var(--el-color-primary-light-9);
+  margin: 10px;
+  // color: var(--el-color-primary);
+  border-bottom: 1px solid #ccc;
+  p {
+    display: flex;
+    align-items: center;
+    > span {
+      display: flex;
+      width: 100px;
+      justify-content: flex-end;
+      color: #ccc;
+      font-size: 12px;
+    }
+    > b {
+      display: flex;
+      font-weight: normal;
+      padding-left: 50px;
+      box-sizing: border-box;
+    }
+  }
+  .onRead {
+    b {
+      color: #ccc;
+    }
+  }
+  .ontRead {
+    b {
+      color: #000;
+    }
+  }
+}
+.infinite-list .infinite-list-item + .list-item {
+  margin-top: 10px;
+}
+</style>