|
|
@@ -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` 测试通过
|
