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

有赞vue wap业务组件库

## GoodsList 商品列表组件

### 使用指南
```javascript
import { GoodsList } from 'captain-ui';
```


### 代码演示

#### 大图 卡片样式

```html
<cap-goods-list
  :list="goodsList"
  :layout="0"
  :size-type="0"
  :show-title="true"
  :show-sub-title="true"
  :show-price="true"
  :show-buy-button="true"
  :buy-button-type="1"
  :show-corner-mark="true"
  :corner-mark-type="4"
  :image-fill-style="1"
  :image-ratio="0"
  @buy-btn-click="clickHandle"
  @wish-btn-click="wishBtnClick"
/>
```

```js
export default {
    methods: {
        clickHandle(goods){
            console.log(goods);
        }
    }
};
```

#### 大图 卡片样式2

```html
<cap-goods-list
  :list="goodsList"
  :layout="0"
  :size-type="5"
  :show-title="true"
  :show-sub-title="true"
  :show-price="true"
  :show-buy-button="true"
  :show-corner-mark="true"
  :corner-mark-type="4"
  :corner-mark-image="cornerImage"
  :image-ratio="0"
  @buy-btn-click="clickHandle"
  @wish-btn-click="wishBtnClick"
/>
```

#### 大图 极简样式
```html
<cap-goods-list
  :list="goodsList"
  :layout="0"
  :size-type="2"
  :show-title="true"
  :show-sub-title="true"
  :show-corner-mark="true"
  :corner-mark-type="2"
  :show-price="true"
  :show-buy-button="false"
  :image-ratio="0"
  @buy-btn-click="clickHandle"
/>
```

#### 小图 卡片样式
```html
<cap-goods-list
  :list="goodsList"
  :layout="1"
  :size-type="0"
  :show-title="true"
  :show-sub-title="true"
  :show-price="true"
  :show-buy-button="true"
  :show-corner-mark="true"
  :buy-button-type="4"
  :corner-mark-type="3"
  @buy-btn-click="clickHandle"
/>
```

#### 小图 卡片样式2
```html
<cap-goods-list
  :list="goodsList"
  :layout="1"
  :size-type="5"
  :show-title="true"
  :show-sub-title="false"
  :show-price="true"
  :show-buy-button="false"
  :buy-button-type="1"
  @buy-btn-click="clickHandle"
/>
```

#### 小图 瀑布流样式
```html
<cap-goods-list
  :list="goodsList"
  :layout="1"
  :size-type="1"
  :show-title="false"
  :show-price="true"
  :show-buy-button="true"
  @buy-btn-click="clickHandle"
/>
```

#### 小图 极简样式
```html
<cap-goods-list
  :list="goodsList"
  :layout="1"
  :size-type="2"
  :show-title="true"
  :show-price="true"
  @buy-btn-click="clickHandle"
/>
```

#### 小图 促销样式
```html
<cap-goods-list
  :list="goodsList"
  :layout="1"
  :size-type="3"
  show-price
  :show-buy-button="false"
  @buy-btn-click="clickHandle"
/>
```

#### 一大两小 卡片样式
```html
<cap-goods-list
  :list="goodsList"
  :layout="2"
  :size-type="0"
  :show-title="true"
  :show-price="false"
  :show-buy-button="true"
  @buy-btn-click="clickHandle"
/>
```

#### 一大两小 卡片样式2
```html
<cap-goods-list
  :list="goodsList"
  :layout="2"
  :size-type="5"
  :show-title="true"
  :show-price="false"
  :show-buy-button="true"
  :show-corner-mark="true"
  @buy-btn-click="clickHandle"
/>
```

#### 一大两小 极简样式
```html
<cap-goods-list
  :list="goodsList"
  :layout="2"
  :size-type="2"
  show-title
  :show-price="true"
  @buy-btn-click="clickHandle"
/>
```

#### 详情列表 卡片样式

```html
<cap-goods-list
  :list="goodsList"
  :layout="3"
  :size-type="0"
  show-price
  :show-sub-title="true"
  :show-sold-num="true"
  :buy-button-type="4"
  @buy-btn-click="clickHandle"
/>
```

#### 详情列表 卡片样式2

```html
<cap-goods-list
  :list="goodsList"
  :layout="3"
  :size-type="5"
  :show-sold-num="true"
  @buy-btn-click="clickHandle"
/>
```

#### 详情列表 极简样式
```html
<cap-goods-list
  :list="goodsList"
  :layout="3"
  :size-type="2"
  :image-fill-style="1"
  :show-sub-title="true"
  :show-sold-num="true"
  @buy-btn-click="clickHandle"
/>
```

#### 一行三个

```html
<cap-goods-list
  :list="goodsList"
  :layout="5"
  :size-type="2"
  :show-title="true"
  :show-price="true"
  :show-corner-mark="true"
  :buy-btn-express="true"
/>
```

#### 左右滑动

```html
<cap-goods-list
  :list="goodsList"
  :layout="6"
  :size-type="2"
  :show-title="true"
  :show-price="true"
  :show-corner-mark="true"
  :buy-btn-express="true"
/>
```

#### 多图商品

```html
<cap-goods-list
  :list="multiGoodsList"
  :layout="3"
  :size-type="4"
  :show-sub-title="true"
  :max-image="9"
  @buy-btn-click="clickHandle"
/>
```

### API

| 参数       | 说明      | 类型       | 默认值       | 必须      |
|-----------|-----------|-----------|-------------|-------------|
| list | 商品列表数据 |  Array | `[]` |  |
| layout | 商品布局方式( 0:大图 1:小图 2:一大两小 3:详情列表 5:一行三个) |  Number | `0` |  |
| sizeType | 商品展示模式(0:卡片模式 1:瀑布流 2:极简样式 3:促销 4:多图(不可用，被微小店占用) 5:一行三个 6:左右滑动) |  Number | `0` |  |
| showTitle | 是否展示标题 |  Boolean | `true` |  |
| showSubTitle |  是否展示副标题 |  Boolean | `true` |  |
| showPrice |  是否展示价格 |  Boolean | `true` |  |
| showBuyButton |  是否展示购买按钮 |  Boolean | `true` |  |
| buyButtonType | 购买按钮的样式(1,2,3,4 四种可选) |  Number | `1` |  |
| showCornerMark |  是否显示角标 |  Boolean | `false` |  |
| cornerMarkType | 角标样式(0,1,2,3 四种可选) |  Number | `0` |  |
| cornerMarkImage | 自定义角标图片（36x36） |  String | `''` |  |
| imageRatio | 图片比例(0：`3:2`， 1：`1:1`)。默认为无，显示整个图片 |  Number | - |  |
| imageFillStyle | 图片显示模式( 1：填充，2：留白)。默认为留白 |  Number | - | `2` |
| buttonText | 自定义按钮文字 |  String | - | - |
| maxImage | 最多显示的图片数量(仅多图商品可用) | Number | 3 | - |

### Event

| 事件名      | 说明      | 参数       |
|-----------|-----------|-----------|
| buy-btn-click | 用户点击购买图标时的事件，参数为当前点击的商品 | `goodsInfo`：当前点击商品的信息 |
| wish-btn-click | 心愿单按钮点击事件 | `isAdded`：心愿单点击后的状态 |

### 数据格式

#### goodsList中的商品字段说明

| key       | 说明      | 类型       |
|-----------|-----------|-----------|
| id | 商品id |  Number |
| title | 商品标题 |  String |
| sub_title | 商品副标题 |  String |
| url | 点击商品后的跳转链接 |  String |
| image_url | 商品图片url |  String |
| price | 商品价格，以分为单位 |  Number |
| width | 宽度 |  Number |
| height | 高度 |  Number |
| is_wish_open | 心愿单是否开启 |  Boolean |
| is_wish_added | 心愿单是否被添加 |  Boolean |

- 注意，如果 sizeType 为 4，即多图商品，则 image_url 应是数组类型，最多显示 9 张图片。