# 订单 Card 组件

## 介绍

用于展示商品图片、名称、规格、数量、价格

## 使用方式

```JSON
"usingComponents": {
  "order-card": "/components/order-card/index"
}
```

```html
<order-card
  thumb="{{ goodsItem.thumb }}"
  name="{{ goodsItem.goodsName }}"
  isPreSale="{{ goodsItem.isPreSale }}"
  spec="{{ goodsItem.spec }}"
  count="{{ goodsItem.count }}"
  price="{{ goodsItem.price }}"
  bind:click="onClickGoods"
></order-card>
```

## API

### Props

| 参数      | 说明           | 类型      | 默认值 |
| :-------- | :------------- | :-------- | :----- |
| thumb     | 图片链接       | _string_  | -      |
| isPreSale | 是否是预售商品 | _boolean_ | false  |
| name      | 商品名称       | _string_  | -      |
| spec      | 商品规格       | _string_  | -      |
| count     | 商品数量       | _number_  | -      |
| price     | 商品价格       | _number_  | -      |

### Events

| 名称  | 说明         |
| :---- | :----------- |
| click | 商品点击事件 |

### Slots

| 名称   | 说明             |
| :----- | :--------------- |
| before | 商品描述前的插槽 |
| after  | 商品描述后的插槽 |

### Css 变量

| 名称                     | 说明             |
| :----------------------- | :--------------- |
| --color-order-card-price | 商品价格颜色     |
| --font-order-card-price  | 商品价格字体大小 |