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傳過來，原來的數據可以在引用頁面或者組件中進行數據結構轉換，頁面直接引用就好了。