商详页购物栏

引入

"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

| name | 说明 | | --------- | -------- | | buyButton | 按钮插槽 |