Coupon Card
Standard component for displaying coupon information. It supports cutout variants, status display, optional selection mode, and e-commerce style badge, progress, and rules sections.
Basic Usage
Displays core coupon info. Supports circle (default), indent, and scallop variants.
¥50
Min spend 500
Store-wide Coupon
Applicable to all items
Basic Usage
Status Management
Supports available, used, expired, and locked states.
¥100
Min spend 1000
Used Coupon
Used
¥20
Min spend 200
Expired Coupon
Expired
States
Selection Mode
Enable selectable mode for checkout pages using v-model:selected.
¥30
Min spend 300
Selectable Coupon
Selected: No
Selectable Mode
Advanced Features
Enhanced features for modern e-commerce scenarios: badges, progress bars, and rules drawer.
¥100
Min spend 1000
Flash Double
Special
¥50
No Threshold
Limited Subsidy
Claimed 85%
¥30
Min spend 300
Super VIP Coupon
Usage Rules
Advanced Features
Usage in Nuxt
YhCouponCard works directly in Nuxt 3/4 projects. When yh-ui/nuxt is enabled, the component can be used without manual registration.
¥10
No threshold
Nuxt Coupon
Nuxt Integration
Props
| Property | Description | Type | Default |
|---|---|---|---|
| title | Coupon title | string | '' |
| description | Description text | string | '' |
| amount | Amount value | string | number | '' |
| symbol | Currency symbol | string | '¥' |
| threshold | Minimum spend | string | number | '' |
| valid-period | Validity period | string | '' |
| status | State | 'available' | 'used' | 'expired' | 'locked' | 'available' |
| variant | Cutout variant | 'circle' | 'indent' | 'scallop' | 'circle' |
| selectable | Enable selectable mode | boolean | false |
| selected | Selected state (v-model) | boolean | false |
| action-text | Action button text | string | '' |
| badge | Badge text | string | '' |
| badge-type | Badge color type | 'danger' | 'warning' | 'primary' | 'success' | 'danger' |
| percent | Progress percentage (0-100) | number | undefined |
| percent-text | Tip text near progress bar | string | '' |
| rules | Usage rules text at bottom | string | '' |
| rule-title | Custom title for rules section | string | '' |
| disabled | Whether disabled styling is applied | boolean | false |
| theme-overrides | Theme variable overrides | Record<string, string> | {} |
Events
| Event Name | Description | Parameters |
|---|---|---|
| click | Fired when card is clicked | (e: MouseEvent) => void |
| action | Fired when button is clicked | (e: MouseEvent) => void |
| update:selected | Selected state change event | (val: boolean) => void |
Slots
| Slot | Description | Parameters |
|---|---|---|
| title | Custom coupon title | - |
| description | Custom description area | - |
| action | Custom action area | - |
| badge | Custom badge content | - |
| seal | Custom status seal | { status: CouponStatus } |
| rules | Custom rules section | - |
Expose
This component does not expose public instance methods or properties.
Theme Variables
| Variable | Description | Default |
|---|---|---|
--yh-coupon-bg | Card background color | var(--yh-bg-color-overlay) |
--yh-coupon-primary-color | Accent color (amount/button) | var(--yh-color-primary) |
--yh-coupon-amount-size | Amount font size | 28px |
Type Exports
| Name | Description |
|---|---|
YhCouponCardProps | Component props type |
YhCouponCardEmits | Component emits type |
YhCouponCardSlots | Component slots type |
YhCouponStatus | Coupon status union type |
YhCouponCardInstance | Component instance type |