order-group 订单分类

引入

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

// app.json 或 index.json
"usingComponents": {
  "wr-order-group": "@retailwe/order-group/index"
}

代码演示

基础用法

<wr-order-group orderTagInfos="{{orderTagInfos1}}" bind:click="onClick" bind:clickTop="onClickTop" />

Page({
  data: {
    orderTagInfos: [
         {
           title: '待付款',
           iconName: 'wallet',
         },
         {
           title: '待发货',
           iconName: 'wuliu-1',
         },
         {
           title: '待收货',
           iconName: 'packaging',
         },
         {
           title: '退款/售后',
           iconName: 'money',
         },
       ],
  },
  onClick(e) {
    console.log('onClick', e);
  },
  onClickTop() {
    console.log('onClickTop');
  },
});

API

order-group Props

| 参数 | 说明 | 类型 | 默认值 | 版本 | |-----------|-----------|-----------|-------------|-------------| | title | top标题 | string | 我的订单 | - | | value | top右侧展示文字 | string | 全部订单 | - | | isTop | 是否显示top | boolean | true | - | | orderTagInfos | 订单分类数据源，最多设置四个分类 | array | [] | - |

orderTagInfos Props

| 参数 | 说明 | 类型 | 默认值 | 版本 | | --------- | ---------------- | --------- | ---------- | ---- | | title | 分类标题 | string | - | - | | iconName | 分类图标icon | string | - | - | | orderNum | 角标展示的数量，如果不设置或参数是0则不展示 | number | - | - | | dot | 角标是否展示为小点，配合orderNum参数使用 | boolean | false | - | | ... | 其他参数 | any |

order-group Event

| 事件名 | 说明 | 参数 | |-----------|-----------|-----------| | click | 点击单元格时触发 | - | | clickTop | 点击单元格时触发 | - |