[new feature] Coupon: add valueDesc、unitDesc prop (#2710)

packages/coupon-list/demo/index.vue

@@ -65,15 +65,15 @@ export default {
     coupon() {
       return {
         id: 1,
-        discount: 0,
-        denominations: 150,
         condition: '无使用门槛\n最多优惠12元',
         reason: '',
         value: 150,
         name: this.$t('coupon.name'),
         description: this.$t('coupon.description'),
         startAt: 1489104000,
-        endAt: 1514592000
+        endAt: 1514592000,
+        valueDesc: '1.5',
+        unitDesc: '元'
       };
     },
 
@@ -81,10 +81,9 @@ export default {
       return {
         ...this.coupon,
         id: 2,
-        discount: 88,
+        value: 12,
-        denominations: 0,
+        valueDesc: '8.8',
-        originCondition: 50,
+        unitDesc: '折'
-        value: 12
       };
     },
 
@@ -99,7 +98,8 @@ export default {
     disabledDiscountCoupon() {
       return {
         ...this.discountCoupon,
-        discount: 10,
+        valueDesc: '1',
+        unitDesc: '折',
         id: 4,
         reason: this.$t('coupon.reason')
       };

packages/coupon-list/en-US.md

@@ -34,14 +34,14 @@ Vue.use(CouponCell).use(CouponList);
 ```javascript
 const coupon = {
   available: 1,
-  discount: 0,
-  denominations: 150,
   originCondition: 0,
   reason: '',
   value: 150,
   name: 'Coupon name',
   startAt: 1489104000,
-  endAt: 1514592000
+  endAt: 1514592000,
+  valueDesc: '1.5',
+  unitDesc: '元'
 };
 
 export default {
@@ -106,11 +106,11 @@ export default {
 |------|------|------|
 | id | Id | `String` |
 | name | Name | `String` |
-| discount | Discount | `Number` |
-| denominations | Denominations | `Number` |
 | condition | Condition | `String` |
 | startAt | Start time (Timestmap, unit second) | `Number` |
 | endAt | End time (Timestmap, unit second) | `Number` |
 | description | Description | `String` |
 | reason | Unavailable reason | `String` |
 | value | Value | `Number` |
+| valueDesc | Value Text | `String` |
+| unitDesc | Unit Text | `String` |

packages/coupon-list/zh-CN.md

@@ -34,14 +34,14 @@ Vue.use(CouponCell).use(CouponList);
 ```javascript
 const coupon = {
   available: 1,
-  discount: 0,
-  denominations: 150,
   condition: '无使用门槛\n最多优惠12元',
   reason: '',
   value: 150,
   name: '优惠券名称',
   startAt: 1489104000,
-  endAt: 1514592000
+  endAt: 1514592000,
+  valueDesc: '1.5',
+  unitDesc: '元'
 };
 
 export default {
@@ -111,11 +111,11 @@ export default {
 |------|------|------|
 | id | 优惠券 id | `String` |
 | name | 优惠券名称 | `String` |
-| discount | 折扣（0为满减券）88=>8.8折 | `Number` |
-| denominations | 面值（0为折扣券）单位分 | `Number` |
 | condition | 满减条件 | `String` |
 | startAt | 卡有效开始时间 (时间戳, 单位秒) | `Number` |
 | endAt | 卡失效日期 (时间戳, 单位秒) | `Number` |
 | description | 描述信息，优惠券可用时展示 | `String` |
 | reason | 不可用原因，优惠券不可用时展示 | `String` |
 | value | 折扣券优惠金额，单位分 | `Number` |
+| valueDesc | 折扣券优惠金额文案 | `String` |
+| unitDesc | 单位文案 | `String` |

packages/coupon/index.js

@@ -37,9 +37,13 @@ export default sfc({
     },
 
     faceAmount() {
-      return this.coupon.denominations
+      const { coupon } = this;
+      if (coupon.valueDesc && coupon.unitDesc) {
+        return `${coupon.valueDesc}<span>${coupon.unitDesc}</span>`;
+      }
+      return coupon.denominations
         ? `<span>${this.currency}</span> ${formatAmount(this.coupon.denominations)}`
-        : this.coupon.discount
+        : coupon.discount
           ? t('discount', formatDiscount(this.coupon.discount))
           : '';
     },

packages/coupon/index.less

@@ -40,13 +40,15 @@
 
   &__head {
     position: relative;
-    min-width: 95px;
+    min-width: 85px;
+    padding-right: 10px;
 
     h2 {
       color: @red;
       font-size: 24px;
 
       span {
+        margin-left: 2px;
         font-size: 50%;
       }
     }