Product Selector 商品选择器组件说明

1. 目前的商品选择器组件有什么

下面保留现有组件的编号标记、字段来源说明，以及 Monthly / Annual 两种展示效果。这里展示的是订阅商品逻辑，所以会出现月均价、/month、/year、per cam 等订阅文案。

2. 此次需要新增的 one-time payment 支持

one-time payment 不应该是一种新的商品选择器组件，也不应该只支持某一个 cardStyle。它应该是 product-container 下的一种商品展示模式：当商品本身的支付类型为 paymentMode = one_time 时，四种现有 cardStyle 都要把订阅文案替换为一次性支付文案。

one-time payment 效果预览

下面四组卡全部基于现有 cardStyle，只替换文案和价格口径。每个 cardStyle 内都枚举 single / unlimited 两种覆盖范围文案；实际实现时，四种 cardStyle 都必须支持 paymentMode = one_time。

基于当前 CMS 后台代码的评估

• 当前已支持：product-container 已有 layout、tierType、products[]、visibleProducts[]、defaultProductId。产品可以选择商品 ID、配置展示名称、卡片样式、Offer ID、badge 和默认选中商品。
• 当前只用于后台展示：商品选择器从 marketing-service 查询商品时，前端类型里已经有 month、price、maxDeviceNum。后台列表能看到“周期：1200月”这类信息，但 CMS 最终只保存商品 ID，不保存完整商品事实。
• 当前缺口：CMS 后台、接口 DTO、App 插件模型里都没有 paymentMode；App 侧也没有针对 one-time payment 的文案调用逻辑，现有四种卡片会按订阅逻辑展示月均价和 /month。

产品在 CMS 后台需要配置什么

产品侧只配置“展示哪些商品、用哪个样式、标题和 badge 怎么展示”。价格、覆盖设备数、是否 one-time、Cover... / Pay Once 文案都不建议靠 CMS 手填，应该来自商品结构化数据和后端文案库。

诉求 1：CMS 后台要能区分 one-time 和 subscription 商品

诉求 2：one-time 文案配置在哪里、怎么调用

one-time 商品会新增 Cover One Camera、Cover All Cameras、Pay Once 这类文案。诉求是：App 首次支持动态文案能力后，后续文案修改不需要 App 发版。

CMS 配置示例（产品需要填写）

下面只展示产品在 CMS 后台需要配置的内容：展示哪些商品、默认选中哪个商品、商品标题、卡片样式、badge。one-time 通用文案不在 CMS 配置。

{
  "blockType": "product-container",
  "layout": "vertical",
  "defaultProductId": "one_time_lifetime_single_9999",
  "visibleProducts": [
    {
      "productId": "one_time_lifetime_single_9999",
      "displayName": "Lifetime Access",
      "cardStyle": "card-long-horizontal",
      "badges": [
        {
          "type": "tip",
          "tipSetting": { "tipText": "POPULAR" }
        }
      ]
    },
    {
      "productId": "one_time_lifetime_unlimited_19499",
      "displayName": "Lifetime Access",
      "cardStyle": "card-long-horizontal",
      "badges": [
        {
          "type": "tip",
          "tipSetting": { "tipText": "BEST VALUE" }
        }
      ]
    }
  ]
}

后端文案库示例

后端文案库负责维护 one-time payment 的通用多语言文案。App 根据用户语言、paymentMode 和 maxDeviceNum 取对应文案。

{
  "locale": "en",
  "one_time_payment": {
    "coverage_one_camera": "Cover One Camera",
    "coverage_two_cameras": "Cover Two Cameras",
    "coverage_all_cameras": "Cover All Cameras",
    "pay_once": "Pay Once",
    "separator": " · "
  }
}