feat(CouponList): refactor style & add new prop show-count (#5139)

src/coupon/index.js

@@ -34,7 +34,7 @@ export default createComponent({
   computed: {
     validPeriod() {
       const { startAt, endAt } = this.coupon;
-      return `${t('valid')}：${getDate(startAt)} - ${getDate(endAt)}`;
+      return `${getDate(startAt)} - ${getDate(endAt)}`;
     },
 
     faceAmount() {
@@ -70,13 +70,13 @@ export default createComponent({
         <div class={bem('content')}>
           <div class={bem('head')}>
             <h2 class={bem('amount')} domPropsInnerHTML={this.faceAmount} />
-            <p>{this.coupon.condition || this.conditionMessage}</p>
+            <p class={bem('condition')}>{this.coupon.condition || this.conditionMessage}</p>
           </div>
           <div class={bem('body')}>
-            <h2 class={bem('name')}>{coupon.name}</h2>
-            <p>{this.validPeriod}</p>
-            {this.chosen && (
-              <Checkbox value={true} class={bem('corner')} checked-color={RED} />
+            <p class={bem('name')}>{coupon.name}</p>
+            <p class={bem('valid')}>{this.validPeriod}</p>
+            {!this.disabled && (
+              <Checkbox value={this.chosen} class={bem('corner')} size={18} checked-color={RED} />
             )}
           </div>
         </div>

src/coupon/index.less

@@ -14,45 +14,36 @@
 
   &__content {
     display: flex;
+    align-items: center;
     box-sizing: border-box;
-    height: @coupon-content-height;
+    min-height: @coupon-content-height;
     padding: @coupon-content-padding;
-  }
-
-  p,
-  h2 {
-    margin: 0;
-
-    .ellipsis();
-  }
-
-  h2 {
-    height: 34px;
-    font-weight: @font-weight-bold;
-    line-height: 34px;
-  }
-
-  p {
-    color: @gray-6;
-    font-size: @font-size-sm;
-    line-height: 16px;
+    color: @gray-8;
   }
 
   &__head {
     position: relative;
     min-width: @coupon-head-width;
-    padding-right: @padding-xs;
+    padding: 0 @padding-xs;
+    color: @coupon-amount-color;
+    text-align: center;
+  }
 
-    p {
-      white-space: pre-wrap;
-    }
+  &__amount,
+  &__condition,
+  &__name,
+  &__valid {
+    .ellipsis();
   }
 
   &__amount {
-    color: @coupon-amount-color;
+    margin-bottom: 6px;
+    font-weight: @font-weight-bold;
     font-size: @coupon-amount-font-size;
+    .ellipsis();
 
     span {
+      font-weight: normal;
       font-size: @coupon-currency-font-size;
 
       &:not(:empty) {
@@ -61,6 +52,12 @@
     }
   }
 
+  &__condition {
+    font-size: @font-size-sm;
+    line-height: 16px;
+    white-space: pre-wrap;
+  }
+
   &__body {
     position: relative;
     flex: 1;
@@ -68,17 +65,26 @@
   }
 
   &__name {
+    margin-bottom: 10px;
+    font-weight: bold;
     font-size: @coupon-name-font-size;
+    line-height: 20px;
+  }
+
+  &__valid {
+    font-size: @font-size-sm;
   }
 
   &__corner {
     position: absolute;
-    top: @padding-md;
+    top: 0;
     right: @padding-md;
+    bottom: 0;
   }
 
   &__description {
     padding: @coupon-description-padding;
+    font-size: @font-size-sm;
     background-color: @coupon-description-background-color;
     border-top: 1px dashed @coupon-description-border-color;
   }
@@ -92,10 +98,8 @@
       height: @coupon-content-height - 10px;
     }
 
-    p,
-    h2,
-    span {
-      color: @coupon-disabled-text-color;
+    .van-coupon__head {
+      color: inherit;
     }
   }
 }