zhgdyunapp/pages/projectEnd/safeManage/projectList.vue

<template>
	<view class="projectList">
		<headers class="fixedheader" :themeType="true" :showBack="true">
			<view class="headerName">
				项目自检
			</view>
		</headers>
		<scroll-view class="smallHeight" :style="{ 'padding-top': statusBarHeight + 45 + 'px' }" scroll-y>
			<view class="project-list">
				<view v-if="dataList&&dataList.length>0">
					<view class="project-item flex a-center"
						v-for="(item,index) in dataList" :key="index"
						@click="jumpPage(item)">
						<view class="project-detail">
							<view class="project-title">{{item.taskName}}</view>
							<view class="project-content flex">
								<view class="project-num content flex f-column j-center"><text>{{item.count.inspectNum}}</text>隐患总数</view>
								<view class="project-type content flex f-column j-center"><text class="type1">{{item.count.notEndNum}}</text>未闭合总数</view>
								<!-- <view class="project-type content flex f-column j-center"><text :class="{'type1': index < 2, 'type2': index > 1 }">{{index > 1 ? "已闭合":"待整改"}}</text>隐患整改情况</view> -->
								<view class="content">检查类型：{{item.inspectTypeName}}</view>
								<view class="content">创建人：{{item.createUserName}}</view>
							</view>
							<view class="project-date">计划检查时间：{{item.startTime}}至{{item.endTime}}</view>
						</view>
						<!-- <view class="project-status" :class="{'status1': index < 2, 'status2': index > 1}">
							{{index > 1 ? "任务已结束":"任务已下发"}}
						</view> -->
					</view>
					<view class="loadMoreBox" v-if="isLoadMore">
						<uni-load-more :status="loadStatus" iconType="auto"></uni-load-more>
					</view>
				</view>
				
				<view class="no-data" v-else>
					<image class="img" src="/static/noData.png"></image>
					<text class="txt">暂无数据</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import headers from '../../../components/headers/headers.vue'
	export default{
		data(){
			return{
				statusBarHeight: 0,
				userId: "",
				projectSn: "",
				dataList: [],
				loadStatus:'more',
				isLoadMore: false,
				pageNo: 1,
				pageSize: 10
			}
		},
		onShow(){
			this.dataList=[]
			this.pageNo=1
			this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight;
			this.projectSn = JSON.parse(uni.getStorageSync('userInfo')).sn
			this.userId = JSON.parse(uni.getStorageSync('userInfo')).userId
			this.queryList()
		},
		onReachBottom() {
			console.log(1)
			if(!this.isLoadMore){  //此处判断，上锁，防止重复请求
				this.isLoadMore=true
				this.pageNo+=1
				this.queryList()
			}
		},
		onPullDownRefresh() {
			console.log(2)
			this.pageNo=1
			this.dataList=[]
			this.queryList()
		},
		methods:{
			jumpPage(val){
				uni.navigateTo({
					url:'./taskList?id=' + val.id
				})
			},
			queryList(){
				let data = {
					inspectUser: this.userId,
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					sn: this.projectSn
				}
				let _this = this
				this.sendRequest({
					url: 'xmgl/inspectTaskRecord/list',
					method: 'post',
					data: data,
					success: (res) => {
						// this.dataList = res.result.records
						this.dataList=this.dataList.concat(res.result.records)
						if(res.result.records.length<this.pageSize){  //判断接口返回数据量小于请求数据量，则表示此为最后一页
							  this.isLoadMore=true                                             
							  this.loadStatus='nomore'
						}else{
							  this.isLoadMore=false
							  // that.loadStatus='more'
						}
						uni.stopPullDownRefresh()
						console.log(res.result)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.projectList{
	min-height: 100%;
	background: #F6F6F6;
	.fixedheader{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2;
	}
	.smallHeight{
		height: 100%;
		box-sizing: border-box;
	}
	.flex{
		display: flex;
	}
	.f-column{
		flex-direction: column;
	}
	.a-center{
		align-items: center;
	}
	.j-center{
		justify-content: center;
	}
	.type1{
		color: #FF7524;
	}
	.type2{
		color: #127FEC;
	}
	.project-list{
		padding: 30rpx;
		padding-top: 24rpx;
		.project-item{
			background: #fff;
			width: 100%;
			border-radius: 10rpx;
			padding: 30rpx 24rpx 28rpx 42rpx;
			box-sizing: border-box;
			font-size: 24rpx;
			margin-bottom: 24rpx;
			box-shadow: 4rpx 16rpx 20rpx #E8E8E8;
			.project-detail{
				margin-right: 18rpx;
				.project-title{
					font-size: 30rpx;
					font-weight: bold;
					margin-bottom: 18rpx;
				}
				.project-content{
					flex-wrap: wrap;
					color: #71737F;
					.content{
						width: 50%;
						margin-bottom: 8rpx;
					}
					.project-num{
						text-align: center;
						margin-bottom: 20rpx;
						uni-text{
							font-size: 30rpx;
							font-weight: bold;
							color: #2A2E3F;
							margin-bottom: 4rpx;
						}
					}
					.project-type{
						text-align: center;
						margin-bottom: 20rpx;
						uni-text{
							font-size: 30rpx;
							margin-bottom: 4rpx;
							// color: #2A2E3F;
						}
					}
				}
				.project-date{
					color: #71737F;
				}
			}
			.project-status{
				white-space: nowrap;
				padding: 6rpx 18rpx;
				color: #fff;
				border-radius: 22rpx;
			}
			.status1{
				background: linear-gradient(to right, rgba(255,133,30, 1), rgba(255,133,30, 0.1));
			}
			.status2{
				background: linear-gradient(to right, rgba(103,178,253, 1), rgba(103,178,253, 0.1));
			}
		}
	}
}
.no-data{
		text-align: center;
		.img{
			display: block;
			height: 200rpx;
			width: 200rpx;
			margin: 0 auto;
			margin-top: 60rpx;
			margin-bottom: 60rpx;
		}
		.txt{
			color: #C0C4CC;
		}
	}
</style>