ParkApp/punch/comps/punch-out/punch-out.vue

<template>
	<view class="">
		<!-- 休息日 -->
		<view class="" style="padding-top: 300rpx;" v-if="status==0">
			<u-empty icon-size="300" text="今天不上班，要好好休息哟~" src="/punch/static/icon/rest.png">
				<view style="text-decoration: underline;" class="margin-top-30 base-color flex" slot="bottom">
					<navigator url="/punch/pages/punch-list/punch-list" hover-class="none">打卡记录</navigator>
					<navigator url="/punch/pages/rule/rule" hover-class="none" style="margin-left: 30rpx;">
						打卡规则</navigator>
				</view>
			</u-empty>
		</view>

		<!-- 工作日-未打卡 -->
		<view class="card" v-else-if="status==1">
			<view class="location" @click="chooseLocation">
				<map :enable-scroll="false" class="map" :enable-zoom="false"></map>
				<view class="label" style="position: relative;">
					<u-icon name="map-fill" size="80" color="#5064eb"></u-icon>
					<view class="text-bold text-cut-1 margin-top-10">{{location.address}}</view>

					<view v-if="$isEmpty(remark)" @click.stop="remarkShow=true" class="add-remark">添加备注...</view>

					<view @click.stop="remarkShow=true" class="remark-content" v-else>
						<view class="content text-cut-1">
							<text class="text-cut-1">{{remark}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="" style="position: fixed;bottom: 20%;left: 50%;margin-left: -130rpx;">
				<view @click="punch" class="btn-open">
					<text>{{time}}</text>
					<text >第{{records.length==0?'1':(records.length+1)}}次{{ruleOut.needPhone==1?'人脸':''}}打卡</text>
				</view>
			</view>

			<u-modal confirm-color="#5064eb" @confirm="remark=remark_tmp" :showCancelButton="true" title="备注"
				:mask-close-able="true" v-model="remarkShow">
				<view class="slot-content" style="margin:0 20rpx;">
					<u-form label-width="150" ref="uForm">
						<u-form-item :border-bottom="false">
							<u-input height="200" placeholder="请添加备注" v-model="remark_tmp" />
						</u-form-item>
					</u-form>
				</view>
			</u-modal>

		</view>

		<!-- 工作日-去打卡 -->
		<view @click="tooltipShow=false" class="form" v-else-if="status==2">
			<view class="close" @click="status=1">
				<u-icon name="close" color="#909399" size="60"></u-icon>
			</view>

			<view class="face" v-if="ruleOut.needPhone==1">
				<image :src="face" mode="scaleToFill"></image>
				<view>
					<text>人脸照片</text>
				</view>
			</view>

			<view class="face" v-else>
				<image style="width: 200rpx;height: 200rpx;" src="/punch/static/icon/punch.png" mode="widthFix"></image>
				<view>
					<text>外出打卡</text>
				</view>
			</view>

			<view class="desc">
				<view class="item">
					<text class="title">时间</text>
					<text>{{punchTime}}</text>
				</view>

				<view  class="item" id="tips1" @click.stop="showTips('tips1')">
					<text class="title">位置</text>
					<view class="text-right" style="width: 80%;">
						<text class="text-cut-1" >{{location.address}}</text>
					</view>
				</view>

				<view class="item">
					<text class="title">备注</text>
					<text>{{remark || '无备注'}}</text>
				</view>
			</view>

			<view class="submit" @click.stop="submit">
				<view class="cu-btn base-bg-color round" style="width: 100%;padding: 40rpx;">
					确认打卡
				</view>
			</view>
		</view>

		<view class="result" v-else-if="status==3">
			<image src="../../static/icon/success.png" mode=""></image>
			<text class="tips">外出打卡成功</text>

			<view class="desc">
				<view class="item" style="padding-top: 40rpx;">
					<text class="title">时间</text>
					<text>{{punchTime}}</text>
				</view>

				<view class="item" >
					<text class="title">位置</text>
					<view class="text-right" style="width: 80%;">
						<text class="text-cut-1" >{{location.address}}</text>
					</view>
				</view>

				<view class="item">
					<text class="title">备注</text>
					<text>{{remark || '无备注'}}</text>
				</view>
			</view>
		</view>
		<!-- 上传人脸照片 -->
		<u-action-sheet @click="faceSelectCallback" z-index="999999" :list="faceSelectList" v-model="faceSelectShow"></u-action-sheet>
		
		<tooltips
			 gravity="bottom"
			:tooltipShow="tooltipShow"
			:btns="tooltipBtns"
			:eleId="eleId"
			@btnClick="sortTooltipClick"></tooltips>
	</view>
</template>

<script>
	import tooltips from '@/components/tooltips/tooltips.vue'
	export default {
		components:{
			tooltips
		},
		data() {
			return {
				//提示
				tooltipShow:false,
				tooltipBtns:[''],
				eleId:"",
				
				//外出打卡规则
				ruleOut: {},
				//当天外出打卡记录
				records: [],

				//备注
				remark_tmp: '',
				remark: '',
				remarkShow: false,
				
				//打卡状态 0休息日,1工作日-未打卡 2工作日-去打卡 3工作日-打卡成功
				status: 0,
				
				//系统时间
				time: '',
				punchTime:'',
				//位置
				location: {},

				//人脸照片
				face:'',//回显人脸照片
				submitFace:'',//确认提交的人脸照片
				
				faceSelectList: [{
					text: '相册上传',
				}, {
					text: '拍照上传'
				}],
				faceSelectShow: false,
			}
		},
		props: {
			faceImg: String,
		},
		watch:{
			vuex_location(){
				this.location=this.vuex_location
			},
			faceImg(){
				this.face=this.faceImg
				this.punchTime = this.$dateTime.format()
				this.status=2
			},
		},
		created() {
			//休息日
			if (!this.vuex_punch_rules.isWork) {
				this.status = 0
				return
			}
			//工作日,外出打卡规则是当天内可以无限打卡
			//所以只要是工作日内，重新进入这个页面都是 工作日-未打卡【1】状态
			this.status = 1
			this.ruleOut = this.vuex_punch_rules ? this.vuex_punch_rules.ruleOut : {},
			this.getNowTime()
			this.getRecordByDay()
		},
		methods: {
			async submit(){
				let res=await this.$api.uploadFile.submit(this.face)
				if (!res.data) {
					this.$u.toast('人脸上传失败!')
					return
				}
				let params={
					ownerId:this.vuex_userInfo.enterpriseId,
					personId: this.vuex_userInfo.id,
					personName: this.vuex_userInfo.realName,
					personType: 0,
					deviceId: this.$u.sys().deviceId,
					longitude: this.location.longitude,
					latitude: this.location.latitude,
					locationName: this.location.address,
					checkinTime: this.punchTime,
					checkinType: 2,//外出打卡
					ruleId: this.vuex_punch_rules.id,
					note:this.remark,
					faceImg:res.data.link
				}
				this.$api.punch.save(params).then(res => {
					if (res.success == true) {
						this.status=3
					} else {
						this.$dialog.showModal(res.msg, false)
					}
				})
			},
			async getRecordByDay() {
				let params = {
					personId: this.vuex_userInfo.id,
					personType: 0
				}
				let res = await this.$api.punch.getRecordsByDate(params)
				if (res.data) {
					this.records = res.data.filter(item => {
						return item.checkinType == 2
					})
				}

			},
			getNowTime() {
				let that = this
				setInterval(() => {
					that.time = that.$dateTime.format(new Date(), 'MM:SS')
				}, 1000)
			},
			chooseLocation() {
				let that = this
				uni.chooseLocation({
					success: function(res) {
						//选择的位置与定位的距离不能超过五百米
						let distance = that.$util.calculateDistance(res.latitude, res.longitude,
							that.vuex_location.latitude, that.vuex_location.longitude)
						if (distance > 500) {
							that.$dialog.showModal('只可选500米范围内的地点', false)
							return
						}
						if (res.name) {
							that.location.address=res.name
							that.location.latitude=res.latitude
							that.location.longitude=res.longitude
						}

					}
				});
			},
			//打卡
			punch() {
				if (this.ruleOut.needPhone == 1) {
					//需要拍照打卡
					if (this.ruleOut.noteCanUseLocalPic == 1) {
						//可以上传本地照片
						this.faceSelectShow = true

					} else {
						uni.navigateTo({
							url: "/pages/my-camera/my-camera"
						})
					}
					return
				}
				//不需要拍照打卡
				this.punchTime = this.$dateTime.format()
				this.status=2
			},
			faceSelectCallback(index) {
				if (index == 0) {
					//图片上传
					//允许上传本地图片
					this.$mpi.chooseImage().then(res => {
						this.face = res[0]
						this.status = 2
					})
				} else if (index == 1) {
					//拍照上传
					uni.navigateTo({
						url: '/pages/my-camera/my-camera'
					})
				}
			},
			showTips(id){
				this.tooltipBtns=[this.location.address]
				this.tooltipShow = true;
				this.eleId =id;
			},
			sortTooltipClick(e){
				console.log(e);
			}

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.card {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100%;
		width: 100%;

		.location {
			font-size: 38rpx;
			color: #0d6d3a;
			text-align: center;

			.map {
				width: 100vw;
				height: 500rpx;
				opacity: 0.2;
			}

			.label {
				margin-top: -300rpx;

				image {
					width: 80rpx;
					height: 80rpx;
				}

				.add-remark {
					font-weight: 800;
					padding-top: 60rpx;
					color: #4a70c8;
					font-size: 28rpx;
				}

				.remark-content {
					display: flex;
					justify-content: space-between;
					background-color: #FFFFFF;
					color: #666666;
					width: 90%;
					margin: 0 auto;
					margin-top: 60rpx;
					padding: 25rpx 15rpx;
					font-size: 30rpx;
					border: 1rpx solid #e7e7e7;
					border-radius: 4rpx;

					.content {
						width: 100%;
						display: flex;
						justify-content: flex-start;
						align-items: center;
					}
				}
			}
		}

		.btn-open {
			border: 18rpx solid $base-color;
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			height: 260rpx;
			width: 260rpx;

			text:first-child {
				color: #000000;
				font-size: 56rpx;
			}

			text:last-child {
				padding-top: 10rpx;
				font-size: 26rpx;
			}
		}
	}

	.empty {
		width: 100%;
		padding-top: 300rpx;
		background-color: #FFFFFF;
	}

	.form {
		position: relative;
		width: 100%;
		height: 75vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding-bottom: 80rpx;

		.close {
			position: absolute;
			top: 50rpx;
			right: 50rpx;
		}

		.face {

			image {
				border-radius: 10rpx;
				height: 260rpx;
				width: 240rpx;
			}

			view {
				padding-top: 10rpx;
				text-align: center;
				color: $base-color;
			}
		}



		.submit {
			position: absolute;
			bottom: 0;
			left: 10%;
			right: 10%;
			margin: auto;
		}

	}

	.result {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 180rpx;

		image {
			width: 180rpx;
			height: 180rpx;
		}

		.tips {
			padding-top: 50rpx;
			font-size: 36rpx;
			color: $base-color;
			font-weight: 800;
		}
	}
	
	.desc {
		border-top: 1rpx solid $dt-border-color-sm;
		margin-top: 100rpx;
		padding: 10rpx;
		width: 70%;
	
		.item {
			display: flex;
			height: 80rpx;
			align-items: center;
			justify-content: space-between;
	
			.title {
				text-align: left;
				color: #8c8d8d;
			}
		}
	}
</style>