feat(checkin): 实现打卡动态列表分页加载和日期选择优化

重构打卡动态列表为分页加载方式，提升性能优化日期选择逻辑，自动重置分页参数并重新加载数据修复日历日期匹配逻辑，支持完整日期格式匹配

feat(checkin): 实现打卡动态列表分页加载和日期选择优化
重构打卡动态列表为分页加载方式，提升性能优化日期选择逻辑，自动重置分页参数并重新加载数据修复日历日期匹配逻辑，支持完整日期格式匹配
hookehuyr
Commit 1242672624ba2f883cbf2b359ba719e8ca6c5d20 12426726 1 parent 9cd5a557
Showing 1 changed file with 60 additions and 29 deletions
src/views/checkin/IndexCheckInPage.vue
--- a/src/views/checkin/IndexCheckInPage.vue
View file @1242672
+++ b/src/views/checkin/IndexCheckInPage.vue
View file @1242672
 <!--
   * @Date: 2025-05-29 15:34:17
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-06-09 15:50:10
+ * @LastEditTime: 2025-06-10 10:20:08
  * @FilePath: /mlaj/src/views/checkin/IndexCheckInPage.vue
   * @Description: 文件描述
  -->
@@ -67,6 +67,14 @@
       <div class="text-wrapper">
         <div class="text-header">打卡动态</div>
+        <van-list
+          v-if="checkinDataList.length"
+          v-model:loading="loading"
+          :finished="finished"
+          finished-text="没有更多了"
+          @load="onLoad"
+          class="px-4 py-3 space-y-4"
+        >
           <div class="post-card" v-for="post in checkinDataList" :key="post.id">
             <div class="post-header">
               <van-row>
@@ -143,7 +151,8 @@
               <span class="like-count">{{ post.likes }}</span>
             </div>
           </div>
-        <van-empty v-if="!checkinDataList.length" image="error" description="暂无数据" />
+        </van-list>
+        <van-empty v-else image="error" description="暂无数据" />
       </div>
       <div style="height: 5rem;"></div>
@@ -353,33 +362,37 @@ const onChange = (index) => {
   startPosition.value = index;
 }
 const formatter = (day) => {
+  const year = day.date.getFullYear();
   const month = day.date.getMonth() + 1;
   const date = day.date.getDate();
   let checkin_days = myCheckinDates.value;
-  if (month === 6) {
+  // 检查当前日期是否在签到日期列表中
-    if (checkin_days.includes(date)) {
+  if (checkin_days && checkin_days.length > 0) {
+    // 格式化当前日期为YYYY-MM-DD格式，与checkin_days中的格式匹配
+    const formattedDate = `${year}-${month.toString().padStart(2, '0')}-${date.toString().padStart(2, '0')}`;
+
+    // 检查是否已签到
+    if (checkin_days.includes(formattedDate)) {
       day.className = 'calendar-checkin';
       day.type = 'selected';
-      day.bottomInfo = '已签到'
+      day.bottomInfo = '已签到';
     }
   }
+
   // 选中今天的日期
   if (dayjs(day.date).isSame(new Date(), 'day')) {
     day.className = 'calendar-today';
-    day.type ='selected';
+    day.type = 'selected';
-    day.bottomInfo = '今日'
+    day.bottomInfo = '今日';
   }
   return day;
 }
 const onSelectDay = (day) => {
-  console.warn('选择了日期', dayjs(day).format('YYYY-MM-DD'));
   getTaskDetail(dayjs(day).format('YYYY-MM'));
-  // 获取打卡动态列表
-  initUploadTaskList(dayjs(day).format('YYYY-MM-DD'));
   // 修改浏览器地址把当前的date加入地址栏, 页面不刷新
   router.push({
     path: route.path,
@@ -388,6 +401,12 @@ const onSelectDay = (day) => {
       date: dayjs(day).format('YYYY-MM-DD')
     }
   })
+  // 重置分页参数
+  page.value = 0
+  checkinDataList.value = []
+  finished.value = false
+  // 重新加载数据
+  onLoad(dayjs(day).format('YYYY-MM-DD'))
 }
 const onClickSubtitle = (evt) => {
@@ -442,7 +461,6 @@ const handLike = async (post) => {
 }
 const editCheckin = (post) => {
-  console.warn(post);
   if (post.file_type === 'image') {
     router.push({
       path: '/checkin/image',
@@ -505,7 +523,6 @@ const showProgress = ref(true);
 const getTaskDetail = async (month) => {
   const { code, data } = await getTaskDetailAPI({ i: route.query.id, month });
   if (code) {
-    console.warn(data);
     taskDetail.value = data;
     progress1.value = (data.checkin_number/data.target_number)*100; // 计算进度条百分比
     showProgress.value = !isNaN(progress1.value); // 如果是NaN，就不显示进度条
@@ -513,37 +530,45 @@ const getTaskDetail = async (month) => {
     // 获取当前用户的打卡日期
     myCheckinDates.value = data.my_checkin_dates;
     // 把['2025-06-06'] 转化为 [6] 只取日期去掉0
-    myCheckinDates.value = myCheckinDates.value.map(date => {
+    // myCheckinDates.value = myCheckinDates.value.map(date => {
-      return dayjs(date).date();
+    //   return dayjs(date).date();
-    })
+    // })
   }
 }
-const initUploadTaskList = async (date) => {
+const loading = ref(false)
-  const toast = showLoadingToast({
+const finished = ref(false)
-    message: '加载中...',
+const limit = ref(3)
-    forbidClick: true,
+const page = ref(0)
+
+const onLoad = async (date) => {
+  const nextPage = page.value;
+  const current_date = date || route.query.date || dayjs().format('YYYY-MM-DD');
+  //
+  const res = await getUploadTaskListAPI({
+    limit: limit.value,
+    page: nextPage,
+    task_id: route.query.id,
+    date: current_date
   });
-  const { code, data } = await getUploadTaskListAPI({ task_id: route.query.id, date, limit: 999 });
+  if (res.code) {
-  if (code) {
-    console.warn(data?.checkin_list);
     // 整理数据结构
-    checkinDataList.value = formatData(data)
+    checkinDataList.value = [...checkinDataList.value, ...formatData(res.data)];
-    toast.close();
+    finished.value = res.data.checkin_list.length < limit.value;
+    page.value = nextPage + 1;
   }
-}
+  loading.value = false;
+};
 onMounted(async () => {
   const current_date = route.query.date;
   if (current_date) {
     getTaskDetail(dayjs(current_date).format('YYYY-MM'));
-    // 获取打卡动态列表
-    initUploadTaskList(current_date);
     myRefCalendar.value?.reset(new Date(current_date));
+    onLoad(current_date);
   } else {
     getTaskDetail(dayjs().format('YYYY-MM'));
-    // 获取打卡动态列表
+    onLoad(dayjs().format('YYYY-MM-DD'));
-    initUploadTaskList(dayjs().format('YYYY-MM-DD'));
   }
 })
@@ -606,6 +631,12 @@ const formatData = (data) => {
   }
 }
+.calendar-today {
+  .van-calendar__selected-day {
+    background: #FAAB0C !important;
+  }
+}
+
 .text-wrapper {
   padding: 1rem;
   color: #4caf50;