spz-checkout#

#何时使用

spz-checkout 处理购物车到结账的转换流程。用户点击结账按钮后，组件获取购物车数据并调用下单 API，然后跳转到结账页面。

#支持布局

• container

#代码演示

<spz-checkout layout="container" cart="spz-cart">
  <button role="checkout">结账</button>
</spz-checkout>

#带订单备注

<textarea id="order-note" placeholder="订单备注..."></textarea>
<spz-checkout layout="container" cart="spz-cart" note-id="order-note">
  <button role="checkout">结账</button>
</spz-checkout>

#属性

#DOM role 约定

#工作原理

1. 点击 [role="checkout"] 按钮后，组件从 cart 指定的元素获取购物车数据。
2. 按钮显示加载状态。
3. 调用下单 API，传入购物车 token 和可选的订单备注。
4. 成功后浏览器跳转到结账 URL。
5. 失败时显示 toast 提示信息并刷新页面。

#注意事项

• 该组件不暴露自定义 action。
• 该组件不派发自定义事件。
• 组件必须包含 [role="checkout"] 子元素才能正常工作。