高效备忘清单工具类小程序

Index.htmlview classcontainer!-- 头部进度概览 --view classtracker-cardview classtracker-headerviewtext classhero-title高效备忘清单/texttext classhero-subtitle整理一天的心情和任务/text/viewtext classscore-card{{completedCount}}/{{tasksList.length}}/text/viewview classprogress-barprogress percent{{taskProgress}} stroke-width6 activeColor#FFF backgroundColorrgba(255,255,255,0.25) //view/view!-- 选项卡分类 --view classtabs-barview classtab {{activeTab all ? active : }} bindtapswitchTab data-taball全部 ({{tasksList.length}})/viewview classtab {{activeTab active ? active : }} bindtapswitchTab data-tabactive进行中/viewview classtab {{activeTab completed ? active : }} bindtapswitchTab data-tabcompleted已完成/view/view!-- 输入条 --view classcard add-cardview classadd-rowinput classadd-input value{{newTaskText}} bindinputonNewTaskInput placeholder在此输入需要执行的事情... /button classbtn-add bindtapcreateTask添加/button/viewview classpriority-rowtext classlabel优先级/textpicker bindchangeonPriorityChange value{{priorityIndex}} range{{priorityRange}} modeselectorview classpicker-val标记为: {{priorityRange[priorityIndex]}} ▾/view/picker/view/view!-- 任务列表 --view classcard tasks-list-cardview classempty-state wx:if{{filteredTasks.length 0}}text classempty-icon/texttext classempty-text今天也是轻松的一天快添加一项任务吧/text/view!-- 任务展示 --view classtasks-list wx:if{{filteredTasks.length 0}}view classtask-row {{item.completed ? task-done : }} wx:for{{filteredTasks}} wx:keyid!-- 仿Checkbox打勾状态 --view classcheckbox {{item.completed ? checked : }} bindtaptoggleTask data-id{{item.id}}text classcheck-tick wx:if{{item.completed}}✓/text/view!-- 任务详情 --view classtask-contenttext classtask-title{{item.text}}/texttext classtask-badge badge-{{item.priority}}{{item.priority urgent ? 极其重要 : 普通日常}}/text/view!-- 删除 --text classbtn-delete bindtapremoveTask data-id{{item.id}}删除/text/view/view/view/viewindex.wxsspage {background-color: #f4f5f7;}.container {padding: 20rpx;}.tracker-card {background: linear-gradient(135deg, #007aff, #0050b3);color: white;border-radius: 20rpx;padding: 30rpx;margin-bottom: 20rpx;}.tracker-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20rpx;}.hero-title {font-size: 32rpx;font-weight: bold;}.hero-subtitle {font-size: 22rpx;opacity: 0.8;margin-top: 5rpx;}.score-card {background-color: rgba(255, 255, 255, 0.2);padding: 8rpx 20rpx;border-radius: 40rpx;font-size: 26rpx;font-weight: bold;}.progress-bar {margin-top: 10rpx;}.tabs-bar {display: flex;background: #fff;border-radius: 12rpx;margin-bottom: 20rpx;width: 100%;}.tab {flex: 1;text-align: center;font-size: 24rpx;color: #666;line-height: 70rpx;}.tab.active {background-color: #007aff;color: #fff;}.card {background: #fff;border-radius: 16rpx;padding: 20rpx;margin-bottom: 16rpx;}.add-card {display: flex;flex-direction: column;}.add-row {display: flex;gap: 12rpx;margin-bottom: 16rpx;}.add-input {flex: 1;border: 1rpx solid #e1e4eb;border-radius: 8rpx;padding: 14rpx 16rpx;font-size: 26rpx;background: #f8fafc;}.btn-add {background: #007aff;color: #fff;font-size: 26rpx;padding: 0 28rpx;border-radius: 8rpx;height: 72rpx;display: flex;align-items: center;}.priority-row {display: flex;align-items: center;}.label {font-size: 24rpx;color: #666;width: 100rpx;}.picker-val {font-size: 24rpx;color: #007aff;}.empty-state {text-align: center;padding: 60rpx 20rpx;}.empty-icon {font-size: 60rpx;margin-bottom: 20rpx;}.empty-text {font-size: 24rpx;color: #999;}.task-row {display: flex;align-items: center;padding-bottom: 20rpx;border-bottom: 1rpx solid #f0f0f0;margin-bottom: 20rpx;}.task-row:last-child {border-bottom: none;margin-bottom: 0;}.checkbox {width: 40rpx;height: 40rpx;border: 3rpx solid #ddd;border-radius: 50%;display: flex;justify-content: center;align-items: center;margin-right: 20rpx;}.checkbox.checked {background: #007aff;border-color: #007aff;}.check-tick {color: #fff;font-size: 22rpx;font-weight: bold;}.task-content {flex: 1;}.task-title {font-size: 28rpx;color: #333;font-weight: 500;}.task-done .task-title {text-decoration: line-through;color: #999;}.task-badge {font-size: 18rpx;font-weight: bold;padding: 4rpx 12rpx;border-radius: 6rpx;margin-top: 8rpx;}.badge-urgent {background: #ffeef0;color: #ff3b30;}.badge-normal {background: #f0f4ff;color: #007aff;}.btn-delete {font-size: 24rpx;color: #ff4d4f;background: #fff1f0;padding: 6rpx 16rpx;border-radius: 8rpx;}index.jsPage({data: {tasksList: [],newTaskText: ,priorityRange: [常规备忘, 突发重要],priorityValues: [normal, urgent],priorityIndex: 0,activeTab: all,completedCount: 0,taskProgress: 0,filteredTasks: []},onLoad: function() {console.log(微信高效清算工具初始化);// Mock sample itemsconst defaultTasks [{ id: 1001, text: 制定本周的微信小程序开发计划 , priority: urgent, completed: false },{ id: 1002, text: 买蔬菜水果多补充水分糖分 , priority: normal, completed: true },{ id: 1003, text: 参加下午2点的设计评审会 ☕, priority: normal, completed: false }];this.setData({tasksList: defaultTasks});this.refreshComputed();},onNewTaskInput: function(e) {this.setData({newTaskText: e.detail.value});},onPriorityChange: function(e) {this.setData({priorityIndex: parseInt(e.detail.value)});},switchTab: function(e) {const tabSelected e.currentTarget.dataset.tab;this.setData({activeTab: tabSelected});this.refreshComputed();},createTask: function() {const text this.data.newTaskText.trim();if (!text) {wx.showToast({title: 请填写任务内容,icon: warn});return;}const priorityKey this.data.priorityValues[this.data.priorityIndex];const newId String(Date.now());const newTask {id: newId,text: text,priority: priorityKey,completed: false};const currentList this.data.tasksList;currentList.push(newTask);this.setData({tasksList: currentList,newTaskText: ,priorityIndex: 0});this.refreshComputed();wx.showToast({title: 任务已新增,icon: success});},toggleTask: function(e) {const id e.currentTarget.dataset.id;const currentList this.data.tasksList;for (let i 0; i currentList.length; i) {if (currentList[i].id id) {currentList[i].completed !currentList[i].completed;const msg currentList[i].completed ? 打卡标志成功 ✓ : 标记为待办;wx.showToast({title: msg,icon: success});break;}}this.setData({tasksList: currentList});this.refreshComputed();},removeTask: function(e) {const id e.currentTarget.dataset.id;const that this;wx.showModal({title: 确认删除,content: 该提醒将从您的日程库中永久移除,showCancel: true,success: function(res) {if (!res.cancel) {const currentList that.data.tasksList.filter(t t.id ! id);that.setData({tasksList: currentList});that.refreshComputed();wx.showToast({title: 已安全删除,icon: success});}}});},refreshComputed: function() {const list this.data.tasksList;const doneCount list.filter(t t.completed).length;const progress list.length 0 ? Math.round((doneCount / list.length) * 100) : 0;let filtered [];if (this.data.activeTab all) {filtered list;} else if (this.data.activeTab active) {filtered list.filter(t !t.completed);} else {filtered list.filter(t t.completed);}this.setData({completedCount: doneCount,taskProgress: progress,filteredTasks: filtered});}})