cart-bar 购物车结算栏

引入

全局引入，在 miniprogram 根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置。

// app.json 或 index.json
"usingComponents": {
  "wr-cart-bar": "@retailwe/ui-cart-bar/index"
}

代码演示

基本用法

<wr-cart-bar
  is-all-selected="{{cartGroupData.isAllSelected}}"
  total-amount="{{cartGroupData.totalAmount}}"
  total-goods-num="{{cartGroupData.totalGoodsNum}}"
  total-discount-amount="{{cartGroupData.totalDiscountAmount}}"
  bindselectall="onSelectAll"
  bindtosettle="onToSettle"
/>

import Toast from 'components/toast/src/toast';

Page({
  data: {
    cartGroupData: {
      isAllSelected: false,
      totalAmount: '19908',
      totalGoodsNum: 3,
      totalDiscountAmount: '3000',
    },
  },

  onSelectAll() {
    Toast({ text: '点击了全选按钮' });
  },

  onToSettle() {
    Toast({ text: '点击了结算按钮' });
  },
});

固定在底部(默认会在底部预留tabbar的空间)

<wr-cart-bar
  is-all-selected="{{cartGroupData.isAllSelected}}"
  total-amount="{{cartGroupData.totalAmount}}"
  total-goods-num="{{cartGroupData.totalGoodsNum}}"
  total-discount-amount="{{cartGroupData.totalDiscountAmount}}"
  fixed="{{true}}"
  bindselectall="onSelectAll"
  bindtosettle="onToSettle"
/>

cart-bar Props

| 参数 | 说明 | 类型 | 默认值 | 版本 | | --------- | ---------------- | --------- | ---------- | ---- | | isAllSelected | 是否已全选 | boolean | - | - | | totalAmount | 总金额 | number | - | - | | totalGoodsNum | 购买商品数量 | number | - | - | | totalDiscountAmount | 总优惠金额 | number | - | - | | bottomHeight | 距离窗口底部的边距(比如页面底部有自定义tab-bar，则需传入tab-bar的高度) | number | - | - | | fixed | 是否固定在页面底部（通过bottomHeight控制预留底部tabbar的空间） | number | - | - |

cart-bar Event

| 事件名 | 说明 | 参数 | | ---------- | ---- | ---- | | selectall | 点击全选按钮触发 | - | | tosettle | 点击结算按钮触发 | - |