[improvement] Coupon: add less vars

packages/coupon/index.js

@@ -1,4 +1,5 @@
 import { use } from '../utils';
+import { RED } from '../utils/color';
 import Checkbox from '../checkbox';
 
 const [sfc, bem, t] = use('coupon');
@@ -9,7 +10,9 @@ function padZero(num) {
 
 function getDate(timeStamp) {
   const date = new Date(timeStamp * 1000);
-  return `${date.getFullYear()}.${padZero(date.getMonth() + 1)}.${padZero(date.getDate())}`;
+  return `${date.getFullYear()}.${padZero(date.getMonth() + 1)}.${padZero(
+    date.getDate()
+  )}`;
 }
 
 function formatDiscount(discount) {
@@ -33,25 +36,31 @@ export default sfc({
 
   computed: {
     validPeriod() {
-      return `${t('valid')}：${getDate(this.coupon.startAt)} - ${getDate(this.coupon.endAt)}`;
+      const { startAt, endAt } = this.coupon;
+      return `${t('valid')}：${getDate(startAt)} - ${getDate(endAt)}`;
     },
 
     faceAmount() {
       const { coupon } = this;
+
       if (coupon.valueDesc) {
         return `${coupon.valueDesc}<span>${coupon.unitDesc || ''}</span>`;
       }
-      return coupon.denominations
-        ? `<span>${this.currency}</span> ${formatAmount(this.coupon.denominations)}`
-        : coupon.discount
-          ? t('discount', formatDiscount(this.coupon.discount))
-          : '';
+
+      if (coupon.denominations) {
+        return `<span>${this.currency}</span> ${formatAmount(this.coupon.denominations)}`;
+      }
+
+      if (coupon.discount) {
+        return t('discount', formatDiscount(this.coupon.discount));
+      }
+
+      return '';
     },
 
     conditionMessage() {
-      let condition = this.coupon.originCondition;
-      condition = condition % 100 === 0 ? Math.round(condition / 100) : (condition / 100).toFixed(2);
-      return condition === 0 ? t('unlimited') : t('condition', condition);
+      const condition = formatAmount(this.coupon.originCondition);
+      return condition === '0' ? t('unlimited') : t('condition', condition);
     }
   },
 
@@ -63,13 +72,15 @@ export default sfc({
       <div class={bem({ disabled })}>
         <div class={bem('content')}>
           <div class={bem('head')}>
-            <h2 domPropsInnerHTML={this.faceAmount} />
+            <h2 class={bem('amount')} domPropsInnerHTML={this.faceAmount} />
             <p>{this.coupon.condition || this.conditionMessage}</p>
           </div>
           <div class={bem('body')}>
-            <h2>{coupon.name}</h2>
+            <h2 class={bem('name')}>{coupon.name}</h2>
             <p>{this.validPeriod}</p>
-            {this.chosen && <Checkbox value={true} class={bem('corner')} />}
+            {this.chosen && (
+              <Checkbox value={true} class={bem('corner')} checked-color={RED} />
+            )}
           </div>
         </div>
         {description && <p class={bem('description')}>{description}</p>}