111 lines
2.7 KiB
Markdown
111 lines
2.7 KiB
Markdown
# 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 | 右侧操作区域插槽（自定义按钮/图标等） |
|
||
|