docs: design JD-style status filter for mobile presign list
Remove the redundant reset button and adopt a left-aligned lightweight dropdown under the search bar. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
zlwuandCursor committed
1 parent
f5c514c520
commit
1c53bcd226
1 file changed
+89
@@ -0,0 +1,89 @@
|
||||
# 预签约订单列表：京东式状态筛选 — 设计说明
|
||||
|
||||
**日期：** 2026-10-14
|
||||
**状态：** 已确认（方案 B）
|
||||
**范围：** `mobile-oa-h5` 预签约订单列表页；`mobile-h5` 经 webview 打开同一页，无需单独改 UI
|
||||
|
||||
## 1. 背景与目标
|
||||
|
||||
市场专员 / 地区经理的【预签约订单】列表顶部为：
|
||||
|
||||
1. 圆角搜索框（母亲姓名 / 协议编号）
|
||||
2. 其下筛选行：`van-dropdown-menu`「全部状态」+ 「重置」按钮并排
|
||||
|
||||
「重置」与把状态改回「全部状态」功能重叠，视觉上也像两个控件，不符合常见电商 App（如京东）「搜索框下一条轻量下拉条」的习惯。
|
||||
|
||||
**目标：**
|
||||
|
||||
- 去掉「重置」按钮
|
||||
- 将状态筛选改为京东式左侧轻量下拉条（文字 + 小三角，点开浮层选状态）
|
||||
- 筛选语义与接口参数不变
|
||||
|
||||
## 2. 决策摘要
|
||||
|
||||
| 项 | 决策 |
|
||||
|----|------|
|
||||
| 视觉方案 | **B**：搜索框下方左侧轻量下拉条（非通栏居中） |
|
||||
| 重置按钮 | **删除**；选「全部状态」即清空状态筛选 |
|
||||
| 组件 | 继续使用 Vant `van-dropdown-menu` / `van-dropdown-item`，主要改布局样式 |
|
||||
| 状态选项 | 不变：全部状态 / 草稿 / 进行中 / 已转正式 / 已作废 |
|
||||
| 选中反馈 | 非「全部状态」时标题文案变为对应状态，可用品牌绿 `#0a9f6d` 高亮（Vant `active-color`） |
|
||||
| 关键词 | 搜索框仍负责 keyword；清空搜索走 search 自带 clear，不设整页重置 |
|
||||
| 范围 | 仅预签约专用列表；其他市场模块 `MarketModuleList` + `MarketFilterSheet` 不动 |
|
||||
| 后端 | 无变更 |
|
||||
|
||||
## 3. 界面结构
|
||||
|
||||
```
|
||||
┌─────────────────────────────┐
|
||||
│ 预签约订单 │
|
||||
├─────────────────────────────┤
|
||||
│ ⌕ 搜索母亲姓名 / 协议编号 │
|
||||
│ 全部状态 ▾ │ ← 轻量下拉条（左对齐）
|
||||
├─────────────────────────────┤
|
||||
│ 列表卡片… │
|
||||
└─────────────────────────────┘
|
||||
```
|
||||
|
||||
点「全部状态 ▾」展开选项浮层；选中后收起并触发列表 `reload`。
|
||||
|
||||
## 4. 实现要点
|
||||
|
||||
### 4.1 `PresignOrderList.vue`
|
||||
|
||||
- 删除筛选行中的「重置」`van-button`
|
||||
- 删除仅服务该按钮的 `resetFilters`（清空 keyword + orderStatus 并 reload）
|
||||
- 保留 `orderStatus` / `orderStatusOptions` / `@change="reload"`
|
||||
- 筛选容器可保留或简化为单一下拉包装（类名可继续用 `__filter-row`，语义改为单列筛选条）
|
||||
|
||||
### 4.2 `market.css`
|
||||
|
||||
调整 `.presign-order-page__filter-row`：
|
||||
|
||||
- 去掉 `grid-template-columns: minmax(0, 1fr) auto` 与按钮相关规则
|
||||
- 下拉菜单贴左、高度约 40–44px，去掉「带边框的整块按钮」观感
|
||||
- 覆盖 Vant dropdown title 样式：字号约 13–14px、左对齐、小三角；背景透明、无额外描边盒
|
||||
- 品牌色沿用 `--presign-primary: #0a9f6d`
|
||||
|
||||
### 4.3 测试
|
||||
|
||||
`mobile-oa-h5/src/market/mobile-parity-ui.test.js` 中用例
|
||||
`dedicated presign list wires orderStatus filtering and reset on mobile`：
|
||||
|
||||
- 去掉对 `resetFilters` 的断言
|
||||
- 保留 `orderStatus` / `orderStatusOptions` / `buildPresignListParams` 断言
|
||||
- 可增加：源码中不出现「重置」按钮文案（或不再匹配 `resetFilters`）
|
||||
|
||||
## 5. 非目标
|
||||
|
||||
- 不改搜索占位符、列表卡片、FAB、分页逻辑
|
||||
- 不改后端列表 API 与状态枚举
|
||||
- 不把该样式推广到协议/运费等其他市场列表（除非另开需求）
|
||||
- 不新增独立「清空全部条件」入口
|
||||
|
||||
## 6. 验收
|
||||
|
||||
1. 预签约列表搜索框下仅有状态轻量下拉，无「重置」按钮
|
||||
2. 可按状态筛选并刷新列表；选「全部状态」后恢复全部
|
||||
3. 视觉接近 demo 方案 B（左对齐文字 + 三角）
|
||||
4. 相关 `mobile-parity-ui` 测试通过
|
||||
Reference in new issue
Block a user