Coupon 优惠券选择器

使用指南

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

代码演示

基础用法

  1. <!-- 优惠券单元格 -->
  2. <van-coupon-cell
  3.   :coupons="coupons"
  4.   :chosen-coupon="chosenCoupon"
  5.   @click="showList = true"
  6. />
  8. <!-- 优惠券列表 -->
  9. <van-popup v-model="showList" position="bottom">
  10.   <van-coupon-list
  11.     :coupons="coupons"
  12.     :chosen-coupon="chosenCoupon"
  13.     :disabled-coupons="disabledCoupons"
  14.     @change="onChange"
  15.     @exchange="onExchange"
  16.   />
  17. </van-popup>
  1. const coupon = {
  2.   available: 1,
  3.   discount: 0,
  4.   denominations: 150,
  5.   origin_condition: 0,
  6.   reason: '',
  7.   value: 150,
  8.   name: '优惠券名称',
  9.   start_at: 1489104000,
  10.   end_at: 1514592000
  11. };
  13. export default {
  14.   data() {
  15.     return {
  16.       chosenCoupon: -1,
  17.       coupons: [coupon],
  18.       disabledCoupons: [coupon]
  19.     }
  20.   },
  22.   methods: {
  23.     onChange(index) {
  24.       this.showList = false;
  25.       this.chosenCoupon = index;
  26.     },
  27.     onExchange(code) {
  28.       this.coupons.push(coupon);
  29.     }
  30.   }
  31. }

CouponCell API

参数 说明 类型 默认值
title 单元格标题 String 优惠券码
chosen-coupon 当前选中优惠券的索引 Number -1
coupons 可用优惠券列表 Array []
editable 能否切换优惠券 Boolean true

CouponList API

参数 说明 类型 默认值
v-model 当前输入的兑换码 String -
chosen-coupon 当前选中优惠券的索引 Number -1
coupons 可用优惠券列表 Array []
disabled-coupons 不可用优惠券列表 Array []
exchange-button-text 兑换按钮文字 String 兑换
exchange-button-loading 是否在兑换按钮上显示加载动画 Boolean false
exchange-button-disabled 是否禁用兑换按钮 Boolean false
exchange-min-length 兑换码最小长度 Number 1
displayed-coupon-index 滚动至特定优惠券位置 Number -
show-close-button 是否显示列表底部按钮 Boolean true
close-button-text 列表底部按钮文字 String 不使用优惠
disabled-list-title 不可用券列表标题 String 不可用优惠
input-placeholder 输入框文字提示 String 请输入优惠码
show-exchange-bar 是否展示兑换栏 Boolean true

CouponList Event

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

数据格式

优惠券字段说明

key 说明 类型
id 优惠券 id String
name 优惠券名称 String
discount 折扣（0为满减券）88=>8.8折 Number
denominations 面值（0为折扣券）单位分 Number
origin_condition 满减条件（0为无门槛，满XX元可用）单位分 Number
start_at 卡有效开始时间 (时间戳, 单位秒) Number
end_at 卡失效日期 (时间戳, 单位秒) Number
reason 不可用原因 String
value 订单优惠金额，单位分 Number

Contact - 联系人

GoodsAction - 商品页行动点

原文:

https://youzan.github.io/vant/#/zh-CN/coupon-list