Merge branch 'dev' of https://github.com/youzan/vant into dev

docs/demos/views/coupon.vue

@@ -21,66 +21,88 @@
 </template>
 
 <script>
-const coupon = {
-  available: 1,
-  discount: 0,
-  denominations: 150,
-  origin_condition: 0,
-  reason: '',
-  value: 150,
-  condition: '下单立减 1.50 元',
-  name: '新手专用优惠券',
-  start_at: 1489104000,
-  end_at: 1514592000
-};
-
-const discountCoupon = {
-  ...coupon,
-  discount: 88,
-  denominations: 0,
-  origin_condition: 50,
-  value: 12,
-  condition: '下单即享 8.8 折'
-};
-
-const disabledCoupon = {
-  ...coupon,
-  avaliable: 0,
-  reason: '未满足使用门槛'
-};
-
-const disabledDiscountCoupon = {
-  ...discountCoupon,
-  avaliable: 0,
-  reason: '未满足使用门槛'
-};
-
 export default {
   i18n: {
     'zh-CN': {
-
+      coupon: {
+        name: '优惠券名称',
+        reason: '优惠券不可用原因'
+      },
+      exchange: '兑换成功'
     },
     'en-US': {
-
+      coupon: {
+        name: 'Coupon name',
+        reason: 'Coupon unavailable reason'
+      },
+      exchange: 'Success'
     }
   },
 
   data() {
     return {
       showList: false,
-      chosenCoupon: -1,
+      chosenCoupon: -1
-      coupons: [coupon, discountCoupon],
-      disabledCoupons: [disabledCoupon, disabledDiscountCoupon]
     };
   },
 
+  computed: {
+    coupons() {
+      return [this.coupon, this.discountCoupon];
+    },
+
+    disabledCoupons() {
+      return [this.disabledCoupon, this.disabledDiscountCoupon];
+    },
+
+    coupon() {
+      return {
+        available: 1,
+        discount: 0,
+        denominations: 150,
+        origin_condition: 0,
+        reason: '',
+        value: 150,
+        name: this.$t('coupon.name'),
+        start_at: 1489104000,
+        end_at: 1514592000
+      }
+    },
+
+    discountCoupon() {
+      return {
+        ...this.coupon,
+        discount: 88,
+        denominations: 0,
+        origin_condition: 50,
+        value: 12
+      }
+    },
+
+    disabledCoupon() {
+      return {
+        ...this.coupon,
+        avaliable: 0,
+        reason: this.$t('coupon.reason')
+      }
+    },
+
+    disabledDiscountCoupon() {
+      return {
+        ...this.discountCoupon,
+        avaliable: 0,
+        reason: this.$t('coupon.reason')
+      }
+    }
+  },
+
   methods: {
     onChange(index) {
       this.showList = false;      
       this.chosenCoupon = index;
     },
     onExchange(code) {
-      Toast('兑换成功');
+      Toast(this.$t('exchange'));
       this.coupons.push(coupon);
     }
   }

docs/markdown/en-US/coupon.md

@@ -13,14 +13,14 @@ Vue.use(CouponList);
 #### Basic Usage
 
 ```html
-<!-- 优惠券单元格 -->
+<!-- Coupon Cell -->
 <van-coupon-cell
   :coupons="coupons"
   :chosenCoupon="chosenCoupon"
   @click="showList = true"
 />
 
-<!-- 优惠券列表 -->
+<!-- Coupon List -->
 <van-popup v-model="showList" position="bottom">
   <van-coupon-list
     :coupons="coupons"
@@ -40,8 +40,7 @@ const coupon = {
   origin_condition: 0,
   reason: '',
   value: 150,
-  condition: '下单立减 1.50 元',
+  name: 'Coupon name',
-  name: '新手专用优惠券',
   start_at: 1489104000,
   end_at: 1514592000
 };
@@ -69,47 +68,45 @@ export default {
 
 ### CouponCell API
 
-| Attribute | Description | Type | Default | 必须 |
+| Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
-| title | 单元格标题 | `String` | `优惠` | - |
+| title | Cell title | `String` | `Coupon` | - |
-| chosenCoupon | 当前选中优惠券的索引 | `Number` | `-1` | - |
+| chosenCoupon | Index of chosen coupon | `Number` | `-1` | - |
-| coupons | 可用优惠券列表 | `Array` | `[]` | - |
+| coupons | Coupon list | `Array` | `[]` | - |
-| editable | 能否切换优惠券 | `Boolean` | `true` | - |
+| editable | Cell editable | `Boolean` | `true` | - |
 
 ### CouponList API
 
-| Attribute | Description | Type | Default | 必须 |
+| Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
-| v-model | 是否展示优惠券列表 | `Boolean` | `false` | - |
+| chosenCoupon | Index of chosen coupon | `Number` | `-1` | - |
-| chosenCoupon | 当前选中优惠券的索引 | `Number` | `-1` | - |
+| coupons | Coupon list | `Array` | `[]` | - |
-| coupons | 可用优惠券列表 | `Array` | `[]` | - |
+| disabledCoupons | Disabled voupon list | `Array` | `[]` | - |
-| disabledCoupons | 不可用优惠券列表 | `Array` | `[]` | - |
+| exchangeButtonText | Exchange button text | `String` | `Exchange` | - |
-| exchangeButtonText | 兑换按钮文字 | `String` | `兑换` | - |
+| exchangeButtonDisabled | Whether to disable exchange button | `Boolean` | `false` | - |
-| exchangeButtonDisabled | 是否禁用兑换按钮 | `Boolean` | `false` | - |
+| displayedCouponIndex | Index of displayed coupon | `Number` | - | - |
-| displayedCouponIndex | 滚动至特定优惠券位置 | `Number` | - | - |
+| closeButtonText | Close button text | `String` | `Close` | - |
-| closeButtonText | 列表底部按钮文字 | `String` | 不使用优惠 | - |
+| disabledListTitle | Disabled list title | `String` | `Unavailable` | - |
-| disabledListTitle | 不可用券列表标题 | `String` | 不可用优惠 | - |
+| inputPlaceholder | Input placeholder | `String` | `Coupon code` | - |
-| inputPlaceholder | 输入框文字提示 | `String` | 请输入优惠码 | - |
 
 ### CouponList Event
 
 | Event | Description | Attribute |
 |-----------|-----------|-----------|
-| change | 优惠券切换回调 | index, 选中优惠券的索引 |
+| change | Triggered when change chosen coupon | index: index of chosen coupon |
-| exchange | 兑换优惠券回调 | code, 兑换码 |
+| exchange | Triggered when exchange coupon | code: exchange code |
+
+### Coupon Item Data Structure
 
-### Data Structure
-#### 优惠券字段说明
 | key | Description | Type |
 |-----------|-----------|-----------|
-| id | 优惠券 id | `String` |
+| id | Id | `String` |
-| name | 优惠券名称 | `String` |
+| name | Name | `String` |
-| available | 是否可用, 1:可用,0:不可用 | `Number` |
+| discount | Discount | `Number` |
-| discount | 折扣（0为满减券）88=>8.8折 | `Number` |
+| denominations | Denominations | `Number` |
-| denominations | 面值（0为折扣券）单位分 | `Number` |
+| origin_condition | Condition | `Number` |
-| origin_condition | 满减条件（0为无门槛，满XX元可用）单位分 | `Number` |
+| start_at | Start time | `Number` |
-| start_at | 	卡有效开始时间 | `Number` |
+| end_at | End time | `Number` |
-| end_at | 卡失效日期 | `Number` |
+| reason | Unavailable reason | `String` |
-| reason | 不可用原因 | `String` |
+| value | Value | `Number` |
-| value | 订单优惠金额，单位分 | `Number` |
+
-| condition | 格式化输出 value | `String` |

docs/markdown/zh-CN/coupon.md

@@ -40,8 +40,7 @@ const coupon = {
   origin_condition: 0,
   reason: '',
   value: 150,
-  condition: '下单立减 1.50 元',
+  name: '优惠券名称',
-  name: '新手专用优惠券',
   start_at: 1489104000,
   end_at: 1514592000
 };
@@ -72,7 +71,7 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 | 必须 |
 |-----------|-----------|-----------|-------------|-------------|
-| title | 单元格标题 | `String` | `优惠` | - |
+| title | 单元格标题 | `String` | `优惠券码` | - |
 | chosenCoupon | 当前选中优惠券的索引 | `Number` | `-1` | - |
 | coupons | 可用优惠券列表 | `Array` | `[]` | - |
 | editable | 能否切换优惠券 | `Boolean` | `true` | - |
@@ -81,7 +80,6 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 | 必须 |
 |-----------|-----------|-----------|-------------|-------------|
-| v-model | 是否展示优惠券列表 | `Boolean` | `false` | - |
 | chosenCoupon | 当前选中优惠券的索引 | `Number` | `-1` | - |
 | coupons | 可用优惠券列表 | `Array` | `[]` | - |
 | disabledCoupons | 不可用优惠券列表 | `Array` | `[]` | - |
@@ -89,9 +87,9 @@ export default {
 | exchangeButtonDisabled | 是否禁用兑换按钮 | `Boolean` | `false` | - |
 | displayedCouponIndex | 滚动至特定优惠券位置 | `Number` | - | - |
 | showCloseButton | 是否显示列表底部按钮 | `Boolean` | `true` | - |
-| closeButtonText | 列表底部按钮文字 | `String` | 不使用优惠 | - |
+| closeButtonText | 列表底部按钮文字 | `String` | `不使用优惠` | - |
-| disabledListTitle | 不可用券列表标题 | `String` | 不可用优惠 | - |
+| disabledListTitle | 不可用券列表标题 | `String` | `不可用优惠` | - |
-| inputPlaceholder | 输入框文字提示 | `String` | 请输入优惠码 | - |
+| inputPlaceholder | 输入框文字提示 | `String` | `请输入优惠码` | - |
 | showExchangeBar | 是否展示兑换栏 | `Boolean` | `true` | - |
 
 ### CouponList Event
@@ -107,7 +105,6 @@ export default {
 |-----------|-----------|-----------|
 | id | 优惠券 id | `String` |
 | name | 优惠券名称 | `String` |
-| available | 是否可用, 1:可用,0:不可用 | `Number` |
 | discount | 折扣（0为满减券）88=>8.8折 | `Number` |
 | denominations | 面值（0为折扣券）单位分 | `Number` |
 | origin_condition | 满减条件（0为无门槛，满XX元可用）单位分 | `Number` |
@@ -115,4 +112,4 @@ export default {
 | end_at | 卡失效日期 | `Number` |
 | reason | 不可用原因 | `String` |
 | value | 订单优惠金额，单位分 | `Number` |
-| condition | 格式化输出 value | `String` |
+

docs/src/doc.config.js

@@ -532,7 +532,7 @@ module.exports = {
               },
               {
                 path: '/coupon',
-                title: 'Coupon (In translation)'
+                title: 'Coupon'
               },
               {
                 path: '/goods-action',

packages/coupon-cell/index.vue

@@ -1,6 +1,6 @@
 <template>
   <cell-group class="van-coupon-cell">
-    <cell :title="title || '优惠券码'" :value="value" :isLink="editable" @click="$emit('click')" />
+    <cell :title="title || $t('title')" :value="value" :isLink="editable" @click="$emit('click')" />
   </cell-group>
 </template>
 
@@ -42,9 +42,9 @@ export default create({
       const { coupons } = this;
       const coupon = coupons[this.chosenCoupon];
       if (coupon) {
-        return `省￥${(coupon.value / 100).toFixed(2)}`;
+        return `${this.$t('reduce')}￥${(coupon.value / 100).toFixed(2)}`;
       }
-      return coupons.length === 0 ? '使用优惠' : `您有 ${coupons.length} 个可用优惠`;
+      return coupons.length === 0 ? this.$t('tips') : this.$t('count', coupons.length);
     }
   }
 });

packages/coupon-list/Item.vue

@@ -44,7 +44,7 @@ export default create({
     conditionMessage() {
       let condition = this.data.origin_condition;
       condition = condition % 100 === 0 ? Math.round(condition / 100) : (condition / 100).toFixed(2);
-      return this.data.origin_condition === 0 ? '无使用门槛' : `满${condition}元可用`;
+      return this.data.origin_condition === 0 ? this.$t('unlimited') : this.$t('condition', condition);
     }
   },
 
@@ -57,7 +57,7 @@ export default create({
       return (num < 10 ? '0' : '') + num;
     },
     formatDiscount(discount) {
-      return `${(discount / 10).toFixed(discount % 10 === 0 ? 0 : 1)}折`;
+      return this.$t('discount', `${(discount / 10).toFixed(discount % 10 === 0 ? 0 : 1)}`);
     },
     formatAmount(amount) {
       return (amount / 100).toFixed(amount % 100 === 0 ? 0 : amount % 10 === 0 ? 1 : 2);

packages/coupon-list/index.vue

@@ -1,8 +1,21 @@
 <template>
   <div class="van-coupon-list">
     <cell-group class="van-coupon-list__top" v-if="showExchangeBar">
-      <field class="van-coupon-list__filed van-hairline--surround" v-model="exchangeCode" :placeholder="inputPlaceholder" :maxlength="20" />
+      <field
-      <van-button size="small" type="danger" class="van-coupon-list__exchange" :disabled="exchangeButtonDisabled || !exchangeCode.length" @click="onClickExchangeButton">{{ exchangeButtonText }}</van-button>
+        class="van-coupon-list__filed van-hairline--surround"
+        v-model="exchangeCode"
+        :placeholder="inputPlaceholder || $t('placeholder')"
+        :maxlength="20"
+      />
+      <van-button
+        size="small"
+        type="danger"
+        class="van-coupon-list__exchange"
+        :disabled="exchangeButtonDisabled || !exchangeCode.length"
+        @click="onClickExchangeButton"
+      >
+        {{ exchangeButtonText || $t('exchange') }}
+      </van-button>
     </cell-group>
     <div class="van-coupon-list__list" :class="{ 'van-coupon-list--with-exchange': showExchangeBar }" ref="list">
       <coupon-item
@@ -13,7 +26,7 @@
         :chosen="index === chosenCoupon"
         @click.native="onClickCoupon(index)"
       />
-      <h3 v-if="disabledCoupons.length">{{ disabledListTitle }}</h3>
+      <h3 v-if="disabledCoupons.length">{{ disabledListTitle || $t('disabled') }}</h3>
       <coupon-item
         disabled
         v-for="item in disabledCoupons"
@@ -22,7 +35,7 @@
       />
       <div class="van-coupon-list__empty" v-if="!coupons.length && !disabledCoupons.length">
         <img src="https://b.yzcdn.cn/v2/image/wap/trade/new_order/empty@2x.png" >
-        <p>暂无优惠券</p>
+        <p>{{ $t('empty') }}</p>
       </div>
     </div>
     <div
@@ -30,7 +43,7 @@
       class="van-coupon-list__close van-hairline--top"
       @click="onClickNotUse"
     >
-      {{ closeButtonText }}
+      {{ closeButtonText || $t('close') }}
     </div>
   </div>
 </template>
@@ -57,6 +70,10 @@ export default create({
   },
 
   props: {
+    closeButtonText: String,
+    inputPlaceholder: String,
+    disabledListTitle: String,
+    exchangeButtonText: String,
     chosenCoupon: {
       type: Number,
       default: -1
@@ -69,10 +86,6 @@ export default create({
       type: Array,
       default: () => []
     },
-    exchangeButtonText: {
-      type: String,
-      default: '兑换'
-    },
     exchangeButtonDisabled: {
       type: Boolean,
       default: false
@@ -81,18 +94,6 @@ export default create({
       type: Number,
       default: -1
     },
-    closeButtonText: {
-      type: String,
-      default: '不使用优惠'
-    },
-    disabledListTitle: {
-      type: String,
-      default: '不可用优惠'
-    },
-    inputPlaceholder: {
-      type: String,
-      default: '请输入优惠码'
-    },
     showExchangeBar: {
       type: Boolean,
       default: true

packages/locale/lang/en-US.js

@@ -71,5 +71,23 @@ export default {
   },
   vanSubmitBar: {
     label: 'Total：'
+  },
+  vanCouponCell: {
+    title: 'Coupon',
+    tips: 'Select coupon',
+    reduce: 'Reduce',
+    count: count => `You have ${count} offers`
+  },
+  vanCouponList: {
+    empty: 'No coupons',
+    exchange: 'Exchange',
+    close: 'Close',
+    disabled: 'Unavailable',
+    placeholder: 'Coupon code'
+  },
+  vanCouponItem: {
+    unlimited: 'Unlimited',
+    discount: discount => `${discount * 10}% off`,
+    condition: condition => `At least ${condition}`
   }
 };

packages/locale/lang/zh-CN.js

@@ -75,5 +75,23 @@ export default {
   },
   vanSubmitBar: {
     label: '合计：'
+  },
+  vanCouponCell: {
+    title: '优惠券码',
+    tips: '使用优惠',
+    reduce: '省',
+    count: count => `您有 ${count} 个可用优惠`
+  },
+  vanCouponList: {
+    empty: '暂无优惠券',
+    exchange: '兑换',
+    close: '不使用优惠',
+    disabled: '不可用优惠',
+    placeholder: '请输入优惠码'
+  },
+  vanCouponItem: {
+    unlimited: '无使用门槛',
+    discount: discount => `${discount}折`,
+    condition: (condition) => `满${condition}元可用`
   }
 };

packages/picker/PickerColumn.vue

@@ -1,6 +1,6 @@
 
 <template>
-  <div class="van-picker-column" :class="className">
+  <div class="van-picker-column" :class="className" :style="columnStyle">
     <div class="van-picker-column__frame van-hairline--top-bottom" :style="frameStyle" />
     <ul
       :style="wrapperStyle"
@@ -95,21 +95,25 @@ export default create({
       return this.options.length;
     },
 
+    columnStyle() {
+      return {
+        height: (this.itemHeight * this.visibileColumnCount) + 'px'
+      };
+    },
+
     wrapperStyle() {
-      const { itemHeight, visibileColumnCount } = this;
       return {
         transition: `${this.duration}ms`,
         transform: `translate3d(0, ${this.offset}px, 0)`,
-        lineHeight: itemHeight + 'px',
+        lineHeight: this.itemHeight + 'px',
-        height: itemHeight * visibileColumnCount + 'px',
+        padding: `${this.itemHeight * (this.visibileColumnCount - 1) / 2}px 0`
-        paddingTop: itemHeight * (visibileColumnCount - 1) / 2 + 'px'
       };
     },
 
     frameStyle() {
       return {
         height: this.itemHeight + 'px'
-      }
+      };
     },
 
     currentValue() {
@@ -168,7 +172,7 @@ export default create({
     },
 
     setValue(value) {
-      const { options, valueKey } = this;
+      const { options } = this;
       for (let i = 0; i < options.length; i++) {
         if (this.getOptionText(options[i]) === value) {
           this.setIndex(i);

packages/picker/index.vue

@@ -7,7 +7,7 @@
         <div class="van-picker__title" v-if="title" v-text="title" />
       </slot>
     </div>
-    <div class="van-picker__columns">
+    <div class="van-picker__columns" @touchmove.prevent>
       <picker-column
         v-for="(item, index) in currentColumns"
         :key="index"
@@ -47,7 +47,7 @@ export default create({
     columns: {
       type: Array,
       default: () => []
-    },
+    }
   },
 
   data() {
@@ -64,7 +64,7 @@ export default create({
   watch: {
     columns() {
       this.initColumns();
-    },
+    }
   },
 
   methods: {

packages/vant-css/src/coupon-list.css

@@ -220,6 +220,12 @@
       }
     }
 
+    &:active {
+      .van-coupon-item__body {
+        background-color: $active-color;
+      }
+    }
+
     &--disabled {
       .van-coupon-item__lines {
         background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAADICAMAAAC3WLNTAAAAWlBMVEUAAACqrremq7Oqv7+mq7Wqqr+rsLeprreqsrmqrralq7SkqbKrsbikqLGqwNWqrrmrr7mkqbGrsbijqLGnq7SssrimrLKlqrOnrLWprraqr7ekqbKrsLijqLGfTYl9AAAAF3RSTlMAN5oMQgya5kJC5uaSkgZC8/PV1b0rK6hQU+kAAASjSURBVFjDfZlJduMwDESZntJDeh5sUdb9r9kuA+AXA0iIIi/8X6FYALNJU/19+fWj3/pNT1V35NvLratgMvTtjxH+1NBLt7rLHbb7OwhVrSUhKQhz7z1Dv6xZoLWnH70vg5ESINDedkg5BrR0yrGs9Pbpw21SqxNvH593YsN+30OibhwvaQXUPgghVH1m6EkAXK30VllB+UeCMG7OmCPtlk5exN6TcWsRv0UE/aG0GIKxMsycfB9j6QgZwn7FgO/AYhSFq+7Q4hBgyMT9kJKkkhJiriTEuoKACereTw+Y98LTsDVvKdenDWAW6gh1lNwTGHvjEGGhRre+U3J0iKGGknl7zeCJjoBCDPQBBxXhY94WwlYFuXLQTfW979LKYKzvECKH3aLGRSCFnnPwK7UPi8VZ7IRAGH+9X9w7iv0a3GvjZG+F8Y8LRRS0fMQ0hUn0o2ws1wEB7tJqV4iEDKVlgZo5bDWYPQWiVzNmNCX2CMo9XSutziEFoTRjRNqkAwBBqBGBvSpMpEVwrXLgr9Gidi511FaQSZVASO2VkJqxRQPefw3GbX2syqdnqdEy2bd7F77qWRvU3ggp09LDvUMmu/crJVN+wlRA9CrG4+0eadmTteLeScW0/De3+zSEljIpD3Mx53WoGssbfQfgrwm6Un5EgAJCL0MAQ2r4AkoYzoBgBnbuiREilSGLw/YLpUuSChBjKAGltIBSzxDKUOpVQYbEx27ABTYiEOurUjvSi6V7V0ihxb3LqbNfXARqRvdXqmb8fgyI8eSNqNst834l41mNe1f1G38EHzE9w8ycZW5juVzEwCHl7S5CqJJrd0Sci9VUM8CcJ843qwnBVFUGCamJBU+OGVsEKsiYE18egQllJSLA1ZF3Nx6uyoYonRwRJbBM+oANtY6pbFU+iwBMp/R7x/dZa6yvGELVZ4aeRliEn6C3QlDzvgnyIvS6HYWpZJxQzRQUEYC5fTDCpFjleLf3jGWvhTG2oKKoBHEA2tZK1gxPpdC8XzXELosBOsIeYDsEEMpKOXugGjG1MyUW9VgJBqWC88cGfJKCgazKETiW7jhOFeubigvNRTjbGIPeFwRJAB1T3LvTwviJFhGshxRhnjl/jGVd0Sk9rUKoGroj4s7EtE/x9aqnhqQRptYzTysqJ578dQIZ475OIvATnhlfcVVjzZFwFXCthNipUo0xYHpVjK3KFxcTk8FYujuB0Hq0vkgJ0WeGnggrjYcrRRCRfwENBk+53SbEQUxl43ZAY48jwDvhz2GqAMuxbPcfPbF/Q4gBb5teoQMFtN0rkE3AiAqw6euBccRaaRMK5kccSsIQYmeMNUiAYU5iC08BGAGAkCBvuEZa+Wq0Gclh6SWl4X1Ogt1pmwMg2/6MYvCkj30/5mgDXi1PDrmNQxpoqxJCSCE3lk4KKdRLjDvWdwPAfQQ6LgJHnPK0CPxK2fnQA1MBCaDZ/oS0A4v9oty4MajNgVoEG7UOMaIgTJy7LZzHWGBWA+FswBTctMsZYr+AfpbAHFb7XQiZScy3rxliFfzd/h06wlY7kJp86d+FGTEhlO4UWgU6Bvzv6++fmWGE/wHKk5MgoCYAjwAAAABJRU5ErkJggg==');
@@ -228,11 +234,11 @@
       .van-coupon-item__gradient {
         background-image: linear-gradient(45deg, #a4a9b2, #b7bcc3);
       }
-    }
 
       &:active {
         .van-coupon-item__body {
-        background-color: $active-color;
+          background: $white;
+        }
       }
     }
   }