spz-coupon-code 优惠码

• 在购物车页面提供优惠码输入框，支持应用、取消优惠码
• 需要展示推荐优惠码列表，引导用户选码复制并自动应用
• 需要区分展示当前有效优惠码与已失效优惠码

组件通过 B 端接口自动拉取配置后完成初始化，在模板内部声明带 role 属性的子元素：role="input" 输入框、role="apply" 应用按钮、role="applied" 有效码渲染区、role="unavailable" 失效码渲染区、role="recommend" 推荐码渲染区。

<spz-coupon-code id="spz-coupon-code-base" layout="container">
  <div class="coupon-wrapper">
    <div class="coupon-label">优惠码</div>
    <div class="coupon-input-row">
      <input role="input" type="text" placeholder="请输入优惠码" />
      <button role="apply" type="button">应用</button>
    </div>
    <div class="coupon-applied">
      <!-- 成功应用的优惠码列表 -->
      <spz-render layout="container" role="applied">
        <template>
          <div style="display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;">
            <div spz-for="code in data" class="coupon-tag">
              ✓ ${code}
            </div>
          </div>
        </template>
      </spz-render>
      <!-- 不可用的优惠码 -->
      <spz-render layout="container" role="unavailable">
        <template>
          <div style="color:#ef4444;font-size:13px;margin-top:6px;" spz-for="code in data">
            「${code}」不可用
          </div>
        </template>
      </spz-render>
    </div>
  </div>
</spz-coupon-code>

通过 cancel、clear、copy 方法，可在模板内渲染移除按钮、清除失效码按钮，以及推荐码的复制并应用按钮。

<spz-coupon-code id="spz-coupon-code-api-usage" layout="container">
  <div class="coupon-code-wrapper">
    <div class="coupon-code-input-row">
      <input role="input" type="text" placeholder="请输入优惠码" />
      <button role="apply" type="button">应用</button>
    </div>
    <div class="coupon-code-applied">
      <spz-render layout="container" role="applied">
        <template>
          <div>
            ${data.map(code => `
              <span style="margin-right:8px;">
                ${code}
                <button type="button"
                  @tap="spz-coupon-code-api-usage.cancel(code=${code})">
                  移除
                </button>
              </span>
            `).join('')}
          </div>
        </template>
      </spz-render>
      <spz-render layout="container" role="unavailable">
        <template>
          <div>
            ${data.map(code => `
              <span style="text-decoration:line-through;margin-right:8px;">${code}</span>
            `).join('')}
            ${data.length ? `<button type="button"
              @tap="spz-coupon-code-api-usage.clear()">
              清除失效码
            </button>` : ''}
          </div>
        </template>
      </spz-render>
    </div>
    <spz-render layout="container" role="recommend">
      <template>
        <div>
          ${(data.list || []).map(code => `
            <span style="margin-right:8px;">
              ${code}
              <button type="button"
                @tap="spz-coupon-code-api-usage.copy(code=${code})">
                复制并应用
              </button>
            </span>
          `).join('')}
        </div>
      </template>
    </spz-render>
  </div>
</spz-coupon-code>

取消并移除已应用的指定优惠码，随后重新发起应用请求更新购物车折扣。

清除所有已失效的优惠码，随后重新发起应用请求更新购物车折扣，不需要参数。

将指定优惠码写入剪贴板；若开启自动应用开关，同时将该码填入输入框并自动提交应用。

优惠码应用失败时触发。

优惠码应用后未达到使用门槛时触发。

每次应用结束后触发，无论成功或失败均会触发，可用于统一处理提示信息展示。

调用 copy 方法且剪贴板写入成功后触发，不携带额外数据。

优惠码应用结果变更后触发，可监听此事件同步更新页面其他区域的折扣信息。