消息中心

src/views/system/user/messageCenter/index.vue

@@ -21,8 +21,7 @@
           />
         </el-select>
       </div>
-      <div v-loading="loading" class="message-center-list">
-        <div v-if="hasMore && loading===false" class="more-btn" @click="loadMore"><i class="iconfont icon-jiazaigengduo" />点击加载更多</div>
+      <div v-loading="loading" class="message-center-list" @scroll="listenScroll">
         <div v-for="(item,index) in items" :key="index" class="message-item" @click="handleDetail(item)">
           <div class="message-date">{{ item.createTime | parseTime }}</div>
           <div class="message-cont">
@@ -38,7 +37,10 @@
             <div class="message-more">查看详情<i class="iconfont icon-chakan" /></div>
           </div>
         </div>
-        <el-empty v-if="items.length === 0 && loading===false" :image-size="200" />
+
+        <el-empty v-if="items.length === 0 && loading === false" :image-size="200" />
+        <div v-else-if="!hasNextPage && loading === false" class="more-btn no-data">暂无更多数据</div>
+        <div v-else class="more-btn"><i class="iconfont icon-jiazaigengduo" />加载中...</div>
 
         <el-dialog :visible.sync="messageVisible" :modal-append-to-body="false" :close-on-click-modal="false" append-to-body title="消息详情" @closed="closeDialog">
           <div class="setting-dialog">
@@ -73,7 +75,6 @@ export default {
   components: { DateRangePicker, detail },
   data() {
     return {
-      selections: [],
       blurryTime: [],
       search: null,
       unread: null,
@@ -97,62 +98,93 @@ export default {
       messageVisible: false,
       detailInfo: {},
       currentMessage: null,
-      hasMore: true // 是否还有更多数据
+      hasMore: true, // 是否还有更多数据
+      hasNextPage: false
     }
   },
   created() {
-    this.loadData()
+    this.getListMessage()
   },
   methods: {
     handleClick(index) {
       this.listIndex = index
+      if (index === 0) {
+        this.blurryTime = []
+        this.search = null
+        this.unread = null
+        this.getListMessage()
+      }
       this.getIndex()
     },
     handleSearch() {
       this.page.page = 0
       this.page.totalPages = 0
       this.items = []
-      this.loadData()
+      this.getListMessage()
     },
     getListMessage() {
+      this.loading = true
       const params = {
         'search': this.search,
         'page': this.page.page,
         'size': this.page.size,
         'unread': this.unread,
-        'startTime': this.blurryTime[0],
-        'endTime': this.blurryTime[1]
+        'startTime': this.blurryTime && this.blurryTime[0],
+        'endTime': this.blurryTime && this.blurryTime[1]
       }
       FetchMySystemNotice(params).then(res => {
         const listData = res.content
         if (listData.length === 0) {
-          this.loading = false
+          this.hasNextPage = false
         } else {
-          this.loading = true
+          this.hasNextPage = true
         }
         this.page.total = res.totalElements
         this.page.totalPages = res.totalPages
-        this.items = [...listData, ...this.items]
-        if (this.page.page >= this.page.totalPages) {
-          this.hasMore = false
-        } else {
-          this.hasMore = true
-        }
-        this.loading = false
+
+        // this.items = [...listData, ...this.items]
+        this.items = this.items.concat(listData)
+
+        console.log('this.page.page', this.page.page)
+        console.log('this.page.totalPages', this.page.totalPages - 1)
+        console.log('this.page.total', this.page.total)
+        console.log('this.items', this.items.length)
+
+        setTimeout(() => {
+          this.loading = false
+        }, 1000)
       })
     },
-    loadData() {
-      this.loading = true
-      setTimeout(() => {
-        this.getListMessage()
-        this.page.page++
-      }, 1000)
+    // loadData() {
+    //   this.loading = true
+    //   setTimeout(() => {
+    //     this.getListMessage()
+    //     this.page.page++
+    //   }, 1000)
+    // },
+    // loadMore() {
+    //   if (this.loading) {
+    //     return
+    //   }
+    //   this.loadData()
+    // },
+    // 监听滚动
+    listenScroll(e) {
+      const ele = e.srcElement ? e.srcElement : e.target
+      if (ele.scrollTop + ele.offsetHeight > ele.scrollHeight - 100) { // 监听滚动到div底部
+        this.addMoreData()
+      }
     },
-    loadMore() {
-      if (this.loading) {
-        return
+    // 加载更多
+    addMoreData() {
+      if (this.hasNextPage) {
+        this.page.page++
+        if (this.page.page >= this.page.totalPages) {
+          this.hasNextPage = false
+        } else {
+          this.getListMessage()
+        }
       }
-      this.loadData()
     },
     handleDetail(item) {
       this.currentMessage = this.items.find(i => i.noticeId === item.noticeId)
@@ -200,7 +232,10 @@ export default {
       // }
       // const list = []
       // const allList = await this.getAllNoRead(params, list)
-      FetchReadedAll({ 'newsType': 0 }).then(res => {
+      const params = {
+        'newsType': 1
+      }
+      FetchReadedAll(params).then(res => {
         console.log(res)
         if (res) {
           this.items.forEach(item => {
@@ -267,7 +302,7 @@ export default {
   overflow: hidden;
   overflow-y: scroll;
   .more-btn{
-    margin-bottom: 30px;
+    // margin-bottom: 30px;
     line-height: 30px;
     font-size: 14px;
     text-align: center;
@@ -276,6 +311,9 @@ export default {
     i{
       display: inline-block;
     }
+    &.no-data{
+      color: #a6adb6;
+    }
   }
   .message-item{
     font-size: 14px;