feat(checkin): 添加空状态提示并优化数据加载逻辑

在打卡页面添加了van-empty组件用于显示无数据状态将数据加载逻辑拆分为独立函数，便于复用和维护移除不再使用的mock数据，优化代码结构

feat(checkin): 添加空状态提示并优化数据加载逻辑
在打卡页面添加了van-empty组件用于显示无数据状态将数据加载逻辑拆分为独立函数，便于复用和维护移除不再使用的mock数据，优化代码结构
hookehuyr
Commit 76f651cca452504a47622e2299865eba55a6f94e 76f651cc 1 parent 047ad841
Showing 1 changed file with 37 additions and 142 deletions
src/views/checkin/IndexCheckInPage.vue
--- a/src/views/checkin/IndexCheckInPage.vue
View file @76f651c
+++ b/src/views/checkin/IndexCheckInPage.vue
View file @76f651c
 <!--
- * @Date: 2025-05-29 15:34:17
+  * @Date: 2025-05-29 15:34:17
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-06-06 18:27:24
+ * @LastEditTime: 2025-06-06 20:29:45
  * @FilePath: /mlaj/src/views/checkin/IndexCheckInPage.vue
- * @Description: 文件描述
+  * @Description: 文件描述
--->
+ -->
-<template>
+ <template>
   <AppLayout :hasTitle="false">
     <van-config-provider :theme-vars="themeVars">
       <van-calendar :title="taskDetail.title" :poppable="false" :show-confirm="false" :style="{ height: '24rem' }"
@@ -143,6 +143,7 @@
             <span class="like-count">{{ post.likes }}</span>
           </div>
         </div>
+        <van-empty v-if="!checkinDataList.length" image="error" description="暂无数据" />
       </div>
       <div style="height: 5rem;"></div>
@@ -322,131 +323,6 @@ const stopAllVideos = () => {
   });
 };
-// Mock数据
-const mockPosts = ref([
-  {
-    id: 1,
-    user: {
-      name: '图片预览',
-      avatar: 'https://cdn.ipadbiz.cn/space/816560/大国少年_FhnF8lsFMPnTDNTBlM6hYa-UFBlW.jpg',
-      time: '2小时前'
-    },
-    content: '今天完成了React基础课程的学习，收获满满！',
-    images: [
-      'https://cdn.ipadbiz.cn/space/816560/大国少年_FhnF8lsFMPnTDNTBlM6hYa-UFBlW.jpg',
-      'https://cdn.ipadbiz.cn/mlaj/images/_6HzPU9Hyfg (2).jpg',
-      'https://cdn.ipadbiz.cn/space/816560/大国少年_FhnF8lsFMPnTDNTBlM6hYa-UFBlW.jpg',
-      'https://cdn.ipadbiz.cn/space/816560/大国少年_FhnF8lsFMPnTDNTBlM6hYa-UFBlW.jpg',
-    ],
-    videoList: [],
-    isPlaying: false,
-    audio: [],
-    likes: 12,
-    is_liked: false,
-  },
-  {
-    id: 2,
-    user: {
-      name: '小林',
-      avatar: 'https://cdn.ipadbiz.cn/space/816560/大国少年_FhnF8lsFMPnTDNTBlM6hYa-UFBlW.jpg',
-      time: '2小时前'
-    },
-    content: '今天完成了React基础课程的学习，收获满满！',
-    images: [],
-    video: 'https://cdn.ipadbiz.cn/space/lk3DmvLO02dUC2zPiFwiClDe3nKL.mp4',
-    videoList: [{
-      id: 1,
-      video: 'https://cdn.ipadbiz.cn/space/lk3DmvLO02dUC2zPiFwiClDe3nKL.mp4',
-      videoCover: '',
-      isPlaying: false,
-    }, {
-      id: 2,
-      video: 'https://cdn.ipadbiz.cn/space/lk3DmvLO02dUC2zPiFwiClDe3nKL.mp4',
-      videoCover: '',
-      isPlaying: false,
-    }],
-    isPlaying: false,
-    audio: [],
-    likes: 12,
-    is_liked: false,
-  },
-  {
-    id: 3,
-    user: {
-      name: '小林',
-      avatar: 'https://cdn.ipadbiz.cn/space/816560/大国少年_FhnF8lsFMPnTDNTBlM6hYa-UFBlW.jpg',
-      time: '2小时前'
-    },
-    content: '今天完成了React基础课程的学习，收获满满！',
-    images: [],
-    videoList: [],
-    isPlaying: false,
-    audio: [
-      {
-        title: '学习心得分享1',
-        artist: '',
-        url: 'https://cdn.ipadbiz.cn/space/816560/双手合十迎客来_Fs2W-5mnQSFL8S5CDsHho-_xcvaY.mp3',
-        cover: ''
-      },
-      {
-        title: '学习心得分享2',
-        artist: '',
-        url: 'https://cdn.ipadbiz.cn/space/816560/双手合十迎客来_Fs2W-5mnQSFL8S5CDsHho-_xcvaY.mp3',
-        cover: ''
-      }
-    ],
-    likes: 12,
-    is_liked: false,
-  },
-  {
-    id: 4,
-    user: {
-      name: '小林',
-      avatar: 'https://cdn.ipadbiz.cn/space/816560/大国少年_FhnF8lsFMPnTDNTBlM6hYa-UFBlW.jpg',
-      time: '2小时前'
-    },
-    content: '今天完成了React基础课程的学习，收获满满！',
-    images: [],
-    videoList: [{
-      id: 3,
-      video: 'https://cdn.ipadbiz.cn/space/lk3DmvLO02dUC2zPiFwiClDe3nKL.mp4',
-      videoCover: '',
-      isPlaying: false,
-    }, {
-      id: 4,
-      video: 'https://cdn.ipadbiz.cn/space/lk3DmvLO02dUC2zPiFwiClDe3nKL.mp4',
-      videoCover: '',
-      isPlaying: false,
-    }],
-    isPlaying: false,
-    audio: [],
-    likes: 12,
-    is_liked: false,
-  },
-  {
-    id: 5,
-    user: {
-      name: '小林',
-      avatar: 'https://cdn.ipadbiz.cn/space/816560/大国少年_FhnF8lsFMPnTDNTBlM6hYa-UFBlW.jpg',
-      time: '2小时前'
-    },
-    content: '今天完成了React基础课程的学习，收获满满！',
-    images: [],
-    videoList: [],
-    isPlaying: false,
-    audio: [
-      {
-        title: '学习心得分享',
-        artist: '',
-        url: 'https://cdn.ipadbiz.cn/space/816560/双手合十迎客来_Fs2W-5mnQSFL8S5CDsHho-_xcvaY.mp3',
-        cover: ''
-      }
-    ],
-    likes: 12,
-    is_liked: false,
-  },
-]);
-
 const themeVars = {
   calendarSelectedDayBackground: '#4caf50',
   calendarHeaderShadow: 'rgba(0, 0, 0, 0.1)',
@@ -496,6 +372,9 @@ const formatter = (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'));
 }
 const onClickSubtitle = (evt) => {
@@ -593,7 +472,9 @@ const delCheckin = (post) => {
       if (code) {
         // 删除成功后，刷新页面
         showSuccessToast('删除成功');
-        router.go(0);
+        // router.go(0);
+        // 删除post_id相应的数据
+        checkinDataList.value = checkinDataList.value.filter(item => item.id !== post.id);
       } else {
         showErrorToast('删除失败');
       }
@@ -607,8 +488,8 @@ const taskDetail = ref({});
 const myCheckinDates = ref([]);
 const checkinDataList = ref([]);
-onMounted(async () => {
+const getTaskDetail = async (month) => {
-  const { code, data } = await getTaskDetailAPI({ i: route.query.id, month: dayjs().format('YYYY-MM') });
+  const { code, data } = await getTaskDetailAPI({ i: route.query.id, month });
   if (code) {
     console.warn(data);
     taskDetail.value = data;
@@ -621,12 +502,26 @@ onMounted(async () => {
       return dayjs(date).date();
     })
   }
-  // 获取打卡动态列表
+}
-  const task_list = await getUploadTaskListAPI({ task_id: route.query.id, date: dayjs().format('YYYY-MM-DD'), limit: 999 });
+
-  if (task_list.code) {
+const initUploadTaskList = async (date) => {
-    console.warn(task_list.data?.checkin_list);
+  const { code, data } = await getUploadTaskListAPI({ task_id: route.query.id, date, limit: 999 });
+  if (code) {
+    console.warn(data?.checkin_list);
     // 整理数据结构
-    task_list.data?.checkin_list.forEach((item, index) => {
+    checkinDataList.value = formatData(data)
+  }
+}
+
+onMounted(async () => {
+  getTaskDetail(dayjs().format('YYYY-MM'));
+  // 获取打卡动态列表
+  initUploadTaskList(dayjs().format('YYYY-MM-DD'));
+})
+
+const formatData = (data) => {
+  let formattedData = [];
+  formattedData = data?.checkin_list.map((item, index) => {
       let images = [];
       let audio = [];
       let videoList = [];
@@ -653,7 +548,7 @@ onMounted(async () => {
           }
         })
       }
-      checkinDataList.value.push({
+      return {
         id: item.id,
         task_id: item.task_id,
         user: {
@@ -670,10 +565,10 @@ onMounted(async () => {
         is_liked: item.is_like,
         is_my: item.is_my,
         file_type: item.file_type,
-      })
+      }
     })
-  }
+  return formattedData;
-})
+}
 </script>
 <style lang="less">