feat(日历组件): 添加清空选中日期功能并优化日期切换按钮显示

在日历组件中添加清空选中日期的功能，并优化日期切换按钮的显示样式和文本当有选中日期时显示具体日期，无选中日期时显示"切换日期" 添加清空按钮用于快速清除当前选中状态

feat(日历组件): 添加清空选中日期功能并优化日期切换按钮显示
在日历组件中添加清空选中日期的功能，并优化日期切换按钮的显示样式和文本当有选中日期时显示具体日期，无选中日期时显示"切换日期" 添加清空按钮用于快速清除当前选中状态
hookehuyr
Commit 18207a1b8af73de9ca8788865aee74b8dc75255c 18207a1b 1 parent 438e1260
Showing 2 changed files with 54 additions and 4 deletions
src/components/calendar/CollapsibleCalendar.vue
src/views/checkin/IndexCheckInPage.vue
--- a/src/components/calendar/CollapsibleCalendar.vue
View file @18207a1
+++ b/src/components/calendar/CollapsibleCalendar.vue
View file @18207a1
 <!--
  * @Date: 2025-01-25 15:34:17
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2026-01-22 20:26:40
+ * @LastEditTime: 2026-01-22 20:44:20
  * @FilePath: /mlaj/src/components/calendar/CollapsibleCalendar.vue
  * @Description: 可折叠日历组件
 -->
@@ -29,7 +29,7 @@
                 <div class="calendar-date-display" @click="expandCalendar">
                     <div class="calendar-date-main">{{ formattedCurrentDate }}</div>
                     <div class="calendar-weekday">{{ formattedWeekday }}</div>
-                    <div class="text-xs text-gray-500 mt-1 collapsible-text p-1 bg-white w-20 text-center rounded-full border border-gray-200">切换日期</div>
+                    <div class="text-xs text-gray-500 mt-1 collapsible-text px-3 py-1 bg-white text-center rounded-full border border-gray-200 inline-block min-w-[5rem] max-w-[8rem]">{{ toggleButtonText }}</div>
                 </div>
                 <!-- <div class="calendar-action">
                     <div class="calendar-action-text">指定日期</div>
@@ -63,6 +63,13 @@
             @close="collapseCalendar"
         >
             <div class="calendar-popup-content">
+                <button
+                    v-if="hasSelectedDate"
+                    class="absolute top-3 right-3 z-10 text-xs px-3 py-1 rounded-full border border-green-600 text-green-600 bg-white"
+                    @click.stop="clearSelectedDate"
+                >
+                    清空
+                </button>
                 <van-calendar
                     ref="calendarRef"
                     :poppable="false"
@@ -144,11 +151,15 @@ const props = defineProps({
     subtaskList: {
         type: Array,
         default: () => []
+    },
+    hasSelectedDate: {
+        type: Boolean,
+        default: false
     }
 })
 // Emits定义
-const emit = defineEmits(['update:modelValue', 'select', 'click-subtitle', 'panel-change', 'select-course'])
+const emit = defineEmits(['update:modelValue', 'select', 'click-subtitle', 'panel-change', 'select-course', 'clear-date'])
 // 响应式数据
 const isExpanded = ref(false)
@@ -321,6 +332,13 @@ const formattedWeekday = computed(() => {
     return weekdays[dayjs(currentDate.value).day()]
 })
+const toggleButtonText = computed(() => {
+    if (!props.hasSelectedDate) return '切换日期'
+    const date_val = props.modelValue || currentDate.value
+    const text = dayjs(date_val).format('YYYY-MM-DD')
+    return `选中 ${text}`
+})
+
 /**
  * 展开日历
  */
@@ -366,6 +384,17 @@ const onPanelChange = (panel) => {
     emit('panel-change', panel)
 }
+const clearSelectedDate = () => {
+    const today = new Date()
+    currentDate.value = today
+    if (calendarRef.value && typeof calendarRef.value.reset === 'function') {
+        calendarRef.value.reset(today)
+    }
+    emit('update:modelValue', today)
+    emit('clear-date')
+    collapseCalendar()
+}
+
 // 监听modelValue变化
 watch(() => props.modelValue, (newValue) => {
     if (newValue) {
@@ -592,6 +621,7 @@ defineExpose({
 }
 .calendar-popup-content {
+    position: relative;
     height: 100%;
     overflow: hidden;
--- a/src/views/checkin/IndexCheckInPage.vue
View file @18207a1
+++ b/src/views/checkin/IndexCheckInPage.vue
View file @18207a1
@@ -15,11 +15,13 @@
           :title="taskDetail.title"
           :formatter="formatter"
           :subtask-list="taskDetail.subtask_list"
+          :has-selected-date="hasUserSelectedDate"
           v-model="selectedDate"
           @select="onSelectDay"
           @click-subtitle="onClickSubtitle"
           @panel-change="onPanelChange"
           @select-course="onSelectCourse"
+          @clear-date="onClearSelectedDate"
         />
       </div>
@@ -335,6 +337,24 @@ const selectedDate = ref(new Date());
 const hasUserSelectedDate = ref(!!route.query.date)
 const isInitializing = ref(true)
+const onClearSelectedDate = () => {
+  const next_query = { ...route.query }
+  delete next_query.date
+  router.replace({
+    path: route.path,
+    query: next_query
+  })
+
+  hasUserSelectedDate.value = false
+  selectedDate.value = dayjs().format('YYYY-MM-DD')
+  getTaskDetail(dayjs().format('YYYY-MM'))
+
+  page.value = 0
+  checkinDataList.value = []
+  finished.value = false
+  onLoad(null, false)
+}
+
 const onSelectDay = (day) => {
   const currentSelectedDate = dayjs(day).format('YYYY-MM-DD');
@@ -394,7 +414,7 @@ const onSelectCourse = (course) => {
   checkinDataList.value = []
   finished.value = false
   // 重新加载数据
-  onLoad(route.query.date, hasUserSelectedDate.value)
+  onLoad(hasUserSelectedDate.value ? (route.query.date || selectedDate.value) : null, hasUserSelectedDate.value)
 }
 /**