缴费信息 · 期数折叠

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

改后(默认折叠) 推荐
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