Coupon

优惠券，包括京券、东券、运费券、不可用券，支持领取、选中事件。

示例
优惠券展示：京券,立即使用
  1. <nut-coupon
  2.   :datas="beanData"
  3.   @immediate-use="immediateUse">
  4. </nut-coupon>

  1. export default {
  2.     data(){
  3.         return{
  4.             beanData: {
  5.                 'id': 1,
  6.                 'discount': 100,
  7.                 'quota': 400,
  8.                 'couponType': 0,
  9.                 'couponLimitInfo': '限自营好丽友商品',
  10.                 'beginTime': '2015.07.07',
  11.                 'endTime': '2015.07.07',
  12.                 'isUsed': true
  13.             }
  14.         }
  15.     },
  16.     methods:{
  17.         immediateUse(datas){
  18.             console.log('立即使用,数据如下：' + JSON.stringify(datas));
  19.         }
  20.     }
  21. }

优惠券展示：东券,立即使用
  1. <nut-coupon
  2.   :datas="beanData"
  3.   @immediate-use="immediateUse">
  4. </nut-coupon>

  1. export default {
  2.     data(){
  3.         return{
  4.             beanData: {
  5.                   'id': 2,
  6.                   'discount': 10,
  7.                   'quota': 60,
  8.                   'couponType': 1,
  9.                   'couponLimitInfo': '限自营盼盼品牌部分饼干类商品',
  10.                   'beginTime': '2015.07.07',
  11.                   'endTime': '2015.07.07',
  12.                   'isUsed': true
  13.               }
  14.         }
  15.     },
  16.     methods:{
  17.         immediateUse(datas){
  18.             console.log('立即使用,数据如下：' + JSON.stringify(datas));
  19.         }
  20.     }
  21. }

优惠券展示：运费券,立即使用
  1. <nut-coupon
  2.   :datas="beanData"
  3.   @immediate-use="immediateUse">
  4. </nut-coupon>

  1. export default {
  2.     data(){
  3.         return{
  4.             beanData: {
  5.                   'id': 3,
  6.                   'discount': 10,
  7.                   'quota': 400,
  8.                   'couponType': 2,
  9.                   'couponLimitInfo': '限自营好丽友、盼盼品牌部分饼干类商品',
  10.                   'beginTime': '2015.07.07',
  11.                   'endTime': '2015.07.07',
  12.                   'isUsed': true
  13.               }
  14.         }
  15.     },
  16.     methods:{
  17.         immediateUse(datas){
  18.             console.log('立即使用,数据如下：' + JSON.stringify(datas));
  19.         }
  20.     }
  21. }

优惠券展示：不可用券
  1. <nut-coupon
  2.   :datas="beanData"
  3.   @immediate-use="immediateUse">
  4. </nut-coupon>

  1. export default {
  2.     data(){
  3.         return{
  4.             beanData: {
  5.                   'id': 4,
  6.                   'discount': 10,
  7.                   'quota': 400,
  8.                   'couponType': 1,
  9.                   'couponLimitInfo': '限自营好丽友、盼盼品牌部分饼干类商品',
  10.                   'beginTime': '2015.07.07',
  11.                   'endTime': '2015.07.07',
  12.                   'isUsed': false
  13.               }
  14.         }
  15.     },
  16.     methods:{
  17.         immediateUse(datas){
  18.             console.log('立即使用,数据如下：' + JSON.stringify(datas));
  19.         }
  20.     }
  21. }

优惠券展示：切换状态
  1. <nut-coupon
  2.   :datas="beanData"
  3.   :is-switch="true"
  4.   @switch-use="switchUse">
  5. </nut-coupon>

  1. export default {
  2.     data(){
  3.         return{
  4.             beanData: {
  5.                   'id': 3,
  6.                   'discount': 10,
  7.                   'quota': 400,
  8.                   'couponType': 2,
  9.                   'couponLimitInfo': '限自营好丽友商品',
  10.                   'beginTime': '2015.07.07',
  11.                   'endTime': '2015.07.07',
  12.                   'isUsed': true
  13.               }
  14.         }
  15.     },
  16.     methods:{
  17.         switchUse(datas, isChecked) {
  18.             console.log('是否选中：' + isChecked);
  19.         }
  20.     }
  21. }

优惠券展示：有活动角标
  1. <nut-coupon
  2.   :datas="beanData"
  3.   :is-switch="true"
  4.   @switch-use="switchUse"
  5.   :is-badge="true">
  6. </nut-coupon>

  1. export default {
  2.     data(){
  3.         return{
  4.             beanData: {
  5.                   'id': 3,
  6.                   'discount': 10,
  7.                   'quota': 400,
  8.                   'couponType': 2,
  9.                   'couponLimitInfo': '限自营好丽友商品',
  10.                   'beginTime': '2015.07.07',
  11.                   'endTime': '2015.07.07',
  12.                   'isUsed': true
  13.               }
  14.         }
  15.     },
  16.     methods:{
  17.         switchUse(datas, isChecked) {
  18.             console.log('是否选中：' + isChecked);
  19.         }
  20.     }
  21. }

Props
参数说明类型默认值可选值
datas券数据Object——
datas.id优惠券IdNumber——
datas.discount折扣金额Number——
datas.quota满额值Number——
datas.couponType0京券 1东券 2免运费券Number——
datas.couponLimitInfo该券不可使用或者可以使用的说明String——
datas.beginTime优惠券使用的起始日期String——
datas.endTime优惠券使用的截止日期String——
datas.isUsed是否可用Boolean——
isSwitch是否切换到选择功能Booleanfalsetrue/false
isBadge是否有角标Booleanfalsetrue/false
Events
事件名说明回调参数
immediate-use点击立即使用时触发返回当前优惠券数据
switch-use选中或不选中时触发返回当前优惠券数据和是否选中状态