美文网首页派大星爱吃小鱼干
解决vant有赞Coupon优惠券选择器组件Bug

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

作者: 程序猿阿峰 | 来源:发表于2019-04-27 15:34 被阅读0次

最近在使用vant开发项目的时候,发现这个UI框架有个小Bug


vant有赞Coupon优惠券选择器

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) // 卡失效日期 (时间戳, 单位秒)
}
奇迹般的梦幻

心情激动,记录下梦幻般的奇迹,原理的话,看源码啦

相关文章

网友评论

    本文标题:解决vant有赞Coupon优惠券选择器组件Bug

    本文链接:https://www.haomeiwen.com/subject/oifknqtx.html