[new feature] Coupon: add description prop (#2458)

babel.config.js

@@ -16,8 +16,6 @@ module.exports = function (api) {
       [
         '@vue/babel-preset-jsx',
         {
-          vModel: true,
-          injectH: true,
           functional: false
         }
       ]

package.json

@@ -79,8 +79,8 @@
     "@vant/markdown-loader": "^1.0.3",
     "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0-beta.1",
     "@vue/babel-preset-jsx": "^1.0.0-beta.1",
-    "@vue/server-test-utils": "^1.0.0-beta.26",
+    "@vue/server-test-utils": "^1.0.0-beta.28",
-    "@vue/test-utils": "^1.0.0-beta.26",
+    "@vue/test-utils": "^1.0.0-beta.28",
     "autoprefixer": "^9.4.3",
     "babel-core": "^7.0.0-0",
     "babel-jest": "^23.6.0",

packages/coupon-list/demo/index.vue

@@ -30,14 +30,16 @@ export default {
     'zh-CN': {
       coupon: {
         name: '优惠券名称',
-        reason: '优惠券不可用原因'
+        reason: '优惠券不可用原因',
+        description: '描述信息'
       },
       exchange: '兑换成功'
     },
     'en-US': {
       coupon: {
         name: 'Coupon name',
-        reason: 'Coupon unavailable reason'
+        reason: 'Coupon unavailable reason',
+        description: 'Description'
       },
       exchange: 'Success'
     }
@@ -63,13 +65,13 @@ export default {
     coupon() {
       return {
         id: 1,
-        available: 1,
         discount: 0,
         denominations: 150,
         originCondition: 0,
         reason: '',
         value: 150,
         name: this.$t('coupon.name'),
+        description: this.$t('coupon.description'),
         startAt: 1489104000,
         endAt: 1514592000
       };
@@ -90,7 +92,6 @@ export default {
       return {
         ...this.coupon,
         id: 3,
-        available: 0,
         reason: this.$t('coupon.reason')
       };
     },
@@ -100,7 +101,6 @@ export default {
         ...this.discountCoupon,
         discount: 10,
         id: 4,
-        available: 0,
         reason: this.$t('coupon.reason')
       };
     }

packages/coupon-list/en-US.md

@@ -111,5 +111,6 @@ export default {
 | originCondition | Condition | `Number` |
 | startAt | Start time (Timestmap, unit second) | `Number` |
 | endAt | End time (Timestmap, unit second) | `Number` |
+| description | Description | `String` |
 | reason | Unavailable reason | `String` |
 | value | Value | `Number` |

packages/coupon-list/test/__snapshots__/index.spec.js.snap

@@ -23,3 +23,139 @@ exports[`coupon cell 2`] = `
     <!----></i>
 </div>
 `;
+
+exports[`render coupon list 1`] = `
+<div class="van-coupon-list">
+  <div class="van-cell van-cell--borderless van-field van-coupon-list__field">
+    <!---->
+    <!---->
+    <div class="van-cell__value van-cell__value--alone">
+      <div class="van-field__body"><input type="text" placeholder="请输入优惠码" maxlength="20" class="van-field__control">
+        <!---->
+        <!---->
+        <div class="van-field__button"><button disabled="disabled" class="van-button van-button--danger van-button--small van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button></div>
+      </div>
+      <!---->
+    </div>
+    <!---->
+  </div>
+  <div class="van-tabs van-tabs--line van-coupon-list__tab">
+    <div class="van-tabs__wrap van-hairline--top-bottom">
+      <div class="van-tabs__nav van-tabs__nav--line">
+        <div class="van-tabs__line" style="width: 120px; transform: translateX(-60px);"></div>
+        <div class="van-tab van-tab--active"><span class="van-ellipsis">可使用优惠券 (6)</span></div>
+        <div class="van-tab"><span class="van-ellipsis">不可使用优惠券 (2)</span></div>
+      </div>
+    </div>
+    <div class="van-tabs__content">
+      <div class="van-tab__pane" style="">
+        <div class="van-coupon-list__list" style="height: 628px;">
+          <div class="van-coupon">
+            <div class="van-coupon__content">
+              <div class="van-coupon__head">
+                <h2></h2>
+                <p>无使用门槛</p>
+              </div>
+              <div class="van-coupon__body">
+                <h2></h2>
+                <p>有效期：2017.03.10 - 2017.12.30</p>
+              </div>
+            </div>
+          </div>
+          <div class="van-coupon">
+            <div class="van-coupon__content">
+              <div class="van-coupon__head">
+                <h2><span>¥</span> 1.5</h2>
+                <p>无使用门槛</p>
+              </div>
+              <div class="van-coupon__body">
+                <h2>name</h2>
+                <p>有效期：2017.03.10 - 2017.12.30</p>
+                <div class="van-checkbox van-coupon__corner">
+                  <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success">
+                      <!---->
+                      <!----></i></div>
+                  <!---->
+                </div>
+              </div>
+            </div>
+            <p class="van-coupon__description">description</p>
+          </div>
+          <div class="van-coupon">
+            <div class="van-coupon__content">
+              <div class="van-coupon__head">
+                <h2><span>¥</span> 1</h2>
+                <p>无使用门槛</p>
+              </div>
+              <div class="van-coupon__body">
+                <h2>name</h2>
+                <p>有效期：2017.03.10 - 2017.12.30</p>
+              </div>
+            </div>
+            <p class="van-coupon__description">description</p>
+          </div>
+          <div class="van-coupon">
+            <div class="van-coupon__content">
+              <div class="van-coupon__head">
+                <h2><span>¥</span> 1.23</h2>
+                <p>无使用门槛</p>
+              </div>
+              <div class="van-coupon__body">
+                <h2>name</h2>
+                <p>有效期：2017.03.10 - 2017.12.30</p>
+              </div>
+            </div>
+            <p class="van-coupon__description">description</p>
+          </div>
+          <div class="van-coupon">
+            <div class="van-coupon__content">
+              <div class="van-coupon__head">
+                <h2>8.8折</h2>
+                <p>满0.50元可用</p>
+              </div>
+              <div class="van-coupon__body">
+                <h2>name</h2>
+                <p>有效期：2017.03.10 - 2017.12.30</p>
+              </div>
+            </div>
+          </div>
+          <div class="van-coupon">
+            <div class="van-coupon__content">
+              <div class="van-coupon__head">
+                <h2>9折</h2>
+                <p>满0.50元可用</p>
+              </div>
+              <div class="van-coupon__body">
+                <h2>name</h2>
+                <p>有效期：2017.03.10 - 2017.12.30</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!---->
+      </div>
+      <div class="van-tab__pane" style="display: none;">
+        <!---->
+        <!---->
+      </div>
+    </div>
+  </div>
+  <button class="van-button van-button--default van-button--large van-coupon-list__close"><span class="van-button__text">不使用优惠</span></button>
+</div>
+`;
+
+exports[`render disabled coupon 1`] = `
+<div class="van-coupon van-coupon--disabled">
+  <div class="van-coupon__content">
+    <div class="van-coupon__head">
+      <h2><span>¥</span> 1.5</h2>
+      <p>无使用门槛</p>
+    </div>
+    <div class="van-coupon__body">
+      <h2>name</h2>
+      <p>有效期：2017.03.10 - 2017.12.30</p>
+    </div>
+  </div>
+  <p class="van-coupon__description">reason</p>
+</div>
+`;

packages/coupon-list/test/index.spec.js

@@ -1,6 +1,94 @@
+import Coupon from '../../coupon';
 import CouponList from '..';
 import CouponCell from '../../coupon-cell';
-import { mount } from '../../../test/utils';
+import { later, mount } from '../../../test/utils';
+
+const coupon = {
+  id: 1,
+  discount: 0,
+  denominations: 150,
+  originCondition: 0,
+  reason: '',
+  value: 150,
+  name: 'name',
+  description: 'description',
+  startAt: 1489104000,
+  endAt: 1514592000
+};
+
+const coupon2 = {
+  ...coupon,
+  denominations: 100
+};
+
+const coupon3 = {
+  ...coupon,
+  denominations: 123
+};
+
+const emptyCoupon = {
+  id: 0,
+  discount: 0,
+  denominations: 0,
+  originCondition: 0,
+  startAt: 1489104000,
+  endAt: 1514592000
+};
+
+const discountCoupon = {
+  ...coupon,
+  id: 2,
+  discount: 88,
+  denominations: 0,
+  originCondition: 50,
+  value: 12,
+  description: ''
+};
+
+const discountCoupon2 = {
+  ...coupon,
+  id: 2,
+  discount: 90,
+  denominations: 0,
+  originCondition: 50,
+  value: 12,
+  description: ''
+};
+
+const disabledCoupon = {
+  ...coupon,
+  id: 3,
+  reason: 'reason'
+};
+
+const disabledDiscountCoupon = {
+  ...discountCoupon,
+  discount: 10,
+  id: 4,
+  reason: ''
+};
+
+test('render disabled coupon', () => {
+  const wrapper = mount(Coupon, {
+    propsData: {
+      coupon: disabledCoupon,
+      disabled: true
+    }
+  });
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('render coupon list', async () => {
+  const wrapper = mount(CouponList, {
+    propsData: {
+      chosenCoupon: 1,
+      coupons: [emptyCoupon, coupon, coupon2, coupon3, discountCoupon, discountCoupon2],
+      disabledCoupons: [disabledCoupon, disabledDiscountCoupon]
+    }
+  });
+  await later();
+  expect(wrapper).toMatchSnapshot();
+});
 
 test('exchange coupon', () => {
   const wrapper = mount(CouponList);
@@ -22,7 +110,12 @@ test('exchange coupon', () => {
 });
 
 test('coupon cell', () => {
-  const wrapper = mount(CouponCell);
+  const onClick = jest.fn();
+  const wrapper = mount(CouponCell, {
+    listeners: {
+      click: onClick
+    }
+  });
   expect(wrapper).toMatchSnapshot();
 
   wrapper.setProps({
@@ -30,4 +123,7 @@ test('coupon cell', () => {
     chosenCoupon: 0
   });
   expect(wrapper).toMatchSnapshot();
+
+  wrapper.trigger('click');
+  expect(onClick.mock.calls.length).toEqual(1);
 });

packages/coupon-list/zh-CN.md

@@ -116,5 +116,6 @@ export default {
 | originCondition | 满减条件（0为无门槛，满XX元可用）单位分 | `Number` |
 | startAt | 卡有效开始时间 (时间戳, 单位秒) | `Number` |
 | endAt | 卡失效日期 (时间戳, 单位秒) | `Number` |
-| reason | 不可用原因 | `String` |
+| description | 描述信息，优惠券可用时展示 | `String` |
+| reason | 不可用原因，优惠券不可用时展示 | `String` |
 | value | 折扣券优惠金额，单位分 | `Number` |

packages/coupon/index.js

@@ -53,9 +53,10 @@ export default sfc({
 
   render(h) {
     const { coupon, disabled } = this;
+    const description = (disabled && coupon.reason) || coupon.description;
 
     return (
-      <div class={bem({ disabled: this.disabled })}>
+      <div class={bem({ disabled })}>
         <div class={bem('content')}>
           <div class={bem('head')}>
             <h2 domPropsInnerHTML={this.faceAmount} />
@@ -67,7 +68,7 @@ export default sfc({
             {this.chosen && <Checkbox value={true} class={bem('corner')} />}
           </div>
         </div>
-        {(disabled && coupon.reason) && <p class={bem('reason')}>{coupon.reason}</p>}
+        {description && <p class={bem('description')}>{description}</p>}
       </div>
     );
   }

packages/coupon/index.less

@@ -72,7 +72,7 @@
     }
   }
 
-  &__reason {
+  &__description {
     padding: 7px 15px;
     border-top: 1px dashed @border-color;
     background-color: @background-color-light;

yarn.lock

@@ -802,15 +802,17 @@
     source-map "^0.5.6"
     vue-template-es2015-compiler "^1.6.0"
 
-"@vue/server-test-utils@^1.0.0-beta.26":
+"@vue/server-test-utils@^1.0.0-beta.28":
-  version "1.0.0-beta.27"
+  version "1.0.0-beta.28"
-  resolved "https://registry.yarnpkg.com/@vue/server-test-utils/-/server-test-utils-1.0.0-beta.27.tgz#0c61cb724d04bf44c70938b4a6054e73e914492a"
+  resolved "https://registry.yarnpkg.com/@vue/server-test-utils/-/server-test-utils-1.0.0-beta.28.tgz#40adb6a6c05e8970cc5e5f0869eb490fa00d9cf3"
+  integrity sha512-CrXQ2ISmLvye4HC4sIHqqR3Gyg02i8XcTwMAyIh+UY7fh1Nz4f9XE4LDsxg0B9uSGsSiR0lwphjlGtbUJjGl4A==
   dependencies:
     cheerio "^1.0.0-rc.2"
 
-"@vue/test-utils@^1.0.0-beta.26":
+"@vue/test-utils@^1.0.0-beta.28":
-  version "1.0.0-beta.27"
+  version "1.0.0-beta.28"
-  resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-1.0.0-beta.27.tgz#7e5f7b7180c00e28a4ca55c0ff0a7e754377fdb2"
+  resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-1.0.0-beta.28.tgz#767c43413df8cde86128735e58923803e444b9a5"
+  integrity sha512-uVbFJG0g/H9hf2pgWUdhvQYItRGzQ44cMFf00wp0YEo85pxuvM9e3mx8QLQfx6R2CogxbK4CvV7qvkLblehXeQ==
   dependencies:
     dom-event-types "^1.0.0"
     lodash "^4.17.4"