building-sign/pages/worker/sign/sign.vue

<template>
	<view class="pad-x100">
		<!-- 头部 -->
		<status-nav :ifReturn="false" navBarTitle="打卡小程序" :titleColor="titleColor" :backgroudColor="backgroudColor"></status-nav>
		<view class="content">
			<!-- 打卡 -->
			<view class="sign-top font24 color-white" :style="{'padding-top':statusHeight+50+'px'}">
				<image src="/static/sign-bg.jpg" mode="aspectFill"></image>
				<view class="name font30" v-if="isLoding">{{siteInfo.name}}</view>
				<view class="sign-btn" :class="finish?'finish':''" @tap="showRadioEv">
					<text class="font56">{{finish?'已打卡':'打卡'}}</text>
					<text>{{currenTime}}</text>
				</view>
				<view class="sign-site">
					<view class="sign-time">
						<text>{{currentDate}}</text>
						<text>{{currentWeek}}</text>
					</view>
					<view class="position" v-if="isLoding">
						<view class="warning" v-if="!siteInfo.name">
							<image src="/static/icon/icon-warning.png" mode="aspectFit"></image>
							<text class="color-yellow">不在范围内</text>
						</view>
						<view class="position-btn" @tap="getLocationEv(1)">
							<image src="/static/icon/icon-position.png" mode="aspectFit"></image>
							<text>重新定位</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 打卡记录 -->
			<view class="sign-record bg-white">
				<view class="title">
					<image src="/static/icon/icon-sign.png" mode="aspectFit"></image>
					<text class="color-blue font28">今日打卡记录</text>
				</view>
				<view class="item font26" v-for="(item,index) in signList" :key="index">
					<view class="info">
						<text>{{item.type_text}}打卡：{{item.created_at.substr(item.created_at.length-8)}}</text>
						<text>打卡工地：{{item.worksite_name}}</text>
					</view>
					<view class="state" :class="item.state==1?'color-blue':''">{{item.status_text}}</view>
				</view>
				<!-- 加载更多 -->
				<view class="more-tips font24" style="margin-bottom: 15rpx;" v-if="signList.length==0">今日还未打卡</view>
			</view>
			<!-- 打卡日历 -->
			<view class="sign-calendar">
				<sign-calendar></sign-calendar>
			</view>
		</view>
		
		<!-- 打卡类型选择 -->
		<view class="pop-up-bg" v-if="showRadio">
			<view class="sign-cate bg-white">
				<view class="title font34">请确认打卡类型</view>
				<view class="txt font28">
					<view class="radio-item" @tap="changeSignType(index)" v-for="(item,index) in radioList" :key="index">
						<view :class="radioIndex==index?'checked':''"></view>
						<view>{{item.title}}</view>
					</view>
				</view>
				<!-- 审核按钮 -->
				<view class="sign-cate-btns color-white font30">
					<view class="btn" @tap="showRadio=false,radioIndex=0">取消</view>
					<view class="btn" @tap="signEv">确认</view>
				</view>
			</view>
		</view>
		
		<!-- 公告 -->
		<view class="pop-up-bg" v-if="ifNotice">
			<view class="safety-bulletin bg-white">
				<view class="title font34">公告</view>
				<view class="txt font24">
					<rich-text :nodes="notice"></rich-text>
				</view>
				<view class="close-btn font30 color-66" @tap="closeNotice">关闭</view>
			</view>
		</view>
		
		<!-- 安全告知 -->
		<view class="pop-up-bg" v-if="!isRead && safetyBulletin!==''">
			<view class="safety-bulletin bg-white">
				<view class="title font34">安全告知</view>
				<view class="txt font24">
					<rich-text :nodes="safetyBulletin"></rich-text>
				</view>
				<view class="close-btn font30 color-66" @tap="closeSafetyBulletin">关闭</view>
			</view>
		</view>
		
		<!-- 审核通知 -->
		<view class="pop-up-bg" v-if="isNotice">
			<view class="sign-cate bg-white">
				<view class="title font34">审核通知</view>
				<view class="txt notice-msg font28">不通过原因：{{noticeInfo.msg}}</view>
				<!-- 审核按钮 -->
				<view class="sign-cate-btns color-white font30">
					<view class="btn" @tap="closeEdit">取消</view>
					<view class="btn" @tap="editEv">修改</view>
				</view>
			</view>
		</view>
		
		<!-- 注册工人信息 -->
		<view class="pop-up-bg" v-if="userInfo.checking==0 && userInfo.role==0"> <!-- v-if="userInfo.checking==0 && userInfo.role==0" -->
			<view class="register-information font24 bg-white">
				<view class="item">
					<view class="title">姓名</view>
					<input class="input" type="text" v-model="registerObj.real_name">
				</view>
				<view class="item">
					<view class="title">电话号码</view>
					<input class="input" type="number" v-model="registerObj.mobile">
				</view>
				<view class="item">
					<view class="title">身份证</view>
					<input class="input" type="text" v-model="registerObj.card_number">
				</view>
				<view class="item item-other" style="align-items: flex-start;">
					<view class="title" style="margin-top: 18rpx;">身份证正面</view>
					<view class="upload-box">
						<view class="img" v-if="idImgList[0]!==''" @tap.stop="previewImage(idImgList[0])">
							<image :src="idImgList[0]" mode="widthFix"></image>
							<image class="del-btn" src="/static/icon/icon-del.png" mode="widthFix" @tap.stop="delImg(index,'positive')"></image>
						</view>
						<view class="upload-btn" @tap="changeImg('positive')" v-if="idImgList[0]==''">
							<view class="bg">
								<image src="/static/id-front.jpg" mode="aspectFill"></image>
							</view>
							<view class="icon">
								<image src="/static/icon/icon-camera.png" mode="widthFix"></image>
								<text class="font22 color-white">拍摄身份证正面</text>
							</view>
						</view>
					</view>
				</view>
				<view class="item item-other" style="align-items: flex-start;">
					<view class="title" style="margin-top: 18rpx;">身份证反面</view>
					<view class="upload-box">
						<view class="img" v-if="idImgList[1]!==''" @tap.stop="previewImage(idImgList[1])">
							<image :src="idImgList[1]" mode="widthFix"></image>
							<image class="del-btn" src="/static/icon/icon-del.png" mode="widthFix" @tap.stop="delImg(index,'back')"></image>
						</view>
						<view class="upload-btn" @tap="changeImg('back')" v-if="idImgList[1]==''">
							<view class="bg">
								<image src="/static/id-back.jpg" mode="aspectFill"></image>
							</view>
							<view class="icon">
								<image src="/static/icon/icon-camera.png" mode="widthFix"></image>
								<text class="font22 color-white">拍摄身份证反面</text>
							</view>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="title">技术岗位</view>
					<picker class="input" mode="selector" :range="positionList" @change="choicePosition" :value="positionIndex" :range-key="'name'">
						<view class="name">
							<text>{{positionList[positionIndex].name}}</text>
							<image src="/static/icon/icon-arrow-01.png" mode="aspectFit"></image>
						</view>
					</picker>
				</view>
				<view class="item">
					<view class="title">工资</view>
					<input class="input" type="number" v-model="registerObj.pay">
				</view>
				<view class="item">
					<view class="title">紧急联系人</view>
					<input class="input" type="text" v-model="registerObj.emergency_contact">
				</view>
				<view class="item">
					<view class="title">联系人电话</view>
					<input class="input" type="number" v-model="registerObj.emergency_phone">
				</view>
				<view class="item">
					<view class="title">银行卡户名</view>
					<input class="input" type="text" v-model="registerObj.bank_card_name">
				</view>
				<view class="item">
					<view class="title">银行卡号</view>
					<input class="input" type="number" v-model="registerObj.bank_card_number">
				</view>
				<view class="item">
					<view class="title">开户行</view>
					<input class="input" type="text" v-model="registerObj.bank_name">
				</view>
				<view class="item item-other" style="align-items: flex-start;">
					<view class="title" style="margin-top: 18rpx;">银行卡拍照</view>
					<view class="upload-box">
						<view class="img" v-if="registerObj.bank_img!==''" @tap.stop="previewImage(registerObj.bank_img)">
							<image :src="registerObj.bank_img" mode="widthFix"></image>
							<image class="del-btn" src="/static/icon/icon-del.png" mode="widthFix" @tap.stop="delImg(index,'bank')"></image>
						</view>
						<view class="upload-btn" @tap="changeImg('bank')" v-if="registerObj.bank_img==''">
							<view class="bg">
								<image src="/static/bank.jpg" mode="aspectFill"></image>
							</view>
							<view class="icon">
								<image src="/static/icon/icon-camera.png" mode="widthFix"></image>
								<text class="font22 color-white">拍摄银行卡</text>
							</view>
						</view>
					</view>
				</view>
				<view class="item item-other" style="align-items: flex-start;">
					<view class="title" style="margin-top: 18rpx;">工作经验</view>
					<textarea class="input textarea" v-model="registerObj.experience"></textarea> 
				</view>
				<view class="item item-other" style="align-items: flex-start;">
					<view class="title" style="margin-top: 18rpx;">现住地址</view>
					<view class="addr-box">
						<picker mode="region" @change="changeAddress">
							<view class="addr-input">
								<view class="input-box">
									<input class="input-flex clips1" type="text" v-model="province" disabled="true">
									<image src="/static/icon/icon-arrow-01.png" mode="widthFix"></image>
								</view>
								<view class="input-box">
									<input class="input-flex clips1" type="text" v-model="city" disabled="true">
									<image src="/static/icon/icon-arrow-01.png" mode="widthFix"></image>
								</view>
								<view class="input-box">
									<input class="input-flex clips1" type="text" v-model="county" disabled="true">
									<image src="/static/icon/icon-arrow-01.png" mode="widthFix"></image>
								</view>
							</view>
						</picker>
						<input class="input" type="text" v-model="registerObj.address" placeholder="请填写详细地址">
					</view>
				</view>
				<view class="submit-btn bg-blue color-white font30" @tap="submitRegister">提交</view>
			</view>
		</view>
		
		<!-- 尾部 -->
		<tabbar :userType="userType"></tabbar>
	</view>
</template>
<script>
	import signCalendar from '@/components/sign-calendar/sign-calendar';
	import tabbar from '@/components/tabbar/tabbar';
	export default {
		components:{
			signCalendar,
			tabbar
		},
		data() {
			return {
				statusHeight:uni.getSystemInfoSync().statusBarHeight, //状态栏高度
				userType:'', //账户类型 工人：worker 负责人：director
				frontColor:'#ffffff', //状态栏文字颜色
				backgroudColor:'none', //导航栏背景
				titleColor:'#ffffff', //导航栏颜色
				radioList:[
					{title:'上午上班打卡',type:'in'},
					{title:'上午下班打卡',type:'out'},
					{title:'下午上班打卡',type:'in'},
					{title:'下午下班打卡',type:'out'}
				],//打卡类型
				radioIndex:0, //当前选择
				showRadio:false, //是否显示上班类型
				currentDate:'', //当前日期
				currentWeek:'', //当前星期几
				currenTime:'', //实时时间
				siteInfo:{}, //定位工地
				signList:[], //打卡记录
				safetyBulletin:'', //安全公告
				isRead:true, //是否已读安全公告
				userInfo:{
					checking:-1,
					role:-1
				}, //用户信息
				registerObj:{
					real_name:'',
					mobile:'',
					card_number:'',
					pay:'',
					position:-1,
					emergency_contact:'',
					emergency_phone:'',
					bank_card_name:'',
					bank_card_number:'',
					bank_name:'',
					worksite_id:-1,
					experience:'',
					address:'',
					bank_img:'',
				}, //工人注册信息
				idImgList:['',''], //身份证照片
				positionList:[], //技术岗位
				positionIndex:0, //当前技术岗位
				finish:false, //是否完成打卡
				flag:true, //是否能提交
				isLoding:false, //是否加载完成
				timer:false, //计时器状态
				noticeInfo:'', //审核通知
				isNotice:false, //是否显示通知
				notice:'', //公告
				ifNotice:false, //是否显示公告
				stagingImg:'', //暂存img 
				
				province:'北京市', //省
				city:'北京市', //市
				county:'东城区',//区
			}
		},
		onPageScroll(object){
			if(object.scrollTop >= 5){
				this.frontColor = '#000000';
				this.backgroudColor = '#ffffff';
				this.titleColor = '#3333333';
				// 改变状态栏
				this.changeStatusNav();
			}
			if(object.scrollTop <= 0){
				this.frontColor = '#ffffff';
				this.backgroudColor = 'none';
				this.titleColor = '#ffffff';
				// 改变状态栏
				this.changeStatusNav();
			}
		},
		onLoad(op) {
			if(op.userType){
				this.userType = op.userType;
			}
			if(op.apply=='join'){
				// 获取用户信息
				this.getUserInfo();
			}
			// 改变状态栏
			this.changeStatusNav();
			// 获取位置信息
			this.getLocationEv(0);
			// 判断是否查看安全公告
			if(uni.getStorageSync('isRead')){
				// 查询是否有通知
				this.getNoticeInfo();
			}else{
				this.isRead = false;
				// 获取安全告知
				this.getSafetyBulletin();
			}
		},
		onShow() {
			// 获取打卡信息
			this.getSignInfo();
			// 获取打卡记录
			this.getSignList();
		},
		onHide() {
			// 缓存公告为未读
			uni.setStorageSync('ifNotice','notNotice');
		},
		onShareAppMessage(res) {
			let shareObj = {
				title:'工地打卡',
				path: '/pages/pagehome/pagehome',
				imageUrl:'/static/share-logo.jpg',
			}
			// 返回shareObj
			return shareObj;
		},
		onPullDownRefresh() {
			// 获取工资列表
			this.getSignList();	
			// 关闭下拉刷新
			uni.stopPullDownRefresh();
		},
		methods: {
			// 改变状态栏
			changeStatusNav(){
				wx.setNavigationBarColor({
				  frontColor: this.frontColor,
				  backgroundColor: 'none',
				})
			},
			
			// 获取用户信息
			getUserInfo(){
				this.$requst.post('/api/v1/user/info').then(res=>{
					if(res.code==0){
						console.log(res,'用户信息');
						this.userInfo = res.data;
						// 获取技术岗位
						if(this.userInfo.checking==0 && this.userInfo.role==0){
							this.getPositionList();
						}
					}
				})
			},
			
			// 选择省市区
			changeAddress(e){
				this.province = e.detail.value[0];
				this.city = e.detail.value[1];
				this.county = e.detail.value[2];
			},
			
			// 获取公告
			getNotice(){
				this.$requst.get('/api/v1/index/notice').then(res=>{
					if(res.code==0){
						console.log(res,'公告');
						if(res.data.status==1){
							this.ifNotice = true;
							uni.setStorageSync('ifNotice','hasNotice');
							this.notice = res.data.content;
						}else{
							this.ifNotice = false;
						}
					}
				})
			},
			
			// 关闭公告
			closeNotice(){
				this.ifNotice = false;
			},
			
			// 查询是否有通知
			getNoticeInfo(){
				this.$requst.get('/api/v1/common/notice').then(res=>{
					if(res.code==0){
						console.log(res,'通知消息');
						if(res.data.notice==1){
							this.isNotice = true;
							this.noticeInfo = res.data;
						}else{
							this.isNotice = false;
							// 判断是否已经查看公告
							if(uni.getStorageSync('ifNotice')!=='hasNotice'){
								// 获取公告
								this.getNotice();
							}
						}
					}
				})
			},
			// 关闭通知
			closeEdit(){
				this.isNotice = false;
				// 判断是否已经查看公告
				if(uni.getStorageSync('ifNotice')!=='hasNotice'){
					// 获取公告
					this.getNotice();
				}
			},
			
			// 修改审核资料
			editEv(){
				// 获取用户信息
				this.getUserInfo();
			},
			
			// 查询审核资料
			getCheckDetail(){
				this.$requst.get('/api/v1/worker/check-detail',{id:this.noticeInfo.id}).then(res=>{
					if(res.code==0){
						console.log(res,'审核资料');
						this.positionIndex =  this.positionList.findIndex(item=> item.id === res.data.position);
						this.registerObj = {
							real_name:res.data.real_name,
							mobile:res.data.mobile,
							card_number:res.data.card_number,
							pay:parseFloat(res.data.pay),
							position:res.data.position,
							emergency_contact:res.data.emergency_contact,
							emergency_phone:res.data.emergency_phone,
							bank_card_name:res.data.bank_card_name,
							bank_card_number:res.data.bank_card_number,
							bank_name:res.data.bank_name,
							worksite_id:res.data.worksite_id
						}
					}
				})
			},
			
			// 授权位置信息
			getLocationEv(type){
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy:'true',
					success: (res)=>{
						console.log(res,'位置信息');
						if(type=='1'){
							this.$toolAll.tools.showToast('重新定位成功');
						}
						//获取工地列表
						this.getSiteEv(res.longitude,res.latitude);
					}
				});
			},
			
			//获取工地列表
			getSiteEv(lng,lat){
				this.$requst.get('/api/v1/common/get-current-worksite',{lng:lng,lat:lat}).then(res=>{
					if(res.code == 0){
						console.log(res,'定位工地信息');
						// 缓存工地id
						uni.setStorageSync('worksite_id',res.data.id);
						this.siteInfo = res.data;
						this.registerObj.worksite_id = res.data.id;
						this.isLoding = true;
					}
				})
			},
			
			// 获取安全告知
			getSafetyBulletin(){
				if(!this.isRead){
					this.$requst.get('/api/v1/index/safe-notice').then(res=>{
						if(res.code == 0){
							console.log(res,'安全公告');
							this.safetyBulletin = res.data.content;
						}
					})
				}else{
					// 判断是否已经查看公告
					if(uni.getStorageSync('ifNotice')!=='hasNotice'){
						// 获取公告
						this.getNotice();
					}
				}
			},
			
			// 关闭安全公告
			closeSafetyBulletin(){
				this.isRead = true;
				// 缓存是否已读
				uni.setStorageSync('isRead',this.isRead);
				if(uni.getStorageSync('worker_role')==0){
					this.$toolAll.tools.showToast('请先登录授权');
					setTimeout(()=>{
						uni.navigateTo({
							url:'/pages/login/login'
						})
					},2000)
				}else{
					// 查询是否有通知
					this.getNoticeInfo();
				}
			},
			
			// 获取技术岗位
			getPositionList(){
				this.$requst.get('/api/v1/common/position-list').then(res=>{
					if(res.code == 0){
						console.log(res,'技术岗位');
						this.positionList = res.data.list;
						this.registerObj.position = res.data.list[this.positionIndex].id;
						if(this.noticeInfo.notice==1){
							// 查询审核资料
							this.getCheckDetail();
						}
					}
				})
			},
			
			// 选择技术岗位
			choicePosition(e){
				this.positionIndex = e.detail.value;
				this.registerObj.position = this.positionList[e.detail.value].id;
			},
			
			// 提交注册信息
			submitRegister(){
				if(this.checkEmpty() && this.flag){
					this.flag = false;
					let params = this.registerObj;
					this.$requst.post('/api/v1/worker/register',params).then(res=>{
						if(res.code == 0){
							this.$toolAll.tools.showToast('提交成功');
							// 查询是否有通知
							this.getNoticeInfo();
							setTimeout(()=>{
								this.flag = true;
							},2000)
						}else{
							this.$toolAll.tools.showToast(res.msg);
							setTimeout(()=>{
								this.flag = true;
							},2000)
						}
					})
				}
			},
			
			// 验证电话号
			checkEmpty(){
				let result = false;
				if(this.$toolAll.tools.isPhone(this.registerObj.mobile)) {
					this.$toolAll.tools.showToast('请正确填写电话号码');
				} else {
					result = true;
				}
				return result;
			},
			
			// 获取打卡信息
			getSignInfo(){
				this.$requst.get('/api/v1/user/sign-info').then(res=>{
					if(res.code == 0){
						console.log(res,'打卡信息');
						// 获取日期
						this.currentDate = res.data.info.today;
						// 获取星期几
						this.currentWeek = res.data.info.week;
						// 获取当前时间
						this.currenTime = res.data.info.now;
						// 获取打卡记录列表
						this.signList = res.data.list;
						// 服务端时间处理
						this.setIntervalEv();
					}
				})
			},
			
			// 服务端时间处理
			setIntervalEv(){
				// 改变计时器状态
				this.timer = true;
				if(this.timer){
					setInterval(()=>{
						let nowArr = this.currenTime.split(':');
						let hour = parseInt(nowArr[0]);
						let minute = parseInt(nowArr[1]);
						let second = parseInt(nowArr[2]);
						if(second<59){
							second++;
						}else{
							second = 0;
							if(minute<59){
								minute++;
							}else{
								minute = 0;
								if(hour<23){
									hour++;
								}else{
									hour = 0;
								}
							}
						}
						this.currenTime = `${hour<10?'0'+hour:hour}:${minute<10?'0'+minute:minute}:${second<10?'0'+second:second}`;
					},1000)
				}
			},
			
			// 获取打卡记录
			getSignList(){
				this.$requst.get('/api/v1/user/sign-today').then(res=>{
					if(res.code == 0){
						console.log(res,'打卡记录');
						// 获取打卡记录列表
						this.signList = res.data.list;
					}
				})
			},
			
			// 唤起打卡弹窗
			showRadioEv(){
				if(uni.getStorageSync('worker_role')==1){
					if(this.siteInfo.name){
						if(!this.finish){
							this.showRadio = true;
							this.radioIndex = 0;
						}else{
							this.$toolAll.tools.showToast('您已打卡');
						}
					}else{
						this.$toolAll.tools.showToast('不在打卡范围内');
					}
					
				}else{
					this.$toolAll.tools.showToast('资料审核中');
				}
			},
			
			// 改变上下班打卡
			changeSignType(index){
				if(this.radioIndex !== index){
					this.radioIndex = index;
				}
			},
			
			// 打卡
			signEv(){
				let params = {
					type:this.radioList[this.radioIndex].type,
					lat:this.siteInfo.lat,
					lng:this.siteInfo.lng,
					worksite_id:this.siteInfo.id
				}
				this.$requst.post('/api/v1/worker/sign',params).then(res=>{
					if(res.code==0){
						this.finish = true;
						this.showRadio = false;
						// 获取打卡记录
						this.getSignList();
						// 延时改变打卡状态
						setTimeout(()=>{
							this.finish = false;
						},60000)
					}else{
						this.$toolAll.tools.showToast(res.msg);
					}
				})
			},
			
			// 选择图片
			changeImg(type){
				uni.chooseImage({
					count: 1, //默认9
					sourceType: ['album','camera'], //从相册选择
					success: (res)=> {
						this.stagingImg = res.tempFilePaths[0];
						// 上传图片
						this.uploadImg(type);
					}
				})
			},
			
			// 上传图片
			uploadImg(type){
				uni.showLoading({
					title: '上传中'
				});
				this.$requst.upload('/api/v1/file/upload/image',{path:this.stagingImg}).then(res=>{
					if(res.code==0) {
						if(type=='positive'){
							this.idImgList[0] = this.$hostHttp+res.data.src;
						}
						if(type=='back'){
							this.idImgList[1] = this.$hostHttp+res.data.src;
						}
						if(type=='bank'){
							this.registerObj.bank_img = this.$hostHttp+res.data.src;
						}
					}
					uni.hideLoading();
				})
			},
			
			// 删除图片
			delImg(index,type){
				if(type=='positive'){
					this.idImgList[0] = '';
				}
				if(type=='back'){
					this.idImgList[1] = '';
				}
				if(type=='bank'){
					this.registerObj.bank_img = '';
				}
			},
			
			// 预览图片
			previewImage(url) {
				let urlArr = [url];
				uni.previewImage({
					current: 1, //预览图片的下标
					urls: urlArr //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			}
		}
	}
</script>
<style scoped>
	
</style>