yuanqu_ui/work/pages/record/detail.vue

<template>
	<view>
		<view class="navbox">
			<uni-nav-bar color="#ffffff" left-icon="left" title="打卡记录" :background-color="backgroundColor"
				:border="false" statusBar='true' fixed="true" @clickLeft='getBack'>
			</uni-nav-bar>
		</view>
		<image :src="navbg" class="navbg"></image>
		<view class="zxmain" :style="'margin-top:-'+marTop+'rpx;'">
			<view class="ytbox">
				<view class="ytop flexc">
					<view class="tit">{{visitName.charAt(0)}}</view>
					<view class="cent">
						<view class="ctit">{{visitName}}</view>
						<view class="ctime">最新打卡：2024-07-18</view>
					</view>
				</view>
				<!-- 日历 -->
				<view class="mb24">
					<lunc-calendar ref="calendar" :showLunar="false" :configWeek="configWeek" :configHoliday="configHoliday" :firstDayOfWeek="firstDayOfWeek" :showMonthBg="false" :showShrink="true" :signList="signList"
						@dayChange="dayChange" weekType="" @monthChange="monthChange" @getIsSelDayFn="getIsSelDayFn" @shrinkClick="shrinkClick">
					</lunc-calendar>
				</view>
				<view class="tips">出勤统计：打卡2次，上下班时间：08:30-17:30</view>
				<!-- 步骤条 -->
				<view class="mb16 plr18">
					<view class="steps">
						<view class="cir"></view>
						<view class="stepsa">
							<view class="steptit">上班打卡</view>
							<view class="steptxt">
								<image :src="cirimg"></image>
								<view>08:27已打卡</view>
							</view>
						</view>
					</view>
					<view class="steps">
						<view class="cir"></view>
						<view class="stepsa">
							<view class="steptit">下班打卡</view>
							<view class="steptxt">
								<image :src="cirimg"></image>
								<view>17:41已打卡</view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="tips">统计截至 2024-07-18 16:13</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {checkPermi,checkRole} from "@/utils/permission"; // 权限判断函数
	import {getDictionaryFn} from "@/api/mine/register.js"
	import luncCalendar from "@/components/lunc-calendar/lunc-calendar.vue"
	export default {
		components: {luncCalendar},
		data() {
			return {
				cirimg:require("@/static/images/home/chose.png"),
				navbg:require("@/static/images/navbg.png"),
				backgroundColor: "transparent",
				datainfo:{},
				nvaHeight: 44,
				marTop: 0, //距离顶部的距离
				stubarHeight: 0, //
				visitName:'林涵宇',
				
				signList: [],
				configWeek:[],
				configHoliday:'Y',
				firstDayOfWeek:'sunday',
				// dayflag:false,
				// month:'',
				// year:'',
				// kaTime:'',
				// changetime:'',//改变的日期
				// timeday:'',//选择的日期
				// visitDate:'',
			}
		},
		onPageScroll(e) {
			var scrollTop = Number(e.scrollTop);
			if (scrollTop > 0) {
				this.backgroundColor = '#0491FD'
			} else {
				this.backgroundColor = 'transparent'
			}
		},
		onLoad: function() {
			this.init()
			// this.getDataFn()
			uni.getSystemInfo({
				success: (e) => {
					this.stubarHeight = Number(e.statusBarHeight);
					this.nvaHeight = Number(e.statusBarHeight) + 44;
					this.tabscheight = Number(this.nvaHeight) * 2 + 100;
				}
			})
			// 3c8cadac11af4f1298a2882addc8788d
		},
		onShow() {},
		mounted() {
			this.getHeightFn()
		},
		methods: {
			checkPermi,
			checkRole,
			getBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			dayChange(e){
				// if(e.daySign&&e.daySign.length){
				// 	var daySign=e.daySign[0];
				// 	this.amList=daySign.amList||[];
				// 	this.pmList=daySign.pmList||[];
				// 	if(this.reservatConfigType==1){
				// 		this.timeList=this.amList;
				// 	}else if(this.reservatConfigType==2){
				// 		this.timeList=this.pmList;
				// 	}
				// 	this.timeid='';
				// 	this.datainfo.visitDate=daySign.date;
				// 	this.datainfo.visitTime='';
				// }
			},
			monthChange(e){
				// var y=e.year;
				// var m=e.month;
				// if(y==this.year&&m==this.month){
				// 	this.getCalendarList()
				// 	this.changetime='';
				// }else{
				// 	var time=y + '-' + m + '-' + '01'
				// 	this.changetime=time
				// 	this.getCalendarList(time)
				// }
			},
			// 选中的日期
			getIsSelDayFn(e){
				// if(e.sign&&e.sign.length&&this.timeday!=e.date){
				// 	this.timeday=e.date;
				// 	if(this.configWeek.indexOf(e.week)!=-1 || e.isHoliday&&this.configHoliday=='N'){
				// 		this.dayflag=false;
				// 	}else{
				// 		if(e.sign&&e.sign.length){
				// 			var sign=JSON.parse(JSON.stringify(e.sign))
				// 			var signes=JSON.parse(JSON.stringify(sign[0]));
				// 			var amList=[],pmList=[];
				// 			if(signes.amList){
				// 				amList=JSON.parse(JSON.stringify(signes.amList))||[];
				// 			}
				// 			if(signes.pmList){
				// 				pmList=JSON.parse(JSON.stringify(signes.pmList))||[];
				// 			}
				// 			this.jdryflag=true;
				// 			if(this.timeType==1){
				// 				this.timeList=amList;
				// 			}else{
				// 				this.timeList=pmList;
				// 			}
				// 			this.amList=amList
				// 			this.pmList=pmList
				// 			this.timeid='';
				// 			var y=e.year;
				// 			var m=e.month;
				// 			var d=e.day;
				// 			this.datainfo.visitDate=y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d);
				// 			this.datainfo.visitTime='';
				// 			if(signes.title=='可预约'){
				// 				this.dayflag=true;
				// 			}else{
				// 				this.dayflag=false;
				// 			}
							
				// 		}	
				// 	}
				// }
				
			},
			shrinkClick(e){
				console.log(e,3)
			},
			getHeightFn() {
				let query = uni.createSelectorQuery().in(this);
				//需要给黄色区域设置一个id标识，在这里是demo
				query.select('.navbox').boundingClientRect(data => {
					var top = data.top < 0 ? -data.top : data.top;
					var stubarHeight = Number(this.stubarHeight);
					this.marTop = stubarHeight > 0 ? 692 - Number(data.height) * 2 : 692 - Number(data.height) *
						2 + 40 //赋值，待会要用
					if (top <= this.nvaHeight) {
						const opacity = top / 100 // 计算透明度值
						const color = `rgba(4, 145, 253, ${opacity})`
						this.backgroundColor = color // 更新盒子背景颜色
					} else {
						this.backgroundColor = '#00A9F0'
					}
				}).exec();
			},
			init() {
				// 门卫
				// getDictionaryFn('is_read').then(res=>{
				// 	if(res.code==200){
				// 		this.ydztlist = res.data.map(v => {
				// 			return {
				// 				label: v.dictLabel,
				// 				value: v.dictValue
				// 			}
				// 		})
				// 	}
				// })
			},
			getDataFn() {
				var params = {
					pageSize: this.pageSize,
					pageNo: this.pageNum,
					// visitType:3
				}
				getCameraList(params).then(res => {
					if (res.code == 200) {
						if (res.rows.length < this.pageSize) {
							this.reachflag = false
							this.wtdt = '到底了~';
						} else {
							var num = parseInt(res.rows.length) + parseInt(this.pageSize) * parseInt(this.pageNum -
								1)
							if (num < res.total) {
								this.reachflag = true
								this.wtdt = '上拉加载更多'
							} else {
								this.reachflag = false
								this.wtdt = '到底了~';
							}
						}
						if (this.pageNum == 1) {
							this.list = res.rows;
						} else {
							this.list = this.list.concat(res.rows)
						}
					} else {
						this.$toast(res.msg)
					}
				})

			},
		},

	}
</script>
<style>
/* 	page {
		background: #ffffff;
	} */
</style>
<style lang="scss" scoped>
.navbox{position: fixed;left: 0;right: 0;top: 0;z-index: 4;	}
.navbg{width: 100%;height: 692rpx;}	
.zxmain{position: relative;padding: 20rpx 32rpx 40rpx;box-sizing: border-box;display: flex;}
.ytbox{width: 684rpx;margin: 0 auto;padding-top: 24rpx;position: relative;flex: 1;overflow: auto;background-color: #ffffff;padding-bottom: 12rpx;border-radius: 14rpx;
	.ytop{padding: 16rpx 0 24rpx 16rpx;
		.tit{width: 62rpx;height: 62rpx;background: #0391FD;border-radius: 6rpx;font-weight: 500;
	font-size: 34rpx;color: #FFFFFF;margin-right: 18rpx;text-align: center;line-height: 62rpx;flex: 0 0 auto;}
		.cent{
			flex: 1;
			.ctit{font-weight: bold;font-size: 28rpx;color: #161616;margin-bottom: 6rpx;}
			.ctime{font-weight: 500;font-size: 18rpx;color: #666666;}
		}
	}
	.tips{font-weight: 500;font-size: 26rpx;color: #888888;padding-left: 34rpx;margin-bottom: 24rpx;}
	// 步骤条
	.steps{position: relative;display: flex;padding-bottom:40rpx;
		&::after{
			content: '';position: absolute;left:6rpx;top: 34rpx;bottom: 4rpx;background-color: #DADADA;width: 2rpx;
		}
		.cir{width: 14rpx;height: 14rpx;background: #AFAFAF;border-radius: 50%;flex: 0 0 auto;margin-right: 38rpx;margin-top: 13rpx;}
		.stepsa{flex: 1;
			.steptit{font-weight: bold;font-size: 28rpx;color: #161616;margin-bottom: 20rpx;}
			.steptxt{display: flex;
				image{width: 20rpx;height: 20rpx;margin-right: 14rpx;flex: 0 0 auto;margin-top: 7rpx;}
				view{font-weight: bold;font-size: 26rpx;color: #888888;}
			}
		}
	}
}
</style>