zhgdyunapp_vue3/pages/projectEnd/safeManage/list.vue

<template>
	<view class="listPage">
		<headers :showBack="true">
			<view class="headerName">
				安全检查记录
			</view>
		</headers>
		<view class="tab flex2">
			<view class="tabType" @click="changeTab(1)" :class="checkedTab==1?'checkedTab':'noCheckTab'">待整改</view>
			<view class="tabType" @click="changeTab(2)" :class="checkedTab==2?'checkedTab':'noCheckTab'">待审核</view>
			<view class="tabType" @click="changeTab(3)" :class="checkedTab==3?'checkedTab':'noCheckTab'">已整改</view>
			<!-- <view class="tabType" @click="changeTab(4)" :class="checkedTab==4?'checkedTab':'noCheckTab'">无需整改</view> -->
		</view>
		<view class="content">
			<view class="item" v-if="listData.length>0" v-for="(item,index) in listData" :key="index" @click="goDetails(item.id)">
				<view class="item_title">{{item.checkPoints}}</view>
				<view class="item_content">{{item.checkNature}}</view>
				<view class="item_info flex2">
					<view class="name">巡检人：{{item.inspectorName}}</view>
					<view class="time">{{item.inspectTime}}</view>
					<view class="state bg1" v-if="checkedTab==1">待整改</view>
					<view class="state bg2" v-if="checkedTab==2">待审核</view>
					<view class="state bg3" v-if="checkedTab==3">已整改</view>
					<!-- <view class="state bg3" v-if="checkedTab==4">无需整改</view> -->
				</view>
			</view>
			<view class="noData" v-if="listData.length==0">
				<image class="noDataImg" src="../../../static/noData.png"></image>
				<view>暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 1,
				listData: [],
				checkedTab: 1,
				condition: {
					endTime: "",
					pageNo: 1,
					pageSize: 10,
					projectSn: "",
					startTime: "",
					state: 1,
				},
				teach:true
			}
		},
		onLoad(option) {
			this.condition.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
		},
		onShow() {
			this.listData=[];
			this.condition.pageNo = 1;
			this.condition.pageSize = 10;
			this.getListData();
		},
		//上拉触底时间
		onReachBottom(){
			if(this.teach){
				this.condition.pageNo = this.condition.pageNo+1;
				this.getListData();
			}
		},
		methods: {
			//切换tab
			changeTab(type) {
				this.checkedTab = type;
				this.condition.state = type;
				this.condition.pageNo = 1;
				this.condition.pageSize = 10;
				this.listData = [];
				this.getListData();
			},
			//获取列表数据
			getListData(){
				console.log(this.checkedTab)
				let userId = JSON.parse(uni.getStorageSync('userInfo')).userId;
				if(this.checkedTab == 1 || this.checkedTab == 3){
					this.condition.rectifyPeople = userId
					this.condition.inspector = ''
				} else if (this.checkedTab == 2 ) {
					this.condition.inspector = userId
					this.condition.rectifyPeople = '';
				}
				let that  = this;
				// uni.showLoading({title: '加载中'})
				this.sendRequest({
					url:'xmgl/securityManage/list',
					method:'post',
					data:that.condition,
					success:res=>{
						// uni.hideLoading()
						let arr = JSON.parse(JSON.stringify(that.listData));
						if(res.result.records.length>0){
							let newArr = arr.concat(res.result.records);
							if(res.result.records.length<10){
								that.teach=false;
							}else{
								that.teach=true;
							}
							that.listData = newArr;
						}else{
							that.teach = false;
						}
					}
				})
			},
			goDetails(id){
				uni.navigateTo({
					url:'./details?id='+id
				})
			}
		}
	}
</script>

<style>
	.flex {
		display: flex;
		align-items: center;
	}

	.flex2 {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tab {
		width: 100%;
		height: 90rpx;
		text-align: center;
		box-shadow: 0 0 20rpx  rgba(194, 194, 194, 0.5);
	}

	.tabType {
		width: 33%;
		line-height: 43px;
		border-bottom: 1px solid rgba(194, 194, 194, 0.2);
		
	}

	.checkedTab {
		color: #4181FE;
		border-bottom: 4rpx solid #4181FE;

	}
	.noCheckTab {
		padding-bottom: 4rpx;
	}
	
	.content{
		padding: 40rpx 30rpx 0;
		box-sizing: border-box;
		width: 100%;
	}
	.item{
		width: 100%;
		padding: 24rpx 30rpx;
		box-sizing: border-box;
		box-shadow: 0 0 20rpx  rgba(194, 194, 194, 0.5);
		border-radius: 4px;
		margin-bottom: 30rpx;
		color: rgba(51, 51, 51, 1);
		font-size: 32rpx;
		font-family: PingFangSC-Medium;
	}
	.item_title{
		font-weight: 600;
		margin-bottom: 4rpx;
	}
	.item_content{
		width: 100%;
		font-size:28rpx ;
		color: rgba(51, 51, 51, 1);
		font-family: PingFangSC-Regular;
		line-height: 28rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		
	}
	.item_info{
		font-size: 26rpx;
		line-height: 48rpx;
		font-family: PingFangSC-Regular;
		color: #999;
	}
	
	.state{
		padding: 0px 16rpx;
		color: #fff;
		box-sizing: border-box;
		border-radius: 60rpx;
		font-size: 24rpx;
	}
	.bg1{
		background-color: rgba(245, 166, 35, 1);
		box-shadow: 0px 4rpx  0px rgba(242, 76, 50, 0.28);
	}
	.bg2{
		background-color: rgba(88, 86, 214, 1);
		box-shadow: 0px 4rpx 0px rgba(87, 81, 217, 0.28);
	}
	.bg3{
		background-color: rgba(76, 217, 100, 1);
		box-shadow: 0px 4rpx 0px rgba(68, 219, 94, 0.28);
	}
	.noData{
		text-align: center;
		font-size: 32rpx;
		margin-top: 240rpx;
		color: #bed0fb;
	}
	.noDataImg{
		width: 250rpx;
		height: 196rpx;
	}
</style>