palletApp/components/checkList.vue

<template>
	<view class="noTabBarPage">
		<view class="search">
			<u-search placeholder="搜索" v-model="keyword" shape="square" @custom="search" :animation="true"></u-search>
		</view>
		<view class="areas">
			<!-- 		<view class="searchBlock" @click="choose('',0)" :class="currentKey==0?'chooseCss':'unchooseCss'">
				<image class="searchIcon" :src="currentKey==0?all:all1"></image>
				<view class="rightIcon">
					<view style="font-size:32rpx">{{total}}</view>
					<view style="opacity: 0.7;">全部巡检点</view>
				</view>
			</view> -->
			<view class="searchBlock" @click="choose(2)" :class="currentKey==2?'chooseCss':'unchooseCss'">
				<image class="searchIcon" :src="currentKey==2?all:all1"></image>
				<view class="rightIcon">
					<view style="font-size:32rpx">{{total}}</view>
					<view style="opacity: 0.7;">全部</view>
				</view>
			</view>
			<view class="searchBlock" @click="choose(1)" :class="currentKey==1?'chooseCss':'unchooseCss'">
				<image class="searchIcon" :src="currentKey==1?dangerS:dangerS1"></image>
				<view class="rightIcon">
					<view style="font-size:32rpx">{{total1}}</view>
					<view style="opacity: 0.7;">有隐患</view>
				</view>
			</view>
			<view class="searchBlock" @click="choose(0)" :class="currentKey==0?'chooseCss':'unchooseCss'">
				<image class="searchIcon" :src="currentKey==0?dangerP:dangerP1"></image>
				<view class="rightIcon">
					<view style="font-size:32rpx">{{total0}}</view>
					<view style="opacity: 0.7;">无隐患</view>
				</view>
			</view>
			<!-- <view class="searchBlock" @click="choose(item.type,+index+1)"
				:class="+index+1==currentKey?'chooseCss':'unchooseCss'" v-for="(item,index) in screening">
				<image class="searchIcon" :src="index+1==currentKey?all:all1"></image>
				<view class="rightIcon">
					<view style="font-size:32rpx">{{item.count}}</view>
					<view style="opacity: 0.7;">{{item.typeName}}</view>
				</view>
			</view> -->

		</view>
		<view>
			<view class="content">
				<view v-if="total>0">
					<view class="taskCard " v-for="item in listData">
						<view @click="pushdetail(item.id,current)">
							<view class="u-flex u-col-top  u-row-between"><span>{{item.name}}</span>
								<u-tag :text='item.checkResult==0?"无隐患":"有隐患"' border-color="#fff"
									:type="item.checkResult==0?'success':'error'" />

							</view>
							<view class="cardcontant">
								<image :src="taskIcon" class="taskIcon"></image>
								<view class="rightContant">
									<view>检查类别：{{item.checkTypeName}}</view>
									<view>检查时间：<span
											:class="current==0&&item.checkStatus==4?'red':''">{{item.realCheckTime.slice(0, 10)}}</span>
									</view>
									<view>检查人员：{{item.relatedUsers}}</view>

								</view>

							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="status" v-if="total>=9" />
	</view>
</template>

<script>
	export default {
		name: "checkList",
		components: {},
		props:['type'],
		data() {
			return {
				comeback: require("@/static/images/arrow-right.png"),
				all: require("@/static/images/all.png"),
				all1: require("@/static/images/qb.png"),
				dangerS: require("@/static/images/dangerS.png"),
				dangerS1: require("@/static/images/wxy.png"),
				dangerP: require("@/static/images/wxd.png"),
				dangerP1: require("@/static/images/wxd.png"),
				taskIcon: require("@/static/images/taskIcon.png"),
				menuList: [],
				name: "",
				currentKey: 2,
				show: false,
				screening: [],
				status: 'loadmore',
				total1: 0,
				total0: 0,
				keyword: "",
				listData: [],
				total: 0,
				page: {
					current: 1,
					size: 10,
				},
				current: 1
			}
		},


		// onReachBottom() {
		// 	debugger
		// 	this.status = 'loading';
		// 	this.page.current = ++this.page.current;
		// 	this.queryListByType(2)
		// },
		methods: {
			onBottom() {
				console.log(11)
				this.status = 'loading';
				this.page.current = ++this.page.current;
				this.queryListByType(2)
			},
			queryListByType(val, type) {
				if (val == 2) {
					delete this.page.checkResult;
				} else {
					this.page.checkResult = val
				}
				//1是临时检查 2是检查记录
				if(this._props.type==1){
					this.page.checkMode =2
				}else{
					this.page.checkState= '1,2'
				}
				this.$u.api.queryListByType(this.page).then(res => {
					this.listData.push(...res.rows)
					if (res.rows.length < 10) {
						this.status = 'nomore'
					}
					if (!type) {
						this.total += res.rows.length
						res.rows.length > 0 && res.rows.map(item => {
							item.checkResult == 0 ? this.total0++ : this.total1++
						})
					}
				})
			},
			search(val) {
				this.page.current = 1
				this.listData = []
				this.total1 = 0
				this.total0 = 0
				this.total = 0
				this.page.keyword = val
				this.queryListByType(this.currentKey)
			},
			choose(index) {
				this.page.current = 1
				this.listData = []
				this.queryListByType(index, 'choose')
				this.currentKey = index;
			},
			pushdetail(val, type) {
				uni.navigateTo({
					url: `/packageD/pages/dualMechanism/securityManage/checkDetail?id=${val}&type=${type}`
				});
			}
		},
		mounted() {
			// var queryData="queryType=2";
			this.$u.api.queryHeadType({},queryType:2).then(res => {
				this.screening = res
			})
			this.queryListByType(2)
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-load-more-inner {
		margin-bottom: 20rpx;
	}

	.red {
		color: red
	}

	.search {
		width: 100%;
		height: 88rpx;
		background: #fff;
		padding: 12rpx 20rpx;
	}

	.chooseCss {
		background-color: #347ACF;
		color: #fff;
	}

	.unchooseCss {
		background-color: #fff;
	}

	.searchBlock {
		width: 225rpx;
		height: 112rpx;
		border-radius: 8rpx;
		display: inline-block;
		padding: 24rpx 10rpx;
		margin-right: 20rpx;
		margin-top: 20rpx;

		.searchIcon {
			width: 60rpx;
			height: 60rpx;
		}

		.rightIcon {
			margin-top: -75rpx;
			margin-left: 70rpx;
			font-size: 22rpx;
		}
	}

	.areas {
		padding: 20rpx 0 20rpx 20rpx;
		width: 750rpx;
		height: 176rpx;
		white-space: nowrap;
		overflow: hidden;
	}

	.content {
		padding: 20rpx;

		.taskCard {
			width: 710rpx;
			height: 240rpx;
			background: #fff;
			border-radius: 8rpx;
			padding: 30rpx;
			position: relative;
			font-size: 28rpx;
			margin-bottom: 20rpx;

			.check {
				width: 64rpx;
				height: 64rpx;
				position: absolute;
				top: 140rpx;
				right: 35rpx;
			}

			.cardcontant {
				.taskIcon {
					width: 162rpx;
					height: 128rpx;
				}

				.rightContant {
					font-size: 22rpx;
					width: 300rpx;
					margin-top: 10rpx;
					margin-left: 20rpx;
					position: absolute;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					display: inline-block;

					view {
						margin-bottom: 10rpx;
					}
				}
			}

		}
	}
</style>