captain-ui/lib/tag-list/zh-CN.md

有赞vue wap业务组件库

## TagList 商品分组组件

### 使用指南

```javascript
import { TagList } from 'captain-ui';
```

### 代码演示

#### 基础用法

```html
<cap-taglist
  :tags="tags"
  :goods="goods"
  :coupons="coupons"
  :loading-goods="loadingGoods"
  @load="onLoad"
  @click="onClick"
  @draw="onDraw"
/>
```

```js
import { GOODS, TAG, GROUP, COUPONS } from 'docs/zh-CN/tag-list/data';

export default {
  data() {
    return {
      tags: TAG,
      goods: GOODS
      coupons: COUPONS
    }
  },

  methods: {
    onLoad(tag) {
      setTimeout(() => {
        this.goods[tag.alias] = GROUP;
        tag.loading = false;
      }, 300);
    },

    onClick(goods, tag, index) {
      this.loadingGoods = {
        alias: tag.alias,
        index
      };
      setTimeout(() => {
        this.loadingGoods = {};
      }, 1000);
    },

    onDraw(coupon) {
      setTimeout(() => {
        alert('领取成功')
      }, 1000);
    }
  }
}
```

### API

| 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------|
| tags | 所有分组的信息列表 | `Array`  | - | - |
| goods | 分组对应的商品信息 | `Object` | - | - |
| coupons | 优惠券列表 | `Array` | - | - |
| loadingGoods | 加载中的商品 id | `Array` | `[]` | - |
| preload | 分组预加载距离 | `Number` | `1000` | - |
| imageFillStyle | 图片显示模式 (0：留白，1：填充) | `Number | String` | `0` | - |

### 数据格式
#### 所有商品分组信息列表的数据格式
```javascript
[
  {
    title: '分组1 名称',
    alias: '分组1 alias'
  },
  {
    title: '分组2 名称',
    alias: '分组2 alias'
  }
]
```

#### 分组对应商品信息的数据格式
```javascript
{
  '分组1 alias': [{
    title: '商品名',
    price: '商品价格，元为单位',
    thumb: '商品图片链接',
    url: '商品 URL'
  }],
  '分组2 alias': [{
    title: '商品名',
    price: '商品价格，元为单位',
    thumb: '商品图片链接',
    alias: '商品 alias'
  }]
}
```

#### 优惠券列表数据格式
```javascript
[
  {
    id: '优惠券id',
    alias: '优惠券别名',
    name: '优惠券名称',
    origin_value: '减价',
    discount: '折扣',
    at_least: '消费限额门槛',
    is_at_least: '有无门槛'
  },
  {
    id: '优惠券id',
    alias: '优惠券别名',
    name: '优惠券名称',
    origin_value: '减价',
    discount: '折扣',
    at_least: '消费限额门槛',
    is_at_least: '有无门槛'
  }
]
```

=