smartSchoolClockApp/pages/ruleSet/ruleSet.vue

<template>
	<view class="container">
		<view class="placeholder"></view>
		<!-- 头部新增规则区域 -->
		<view class="add" @click="toPageAddRules">
			<view class="icon"><img src="../../static/imgs/add.png" /></view>
			<view class="title">新增规则</view>
		</view>

		<!-- 具体规则区域 -->
		<view class="rules">
			<!-- 每一个规则区域 -->
			<view class="box" v-for="item in list" :key="item.id" @click="toPageEditRules(item.id)">
				<view class="box_title">
					<view class="icon"><img src="../../static/imgs/my1.png" /></view>
					<view class="msg">{{ item.name }}</view>
					<view class="right"><img src="../../static/imgs/right.png" /></view>
				</view>

				<view class="box_info">考勤组：{{ item.groups }}</view>

				<view class="box_info">
					<span>时 间：{{ item.temList.join('，') }}</span>
					<span v-for="(time_item, index) in item.periods" :key="index">{{ format_time(time_item.beginTime) }}-{{ format_time(time_item.endTime) }}</span>
				</view>

				<view class="box_info">打卡地点：{{ item.locations }}</view>

				<view class="box_info">提前通知：提前{{ item.noticeTime }}分钟通知</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 规则列表数组
			list: []
		}
	},
	onShow() {
		// 清空缓存
		uni.removeStorageSync('flag_place')
		uni.removeStorageSync('flag')
		uni.removeStorageSync('chooseList')
		uni.removeStorageSync('ruleTime')
		// 获取最新打卡规则列表数据
		this.getRuleList()
	},
	methods: {
		// 获取打卡规则列表数据
		async getRuleList() {
			let res = await this.$myRequest_clockIn({
				url: '/attendance/api/settings/rule/list'
			})
			// console.log(res);
			if (res.code == 200) {
				this.list = res.data.list
				this.list.forEach(ele => {
					ele.groups = ele.groups.join('，')
					ele.locations = ele.locations.join('，')
					ele.dayOfWeeks.sort((a, b) => {
						return a - b
					})
					let arr = ['', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']
					ele.temList = ele.dayOfWeeks.map(item => {
						return (item = arr[item])
					})
				})
			}
		},
		// 点击每一项跳转编辑规则页面
		toPageEditRules(id) {
			// console.log(id);
			uni.navigateTo({
				url: `/pages/editRules/editRules?id=${id}`
			})
		},
		// 新增规则跳转页面回调
		toPageAddRules() {
			uni.navigateTo({
				url: '/pages/addRules/addRules'
			})
		},
		// 格式化时间
		format_time(timestamp) {
			//时间戳为10位需*1000，时间戳为13位的话不需乘1000
			var date = new Date(timestamp)
			var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
			var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
			let strDate = h + m
			return strDate
		}
	}
}
</script>

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

	.placeholder {
		height: 30rpx;
	}

	.add {
		margin-bottom: 30rpx;
		display: flex;
		width: 750rpx;
		height: 110rpx;
		background-color: #fff;

		.icon {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 88rpx;

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

		.title {
			line-height: 110rpx;
			font-size: 30rpx;
			font-weight: 400;
			color: #0082fc;
		}
	}

	.rules {
		width: 750rpx;

		.box {
			padding: 0 30rpx;
			margin-bottom: 20rpx;
			height: 348rpx;
			background-color: #fff;

			.box_title {
				display: flex;
				height: 90rpx;

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

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

				.msg {
					flex: 10;
					line-height: 90rpx;
					font-size: 30rpx;
					font-weight: 400;
				}

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

					img {
						width: 16rpx;
						height: 25rpx;
					}
				}
			}

			.box_info {
				display: flex;
				margin: 15rpx 0;
				height: 44rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #808080;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;

				span {
					margin-right: 10rpx;
				}
			}
		}
	}
}
</style>