下拉加载,启用loading,待接单接口联调完成

package.json

@@ -35,7 +35,8 @@
     "vue-demi": "^0.14.0",
     "vue-router": "^3.5.4",
     "vuex": "^3.6.2",
-    "jsencrypt": "^3.0.3"
+    "jsencrypt": "^3.0.3",
+    "lodash": "^4.17.15"
   },
   "devDependencies": {
     "@babel/core": "^7.18.10",

src/api/home.js

@@ -1,6 +0,0 @@
-// import qs from 'qs'
-// axios
-// import request from '@/utils/request'
-//home api
-
- 

src/api/index.js

@@ -1,7 +1,8 @@
 const api = {
   Login: '/auth/login/govH5/loginByPassword',
   UserInfo: '/epmetuser/customerstaff/govH5/detail',
-  Customerlist: '/epmetuser/customerstaff/customerlist'
+  Customerlist: '/epmetuser/customerstaff/customerlist',
+  ServiceList: '/governance/service/rcvAndProcess/waitingRcvServiceList'
 }
 
 export default api

src/assets/css/common.less

@@ -82,8 +82,9 @@
 }
 .pages {
   width: 100%;
-  height: 100vh;
   background-color: #f7f7f7;
+  height: 100vh;
+  overflow-y: scroll;
 }
 .rounded-corner {
   border-radius: 20px;
@@ -93,5 +94,4 @@
 }
 .small_img{
   width: 18px;
-  
 }

src/utils/request.js

@@ -23,6 +23,7 @@ service.interceptors.request.use(
       config.headers['Authorization'] = localStorage.getItem('token')
     }
     config.baseURL = config.baseURL + '/'
+    Tips.loading()
     return config
   },
   error => {
@@ -46,8 +47,11 @@ service.interceptors.response.use(
         if (loginCode.includes(res.code)) {
           localStorage.removeItem('token')
           router.replace('/')
+        }else if(code > 8000){
+          Tips.error(res.msg)
+        }else{
+          Tips.error('网络错误，请稍后再试')
         }
-        Tips.error(res.msg)
         return Promise.reject(res || 'error')
       }
     }

src/views/assistance/index.vue

@@ -1,69 +1,76 @@
 <template>
-    <div class='pages'>
+    <div class='pages' ref="scroll">
-        <div>
+        <div class="scroll-box" ref="scroll-content">
-            <van-tabs :active="active" bind:change="onChange">
+            <van-tabs :active="active" sticky>
-                <van-tab title="待接单">内容 1</van-tab>
+                <van-tab title="待接单">
+                    <card></card>
+                </van-tab>
                 <van-tab title="待处理">内容 2</van-tab>
                 <van-tab title="已完成">内容 3</van-tab>
             </van-tabs>
         </div>
-        <div class="card rounded-corner">
-            <div class="m-top12 flex">
-                <van-tag type="primary" class="m-top12 m-top12-left">个性服务</van-tag>
-                <van-tag type="warning"  class="m-top12 m-top12-left">共性需求</van-tag>
-                <div class="m-top12 m-top12-left opacity5 font-size13">
-                    公益事业类-社区困难群体生活帮扶
-                </div>
-            </div>
-            <div class="m-top5 m-top12-left">
-                <img src="@/assets/images/icon/address.png" class="small_img">
-                张玉宝 13636520003<br>
-                <div style="margin-left: 21px;" class="opacity5 font-size13 m-top5">重庆南路15号1号楼1单元101</div>
-            </div>
-            <div class="m-top5 m-top12-left">
-                <img src="@/assets/images/icon/time.png" class="small_img">
-                2024-05-0215:00
-            </div>
-            <div class="m-top5 m-top12-left">
-                <div class="flex flex-center3">
-                    <img src="@/assets/images/icon/content.png" style="vertical-align: top;" class="small_img">
-                    <div>社区86岁独居老人，上下楼不方便，需要上门进行送餐服务。</div>
-                </div>
-            </div>
-
-            <hr class="m-top12-left  m-top12-right opacity5">
-            <div class="flex flex-fend m-top12-right">
-                <van-button size="small" type="info" class="rounded-corner m-top5-bottom"
-                    style="width: 60px;">接单</van-button>
-            </div>
-
-        </div>
     </div>
 </template>
 <script>
-
+import card from './card.vue'
+import throttle from 'lodash/debounce'
+import { getServiceList } from '@/api/service'
 export default {
     data() {
         return {
-            active: 1,
+            active: 0,
+            clientHeight: false,
+            scroll: null,
+            pageNo: 1,
+            pageSize: 10,
+            list: [],
+            total:0
         };
     },
     created() {
+        this.getTableList()
+    },
+    mounted() {
+        this.clientHeight = document.documentElement.clientHeight; //可视高度
+        console.log(this.clientHeight);
+        this.$nextTick(() => {
+            this.scroll = this.$refs.scroll;
+            this.scroll.addEventListener('scroll', this.bottomScroll); //监听底部加载  		
+        })
+
     },
     methods: {
-        onChange(event) {
+        //滚动加载
-            wx.showToast({
+        bottomScroll: throttle(function () {
-                title: `切换到标签 ${event.detail.name}`,
+            let scrollTop = this.scroll.scrollTop; //滚动条距离顶部的高度
-                icon: 'none',
+            let scrollHeight = this.scroll.scrollHeight; //滚动条的高度
-            });
+            let clientHeight = this.scroll.clientHeight; //可视区域的高度
-        },
+            if (scrollTop + clientHeight >= scrollHeight) {
+                console.log('到底了');
+                this.pageNo++;
+                this.getTableList();
+            }
+        }, 500),
+        getTableList(){
+            getServiceList({
+                pageNo: this.pageNo,
+                pageSize: this.pageSize
+            }).then(res => {
+                console.log(res);
+                this.total = res.total;
+                this.list = this.list.concat(...this.list,...res.list);
+            }).catch(err=>{
+
+            })
+        }
     },
-    components: {},
+    destroyed() {
+        this.scroll.removeEventListener('scroll', this.bottomScroll);//移除滚动监听
+    },
+    components: { card },
     computed: {},
     watch: {}
 }
 </script>
 
-<style lang='less' scoped>
+<style lang='less' scoped></style>
-
-</style>