hookehuyr

feat(签到页面): 为已选中的已签到日期添加特殊样式

添加 selectedDate 响应式变量来跟踪当前选中日期
修改日历日期格式化逻辑,对当前选中的已签到日期应用不同样式
更新路由导航逻辑以同步选中日期状态
<!--
* @Date: 2025-05-29 15:34:17
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-06-15 22:49:42
* @LastEditTime: 2025-06-19 14:23:17
* @FilePath: /mlaj/src/views/checkin/IndexCheckInPage.vue
* @Description: 文件描述
-->
......@@ -165,7 +165,7 @@
</template>
<script setup>
import { ref, onBeforeUnmount, onMounted, computed } from 'vue'
import { ref, onBeforeUnmount, onMounted, computed, nextTick, getCurrentInstance } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showConfirmDialog, showSuccessToast, showFailToast, showLoadingToast } from 'vant';
import AppLayout from "@/components/layout/AppLayout.vue";
......@@ -442,11 +442,18 @@ const formatter = (day) => {
// 检查是否已签到
if (checkin_days.includes(formattedDate)) {
// 如果是当前选中的已签到日期,使用特殊样式
if (selectedDate.value === formattedDate) {
day.className = 'calendar-selected';
day.type = 'selected';
day.bottomInfo = '已签到';
} else {
day.className = 'calendar-checkin';
day.type = 'selected';
day.bottomInfo = '已签到';
}
}
}
// 选中今天的日期
if (dayjs(day.date).isSame(new Date(), 'day')) {
......@@ -458,14 +465,22 @@ const formatter = (day) => {
return day;
}
// 添加一个响应式变量来存储当前选中的日期
const selectedDate = ref('');
const onSelectDay = (day) => {
getTaskDetail(dayjs(day).format('YYYY-MM'));
// 更新当前选中的日期
const currentSelectedDate = dayjs(day).format('YYYY-MM-DD');
selectedDate.value = currentSelectedDate;
// 修改浏览器地址把当前的date加入地址栏, 页面不刷新
router.push({
path: route.path,
query: {
...route.query,
date: dayjs(day).format('YYYY-MM-DD')
date: currentSelectedDate
}
})
// 重置分页参数
......@@ -473,7 +488,7 @@ const onSelectDay = (day) => {
checkinDataList.value = []
finished.value = false
// 重新加载数据
onLoad(dayjs(day).format('YYYY-MM-DD'))
onLoad(currentSelectedDate)
}
const onClickSubtitle = (evt) => {
......@@ -692,6 +707,12 @@ const formatData = (data) => {
</script>
<style lang="less">
.calendar-selected {
.van-calendar__selected-day {
background: #4caf50 !important;
}
}
.calendar-checkin {
.van-calendar__selected-day {
background: #a2d8a3 !important;
......