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

709 lines
20 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view class="pad-x120">
<!-- 头部 -->
<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="sign-time">
<text>{{currentDate}}</text>
<text>{{currentWeek}}</text>
</view>
<view class="sign-btn" :class="finish?'finish':''" @tap="showRadioEv">
<text class="font56">{{finish?'已打卡':'打卡'}}</text>
<text>{{currenTime}}</text>
</view>
<view class="sign-site" v-if="isLoding">
<view class="name">{{siteInfo.name}}</view>
<view class="position">
<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>
</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">
<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">
<view class="title">
<text>
身份证照片
(正反面)
</text>
</view>
<view class="upload-box">
<view class="img" v-if="idImgList[0]!==''">
<image :src="idImgList[0]" mode="widthFix"></image>
<image class="del-btn" src="/static/icon/icon-del.png" mode="widthFix" @tap="delImg(index,'positive')"></image>
</view>
<view class="upload-btn" @tap="changeImg('positive')" v-if="idImgList[0]==''">
<image src="/static/icon/icon-release.png" mode="widthFix"></image>
<text class="font22 color-99">身份证正面</text>
</view>
<view class="img" v-if="idImgList[1]!==''">
<image :src="idImgList[1]" mode="widthFix"></image>
<image class="del-btn" src="/static/icon/icon-del.png" mode="widthFix" @tap="delImg(index,'back')"></image>
</view>
<view class="upload-btn" @tap="changeImg('back')" v-if="idImgList[1]==''">
<image src="/static/icon/icon-release.png" mode="widthFix"></image>
<text class="font22 color-99">身份证反面</text>
</view>
</view>
</view>
<view class="item">
<view class="title">现住地址</view>
<input class="input" type="text" v-model="registerObj.address">
</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">
<view class="title">银行卡照片</view>
<view class="upload-box">
<view class="img" v-if="registerObj.bank_img!==''">
<image :src="registerObj.bank_img" mode="widthFix"></image>
<image class="del-btn" src="/static/icon/icon-del.png" mode="widthFix" @tap="delImg(index,'bank')"></image>
</view>
<view class="upload-btn" @tap="changeImg('bank')" v-if="registerObj.bank_img==''">
<image src="/static/icon/icon-release.png" mode="widthFix"></image>
<text class="font22 color-99">银行卡</text>
</view>
</view>
</view>
<view class="item item-other" style="align-items: flex-start;">
<view class="title">工作经验</view>
<textarea class="input textarea" v-model="registerObj.experience"></textarea>
</view>
<view class="submit-btn bg-blue color-white font30" @tap="submitRegister">提交</view>
</view>
</view>
<!-- 尾部 -->
<tabbar :userType="userType"></tabbar>
</view>
</template>
<script>
import tabbar from '@/components/tabbar/tabbar';
export default {
components:{
tabbar
},
data() {
return {
statusHeight:uni.getSystemInfoSync().statusBarHeight, //状态栏高度
userType:'worker', //账户类型 工人worker 负责人director
frontColor:'#ffffff', //状态栏文字颜色
backgroudColor:'none', //导航栏背景
titleColor:'#ffffff', //导航栏颜色
radioList:[
{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
}
},
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() {
// 改变状态栏
this.changeStatusNav();
// 获取位置信息
this.getLocationEv(0);
},
onShow() {
// 获取打卡信息
this.getSignInfo();
// 获取打卡记录
this.getSignList();
// 判断是否查看安全公告
if(uni.getStorageSync('isRead')){
// 查询是否有通知
this.getNoticeInfo();
}else{
this.isRead = false;
// 获取安全告知
this.getSafetyBulletin();
}
},
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();
}
}
})
},
// 获取公告
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();
}
// 获取用户信息
this.getUserInfo();
}
}
})
},
// 关闭通知
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();
// 判断是否已经查看公告
if(uni.getStorageSync('ifNotice')!=='hasNotice'){
// 获取公告
this.getNotice();
}
}
},
// 获取技术岗位
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 = '';
}
}
}
}
</script>
<style scoped>
</style>