Coupon 优惠券选择器
引入
代码演示
基础用法
API
CouponCell Props
| 参数 | 说明 | 类型 | 默认值 | |
|---|---|---|---|---|
| title | 单元格标题 | string | 优惠券 | |
| chosen-coupon | 当前选中优惠券的索引 | number / string | -1 | |
| coupons | 可用优惠券列表 | Coupon[] | [] | |
| editable | 能否切换优惠券 | boolean | true | |
| border | 是否显示内边框 | boolean | true | |
| currency | 货币符号 | string | ¥ |
CouponList Props
| 参数 | 说明 | 类型 | 默认值 | |
|---|---|---|---|---|
| v-model | 当前输入的兑换码 | string | - | |
| chosen-coupon | 当前选中优惠券的索引 | number | -1 | |
| coupons | 可用优惠券列表 | Coupon[] | [] | |
| disabled-coupons | 不可用优惠券列表 | Coupon[] | [] | |
| enabled-title | 可用优惠券列表标题 | string | 可使用优惠券 | |
| disabled-title | 不可用优惠券列表标题 | string | 不可使用优惠券 | |
| exchange-button-text | 兑换按钮文字 | string | 兑换 | |
| exchange-button-loading | 是否显示兑换按钮加载动画 | boolean | false | |
| exchange-button-disabled | 是否禁用兑换按钮 | boolean | false | |
| exchange-min-length | 兑换码最小长度 | number | 1 | |
| displayed-coupon-index | 滚动至特定优惠券位置 | number | - | |
| show-close-button | 是否显示列表底部按钮 | boolean | true | |
| close-button-text | 列表底部按钮文字 | string | 不使用优惠 | |
| input-placeholder | 输入框文字提示 | string | 请输入优惠码 | |
| show-exchange-bar | 是否展示兑换栏 | boolean | true | |
| currency | 货币符号 | string | ¥ | |
| empty-image | 列表为空时的占位图 | string | https://img01.yzcdn.cn/vant/coupon-empty.png | |
| show-count | 是否展示可用 / 不可用数量 | boolean | true |
CouponList Events
| 事件名 | 说明 | 回调参数 | |
|---|---|---|---|
| change | 优惠券切换回调 | index, 选中优惠券的索引 | |
| exchange | 兑换优惠券回调 | code, 兑换码 |
Coupon 数据结构
| 键名 | 说明 | 类型 | |
|---|---|---|---|
| id | 优惠券 id | string | |
| name | 优惠券名称 | string | |
| condition | 满减条件 | string | |
| startAt | 卡有效开始时间 (时间戳, 单位毫秒) | number | |
| endAt | 卡失效日期 (时间戳, 单位毫秒) | number | |
| description | 描述信息，优惠券可用时展示 | string | |
| reason | 不可用原因，优惠券不可用时展示 | string | |
| value | 折扣券优惠金额，单位分 | number | |
| valueDesc | 折扣券优惠金额文案 | string | |
| unitDesc | 单位文案 | string | |
| customValidPeriod | 自定义有效时间文案 | string |
CouponList Slots
| 名称 | 说明 | |
|---|---|---|
list-footer v2.12.21 | 优惠券列表底部 | |
disabled-list-footer v2.12.21 | 不可用优惠券列表底部 |
样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考
。
| 名称 | 默认值 | 描述 | |
|---|---|---|---|
| @coupon-margin | 0 @padding-sm @padding-sm | - | |
| @coupon-content-height | 84px | - | |
| @coupon-content-padding | 14px 0 | - | |
| @coupon-background-color | @white | - | |
| @coupon-active-background-color | @active-color | - | |
| @coupon-border-radius | @border-radius-lg | - | |
| @coupon-box-shadow | 0 0 4px rgba(0, 0, 0, 0.1) | - | |
| @coupon-head-width | 96px | - | |
| @coupon-amount-color | @red | - | |
| @coupon-amount-font-size | 30px | - | |
| @coupon-currency-font-size | 40% | - | |
| @coupon-name-font-size | @font-size-md | - | |
| @coupon-disabled-text-color | @gray-6 | - | |
| @coupon-description-padding | @padding-xs @padding-md | - | |
| @coupon-description-border-color | @border-color | - | |
| @coupon-list-background-color | @background-color | - | |
| @coupon-list-field-padding | 5px 0 5px @padding-md | - | |
| @coupon-list-exchange-button-height | 32px | - | |
| @coupon-list-close-button-height | 40px | - | |
| @coupon-list-empty-image-size | 200px | - | |
| @coupon-list-empty-tip-color | @gray-6 | - | |
| @coupon-list-empty-tip-font-size | @font-size-md | - | |
| @coupon-list-empty-tip-line-height | @line-height-md | - | |
| @coupon-cell-selected-text-color | @text-color | - |
效果图：
