vant coupon组件使用完整demo不坑人

前言：用到优惠券选择组件，vant官网demo很不友好。百度了下，不少网友都是片段，都是做技术的，就不能贴个完整的么？给个demo让别人一个劲儿的找bug完善。

这里就直接贴完整demo了，组件注册全部局部注册。

 

 

示例代码：

<template>
  <div>
    <!-- 优惠券单元格 -->
    <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>
  </div>
</template>
<script>
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) // 卡失效日期 (时间戳, 单位秒)
}

import { CouponCell, CouponList,Popup  } from 'vant';
export default {
  components: {
    [CouponCell.name]: CouponCell,
    [CouponList.name]: CouponList,
    [Popup.name]: Popup
  },
  data() {
    return {
      showList:false,
      chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon]
    };
  },

  methods: {
    onChange(index) {
      this.showList = false;
      this.chosenCoupon = index;
    },
    onExchange(code) {
      this.coupons.push(coupon);
    }
  }
};
</script>

注：其中的 coupon  可以改成pros传过来，原来的数据可以在引用页面或者组件中进行数据结构转换，页面直接引用就好了。