npm package: @retailwe/ui-goods-list
Description: ## 引入
Latest version: 0.0.31

# goods-list 商品卡片

## 引入

在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)

```json
"usingComponents": {
  "wr-goods-card": "@retailwe/ui-goods-list/index"
}
```

## 代码演示

### 基础用法

```ts
Page({
  data: {
    goodsList: [] as any,
  },
  onLoad() {
    const data = [
      {
        thumb: 'https://i.loli.net/2017/08/21/599a521472424.jpg',
        title:
          '智利 火龙果超级好吃，又大又甜 欢迎购买，限价五折优惠哦,智利 火龙果超级好吃，又大又甜 欢迎购买，限价五折优惠哦',
        price: '99.99',
        originPrice: '9.99',
        tags: ['热卖'],
      },
    ];
    const lists = Array.from({ length: 5 }, (_v, k) => data[k % data.length]);
    this.setData({
      goodsList: lists,
    });
  },
});
```

```html
<goods-list goodsList="{{goodsList}}"></goods-list>
```

### 卡片垂直布局

```html
<goods-list goodsList="{{goodsList}}" layout="vertical"></goods-list>
```

## API

### Props

| 参数 | 说明 | 类型 | 默认值 | 说明 |
|-----------|-----------|-----------|-------------|-------------|
| id | 组件ID | *string* | `gl-88888888` | 默认取`gl-${~~(Math.random() * 10 ** 8)}` |
| goods-list | 商品列表数据源 | *Good[]* | - | 结构参考下方说明 |
| layout | 卡片布局 | *string* | `horizontal` | 横向-`horizontal`、横向&价格与标题不同行-`horizontal-wrap`、纵向-`vertical` |
| price-fill | 价格是否保持两位小数 | *boolean* | `false` | - |
| show-cart | 是否展示购物车 | *boolean* | true | 选填 |
| lazy-load | 是否开启图片懒加载 | *boolean* | `true` | - |
| cart-size | 购物车大小，透传给add-cart组件size | *number* | 48 | 选填 |
| cart-color | 购物车颜色，透传给add-cart组件color | *string* | #FA550F | 选填 |
| thresholds | 元素可见监控阈值 | *number[]* | [] | 选填，不填或填为空数组时不进行监控，进行监控后每达到一个阈值就触发一次事件：ob |

### Good

| 参数 | 说明 | 类型 | 默认值 | 说明 |
|-----------|-----------|-----------|-------------|-------------|
| thumb | 预览图 | *string* | - | 选填 |
| num | 商品数量 | *number* | - | 选填 |
| title | 商品标题 | *string* | - | 选填 |
| lineClamp | 标题多行溢出数量 | *number* | 1|2 | 默认值规则：当 tags 数量大于0 且 显示 时，默认值为1；当 tags 数量等于0 或 不显示 时，默认值为2 |
| desc | 商品描述 | *string* | - | 选填 |
| specs | 商品规格,字符串，单个规则超过5个字就... | *string[]* | - | 选填 |
| tags | 商品标签，位于desc区域 | *string[]* | - | 选填 |
| price | 商品价格，单位分，整数 | *number* | - | 选填 |
| originPrice | 商品划线价格，单位分，整数 | *number* | - | 选填 |
| hideKey | 传入哪个key，哪个key对应的内容就则不显示 | *Record<keyof Good, boolean>* | - | 选填 |
| currency | 货币符号 |  *string* | `¥` | - |
| [string] | 其他任意键值, 扩展结构用于其他业务目的 | *any* | - | 选填 |

### Events

| Event  | Description                   | Arguments |
| ------ | ----------------------------- | --------- |
| thumb | 点击商品预览图触发 | { ...goods-card.thumb, index: number } |
| specs | 点击商品规格显示区触发 | { ...goods-card.specs, index: number } |
| tag | 点击商品标签触发 | { ...goods-card.tag, index: number } |
| click | 点击商品卡片触发 | {...goods-card.click, index: number} |
| addcart | 点击商品加购按钮触发 | {...goods-card.add-cart, index: number} |
| ob | 设置了thresholds且商品卡片的可见比例达到阈值 | {...goods-card.ob, index: number} |

### 外部样式类

| 类名 | 说明 |
|-----------|-----------|
| wr-class | 根节点样式类 |
| title-class | title 节点样式类 |
| desc-class | desc 节点样式类 |
| num-class | num 节点样式类 |
| thumb-class | 预览图 样式类 |
| specs-class | 规格节点样式类 |
| price-class | price 节点样式类 |
| origin-price-class | 原价 price 节点样式类 |
| price-prefix-class | 价格前附加字符 样式类 |

### CSS Var
| 类名 | 属性 | 说明 | 默认值(不同的layout可能会不同) |
| --------------- | -------- | -------- | ------ |
| --ui-goods-list-bg | background | 商品列表背景 | - |
| --ui-goods-list-padding | padding | 商品列表 padding | - |
| --ui-goods-list-card-margin-bottom | 商品卡片底部margin | - |
| --ui-goods-list-card-border-bottom | 商品卡片底部border | - |
| --ui-goods-list-last-card-border-bottom | 最后一个商品卡片底部border | - |