计划停电分页加载

common/common.scss

@@ -232,10 +232,10 @@ radio,checkbox {
 .pro-res {}
 
 .processList {
-	margin-top:100rpx;
+	// margin-top:100rpx;
 	/* position: fixed; */
 
-	width: 100%;
+	// width: 100%;
 	height: calc(100% - 100rpx);
 	overflow-y: scroll;
 	.cu-form-group{
@@ -338,8 +338,9 @@ radio,checkbox {
 		position: fixed;
 		width: 100%;
 		left:0;
-		bottom: 44rpx;
+		bottom: 0rpx;
 		z-index: 999;
+		padding-bottom:44rpx;
 		background-color: #ffffff;
 	}
 	

pages.json

@@ -379,7 +379,8 @@
             "style" :                                                                                    
             {
                 "navigationBarTitleText": "计划停电",
-                "enablePullDownRefresh": false
+                "enablePullDownRefresh": false,
+				"onReachBottomDistance":50 //距离底部多远时触发 单位px
             }
             
         }

pages/eleControl/powerCut/powerCut.vue

@@ -30,7 +30,7 @@
 
 		<!-- 未执行 -->
 		<block v-if="TabCur==0">
-			<view style=" height: calc(100vh - 400rpx);overflow: scroll;">
+			<view style=" height: calc(100vh - 400rpx);">
 				<view class="cu-list menu-avatar">
 					<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''"
 						@touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd"
@@ -58,7 +58,7 @@
 		</block>
 		<!-- 执行中 -->
 		<block v-if="TabCur==1">
-			<view style=" height: calc(100vh - 400rpx);overflow: scroll;">
+			<view style=" height: calc(100vh - 400rpx);">
 				<view class="cu-list menu-avatar eleDoing">
 					<view class="cu-item " :class="modalName=='move-box-'+ index?'move-cur':''"
 						@touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd"
@@ -81,12 +81,15 @@
 						</view>
 					</view>
 					<view class="text-center margin-top" v-if="planListData.length === 0">暂无数据...</view>
+					<view v-show="isLoadMore&&planListData.length!= 0">
+						<uni-load-more :status="loadStatus"></uni-load-more>
+					</view>
 				</view>
 			</view>
 		</block>
 		<!-- 已执行 -->
 		<block v-if="TabCur==2">
-			<view style="    height: calc(100vh - 400rpx);overflow: scroll;">
+			<view style="    height: calc(100vh - 400rpx);">
 				<view class="cu-list menu-avatar ">
 					<view class="cu-item" v-for="(item,index) in planListData" :key="index" @tap="goDetail(item.id)">
 						<view class="cu-avatar lg" style="background-image:url(../../../static/processedIcon.png);">
@@ -102,6 +105,9 @@
 						</view>
 					</view>
 					<view class="text-center margin-top" v-if="planListData.length === 0">暂无数据...</view>
+					<view v-show="isLoadMore&&planListData.length != 0&&this.currentPage>1">
+						<uni-load-more :status="loadStatus"></uni-load-more>
+					</view>
 				</view>
 			</view>
 		</block>
@@ -133,14 +139,27 @@
 				
 				planListData:[],
 				site_name:'',
-				status_value:1
-
-
+				status_value:1,
+				
+				currentPage: 1,
+				size: 10,
+				loadStatus: 'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
+				isLoadMore: false, //是否加载中
 			};
 		},
+		onReachBottom() { //上拉触底函数
+			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
+				this.isLoadMore = true
+				this.currentPage += 1;
+				
+				this.loadData()
+		
+			}
+		},
 	
 		onLoad: function(option) {
-			this.getDataList({"status_value":1})
+			// this.getDataList({"status_value":1})
+			this.loadData()
 		},
 		
 		methods: {
@@ -155,10 +174,19 @@
 			
 			//筛选
 			searchSiteList() {
+				this.currentPage=1,
+				this.planListData=[]
+				this.loadData()
+				
+			},
+			loadData(){
 				this.getDataList({
 					"site_name": this.site_name,
-					"status_value":this.status_value
+					"status_value":this.status_value,
+					"currentPage": this.currentPage,
+					"size": this.size,
 				})
+				
 			},
 			
 			//删除
@@ -192,10 +220,7 @@
 						title: "删除成功",
 					});
 					setTimeout(() => {
-						this.getDataList({
-							"site_name": this.site_name,
-							"status_value":this.status_value
-						})
+						this.loadData()
 					}, 1000);
 				}
 				
@@ -210,19 +235,35 @@
 					showLoading: true,
 					data: params
 				})
-				console.log('res.data.data')
-				console.log(res.data.data)
-				this.planListData = res.data.data
+				// console.log('res.data.data')
+				// console.log(res.data.data)
+				// this.planListData = res.data.data
+				if (res.data.data.length) {
+					this.planListData = this.planListData.concat(res.data.data)
+									
+					if (res.data.data.length < this.size) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
+						this.isLoadMore = true
+						this.loadStatus = 'nomore'
+					} else {
+						this.isLoadMore = false
+					}
+				} else {
+					this.isLoadMore = true
+					this.loadStatus = 'nomore'
+				}
 			},
 			
 			
 			tabSelect(e) {
 				console.log(e.currentTarget);
+				this.currentPage=1,
+				this.planListData=[],
+				this.site_name='',
 				this.TabCur = e.currentTarget.dataset.id;
 				// this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
 				this.status_value=e.currentTarget.dataset.status;
 				this.modalName=null;
-				this.getDataList({"status_value":e.currentTarget.dataset.status})
+				this.loadData()
 			},
 			goAddPage(id) {
 				uni.navigateTo({

pages/processList/processList.vue

@@ -1,5 +1,6 @@
 <template>
 	<view class="processWrapper ">
+		<view style="height:100rpx"></view>
 
 		<view class="ding">
 			<scroll-view scroll-x class="bg-white nav text-center">
@@ -35,7 +36,10 @@
 									class="icon iconfont margin-left-xs margin-right-xs">&#xe629;</text></view>
 						</view>
 					</view>
-					<view class=" text-center margin-top" v-if="alarmUntreatedCount === 0">暂无数据...</view>
+					<view class=" text-center margin-top" v-if="alarmUntreatedCount == 0">暂无数据...</view>
+					<view v-show="isLoadMore&&alarmUntreatedCount!= 0">
+						<uni-load-more :status="loadStatus"></uni-load-more>
+					</view>
 				</view>
 			</view>
 		</block>
@@ -117,7 +121,11 @@
 
 							</view>
 						</view>
-						<view class="text-center margin-top" v-if="alarmUntreatedCount1 === 0">暂无数据...</view>
+						<view class="text-center margin-top" v-if="alarmUntreatedCount1 == 0">暂无数据...</view>
+						<view v-show="isLoadMore&&alarmUntreatedCount1 != 0&&this.currentPage>1"  :style="{'padding-top':this.handleStatus==2 ? '50rpx':'','padding-bottom':this.handleStatus==2 ? '180rpx':''}" >
+							<uni-load-more :status="loadStatus"></uni-load-more>
+						</view>
+						
 					</view>
 
 					<view v-if="this.handleStatus==2" class="btn-area submitBottomBtn padding-lr-sm">
@@ -166,27 +174,57 @@
 				companyCode: '',
 				alarmUntreatedCount: '',
 				alarmUntreatedCount1: '',
-				processingStatus: '',
+				processingStatus: 0,
+				
+				currentPage: 1,
+				size: 10,
+				loadStatus: 'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
+				isLoadMore: false, //是否加载中
 			};
 		},
 		watch: {
 			handleStatus(val) {
+				console.log('下拉框切换')
+				this.currentPage=1;
+				this.porcessedList=[]
 				// this.porcessedList={};
 				if(val==0){
 					val='1,2,3,4'
 				}
+				this.processingStatus=val
+				console.log(this.processingStatus)
 				this.getProcessData({
 					"companyCode": this.companyCode,
 					"type": this.type,
-					"processingStatus": val
+					"processingStatus": val,
+					"currentPage": this.currentPage,
+					"size": this.size,
+					
 				}, this.TabCur);
 
 			}
 		},
 		computed: {
 		},
+		onReachBottom() { //上拉触底函数
+			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
+				this.isLoadMore = true
+				this.currentPage += 1;
+				
+				this.getProcessData({
+					"companyCode": this.companyCode,
+					"type": this.type,
+					"processingStatus": this.processingStatus,
+					"currentPage": this.currentPage,
+					"size": this.size,
+				},  this.TabCur);
+
+			}
+		},
 
 		onLoad: function(option) {
+			this.type=option.type;
+			this.companyCode=option.companyCode;
 
 			console.log(option.type);
 			console.log(option.companyCode);
@@ -199,18 +237,24 @@
 					title: '视频告警'
 				});
 			}
-			this.getProcessData({
-				"companyCode": option.companyCode,
-				"type": option.type,
-				"processingStatus": "0"
-			}, 0);
-			console.log('onload里')
+			
+			this.loadData()
+		
 
-			this.companyCode = option.companyCode;
-			this.processingStatus = 1
-			this.type = option.type;
+			
+		
 		},
 		methods: {
+			loadData(){
+				
+				this.getProcessData({
+					"companyCode": this.companyCode,
+					"type": this.type,
+					"processingStatus": this.processingStatus,
+					"currentPage": this.currentPage,
+					"size": this.size,
+				}, this.TabCur);
+			},
 			
 			quickConfirm(){
 				if (!this.checkedArr.length) {
@@ -283,34 +327,68 @@
 					this.allChecked = false;
 				}
 			},
+		
 			async getProcessData(ming = {}, whichTab) {
+				console.log('请求接口')
 				const res = await this.$myRequest({
 					url: 'IntegratedAlarm/getElectricAlarmUntreated',
 					data: ming,
 					showLoading: true
 				})
 
-				if (whichTab ==0) {
-					this.unporcessList = res.data.data;
-					this.alarmUntreatedCount = parseInt(res.data.alarmUntreatedCount)
-				} else {
-					this.porcessedList = res.data.data;
-					this.alarmUntreatedCount1 = parseInt(res.data.alarmUntreatedCount)
+				// if (whichTab ==0) {
+				// 	this.unporcessList = res.data.data;
+				// 	this.alarmUntreatedCount = parseInt(res.data.alarmUntreatedCount)
+				// } else {
+				// 	this.porcessedList = res.data.data;
+				// 	this.alarmUntreatedCount1 = parseInt(res.data.alarmUntreatedCount)
 
+				// }
+				// console.log(this.porcessedList)
+				
+				if (res.data.data.length) {
+					if (whichTab == 0) {
+						this.unporcessList = this.unporcessList.concat(res.data.data)
+						this.alarmUntreatedCount = parseInt(res.data.alarmUntreatedCount)
+									
+					} else {
+						this.porcessedList = this.porcessedList.concat(res.data.data);
+						
+						this.alarmUntreatedCount1 = parseInt(res.data.alarmUntreatedCount)
+						console.log(this.alarmUntreatedCount1)
+					}
+									
+					if (res.data.data.length < this.size) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
+						this.isLoadMore = true
+						this.loadStatus = 'nomore'
+					} else {
+						this.isLoadMore = false
+					}
+				} else {
+					this.isLoadMore = true
+					this.loadStatus = 'nomore'
 				}
-				console.log(this.porcessedList)
+				
+				
+			
+					
+				
 			},
 
-			tabSelect(e) {
+			tabSelect(e) {   //已处理未处理切换
+				console.log('已处理未处理切换')
+				this.currentPage=1;
+				this.porcessedList=[];
+				this.unporcessList=[];
+				
 				console.log(e.currentTarget);
 				this.TabCur = e.currentTarget.dataset.id;
 				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
-				this.handleStatus=0
-				this.getProcessData({
-					"companyCode": this.companyCode,
-					"type": this.type,
-					"processingStatus": !e.currentTarget.dataset.id ? e.currentTarget.dataset.id : '1,2,3,4'
-				}, this.TabCur);
+				// this.handleStatus=0;
+				
+				this.processingStatus=!e.currentTarget.dataset.id ? e.currentTarget.dataset.id : '1,2,3,4',
+				console.log(this.processingStatus)
+				this.loadData()
 			},
 
 			// 页面跳转
@@ -356,8 +434,8 @@
 
 <style lang="scss">
 	.handle2scroll {
-		height: calc(100vh - 400rpx);
-		overflow-y: scroll;
+		// height: calc(100vh - 400rpx);
+		// overflow-y: scroll;
 	}
 
 	//已处理未处理消息个数样式