warst/warst-h5/pages/attendanceClock/attendanceRules/index.vue

<template>
	<view class="attendance-rules">
		<c-navbar title="考勤规则"> </c-navbar>
		<view class="content">
			<view class="u-info">
				<userAvatar></userAvatar>
				<view class="col">
					<text class="u-name">{{ detailsInfo.nickName }}</text>
					<view class="u-office">
						<text class="department"> 考勤组 </text>
						<view
							:class="
								detailsInfo.isGroup === '0' ? 'grey-txt' : 'position'
							"
						>
							{{ detailsInfo.groupName }}
						</view>
					</view>
				</view>
			</view>

			<view class="cell">
				<view class="c-header">
					<image
						class="left-icon"
						src="@/static/images/attendanceClock/kq-date.png"
					></image>
					<text class="cell-title">考勤时间</text>
				</view>
				<view class="tips">
					<text class="label">上下班时间：</text>
					<text class="value">周一、周二、周三、周四、周五</text>
				</view>
				<view class="tips">
					<text class="label">班次：</text>
					<text class="value">{{ detailsRules.checkNum }}</text>
				</view>
			</view>

			<view class="cell">
				<view class="c-header">
					<image
						class="left-icon"
						src="@/static/images/attendanceClock/pt.png"
					></image>
					<text class="cell-title">打卡点位</text>
				</view>

				<statusView v-if="pointVOS.length === 0"></statusView>
				<view
					class="point-vos"
					:key="idx"
					v-for="(item, idx) in pointVOS"
				>
					<view class="idx">{{ idx + 1 }}</view>
					<view class="right-content">
						<view v-if="item.checkPoint">
							<text class="label">考勤点位：</text>
							<text class="value">{{ item.checkPoint }}</text>
						</view>
						<view v-if="item.checkAddr">
							<text class="label">打卡地址：</text>
							<text class="value">{{ item.checkAddr }}</text>
						</view>

						<view v-if="item.checkRange">
							<text class="label">打卡范围：</text>
							<text class="value">{{ item.checkRange }}米以内</text>
						</view>
					</view>
				</view>
			</view>

			<view class="cell">
				<view class="c-header">
					<image
						class="left-icon"
						src="@/static/images/attendanceClock/rules.png"
					></image>
					<text class="cell-title">补卡规则</text>
				</view>
				<view class="tips">
					<text class="label">补卡次数：</text>
					<text class="value">
						每个月最多可提交{{ detailsRules.replaceNum || '-' }}次
					</text>
				</view>
				<view class="tips">
					<text class="label">补卡时间：</text>
					<text class="value">
						最多可申请个{{
							detailsRules.replaceTime || '-'
						}}工作日内的补卡
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import userAvatar from '@/pages/my/userAvatar.vue';
import { getCheckRule } from '@/api/attendanceClock/index.js';
import statusView from '@/components/statusView';

export default {
	name: 'attendanceRules',
	components: {
		userAvatar,
		statusView,
	},
	data() {
		return {
			detailsRules: {},
			detailsInfo: {},
		};
	},
	computed: {
		pointVOS() {
			return this.detailsRules?.pointVOS || [];
		},
	},
	onLoad(params) {
		this.detailsInfo = params;
		this.getRules();
	},
	methods: {
		async getRules() {
			const { data } = await getCheckRule();
			this.detailsRules = data || {};
		},
	},
};
</script>

<style scoped lang="scss">
.attendance-rules {
	.content {
		padding: 28rpx;

		.u-info {
			display: flex;
			align-items: center;
			background-color: #fff;
			padding: 20rpx;
			border-radius: 6px;

			.col {
				display: flex;
				flex-direction: column;
				margin-left: 20rpx;
				background-color: #fff;

				.u-name {
					font-size: 13px;
					color: #000000;
				}

				.u-office {
					display: flex;
					align-items: center;
					margin-top: 20rpx;

					.department {
						font-size: 13px;
						color: #8c93a3;
					}
					.grey-txt {
						font-size: 12px;
						color: #8c93a3;
						margin-left: 10rpx;
					}
					.position {
						color: #ff9935;
						padding: 0px 6rpx;
						font-size: 12px;
						border: 1px solid #ff9935;
						border-radius: 10rpx;
						margin-left: 10rpx;
						background-color: rgba(239, 140, 39, 0.1);
					}
				}
			}
		}

		.label {
			font-size: 13px;
			color: #152f62;
		}
		.value {
			font-size: 13px;
			color: #697c9d;
		}

		.point-vos {
			display: flex;
			align-items: center;
			background-color: #f5f6f8;
			padding: 20rpx;
			margin-top: 20rpx;
			border-radius: 6px;
			.idx {
				color: #436ff6;
				background: rgba(67, 111, 246, 0.15);
				width: 26px;
				height: 26px;
				border-radius: 50%;
				margin-right: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 13px;
			}
			.right-content {
				flex: 1;
			}
		}
		.cell {
			background-color: #fff;
			padding: 20rpx;
			border-radius: 6px;
			margin-top: 20rpx;
			.c-header {
				display: flex;
				align-items: center;
				.left-icon {
					width: 22px;
					height: 22px;
				}
				.cell-title {
					font-size: 16px;
					margin-left: 20rpx;
					color: #333333;
				}
			}

			.tips {
				margin-top: 16rpx;
				font-size: 14px;
			}
		}
	}
}
</style>