message: refactor(Coupon): refactor with composition api
diff: +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,35 +57,34 @@ 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;
  + 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>
  + <h2 class={bem('amount')}>{faceAmount.value}</h2>
  <p class={bem('condition')}>
  - {this.coupon.condition || this.conditionMessage}
  + {coupon.condition || conditionMessage.value}
  </p>
  </div>
  <div class={bem('body')}>
  <p class={bem('name')}>{coupon.name}</p>
  - <p class={bem('valid')}>{this.validPeriod}</p>
  - {!this.disabled && (
  + <p class={bem('valid')}>{validPeriod.value}</p>
  + {!disabled && (
  <Checkbox
  size={18}
  class={bem('corner')}
  - modelValue={this.chosen}
  + modelValue={chosen}
  checkedColor={RED}
  />
  )}
  @@ -93,5 +93,6 @@ export default createComponent({
  {description && <p class={bem('description')}>{description}</p>}
  </div>
  );
  + };
  },
  });
  