diff --git a/docs/demos/2026-10-14-payment-detail-transfer-display-demo.html b/docs/demos/2026-10-14-payment-detail-transfer-display-demo.html new file mode 100644 index 00000000..72e34e9c --- /dev/null +++ b/docs/demos/2026-10-14-payment-detail-transfer-display-demo.html @@ -0,0 +1,577 @@ + + + + + + 缴费明细 · 应缴批次转账展示 Demo + + + +
+
+

缴费明细 · 转账记录展示

+

应缴批次内的转账记录：对比改前样式与两种改后方案，确认后再改代码。

+
+ + +
+ 改前（当前） + 层级不清 +
+
+
缴费明细 关闭
+
+
+

应缴批次

+
+ 第 1 期 + 已缴清 +
应缴金额¥3,000.00
+
应缴日2026-10-10
+
已缴金额¥3,000.00
+
欠缴金额¥0.00
+
+
+ 转账笔 1 + 付款完成 +
转账方式微信转账
+
转账金额¥2,000.00
+
转账时间2026-10-11 09:20
+
转账凭证凭证.jpg
+
备注首期部分
+
财务备注已核对
+
+
+ 转账笔 2 + 已付款 +
转账方式银行卡转账
+
转账金额¥1,000.00
+
转账时间2026-10-12 14:08
+
转账凭证—
+
备注—
+
财务备注—
+
+
+
+

问题：期次与转账同为浅绿底嵌套卡片，「转账笔 N」信息弱，字段全是左右两列堆叠，扫读吃力。

+
+
+
+ + +
+ 方案 A · 白底转账卡（金额突出） + 推荐 +
+
+
缴费明细 关闭
+
+
+

应缴批次

+ +
+
+ 第 1 期 + 已缴清 +
+
+
应缴金额¥3,000.00
+
应缴日2026-10-10
+
已缴金额¥3,000.00
+
欠缴金额¥0.00
+
+
+
转账记录（2）
+ +
+
+ 1 +
+
¥2,000.00
+
微信转账 · 2026-10-11 09:20
+
+ 付款完成 +
+
+
备注首期部分
+
财务备注已核对
+
+
+ 转账凭证 +
凭证.jpg
+
+
+ +
+
+ 2 +
+
¥1,000.00
+
银行卡转账 · 2026-10-12 14:08
+
+ 已付款 +
+
+
备注—
+
财务备注—
+
+
+
+
+ +
+
+ 第 2 期 + 待缴清 +
+
+
应缴金额¥2,000.00
+
应缴日2027-04-10
+
已缴金额¥0.00
+
欠缴金额¥2,000.00
+
+
+
转账记录（0）
+
暂无转账记录
+
+
+
+
+
+ + +
+ 方案 B · 时间线 + 默认折叠明细 + 备选 +
+
+
缴费明细 关闭
+
+
+

应缴批次

+
+
+ 第 1 期 + 已缴清 +
+
+
应缴金额¥3,000.00
+
应缴日2026-10-10
+
已缴金额¥3,000.00
+
欠缴金额¥0.00
+
+
+
转账记录（2）· 点击可展开备注/凭证
+ +
+
+
+
+
¥2,000.00
+ 付款完成 +
+
微信转账 · 2026-10-11 09:20
+ +
+
+
备注首期部分
+
财务备注已核对
+
转账凭证凭证.jpg
+
+
+
+
+ +
+
+
+
+
¥1,000.00
+ 已付款 +
+
银行卡转账 · 2026-10-12 14:08
+ +
+
+
备注—
+
财务备注—
+
+
+
+
+
+
+
+
+
+ +
+ 怎么选： + 方案 A 信息一次看全、金额最醒目，改动也最贴近现有详情组件结构； + 方案 B 默认更短，适合转账笔数多时扫读，但多一步展开。 +

+ 请回复选 A 或 B（也可说要微调），确认后再改 `mobile-oa-h5` 代码。 + docs/demos/2026-10-14-payment-detail-transfer-display-demo.html +
+
+ + + + diff --git a/docs/superpowers/specs/2026-10-14-payment-detail-transfer-display-design.md b/docs/superpowers/specs/2026-10-14-payment-detail-transfer-display-design.md new file mode 100644 index 00000000..6c15bdd4 --- /dev/null +++ b/docs/superpowers/specs/2026-10-14-payment-detail-transfer-display-design.md @@ -0,0 +1,77 @@ +# 缴费明细 · 应缴批次转账展示（方案 A） + +**日期：** 2026-10-14 +**状态：** 方案 A 已确认（Demo），待实现 +**Demo：** `docs/demos/2026-10-14-payment-detail-transfer-display-demo.html` + +## 1. 背景 + +市场【缴费信息】→【缴费明细】中，「应缴批次」把期次与转账都渲染成同一套浅绿 `nested-card`，标题为「转账笔 N」，字段全是左右堆叠，层级与金额扫读都不清晰。 + +## 2. 已确认决策 + +| 项 | 决策 | +|----|------| +| 视觉方案 | **方案 A**：期次浅绿头 + 两列指标；转账为白底独立卡，金额突出 | +| 备选 | 方案 B（时间线折叠）不采用 | +| 范围 | `mobile-oa-h5` 缴费明细「应缴批次」；通过卡片 `variant` 落地，协议详情中同类转账子卡可一并受益 | +| 非范围 | 不改后端字段；不改登记/编辑转账表单；不做方案 B 折叠 | + +## 3. 目标视觉 + +### 3.1 期次卡（schedule） + +- 顶栏：`第 N 期` + 状态 Tag（已缴清 / 待缴清等） +- 指标区两列：应缴金额、应缴日、已缴金额、欠缴金额（金额用 money 色） +- 下方「转账记录（n）」分区 + +### 3.2 转账卡（transfer） + +- 白底、描边、圆角，与期次浅绿底形成层级差 +- 头行：序号角标 · **转账金额（大字）** · 状态 Tag +- 副文案一行：`转账方式 · 转账时间` +- 备注 / 财务备注两列 +- 有凭证时单独一块展示（复用现有附件只读组件） + +## 4. 实现要点 + +### 4.1 数据（`modules/payment.js`） + +`transferCard` 增加展示元数据，例如： + +```js +{ + key, title, // title 可保留但 UI 优先用金额 + variant: 'transfer', + statusText, statusTone, + amount: money(transfer.transferAmount), + meta: `${方式} · ${时间}`, + fields: [ + { label: '备注', ... }, + { label: '财务备注', ... }, + { label: '转账凭证', type: 'attachments', ... } // 有则展示 + ] +} +``` + +`scheduleCard` 增加 `variant: 'schedule'`（可选，便于样式区分）。 + +### 4.2 UI（`MarketDetailNestedCard.vue` + `market.css`） + +- 按 `card.variant === 'transfer'` 走方案 A 转账模板；否则保持兼容（或 `schedule` 走期次头+指标网格）。 +- 递归子卡仍用同一组件；转账不再复用浅绿满底样式。 +- 触控与字号对齐现有详情区（13–14px，金额醒目）。 + +### 4.3 协议详情 + +`protocol.js` 中样本缴费下的 schedule→transfer 子卡若结构相同，同步打上 `variant: 'transfer'`，避免一端新一端旧。 + +## 5. 测试 + +- 更新 / 新增 parity：transfer 卡片含 `variant: 'transfer'`、样式类（如 `market-detail-section__transfer-card`）、金额头不依赖「转账笔 N」作为主视觉。 +- 现有详情嵌套递归测试仍通过。 + +## 6. 非目标 + +- 不引入方案 B 的展开/收起。 +- 不改列表页缴费卡片。