hookehuyr

feat(打卡): 重构打卡页面并提取公共逻辑到composable

- 将打卡按钮改为底部悬浮样式
- 统一编辑跳转逻辑到CheckinDetailPage
- 提取打卡相关逻辑到useCheckin composable
- 优化打卡详情页的UI和交互
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
<!--
* @Date: 2025-05-29 15:34:17
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-09-30 17:02:29
* @LastEditTime: 2025-09-30 17:58:09
* @FilePath: /mlaj/src/views/checkin/IndexCheckInPage.vue
* @Description: 文件描述
-->
......@@ -57,19 +57,6 @@
</div>
</div>
<!-- 我要打卡按钮 -->
<div v-if="!taskDetail.is_finish" class="text-wrapper" style="padding-bottom: 0;">
<van-button
type="primary"
block
round
@click="goToCheckinDetailPage"
class="checkin-action-button"
>
<van-icon name="edit" size="1.2rem" />
<span style="margin-left: 0.5rem;">我要打卡</span>
</van-button>
</div>
<div class="text-wrapper">
<div class="text-header">打卡动态</div>
......@@ -162,13 +149,26 @@
<van-back-top right="5vw" bottom="10vh" />
</div>
<div style="height: 5rem;"></div>
<div style="height: 10rem;"></div>
</div> <!-- 闭合 scrollable-content -->
</van-config-provider>
<van-dialog v-model:show="dialog_show" title="标题" show-cancel-button></van-dialog>
<van-back-top right="5vw" bottom="15vh" />
<!-- 底部悬浮打卡按钮 -->
<div v-if="!taskDetail.is_finish" class="floating-checkin-button">
<van-button
type="primary"
round
@click="goToCheckinDetailPage"
class="checkin-action-button"
>
<van-icon name="edit" size="1.2rem" />
<span style="margin-left: 0.5rem;">我要打卡</span>
</van-button>
</div>
</AppLayout>
</template>
......@@ -606,34 +606,15 @@ const handLike = async (post) => {
}
const editCheckin = (post) => {
if (post.file_type === 'image') {
router.push({
path: '/checkin/image',
query: {
post_id: post.id,
type: 'image',
status: 'edit',
}
})
} else if (post.file_type === 'video') {
router.push({
path: '/checkin/video',
query: {
post_id: post.id,
type: 'video',
status: 'edit',
}
})
} else if (post.file_type === 'audio') {
router.push({
path: '/checkin/audio',
query: {
post_id: post.id,
type: 'audio',
status: 'edit',
}
})
}
// 统一跳转到CheckinDetailPage页面处理所有类型的编辑
router.push({
path: '/checkin/detail',
query: {
post_id: post.id,
type: post.file_type,
status: 'edit',
}
})
}
const delCheckin = (post) => {
......@@ -651,6 +632,13 @@ const delCheckin = (post) => {
// router.go(0);
// 删除post_id相应的数据
checkinDataList.value = checkinDataList.value.filter(item => item.id !== post.id);
// 检查是否还可以打卡
const current_date = route.query.date;
if (current_date) {
getTaskDetail(dayjs(current_date).format('YYYY-MM'));
} else {
getTaskDetail(dayjs().format('YYYY-MM'));
}
} else {
showErrorToast('删除失败');
}
......@@ -957,6 +945,25 @@ const formatData = (data) => {
</style>
<style scoped>
/* 底部悬浮打卡按钮样式 */
.floating-checkin-button {
position: fixed;
bottom: 6rem;
left: 1rem;
right: 1rem;
z-index: 1000;
padding: 0 1rem;
}
.floating-checkin-button .checkin-action-button {
width: 100%;
height: 3rem;
font-size: 1rem;
font-weight: 600;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
border: none;
}
:deep(.van-calendar__footer) {
display: none;
}
......