PunchSettle-MiniProgram/pages/punchin-detail/punchin-detail.vue

<template>
	<main-layout :showHome="true" :showBack="true">
		<uni-calendar 
			:start-date="punchInData.calendar.startDate"
			:end-date="punchInData.calendar.endDate"
			:selected="punchInData.selected"
			@change="calendarChange"
			@monthSwitch="calendarMonthSwitchChange"/>	
		<viwe class="info-box">
			<view class="left">打卡：{{punchInData.statistics.punchInTimes}}次</view>
			<view class="right">全勤率：{{punchInData.statistics.punchInRate}}80%</view>
		</viwe>
		<view class="log-box">
			<uni-section title="打卡记录" type="line">
				<uni-list>
					<uni-list-item title="2024-12-07 08:30:22 福彩 幸运88 中奖100元" time="2020-02-02 20:20" ></uni-list-item>
					<uni-list-item title="2024-12-07 08:30:22 福彩 幸运88 中奖100元" time="2020-02-02 20:20" ></uni-list-item>
					<uni-list-item title="2024-12-07 08:30:22 福彩 幸运88 中奖100元" time="2020-02-02 20:20" ></uni-list-item>
				</uni-list>
			</uni-section>
		</view>
		<uni-fab ref="fabBtn" :content="fabContent" :pattern="fabPattern" horizontal="right" vertical="bottom" direction="vertical"  @trigger="trigger"/>
		
		<!-- 删除确认框 -->
		<uni-popup ref="deleteDialog" type="dialog">
			<uni-popup-dialog  mode="base" :before-close="true"
				title="删除提示" content="确认删除当前任务？"
				@confirm="deleteDialogConfirm" @close="deleteDialogClose"></uni-popup-dialog>
		</uni-popup>
		
		<!-- 归档确认框 -->
		<uni-popup ref="archiveDialog" type="dialog">
			<uni-popup-dialog  mode="base" :before-close="true"
				title="归档提示" content="确认归档当前任务？"
				@confirm="archiveDialogConfirm" @close="archiveDialogClose"></uni-popup-dialog>
		</uni-popup>
		
		<!-- 撤销确认框 -->
		<uni-popup ref="revokeDialog" type="dialog">
			<uni-popup-dialog  mode="base" :before-close="true"
				title="撤销提示" content="确认撤销打卡？"
				@confirm="revokeDialogConfirm" @close="revokeDialogClose"></uni-popup-dialog>
		</uni-popup>
		
		<!-- 补卡弹出框 -->
		<uni-popup ref="remakeInputDialog" type="dialog" :is-mask-click="false">
			<uni-popup-dialog
				mode="input" 
				:before-close="true" 
				title="补卡" 
				@confirm="remakeFormConfirm"
				@close="remakeFormClose">
				<view style="width: 100%;">
					<uni-forms ref="timeTrackForm" :modelValue="remakeFormData" :rules="remakeFormRules" label-position="top" :label-width="150">
						<uni-forms-item name="punchInDate">
							<picker mode="date" :value="remakeFormData.punchInDate" @change="remakePunchInChange">
								<view class="pick-box">{{remakeFormData.punchInDate}}</view>
							</picker>
						</uni-forms-item>
					</uni-forms>
				</view>
			</uni-popup-dialog>
		</uni-popup>
		
	</main-layout>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import router from '@/common/constants/router';
	import { punchInApi } from '@/service/apis.js';
	
	// 组件
	const fabBtn = ref(null);
	/**
	 * 删除弹出框
	 */
	const deleteDialog = ref(null);
	
	/**
	 * 归档弹出框
	 */
	const archiveDialog = ref(null);
	
	/**
	 * 补卡弹出框
	 */
	const remakeInputDialog = ref(null);
	
	/**
	 * 补卡表单
	 */
	const remakeForm = ref(null);
	
	/**
	 * 撤销弹出框
	 */
	const revokeDialog = ref(null);
	
	// 属性
	/**
	 * 任务ID
	 */
	const punchInId = ref(null);
	
	/**
	 * 悬浮菜单样式
	 */
	const fabPattern = ref({
		icon: 'compose'
	});

	/**
	 * 悬浮按钮菜单
	 */
	const fabContent = [{
			text: '删除',
			active: false,
			iconPath: '/static/delete.svg',
			selectedIconPath: '/static/delete-active.svg',
			func: "delete"
		},
		{
			text: '归档',
			active: false,
			iconPath: '/static/archive.svg',
			selectedIconPath: '/static/archive-active.svg',
			func: "archive"
		},
		{
			text: '撤销',
			active: false,
			iconPath: '/static/revoke.svg',
			selectedIconPath: '/static/revoke_active.svg',
			func: "revoke"
		},
		{
			text: '补卡',
			active: false,
			iconPath: '/static/append.svg',
			selectedIconPath: '/static/append-active.svg',
			func: "remake"
		},
		{
			text: '编辑',
			active: false,
			iconPath: '/static/edit.svg',
			selectedIconPath: '/static/edit-active.svg',
			func: "edit"
		}
	];
	
	/**
	 * 补卡表单数据
	 */
	const remakeFormData = ref({
		punchIndate: '2024-12-16'
	});
	
	/**
	 * 补卡表单校验规则
	 */
	const remakeFormRules = ref({
		punchInDate: {
			rules: [{
				required: true,
				errorMessage: '补卡日期不能为空'
			}]
		}
	});
	
	/**
	 * 打卡日历数据
	 */
	const punchInData = ref({
		calendar: {
			startDate: '2024-12-01',
			endDate: '2024-12-31',
			selectd: []
		},
		statistics: {
			punchInTimes: 0,
			punchInRate: 0
		},
		selected: [{date: '2024-12-13', info: '签到', data: { custom: '自定义信息', name: '自定义消息头', id: 12123 }}]
	});
	
	// 方法
	/**
	 * 悬浮按钮点击事件
	 */
	const trigger = (e) => {
		if (e.item.func == 'delete') {
			deleteDialog.value.open();
		}
		if (e.item.func == 'archive') {
			archiveDialog.value.open();
		}
		if (e.item.func == 'revoke') {
			revokeDialog.value.open();
		}
		if (e.item.func == 'remake') {
			// 将日期减去1天，得到昨天的日期
			const yesterday = new Date();
			yesterday.setDate(yesterday.getDate() - 1);
			
			// 获取年、月、日
			const year = yesterday.getFullYear();
			const month = (yesterday.getMonth() + 1).toString().padStart(2, '0'); // 月份是从0开始的，所以加1
			const day = yesterday.getDate().toString().padStart(2, '0'); // 日期格式化为两位数
			
			// 初始化上一轮的数据
			remakeFormData.value = {
				punchInId: punchInId.value,
				punchInDate: `${year}-${month}-${day}`
			};
			
			remakeInputDialog.value.open();
		}
		if (e.item.func == 'edit') {
			uni.navigateTo({
				url: router.PUNCHIN_EDIT_URL + "?id=" + punchInId.value
			});
		}
		
		fabBtn.value.close();
	}
	
	/**
	 * 删除确认
	 */
	const deleteDialogConfirm = async () => {
		punchInApi.deletePunchIn({id: punchInId.value})
		.then(ret => {
			deleteDialog.value.close();
			uni.showToast({
				title: '删除成功',
				icon: 'success'
			});
			setTimeout(() => {
				uni.navigateBack();
			}, 1000);
		})
		.catch(err => {
			uni.showToast({
				title: '删除失败',
				icon: 'error'
			});
		});
	}
	
	/**
	 * 删除取消
	 */
	const deleteDialogClose = () => {
		deleteDialog.value.close();
	}
	
	/**
	 * 归档确认
	 */
	const archiveDialogConfirm = async () => {
		punchInApi.archivePunchIn({id: punchInId.value})
		.then(ret => {
			archiveDialog.value.close();
			uni.showToast({
				title: '归档成功',
				icon: 'success'
			});
			setTimeout(() => {
				uni.navigateBack();
			}, 1000);
		})
		.catch(err => {
			uni.showToast({
				title: '归档失败',
				icon: 'error'
			});
		});
	}
	
	/**
	 * 归档取消
	 */
	const archiveDialogClose = () => {
		archiveDialog.value.close();
	}
	
	/**
	 *补卡表单提交
	 */
	const remakeFormConfirm = async () => {
		remakeForm.value.validate(['punchInId']).then(data => {
			return punchInApi.revokePunchIn(data);
		}).then(e => {
			remakeInputDialog.value.close();
			uni.showToast({
				title: '补卡成功',
				icon: 'success'
			});
			setTimeout(() => {
				// TODO 这里要刷新页面数据
			}, 1000);
		}).catch(err => {
			uni.showToast({
				title: '补卡失败',
				icon: 'error'
			});
		})
	}
	
	/**
	 * 补卡表单取消
	 */
	const remakeFormClose = async () => {
		remakeInputDialog.value.close();
	}
	
	/**
	 * 撤销确认
	 */
	const revokeDialogConfirm = async () => {
		punchInApi.revokePunchIn({id: punchInId.value})
		.then(ret => {
			revokeDialog.value.close();
			uni.showToast({
				title: '撤销成功',
				icon: 'success'
			});
			// TODO 这里要重新加载任务
		})
		.catch(err => {
			uni.showToast({
				title: '撤销失败',
				icon: 'error'
			});
		});
	}
	
	/**
	 * 撤销取消
	 */
	const revokeDialogClose = () => {
		revokeDialog.value.close();
	}
	
	const calendarChange = (e) => {
		console.log(e);
	}
	
	const calendarMonthSwitchChange = (e) => {
		console.log(e);
	}
	
	onLoad(async (e) => {
		if (e.id) {
			punchInId.value = e.id;
		}
	});
</script>

<style lang="scss" scoped>
	.info-box, .log-box {
		margin-top: 24rpx;
	}
	
	.info-box {
		display: flex;
		background-color: #FFFFFF;
		padding: 20rpx 10rpx;
		
		.left, .right {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>