uni-x/pages/index/index.uvue

<template>
	<x-page>
		<x-navbar>
			<text class="navbar-text">LuMi</text>
		</x-navbar>
		<view class="tabs">
			<view class="tab">
				<text class="tab-text">{{nowYear}}年{{nowMonth}}月</text>
			</view>
		</view>
		<view class="rili">
			<view class="grid">
				<view class="grid-item" :style="getGridItemStyle(day)" v-for="day in all" :key="day">
					<view class="grid-item-box">
						<view class="grid-item-content">
							<text class="grid-item-text" :style="getGridItemTextStyle(day)">{{ day.label }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <text class="clear" @click="click2" v-if="recordDate.length">清除所有</text> -->
		<view class="list">
			<view class="item" v-for="(item, index) in recordDate">
				<text class="label">{{item.label}}</text>
				<text class="close" @click="delIem(item, index)">x</text>
			</view>
		</view>
		<view class="float-btn" @click="click">
			<text class="float-btn-text">打卡</text>
		</view>
	</x-page>
</template>

<script setup>
	import { getCurMonthDayNum, getCurrentMonth, formatFull, getLastMonth, getLastMonthDay, format, getWeek, getNextMonthDay, generateDate } from "@/utils/date.uts"

	type TItem = { label : string; value : Date; }

	const nowDate = ref(new Date())
	const nowYear = computed(() => {
		return nowDate.value.getFullYear()
	})
	const nowMonth = computed(() => {
		return nowDate.value.getMonth() + 1
	})
	const recordDate = ref<TItem[]>([])

	const all = computed(() => {
		return generateDate<TItem>(format(nowDate.value), (v : Date) => ({
			label: v.getDate() + "",
			value: v
		}))
	})

	const isRecord = (date : Date) => {
		let count = 0
		for (var i = 0; i < recordDate.value.length; i++) {
			var item = recordDate.value[i];
			if (format(item.value) == format(date)) {
				count++
			}
		}
		return count
	}

	const isToday = (date : Date) => {
		return format(nowDate.value) == format(date)
	}

	const getGridItemStyle = (day : TItem) => {
		const count = isRecord(day.value)
		return {
			backgroundColor: count ? `rgba(0, 0, 0, ${count * 0.2})` : 'rgba(0, 0, 0, 0.05)'
		}
	}

	const getGridItemTextStyle = (day : TItem) => {
		const count = isRecord(day.value)
		return {
			color: count ? '#ffffff' : isToday(day.value) ? 'black' : 'rgba(0, 0, 0, .08)'
		}
	}

	const data = uni.getStorageSync("save")
	if (Array.isArray(data as [])) {
		let result : TItem[] = []
		for (let i = 0; i < data.length; i++) {
			let v : number = data[i] as number
			const date = new Date(v)
			result.push({
				label: formatFull(date),
				value: date
			})
		}
		recordDate.value = result
	} else {
		recordDate.value = []
	}

	const click2 = () => {
		uni.removeStorageSync("save")
		recordDate.value = []
	}

	const click = () => {
		const date = new Date()
		recordDate.value.unshift({
			label: formatFull(date),
			value: date
		} as TItem)
		uni.setStorageSync("save", unref(recordDate).map(v => v.value.getTime()))
	}

	const delIem = (item : TItem, index : number) => {
		recordDate.value.splice(index, 1)
		uni.setStorageSync("save", unref(recordDate))
	}
</script>

<style lang="scss" scoped>
	.navbar-text {
		font-size: 45rpx;
		font-family: ZhanKuKuaiLeTi;
	}

	.tabs {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 25rpx 0 15rpx;
		margin-left: -20rpx;

		.tab {
			margin-left: 20rpx;

			.tab-text {
				font-size: 45rpx;
				font-family: ZhanKuKuaiLeTi;
			}
		}
	}

	.clear {
		padding: 20rpx 100rpx;
	}

	.list {
		.item {
			padding: 20rpx 100rpx;
			flex-direction: row;
			align-items: center;

			.label {
				flex: 1;
				width: 0;
			}
		}
	}

	.rili {
		margin-top: -30rpx;

		.grid {
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
			margin-left: -30rpx;
			margin-top: -30rpx;
			padding: 30rpx 80rpx 0;

			.grid-item {
				width: 55rpx;
				margin-left: 30rpx;
				margin-top: 30rpx;
				border-radius: 15rpx;
				background-color: rgba(0, 0, 0, 0.05);

				.grid-item-box {
					padding-bottom: 100%;
					position: relative;

					.grid-item-content {
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						align-items: center;
						justify-content: center;

						.grid-item-text {
							color: rgba(0, 0, 0, .08);
							font-size: 25rpx;
						}
					}
				}
			}
		}
	}

	.float-btn {
		position: fixed;
		z-index: 99;
		left: 50%;
		transform: translate(-50%);
		bottom: 100rpx;
		width: 100rpx;
		height: 100rpx;
		align-items: center;
		justify-content: center;
		border-radius: 100rpx;
		background-color: white;
		box-shadow:
			0 2px 10px rgba(0, 0, 0, 0.1);

		.float-btn-text {
			font-size: 25rpx;
		}
	}
</style>