blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

refactor(Coupon): refactor with composition api

Browse Source
This commit is contained in:
chenjiahan 2020-09-03 20:47:19 +08:00
parent 772aecad05
commit ec5a759f68
1 changed files with 39 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
src/coupon/index.js
View File

@ -1,3 +1,4 @@
import { computed } from 'vue';
import { createNamespace } from '../utils';
import { RED } from '../utils/constant';
import { padZero } from '../utils/format/string';
@ -33,14 +34,14 @@ export default createComponent({
},
},
computed: {
validPeriod() {
const { startAt, endAt } = this.coupon;
setup(props) {
const validPeriod = computed(() => {
const { startAt, endAt } = props.coupon;
return `${getDate(startAt)} - ${getDate(endAt)}`;
},
});
faceAmount() {
const { coupon } = this;
const faceAmount = computed(() => {
const { coupon, currency } = props;
if (coupon.valueDesc) {
return [coupon.valueDesc, <span>{coupon.unitDesc || ''}</span>];
@ -48,7 +49,7 @@ export default createComponent({
if (coupon.denominations) {
const denominations = formatAmount(coupon.denominations);
return [<span>{this.currency}</span>, ` ${denominations}`];
return [<span>{currency}</span>, ` ${denominations}`];
}
if (coupon.discount) {
@ -56,42 +57,42 @@ export default createComponent({
}
return '';
},
});
conditionMessage() {
const condition = formatAmount(this.coupon.originCondition);
const conditionMessage = computed(() => {
const condition = formatAmount(props.coupon.originCondition);
return condition === '0' ? t('unlimited') : t('condition', condition);
},
},
});
render() {
const { coupon, disabled } = this;
const description = (disabled && coupon.reason) || coupon.description;
return () => {
const { chosen, coupon, disabled } = props;
const description = (disabled && coupon.reason) || coupon.description;
return (
<div class={bem({ disabled })}>
<div class={bem('content')}>
<div class={bem('head')}>
<h2 class={bem('amount')}>{this.faceAmount}</h2>
<p class={bem('condition')}>
{this.coupon.condition || this.conditionMessage}
</p>
</div>
<div class={bem('body')}>
<p class={bem('name')}>{coupon.name}</p>
<p class={bem('valid')}>{this.validPeriod}</p>
{!this.disabled && (
<Checkbox
size={18}
class={bem('corner')}
modelValue={this.chosen}
checkedColor={RED}
/>
)}
return (
<div class={bem({ disabled })}>
<div class={bem('content')}>
<div class={bem('head')}>
<h2 class={bem('amount')}>{faceAmount.value}</h2>
<p class={bem('condition')}>
{coupon.condition || conditionMessage.value}
</p>
</div>
<div class={bem('body')}>
<p class={bem('name')}>{coupon.name}</p>
<p class={bem('valid')}>{validPeriod.value}</p>
{!disabled && (
<Checkbox
size={18}
class={bem('corner')}
modelValue={chosen}
checkedColor={RED}
/>
)}
</div>
</div>
{description && <p class={bem('description')}>{description}</p>}
</div>
{description && <p class={bem('description')}>{description}</p>}
</div>
);
);
};
},
});