warst/warst-h5/pages/attendanceClock/workContent/clockInTimeout.vue

<template>
	<!--未打卡,但是已过打卡时间-->
	<view class="clock-in-timeout">
		<view class="dflex acenter">
			<text class="ct-title">未打卡</text>
			<view class="lack-cards" v-show="status">{{ status }}</view>
		</view>
		<c-button @click="goApproval('0')" type="text">申请补卡</c-button>
	</view>
</template>

<script>
import {
	checkStatus,
	checkOutStatus,
} from '@/pages/attendanceClock/com/allCheckData.js';
export default {
	name: 'clockInTimeout',
	props: {
		type: String, // 1为下班 否则上班
		clockStatus: String, // 上下班状态
	},
	computed: {
		status() {
			if (this.type === '1') {
				// 下班
				return checkOutStatus.find(
					(item) => item.value === this.clockStatus
				)?.label;
			}
			// 上班
			return checkStatus.find(
				(item) => item.value === this.clockStatus
			)?.label;
		},
	},
	methods: {
		goApproval(type) {
			uni.$u.route('pages/approval/index', { type });
		},
	},
};
</script>

<style scoped lang="scss">
.clock-in-timeout {
	display: flex;
	justify-content: space-between;

	.ct-title {
		color: #152f62;
	}
	.lack-cards {
		margin-left: 24rpx;
		background-color: #f4774d;
		padding: 2px 4px;
		border-radius: 3px;
		font-size: 12px;
		color: #fff;
	}
}
</style>