消息新增分页

client/src/action/OtherAction.js

@@ -5,7 +5,9 @@ export default class OtherAction extends BaseACTION {
   /* 获取我的消息信息 */
   getMyMsg (obj) {
     return Other.getMyMsg(obj).then(res => {
-      const json = res.map(function (_, i) {
+      const json = {
+        count: res.count,
+        list: res.list.map(function (_, i) {
           return {
             isRead: false,
             id: _.id,
@@ -14,6 +16,7 @@ export default class OtherAction extends BaseACTION {
             isShow: _.status // 该字段用来做 每条信息的打开、关闭
           }
         })
+      }
       return json
     })
   }

client/src/pages/other/message.vue

@@ -18,13 +18,13 @@
         </template>
       </el-collapse>
       <div style="height: 0.3rem;"></div>
-      <!-- <el-pagination
+      <el-pagination
         :current-page.sync="page.currentPage"
-        :page-size="page.size"
+        :page-size="page.limit"
         layout="total, prev, pager, next, jumper"
         :total="page.total"
         @current-change="handleCurrentChange"
-      ></el-pagination> -->
+      ></el-pagination>
     </div>
   </div>
 </template>
@@ -37,12 +37,13 @@ export default {
   data () {
     return {
       activeNames: ['1'],
-      msgList: []
-      // page: {
-      //   total: 0,
-      //   currentPage: 1,
-      //   size: 10
-      // }
+      msgList: [],
+      page: {
+        offset: 0,
+        total: 0,
+        currentPage: 1,
+        limit: 10
+      }
     }
   },
   mounted () {
@@ -60,9 +61,18 @@ export default {
       }
     },
     getData () {
-      cAction.Other.getMyMsg().then(json => {
-        this.msgList = json
+      const pageParam = {
+        offset: this.page.offset,
+        limit: this.page.limit
+      }
+      cAction.Other.getMyMsg(pageParam).then(json => {
+        this.msgList = json.list
+        this.page.total = parseInt(json.count)
       }).catch(e => { this.$message.error(e.message) }).finally(() => { })
+    },
+    handleCurrentChange() {
+      this.page.offset = (this.page.currentPage - 1) * this.page.limit
+      this.getData()
     }
   }
 }