0.0.16 • Published 3 years ago
商详页购物栏
引入
"usingComponents": {
"wr-buy-bar": "@retailwe/buy-bar/index"
}
代码演示
<wr-buy-bar
jumpArray="{{jumpArray}}"
buttonType="{{buttonType}}"
isStock="{{isStock}}"
shopCartNum="{{cartNum}}"
soldout="{{soldout}}"
bind:toAddCart="toAddCart"
bind:toNav="toNav"
bind:toBuyNow="buyItNow"
class="goods-details-card">
</wr-buy-bar>
jumpArray: [
{
title: '首页',
url: '/supermarket/pages/home/home/home',
iconName: 'shangxiangye-shouye',
},
{
title: '购物车',
url: '/supermarket/pages/home/cart/cart',
iconName: 'cart',
showCartNum: true,
},
],
入参
| 参数 | 说明 | 类型 | 默认值 | 是否必要 |
|---|
| jumpArray | 跳转按钮组 | Array | [] | 否 |
| soldout | 商品是否下架 | Boolean | false | 否 |
| isStock | 是否有库存 | Boolean | true | 否 |
| isSlotButton | 是否开启按钮插槽 | Boolean | false | 否 |
| shopCartNum | 购物车数量 | Number | 0 不显示 | 否 |
| buttonType | 栏目类型 | Number | 0 不显示操作按钮 | 是 |
buttonType 说明
| 值 | 说明 |
|---|
| 0 | 不显示操作按钮，不包括跳转按钮组 ，如果 开启 isSlotButton 将在注入在跳转按钮组后面 |
| 1 | 显示“加入购物车”和“立即购买” ,如果 开启 isSlotButton 将在后面注入 |
jumpArray 跳转按钮组说明
| 参数 | 说明 | 类型 | 默认值 | 是否必要 |
|---|
| title | 跳转按钮名称 | String | '' | 是 |
| url | 跳转 URL | String | '' | 是 |
| iconName | 跳转按钮 iconfont 名 和 按钮样式名 | String | ‘’ | 是 |
| showCartNum | 是否显示购物车数量 | boolean | false | 否 |
Events
| 事件 | 是否必要 | 说明 |
|---|
| toAddCart | 否 | 有库存时加入购物车和单个购买回调 |
| toNav | 否 | 跳转按钮回调， 返回按钮事件和跳转的 url |
| toBuyNow | 否 | 有库存时购买操作， 返回按钮事件 |
外部样式类
| 类名 | 说明 |
|---|
| wr-class | 根节点样式类 |
| wr-sold-out | 售馨，下架提示的外部样式 |
slot