解决vant有赞Coupon优惠券选择器组件Bug

最近移动端商城项目整体使用有赞vant组件,在使用Coupon优惠券选择器组件时 按照官方文档做并没有出现一样的效果 发个对比图

官方代码以及展示效果

解决vant有赞Coupon优惠券选择器组件Bug_第1张图片

自己按照官方代码展示的效果

解决vant有赞Coupon优惠券选择器组件Bug_第2张图片

废了半天的时间在源码里找到了原因 更改优惠券

coupons属性如下

解决vant有赞Coupon优惠券选择器组件Bug_第3张图片

coupons: [
                    {
                        id: 1,//优惠券id
                        discount: 0,//折扣券 折值 整数 为0不显示折
                        denominations: 100,//优惠券金额 单位分
                        originCondition: 50, //满减规则金额 单位分 为0显示无门槛
                        value: 12,//折扣券优惠金额,单位分
                        name: '优惠券名称',//优惠券名称
                        description: '描述信息',//描述信息
                        reason: '',	//不可用原因,优惠券不可用时展示
                        startAt: 1489104000,//卡有效开始时间 (时间戳, 单位秒)
                        endAt: 1514592000//卡失效日期 (时间戳, 单位秒)
                    },
                ],

效果就出来了

解决vant有赞Coupon优惠券选择器组件Bug_第4张图片

给那些使用vant组件的人防止踩坑 欢迎交流

你可能感兴趣的:(vue)