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

<template>
	<!-- 考勤打卡 -->
	<view class="attendance-clock">
		<view class="main-container">
			<c-navbar title="考勤打卡"> </c-navbar>
			<view class="content">
				<!--时间相差过大-->
				<excessiveDce v-if="isShow" />

				<!-- 时间相差不大  -->
				<view v-else>
					<view class="user-info-header">
						<view class="u-info">
							<userAvatar></userAvatar>
							<view class="col">
								<text class="u-name">{{ detailsInfo.name }}</text>
								<view class="u-office">
									<text class="department"> 考勤组 </text>
									<view
										:class="
											detailsInfo.isGroup === '0'
												? 'grey-txt'
												: 'position'
										"
									>
										{{ groupName }}
									</view>
								</view>
							</view>
						</view>

						<view
							class="statistics com-fun"
							@click="
								$u.route(
									'/pages/attendanceClock/statistics/attendStatistics/index'
								)
							"
						>
							<image
								class="fun-img"
								src="@/static/images/attendanceClock/statistics.png"
							></image>
							<text class="fun-txt">统计</text>
						</view>

						<view
							class="rule com-fun"
							@click="
								$u.route(
									'/pages/attendanceClock/attendanceRules/index',
									{
										nickName: detailsInfo.name,
										isGroup: detailsInfo.isGroup,
										groupName: groupName,
									}
								)
							"
						>
							<image
								class="fun-img"
								src="@/static/images/attendanceClock/rule.png"
							></image>
							<text class="fun-txt">规则</text>
						</view>
					</view>
					<!--  不在考勤组 isGroup==='0'   -->
					<notGroup
						:enterRangeCode="enterRangeCode"
						:detailsInfo="detailsInfo"
						:current="current"
						:currentTime="currentTime"
						:clockAddr="clockAddr"
						@reloadLocation="getAddrRange"
						@punchClock="punchClock"
						v-if="showNotGroup"
					></notGroup>
					<!--在考勤组-steps-->
					<clockSteps
						v-else
						:enterRangeCode="enterRangeCode"
						:detailsInfo="detailsInfo"
						:current="current"
						:currentTime="currentTime"
						:clockAddr="clockAddr"
						@reloadLocation="getAddrRange"
						@punchClock="punchClock"
					></clockSteps>
				</view>
			</view>
			<view class="footer">
				<c-button type="primary">
					<view class="dflex acenter">
						<image
							class="btn-icon"
							src="@/static/images/attendanceClock/clock-btn-icon.png"
						></image>
						打卡
					</view>
				</c-button>
				<c-button
					@click="
						$u.route(
							'/pages/attendanceClock/statistics/attendStatistics/index'
						)
					"
				>
					<view class="dflex acenter">
						<image
							class="btn-icon"
							src="@/static/images/attendanceClock/sta-btn-icon.png"
						></image>
						统计
					</view>
				</c-button>
			</view>
		</view>

		<u-modal
			@close="isShowCard = false"
			@confirm="isShowCard = false"
			closeOnClickOverlay
			confirmText="关闭"
			:show="isShowCard"
		>
			<view class="punch-container">
				<image
					class="punch-img"
					v-if="punchStatus"
					src="@/static/images/attendanceClock/punch-success.png"
				></image>
				<image
					class="punch-img"
					v-else
					src="@/static/images/attendanceClock/punch-fail.png"
				></image>
				<view
					:class="
						punchStatus ? 'punch-footer-success' : 'punch-footer-fail'
					"
				>
					<view class="punch-time">
						{{ punchServerTime }}
					</view>
					<view class="class-txt">
						{{ clockTxt }}
					</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
import userAvatar from '@/pages/my/userAvatar.vue';
import { getLocation } from '@/utils/getLocation';
import { userCheck, check, getLock } from '@/api/attendanceClock';
import clockSteps from '@/pages/attendanceClock/com/clock-steps.vue'; // 在考勤组
import notGroup from '@/pages/attendanceClock/com/notGroup.vue'; // 不在考勤组
import excessiveDce from '@/pages/attendanceClock/com/excessiveDce.vue'; // 时间相差过大显示的页面

export default {
	name: 'attendanceClock',
	components: {
		userAvatar,
		clockSteps,
		notGroup,
		excessiveDce,
	},
	data() {
		return {
			clockType: '', //0上班,1下班,2更新打卡
			isShowCard: false, // 显示打卡后的提示
			punchStatus: false, // 打卡后的状态
			punchServerTime: '', // MM:ss 打卡成功/失败后的时间
			clockAddr: '', // 地点名
			detailsInfo: {}, // 详情
			enterRangeCode: '', // 0不在范围内 1在范围内
			isShow: false, // 是否显示时间差距大的提示
			currentTime: '', //hh:MM:ss 本机时间
			serverTime: '', //yyyy-mm-dd hh:MM:ss 服务器时间
			localTime: '', //yyyy-mm-dd hh:MM:ss 本地时间
		};
	},
	computed: {
		clockTxt() {
			const { clockType, punchStatus } = this; //0上班,1下班,2更新打卡
			const status = punchStatus ? '成功' : '失败';
			const types = {
				0: '上班打卡',
				1: '下班打卡',
				2: '更新打卡',
			};
			return types[clockType] + status;
		},
		showNotGroup() {
			const isGroup = this.detailsInfo?.isGroup;
			return isGroup === '0'; // 不在考勤组 并且 显示
		},
		current() {
			const clockInDetailVO = this.detailsInfo?.clockInDetailVO || {};
			if (clockInDetailVO.status) {
				// 已有上班打卡的状态 或者 时间(不在考勤组打卡后没有状态)
				return 1;
			}
			return 0;
		},
		groupName() {
			const isGroup = this.detailsInfo.isGroup; // 是否加入考勤组 0未加入 1加入
			if (isGroup === '1') {
				return this.detailsInfo.groupName;
			}
			return '未设置';
		},
	},
	onShow() {
		this.getCheckInfo(); // 获取打卡页信息
		this.getAddrRange(); // 获取定位/打卡范围
		this.timeRun(); // 时间
	},
	onUnload() {
		// 页面卸载
		clearInterval(this.timer);
	},
	methods: {
		async punchClock(type) {
			try {
				// 打卡
				this.clockType = type;
				const params = await this.getPosition(); // 返回定位经纬度
				uni.$c.loading('打卡中');
				const res = await userCheck(params);
				uni.hideLoading();
				const sDate = res.header.date;
				this.punchServerTime = uni.$u.timeFormat(sDate, 'hh:MM');
				this.punchStatus = true; // 打卡成功
				this.isShowCard = true; //打开mdl
				await this.getCheckInfo(); // 刷新
			} catch (e) {
				uni.hideLoading();
				this.punchStatus = false; // 打卡失败
				throw new Error(e);
			}
		},
		thereIsAGap(serverDateTime) {
			// 判断服务器时间跟本地时间相差
			this.isShow = false;
			if (!serverDateTime) {
				return;
			}
			const curDate = +new Date(); // 当前时间
			const sDate = +new Date(serverDateTime); // 服务器上时间(会慢3-5秒)
			const difference = Math.abs(curDate - sDate); // 时间差
			const maxTime = 1000 * 60 * 60; // 一小时
			if (difference > maxTime) {
				this.serverTime = uni.$u.timeFormat(
					serverDateTime,
					'yyyy-mm-dd hh:MM:ss'
				);
				this.localTime = uni.$u.timeFormat(
					new Date(),
					'yyyy-mm-dd hh:MM:ss'
				);
				this.isShow = true;
			}
		},
		async getCheckInfo() {
			// 获取打卡页信息
			const res = await check(); // 详情
			this.detailsInfo = res.data.data || {};
			const sDate = res.header.date;
			const serverDateTime = sDate ? +new Date(sDate) : '';
			this.thereIsAGap(serverDateTime); // 本地date跟服务器上对比
		},
		async getAddrRange() {
			// 根据经纬度判断是否进入打卡范围
			try {
				const params = await this.getPosition(); // 获取定位
				uni.$c.loading();
				const { data } = await getLock(params); // 获取当前定位是否进入考勤范围
				uni.hideLoading();
				this.enterRangeCode = data.code; // 0不在范围内 1在范围内
				this.clockAddr = data.clockAddr; // 地点名
			} catch (e) {
				uni.hideLoading();
				throw new Error(e);
			}
		},
		async getPosition() {
			// 获取定位
			try {
				uni.$c.loading('正在获取定位');
				const res = await getLocation({
					type: 'gcj02', //  wgs84 返回 gps 坐标，gcj02 返回国测局坐标
					isHighAccuracy: true, // 	开启高精度定位
				}); // 获取定位
				uni.hideLoading();
				const { latitude, longitude } = res;
				const params = {
					pointLat: latitude,
					pointLong: longitude,
				};
				return params;
			} catch (e) {
				uni.hideLoading();
				throw new Error(e);
			}
		},
		getCurrentTime() {
			const timeStr = uni.$u.timeFormat(+new Date(), 'hh:MM:ss');
			this.currentTime = timeStr;
		},
		timeRun() {
			this.getCurrentTime();
			clearInterval(this.timer);
			this.timer = setInterval(() => {
				this.getCurrentTime();
			}, 1000);
		},
	},
};
</script>

<style scoped lang="scss">
.attendance-clock {
	.main-container {
		height: 100%;
		display: flex;
		flex-direction: column;

		.content {
			padding: 28rpx;
			flex: 1;
			overflow-y: auto;

			.user-info-header {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #fff;
				padding: 30rpx;
				border-radius: $bd-radius;
				height: 70px;
				margin-bottom: 28rpx;

				.u-info {
					display: flex;
					align-items: center;
				}

				.com-fun {
					display: flex;
					align-items: center;
					padding: 20rpx;
					border-radius: 38rpx;
					background: #f8f9fc;
					opacity: 1;
					.fun-img {
						width: 30rpx;
						height: 30rpx;
						margin-right: 10rpx;
					}
					.fun-txt {
						color: #000048;
						font-size: 13px;
					}
				}

				.col {
					display: flex;
					flex-direction: column;
					margin-left: 20rpx;

					.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);
						}
					}
				}
			}
		}
		.footer {
			display: flex;
			margin-bottom: 20rpx;
			.c-button {
				flex: 1;
			}
			.btn-icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 5px;
			}
		}
	}

	.punch-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		.punch-img {
			width: 156px;
			height: 127px;
		}

		.punch-time {
			font-size: 36px;
			margin-bottom: 40rpx;
		}

		.punch-footer-success {
			color: #436ff6;
			text-align: center;
		}
		.punch-footer-fail {
			color: #7b7e8c;
			text-align: center;
		}

		.class-txt {
			font-size: 16px;
		}
	}
}
</style>