@retailwe/ui-cart-bar NPM

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	-	-