# Coupon 优惠券

## 引入

首先在页面 `index.json`中引入组件：

```json
{
  "usingComponents": {
    "tea-coupon": "../../dist/coupon/index"
  }
}
```

然后在对应的`wxml`页面中既可使用：

正常使用

```html
<tea-coupon>
  <view slot="header" class="inner">头部</view>
  <view class="inner">内容</view>
</tea-coupon>
```

仅显示内容区域

```html
<tea-coupon showHeader="{{false}}">
  <view class="inner">内容</view>
</tea-coupon>
```

显示底部区域

```html
<tea-coupon showFooter="{{true}}">
  <view slot="header" class="inner">头部</view>
  <view class="inner">内容</view>
  <view slot="footer" class="foot">底部</view>
</tea-coupon>
```

## Props

| 参数         | 描述     | 类型        | 默认值     |
| ---------- | ------ | --------- | ------- |
| showHeader | 是否显示头部 | `Boolean` | `true`  |
| showFooter | 是否显示底部 | `Boolean` | `false` |
| radialSize | 装饰圆角半径 | `Number`  | `5`     |
| horizontal | -      | `Boolean` | `false` |

## CSS变量属性表

| 变量名                  | 默认值           | 描述  |
| -------------------- | ------------- | --- |
| coupon-height        | 90px          | -   |
| radial-size          | 5px           | -   |
| coupon-border-radius | 2px           | -   |
| coupon-border-color  | @border-color | -   |