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.

Basic Usage

Status Management

Supports available, used, expired, and locked states.

States

Selection Mode

Enable selectable mode for checkout pages using v-model:selected.

Selectable Mode

Advanced Features

Enhanced features for modern e-commerce scenarios: badges, progress bars, and rules drawer.

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.

Nuxt Integration

## API

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