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">
				<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">
					<picker class="font24" mode="date" :range="date" @change="beginDateChange" :start="startDate" :end="date">
						<view class="name">
							<text :class="beginDate==''?'color-99':''">{{beginDate!==''?beginDate.split('-')[0]+'年'+beginDate.split('-')[1]+'月'+beginDate.split('-')[2]+'日':'请选择开始时间'}}</text>
							<image src="/static/icon/icon-arrow-02.png" mode="aspectFit"></image>
						</view>
					</picker>
				</view>
				<view class="item">
					<picker class="font24" mode="date" :range="date" @change="endDateChange" :start="startDate" :end="date">
						<view class="name">
							<text :class="endDate==''?'color-99':''">{{endDate!==''?endDate.split('-')[0]+'年'+endDate.split('-')[1]+'月'+endDate.split('-')[2]+'日':'请选择截止时间'}}</text>
							<image src="/static/icon/icon-arrow-02.png" mode="aspectFit"></image>
						</view>
					</picker>
				</view>
			</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>
		<!-- 尾部 -->
		<tabbar :userType="userType" current="2"></tabbar>
	</view>
</template>
<script>
	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:{
			tabbar
		},
		data() {
			return {
				statusHeight:uni.getSystemInfoSync().statusBarHeight, //状态栏高度
				userType:'worker', //账户类型 工人：worker 负责人：director
				signList:[], //打卡列表
				page:1,
				size:10,
				total:0,
				worksiteList:[], //工地列表
				worksiteIndex:-1, //当前选择
				date: getDate({format: true}),
				startDate: getDate('start'),
				beginDate:'', //开始日期
				endDate:'', //结束日期
			}
		},
		onLoad() {
			// 获取工地列表
			this.getWorksiteList();
		},
		onShow() {
			// 获取打卡列表
			this.getSignList();
		},
		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;
						this.isLoding = true;
					}
				})
			},
			
			// 获取打卡列表
			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>