Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
76f651cc 1 parent 047ad841

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

在打卡页面添加了van-empty组件用于显示无数据状态
将数据加载逻辑拆分为独立函数，便于复用和维护
移除不再使用的mock数据，优化代码结构
Inline Side-by-side
Showing 1 changed file with 37 additions and 142 deletions
<!--
* @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: 文件描述
-->
<template>
* @Description: 文件描述
-->
<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 { code, data } = await getTaskDetailAPI({ i: route.query.id, month: dayjs().format('YYYY-MM') });
const getTaskDetail = async (month) => {
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) {
console.warn(task_list.data?.checkin_list);
}
const initUploadTaskList = async (date) => {
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">
......