"use strict";
|
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
exports.__esModule = true;
|
exports.default = void 0;
|
|
var _utils = require("../utils");
|
|
var _tab = _interopRequireDefault(require("../tab"));
|
|
var _tabs = _interopRequireDefault(require("../tabs"));
|
|
var _field = _interopRequireDefault(require("../field"));
|
|
var _button = _interopRequireDefault(require("../button"));
|
|
var _coupon = _interopRequireDefault(require("../coupon"));
|
|
// Utils
|
// Components
|
var _createNamespace = (0, _utils.createNamespace)('coupon-list'),
|
createComponent = _createNamespace[0],
|
bem = _createNamespace[1],
|
t = _createNamespace[2];
|
|
var EMPTY_IMAGE = 'https://img01.yzcdn.cn/vant/coupon-empty.png';
|
|
var _default2 = createComponent({
|
model: {
|
prop: 'code'
|
},
|
props: {
|
code: String,
|
closeButtonText: String,
|
inputPlaceholder: String,
|
enabledTitle: String,
|
disabledTitle: String,
|
exchangeButtonText: String,
|
exchangeButtonLoading: Boolean,
|
exchangeButtonDisabled: Boolean,
|
exchangeMinLength: {
|
type: Number,
|
default: 1
|
},
|
chosenCoupon: {
|
type: Number,
|
default: -1
|
},
|
coupons: {
|
type: Array,
|
default: function _default() {
|
return [];
|
}
|
},
|
disabledCoupons: {
|
type: Array,
|
default: function _default() {
|
return [];
|
}
|
},
|
displayedCouponIndex: {
|
type: Number,
|
default: -1
|
},
|
showExchangeBar: {
|
type: Boolean,
|
default: true
|
},
|
showCloseButton: {
|
type: Boolean,
|
default: true
|
},
|
showCount: {
|
type: Boolean,
|
default: true
|
},
|
currency: {
|
type: String,
|
default: '¥'
|
},
|
emptyImage: {
|
type: String,
|
default: EMPTY_IMAGE
|
}
|
},
|
data: function data() {
|
return {
|
tab: 0,
|
winHeight: window.innerHeight,
|
currentCode: this.code || ''
|
};
|
},
|
computed: {
|
buttonDisabled: function buttonDisabled() {
|
return !this.exchangeButtonLoading && (this.exchangeButtonDisabled || !this.currentCode || this.currentCode.length < this.exchangeMinLength);
|
},
|
listStyle: function listStyle() {
|
return {
|
height: this.winHeight - (this.showExchangeBar ? 140 : 94) + 'px'
|
};
|
}
|
},
|
watch: {
|
code: function code(_code) {
|
this.currentCode = _code;
|
},
|
currentCode: function currentCode(code) {
|
this.$emit('input', code);
|
},
|
displayedCouponIndex: 'scrollToShowCoupon'
|
},
|
mounted: function mounted() {
|
this.scrollToShowCoupon(this.displayedCouponIndex);
|
},
|
methods: {
|
onClickExchangeButton: function onClickExchangeButton() {
|
this.$emit('exchange', this.currentCode); // auto clear currentCode when not use vModel
|
|
if (!this.code) {
|
this.currentCode = '';
|
}
|
},
|
// scroll to show specific coupon
|
scrollToShowCoupon: function scrollToShowCoupon(index) {
|
var _this = this;
|
|
if (index === -1) {
|
return;
|
}
|
|
this.$nextTick(function () {
|
var _this$$refs = _this.$refs,
|
card = _this$$refs.card,
|
list = _this$$refs.list;
|
/* istanbul ignore next */
|
|
if (list && card && card[index]) {
|
list.scrollTop = card[index].$el.offsetTop - 100;
|
}
|
});
|
},
|
genEmpty: function genEmpty() {
|
var h = this.$createElement;
|
return h("div", {
|
"class": bem('empty')
|
}, [h("img", {
|
"attrs": {
|
"src": this.emptyImage
|
}
|
}), h("p", [t('empty')])]);
|
},
|
genExchangeButton: function genExchangeButton() {
|
var h = this.$createElement;
|
return h(_button.default, {
|
"attrs": {
|
"plain": true,
|
"type": "danger",
|
"text": this.exchangeButtonText || t('exchange'),
|
"loading": this.exchangeButtonLoading,
|
"disabled": this.buttonDisabled
|
},
|
"class": bem('exchange'),
|
"on": {
|
"click": this.onClickExchangeButton
|
}
|
});
|
}
|
},
|
render: function render() {
|
var _this2 = this;
|
|
var h = arguments[0];
|
var coupons = this.coupons,
|
disabledCoupons = this.disabledCoupons;
|
var count = this.showCount ? " (" + coupons.length + ")" : '';
|
var title = (this.enabledTitle || t('enable')) + count;
|
var disabledCount = this.showCount ? " (" + disabledCoupons.length + ")" : '';
|
var disabledTitle = (this.disabledTitle || t('disabled')) + disabledCount;
|
var ExchangeBar = this.showExchangeBar && h("div", {
|
"class": bem('exchange-bar')
|
}, [h(_field.default, {
|
"attrs": {
|
"clearable": true,
|
"border": false,
|
"placeholder": this.inputPlaceholder || t('placeholder'),
|
"maxlength": "20"
|
},
|
"class": bem('field'),
|
"model": {
|
value: _this2.currentCode,
|
callback: function callback($$v) {
|
_this2.currentCode = $$v;
|
}
|
}
|
}), this.genExchangeButton()]);
|
|
var onChange = function onChange(index) {
|
return function () {
|
return _this2.$emit('change', index);
|
};
|
};
|
|
var CouponTab = h(_tab.default, {
|
"attrs": {
|
"title": title
|
}
|
}, [h("div", {
|
"class": bem('list', {
|
'with-bottom': this.showCloseButton
|
}),
|
"style": this.listStyle
|
}, [coupons.map(function (coupon, index) {
|
return h(_coupon.default, {
|
"ref": "card",
|
"key": coupon.id,
|
"attrs": {
|
"coupon": coupon,
|
"currency": _this2.currency,
|
"chosen": index === _this2.chosenCoupon
|
},
|
"nativeOn": {
|
"click": onChange(index)
|
}
|
});
|
}), !coupons.length && this.genEmpty(), this.slots('list-footer')])]);
|
var DisabledCouponTab = h(_tab.default, {
|
"attrs": {
|
"title": disabledTitle
|
}
|
}, [h("div", {
|
"class": bem('list', {
|
'with-bottom': this.showCloseButton
|
}),
|
"style": this.listStyle
|
}, [disabledCoupons.map(function (coupon) {
|
return h(_coupon.default, {
|
"attrs": {
|
"disabled": true,
|
"coupon": coupon,
|
"currency": _this2.currency
|
},
|
"key": coupon.id
|
});
|
}), !disabledCoupons.length && this.genEmpty(), this.slots('disabled-list-footer')])]);
|
return h("div", {
|
"class": bem()
|
}, [ExchangeBar, h(_tabs.default, {
|
"class": bem('tab'),
|
"attrs": {
|
"border": false
|
},
|
"model": {
|
value: _this2.tab,
|
callback: function callback($$v) {
|
_this2.tab = $$v;
|
}
|
}
|
}, [CouponTab, DisabledCouponTab]), h("div", {
|
"class": bem('bottom')
|
}, [h(_button.default, {
|
"directives": [{
|
name: "show",
|
value: this.showCloseButton
|
}],
|
"attrs": {
|
"round": true,
|
"type": "danger",
|
"block": true,
|
"text": this.closeButtonText || t('close')
|
},
|
"class": bem('close'),
|
"on": {
|
"click": onChange(-1)
|
}
|
})])]);
|
}
|
});
|
|
exports.default = _default2;
|
