下拉刷新

pages.json

@@ -19,7 +19,10 @@
       "path": "pages/WorkingHours/audit"
     },
     {
-      "path": "pages/Project/list"
+      "path": "pages/Project/list",
+      "style": {
+        "enablePullDownRefresh": true
+      }
     },
     {
       "path": "pages/Project/add"

pages/Project/auth.vue

@@ -10,6 +10,7 @@
       >
         {{ `${project.project_name}(${project.project_full_code})` }}
       </view>
+      <view class="loadmore">{{ loadMoreText }}</view>
     </view>
   </view>
 </template>
@@ -17,21 +18,30 @@
 <script>
 import { queryAuth } from "@/services/project";
 import { mapState } from "vuex";
+import mixin from "@/utils/listMixin";
 export default {
+  mixins: [mixin],
   computed: {
     ...mapState(["currentProject"]),
   },
   data() {
-    return { projectList: [] };
+    return {
+      checkself: [],
+      projectList: [],
+      self: [{ text: "只看自己", value: 0 }],
+    };
   },
   onShow() {
-    this.getProject();
+    this.initData();
   },
   methods: {
-    async getProject() {
+    async getProject(params) {
       let res = {};
-      res = await queryAuth();
-      this.projectList = res.data.list;
+      res = await queryAuth(params);
+      this.pagination.currentPage == 1
+        ? (this.projectList = res.data.list)
+        : (this.projectList = this.projectList.concat(res.data.list));
+      return res.data;
     },
     async onClickProject(project) {
       await this.$store.commit("setCurrentProject", project);
@@ -60,10 +70,17 @@ export default {
 .list {
   width: 90%;
   margin-top: 60px;
+  border-top: 2px solid gray;
 }
 .project {
-  border-top: 2px solid gray;
+  border-bottom: 2px solid gray;
+  padding: 20px 0px;
+  font-size: 18px;
+}
+.loadmore {
   padding: 20px 0px;
   font-size: 18px;
+  color: gray;
+  text-align: center;
 }
 </style>

pages/Project/list.vue

@@ -20,6 +20,7 @@
       >
         {{ `${project.project_name}(${project.project_full_code})` }}
       </view>
+      <view class="loadmore">{{ loadMoreText }}</view>
     </view>
 
     <uni-fab
@@ -33,7 +34,9 @@
 <script>
 import { queryProject } from "@/services/project";
 import { mapState } from "vuex";
+import mixin from "@/utils/listMixin";
 export default {
+  mixins: [mixin],
   computed: {
     ...mapState(["currentProject"]),
   },
@@ -41,18 +44,20 @@ export default {
     return {
       checkself: [],
       projectList: [],
-      projectFilter: { pageSize: 99999 },
       self: [{ text: "只看自己", value: 0 }],
     };
   },
   onShow() {
-    this.getProject();
+    this.initData();
   },
   methods: {
-    async getProject() {
+    async getProject(params) {
       let res = {};
-      res = await queryProject(this.projectFilter);
-      this.projectList = res.data.list;
+      res = await queryProject(params);
+      this.pagination.currentPage == 1
+        ? (this.projectList = res.data.list)
+        : (this.projectList = this.projectList.concat(res.data.list));
+      return res.data;
     },
     async onClickProject(project) {
       await this.$store.commit("setCurrentProject", project);
@@ -65,7 +70,7 @@ export default {
         ...this.projectFilter,
         filter_type: this.checkself.length,
       };
-      this.getProject();
+      this.initData();
     },
     onClickAdd() {
       uni.navigateTo({
@@ -107,4 +112,10 @@ export default {
   padding: 20px 0px;
   font-size: 18px;
 }
+.loadmore {
+  padding: 20px 0px;
+  font-size: 18px;
+  color: gray;
+  text-align: center;
+}
 </style>

services/project.js

@@ -9,6 +9,5 @@ export async function queryProject(params) {
 export async function queryAuth(params) {
   return await request("/v2/approval/list/auth", "GET", {
     ...params,
-    pageSize: 99999,
   });
 }

utils/listMixin.js

@@ -0,0 +1,47 @@
+import moment from "@/components/moment/moment.js";
+
+export default {
+  data() {
+    return {
+      pagination: {
+        total: "",
+        currentPage: 1,
+        pageSize: 30,
+      },
+      projectFilter: {},
+      loadMoreText: "加载中...",
+    };
+  },
+  methods: {
+    initData() {
+      var pagination = this.pagination;
+      return this.getProject({
+        ...this.projectFilter,
+        pageSize: pagination.pageSize,
+        currentPage: pagination.currentPage,
+      }).then((res) => {
+        // console.log(res)
+        pagination.total = res.pagination.total;
+        pagination.currentPage = res.pagination.current;
+        if (pagination.currentPage * pagination.pageSize >= pagination.total) {
+          this.loadMoreText = "全部加载完毕";
+        }
+      });
+    },
+  },
+  onReachBottom() {
+    // console.log("onReachBottom");
+    if (this.projectList.length >= this.pagination.total) {
+      this.loadMoreText = "没有更多数据了";
+      return;
+    }
+    this.pagination.currentPage++;
+    this.initData();
+  },
+  onPullDownRefresh() {
+    this.pagination.currentPage = 1;
+    this.initData().then(() => {
+      uni.stopPullDownRefresh();
+    });
+  },
+};