166 lines
3.1 KiB
Vue
166 lines
3.1 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) => {
|
|
console.log('点击待办:', todo);
|
|
uni.showToast({
|
|
title: '查看待办详情',
|
|
icon: 'none'
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.todo-scroll {
|
|
height: calc(100vh - var(--status-bar-height, 0) - 100px);
|
|
padding: 16px;
|
|
padding-bottom: 100px;
|
|
}
|
|
|
|
.todo-container {
|
|
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);
|
|
}
|
|
|
|
.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>
|
|
|