hookehuyr

feat(打卡页面): 添加日期选择事件和图片圆角样式

- 为日历组件添加@select事件处理函数onSelectDay,用于记录选择的日期
- 为帖子图片添加radius属性设置圆角样式
- 修正formatter函数中月份判断条件从5月改为6月
<!--
* @Date: 2025-05-29 15:34:17
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-06-03 14:36:54
* @LastEditTime: 2025-06-03 15:43:39
* @FilePath: /mlaj/src/views/checkin/IndexCheckInPage.vue
* @Description: 文件描述
-->
......@@ -10,6 +10,7 @@
<van-config-provider :theme-vars="themeVars">
<van-calendar title="每日打卡" :poppable="false" :show-confirm="false" :style="{ height: '24rem' }"
switch-mode="year-month" color="#4caf50" :formatter="formatter" row-height="42" :show-mark="false"
@select="onSelectDay"
@click-subtitle="onClickSubtitle">
</van-calendar>
......@@ -80,7 +81,7 @@
<div class="post-text">{{ post.content }}</div>
<div class="post-media">
<div v-if="post.images.length" class="post-images">
<van-image width="30%" fit="cover" v-for="(image, index) in post.images" :key="index" :src="image"
<van-image width="30%" fit="cover" v-for="(image, index) in post.images" :key="index" :src="image" radius="5"
@click="openImagePreview(index, post)" />
</div>
<van-image-preview v-if="currentPost" v-model:show="showImagePreview" :images="currentPost.images" :start-position="startPosition" :show-index="true" @change="onChange" />
......@@ -147,6 +148,7 @@ import FrostedGlass from "@/components/ui/FrostedGlass.vue";
import VideoPlayer from "@/components/ui/VideoPlayer.vue";
import AudioPlayer from "@/components/ui/AudioPlayer.vue";
import { useTitle } from '@vueuse/core';
import dayjs from 'dayjs';
const route = useRoute()
const router = useRouter()
......@@ -475,7 +477,7 @@ const formatter = (day) => {
let checkin_days = [1, 3, 5, 7];
if (month === 5) {
if (month === 6) {
if (checkin_days.includes(date)) {
day.className = 'calendar-checkin';
day.type = 'selected';
......@@ -485,6 +487,10 @@ const formatter = (day) => {
return day;
}
const onSelectDay = (day) => {
console.warn('选择了日期', dayjs(day).format('YYYY-MM-DD'));
}
const onClickSubtitle = (evt) => {
console.warn('点击了日期标题');
}
......