186 lines
3.9 KiB
Vue
186 lines
3.9 KiB
Vue
<template>
|
|
<scroll-view class="todo-scroll" scroll-y>
|
|
<view class="todo-container">
|
|
<view class="todo-item" v-for="todo in todoList" :key="todo.id" @click="handleTodoClick(todo)">
|
|
<view class="todo-checkbox" @click.stop="toggleTodo(todo)">
|
|
<text class="check-icon" v-if="todo.completed">✓</text>
|
|
</view>
|
|
<view class="todo-content" :class="{ completed: todo.completed }">
|
|
<text class="todo-title">{{ todo.title }}</text>
|
|
<text class="todo-desc" v-if="todo.description">{{ todo.description }}</text>
|
|
<text class="todo-time">{{ todo.time }}</text>
|
|
</view>
|
|
<view class="todo-priority" :class="`priority-${todo.priority}`">
|
|
{{ priorityText[todo.priority] }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
|
|
const priorityText = {
|
|
high: '高',
|
|
medium: '中',
|
|
low: '低'
|
|
};
|
|
|
|
const todoList = ref([
|
|
{
|
|
id: 1,
|
|
title: '完成项目需求文档',
|
|
description: '需要整理所有功能点并编写详细文档',
|
|
time: '2025-10-15 14:00',
|
|
completed: false,
|
|
priority: 'high'
|
|
},
|
|
{
|
|
id: 2,
|
|
title: '参加团队会议',
|
|
description: '讨论本周工作进度和下周计划',
|
|
time: '2025-10-16 10:00',
|
|
completed: false,
|
|
priority: 'medium'
|
|
},
|
|
{
|
|
id: 3,
|
|
title: '代码审查',
|
|
description: '审查同事提交的代码',
|
|
time: '2025-10-17 16:00',
|
|
completed: true,
|
|
priority: 'low'
|
|
}
|
|
]);
|
|
|
|
const toggleTodo = (todo) => {
|
|
todo.completed = !todo.completed;
|
|
};
|
|
|
|
const handleTodoClick = (todo) => {
|
|
// 将待办数据存储到本地，供详情页使用
|
|
uni.setStorageSync('taskDetailData', {
|
|
id: todo.id,
|
|
name: todo.title || '待办任务名称',
|
|
project: '待办事项',
|
|
statusTags: todo.priority === 'high' ? ['紧急'] : todo.priority === 'medium' ? ['重要'] : ['普通'],
|
|
deadline: todo.time || '2025-10-14 18:00',
|
|
creator: '系统',
|
|
responsible: '当前用户',
|
|
publishTime: todo.time || '2025-10-17',
|
|
content: todo.description || '任务内容任务。这里是详细的任务描述，可以包含多行文本。根据实际需求，这里可以展示任务的详细要求、步骤说明、注意事项等。任务内容应该清晰明了，便于负责人理解和执行。',
|
|
submitRecords: []
|
|
});
|
|
|
|
uni.navigateTo({
|
|
url: `/pages/task/detail/index?id=${todo.id}`
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.todo-scroll {
|
|
margin-top: var(--status-bar-height, 0);
|
|
height: calc(100vh - var(--status-bar-height, 0) - 100px);
|
|
|
|
padding-bottom: 100px;
|
|
}
|
|
|
|
.todo-container {
|
|
padding: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.todo-item {
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
|
transition: opacity 0.2s, transform 0.1s;
|
|
}
|
|
|
|
.todo-item:active {
|
|
opacity: 0.8;
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.todo-checkbox {
|
|
width: 24px;
|
|
height: 24px;
|
|
border: 2px solid #ddd;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.todo-checkbox .check-icon {
|
|
color: #2885ff;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.todo-content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.todo-content.completed {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.todo-title {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #333;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.todo-content.completed .todo-title {
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.todo-desc {
|
|
font-size: 12px;
|
|
color: #666;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.todo-time {
|
|
font-size: 12px;
|
|
color: #999;
|
|
}
|
|
|
|
.todo-priority {
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.priority-high {
|
|
background: #ffebee;
|
|
color: #f44336;
|
|
}
|
|
|
|
.priority-medium {
|
|
background: #fff3e0;
|
|
color: #ff9800;
|
|
}
|
|
|
|
.priority-low {
|
|
background: #e8f5e9;
|
|
color: #4caf50;
|
|
}
|
|
</style>
|
|
|