hookehuyr

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

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