最近在使用vant开发项目的时候，发现这个UI框架有个小Bug
Coupon 优惠券选择器
使用指南
import { CouponCell, CouponList } from 'vant'
Vue.use(CouponCell).use(CouponList)
基础用法
<template>
<!-- 优惠券单元格 -->
<van-coupon-cell
:coupons="coupons"
:chosen-coupon="chosenCoupon"
@click="showList = true"
/>
<!-- 优惠券列表 -->
<van-popup v-model="showList" position="bottom">
<van-coupon-list
:coupons="coupons"
:chosen-coupon="chosenCoupon"
:disabled-coupons="disabledCoupons"
@change="onChange"
@exchange="onExchange"
/>
</van-popup>
</template>
<script>
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)
}
}
}
</script>
下面会有奇怪的事情发生
有赞官方文档的效果图
这是我的效果图
特别声明下，我的代码和官方文档的一毛一样，可是我的出现了NaN。
将coupon更改为下面的代码，奇迹出现了
const coupon = {
id: 1, // 优惠券id
discount: 0, // 折扣券 折值 整数 为0不显示折
denominations: 2000, // 优惠券金额 单位分
originCondition: 5000, // 满减规则金额 单位分 为0显示无门槛
value: 12, // 折扣券优惠金额，单位分
name: '新人大礼包', // 优惠券名称
description: '喜欢你就用', // 描述信息
reason: '订单未满200元', // 不可用原因，优惠券不可用时展示
startAt: parseInt(1556337595530 / 1000), // 卡有效开始时间 (时间戳, 单位秒)
endAt: parseInt(1559337595530 / 1000) // 卡失效日期 (时间戳, 单位秒)
}
奇迹般的梦幻
心情激动，记录下梦幻般的奇迹，原理的话，看源码啦
