diff --git a/docs/demos/2026-10-14-payment-card-period-collapse-demo.html b/docs/demos/2026-10-14-payment-card-period-collapse-demo.html new file mode 100644 index 00000000..23145149 --- /dev/null +++ b/docs/demos/2026-10-14-payment-card-period-collapse-demo.html @@ -0,0 +1,564 @@ + + + + + + 缴费信息 · 列表卡片期数折叠 Demo + + + +
+
+

缴费信息 · 期数折叠

+

列表卡片按期折叠：默认只显示「第几期 / 应缴 / 已缴」，点击展开明细。

+
+ + +
+ 改后（默认折叠） + 推荐 +
+ +
+
+ 1 + + 周雨桐 + S-10021 + + 部分已缴 +
+ +
+
协议号XY20261008012
+
姓名周雨桐
+
手机号138****6621
+
样本编码S-10021
+
签署日期2026-10-01
+
存储年限20
+
存储项目脐带血
+
合同总额¥10,000.00
+
缴费方式分期
+
优惠金额¥1,000.00
+
应收总额¥9,000.00
+
+ +
+ +
+ +
+
+
应缴费时间2026-10-10
+
已缴费时间2026-10-11
+
欠缴费金额¥0.00
+
+
+
+ + +
+ +
+
+
应缴费时间2027-04-10
+
已缴费时间—
+
欠缴费金额¥2,000.00
+
+
+
+ + +
+ +
+
+
应缴费时间2027-10-10
+
已缴费时间—
+
欠缴费金额¥2,000.00
+
+
+
+ + +
+ +
+
+
应缴费时间2028-04-10
+
已缴费时间—
+
欠缴费金额¥2,000.00
+
+
+
+ +
+ +
+
累计实缴¥3,000.00
+
待缴金额¥6,000.00
+
备注首期已缴
+
+ +
+ + +
+
+ + +
+ 展开态示意（第1、2期已展开） + 可点击切换 +
+ +
+
+ 2 + + 李婷 + S-10022 + + 已缴清 +
+ +
+
协议号XY20261008018
+
合同总额¥6,000.00
+
缴费方式分期
+
+ +
+
+ +
+
+
应缴费时间2026-09-01
+
已缴费时间2026-09-02
+
欠缴费金额¥0.00
+
+
+
+
+ +
+
+
应缴费时间2027-03-01
+
已缴费时间2027-03-01
+
欠缴费金额¥0.00
+
+
+
+
+ +
+ + +
+
+ + +
+ 改前（全部平铺） + 卡片过高 +
+

当前实现：固定 6 期 × 5 个字段 = 约 30 行期次字段，列表扫读困难。

+ +
+
+ 3 + + 周雨桐 + S-10021 + + 部分已缴 +
+
+
协议号XY20261008012
+
合同总额¥10,000.00
+
缴费方式分期
+
第1期·应缴费金额（元）¥3,000.00
+
第1期·应缴费时间2026-10-10
+
第1期·已缴费金额¥3,000.00
+
第1期·已缴费时间2026-10-11
+
第1期·欠缴费金额¥0.00
+
第2期·应缴费金额（元）¥2,000.00
+
第2期·应缴费时间2027-04-10
+
第2期·已缴费金额¥0.00
+
第2期·已缴费时间—
+
第2期·欠缴费金额¥2,000.00
+
…第3～6期同样平铺…卡片继续变高
+
累计实缴¥3,000.00
+
待缴金额¥6,000.00
+
+
+ + +
+
+ +
+ 交互说明：只渲染有数据的期次；每期独立一行摘要（第N期 · 应缴 · 已缴），默认折叠；点击展开应缴时间 / 已缴时间 / 欠缴金额；多期可同时展开。 +
+ docs/demos/2026-10-14-payment-card-period-collapse-demo.html +
+
+ + + + diff --git a/docs/superpowers/specs/2026-10-14-payment-card-period-collapse-design.md b/docs/superpowers/specs/2026-10-14-payment-card-period-collapse-design.md new file mode 100644 index 00000000..a51d6a69 --- /dev/null +++ b/docs/superpowers/specs/2026-10-14-payment-card-period-collapse-design.md @@ -0,0 +1,106 @@ +# 缴费信息列表卡片 · 期数折叠 + +**日期：** 2026-10-14 +**状态：** 已确认设计，待写实现计划 +**Demo：** `docs/demos/2026-10-14-payment-card-period-collapse-demo.html` + +## 1. 背景 + +市场专员 / 地区经理在 `mobile-oa-h5`【缴费信息】列表中，单张卡片会把最多 6 期 × 5 个字段全部平铺进 `fields`，卡片过高、扫读困难。 + +运费列表已用 `sampleBlocks` + 默认折叠解决同类问题；缴费期次采用同一模式。 + +## 2. 已确认决策 + +| 项 | 决策 | +|----|------| +| 交互形态 | 按期折叠：折叠行展示「第几期、应缴费金额、已缴费金额」；展开后展示应缴时间 / 已缴时间 / 欠缴费金额 | +| 默认状态 | 全部折叠 | +| 展开规则 | 每期独立展开/收起，可同时展开多期 | +| 空期 | 只渲染有数据的期次，不再固定 pad 到 6 | +| 实现路径 | 方案 1：`periodBlocks` 对齐运费 `sampleBlocks` | +| 范围 | 仅缴费信息列表卡片（`module === 'payment'`） | +| 非范围 | 催缴列表、协议详情缴费区、后端 API、`mobile-h5` WebView 壳、金额语义变更 | + +## 3. 目标 + +1. 列表默认高度显著下降：期次区折叠时每期只占一行摘要。 +2. 需要时点开单期查看时间与欠缴。 +3. 无数据期次不占位。 + +## 4. 数据结构 + +`paymentCard`（`list-presenter.js`）不再将期次 `flatMap` 进 `fields`，改为输出 `periodBlocks`： + +```js +{ + title, subtitle, status, + fields: [ /* 协议号、姓名、合同总额… 不含期次 */ ], + periodBlocks: [ + { + key: 'period-1', // 稳定 key，优先 scheduleNo / id + scheduleNo: 1, // 摘要：第几期 + dueAmount: '¥3,000.00', // 摘要：应缴费金额（money 格式） + paidAmount: '¥3,000.00', // 摘要：已缴费金额（displayPaidAmount ?? paidAmount） + fields: [ + field('应缴费时间', dueDate), + field('已缴费时间', payDate), + field('欠缴费金额', arrearsAmount, { money: true }) + ] + } + ], + actions: ['view-protocol', 'view-payment-detail'] +} +``` + +主体 `fields` 顺序保持现有非期次字段，并在卡片底部（期次区之后）保留： + +- 累计实缴、待缴金额、备注 + +即视觉顺序：头信息 → 主体字段（至应收总额）→ **期次折叠区** → 累计实缴 / 待缴 / 备注 → 操作按钮。与 Demo 一致。 + +### 4.1 有数据期次判定 + +遍历 `item.periods`（数组），保留满足任一条件的项： + +- `dueAmount` / `displayPaidAmount` / `paidAmount` / `arrearsAmount` 有可展示数值（含 0） +- 或 `dueDate` / `payDate` 非空 +- 或存在有效 `scheduleNo` + +空对象 `{}`、全空字符串的占位项丢弃。不再 `Array.from({ length: 6 }, …)`。 + +期次标题：`第${scheduleNo || index + 1}期`。 + +## 5. UI（MarketListCard） + +- 当 `card.periodBlocks?.length` 时渲染期次区（样式类建议 `market-list-card__periods`）。 +- 每期一行可点击摘要（`min-height ≥ 44px`），布局约：`第N期 | 应缴 | 已缴 | chevron`。 +- 默认 `openKeys` 为空 Set / 全部 false；点击 toggling 单期；卡片 `item.id` / `index` 变化时重置为全部折叠。 +- 展开区复用现有 `market-list-card__fields` 紧凑网格展示 `block.fields`。 +- 金额摘要用现有 money 色（`--market-money` / 与卡片一致）。 + +视觉权威：`docs/demos/2026-10-14-payment-card-period-collapse-demo.html`。 + +## 6. 改动文件 + +| 文件 | 职责 | +|------|------| +| `mobile-oa-h5/src/market/list-presenter.js` | `paymentCard` 产出 `periodBlocks`；去掉期次平铺 fields | +| `mobile-oa-h5/src/market/components/MarketListCard.vue` | 渲染期次折叠行与展开明细 | +| `mobile-oa-h5/src/styles/market.css` | 期次折叠样式 | +| `mobile-oa-h5/src/market/list-presenter.test.js` | presenter：有/无空期、摘要字段、不再出现 `第N期·应缴费金额` 平铺 | +| `mobile-oa-h5/src/market/mobile-parity-ui.test.js` | 组件/样式存在折叠结构与默认折叠 | + +## 7. 测试要点 + +1. 仅 1 条有效期次 → `periodBlocks.length === 1`，无第 2～6 期。 +2. 摘要含 scheduleNo / dueAmount / paidAmount；展开 fields 含三时间/欠缴字段。 +3. `fields` 中不再含 `第1期·应缴费金额（元）` 这类平铺 label。 +4. `MarketListCard` 模板含 `periodBlocks`、默认折叠、可切换 `aria-expanded`。 +5. 触控行 `min-height: 44px`。 + +## 8. 非目标 + +- 不做「全部展开 / 全部收起」总开关。 +- 不改缴费进度、金额计算、后端列表契约。 +- 不改催缴（`payment-chase`）卡片。