小程序海康打卡记录获取和展示

pages/mine/checkIn/checkIn.vue

@@ -15,7 +15,10 @@
 		<view class="todayCheckIn" v-if="todayInfoShow">
 			<view class="check-in-container">
 				<text class="todayAttTitle">今日签到信息</text>
-				<text class="exceptionText" v-if="lackCardState" @click="toBuKa">处理异常</text>
+				<view class="action-buttons">
+					<text class="exceptionText" v-if="lackCardState" @click="toBuKa">处理异常</text>
+          <text class="viewMoreText" @click="showAllRecords">查看更多</text>
+				</view>
 				<view class="info-row">
 					<view>
 						<text class="ygoa_icon icon-date"></text>
@@ -68,6 +71,35 @@
 				</view>
 
 			</view>
+			
+			<!-- 查看所有记录的弹窗 -->
+			<uni-popup ref="allRecordsPopup" type="bottom">
+				<view class="popup-content">
+					<view class="popup-header">
+						<text class="popup-title">当日所有打卡记录</text>
+						<text class="popup-close" @click="closeDialog">×</text>
+					</view>
+					<scroll-view scroll-y class="popup-body">
+						<view v-if="allAttList.length === 0" class="empty-tip">
+							暂无打卡记录
+						</view>
+						<view v-for="(item, index) in allAttList" :key="index" class="record-item">
+							<view class="record-info">
+								<text class="record-type">{{ formatAttType(item.att_type_id) }}</text>
+								<text class="record-time">{{ item.att_time }}</text>
+							</view>
+							<view class="record-detail" v-if="item.location">
+								<text class="detail-label">位置:</text>
+								<text class="detail-value">{{ item.location }}</text>
+							</view>
+							<view class="record-detail" v-if="item.remark">
+								<text class="detail-label">备注:</text>
+								<text class="detail-value">{{ item.remark }}</text>
+							</view>
+						</view>
+					</scroll-view>
+				</view>
+			</uni-popup>
 			<!-- 分界线 -->
 			<view class="divider"></view>
 
@@ -171,6 +203,7 @@
 	import { useConfigStore } from '@/store/config'
 	import $tab from '@/plugins/tab.js'
 	import config from '@/config.js';
+	import UniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
 	const userStore = useUserStore();
 	//考勤规则数据
 	const configStore = useConfigStore();
@@ -270,6 +303,8 @@
 	}
 
 	//获取日考勤数据
+	const currentAttList = ref([]) // 保存当前完整的考勤记录列表
+	
 	function getDayAttData() {
 		const params = {
 			universalid: userId,
@@ -287,9 +322,12 @@
 				todayData.startStatusForPm=''
 				todayData.endStatusForAm=''
 				if (res.returnParams.list.length == 0) {
+					currentAttList.value = []
 					return
 				}
 				const attList = res.returnParams.list;
+				// 保存完整列表供弹窗使用
+				currentAttList.value = attList
 			
 				let time1;
 				let time2;
@@ -406,13 +444,45 @@
 	}
 	
 	const lackCardState=ref(false)//缺卡异常处理状态
+	// 查看所有记录的弹窗
+	const allRecordsPopup = ref(null)
+	const showAllRecordsDialog = ref(false)
+	const allAttList = ref([]) // 弹窗中显示的列表
+	
+	// 显示所有考勤记录弹窗 - 直接使用已获取的数据
+	function showAllRecords() {
+		allAttList.value = currentAttList.value || []
+		showAllRecordsDialog.value = true
+		if (allRecordsPopup.value) {
+			allRecordsPopup.value.open()
+		}
+	}
+	
+	// 格式化考勤类型
+	function formatAttType(typeId) {
+		const typeMap = {
+			'1': '上午上班',
+			'7': '上午下班',
+			'8': '下午上班',
+			'2': '下午下班'
+		}
+		return typeMap[typeId] || '未知类型'
+	}
+	
+	// 关闭弹窗
+	function closeDialog() {
+		showAllRecordsDialog.value = false
+		if (allRecordsPopup.value) {
+			allRecordsPopup.value.close()
+		}
+	}
 	//日历点击日期切换事件
 	function changeDate(e) {
 		// console.log('changeDate: ',e);
 		// console.log("3:calenderData.value " + JSON.stringify(calenderData.value));
 		if(config.companyCode && config.companyCode == 'yg'){
 			lackCardState.value = !!e.extraInfo.info;//!!转布尔值
-		} 
+		}
 		todayData.day = e.fulldate
 		getDayAttData()
 	}
@@ -901,11 +971,30 @@
 		justify-content: center;
 		position: relative;
 		.exceptionText{
-			position: absolute;
+			/*position: absolute;
 			top: 10px;
 			right: 10px;
 			color: blue;
+			text-decoration: underline;*/
+      color: #1890FF;
+      text-decoration: underline;
+      font-size: calc(14px + .5*(1rem - 16px));
+      cursor: pointer;
+		}
+		.action-buttons {
+			position: absolute;
+			top: 5px;
+			right: 10px;
+			display: flex;
+			flex-direction: column;
+			align-items: flex-end;
+			gap: 5px;
+		}
+		.viewMoreText {
+			color: #1890FF;
 			text-decoration: underline;
+			font-size: calc(14px + .5*(1rem - 16px));
+			cursor: pointer;
 		}
 	}
 
@@ -968,4 +1057,89 @@
 		font-size: 14px;
 		color: #333;
 	}
+	
+	/* 弹窗样式 */
+	.popup-content {
+		background: white;
+		border-radius: 10px 10px 0 0;
+		overflow: hidden;
+	}
+	
+	.popup-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 15px 20px;
+		border-bottom: 1px solid #eee;
+	}
+	
+	.popup-title {
+		font-size: calc(16px + .5*(1rem - 16px));
+		font-weight: bold;
+		color: #333;
+	}
+	
+	.popup-close {
+		font-size: calc(24px + .5*(1rem - 16px));
+		color: #999;
+		cursor: pointer;
+		padding: 0 5px;
+	}
+	
+	.popup-body {
+		max-height: 60vh;
+		overflow-y: auto;
+		padding: 15px 20px;
+	}
+	
+	.empty-tip {
+		text-align: center;
+		padding: 30px 0;
+		color: #999;
+		font-size: calc(14px + .5*(1rem - 16px));
+	}
+	
+	.record-item {
+		padding: 12px 10px;
+		border-bottom: 1px solid #f0f0f0;
+	}
+	
+	.record-item:last-child {
+		border-bottom: none;
+	}
+	
+	.record-info {
+		display: flex;
+		align-items: center;
+		margin-bottom: 8px;
+		padding-right: 15px;
+	}
+	
+	.record-type {
+		font-size: calc(14px + .5*(1rem - 16px));
+		font-weight: bold;
+		color: #333;
+	}
+	
+	.record-time {
+		font-size: calc(14px + .5*(1rem - 16px));
+		color: #666;
+		margin-left: 30px;
+	}
+	
+	.record-detail {
+		display: flex;
+		margin-top: 5px;
+		font-size: calc(12px + .5*(1rem - 16px));
+	}
+	
+	.detail-label {
+		color: #999;
+		margin-right: 5px;
+	}
+	
+	.detail-value {
+		color: #666;
+		flex: 1;
+	}
 </style>