Install

import { createApp } from 'vue';
import { CouponCell, CouponList } from 'vant';

const app = createApp();
app.use(CouponCell);
app.use(CouponList);

Usage

Basic Usage

<!-- Coupon Cell -->
<van-coupon-cell
  :coupons="coupons"
  :chosen-coupon="chosenCoupon"
  @click="showList = true"
/>
<!-- Coupon List -->
<van-popup
  v-model:show="showList"
  round
  position="bottom"
  style="height: 90%; padding-top: 4px;"
>
  <van-coupon-list
    :coupons="coupons"
    :chosen-coupon="chosenCoupon"
    :disabled-coupons="disabledCoupons"
    @change="onChange"
    @exchange="onExchange"
  />
</van-popup>

import { ref } from 'vue';

export default {
  setup() {
    const coupon = {
      available: 1,
      originCondition: 0,
      reason: '',
      value: 150,
      name: 'Coupon name',
      startAt: 1489104000,
      endAt: 1514592000,
      valueDesc: '1.5',
      unitDesc: '\u5143',
    };

    const coupons = ref([coupon]);
    const showList = ref(false);
    const chosenCoupon = ref(-1);

    const onChange = (index) => {
      showList.value = false;
      chosenCoupon.value = index;
    };
    const onExchange = (code) => {
      coupons.value.push(coupon);
    };

    return {
      coupons,
      showList,
      onChange,
      onExchange,
      chosenCoupon,
      disabledCoupons: [coupon],
    };
  },
};

API

CouponCell Props

Attribute	Description	Type	Default
title	Cell title	string	`Coupon`
chosen-coupon	Index of chosen coupon	number \| string	`-1`
coupons	Coupon list	Coupon[]	`[]`
editable	Cell editable	boolean	`true`
border	Whether to show inner border	boolean	`true`
currency	Currency symbol	string	`\xA5`

CouponList Props

Attribute	Description	Type	Default
v-model	Current exchange code	string	-
chosen-coupon	Index of chosen coupon	number	`-1`
coupons	Coupon list	Coupon[]	`[]`
disabled-coupons	Disabled coupon list	Coupon[]	`[]`
enabled-title	Title of coupon list	string	`Available`
disabled-title	Title of disabled coupon list	string	`Unavailable`
exchange-button-text	Exchange button text	string	`Exchange`
exchange-button-loading	Whether to show loading in exchange button	boolean	`false`
exchange-button-disabled	Whether to disable exchange button	boolean	`false`
exchange-min-length	Min length to enable exchange button	number	`1`
displayed-coupon-index	Index of displayed coupon	number	-
close-button-text	Close button text	string	`Close`
input-placeholder	Input placeholder	string	`Coupon code`
currency	Currency symbol	string	`\xA5`
empty-image	Placeholder image when list is empty	string	-
show-count	Whether to show coupon count in tab title	boolean	`true`

CouponList Events

Event	Description	Arguments
change	Emitted when chosen coupon changed	index: index of chosen coupon
exchange	Emitted when exchanging coupon	code: exchange code

CouponList Slots

Name	Description
list-footer `v3.0.18`	Coupon list bottom
disabled-list-footer `v3.0.18`	Unavailable coupons list bottom

Data Structure of Coupon

Key	Description	Type
id	Id	string
name	Name	string
condition	Condition	string
startAt	Start time (Timestamp, unit second)	number
endAt	End time (Timestamp, unit second)	number
description	Description	string
reason	Unavailable reason	string
value	Value	number
valueDesc	Value Text	string
unitDesc	Unit Text	string

Types

The component exports the following type definitions:

import type { CouponCellProps, CouponListProps } from 'vant';

Theming

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

Name	Default Value	Description
--van-coupon-margin	0 var(--van-padding-sm) var(--van-padding-sm)	-
--van-coupon-content-height	84px	-
--van-coupon-content-padding	14px 0	-
--van-coupon-content-text-color	var(--van-text-color)	-
--van-coupon-background-color	var(--van-background-color-light)	-
--van-coupon-active-background-color	var(--van-active-color)	-
--van-coupon-border-radius	var(--van-border-radius-lg)	-
--van-coupon-box-shadow	0 0 4px rgba(0, 0, 0, 0.1)	-
--van-coupon-head-width	96px	-
--van-coupon-amount-color	var(--van-danger-color)	-
--van-coupon-amount-font-size	30px	-
--van-coupon-currency-font-size	40%	-
--van-coupon-name-font-size	var(--van-font-size-md)	-
--van-coupon-disabled-text-color	var(--van-text-color-2)	-
--van-coupon-description-padding	var(--van-padding-xs) var(--van-padding-md)	-
--van-coupon-description-border-color	var(--van-border-color)	-
--van-coupon-corner-checkbox-icon-color	var(--van-danger-color)	-
--van-coupon-list-background-color	var(--van-background-color)	-
--van-coupon-list-field-padding	5px 0 5px var(--van-padding-md)	-
--van-coupon-list-exchange-button-height	32px	-
--van-coupon-list-close-button-height	40px	-
--van-coupon-list-empty-tip-color	var(--van-text-color-2)	-
--van-coupon-list-empty-tip-font-size	var(--van-font-size-md)	-
--van-coupon-list-empty-tip-line-height	var(--van-line-height-md)	-
--van-coupon-cell-selected-text-color	var(--van-text-color)	-

Coupon

Intro