feat: batch update - gift card breakdown spec, backend APIs, miniprogram pages, ETL finance recharge, docs & migrations
This commit is contained in:
220
apps/DEMO-miniprogram/miniprogram/pages/notes/DELETE_FEATURE.md
Normal file
220
apps/DEMO-miniprogram/miniprogram/pages/notes/DELETE_FEATURE.md
Normal file
@@ -0,0 +1,220 @@
|
||||
# Notes 页面删除功能实现说明
|
||||
|
||||
## 更新日期
|
||||
2026-03-14
|
||||
|
||||
## 功能描述
|
||||
为每条备注添加删除按钮，放置在日期左侧，交互和逻辑参考任务详情页的备注删除处理方式。
|
||||
|
||||
---
|
||||
|
||||
## 实现细节
|
||||
|
||||
### 1. WXML 结构调整
|
||||
|
||||
#### 原结构
|
||||
```xml
|
||||
<view class="note-bottom">
|
||||
<text class="note-tag">{{item.tagLabel}}</text>
|
||||
<text class="note-time">{{item.createdAt}}</text>
|
||||
</view>
|
||||
```
|
||||
|
||||
#### 新结构
|
||||
```xml
|
||||
<view class="note-bottom">
|
||||
<view class="note-bottom-left">
|
||||
<view class="note-delete-btn" catchtap="onDeleteNote" data-id="{{item.id}}" hover-class="note-delete-btn--hover">
|
||||
<t-icon name="delete" size="20px" color="#a6a6a6" />
|
||||
</view>
|
||||
<text class="note-time">{{item.createdAt}}</text>
|
||||
</view>
|
||||
<text class="note-tag">{{item.tagLabel}}</text>
|
||||
</view>
|
||||
```
|
||||
|
||||
**关键点**：
|
||||
- 使用 `catchtap` 而非 `bindtap`，阻止事件冒泡
|
||||
- 删除按钮放在左侧，日期紧随其后
|
||||
- 标签移到右侧
|
||||
- 通过 `data-id` 传递备注ID
|
||||
|
||||
### 2. WXSS 样式添加
|
||||
|
||||
```wxss
|
||||
/* 底部容器布局调整 */
|
||||
.note-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* 左侧容器（删除按钮 + 日期）*/
|
||||
.note-bottom-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* 删除按钮样式 */
|
||||
.note-delete-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.note-delete-btn--hover {
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
```
|
||||
|
||||
**样式说明**：
|
||||
- 删除按钮尺寸：32px × 32px（符合最小点击区域44px的80%）
|
||||
- Icon尺寸：20px（与H5原型对齐）
|
||||
- Icon颜色：#a6a6a6（gray-6，次级文字颜色）
|
||||
- Hover效果：浅灰背景（#f3f3f3）
|
||||
- 按钮与日期间距：8px
|
||||
|
||||
### 3. TypeScript 逻辑实现
|
||||
|
||||
```typescript
|
||||
/** 删除备注 */
|
||||
onDeleteNote(e: WechatMiniprogram.BaseEvent) {
|
||||
const noteId = e.currentTarget.dataset.id as string
|
||||
wx.showModal({
|
||||
title: '删除备注',
|
||||
content: '确定要删除这条备注吗？删除后无法恢复。',
|
||||
confirmColor: '#e34d59',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
const notes = this.data.notes.filter((n) => n.id !== noteId)
|
||||
this.setData({ notes })
|
||||
wx.showToast({ title: '已删除', icon: 'success' })
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
**逻辑说明**：
|
||||
- 从 `dataset` 中获取备注ID
|
||||
- 使用 `wx.showModal` 显示确认弹窗
|
||||
- 确认按钮颜色：#e34d59（error色，警示作用）
|
||||
- 确认后过滤掉对应备注
|
||||
- 显示成功提示
|
||||
|
||||
---
|
||||
|
||||
## 参考实现
|
||||
|
||||
### 任务详情页删除逻辑
|
||||
位置：`apps/miniprogram/miniprogram/pages/task-detail/task-detail.ts`
|
||||
|
||||
```typescript
|
||||
/** 删除备注 */
|
||||
onDeleteNote(e: WechatMiniprogram.BaseEvent) {
|
||||
const noteId = e.currentTarget.dataset.id as string
|
||||
wx.showModal({
|
||||
title: '删除备注',
|
||||
content: '确定要删除这条备注吗？删除后无法恢复。',
|
||||
confirmColor: '#e34d59',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
const notes = this.data.sortedNotes.filter((n) => n.id !== noteId)
|
||||
this.setData({ sortedNotes: notes })
|
||||
wx.showToast({ title: '已删除', icon: 'success' })
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
**差异点**：
|
||||
- 任务详情页使用 `sortedNotes`，notes页使用 `notes`
|
||||
- 其他逻辑完全一致
|
||||
|
||||
---
|
||||
|
||||
## 交互流程
|
||||
|
||||
1. 用户点击删除按钮
|
||||
2. 显示确认弹窗："确定要删除这条备注吗？删除后无法恢复。"
|
||||
3. 用户选择：
|
||||
- **确认**：删除备注，显示"已删除"提示
|
||||
- **取消**：关闭弹窗，不做任何操作
|
||||
|
||||
---
|
||||
|
||||
## 视觉效果
|
||||
|
||||
### 布局
|
||||
```
|
||||
┌─────────────────────────────────────────┐
|
||||
│ 备注内容文本... │
|
||||
│ │
|
||||
│ [🗑️] 2024-11-27 16:00 [客户：王先生] │
|
||||
└─────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 尺寸对比
|
||||
| 元素 | 尺寸 | 说明 |
|
||||
|------|------|------|
|
||||
| 删除按钮容器 | 32px × 32px | 圆形点击区域 |
|
||||
| 删除icon | 20px | TDesign delete图标 |
|
||||
| 按钮与日期间距 | 8px | gap |
|
||||
| 日期字号 | 12px | text-xs |
|
||||
| 标签字号 | 12px | text-xs |
|
||||
|
||||
---
|
||||
|
||||
## 颜色规范
|
||||
|
||||
| 元素 | 颜色 | 色值 | 说明 |
|
||||
|------|------|------|------|
|
||||
| 删除icon | gray-6 | #a6a6a6 | 次级文字颜色 |
|
||||
| Hover背景 | gray-1 | #f3f3f3 | 浅灰背景 |
|
||||
| 确认按钮 | error | #e34d59 | 警示色 |
|
||||
|
||||
---
|
||||
|
||||
## 测试清单
|
||||
|
||||
- [x] 删除按钮显示正确
|
||||
- [x] 删除按钮位置正确（日期左侧）
|
||||
- [x] 点击删除按钮显示确认弹窗
|
||||
- [x] 确认删除后备注消失
|
||||
- [x] 取消删除后备注保留
|
||||
- [x] 删除成功显示提示
|
||||
- [x] Hover效果正常
|
||||
- [x] 事件不冒泡（使用catchtap）
|
||||
- [x] 代码无linting错误
|
||||
|
||||
---
|
||||
|
||||
## 文件变更清单
|
||||
|
||||
1. **notes.wxml** - 添加删除按钮结构
|
||||
2. **notes.wxss** - 添加删除按钮样式
|
||||
3. **notes.ts** - 添加删除逻辑
|
||||
4. **DELETE_FEATURE.md** - 本文档
|
||||
|
||||
---
|
||||
|
||||
## 后续优化建议
|
||||
|
||||
1. **API集成**：当前为前端删除，需要对接后端API实现真实删除
|
||||
2. **撤销功能**：考虑添加"撤销删除"功能（3秒内可撤销）
|
||||
3. **批量删除**：如果需要，可以添加批量删除功能
|
||||
4. **权限控制**：根据用户角色控制删除权限
|
||||
|
||||
---
|
||||
|
||||
## 参考文档
|
||||
|
||||
- 桥文档：`docs/miniprogram-dev/h5-to-mp-bridge-v3.md`
|
||||
- 任务详情页：`apps/miniprogram/miniprogram/pages/task-detail/task-detail.ts`
|
||||
- TDesign图标：https://tdesign.tencent.com/miniprogram/components/icon
|
||||
Reference in New Issue
Block a user