2024-01-31

src/SManagement/archives_ad/components/list.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="list-box" v-if="fileData.length != 0">
+  <div class="list-box" v-pullElementLoad="pullElementLoad" v-if="fileData.length != 0">
     <div class="list" v-for="(item,index) in fileData" :key="index" @click="itemClick(item)">
       <div class="top">
-        <img :src="getCover(item)" alt="">
+        <el-image fit="contain" lazy :src="getCover(item)"></el-image>
       </div>
       <div class="bottom">
         <p class="title">{{item.title}}</p>
@@ -66,6 +66,10 @@ export default {
     itemClick (data) {
       this.$emit('listItemClick', data)
     },
+    pullElementLoad () {
+      console.log(1);
+      this.$emit('pullElementLoad')
+    }
     
   },
 };
@@ -80,6 +84,8 @@ export default {
   display: flex;
   flex-wrap: wrap;
   margin-bottom: 16px;
+  height:calc(100vh - 200px);
+  overflow-y: scroll;
 }
 .list-box .list {
   width: 168px;
@@ -95,6 +101,7 @@ export default {
   width: 100%;
   height: 120px;
   border-radius: 4px 4px 0px 0px;
+  overflow: hidden;
 }
 .list-box .list .top img {
   width: 100%;

src/SManagement/archives_ad/index.vue

@@ -8,12 +8,12 @@
         </span>
       </filterList>
       <!--素材列表-->
-      <list :fileData="fileData" @listItemClick="listItemClick" :isHandle="false"
+      <list @pullElementLoad="pullElementLoad" :fileData="fileData" @listItemClick="listItemClick" :isHandle="false"
         v-if="tool.checkAuth($route.name, 'read')">
       </list>
-      <pagination :total="total" :pageSize="params.content.pageSize" :currentPage="params.content.pageNumber"
+      <!-- <pagination :total="total" :pageSize="params.content.pageSize" :currentPage="params.content.pageNumber"
         @pageChange="pageChange">
-      </pagination>
+      </pagination> -->
       <detail ref="detail" v-if="currentFile" :currentSelectFile="currentFile"></detail>
     </div>
   </div>
@@ -38,7 +38,7 @@ export default {
         "method": "selectList",
         "content": {
           "pageNumber": 1,
-          "pageSize": 12,
+          "pageSize": 30,
           "nocache": true,
           "where": {
             "condition": "",
@@ -60,6 +60,7 @@ export default {
       //分类列表
       selectList: [],
       total: 0,
+      totalPage:0,
       //当前查看的素材
       currentFile: ''
     };
@@ -87,6 +88,7 @@ export default {
       if (init) this.params.content.pageNumber = 1;
       let res = await this.$api.requested(this.params)
       this.total = res.total
+      this.totalPage = res.pageTotal
       for (let i = 0; i < res.data.length; i++) {
         let list = this.fileType.fileList(res.data[i].attinfos)
         if (!list.length) continue;
@@ -99,10 +101,17 @@ export default {
       let deleteList = [];
       res.data.forEach(v => (initID == v.sat_sharematerial_classid && v.title == '') ? deleteList.push(v.sat_sharematerialid) : '');
       if (deleteList.length != 0) this.handleDelete(deleteList);
-      this.fileData = res.data
+      this.fileData = this.params.content.pageNumber == 1 ? res.data : this.fileData.concat(res.data)
+      // this.fileData = res.data
       this.params.content.sort = res.sort
       console.log(this.fileData);
     },
+    pullElementLoad () {
+      if (this.params.content.pageNumber == this.totalPage) return
+      this.params.content.pageNumber += 1
+      this.getFileList()
+      console.log('触底');
+    },
     /* 改变分类ID */
     changeTypeId(id) {
       this.params.content.where.sat_sharematerial_classid = id == 0 ? null : id;

src/SManagement/notice/compoents/list.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="list" v-if="list.length != 0">
+  <div class="list" v-if="list.length != 0" v-pullElementLoad="pullElementLoad">
     <div class="list-box" v-for="(item,index) in list" :key="index" @click="itemClick(item.sat_noticeid)">
       <div class="item-left">
         <el-image 
@@ -60,6 +60,10 @@ export default {
         }
       })
     },
+    pullElementLoad () {
+      console.log(1);
+      this.$emit('pullElementLoad')
+    }
   },
 };
 </script>
@@ -67,6 +71,8 @@ export default {
 <style scoped>
  .list {
   margin-top: 10px;
+  overflow-y: scroll;
+  height: calc(100vh - 220px);
 }
  .list-box {
   display: flex;

src/SManagement/notice/index.vue

@@ -2,14 +2,14 @@
   <div class="normal-card">
     <Search @searchActive="searchActive" @clearData="clearData"></Search>
     <div class="content">
-      <List :list="list"></List>
-      <div class="page">
+      <List :list="list" @pullElementLoad="pullElementLoad"></List>
+      <!-- <div class="page">
         <Pagination :total="total"
           :pageSize="param.content.pageSize"
           :currentPage="param.content.pageNumber"
           @pageChange="pageChange">
         </Pagination>
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
@@ -38,6 +38,7 @@ export default {
       searchTitle: '',
       list:[],
       total:0,
+      totalPage:0,
       currentPage:0,
     };
   },
@@ -55,8 +56,15 @@ export default {
     //获取通告列表
     async getNoticeData() {
       let res = await this.$api.requested(this.param)
-      this.list = res.data
+      this.list = this.param.content.pageNumber == 1 ? res.data : this.list.concat(res.data)
       this.total = res.total
+      this.totalPage = res.pageTotal
+    },
+    pullElementLoad () {
+      if (this.param.content.pageNumber == this.totalPage) return
+      this.param.content.pageNumber += 1
+      this.getNoticeData()
+      console.log('触底');
     },
     pageChange(val) {
       this.param.content.pageNumber = val

src/main.js

@@ -44,6 +44,31 @@ Vue.component('sort', sort)
 
 Vue.use(ElementUI);
 
+/* 数据懒加载 */
+Vue.directive('pullElementLoad',{
+  bind (el,binding) {
+    let tableWarp = el.getAttribute('customName') ? el.getAttribute('customName') : el
+    console.log(tableWarp);
+    let timer = null
+    function handleFun (e) {
+      if (timer) clearTimeout(timer)
+      timer = setTimeout(() => {
+        console.log('出发');
+        if (tableWarp.scrollTop + tableWarp.clientHeight >= tableWarp.scrollHeight) {
+          binding.value()
+        }
+      }, 500);
+    }
+    tableWarp.addEventListener('scroll',handleFun)
+    el.tableWarp = tableWarp
+    el.handleFun = handleFun
+  },
+  unbind (el,binding) {
+    /* 解绑 */
+    el.tableWarp.removeEventListener('scroll',el.handleFun)
+  }
+})
+
 new Vue({
   router,
   store,

src/views/homePage/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <el-row :gutter="20" class="normal-margin" v-if="usertype == 21">
+    <el-row :gutter="20" class="normal-margin" v-if="usertype != 21 || usertype != 22">
       <el-col :span="6">
        <user :data="dataOverview.user"></user>
       </el-col>