修复细节

components/pc/alertsMessage/alertsCard.vue

@@ -3,8 +3,8 @@
     <div class="alerts-card">
       <div class="alerts-card__header">
         <div class="header-title">消息通知</div>
-        <div class="header-read"  @click="handleRead" v-if="flag !== 4">全部标记已读</div>
-        <div class="header-delete" @click="handleClick" v-if="flag === 4">全部清空</div>
+<!--        <div class="header-read"  @click="handleRead" v-if="flag !== 4">全部标记已读</div>-->
+<!--        <div class="header-delete" @click="handleClick" v-if="flag === 4">全部清空</div>-->
       </div>
       <div class="alerts-card__content">
         <p v-if="message.length === 0">暂无消息</p>
@@ -17,7 +17,7 @@
       </div>
 
       <div class="alerts-card__footer">
-        <nuxt-link to="/personal-center/message">查看全部 （ {{ unread }} ） </nuxt-link>
+        <nuxt-link to="/personal-center/message">查看全部 （ {{ totalRecords }} ） </nuxt-link>
       </div>
     </div>
   </div>
@@ -37,24 +37,12 @@ export default {
       message:[],
       isShow: true,
       reload: true,
-      flag: 0
+      flag: 0,
+      totalRecords:0
     }
   },
   created(){
-    this.$axios.$get(config.api.get.Message.list,{params:{page:1,
-        size:4
-      }}).then((response)=>{
-     /* console.log(response);
-      let message1 = [];
-      response.data.dataList.forEach(item => {
-        message1.push({
-          content: item.mscContent,
-          status: item.status
-        })
-      });
-      console.log(message1);*/
-      this.message=response.data.dataList
-    });
+    this.dataGetMessages();
 
   },
   computed: {
@@ -65,6 +53,19 @@ export default {
   },
   methods:{
 
+    dataGetMessages() {
+      this.$axios.$get(config.api.get.Message.list, {
+        params: {
+          page: 1,
+          size: 4
+        }
+      }).then((response) => {
+        this.message = response.data.dataList;
+        this.totalRecords = response.data.totalRecords;
+      });
+
+    },
+
 
     handleRead(){
       this.$axios.$put(config.api.put.Message.readAll).then((response)=>{

components/pc/alertsMessage/alertsContent.vue

 <template>
-  <div>
-    <p
+  <div class="wrap">
+    <nuxt-link to="/personal-center/message" tag="p" v-html="info.mscContent"
       @click="handleRead"
       :style="{color: fontColor}"
-    >{{info.mscContent}}</p>
+    ></nuxt-link>
   </div>
 </template>
 
@@ -36,13 +36,24 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+  .wrap{
+    box-sizing: border-box;
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+  a{
+    color: #00AAE6 !important;
+
+  }
 p{
+  box-sizing: border-box;
   margin: 0 16*$length;
   border-bottom:1px dashed #EFEFEF;
   @extend %animate-transition;
   @extend %cursorPointer;
   @include fontStyle(12,43,500,#333,left);
   @extend %nowrap;
+
   &:hover{
     color: #00AAE6 !important;
   }

components/pc/noticeCard2.vue

@@ -20,7 +20,7 @@
 
 
             <p v-if="status===0" class="unread" @click="dataPutRead">标记已读</p>
-            <p v-if="status===1"  class="read">标记已读</p>
+            <p v-if="status===1"  class="read">消息已读</p>
           </div>
         </div>
       </div>
@@ -42,7 +42,7 @@
         createTime:'2020-1-1',
         mscContent:'manmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanman',
         userId:'',
-        status:0,
+        status:1,
         messageId:'',
         showCard:true,
       }
@@ -68,7 +68,7 @@
         this.createTime = info.createTime;
         this.mscContent = info.mscContent;
         this.userId = info.userId;
-        // this.status = info.status;
+        this.status = info.status;
         this.messageId = info.messageId;
       },
 
@@ -79,7 +79,7 @@
               type: 'success',
               message: '已标记已读'
             });
-            this.status = 1
+            this.status = 0
           } else {
             this.$message({
               type: 'warning',

pages/personal-center/message.vue

@@ -46,6 +46,8 @@
 
       <notice-card v-for="(val,index) in message" :key="val.messageId" :info="val"></notice-card>
       <empty-card v-if="message.length===0" height="556px"></empty-card>
+      <pagination style="margin: 0 auto;padding:20px 0;" :pages="pages" v-on:listenPageChange="changePage"></pagination>
+
 
     </div>
   </div>
@@ -58,6 +60,7 @@
   import NavWrap from "../../components/pc/nav/navWrap";
   import config from "../../action/config";
   import EmptyCard from "../../components/pc/emptyCard";
+  import Pagination from '../../components/pc/pagination';
 
 
   export default {
@@ -72,28 +75,31 @@
         ],
         selected: '全部',
         message:[],
+        pages:1
 
       }
     },
     components: {
 
-      NoticeCard, NavWrap,EmptyCard
+      NoticeCard, NavWrap,EmptyCard,Pagination
 
 
     },
     created() {
-      this.dataGetMessages()
+
     },
 
     methods: {
-      dataGetMessages() {
+      dataGetMessages(currentPage) {
         this.$axios.$get(config.api.get.Message.list, {
           params: {
-            page: 1,
-            size: 7
+            page: currentPage,
+            size: 10
           }
         }).then((response) => {
           this.message = response.data.dataList;
+          this.pages = response.data.totalPage;
+
         });
 
       },
@@ -117,16 +123,9 @@
 
 
 
-      mounted() {
-        // this.$popupbox();
-
-        // message 使用方法
-
-        // this.$message({
-        //   message:'hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello',
-        //   type:'info'
-        // })
-
+      changePage(currentPage){
+        //返回页数 请求新的数据
+        this.dataGetMessages(currentPage)
       }
     }
   }