smartSchoolClockApp/pages/particulars/particulars.vue

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

		<!-- 规则列表区域 -->
		<view class="list" v-if="list.length">
			<!-- 每一个规则区域 -->
			<view class="box" v-for="(item, index) in list" :key="index" @click="handleLook(item)">
				<view class="icon"><img src="./imgs/rule.png" /></view>
				<view class="info">
					<view class="title">{{ item.name }}</view>
					<view class="status">
						<span class="right">全勤：{{ item.peopleTotal - item.failCount }}人</span>
						<span>异常：{{ item.failCount }}人</span>
					</view>
				</view>
				<!-- 右上角图标区域 -->
				<view class="image">
					<img v-if="item.failCount == 0" src="./imgs/finished.png" />
					<img v-else src="./imgs/unfinished.png" />
				</view>
			</view>
		</view>

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

<script>
export default {
	data() {
		return {
			// 当前页
			page: 1,
			// 总条数
			total: 0,
			// 当前时间
			nowTime: '',
			// 当前时间-每一天
			nowTime_day: '',
			// 搜索框绑定数值
			searchValue: '',
			// 列表数组
			list: [],
			type: ''
		}
	},
	onLoad(options) {
		if (options.nowTime_day) {
			this.nowTime_day = options.nowTime_day
		}
		this.type = options.type
		if (this.type == 1) {
			uni.setNavigationBarTitle({
				title: '日汇总明细'
			})
		} else {
			uni.setNavigationBarTitle({
				title: '月汇总明细'
			})
		}
		this.getTime()
		this.getData()
	},
	onReachBottom() {
		if (this.list.length < this.total) {
			this.page++
			this.getData()
		} else {
			uni.showToast({
				title: '没有更多数据了',
				icon: 'none'
			})
		}
	},
	methods: {
		// 获取当前年 月 日
		getTime() {
			let date = new Date()
			let year = date.getFullYear()
			let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
			let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
			this.nowTime = year + '-' + month + '-' + day + ' ' + '00:00:00'
		},
		// 获取列表数据
		async getData() {
			let res = await this.$myRequest_clockIn({
				url: '/attendance/api/sign/check/in/summary',
				data: {
					name: this.searchValue,
					page: this.page,
					time: this.type == 1 ? this.nowTime_day : this.nowTime,
					type: this.type
				}
			})
			// console.log(res);
			if (res.code == 200) {
				this.list = [...this.list, ...res.data.list]
				this.total = res.data.total
			}
		},

		// 点击每一个规则回调
		handleLook(item) {
			// console.log(item);
			let info = JSON.stringify(item)
			uni.navigateTo({
				url: `/pages/rulesDetail/rulesDetail?info=${info}`
			})
		},
		// 搜索框输入时的回调
		input(res) {
			this.list = []
			this.page = 1
			this.getData()
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-width: 100vw;
	min-height: 100vh;
	background-color: #f2f2f2;

	.placeholder {
		height: 20rpx;
	}

	.search {
		margin: 0 auto;
		width: 690rpx;
		height: 90rpx;
		border-radius: 171rpx;
		background-color: #fff;
	}

	.list {
		margin-top: 20rpx;
		padding-bottom: 30rpx;

		.box {
			display: flex;
			margin: 0 auto;
			margin-bottom: 20rpx;
			width: 690rpx;
			height: 130rpx;
			background-color: #fff;

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

				img {
					width: 60rpx;
					height: 60rpx;
				}
			}

			.info {
				flex: 6;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;

				.title {
					font-size: 30rpx;
				}

				.status {
					font-size: 24rpx;
					font-weight: 500;
					color: #a6a6a6;

					.right {
						margin-right: 20rpx;
					}
				}
			}

			.image {
				margin-top: -5rpx;
				margin-right: -5rpx;
				width: 83rpx;
				height: 83rpx;

				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.list2 {
		margin-top: 260rpx;
		text-align: center;

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

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

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