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

39
src/coupon/index.js
View File

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