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

添加 selectedDate 响应式变量来跟踪当前选中日期
修改日历日期格式化逻辑，对当前选中的已签到日期应用不同样式
更新路由导航逻辑以同步选中日期状态

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