ParkApp/punch/pages/rule/rule.vue

<template>
	<view class="safe-area-inset-bottom" @click="tooltipShow=false">
		<view class="card">
			<view class="flex">
				<view class="avatar">
					<open-data  style="width: 120rpx;height: 120rpx; " type="userAvatarUrl"></open-data>
				</view>
				<view class="name">
					<text>{{userInfo.realName || '黄明潘'}}</text>
				</view>
			</view>
			<view class="desc">
				<text>打卡规则：{{ruleTimes[0].workTime}} 至 {{ruleTimes[0].offWorkTime}}</text>
			</view>
		</view>
		
		<view class="card" style="padding-top: 20rpx;">
			<view class="title">
				<text>打卡时间</text>
			</view>
			<view class="padding-top-20">
				<text class="text-bold">上下班时间</text>
			</view>
			<view class="tag-time" >
				<view class="left">
					<view class="margin-10" v-for="(item,index) in weeks" :key="index">
						<u-tag mode="plain"  :text="switchWeek(item)" type="success" />
					</view>
				</view>
				<view class="right">
					<text>{{ruleTimes[0].workTime}} ~ {{ruleTimes[0].offWorkTime}}</text>
				</view>
			</view>
	
			<view class="padding-top-30">
				<text class="text-bold">特殊日期</text>
			</view>
			<view class="tag-time "  style="border-bottom: 1rpx dashed #DEDEDE;padding:20rpx 0 10rpx;">
				<view class="left" style="width: 80%;">
					<view v-if="item.isMust==1" class="margin-10" @click.stop="showTips(item,1)" :id="'id'+item.id" v-for="(item,index) in ruleSpecTimes" :key="index">
						<u-tag mode="plain" :text="item.date" type="primary" />
					</view>
				</view>
				<view class="right" style="width: 20%;">
					<text>必须打卡</text>
				</view>
			</view>
			<view class="tag-time " style="padding:10rpx 0 10rpx;">
				<view class="left" style="width: 80%;" >
					<view v-if="item.isMust==0" class="margin-10" v-for="(item,index) in ruleSpecTimes" :key="index">
						<u-tag mode="plain"  :text="item.date" type="error" />
					</view>
				</view>
				<view class="right" style="width: 20%;">
					<text>无须打卡</text>
				</view>
			</view>
			
			<view class="padding-top-20" v-if="ruleTimes[0].allowFlex==1">
				<view class="">
					<text class="text-bold">弹性时间</text>
				</view>
				<view style="margin: 20rpx 10rpx;" >
					<text class="cuIcon-title margin-right-10"></text>
					<text>允许迟到{{ruleTimes[0].flexOnDutyTime}}分钟</text>
				</view>
				<view style="margin: 20rpx 10rpx;" >
					<text class="cuIcon-title margin-right-10"></text>
					<text>允许早退{{ruleTimes[0].flexOffDutyTime}}分钟</text>
				</view>
			</view>
		</view>
		
		<view class="card" style="padding-top: 20rpx;">
			<view class="title">
				<text>打卡范围</text>
			</view>
			<view class="padding-top-20" v-if="!$isEmpty(locations)">
				<view class="">
					<text class="text-bold">打卡地点</text>
				</view>
				<view class="tag-time">
					<view class="left" style="width: 100%;">
						<view class="cu-tag line-green  round" :id="'id'+item.id" @click.stop="showTips(item,2)" style="margin: 10rpx 10rpx 10rpx 0;" v-for="(item,index) in locations" :key="index">
							<u-icon name="map-fill"></u-icon>
							<text class="margin-left-10">{{item.address}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="padding-top-20" v-if="!$isEmpty(wifiList)">
				<view class="">
					<text class="text-bold">打卡WiFi</text>
				</view>
				<view class="tag-time" >
					<view class="left" style="width: 100%;">
						<view class="cu-tag line-blue  round" style="margin: 10rpx 20rpx 10rpx 0;" v-for="(item,index) in wifiList" :key="index">
							<u-icon name="wifi"></u-icon>
							<text class="margin-left-10">{{item.name}}</text>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		
		
		<view class="card" style="padding-top: 20rpx;">
			<view class="title" style="padding-bottom: 20rpx;">
				<text>其他规则</text>
			</view>
			<view v-if="vuex_punch_rules.needPhone==1" style="margin: 20rpx 10rpx;" >
				<text class="cuIcon-title margin-right-10"></text>
				<text>员工打卡必须拍照</text>
			</view>
			
			<view v-if="vuex_punch_rules.useFaceDetect==1" style="margin: 20rpx 10rpx;" >
				<text class="cuIcon-title margin-right-10"></text>
				<text>员工打卡必须进行人脸识别验证</text>
			</view>
			
			<view v-if="vuex_punch_rules.noteCanUseLocalPic==1" style="margin: 20rpx 10rpx;" >
				<text class="cuIcon-title margin-right-10"></text>
				<text>备注允许上传图片</text>
			</view>
			
			<view style="margin: 20rpx 10rpx;" >
				<text class="cuIcon-title margin-right-10"></text>
				<text v-if="vuex_punch_rules.optionOutRange==0">允许范围外打卡，记录为地点异常</text>
				<text v-if="vuex_punch_rules.optionOutRange==1">允许范围外打卡，记录为正常外勤</text>
				<text v-if="vuex_punch_rules.optionOutRange==2">不允许范围外打卡</text>
			</view>
		</view>
		
		<view class="statistical">
			<view  class="tag" @click="jump('/punch/pages/statistical/statistical')">
				打卡统计
			</view>
		</view>
		
		<tooltips
			 gravity="top"
			: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 {
				userInfo:{},
				//是否显示
				tooltipShow:false,
				tooltipBtns:['...'],
				//点击元素
				eleId:"",
				ruleSpecTimes:[],
				ruleTimes:[],
				locations:[],
				wifiList:[],
				weeks:[]
			}
		},
		onShow() {
			this.userInfo=getApp().globalData.userInfo
		},
		onLoad() {
			this.init()
		},
		methods: {
			jump(url){
				if (!this.$isEmpty(url)) {
					uni.navigateTo({
						url
					})
				}
			},
			init(){
				this.ruleTimes=this.vuex_punch_rules.ruleTimes
				this.ruleSpecTimes=this.vuex_punch_rules.ruleSpecTimes
				this.locations=this.vuex_punch_rules.locations
				this.wifiList=this.vuex_punch_rules.wifiList
				this.weeks=this.ruleTimes[0].workDays.split(",")
			},
			showTips(item,type){
				this.tooltipBtns=[]
				if (type==1) {
					this.tooltipBtns.push(item.beginTime)
					this.tooltipBtns.push(item.endTime)
				}else if (type==2) {
					this.tooltipBtns.push('打卡范围'+item.area+'米')
				}
				this.tooltipShow = true;
				this.eleId ='id'+item.id;
			},
			sortTooltipClick(e){
				console.log(e);
			}
		},
		computed:{
			switchWeek(){
				return (val)=>{
					val=parseInt(val)
					let week=''
					switch (val){
						case 0:
							week='星期日'
							break;
						case 1:
							week='星期一'
							break;
						case 2:
							week='星期二'
							break;
						case 3:
							week='星期三'
							break;
						case 4:
							week='星期四'
							break;
						case 5:
							week='星期五'
							break;
						case 6:
							week='星期六'
							break;
						default:
							week='未知'
							break;
					}
					return week
				}
			}
		},
	}
</script>

<style lang="scss">
	page{
		background-color: #f7f7f9;
	}
	
	.card{
		margin: 20rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		background-color: #FFFFFF;
		
		.avatar{
			display: block;
		    overflow:hidden;  
		    width: 60rpx;
		    height: 60rpx; 
		    left: 50%;  
		    border-radius: 50%;  
		}
		
		.name{
			padding-left: 15rpx;
			font-size: 34rpx;
			font-weight: 800;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
		.desc{
			padding-top: 10rpx;
			font-size: 28rpx;
			color: #717171;
			
			text{
				padding-top: 10rpx;
				display: block;
			}
		}
		
		.title{
			font-size: 32rpx;
			padding-bottom: 20rpx;
			font-weight: 800;
			color: $base-color;
			border-bottom: 1rpx solid $dt-border-color-sm;
		}
		
		.tag-time{
			padding-top: 30rpx;
			display: flex;
			
			.left{
				display: flex;
				flex-wrap: wrap;
				width: 70%;
			}
			.right{
				width: 30%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
	
	
	.statistical{
		position: fixed;
		bottom: 30%;
		right: -25rpx;
		
		.tag{
			background-color: $base-color;
			color: #FFFFFF;
			padding: 15rpx 40rpx;
			border-radius: 5000upx;
		}
	}
</style>