zc

pages_manage/views/accessControl/empowerOpen.vue

@@ -11,12 +11,18 @@
 
 				</view>
 			</view>
-			<view class="list">
+			<scroll-view scroll-y @scrolltolower="scrollGet" class="list">
 				<view class="list-li" v-for="(item,index) in dataList">
 					<view class="list-li-l">{{item.subName}}（{{item.roomNum}}）</view>
-					<view class="list-li-r" @click="authorizedClick(item)">授权</view>
+					<view class="list-li-r" @click="authorizedClick(item)">
+						<view class="null-p"></view>
+						<view>授权</view>
+						<view class="null-p"></view>
+					</view>
 				</view>
-			</view>
+				<view class="get-data-null-p" v-if="getDataType">- 没有更多数据 -</view>
+				<view class="get-data-null-p" v-else="getDataType">- 滑动加载更多 -</view>
+			</scroll-view>
 		</view>
 		<view class="page-tow" v-if="pageType==2">
 			<view class="list-tow">
@@ -95,10 +101,14 @@
 					validBeginTime: '',
 					validEndTime: '',
 				},
+				total: 0,
 				getData: {
+					page: 1,
+					pageSize: 20,
 					searchValue: '',
 					adminId: uni.getStorageSync('userId'),
 				},
+				getDataType: false,
 				getDataTow: {
 					searchValue: '',
 					labId: '',
@@ -186,6 +196,18 @@
 				this.$set(this.addForm, 'subId', row.subId)
 
 			},
+			//滚动加载事件
+			scrollGet() {
+				let self = this;
+				if (self.total / self.getData.pageSize <= self.getData.page) {
+					this.$set(this, 'getDataType', true);
+				} else {
+					this.getData.page += 1;
+					this.$nextTick(() => {
+						this.systemSubjectGetAppSubject();
+					})
+				}
+			},
 			//获取实验室
 			async systemSubjectGetAppSubject() {
 				let self = this;
@@ -193,16 +215,36 @@
 					data
 				} = await systemSubjectGetAppSubject(this.getData);
 				if (data.code == 200) {
-					this.dataList = data.data;
+					if (self.getData.page == 1) {
+						this.dataList = data.data.records;
+						this.total = data.data.total;
+						if (data.data.total / self.getData.pageSize <= self.getData.page) {
+							this.$set(this, 'getDataType', true);
+						}
+					} else {
+						this.dataList = [...this.dataList, ...data.data.records]
+						this.total = data.data.total;
+						if (data.data.total / self.getData.pageSize <= self.getData.page) {
+							this.$set(this, 'getDataType', true);
+						}
+					}
 				}
 			},
 			//实验室搜索
 			subNameChange() {
+				this.$set(this, 'getDataType', false);
+				this.$set(this, 'dataList', []);
+				this.$set(this, 'total', 0);
+				this.$set(this.getData, 'page', 1);
 				this.systemSubjectGetAppSubject();
 			},
 			//实验室搜索框清除
 			clearSearch(){
-				this.getData.searchValue='';
+				this.$set(this, 'getDataType', false);
+				this.$set(this, 'dataList', []);
+				this.$set(this, 'total', 0);
+				this.$set(this.getData, 'page', 1);
+				this.$set(this.getData, 'searchValue', '');
 				this.systemSubjectGetAppSubject();
 			},
 			cancelClick() {
@@ -275,8 +317,14 @@
 
 <style lang="stylus" scoped>
 	#empowerOpen {
-
+		height: 100%;
+		display flex;
+		flex-direction column;
 		.page-one {
+			flex:1;
+			display flex;
+			flex-direction column;
+			overflow: hidden;
 			.header {
 				width: 749rpx;
 				height: 120rpx;
@@ -315,15 +363,17 @@
 			}
 
 			.list {
+				flex: 1;
+				overflow-y scroll;
 				padding: 0 30rpx;
 				box-sizing: border-box;
 				background: #fff;
 
 				.list-li {
-					height: 90rpx;
+					// height: 90rpx;
 					display: flex;
-					justify-content: space-between;
-					align-items: center;
+					// justify-content: space-between;
+					// align-items: center;
 					border-bottom: 1rpx solid #D8D8D8;
 
 					.list-li-l {
@@ -332,7 +382,8 @@
 						font-weight: 400;
 						font-size: 30rpx;
 						color: #333333;
-						line-height: 42rpx;
+						line-height: 40rpx;
+						padding: 25rpx 25rpx 25rpx 0;
 					}
 
 					.list-li-r {
@@ -340,14 +391,27 @@
 						font-weight: 400;
 						font-size: 28rpx;
 						color: #0183FA;
-						line-height: 39rpx;
+						line-height: 90rpx;
+						display: flex;
+						flex-direction: column;
+						text-align: right;
+						width: 80rpx;
+					}
+
+					.null-p {
+						flex: 1;
 					}
 				}
 				.list-li:last-child{
 					border-bottom: none;
 				}
 			}
-
+			.get-data-null-p {
+				text-align: center;
+				line-height: 100rpx;
+				padding-bottom: 80px;
+				color: #999;
+			}
 		}
 
 		.page-tow {