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

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

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

示例代码：

 1 <template>
 2   <div>
 3     
 4     <van-coupon-cell :coupons="coupons" :chosen-coupon="chosenCoupon" @click="showList = true" />
 5 
 6     
 7     <van-popup v-model="showList" position="bottom">
 8       <van-coupon-list :coupons="coupons" :chosen-coupon="chosenCoupon" :disabled-coupons="disabledCoupons" @change="onChange" @exchange="onExchange" />
 9     van-popup>
10   div>
11 template>
12 <script>
13 const coupon = {
14   id: '1', // 优惠券id
15   discount: 0, // 折扣券 折值 整数 为0不显示折
16   denominations: 2000, // 优惠券金额 单位分
17   originCondition: 5000, // 满减规则金额 单位分 为0显示无门槛
18   value: 12, // 折扣券优惠金额，单位分
19   name: '新人大礼包', // 优惠券名称
20   description: '喜欢你就用', // 描述信息
21   reason: '订单未满200元', // 不可用原因，优惠券不可用时展示
22   startAt: parseInt(1556337595530 / 1000), // 卡有效开始时间 (时间戳, 单位秒)
23   endAt: parseInt(1559337595530 / 1000) // 卡失效日期 (时间戳, 单位秒)
24 }
25 
26 import { CouponCell, CouponList,Popup  } from 'vant';
27 export default {
28   components: {
29     [CouponCell.name]: CouponCell,
30     [CouponList.name]: CouponList,
31     [Popup.name]: Popup
32   },
33   data() {
34     return {
35       showList:false,
36       chosenCoupon: -1,
37       coupons: [coupon],
38       disabledCoupons: [coupon]
39     };
40   },
41 
42   methods: {
43     onChange(index) {
44       this.showList = false;
45       this.chosenCoupon = index;
46     },
47     onExchange(code) {
48       this.coupons.push(coupon);
49     }
50   }
51 };
52 script>

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