waterElectricityMinApp/pagesClockIn/rulesDetail/rulesDetail.vue

<template>
	<view class="container">
		<!-- 顶部搜索框区域 -->
		<view class="search">
			<uni-search-bar bgColor="#fff" placeholder="请输入名字或院系" cancelButton="none" v-model="searchValue" @input="input"></uni-search-bar>
		</view>

		<view class="list">
			<!-- 分段器区域 -->
			<view class="control">
				<uni-segmented-control :current="current" :values="items" styleType="text" @clickItem="onClickItem" activeColor="#0082FC"></uni-segmented-control>
			</view>
			<!-- 列表区域 -->
			<view class="listbox" v-if="list.length">
				<!-- 每一个盒子区域 -->
				<view class="item" v-for="item in list" :key="item.id" @click="handleGoStatDetail(item.userId)">
					<view class="left">
						<img mode="aspectFill" :src="item.headImage || '../static/imgs/headImage.png'" />
					</view>
					<view class="center">
						<view class="name">
							{{ item.name }}
						</view>
						<view class="college">
							{{ item.college ? item.college : '南昌交通学院' }}
						</view>
					</view>
					<view class="right">
						{{ item.status == 4 ? '正常' : '缺卡' }}
					</view>
				</view>
			</view>

			<view class="listbox2" v-else>
				<img src="../static/imgs/nodata.png" />
				<view class="info">暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 总人数
			peopleTotal: 0,
			// 打卡失败人数
			failCount: 0,
			// 打卡成功人数
			successCount: 0,
			// 搜索框绑定值
			searchValue: '',
			// 分段器绑定数组
			items: ['打卡成功', '打卡失败'],
			// 当前分段器所在的索引
			current: 0,
			// 列表数组
			list: [],
			// 规则ID
			taskId: '',
			// 打卡状态 3代表失败 4代表成功
			status: 4,
			// 当前页
			page: 1,
			// 列表总条数
			total: 0
		}
	},
	onLoad(options) {
		let info = JSON.parse(options.info)
		// console.log(info);
		this.peopleTotal = info.peopleTotal
		this.failCount = info.failCount
		this.successCount = info.peopleTotal - info.failCount
		this.items[0] = `打卡成功（${this.successCount}/${this.peopleTotal}人）`
		this.items[1] = `打卡失败（${this.failCount}/${this.peopleTotal}人）`
		this.taskId = info.taskId
		this.getData()
	},
	onReachBottom() {
		if (this.list.length < this.total) {
			this.page++
			this.getData()
		} else {
			uni.showToast({
				title: '没有更多数据了',
				icon: 'none'
			})
		}
	},
	methods: {
		handleGoStatDetail(id) {
			// console.log(id);
			uni.navigateTo({
				url: `/pagesClockIn/statDetail/statDetail?id=${id}`
			})
		},
		// 获取列表数据
		async getData() {
			let res = await this.$myRequest_clockIn({
				url: '/attendance/api/sign/check/in/rule',
				data: {
					name: this.searchValue,
					page: this.page,
					status: this.status,
					taskId: this.taskId
				}
			})
			// console.log(res);
			if (res.code == 200) {
				this.total = res.data.total
				this.list = [...this.list, ...res.data.list]
			}
		},
		// 点击分段器回调
		onClickItem(e) {
			// console.log(e.currentIndex);
			this.list = []
			this.page = 1
			if (e.currentIndex == 0) {
				this.status = 4
			} else {
				this.status = 3
			}
			this.getData()
		},
		// 搜索框输入时的回调
		input() {
			this.list = []
			this.page = 1
			this.getData()
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	padding-top: 20rpx;
	height: 100vh;
	background-color: #f2f2f2;

	.search {
		width: 750rpx;
		height: 90rpx;
		border-radius: 171rpx;
		background-color: #fff;
	}

	.list {
		margin-top: 20rpx;
		width: 750rpx;
		background-color: #fff;

		.control {
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: 750rpx;
			height: 102rpx;
		}

		.listbox {
			.item {
				display: flex;
				align-items: center;
				margin: 0 30rpx;
				height: 114rpx;
				border-bottom: 1rpx solid #e5e5e5;
				background-color: #fff;

				.left {
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;

					img {
						width: 70rpx;
						height: 70rpx;
						border-radius: 35rpx;
					}
				}

				.center {
					flex: 5;
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					margin-left: 10rpx;
					height: 90rpx;

					.name {
						font-size: 28rpx;
					}

					.college {
						font-size: 24rpx;
						color: #808080;
					}
				}

				.right {
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;
				}
			}
		}

		.listbox2 {
			margin-top: 230rpx;
			text-align: center;

			img {
				width: 480rpx;
				height: 508rpx;
			}

			.info {
				color: #5792f0;
			}
		}
	}
}

// 解决输入框不居中问题
::v-deep .uni-searchbar {
	padding: 10rpx;
}
</style>