# x-coupon 优惠券组件

一个可复用的优惠券展示组件，支持金额券/折扣券、状态展示、按钮插槽、自定义主题色与缺口背景色。

## 引入方式

在页面中手动引入：

```vue
<script>
import xCoupon from '@/components/x-coupon/x-coupon.vue'

export default {
  components: { xCoupon }
}
</script>
```

## 基本用法

```vue
<template>
  <view style="padding: 24rpx; background: #f5f5f5;">
    <x-coupon
      value="100"
      condition="满500可用"
      title="全场通用券"
      desc="仅限服饰类商品"
      validity="2026.12.31 到期"
      @click="onUse"
    />
  </view>
</template>

<script>
import xCoupon from '@/components/x-coupon/x-coupon.vue'

export default {
  components: { xCoupon },
  methods: {
    onUse() {
      uni.showToast({ title: '使用优惠券', icon: 'none' })
    }
  }
}
</script>
```

## 折扣券

```vue
<x-coupon
  type="discount"
  value="8.5"
  title="会员专享折扣"
  condition="无门槛"
  color="#FF9800"
/>
```

## 状态展示

```vue
<x-coupon value="50" title="新人券" status="used" disabled />
<x-coupon value="20" title="限时券" status="expired" disabled />
```

## 自定义按钮（插槽）

```vue
<x-coupon value="30" title="外卖券">
  <template #action>
    <view style="padding: 8rpx 22rpx; border-radius: 999rpx; background: #111; color: #fff; font-size: 24rpx;">
      去使用
    </view>
  </template>
</x-coupon>
```

## Props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| type | 券类型：`money` 金额券 / `discount` 折扣券 | String | `money` |
| value | 面值（金额或折扣值） | Number \| String | 必填 |
| currency | 金额币种符号（仅 `money` 时展示） | String | `¥` |
| condition | 使用条件文案 | String | `''` |
| title | 标题 | String | `优惠券` |
| desc | 描述文案 | String | `''` |
| validity | 有效期文案 | String | `''` |
| color | 左侧主题色（也用于默认按钮色） | String | `#ff5a5f` |
| backgroundColor | 卡券背景色 | String | `#ffffff` |
| cutoutColor | 缺口圆背景色（通常传页面背景色；需要透明可传 `transparent`） | String | `#f5f5f5` |
| disabled | 是否禁用点击（禁用时不会触发 click） | Boolean | `false` |
| status | 状态：`available` / `used` / `expired` | String | `available` |
| btnText | 默认按钮文字（未使用 action 插槽时） | String | `立即使用` |
| showBtn | 是否显示默认按钮 | Boolean | `true` |

## Events

| 事件 | 说明 | 回调参数 |
| --- | --- | --- |
| click | 点击卡券（仅 `status=available` 且未禁用时触发） | 无 |

## Slots

| 名称 | 说明 |
| --- | --- |
| action | 右侧操作区域插槽（自定义按钮/图标等） |