# Card 商品卡片

## 介绍

Card 商品卡片

## 代码演示

### 引入组件

```json
{
  "usingComponents": {
    "goods-card": "/components/goods-card/index"
  }
}
```

### 基础用法

```html
<block wx:for="{{ data }}" wx:key="id">
  <goods-card
    thumb="{{ item.thumb }}"
    title="{{ item.title }}"
    price="{{ item.price }}"
    lazy-load="{{ true }}"
  >
  </goods-card>
</block>
```

## API

### Props

| 参数         | 说明                                                          | 类型               | 默认值      | 说明 |
| ------------ | ------------------------------------------------------------- | ------------------ | ----------- | ---- |
| data         | 商品数据                                                      | _Goods_            | -           | 必填 |
| thumb        | 预览图                                                        | _string_           | -           | 选填 |
| thumb-mode   | 图片裁剪、缩放的模式，可选值参考小程序 image 组件 mode 属性值 | _string_           | `aspectFit` | 选填 |
| thumb-width  | 商品图片宽度参数                                              | _string \| number_ | `342rpx`    | 选填 |
| thumb-height | 商品图片高度参数                                              | _boolean_          | `342rpx`    | 选填 |
| title        | 商品标题                                                      | _string_           | -           | 选填 |
| desc         | 商品描述                                                      | _string_           | -           | 选填 |
| price        | 商品价格                                                      | _string \| number_ | -           | 选填 |
| origin-price | 商品划线原价                                                  | _string \| number_ | -           | 选填 |
| tag          | 商品标签，位于 desc 区域                                      | _string_           | -           | 选填 |
| type         | 商品类型，位于 thumb 区域                                     | _string_           | -           | 选填 |
| lazy-load    | 是否开启图片懒加载                                            | _boolean_          | `false`     | 选填 |
| line-clamp   | 标题多行溢出数量                                              | _number_           | `1`         | 选填 |
| currency     | 货币符号                                                      | _string_           | `¥`         | 选填 |

### Slots

| 名称         | 说明                                                 |
| ------------ | ---------------------------------------------------- |
| title        | 自定义标题栏，如果设置了 title 属性则不生效          |
| desc         | 自定义描述栏，如果设置了 desc 属性则不生效           |
| price        | 自定义价格，如果设置了 price 属性则不生效            |
| origin-price | 自定义商品原价，如果设置了 origin-price 属性则不生效 |
| thumb        | 自定义图片，如果设置了 thumb 属性则不生效            |
| footer       | 自定义右下角内容                                     |

### Events

| 事件名     | 说明         | 回调参数 |
| ---------- | ------------ | -------- |
| bind:click | 点击商品卡片 | event    |

### 外部样式类

| 类名               | 说明           |
| ------------------ | -------------- |
| custom-class       | 根节点样式类   |
| thumb-class        | 左侧图片样式类 |
| title-class        | 标题样式类     |
| price-class        | 价格样式类     |
| origin-price-class | 划线原价样式类 |

### CSS Var

可以通过设置 `css var`变量修改商品卡片 `UI`

| 变量名                                 | 属性               | 说明             | 默认值    |
| -------------------------------------- | ------------------ | ---------------- | --------- |
| --goods-card-bg                        | background-color   | 卡片背景颜色     | `#fff`    |
| --goods-card-border-radius             | border-radius      | 卡片圆角         | `16rpx`   |
| --goods-card-thumb-width               | width              | 预览图区块宽度   | `342rpx`  |
| --goods-card-thumb-height              | height             | 预览图区块高度   | `342rpx`  |
| --goods-card-thumb-height              | height             | 预览图区块高度   | `342rpx`  |
| --goods-card-title-font-size           | font-size          | 标题字体大小     | `28rpx`   |
| --goods-card-title-font-weight         | font-weight        | 标题字体粗细     | `600`     |
| --goods-card-title-line-height         | line-height        | 标题字体行高     | `40rpx`   |
| --goods-card-title-color               | color              | 标题字体颜色     | `#333`    |
| --goods-card-title-line-clamp          | -webkit-line-clamp | 标题多行溢出数量 | `1`       |
| --goods-card-current-price-font-size   | font-size          | 价格字体大小     | `36rpx`   |
| --goods-card-current-price-font-weight | font-weight        | 价格字体粗细     | `600`     |
| --goods-card-current-price-line-height | line-height        | 价格字体行高     | `50rpx`   |
| --goods-card-current-price-color       | color              | 价格字体颜色     | `#ff7437` |
| --goods-card-price-currency            | content            | 价格符号         | `¥`       |
| --goods-card-origin-price-color        | content            | 划线价格字体颜色 | `#ccc`    |