排查列表加载处理

pages/investigation/index.vue

@@ -4,8 +4,10 @@
 			<view class="Content BorderBox Width100">
 				<top-title :is-show-left="false" :title="'排查'" :rightWidth='120' class="custom_bg">
 					<template slot="right">
-					<image :src="$.imgSrc + '/mine/search.png'" @click="$.open('/pages/mine/setting')" mode="aspectFit" class="InlineBlock imgIcon"></image>
-					<image :src="$.imgSrc + '/mine/plus.png'" mode="aspectFit" @click="$.open('/pages/create/create')" class="InlineBlock imgIcon"></image>
+						<image :src="$.imgSrc + '/mine/search.png'" @click="$.open('/pages/mine/setting')"
+							mode="aspectFit" class="InlineBlock imgIcon"></image>
+						<image :src="$.imgSrc + '/mine/plus.png'" mode="aspectFit"
+							@click="$.open('/pages/create/create')" class="InlineBlock imgIcon"></image>
 					</template>
 				</top-title>
 			</view>
@@ -26,8 +28,8 @@
 			<view class="Content MarginAuto BorderBox">
 				<no-data v-if="isEmpty" />
 				<view v-else class="List Width100 BorderBox">
-					<view class="Unit FontBold BorderBox Width100 MarginT_30rpx BG_FFFFFF"
-						v-for="item in list" :key='item.id' @click='handleClick(item)'>
+					<view class="Unit FontBold BorderBox Width100 MarginT_30rpx BG_FFFFFF" v-for="(item,index) in list"
+						:key='item.businessId+index' @click='handleClick(item)'>
 						<image class="imgleft" :src="item.imgurl || '/static/logo.png'" mode="widthFix"></image>
 						<view class="right">
 							<view class="title">{{ item.name }}</view>
@@ -44,6 +46,7 @@
 						</view>
 					</view>
 				</view>
+				<u-loadmore :status="loadmorestatus" v-show="!isEmpty" />
 			</view>
 		</view>
 	</view>
@@ -56,10 +59,12 @@
 	export default {
 		// 组件
 		components: {
-			NoData,TopTitle
+			NoData,
+			TopTitle
 		},
 		data() {
 			return {
+				loadmorestatus: 'loading',
 				showNumber: true,
 				// 公用的js
 				bgUrl1: '', // 登录信息背景图
@@ -74,13 +79,15 @@
 					Finished: 0,
 					Unconfirmed: 0,
 				},
-        status: '0'
+				status: '0',
+
 			}
 		},
 		// 页面加载
 		onLoad(e) {
 
 		},
+
 		onShow: function() {
 			this.getData()
 			this.getList()
@@ -97,6 +104,7 @@
 				this.tab = tab;
 				this.page = 1;
 				this.list = [];
+				this.isMore = true
 				switch (tab) {
 					case 1:
 						this.status = '0';
@@ -111,9 +119,11 @@
 				this.getList()
 			},
 			getData() {
-        this.$request.globalRequest('/hiddenDanger/highDanger/getHighDangerStatusNum', { nuserid: this.$.getData('token') }, 'GET').then(res => {
+				this.$request.globalRequest('/hiddenDanger/highDanger/getHighDangerStatusNum', {
+					nuserid: this.$.getData('token')
+				}, 'GET').then(res => {
 					if (res.code === 200) {
-			console.log(res.result)
+						// console.log(res.result)
 						res.result.forEach(item => {
 							this.totalData[item.status] = item.count
 						})
@@ -122,16 +132,18 @@
 					}
 				})
 			},
-			getList(v) {
+			getList() {
 				let datas = {
 					nuserid: this.$.getData('token'),
 					status: this.status,
 				}
-        this.$request.globalRequest(`/hiddenDanger/highDanger/getHigDangerDealt?pageNum=${this.page}&pageSize=${10}`, datas, 'POST').then(res => {
+				this.loadmorestatus = 'loading'
+				this.$request.globalRequest(
+						`/hiddenDanger/highDanger/getHigDangerDealt?pageNum=${this.page}&pageSize=${10}`, datas, 'POST')
+					.then(res => {
+						this.loadmorestatus = 'loadmore'
+						uni.stopPullDownRefresh();
 						if (res.code === 200) {
-			if(v){
-				this.list = []
-			}
 							if (res.result.total === 0) {
 								this.isEmpty = true;
 							} else {
@@ -139,13 +151,15 @@
 								this.list.push(...res.result.list)
 							}
 							if (this.list.length >= res.result.total) {
+								this.loadmorestatus = 'nomore'
 								this.isMore = false
-            } else {
-				this.isMore = true
 							}
 						} else {
 							this.$.toast(res.message)
 						}
+					}).catch((err) => {
+						this.loadmorestatus = 'nomore'
+						uni.stopPullDownRefresh();
 					})
 			},
 			handleClick(row) {
@@ -164,12 +178,14 @@
 		},
 		// 触发下拉刷新
 		onPullDownRefresh() {
+			this.page = 1;
+			this.list = [];
+			this.isMore = true
+			this.getList()
 			// 延迟关闭刷新动画
-			setTimeout(() => {
-				uni.stopPullDownRefresh();
-				this.page = 1
-				this.getList('onPullDownRefresh')
-			}, 1500);
+			// setTimeout(() => {
+			// 	uni.stopPullDownRefresh();
+			// }, 1500);
 		},
 		// 页面上拉触底事件的处理函数
 		onReachBottom() {
@@ -187,18 +203,22 @@
 	page {
 		background: #F6F8FA;
 	}
+
 	.imgIcon {
 		width: 40rpx;
 		height: 100%;
 	}
+
 	.imgIcon:nth-of-type(2) {
 		margin-left: 40rpx;
 	}
+
 	.img {
 		width: 40rpx;
 		height: 40rpx;
 		margin-left: 30rpx;
 	}
+
 	.trapezoidal {
 		position: relative;
 		display: inline-block;
@@ -232,7 +252,9 @@
 		background-color: #FF1111;
 		border-left: 0 none;
 	}
-  .lin::before,.lin::after {
+
+	.lin::before,
+	.lin::after {
 		background-color: #E68A0B;
 	}
 
@@ -245,7 +267,11 @@
 		background: #ffffff;
 		box-shadow: 3px 0px 10px #ccc;
 		color: #666666;
-		position: relative;
+		position: sticky;
+		// top: var(--status-bar-height + 88rpx);
+		top: calc(var(--status-bar-height ) + 88rpx);
+		z-index: 10;
+
 		.tab-item {
 			position: relative;
 			height: 41px;
@@ -254,10 +280,12 @@
 			border-bottom: 3px solid #fff;
 			display: flex;
 			align-items: center;
+
 			&.active {
 				color: rgb(60, 109, 195);
 				border-color: rgb(60, 109, 195);
 			}
+
 			.number {
 				font-weight: bold;
 				font-size: 18px;
@@ -268,6 +296,7 @@
 
 	.Box {
 		padding-top: var(--status-bar-height);
+
 		.Content {
 			width: calc(100% - 48rpx);
 			padding-bottom: 88rpx;
@@ -280,6 +309,7 @@
 			align-items: center;
 			position: relative;
 			box-shadow: 1px 1px 3px #ccc;
+
 			.trapezoidal {
 				position: absolute;
 				top: -0px;
@@ -289,19 +319,24 @@
 				font-weight: normal;
 				z-index: 1;
 			}
+
 			image {
 				width: 200rpx;
 			}
+
 			.right {
 				flex: 1;
 				padding-left: 30rpx;
+
 				.title {
 					font-size: 16px;
 				}
+
 				.type {
 					font-size: 14px;
 					color: #666;
 					font-weight: normal;
+
 					text {
 						margin-right: 20rpx;
 					}