高效备忘清单工具类小程序
Index.html
<view class="container">
<!-- 头部进度概览 -->
<view class="tracker-card">
<view class="tracker-header">
<view>
<text class="hero-title">高效备忘清单</text>
<text class="hero-subtitle">整理一天的心情和任务</text>
</view>
<text class="score-card">{{completedCount}}/{{tasksList.length}}</text>
</view>
<view class="progress-bar">
<progress percent="{{taskProgress}}" stroke-width="6" activeColor="#FFF" backgroundColor="rgba(255,255,255,0.25)" />
</view>
</view>
<!-- 选项卡分类 -->
<view class="tabs-bar">
<view class="tab {{activeTab === 'all' ? 'active' : ''}}" bindtap="switchTab" data-tab="all">
全部 ({{tasksList.length}})
</view>
<view class="tab {{activeTab === 'active' ? 'active' : ''}}" bindtap="switchTab" data-tab="active">
进行中
</view>
<view class="tab {{activeTab === 'completed' ? 'active' : ''}}" bindtap="switchTab" data-tab="completed">
已完成
</view>
</view>
<!-- 输入条 -->
<view class="card add-card">
<view class="add-row">
<input class="add-input" value="{{newTaskText}}" bindinput="onNewTaskInput" placeholder="在此输入需要执行的事情..." />
<button class="btn-add" bindtap="createTask">添加</button>
</view>
<view class="priority-row">
<text class="label">优先级：</text>
<picker bindchange="onPriorityChange" value="{{priorityIndex}}" range="{{priorityRange}}" mode="selector">
<view class="picker-val">标记为: {{priorityRange[priorityIndex]}} ▾</view>
</picker>
</view>
</view>
<!-- 任务列表 -->
<view class="card tasks-list-card">
<view class="empty-state" wx:if="{{filteredTasks.length === 0}}">
<text class="empty-icon">📝</text>
<text class="empty-text">今天也是轻松的一天，快添加一项任务吧！</text>
</view>
<!-- 任务展示 -->
<view class="tasks-list" wx:if="{{filteredTasks.length > 0}}">
<view class="task-row {{item.completed ? 'task-done' : ''}}" wx:for="{{filteredTasks}}" wx:key="id">
<!-- 仿Checkbox打勾状态 -->
<view class="checkbox {{item.completed ? 'checked' : ''}}" bindtap="toggleTask" data-id="{{item.id}}">
<text class="check-tick" wx:if="{{item.completed}}">✓</text>
</view>
<!-- 任务详情 -->
<view class="task-content">
<text class="task-title">{{item.text}}</text>
<text class="task-badge badge-{{item.priority}}">{{item.priority === 'urgent' ? '极其重要' : '普通日常'}}</text>
</view>
<!-- 删除 -->
<text class="btn-delete" bindtap="removeTask" data-id="{{item.id}}">删除</text>
</view>
</view>
</view>
</view>
index.wxss
page {
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.js
Page({
data: {
tasksList: [],
newTaskText: "",
priorityRange: ["常规备忘", "突发重要"],
priorityValues: ["normal", "urgent"],
priorityIndex: 0,
activeTab: "all",
completedCount: 0,
taskProgress: 0,
filteredTasks: []
},
onLoad: function() {
console.log("微信高效清算工具初始化");
// Mock sample items
const 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
});
}
})