feat(teacher/checkinPage): 添加日期选择器并优化日历组件

在教师签到页面添加日期选择触发区域，优化日历组件为弹窗模式更新日期选择逻辑，添加当前日期显示和格式化功能调整日历弹窗高度样式，提升用户体验

feat(teacher/checkinPage): 添加日期选择器并优化日历组件
在教师签到页面添加日期选择触发区域，优化日历组件为弹窗模式更新日期选择逻辑，添加当前日期显示和格式化功能调整日历弹窗高度样式，提升用户体验
hookehuyr
Commit 2bd1e387822d3b80cff2a9ddf6d403654072afb3 2bd1e387 1 parent d573522b
Showing 1 changed file with 47 additions and 5 deletions
src/views/teacher/checkinPage.vue
--- a/src/views/teacher/checkinPage.vue
View file @2bd1e38
+++ b/src/views/teacher/checkinPage.vue
View file @2bd1e38
 <!--
   * @Date: 2025-05-29 15:34:17
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-12-11 20:54:50
+ * @LastEditTime: 2025-12-11 22:03:52
  * @FilePath: /mlaj/src/views/teacher/checkinPage.vue
   * @Description: 文件描述
 -->
@@ -16,14 +16,22 @@
         </van-dropdown-menu> -->
         <!-- 课程, 大分组, 小分组 筛选 -->
         <CourseGroupCascader @change="on_cascade_change" />
+
+        <!-- 日期选择触发区域 -->
+        <div class="date-trigger" @click="showCalendar = true">
+          <div class="current-date">{{ formattedSelectedDate }}</div>
+          <div class="date-hint">点击切换日期</div>
+        </div>
       </van-sticky>
-      <van-calendar ref="myRefCalendar" :show-title="false" :poppable="false" :show-confirm="false"
+      <van-config-provider :theme-vars="themeVars">
-        switch-mode="year-month" color="#4caf50" :formatter="formatter" row-height="50" :show-mark="false"
+        <van-calendar ref="myRefCalendar" v-model:show="showCalendar" :poppable="true" :show-confirm="false"
+          switch-mode="year-month" color="#4caf50" :formatter="formatter" row-height="50" :show-mark="false" title="选择日期"
           @select="onSelectDay"
           @panel-change="onPanelChange"
           @click-subtitle="onClickSubtitle">
         </van-calendar>
+      </van-config-provider>
       <!-- <div style="padding: 0 1rem; margin-top: 1rem;">
         <van-row gutter="15">
@@ -150,7 +158,13 @@ const gradeOption = ref([]);
 const classOption = ref([]);
 const courseOption = ref([]);
+const showCalendar = ref(false);
 const currentMonth = ref(dayjs().format('YYYY-MM'));
+const selectedDate = ref(dayjs().format('YYYY-MM-DD'));
+
+const formattedSelectedDate = computed(() => {
+  return dayjs(selectedDate.value).format('YYYY年MM月DD日');
+});
 /**
  * 重置分页参数并重新加载数据
@@ -335,6 +349,7 @@ const themeVars = reactive({
   calendarHeaderShadow: 'rgba(0, 0, 0, 0.1)',
   calendarInfoLineHeight: '0.3rem',
   buttonNormalFontSize: '1rem',
+  calendarPopupHeight: '25rem',
 })
 const progress1 = ref(0);
@@ -380,8 +395,6 @@ const formatter = (day) => {
   return day;
 }
-// 添加一个响应式变量来存储当前选中的日期
-const selectedDate = ref('');
 const onSelectDay = (day) => {
   getTaskDetail(dayjs(day).format('YYYY-MM'));
@@ -389,6 +402,7 @@ const onSelectDay = (day) => {
   // 更新当前选中的日期
   const currentSelectedDate = dayjs(day).format('YYYY-MM-DD');
   selectedDate.value = currentSelectedDate;
+  showCalendar.value = false;
   // 修改浏览器地址把当前的date加入地址栏, 页面不刷新
   // 使用replace替代push，避免在浏览器历史记录中添加多个条目
@@ -622,11 +636,13 @@ const getFilterList = async (grade_id=null, class_id=null) => {
 onMounted(async () => {
   const current_date = route.query.date;
   if (current_date) {
+    selectedDate.value = current_date;
     getTaskDetail(dayjs(current_date).format('YYYY-MM'));
     getCheckedDates(dayjs(current_date).format('YYYY-MM'));
     myRefCalendar.value?.reset(new Date(current_date));
     onLoad(current_date);
   } else {
+    selectedDate.value = dayjs().format('YYYY-MM-DD');
     getTaskDetail(dayjs().format('YYYY-MM'));
     getCheckedDates(dayjs().format('YYYY-MM'));
     onLoad(dayjs().format('YYYY-MM-DD'));
@@ -703,6 +719,32 @@ const handleAdd = (type) => {
 .van-back-top {
   background-color: #4caf50;
 }
+
+.date-trigger {
+  background-color: #fff;
+  padding: 1rem;
+  text-align: center;
+  cursor: pointer;
+  border-bottom: 1px solid #eee;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  flex-direction: column;
+
+  .current-date {
+    font-size: 1rem;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 0;
+  }
+
+  .date-hint {
+    font-size: 0.8rem;
+    color: #999;
+  }
+}
+
 /* 下拉菜单选项文字单行显示 */
 .van-dropdown-item {
   .van-cell__title {