Coupon 优惠券选择器

引入

  1. import Vue from 'vue';
  2. import { CouponCell, CouponList } from 'vant';
  3. Vue.use(CouponCell);
  4. Vue.use(CouponList);

代码演示

基础用法

  1. <!-- 优惠券单元格 -->
  2. <van-coupon-cell
  3. :coupons="coupons"
  4. :chosen-coupon="chosenCoupon"
  5. @click="showList = true"
  6. />
  7. <!-- 优惠券列表 -->
  8. <van-popup
  9. v-model="showList"
  10. round
  11. position="bottom"
  12. style="height: 90%; padding-top: 4px;"
  13. >
  14. <van-coupon-list
  15. :coupons="coupons"
  16. :chosen-coupon="chosenCoupon"
  17. :disabled-coupons="disabledCoupons"
  18. @change="onChange"
  19. @exchange="onExchange"
  20. />
  21. </van-popup>
  1. const coupon = {
  2. available: 1,
  3. condition: '无使用门槛\n最多优惠12元',
  4. reason: '',
  5. value: 150,
  6. name: '优惠券名称',
  7. startAt: 1489104000,
  8. endAt: 1514592000,
  9. valueDesc: '1.5',
  10. unitDesc: '元',
  11. };
  12. export default {
  13. data() {
  14. return {
  15. chosenCoupon: -1,
  16. coupons: [coupon],
  17. disabledCoupons: [coupon],
  18. };
  19. },
  20. methods: {
  21. onChange(index) {
  22. this.showList = false;
  23. this.chosenCoupon = index;
  24. },
  25. onExchange(code) {
  26. this.coupons.push(coupon);
  27. },
  28. },
  29. };

API

CouponCell Props

参数说明类型默认值
title单元格标题string优惠券
chosen-coupon当前选中优惠券的索引number | string-1
coupons可用优惠券列表Coupon[][]
editable能否切换优惠券booleantrue
border是否显示内边框booleantrue
currency货币符号string¥

CouponList Props

参数说明类型默认值
v-model当前输入的兑换码string-
chosen-coupon当前选中优惠券的索引number-1
coupons可用优惠券列表Coupon[][]
disabled-coupons不可用优惠券列表Coupon[][]
enabled-title可用优惠券列表标题string可使用优惠券
disabled-title不可用优惠券列表标题string不可使用优惠券
exchange-button-text兑换按钮文字string兑换
exchange-button-loading是否显示兑换按钮加载动画booleanfalse
exchange-button-disabled是否禁用兑换按钮booleanfalse
exchange-min-length兑换码最小长度number1
displayed-coupon-index滚动至特定优惠券位置number-
show-close-button是否显示列表底部按钮booleantrue
close-button-text列表底部按钮文字string不使用优惠
input-placeholder输入框文字提示string请输入优惠码
show-exchange-bar是否展示兑换栏booleantrue
currency货币符号string¥
empty-image列表为空时的占位图stringhttps://img01.yzcdn.cn/vant/coupon-empty.png
show-count是否展示可用 / 不可用数量booleantrue

CouponList Events

事件名说明回调参数
change优惠券切换回调index, 选中优惠券的索引
exchange兑换优惠券回调code, 兑换码

Coupon 数据结构

键名说明类型
id优惠券 idstring
name优惠券名称string
condition满减条件string
startAt卡有效开始时间 (时间戳, 单位秒)number
endAt卡失效日期 (时间戳, 单位秒)number
description描述信息,优惠券可用时展示string
reason不可用原因,优惠券不可用时展示string
value折扣券优惠金额,单位分number
valueDesc折扣券优惠金额文案string
unitDesc单位文案string

样式变量

组件提供了下列 Less 变量,可用于自定义样式,使用方法请参考主题定制

名称默认值描述
@coupon-margin0 @padding-sm @padding-sm-
@coupon-content-height84px-
@coupon-content-padding14px 0-
@coupon-background-color@white-
@coupon-active-background-color@active-color-
@coupon-border-radius@border-radius-lg-
@coupon-box-shadow0 0 4px rgba(0, 0, 0, 0.1)-
@coupon-head-width96px-
@coupon-amount-color@red-
@coupon-amount-font-size30px-
@coupon-currency-font-size40%-
@coupon-name-font-size@font-size-md-
@coupon-disabled-text-color@gray-6-
@coupon-description-padding@padding-xs @padding-md-
@coupon-description-border-color@border-color-
@coupon-list-background-color@background-color-
@coupon-list-field-padding5px 0 5px @padding-md-
@coupon-list-exchange-button-height32px-
@coupon-list-close-button-height40px-
@coupon-list-empty-image-size200px-
@coupon-list-empty-tip-color@gray-6-
@coupon-list-empty-tip-font-size@font-size-md-
@coupon-list-empty-tip-line-height@line-height-md-
@coupon-cell-selected-text-color@text-color-

Coupon 优惠券 - 图1