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

<template>
	<main-layout :showHome="true" :showBack="true">
		<uni-calendar />	
		<viwe class="info-box">
			<view class="left">打卡：12次</view>
			<view class="right">全勤率：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="fab" :content="content" horizontal="right" vertical="bottom"
					direction="vertical"  @trigger="trigger"/>
	</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 punchInId = ref(null);

	const content = [{
			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 trigger = (e) => {
		if (e.item.func == 'delete') {
			punchInApi.deletePunchIn({id: punchInId.value});
			return;
		}
		if (e.item.func == 'archive') {
			punchInApi.archivePunchIn({id: punchInId.value});
			return;
		}
		if (e.item.func == 'revoke') {
			punchInApi.revokePunchIn({id: punchInId.value});
			return;
		}
		if (e.item.func == 'remake') {
			punchInApi.revokePunchIn({id: punchInId.value});
			return;
		}
		if (e.item.func == 'edit') {
			uni.navigateTo({
				url: router.PUNCHIN_EDIT_URL + "?id=" + punchInId.value
			});
			return;
		}
	}
	
	onLoad(async (e) => {
		if (e.id) {
			punchInId.value = e.id;
			console.log(punchInId.value);
		}
	});
</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>