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">
					<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">
					<view class="name" style="justify-content: center;">补卡操作</view>
				</view>
			</view>
			<!-- 打卡日历 -->
			<view class="sign-calendar">
				<sign-calendar></sign-calendar>
			</view>
			<!-- 时间 -->
			<view class="sign-record-date font26">2022年12月08日 打卡情况</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.created_at.substr(item.created_at.length-8)}}</text>
						<text>打卡工地：{{item.worksite_name}}</text>
					</view>
					<view class="state color-red" v-if="item.status==-1">{{item.status_text}}</view>
					<view class="state color-blue" v-if="item.status==0">{{item.status_text}}</view>
					<view class="state" v-if="item.status==1">{{item.status_text}}</view>
				</view>
			</view>
			<!-- 加载更多 -->
			<view class="more-tips font24">{{signList.length==total?'没有更多数据了':'下滑获取更多'}}</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="userType=='worker'?2:4"></tabbar>
	</view>
</template>
<script>
	import signCalendar from '@/components/sign-calendar/sign-calendar';
	import tabbar from '@/components/tabbar/tabbar';
	function getDate(type) {
	    const date = new Date();
	    let year = date.getFullYear();
	    let month = date.getMonth() + 1;
	    let day = date.getDate();
	    if (type === 'start') {
	        year = year - 10;
	    }
	    month = month > 9 ? month : '0' + month;
	    day = day > 9 ? day : '0' + day;
	    return `${year}-${month}-${day}`;
	}
	export default {
		components:{
			signCalendar,
			tabbar
		},
		data() {
			return {
				statusHeight:uni.getSystemInfoSync().statusBarHeight, //状态栏高度
				userType:'', //账户类型 工人：worker 负责人：director
				signList:[], //打卡列表
				radioList:[
					{title:'上午上班',type:'in'},
					{title:'上午下班',type:'out'},
					{title:'下午上班',type:'in'},
					{title:'下午下班',type:'out'}
				],//打卡类型
				radioIndex:0, //当前选择
				page:1,
				size:10,
				total:0,
				worksiteList:[], //工地列表
				worksiteIndex:-1, //当前选择
				date: getDate({format: true}),
				startDate: getDate('start'),
				beginDate:'', //开始日期
				endDate:'', //结束日期
				showCard:false, //是否显示补卡
			}
		},
		onLoad(op) {
			if(op.userType!==''){
				this.userType = op.userType;
			}
			// 获取工地列表
			this.getWorksiteList();
		},
		onShow() {
			// 获取打卡列表
			this.getSignList();
		},
		onReachBottom() {
			if(this.signList.length<this.total){
				this.page++;
				// 获取打卡列表
				this.getSignList();
			}
		},
		onPullDownRefresh() {
			this.page = 1;
			// 获取打卡列表
			this.getSignList();	
			// 关闭下拉刷新
			uni.stopPullDownRefresh();
		},
		onShareAppMessage(res) {
			let shareObj = {
				title:'工地打卡',
				path: '/pages/pagehome/pagehome',
				imageUrl:'/static/share-logo.jpg',
			}
			// 返回shareObj
			return shareObj;
		},
		methods: {
			// 获取工地列表
			getWorksiteList(){
				this.$requst.get('/api/v1/common/worksite-list').then(res=>{
					if(res.code==0){
						this.worksiteList = res.data.list;
						this.isLoding = true;
					}
				})
			},
			
			// 改变上下班打卡
			changeSignType(index){
				if(this.radioIndex !== index){
					this.radioIndex = index;
				}
			},
			
			// 确认补卡
			submitEv(){
				this.showCard = false;
			},
			
			// 获取打卡列表
			getSignList(){
				let params = {
					page:this.page,
					size:this.size,
					worksite_id:this.worksiteIndex==-1?'':this.worksiteList[this.worksiteIndex].id,
					begin_at:this.beginDate,
					end_at:this.endDate
				}
				if(this.page==1) this.signList = [];
				this.$requst.post('/api/v1/worker/clock-list',params).then(res=>{
					if(res.code==0){
						console.log(res,'打卡记录');
						this.total = res.data.total;
						this.signList = this.signList.concat(res.data.list);
					}
				})
			},
			
			// 选择工地
			bindWorksiteChange(e) {
				this.worksiteIndex = e.detail.value;
				this.page = 1;
				// 获取打卡列表
				this.getSignList();
			},
			
			// 选择开始日期
			beginDateChange(e) {
				this.beginDate = e.detail.value;
				this.page = 1;
				// 获取打卡列表
				this.getSignList();
			},
			
			// 选择结束日期
			endDateChange(e) {
				this.endDate = e.detail.value;
				this.page = 1;
				// 获取打卡列表
				this.getSignList();
			},
		}
	}
</script>
<style scoped>
	
</style>