111 lines
3.1 KiB
JavaScript
111 lines
3.1 KiB
JavaScript
import { createNamespace } from '../utils';
|
|
import { RED } from '../utils/constant';
|
|
import { padZero } from '../utils/format/string';
|
|
import Checkbox from '../checkbox';
|
|
|
|
var _createNamespace = createNamespace('coupon'),
|
|
createComponent = _createNamespace[0],
|
|
bem = _createNamespace[1],
|
|
t = _createNamespace[2];
|
|
|
|
function formatTimeStamp(timeStamp) {
|
|
// compatible when the timestamp is seconds
|
|
if (timeStamp < Math.pow(10, 12)) {
|
|
return timeStamp * 1000;
|
|
}
|
|
|
|
return +timeStamp;
|
|
}
|
|
|
|
function getDate(timeStamp) {
|
|
var date = new Date(formatTimeStamp(timeStamp));
|
|
return date.getFullYear() + "." + padZero(date.getMonth() + 1) + "." + padZero(date.getDate());
|
|
}
|
|
|
|
function formatDiscount(discount) {
|
|
return (discount / 10).toFixed(discount % 10 === 0 ? 0 : 1);
|
|
}
|
|
|
|
function formatAmount(amount) {
|
|
return (amount / 100).toFixed(amount % 100 === 0 ? 0 : amount % 10 === 0 ? 1 : 2);
|
|
}
|
|
|
|
export default createComponent({
|
|
props: {
|
|
coupon: Object,
|
|
chosen: Boolean,
|
|
disabled: Boolean,
|
|
currency: {
|
|
type: String,
|
|
default: '¥'
|
|
}
|
|
},
|
|
computed: {
|
|
validPeriod: function validPeriod() {
|
|
var _this$coupon = this.coupon,
|
|
startAt = _this$coupon.startAt,
|
|
endAt = _this$coupon.endAt,
|
|
customValidPeriod = _this$coupon.customValidPeriod;
|
|
return customValidPeriod || getDate(startAt) + " - " + getDate(endAt);
|
|
},
|
|
faceAmount: function faceAmount() {
|
|
var coupon = this.coupon;
|
|
|
|
if (coupon.valueDesc) {
|
|
return coupon.valueDesc + "<span>" + (coupon.unitDesc || '') + "</span>";
|
|
}
|
|
|
|
if (coupon.denominations) {
|
|
var denominations = formatAmount(coupon.denominations);
|
|
return "<span>" + this.currency + "</span> " + denominations;
|
|
}
|
|
|
|
if (coupon.discount) {
|
|
return t('discount', formatDiscount(coupon.discount));
|
|
}
|
|
|
|
return '';
|
|
},
|
|
conditionMessage: function conditionMessage() {
|
|
var condition = formatAmount(this.coupon.originCondition);
|
|
return condition === '0' ? t('unlimited') : t('condition', condition);
|
|
}
|
|
},
|
|
render: function render() {
|
|
var h = arguments[0];
|
|
var coupon = this.coupon,
|
|
disabled = this.disabled;
|
|
var description = disabled && coupon.reason || coupon.description;
|
|
return h("div", {
|
|
"class": bem({
|
|
disabled: disabled
|
|
})
|
|
}, [h("div", {
|
|
"class": bem('content')
|
|
}, [h("div", {
|
|
"class": bem('head')
|
|
}, [h("h2", {
|
|
"class": bem('amount'),
|
|
"domProps": {
|
|
"innerHTML": this.faceAmount
|
|
}
|
|
}), h("p", {
|
|
"class": bem('condition')
|
|
}, [this.coupon.condition || this.conditionMessage])]), h("div", {
|
|
"class": bem('body')
|
|
}, [h("p", {
|
|
"class": bem('name')
|
|
}, [coupon.name]), h("p", {
|
|
"class": bem('valid')
|
|
}, [this.validPeriod]), !this.disabled && h(Checkbox, {
|
|
"attrs": {
|
|
"size": 18,
|
|
"value": this.chosen,
|
|
"checkedColor": RED
|
|
},
|
|
"class": bem('corner')
|
|
})])]), description && h("p", {
|
|
"class": bem('description')
|
|
}, [description])]);
|
|
}
|
|
}); |