feat(打卡页面): 添加日期选择事件和图片圆角样式
- 为日历组件添加@select事件处理函数onSelectDay,用于记录选择的日期 - 为帖子图片添加radius属性设置圆角样式 - 修正formatter函数中月份判断条件从5月改为6月
Showing
1 changed file
with
9 additions
and
3 deletions
| 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 | } | ... | ... |
-
Please register or login to post a comment