building-sign/pagesA/signRecord/signRecord.vue

<template>
	<view class="pad-x120">
		<!-- 头部 -->
		<status-nav navBarTitle="打卡记录"></status-nav>
		<view class="content" :style="{'padding-top':statusHeight+50+'px'}">
			<!-- 筛选 -->
			<view class="screen-box screen-box-other">
				<view class="item" :class="userType=='director'?'width-all':''">
					<picker class="font24" mode="selector" :range="worksiteList" @change="bindWorksiteChange" :value="worksiteIndex" :range-key="'name'">
						<view class="name">
							<text class="clips1" :class="worksiteIndex==-1?'color-99':''">{{worksiteIndex!==-1?worksiteList[worksiteIndex].name:'请选择工地'}}</text>
							<image src="/static/icon/icon-arrow-02.png" mode="aspectFit"></image>
						</view>
					</picker>
				</view>
				<view class="item font26 color-blue" @tap="showCard=true" v-if="userType!=='director'">
					<view class="name" style="justify-content: center;">补卡操作</view>
				</view>
			</view>
			<!-- 打卡日历 -->
			<view class="sign-calendar">
				<sign-calendar ref="signCalendar" @getDate="getDate"></sign-calendar>
			</view>
			<!-- 时间 -->
			<view class="sign-record-date font26">{{curDate.substr(0,4)+'年'+curDate.substr(5,2)+'月'+curDate.substr(8,2)+'日'}} 打卡情况</view>
			<!-- 打卡记录 -->
			<view class="sign-record sign-record-other bg-white">
				<view class="item font26" v-for="(item,index) in signList" :key="index">
					<view class="info">
						<text>{{item.type_text}}打卡：{{item.is_replenish==1?'补打卡':item.created_at.substr(item.created_at.length-8)}}</text>
						<text v-if="item.role!==0">打卡工地：{{item.worksite_name}}</text>
					</view>
					<view class="state" v-if="item.role!==0&&item.status==1">{{item.status_text}}</view>
					<view class="state color-blue" v-if="item.role!==0&&item.status==0">{{item.status_text}}</view>
					<view class="state color-red" v-if="item.role!==0&&item.status==-1">{{item.status_text}}</view>
				</view>
			</view>
			<!-- 加载更多 -->
			<view class="more-tips font24" v-if="signList.length==0">当日没有打卡记录</view>
		</view>
		<!-- 补卡弹窗 -->
		<view class="pop-up-bg" v-if="showCard">
			<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="showCard=false,radioIndex=0">取消</view>
					<view class="btn" @tap="submitEv">确认</view>
				</view>
			</view>
		</view>
		<!-- 尾部 -->
		<tabbar :userType="userType" current="2"></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
				signList:[], //打卡列表
				radioList:[
					{title:'上午上班',type:'morning_on'},
					{title:'上午下班',type:'morning_off'},
					{title:'下午上班',type:'afternoon_on'},
					{title:'下午下班',type:'afternoon_off'}
				],//打卡类型
				radioIndex:0, //当前选择
				curDate:'', //当前日期
				page:1,
				size:10,
				total:0,
				worksiteList:[], //工地列表
				worksiteIndex:-1, //当前选择
				showCard:false, //是否显示补卡
			}
		},
		onLoad(op) {
			if(op.userType){
				this.userType = op.userType;
			}
			if(op.date){
				// 获取选择日期
				this.curDate = op.date;
			}else{
				let year = new Date().getFullYear();
				let month = new Date().getMonth() + 1;
				let day = new Date().getDate();
				this.curDate = `${year}-${month<10?'0'+month:month}-${day<10?'0'+day:day}`;
			}
			// 获取工地列表
			this.getWorksiteList();
		},
		onShow() {
			setTimeout(()=>{
				// 获取打卡列表
				this.getSignList();
			},200)
		},
		onReachBottom() {
			if(this.signList.length<this.total){
				this.page++;
				// 获取打卡列表
				this.getSignList();
			}
		},
		onPullDownRefresh() {
			this.page = 1;
			// 获取打卡列表
			this.getSignList();	
			// 关闭下拉刷新
			uni.stopPullDownRefresh();
		},
		methods: {
			// 获取工地列表
			getWorksiteList(){
				this.$requst.get('/api/v1/common/worksite-list').then(res=>{
					if(res.code==0){
						this.worksiteList = res.data.list;
						if(uni.getStorageSync('worksite_id')){
							this.worksiteIndex =  this.worksiteList.findIndex(item=> item.id === uni.getStorageSync('worksite_id'));
						}else if(uni.getStorageSync('baseWorksiteId')!==0){
							this.worksiteIndex =  this.worksiteList.findIndex(item=> item.id === uni.getStorageSync('baseWorksiteId'));
						}else{
							this.worksiteIndex = -1;
						}
						this.isLoding = true;
					}
				})
			},
			
			// 改变上下班打卡
			changeSignType(index){
				if(this.radioIndex !== index){
					this.radioIndex = index;
				}
			},
			
			// 获取选择时间
			getDate(date){
				if(date!==this.curDate){
					this.curDate = date;
					// 获取打卡列表
					this.getSignList();
				}
			},
			
			// 确认补卡
			submitEv(){
				let params = {
					day:this.curDate,
					worksite_id:this.worksiteIndex!==-1?this.worksiteList[this.worksiteIndex].id:0,
					type:this.radioList[this.radioIndex].type
				}
				this.$requst.post('/api/v1/user/replenish',params).then(res=>{
					if(res.code==0){
						this.$toolAll.tools.showToast('补卡成功');
						this.showCard = false;
						// 获取状态列表
						this.$refs.signCalendar.getStatusObj(this.worksiteList[this.worksiteIndex].id);
					}else{
						this.$toolAll.tools.showToast(res.msg);
					}
				})
			},
			
			// 获取打卡列表
			getSignList(){
				let params = {
					day:this.curDate,
					worksite_id:this.worksiteIndex!==-1?this.worksiteList[this.worksiteIndex].id:0
				}
				this.$requst.get('/api/v1/user/sign-today',params).then(res=>{
					if(res.code == 0){
						console.log(res,'打卡记录');
						// 获取打卡状态
						this.buttonColor = res.data.buttonColor;
						// 获取打卡记录列表
						this.signList = res.data.list;
					}
				})
			},
			
			// 选择工地
			bindWorksiteChange(e) {
				this.worksiteIndex = e.detail.value;
				this.page = 1;
				// 获取打卡列表
				this.getSignList();
				// 获取状态列表
				this.$refs.signCalendar.getStatusObj(this.worksiteList[this.worksiteIndex].id);
			},
		}
	}
</script>
<style scoped>
	
</style>