纷享销客开发者手册

简体中文

English

阶段卡片功能增强

约 792 字大约 3 分钟

2025-12-16

在阶段视图场景中，对每个阶段卡片的统计字段区域内容以及背景颜色进行自定义增强。

典型场景例如：

  • 自定义每个阶段卡片的统计字段区域内容
  • 自定义每个阶段卡片的背景颜色
  • 在阶段卡片渲染之前执行额外的业务逻辑

适用场景

适用于"阶段视图中每个阶段卡片的统计字段区域内容和样式需要定制化"的场景。

适用页面

  • 阶段视图页面

什么时候适合做阶段卡片功能增强

如果你遇到下面这些需求，通常都适合优先考虑阶段卡片功能增强：

  • 想自定义每个阶段卡片的统计字段区域内容
  • 想根据阶段 ID 或阶段名称自定义不同阶段卡片的背景颜色
  • 想在阶段卡片渲染之前执行额外的业务逻辑

开发思路

阶段卡片功能增强通常可以拆成三步理解：

  1. 明确要增强的是阶段卡片的哪一个部分
  2. 选择合适的扩展事件/钩子
  3. 在插件中接入扩展点并验证行为

开发流程

  1. 明确场景与接入点

    在开始之前，先确认以下问题：

    • 逻辑需要在阶段卡片 UI 绘制之前还是之后执行（Web 对应 stage.stageCard.render.before；移动端对应 customTotalInfo Hook）
    • 是否涉及统计字段区域内容或背景颜色的定制

  2. 创建阶段视图插件

    在后台创建 阶段视图 类插件（Web / 移动端按实际终端选择）。

  3. 选择事件或 Hook 并编写逻辑

    Web 端：在插件 apply 中注册 stage.stageCard.render.before 事件，在回调内使用 navItemDom 参数自定义阶段卡片的统计字段区域内容或背景颜色。

    移动端：注册 customTotalInfo Hook，在回调中返回自定义内容。

  4. 联调与验证

    • 验证不同阶段卡片的统计字段区域自定义效果
    • 验证不同阶段卡片的背景颜色自定义效果
    • 对照参考手册核对文案定制与返回值

  5. 发布与上线

    开发完成后发布插件，在对应阶段视图场景中启用，并在真实流程任务上验证效果。

推荐入口

Web 端

常见问题

Q：如何自定义不同阶段卡片的背景颜色？

使用 stage.stageCard.render.before 事件，通过判断 context.stageId 来为不同阶段设置不同的背景颜色。

Q：如何在阶段卡片中修改统计字段区域的内容？

使用 stage.stageCard.render.before 事件，通过 navItemDom.find('.oppo-stage') 获取统计字段区域，然后使用 html() 方法设置自定义内容。

下一步