[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>}

packages/coupon/index.less

@@ -2,21 +2,21 @@
 @import '../style/mixins/ellipsis';
 
 .van-coupon {
-  margin: 0 15px 15px;
+  margin: @coupon-margin;
   overflow: hidden;
-  background-color: @white;
-  border-radius: 4px;
-  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
+  background-color: @coupon-background-color;
+  border-radius: @coupon-border-radius;
+  box-shadow: @coupon-box-shadow;
 
   &:active {
-    background-color: @active-color;
+    background-color: @coupon-active-background-color;
   }
 
   &__content {
     display: flex;
     box-sizing: border-box;
-    height: 100px;
-    padding: 24px 0 0 15px;
+    height: @coupon-content-height;
+    padding: @coupon-content-padding;
   }
 
   p,
@@ -40,67 +40,62 @@
 
   &__head {
     position: relative;
-    min-width: 85px;
+    min-width: @coupon-head-width;
     padding-right: 10px;
 
-    h2 {
-      color: @red;
-      font-size: 24px;
-
-      span {
-        &:not(:empty) {
-          margin-left: 2px;
-        }
-
-        font-size: 50%;
-      }
-    }
-
     p {
       white-space: pre-wrap;
     }
   }
 
+  &__amount {
+    color: @coupon-amount-color;
+    font-size: @coupon-amount-font-size;
+
+    span {
+      font-size: @coupon-currency-font-size;
+
+      &:not(:empty) {
+        margin-left: 2px;
+      }
+    }
+  }
+
   &__body {
     position: relative;
     flex: 1;
-    border-radius: 0 4px 4px 0;
+    border-radius: 0 @coupon-border-radius @coupon-border-radius 0;
+  }
 
-    h2 {
-      font-size: 16px;
-    }
+  &__name {
+    font-size: @coupon-name-font-size;
   }
 
   &__corner {
     position: absolute;
     top: 16px;
     right: 15px;
-
-    .van-icon {
-      background-color: @red;
-      border-color: @red;
-    }
   }
 
   &__description {
-    padding: 7px 15px;
-    background-color: @background-color-light;
-    border-top: 1px dashed @border-color;
+    padding: @coupon-description-padding;
+    background-color: @coupon-description-background-color;
+    border-top: 1px dashed @coupon-description-border-color;
   }
 
   &--disabled {
     &:active {
-      background-color: @white;
+      background-color: @coupon-background-color;
     }
 
     .van-coupon-item__content {
-      height: 90px;
+      height: @coupon-content-height - 10px;
     }
 
     p,
     h2,
     span {
-      color: @gray-dark;
+      color: @coupon-disabled-text-color;
     }
   }
 }