ipc-app/pages/work/patrol/listPatrol.vue

<template>
	<view class="card-group">
		<view class="card-group" v-if="total === 0">
			<leruge-empty text="暂无数据" type="minus"></leruge-empty>
		</view>
		<view class="cu-card dynamic" v-if="total != 0" v-for="(item,index) in patrolList" :key="index">
			<view class="cu-item shadow" @click="goItem(item.id)">
				<view class="cu-list menu-avatar">
					<view class="cu-item">
						<view class="content flex-sub card-title">
							<view>{{item.equip}}</view>
							<button class="label-btn" size="mini"
									:style="{'background': item.bgColor,'color':item.color}">{{item.nameStatus}}</button>
							</view>
					</view>
				</view>
				<view class="content-container">
					<view class="text-content">
						<text class="iconfont "></text>
						<text class="text-description">任务编号： {{item.taskNum}}</text>
					</view>
					<view class="text-content">
						<text class="iconfont "></text>
						<text class="text-description">巡检设备： {{item.equip}}</text>
					</view>
					<view class="text-content">
						<text class="iconfont "></text>
						<text class="text-description">任务创建时间： {{item.createTime}}</text>
					</view>
					<view class="text-content">
						<text class="iconfont "></text>
						<text class="text-description">计划完成时间： {{item.planTime}}</text>
					</view>
				</view>
			</view>
		</view>
		<view v-if="finished == true" class="loading-tip">{{ tipText }}</view>
	</view>
</template>

<script>
	
	import {
		listPatrol
	} from "@/api/patrol/patrol.js"
	
	export default {
		data() {
			return {
				finished: false,
				tipText: "正在加载...",
				total: 0,
				patrolList: [],
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					status: null
				},
			}
		},
		onReachBottom() {
			const allTotal = this.queryParams.pageNum * this.queryParams.pageSize;
			if (allTotal < this.total) {
				this.queryParams.pageNum += 1;
				this.getListPatrol();
			} else {
				this.finished = true;
				this.tipText = "已加载完成";
			}
		},
		onShow() {
			this.patrolList = [];
			this.getListPatrol();
		},
		methods: {
			getListPatrol(){
				this.finished = true;
				this.queryParams.status = 1;
				listPatrol(this.queryParams).then((res) =>{
					this.finished = false;
					this.patrolList = this.patrolList.concat(res.rows);
					this.total = res.total;
					this.patrolList.forEach((item) => {
						item.color = "#FFF";
						if (item.type === 1) {
							item.bgColor = "#f1b01a";
							item.nameStatus = "专业巡检"
						} else if (item.type === 0) {
							item.bgColor = "#1771f7";
							item.nameStatus = "定期巡检"
						}
					})
				})
			},
			//前往详情页
			goItem(id) {
				this.$tab.navigateTo("/pages/work/patrol/detailsPatrol?id=" + id);
			},
		}
	}
</script>

<style>
	/* 卡片的样式 start */
	.card-group .cu-card .cu-item {
		box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
	}

	.card-group .card-title {
		left: 20px !important;
		color: #333;
		font-weight: 600;
		display: flex;
		justify-content: space-between;
		width: calc(100% - 20px) !important;
	}

	.card-group .card-title .label-btn {
		margin: 0;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		border-top-left-radius: 16px;
		border-bottom-left-radius: 16px;
		letter-spacing: 1px;
	}

	.card-group .cu-list.menu-avatar>.cu-item {
		height: 50px;
	}

	.card-group .cu-list.menu-avatar>.cu-item:after {
		border-bottom: none !important;
	}

	.card-group .content-container {
		padding-left: 20px;
		color: #909399;
		margin-bottom: 6px;
	}

	.card-group .content-container .text-content .iconfont {
		font-size: 16px;
		margin-right: 4px;
	}

	.card-group .content-container .text-content .text-description {
		font-size: 14px;
	}

	.card-group .text-bottom {
		margin: 0 20px;
		border-top: 1px dotted #aaa;
		padding: 6px 0;
	}

	/* 卡片的样式 end */

	/* 下拉加载提示字的样式 end */
	.loading-tip {
		font-size: 12px;
		color: #666;
		padding-bottom: 12px;
		text-align: center;
	}
</style>