Cuttlefish Docs
  • 简体中文

    • spz-coupon-code

    何时使用

    spz-coupon-code 提供完整的优惠码工作流 — 输入、应用、展示有效/失效优惠码、推荐可用优惠码、复制到剪贴板。

    支持布局

    • container

    代码演示

    <spz-coupon-code id="coupon" layout="container" cart-id="cart">
  <input role="input" placeholder="请输入优惠码" />
  <button role="apply">应用</button>
  <button role="clear">清除失效码</button>
  <spz-render role="recommend" layout="container" src="...">
    <template><!-- 推荐列表 --></template>
  </spz-render>
  <div role="applied"><!-- 已应用优惠码 --></div>
  <div role="unavailable"><!-- 失效优惠码 --></div>
  <div role="result"><!-- 结果信息 --></div>
</spz-coupon-code>

    属性

    属性名说明类型是否必需
    cart-id应用优惠码后需要刷新的购物车元素 IDstring否

    DOM role 约定

    组件通过子元素的 role 属性定位功能区域：

    Role元素说明
    input<input>优惠码输入框
    apply<button>应用按钮
    clear<button>清除失效/不可用优惠码的按钮
    recommendspz-render推荐优惠码列表
    applied容器已应用且有效的优惠码列表
    unavailable容器已失效的优惠码列表
    result容器应用结果信息区域

    状态属性

    以下布尔属性会自动挂载到组件元素上以反映当前状态：

    属性名说明
    empty输入框为空
    limit用户已达到优惠码使用次数限制
    loading请求进行中
    dom-mountedDOM 结构已初始化
    failed上次应用失败
    disabled输入框已禁用

    Actions

    cancel

    取消（移除）已应用的优惠码。

    参数：

    • code (string)：要取消的优惠码

    示例：

    <button @tap="coupon.cancel(code='SAVE10')">移除 SAVE10</button>

    clear

    清除所有失效或不可用的优惠码。

    copy

    将优惠码复制到剪贴板。如果开启了自动应用，还会自动应用该优惠码。

    参数：

    • code (string)：要复制的优惠码

    setDiscountId

    缓存当前 discount ID 以供后续引用。

    Events

    事件名说明
    applySuccess优惠码应用成功
    applyError优惠码应用失败
    applyNotMetThreshold已应用但未达到消费门槛
    applyMessage应用结果提示信息更新
    copied优惠码已复制到剪贴板
    dj.applyDiscountCode优惠码变更后触发（同时在 document 上派发）

    公开 API

    方法说明返回值
    getModalData()获取优惠活动信息object
    getProductList(data)获取满足条件的商品列表array
    getObtainList(data)获取赠品商品列表array
    getMessage()获取当前提示信息/状态文本string

    注意事项

    • 组件在构建时会从后端拉取配置；如果优惠码功能未开启，组件不会渲染。
    • 自动应用行为（复制→应用）取决于后端 auto_apply_switch 配置。
    • 组件会监听购物车变更事件，自动重新校验已应用的优惠码。