androidCnToWechatGrt/pagesClockin/index.vue

<template>
	<view class="tabPage" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='打卡' bgColor="transparent" :showback="false"></cus-header>
		<image class="topbg" :src="imgBase+'clockingin/topbg.png'" mode="widthFix"></image>
		<div class="info">
			<div class="i_avatar">
				<image :src="imgBase+'clockingin/default_avatar.png'"></image>
			</div>
			<div class="i_name_date">
				<p>{{username}}</p>
				<p class="date">{{dateweek}}</p>
			</div>
		</div>
		<div class="card">
			<div class="c_title">今日打卡</div>
			<div class="c_worktime">
				<div class="cw_pre">
					<p>上班08:30</p>
					<div class="cwp_time">
						<image :src="imgBase+'clockingin/checked_active.png'" v-if="sbClockTime"></image>
						<image :src="imgBase+'clockingin/checked_inactive.png'" v-else></image>
						<span>打卡{{sbClockTime||'- -'}}</span>
					</div>
					<div class="cwp_status" :class="{'active':sbClockTime,'inactive':!sbClockTime}">{{sbClockTime?'已打卡':'未打卡'}}</div>
				</div>
				<div class="cw_pre">
					<p>下班20:00</p>
					<div class="cwp_time">
						<image :src="imgBase+'clockingin/checked_active.png'" v-if="xbClockTime"></image>
						<image :src="imgBase+'clockingin/checked_inactive.png'" v-else></image>
						<span>{{xbClockTime||'- -'}}</span>
					</div>
					<div class="cwp_status" :class="{'active':xbClockTime,'inactive':!xbClockTime}">{{xbClockTime?'已打卡':'未打卡'}}</div>
				</div>
			</div>
			<div class="c_clock">
				<div class="cc_box" :style="{'background-image':'url('+imgBase+(canClock?'clockingin/clock_active_bg.png':'clockingin/clock_inactive_bg.png')+')'}" @tap="clock">
					<p>{{isSW?'上班':'下班'}}打卡</p>
					<p class="time">{{currentSFM}}</p>
				</div>
				<div class="cc_location">
					<image :src="imgBase+(canClock?'clockingin/location_active.png':'clockingin/location_inactive.png')"></image>
					<span v-if="canClock">已进入考勤范围：谷锐特设备自动化有限公司</span>
					<span v-else>当前定位不在考勤范围内</span>
				</div>
			</div>
		</div>
		<u-popup :show="show" @close="close" mode="center" :round="32" :customStyle="{'width':'calc(100% - 120rpx)'}">
			<div class="up_box">
				<div class="upb_close">
					<image :src="imgBase+'clockingin/close.png'" @tap="close"></image>
				</div>
				<image class="upb_text" :src="imgBase+'clockingin/clock_success.png'"></image>
				<p class="upb_time">打卡时间 {{clockTime}}</p>
				<image class="upb_img" :src="imgBase+'clockingin/clock_success2.png'"></image>
				<div class="upb_btn" @tap="close">我知道了</div>
			</div>
		</u-popup>
		<Tabbar :tabbarIndex="0"></Tabbar>
	</view>
</template>

<script>
	var timer = null;
	const QQMapWX = require('../static/lib/qqmap-wx-jssdk.min.js');
	const qqmapsdk = new QQMapWX({
	  key: 'V3NBZ-6NRKT-QOQXY-LU6RY-PNHJ5-QDBTQKEY'
	});
	import Tabbar from '@/components/CusTabbar/clock.vue'
	export default {
		components:{ Tabbar },
		data(){
			return {
				username:'',
				dateweek:'',
				sbClockTime:'',
				xbClockTime:'',
				isSW:true,//是否是上午，12点前是上午/12点前上午打过卡就是下午了，12点后是下午
				currentSFM:new Date().Format('hh:mm:ss'),
				show:false,
				canClock:false,
				clockTime:'',
				distance: null,
				targetLocation: { //谷锐特 31.962084,117.020446  /跨境电商大厦 31.865786,117.15297
					latitude: 31.865786,
					longitude: 117.15297
				},
				userInfo:null
			}
		},
		created() {
			this.getDateWeek();
			this.getCurrentSFM();
			this.getCurrentHour();
			if(uni.getStorageSync('userInfo')){
				this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
				this.username = this.userInfo.realName;
			}
		},
		onUnload() {
			clearInterval(timer)
		},
		mounted() {
			this.getCurrentLocation();
			this.getUserInfo();
		},
		methods:{
			getUserInfo(){
				this.$api.get('/wms/outsourced/attendance/getAttendanceByUserId/'+this.userInfo?.id).then(res=>{
					if(res.data.code!==0) return this.$showToast(res.data.msg)
					this.sbClockTime = res.data.data?.checkInTime;
					this.xbClockTime = res.data.data?.clockOutTime;
					if(new Date().getHours()<12&&!this.sbClockTime) this.isSW = true
					else this.isSW = false;
				})
			},
			getDateWeek(){
				let date = new Date().Format('yyyy年MM月dd日');
				let cfg = {0:'天',1:'一',2:'二',3:'三',4:'四',5:'五',6:'六'};
				let week = cfg[new Date().getDay()];
				this.dateweek = date+' 星期'+week;
			},
			getCurrentSFM(){
				timer = setInterval(()=>{
					this.currentSFM = new Date().Format('hh:mm:ss');
				},1000)
			},
			getCurrentHour(){
				this.isSW =  new Date().getHours()>12?false:true;
			},
			clock(){
				if(!this.canClock) return
				let url = this.isSW?'/wms/outsourced/attendance/checkIn':'/wms/outsourced/attendance/clockOut';
				let params = {outUserId:this.userInfo?.id};
				params[this.isSW?'checkInTime':'clockOutTime'] = new Date().Format('hh:mm');
				this.$api.post(url,params).then(res=>{
					if(res.data.code!==0) return this.$showToast(res.data.msg);
					this.clockTime = new Date().Format('hh:mm');
					this.show = true;
				})
			},
			close(){
				this.show = false;
				this.getUserInfo();
			},
			// 获取当前位置
			async getCurrentLocation() {
			  try {
				const res = await uni.getLocation({
				  type: 'gcj02 ', // 腾讯地图使用GCJ-02坐标系/
				  isHighAccuracy: true
				});
				this.calculateDistance(
				  res[1].latitude, 
				  res[1].longitude,
				  this.targetLocation.latitude,
				  this.targetLocation.longitude
				);
				console.log(this.distance,'distance');
				this.canClock = this.distance<=10;
			  } catch (err) {
				uni.showToast({
				  title: '获取位置失败，请检查权限设置',
				  icon: 'none'
				});
			  }
			},
			// 计算两点间距离
			calculateDistance(lat1, lng1, lat2, lng2) {
			  qqmapsdk.calculateDistance({
				mode: 'straight', // 直线距离
				from: `${lat1},${lng1}`,
				to: `${lat2},${lng2}`,
				success: (res) => {
				  if(res.result && res.result.elements.length > 0) {
					this.distance = res.result.elements[0].distance;
				  }
				},
				fail: (err) => {
				  uni.showToast({
					title: '距离计算失败',
					icon: 'none'
				  });
				}
			  });
			}
		}
	}
</script>

<style scoped lang="less">
	.tabPage{
		padding: 0 24rpx 188rpx;
		background: #F4F8FB;
		
		.topbg{
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 0;
		}
	
		.info{
			position: relative;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-top: 20rpx;
			padding: 48rpx 24rpx;
			display: flex;
			align-items: center;
			.i_avatar{
				width: 98rpx;
				height: 98rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.i_name_date{
				padding-left: 24rpx;
				p{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 36rpx;
					color: #1D2129;
					line-height: 36rpx;
					&.date{
						font-size: 28rpx;
						color: #657588;
						line-height: 28rpx;
						margin-top: 22rpx;
					}
				}
			}
		}
	
		.card{
			position: relative;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 44rpx 24rpx 211rpx;
			margin-top: 20rpx;
			
			.c_title{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #1D2129;
				line-height: 36rpx;
			}
			
			.c_worktime{
				margin-top: 40rpx;
				display: flex;
				justify-content: space-between;
				.cw_pre{
					width: calc(50% - 15rpx);
					background: #F5F8FA;
					border-radius: 16rpx;
					position: relative;
					padding: 36rpx 20rpx;
					box-sizing: border-box;
					&>p{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 32rpx;
						color: #1D2129;
						line-height: 32rpx;
					}
					.cwp_time{
						display: flex;
						align-items: center;
						margin-top: 32rpx;
						image{
							width: 28rpx;
							height: 28rpx;
						}
						span{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #86909C;
							line-height: 36rpx;
							margin-left: 12rpx;
						}
					}
					.cwp_status{
						width: 108rpx;
						height: 54rpx;
						border-radius: 0rpx 16rpx 0rpx 12rpx;
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 24rpx;
						line-height: 54rpx;
						text-align: center;
						position: absolute;
						top: 0;
						right: 0;
						&.active{
							color: #14D08E;
							background: rgba(20, 204, 140, 0.08);
						}
						&.inactive{
							color: #86909C;
							background: #EFEFEF;
						}
					}
				}
			}
		
			.c_clock{
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 117rpx;
				
				.cc_box{
					width: 306rpx;
					height: 306rpx;
					background-repeat: no-repeat;
					background-size: 100% 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					p{
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 40rpx;
						color: #FFFFFF;
						line-height: 56rpx;
						&.time{
							font-size: 32rpx;
							line-height: 45rpx;
							margin-top: 8px;
						}
					}
				}
				
				.cc_location{
					margin-top: 64rpx;
					display: flex;
					align-items: center;
					image{
						width: 36rpx;
						height: 36rpx;
					}
					span{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #86909C;
						line-height: 26rpx;
						margin-left: 10rpx;
					}
				}
			}
		}
	
		.up_box{
			background: linear-gradient( 134deg, #E7F4FD 0%, #FFFFFF 100%);
			border-radius: 32rpx;
			padding: 40rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			.upb_close{
				width: 100%;
				display: flex;
				justify-content: flex-end;
				image{
					width: 32rpx;
					height: 32rpx;
				}
			}
			.upb_text{
				width: 210rpx;
				height: 50rpx;
				margin-top: 16rpx;
			}
			.upb_time{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #86909C;
				line-height: 32rpx;
				margin-top: 36rpx;
			}
			.upb_img{
				width: 344rpx;
				height: 194rpx;
				margin-top: 216rpx;
			}
			.upb_btn{
				width: 446rpx;
				height: 88rpx;
				background: #0171F6;
				border-radius: 32rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 88rpx;
				text-align: center;
				margin-top: 112rpx;
				letter-spacing: 2rpx;
			}
		}
	}
</style>