增加统一的列表处理类

src/components/utils/list.js

@@ -0,0 +1,36 @@
+import http from "./http";
+
+class List {
+  constructor(action) {
+    this.action = action
+    this.current = 1
+    this.total = 0
+    this.list = []
+  }
+
+  getData(params) {
+    const {action} = this
+    return http.post(action, null, {params})
+  }
+
+  init(params) {
+    this.getData({...params, current: 1}).then(res => {
+      if (res?.data) {
+        this.list = res.data.records
+        this.total = res.data.total
+      }
+    })
+  }
+
+  loadMore(params) {
+    if (this.list.length < this.total) {
+      this.getData({...params, current: ++this.current}).then(res => {
+        if (res?.data) {
+          this.list = [...this.list, ...res.data.records]
+        }
+      })
+    }
+  }
+}
+
+export default List

src/mods/publicity/AppAgProducts/AppAgProducts.vue

@@ -22,11 +22,11 @@
         <u-icon name="arrow-down" size="28" color="#333333" :custom-style="{marginLeft:'8px'}"></u-icon>
       </span>
       <div class="total">
-        共<em>{{ total }}</em>个农产品
+        共<em>{{ list.total }}</em>个农产品
       </div>
     </header>
-    <div class="card-list" v-if="list.length">
+    <div class="card-list">
-      <div class="card" v-for="(item,index) in list" :key="index" @click="toDetail(item)">
+      <div class="card" v-for="(item,index) in list.list" :key="index" @click="toDetail(item)">
         <div class="top">
           <div class="title">{{ item.title }}
           </div>
@@ -47,7 +47,7 @@
         </div>
       </div>
     </div>
-    <AiEmpty v-else/>
+    <AiEmpty v-if="!list.list.length"/>
     <div class="btn-wrapper">
       <div class="btn" @click="suport" hover-class="text-hover">我要发布</div>
     </div>
@@ -57,6 +57,8 @@
 </template>
 
 <script>
+import List from "dvcp-wui/utils/list";
+
 export default {
   name: "AppAgProducts",
   appName: "晒农产品",
@@ -64,11 +66,9 @@ export default {
     return {
       index: 0,
       show: false,
-      current: 1,
       type: "",
       typeName: "",
       list: [],
-      total: 0,
     }
   },
 
@@ -96,7 +96,6 @@ export default {
     },
     onChange(val) {
       this.index = val;
-      this.current = 1;
       if (!!this.index) {
         this.getMine();
       } else this.getAll();
@@ -107,36 +106,19 @@ export default {
     confirm(val) {
       this.type = val[0].value;
       this.typeName = val[0].label;
-      this.current = 1;
       if (!!this.index) {
         this.getMine();
       } else this.getAll();
     },
     getAll() {
-      this.$instance.post("/app/appshowagriculturalproduce/list", null, {
+      const {type} = this
-        params: {
+      this.list = new List("/app/appshowagriculturalproduce/list")
-          type: this.type,
+      this.list.init({type})
-          current: this.current,
-        }
-      }).then(res => {
-        if (res?.data) {
-          this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records;
-          this.total = res.data.total;
-        }
-      })
     },
     getMine() {
-      this.$instance.post("/app/appshowagriculturalproduce/listByWx", null, {
+      const {type} = this
-        params: {
+      this.list = new List("/app/appshowagriculturalproduce/listByWx")
-          type: this.type,
+      this.list.init({type})
-          current: this.current,
-        }
-      }).then(res => {
-        if (res?.data) {
-          this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records;
-          this.total = res.data.total;
-        }
-      })
     },
     toDetail({id}) {
       uni.navigateTo({
@@ -150,7 +132,6 @@ export default {
     }
   },
   onShow() {
-    this.current = 1;
     if (!!this.index) {
       this.getMine();
     } else {
@@ -158,12 +139,8 @@ export default {
     }
   },
   onReachBottom() {
-    this.current++;
+    const {type} = this
-    if (!!this.index) {
+    this.list.loadMore({type})
-      this.getMine();
-    } else {
-      this.getAll();
-    }
   }
 }
 </script>
@@ -299,7 +276,6 @@ export default {
         box-sizing: border-box;
         display: flex;
         align-items: center;
-        box-sizing: border-box;
         padding: 32px;
 
         & > img {

src/utils/config.js

@@ -16,7 +16,7 @@ const configs = {
   dev: {
     areaId: '341021104000',
     areaName: '郑村镇',
-    baseUrl: 'http://192.168.1.87:59998'
+    baseUrl: 'http://192.168.1.87:9000'
   }
 }
 // 当前选中配置