codecamp

Vant Coupon 优惠券选择器

引入

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

Vue.use(CouponCell);
Vue.use(CouponList);

代码演示

基础用法

<!-- 优惠券单元格 -->
<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

参数说明类型默认值
title单元格标题string优惠券
chosen-coupon当前选中优惠券的索引number-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 v2.1.0列表为空时的占位图stringhttps://img.yzcdn.cn/vant/coupon-empty.png
show-count v2.3.0是否展示可用 / 不可用数量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


Vant Contact 联系人
Vant GoodsAction 商品导航
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }