营地2.0-修改

src/views/base/active/Active.vue

@@ -78,8 +78,9 @@
       </div>
     </div>
 
-    <div class="active-list" v-if="showActiveList.length>0">
-      <div class="active-list-item" v-for="(item, index) in showActiveList" :key="index"
+    <template v-if="activeList.length>0">
+      <div class="active-list">
+        <div class="active-list-item" v-for="(item, index) in activeList" :key="index"
              :style="animationTime(index)">
           <div class="inner">
             <div class="active-list-item-bg">
@@ -118,6 +119,18 @@
           </div>
         </div>
       </div>
+      <div class="pagination-area">
+        <el-pagination
+          background
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page.sync="queryForm.pageNum"
+          :page-size="queryForm.pageSize"
+          layout="total, prev, pager, next, jumper"
+          :total="total">
+        </el-pagination>
+      </div>
+    </template>
     <div class="active-list" v-else>
       <el-empty description="暂无数据" style="margin: 0 auto;"></el-empty>
     </div>
@@ -138,13 +151,16 @@
           isSupport: null,
           minDay: null,
           maxDay: null,
+          pageNum: 1,
+          pageSize: 32,
         },
+        total: 0,
         labelList: [],
         activeList: [],// 通过后台数据得到的所有数据
-        showActiveList: [],// 前端页面需要渲染的数据
-        pageSize: 8, //渲染数据的多少根据实际情况设置
-        baseSize: 8,// 渲染基础页数
-        totall: 0, //总数据量
+        // showActiveList: [],// 前端页面需要渲染的数据
+        // pageSize: 8, //渲染数据的多少根据实际情况设置
+        // baseSize: 8,// 渲染基础页数
+        // totall: 0, //总数据量
 
         statusList: [
           {
@@ -203,57 +219,70 @@
         }
       }
     },
-    mounted() {
-      window.addEventListener('scroll', this.dataScroll, true)
-    },
-    destroyed() {
-      window.removeEventListener('scroll', this.dataScroll, true)
-    },
+    // mounted() {
+    //   window.addEventListener('scroll', this.dataScroll, true)
+    // },
+    // destroyed() {
+    //   window.removeEventListener('scroll', this.dataScroll, true)
+    // },
     methods: {
+      // // 页面滚动获取数据
+      // scrollLoadData() {
+      //   //获取滚动条的高度
+      //   let scrollTop = document.documentElement.scrollTop;
+      //   // 获取视口高度
+      //   let windowHeight = window.innerHeight;
+      //   //获取页面内容总高度
+      //   let scrollHeight = document.querySelector('.active-container').scrollHeight;
+      //   // 滚动到指定位置 并且当前显示的数量小于总数
+      //   if ((scrollTop + windowHeight + 100 >= scrollHeight) && (this.pageSize < this.activeList.length)) {
+      //     this.pageSize += this.baseSize;
+      //     this.loadData()
+      //   }
+      // },
+      // // 页面滚动方法
+      // dataScroll() {
+      //   //防抖函数
+      //   this.debounce(this.scrollLoadData, 100)
+      // },
+      // // 处理列表渲染数据
+      // loadData() {
+      //   for (let i = (this.pageSize - this.baseSize); i < this.pageSize; i++) {
+      //     if (this.totall >= this.activeList.length) {
+      //       return false;
+      //     }
+      //     this.showActiveList.push(this.activeList[i]);
+      //     this.totall++;
+      //   }
+      // },
+
       // 卡片出现的动画时间
       animationTime(index) {
         let time = 0;
-        time = index - (this.pageSize / this.baseSize - 1) * this.baseSize + 1;
+        time = index + 1
+        // time = index - (this.pageSize / this.baseSize - 1) * this.baseSize + 1;
         return {
           '-webkit-animation-delay': time * 0.1 + 's',
           'imation-delay': time * 0.1 + 's',
         }
       },
-      // 页面滚动获取数据
-      scrollLoadData() {
-        //获取滚动条的高度
-        let scrollTop = document.documentElement.scrollTop;
-        // 获取视口高度
-        let windowHeight = window.innerHeight;
-        //获取页面内容总高度
-        let scrollHeight = document.querySelector('.active-container').scrollHeight;
-        // 滚动到指定位置 并且当前显示的数量小于总数
-        if ((scrollTop + windowHeight + 100 >= scrollHeight) && (this.pageSize < this.activeList.length)) {
-          this.pageSize += this.baseSize;
-          this.loadData()
-        }
-      },
-      // 页面滚动方法
-      dataScroll() {
-        //防抖函数
-        this.debounce(this.scrollLoadData, 100)
+      // 分页-改变每页数量
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val;
+        this.getList(true);
       },
-      // 处理列表渲染数据
-      loadData() {
-        for (let i = (this.pageSize - this.baseSize); i < this.pageSize; i++) {
-          if (this.totall >= this.activeList.length) {
-            return false;
-          }
-          this.showActiveList.push(this.activeList[i]);
-          this.totall++;
-        }
+      // 分页-改变页数
+      handleCurrentChange(val) {
+        this.queryForm.pageNum = val;
+        this.getList(true);
       },
       // 获取列表
-      getList() {
+      getList(type = false) {
         if (this.loading) {
           return false;
         }
         this.loading = true;
+        this.activeList = [];
         let queryForm = JSON.parse(JSON.stringify(this.queryForm));
         // 全选项 置空传值
         let flag = true;
@@ -272,8 +301,12 @@
             return this.$message.error(res.data.msg);
           }
           this.loading = false;
-          this.activeList = res.data.data;
-          this.loadData()
+          this.total = res.data.data.total;
+          this.activeList = res.data.data.list;
+          if (type) {
+            document.body.scrollIntoView(true);
+          }
+          // this.loadData()
         }).catch(err => {
           console.log(err)
           this.loading = false;
@@ -309,15 +342,18 @@
       },
       // 重置按钮
       resetHandle() {
-        this.pageSize = 8;
-        this.totall = 0;
-        this.showActiveList = [];
+        // this.pageSize = 8;
+        // this.totall = 0;
+        // this.showActiveList = [];
+        this.total = 0;
         this.queryForm = {
           ids: {},
           activityStatus: null,
           isSupport: null,
           minDay: null,
           maxDay: null,
+          pageNum: 1,
+          pageSize: 32,
         };
         for (let key in this.selectIds) {
           this.selectIds[key] = [];
@@ -502,5 +538,42 @@
     ::v-deep .el-loading-spinner {
       top: 200px !important;
     }
+
+    .pagination-area {
+      text-align: right;
+      padding: 20px 0 0;
+
+      ::v-deep .el-pagination {
+        .el-pager .number {
+          &:hover {
+            color: var(--all_color);
+          }
+
+          &.active {
+            color: #ffffff;
+            background-color: var(--all_color);
+          }
+        }
+
+
+        .el-input__inner {
+          &:focus {
+            border-color: var(--all_color);
+          }
+        }
+
+        .btn-prev,
+        .btn-next {
+          &:hover {
+            color: var(--all_color);
+          }
+
+          &:disabled {
+            color: #C0C4CC;
+          }
+        }
+      }
+
+    }
   }
 </style>