luoyang-uniapp-app/pages/indexEntry/signIn/signIn.vue

<template>
    <view class="pageBg pad">
        <zeng-calen  :actDay="actDay" :chooseDayLack="chooseDayLack" @onDayClick='onDayClick' :chooseDay="chooseDay"></zeng-calen>
		<view class="btnBg" style="margin: 20rpx 0;">去签到/去签退</view>
		<view class="card">
			<view class="h1"><text class="active">签到记录</text></view>
			<view class="ul">
				<view class="li" v-for="(item,index) in 4" :key="index">
					<view class="lab">{{ index%2==0? '签退成功':'签到成功'}}</view>
					<view class="date">2024-01-29  11:29</view>
				</view>
			</view>
		</view>
    </view>
</template>

<script>
	import zengCalen from '@/uni_modules/zeng-calen/components/zeng-calen/zeng-calen'
    export default {
		components: {zengCalen},
        data() {
            return {
                actDay: [], //用户选择的日期
                chooseDay: ["2024-01-29", "2024-01-27", "2024-01-19", "2024-01-10"], //已被投标的数据
                chooseDayLack: ["2024-01-29", ], //已被投标的数据
            }
        },
        onLoad() {

        },
        methods: {
            // 展开日历
            onDayClick(data) {
				this.actDay = [data]
				return
                let choose = data.date //用户点中的数据
                if (this.actDay.includes(choose)) { //如果用户点击的日期已经存在
                    // 移除元素下标
                    const index = this.actDay.indexOf(choose);
                    //删除用户点击的日期
                    this.actDay.splice(index, 1)
                } else if (this.chooseDay.includes(choose)) { //判断是否已经被投标
                    uni.showToast({
                        title: "这个日期已经被投标了",
                        icon: "none"
                    })
                } else {
                    //添加用户点击的日期
                    this.actDay.push(choose)
                }
            },
        }
    }
</script>

<style lang="scss" scoped>
	.pageBg {
		padding-bottom: 30rpx;
	}
	.card {
		padding: 20rpx;
		.ul {
			.li {
				padding: 30rpx 0;
				border-bottom: 1px solid #f4f4f4;
				&:last-child {
					border: none;
				}
				.lab {
					font-size: 28rpx;
					color: #333;
				}
				.date {
					font-size: 24rpx;
					color: #999;
					margin-top: 16rpx;
				}
			}
		}
	}

</style>