Introduced
import Vue from 'vue';
import { CouponCell, CouponList } from 'vant';
Vue.use(CouponCell);
Vue.use(CouponList);
Code demo
Basic usage
<van-coupon-cell
:coupons="coupons"
:chosen-coupon="chosenCoupon"
@click="showList = true"
/>
<van-popup
v-model="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>
const coupon = {
available: 1,
condition: '无使用门槛\n最多优惠12元',
reason: '',
value: 150,
name: '优惠券名称',
startAt: 1489104000,
endAt: 1514592000,
valueDesc: '1.5',
unitDesc: '元'
};
export default {
data() {
return {
chosenCoupon: -1,
coupons: [coupon],
disabledCoupons: [coupon]
}
},
methods: {
onChange(index) {
this.showList = false;
this.chosenCoupon = index;
},
onExchange(code) {
this.coupons.push(coupon);
}
}
}
Api
CouponCell Props
Parameters
|
Description
|
Type
|
The default
|
title
|
The cell title
|
string
|
优惠券
|
chosen-coupon
|
The index of the coupon is currently selected
|
number
|
-1
|
coupons
|
A list of available coupons
|
Coupon[]
|
[]
|
editable
|
Can I switch coupons?
|
boolean
|
true
|
border
|
Whether to display the inner border
|
boolean
|
true
|
currency
|
Currency symbol
|
string
|
¥
|
CouponList Props
Parameters
|
Description
|
Type
|
The default
|
v-model
|
The currently entered redemption code
|
string
|
-
|
chosen-coupon
|
The index of the coupon is currently selected
|
number
|
-1
|
coupons
|
A list of available coupons
|
Coupon[]
|
[]
|
disabled-coupons
|
A list of unavailable coupons
|
Coupon[]
|
[]
|
enabled-title
|
The title of the list of available coupons
|
string
|
可使用优惠券
|
disabled-title
|
The coupon list title is not available
|
string
|
不可使用优惠券
|
exchange-button-text
|
Redeem the button text
|
string
|
兑换
|
exchange-button-loading
|
Whether to display a redemption button load animation
|
boolean
|
false
|
exchange-button-disabled
|
Whether to disable the redemption button
|
boolean
|
false
|
exchange-min-length
|
The minimum length of the redemption code
|
number
|
1
|
displayed-coupon-index
|
Scroll to a specific coupon location
|
number
|
-
|
show-close-button
|
Whether to display the button at the bottom of the list
|
boolean
|
true
|
close-button-text
|
The text of the button at the bottom of the list
|
string
|
不使用优惠
|
input-placeholder
|
Enter the box text prompt
|
string
|
请输入优惠码
|
show-exchange-bar
|
Whether to display the redemption bar
|
boolean
|
true
|
currency
|
Currency symbol
|
string
|
¥
|
empty-image
v2.1.0
|
The placemap when the list is empty
|
string
|
https://img.yzcdn.cn/vant/coupon-empty.png
|
show-count
v2.3.0
|
Whether to show the number of available/unavailable
|
boolean
|
true
|
CouponList Events
The name of the event
|
Description
|
Callback parameters
|
change
|
Coupon switch callbacks
|
index, select the index of the coupon
|
exchange
|
Redeem coupon callbacks
|
code, redemption code
|
Coupon data structure
The key name
|
Description
|
Type
|
Id
|
Coupon id
|
string
|
name
|
The name of the coupon
|
string
|
condition
|
Full minus condition
|
string
|
startAt
|
Card valid start time (timestamp, in seconds)
|
number
|
endAt
|
Card expiration date (timestamp, in seconds)
|
number
|
description
|
Description information, which is displayed when coupons are available
|
string
|
reason
|
Why not available, coupons are displayed when they are not available
|
string
|
value
|
Discount coupon coupon amount, unit points
|
number
|
valueDesc
|
Discount coupon coupon amount document
|
string
|
unitDesc
|
Unit paper
|
string
|