palletApp/components/checkItem.vue

<template>
	<view  class="noTabBarPage">
		<view class="search">
			<u-search placeholder="搜索" v-model="keyword" shape="square" :animation="true" @custom="search" ></u-search>
		</view>

		<view>
			<u-tabs :list="list" bar-width="90" :is-scroll="false" :current="current" @change="change">
			</u-tabs>
			<view class="content">
				<view style="margin-bottom: 20rpx;font-weight: bold;" v-if="current==0">未完成的检查({{total}})</view>
				<view style="margin-bottom: 20rpx;font-weight: bold;" v-else>已完成的检查({{total}})</view>
				<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 font_bold"><span>{{item.name}}</span>
								<u-tag v-if="current==1" :text='item.checkResult==0?"无隐患":"有隐患"' border-color="#fff"
									:type="item.checkResult==0?'success':'error'" />
								<u-tag v-else :text='item.checkStatus==0?"计划中":"已超期"' border-color="#fff"
									:type="item.checkStatus==0?'primary':'warning'" />
							</view>
							<view class="cardcontant">
								<image :src="taskIcon" class="taskIcon"></image>
								<view class="rightContant">
									<view>检查类别：{{item.checkTypeName}}</view>
									<view v-if="current==0">计划检查时间：<span  :class="current==0&&item.checkStatus==4?'red':''">{{item.checkTime}}</span></view>
									<view v-else>实际检查时间：<span  :class="current==0&&item.checkStatus==4?'red':''">{{item.realCheckTime}}</span></view>
									<view>检查人员：{{item.relatedUsers}}</view>

								</view>

							</view>
						</view>
						<image :src="check" v-if="current==0" @click="pushdetail(item.id,3)" class="check"></image>
					</view>
				</view>
				<view v-else>

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

<script>
	export default {
		name: "myCheck",
		data() {
			return {
				comeback: require("@/static/images/arrow-right.png"),
				taskIcon: require("@/static/images/taskIcon.png"),
				check: require("@/static/images/check.png"),
				menuList: [],
				status: '',
				show: false,
				list: [{
					name: '未完成'
				}, {
					name: '已完成'
				}],
				keyword: "",
				listData: [],
				tasks:null,
				total: 0,
				page: {
					current: 1,
					size: 10,
					checkState: "0,4"
				},
				current: 0
			}
		},
		props:['type'],
		onReachBottom() {
				this.status = 'loading';
				this.page.current = ++ this.page.current;
				this.myTasks()
		},
		methods: {
			change(index) {
				this.listData=[]
				this.current = index;
				this.page.current =1
				this.page.checkState = index == 0 ? "0,4" : "1,2"
				this.myTasks()
				
			},
			myTasks() {
				if(this._props.type==1){
				this.$u.api.myTasks(this.page).then(res => {
					this.total = res.total
					this.listData.push(...res.rows)
					if (res.rows.length < 10) {
						this.status = 'nomore'
					}
				})
				}else{
					
					this.$u.api.tasksPlan({},this.page).then(res => {
						this.total = res.total
						this.listData.push(...res.rows)
						if (res.rows.length < 10) {
							this.status = 'nomore'
						}
					})
				}
			},
			search(val){
				this.page.current=1
				this.listData=[]
				this.page.keyword=val
				this.myTasks()
			},
			pushdetail(val,type){
				uni.navigateTo({
				    url: `/packageD/pages/dualMechanism/securityManage/checkDetail?id=${val}&type=${type}`
				});
			}
		},
		mounted() {
			this.myTasks()
		}
	}
</script>

<style lang="scss" scoped>
	
	.red{
		color:red
	}
	.search {
		width: 100%;
		height: 88rpx;
		background: #fff;
		padding: 12rpx 20rpx;
	}

	.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-left: 20rpx;
					position: absolute;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					display: inline-block;

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

		}
	}
</style>