fix:消息中心 初始构建，接口联调，样式修复

src/views/messageCenter/index.vue

@@ -11,8 +11,8 @@
     <div class="con">
       <van-tabs v-model="activeName" color="#247df7" title-inactive-colo="#d0d1d1" title-active-color="#000000" sticky
         offset-top="1.333333rem" @change="changeTab">
-        <van-tab title="消息提醒(14)" name="消息提醒">
-          <info-tip></info-tip>
+        <van-tab :title="`消息提醒(${dangerNewsNum})`" name="消息提醒">
+          <info-tip @getList="getBadgeNumber"></info-tip>
         </van-tab>
         <!-- <van-tab title="预警提醒" name="预警提醒" >
             <Warning></Warning>
@@ -20,8 +20,8 @@
         <!-- <van-tab title="SOS求救" name="SOS求救">
             <Iso></Iso>
         </van-tab> -->
-        <van-tab title="待办事项(20)" name="待办事项">
-          <wait-event></wait-event>
+        <van-tab :title="`待办事项(${messageNewsNum})`" name="待办事项">
+          <wait-event @getList="getBadgeNumber"></wait-event>
         </van-tab>
       </van-tabs>
     </div>
@@ -36,6 +36,9 @@ import infoTip from "./infoTip";
 import waitEvent from "./waitEvent";
 // import Warning from "./warning";
 // import Iso from "./iso";
+import {
+  badgeNumber,
+} from "@/service/message";
 import tabBar from "@/components/TabBar";
 export default {
   components: {
@@ -48,9 +51,12 @@ export default {
   data() {
     return {
       activeName: "消息提醒",
+      messageNewsNum:0,
+      dangerNewsNum:0,
     };
   },
   mounted() {
+    this.getBadgeNumber()
     // 判断路由跳转有没有带text
     if (this.$route.params.text) {
       this.activeName = this.$route.params.text;
@@ -87,6 +93,13 @@ export default {
       // 把点击的页卡名字纯到缓存中
       sessionStorage.setItem("infoActiveName", title);
     },
+    //获取未读消息数
+    getBadgeNumber() {
+      badgeNumber().then(res => {
+        this.messageNewsNum = res.data.待办事项;
+        this.dangerNewsNum= res.data.消息信息;
+      });
+    }
   }
 };
 </script>

src/views/messageCenter/infoTip/index.vue

 <template>
   <div>
+    <van-pull-refresh
+      v-model="isLoading"
+      success-text="刷新成功"
+      @refresh="onRefresh"
+    >
     <div class="message-wrap">
       <!-- 搜索 -->
       <div class="search-wrap">
@@ -46,7 +51,7 @@
             </van-badge>
             <van-overlay :show="showIndex == index">
               <div class="wrapper" @click.stop="closeOverlay">
-                <van-button round color="#4ABD85" @click="touchstart(item)">
+                <van-button round color="#4ABD85" @click="readme(item)">
                   详情
                 </van-button>
               </div>
@@ -60,6 +65,7 @@
       </van-list>
       </div>
     </div>
+    </van-pull-refresh>
   </div>
 </template>
 
@@ -77,6 +83,7 @@ export default {
   data() {
     return {
       searchVal: "",
+      isLoading: false,
       showIndex: null, // 是否显示遮罩层
       activeIndex: 0,
       activeVal: "全部",
@@ -105,7 +112,16 @@ export default {
   mounted() {
   },
   methods: {
-    // 搜索事件
+    //下拉刷新
+    onRefresh() {
+      setTimeout(() => {
+        this.$toast("刷新成功");
+        this.isLoading = false;
+        this.reset()
+        this.getList();
+        this.$emit('getList')
+      }, 1000);
+    },
     // 搜索事件
     onSearch:debounce(function(){
         this.messageList=[]
@@ -172,6 +188,17 @@ export default {
           this.$toast.fail('加载失败,请稍后再试');
         });
     },
+    readme(item){
+      let formData=new FormData()
+      formData.append('id',item.id)
+      postFun("messageInfo/changeRead", formData)
+                .then(res => {
+                  this.showIndex = null;
+                  this.$router.push({
+                    path: item.appUrl,
+                  });
+      })
+    },
     touchstart(index, item) {
       if (this.showIndex != null) {
         this.showIndex = null;

src/views/messageCenter/waitEvent/index.vue

 <template>
   <div>
+    <van-pull-refresh
+      v-model="isLoading"
+      success-text="刷新成功"
+      @refresh="onRefresh"
+    >
     <div class="message-wrap">
       <!-- 搜索 -->
       <div class="search-wrap">
         <van-search v-model="searchVal" placeholder="搜索" @input="onSearch" />
       </div>
+          <!-- 标签 -->
+          <div class="category-wrap">
+          <span
+            class="my-tag-style"
+            :class="index == activeIndex ? 'active' : ''"
+            v-for="(item, index) in messageCategory"
+            :key="item.key"
+            @click="clickCategory(index, item.category)"
+            >{{ item.category }}</span
+          >
+        </div>
       <!-- 内容列表 -->
       <div class="con-list" @touchmove="showIndex = null">
         <van-list
@@ -44,6 +60,7 @@
       </van-list>
       </div>
     </div>
+   </van-pull-refresh>
   </div>
 </template>
 
@@ -55,8 +72,24 @@ export default {
   data() {
     return {
       searchVal: "",
+      isLoading: false,
+      activeIndex: 0,
       showIndex: null, // 是否显示遮罩层
       messageList: [],
+      messageCategory: [
+        {
+          key: "0",
+          category: "待办",
+        },
+        {
+          key: "1",
+          category: "已办",
+        },
+        {
+          key: "2",
+          category: "全部",
+        },
+      ],
       loading: false, // 列表滚动到底部会触发load事件
       finished: false, // 列表数据全部加载完成
       pageSize: 10,
@@ -66,14 +99,38 @@ export default {
   mounted() {
   },
   methods: {
+    //下拉刷新
+    onRefresh() {
+      setTimeout(() => {
+        this.$toast("刷新成功");
+        this.isLoading = false;
+        this.reset()
+        this.getList();
+        // this.$parent.$parent.$parent.$parent.getBadgeNumber();
+        this.$emit('getList')
+      }, 1000);
+    },
     // 搜索事件
     onSearch:debounce(function(){
         this.messageList=[]
         this.pageNum=1
         this.finished = false
         this.loading = true
-        let formData = new FormData();
-        formData.append("keyword", this.searchVal);
+        if (this.activeIndex == 0) {
+          let formData = new FormData();
+          formData.append("status", 0);
+          formData.append("keyword", this.searchVal);
+          this.getList(formData);
+        } else if (this.activeIndex == 1) {
+          let formData = new FormData();
+          formData.append("status", 1);
+          formData.append("keyword", this.searchVal);
+          this.getList(formData);
+        } else if (this.activeIndex == 2) {
+          let formData = new FormData();
+          formData.append("keyword", this.searchVal);
+          this.getList(formData);
+        }
         this.getList(formData)
      },500),
     getList(Data) {
@@ -88,7 +145,15 @@ export default {
             pageNum:this.pageNum,
         }
       let formData
-      formData = new FormData();
+      if (this.activeIndex == 0) {
+        formData = new FormData();
+        formData.append("status", 0);     
+      } else if (this.activeIndex == 1) {
+        formData = new FormData();
+        formData.append("status", 1);
+      } else if (this.activeIndex == 2) {
+        formData = new FormData()
+      }
       if(this.searchVal){
         formData.append("keyword", this.searchVal);
       }
@@ -107,29 +172,32 @@ export default {
      
     },
     touchstart(index, item) {
-      console.log('%c [ item ]-104', 'font-size:13px; background:pink; color:#bf2c9f;', item)
-      if (this.showIndex != null) {
-        this.showIndex = null;
-        return;
-      }
-      if(item.appUrl){
-        this.$router.push({
-        name: item.appUrl,
-        // name: 'center',
-        params: {
-          id: item.pid,
-          mainId:item.mainId,
-          path:item.appUrl,
-          nodeId:item.nodeId,
-          theme:item.theme
-          }
-        // params: {
-        //   id: item.pid,
-        //   pageName:'noticeWait'
-        // },
+      let formData=new FormData()
+      formData.append('id',item.id)
+      postFun("messageInfo/changeRead", formData)
+                .then(res => {
+                  this.showIndex = null;
+                  this.$router.push({
+                    path: item.appUrl,
+                  });
       })
-      }
-      this.showIndex = index;
+      // if (this.showIndex != null) {
+      //   this.showIndex = null;
+      //   return;
+      // }
+      // if(item.appUrl){
+      //   this.$router.push({
+      //   name: item.appUrl,
+      //   params: {
+      //     id: item.pid,
+      //     mainId:item.mainId,
+      //     path:item.appUrl,
+      //     nodeId:item.nodeId,
+      //     theme:item.theme
+      //     }
+      // })
+      // }
+      // this.showIndex = index;
     },
     closeOverlay() {
       this.showIndex = null;
@@ -258,6 +326,19 @@ export default {
       //     break;
       // }
     },
+     // 点击类别
+    clickCategory(index, data) {
+      this.showIndex = null;
+      this.activeIndex = index;
+      this.reset()
+      this.getList()
+    },
+    reset(){
+        this.messageList=[]
+        this.pageNum=1
+        this.finished = false
+        this.loading = true
+    },
   }
 };
 </script>
@@ -269,6 +350,7 @@ export default {
   background-color: #f0f1f5;
   // 标签
   .category-wrap {
+    margin-bottom: 10px;
     .my-tag-style {
       width: 75px;
       height: 21px;
@@ -288,7 +370,7 @@ export default {
   }
   // 搜索
   .search-wrap {
-    margin: 10px 0;
+    margin: 0 0 10px 0;
     .van-search {
       border-radius: 5px;
       padding: 5px 12px;