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