diff --git a/docs/examples-docs/order-coupon.md b/docs/examples-docs/order-coupon.md
new file mode 100644
index 000000000..2dc799ce1
--- /dev/null
+++ b/docs/examples-docs/order-coupon.md
@@ -0,0 +1,173 @@
+## OrderCoupon 下单页优惠券
+
+<script>
+import { Toast } from 'packages';
+
+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 {
+  data() {
+    return {
+      showList: false,
+      chosenCoupon: -1,
+      coupons: [coupon, discountCoupon],
+      disabledCoupons: [disabledCoupon, disabledDiscountCoupon]
+    }
+  },
+
+  methods: {
+    onChange(index) {
+      this.chosenCoupon = index;
+    },
+    onExchange(code) {
+      Toast('兑换成功');
+      this.coupons.push(coupon);
+    }
+  }
+}
+</script>
+
+### 使用指南
+``` javascript
+import { OrderCoupon, OrderCouponList } from 'vant';
+
+Vue.component(OrderCoupon.name, OrderCoupon);
+Vue.component(OrderCouponList.name, OrderCouponList);
+```
+
+### 代码演示
+
+#### 基础用法
+
+:::demo 基础用法
+```html
+<!-- 优惠券单元格 -->
+<van-order-coupon
+  :coupons="coupons"
+  :chosen-coupon="chosenCoupon"
+  @click="showList = true"
+></van-order-coupon>
+
+<!-- 优惠券列表 -->
+<van-order-coupon-list
+  v-model="showList"
+  :coupons="coupons"
+  :chosen-coupon="chosenCoupon"
+  :disabled-coupons="disabledCoupons"
+  @change="onChange"
+  @exchange="onExchange"
+></van-order-coupon-list>
+```
+
+```javascript
+const mockCoupon = {
+  available: 1,
+  discount: 0,
+  denominations: 150,
+  origin_condition: 0,
+  reason: '',
+  value: 150,
+  condition: '下单立减 1.50 元',
+  name: '新手专用优惠券',
+  start_at: 1489104000,
+  end_at: 1514592000
+};
+
+export default {
+  data() {
+    return {
+      chosenCoupon: -1,
+      coupons: [mockCoupon],
+      disabledCoupons: [mockCoupon]
+    }
+  },
+
+  methods: {
+    onChange(index) {
+      this.chosenCoupon = index;
+    },
+    onExchange(code) {
+      this.coupons.push(mockCoupon);
+    }
+  }
+}
+```
+:::
+
+### OrderCoupon API
+
+| 参数       | 说明      | 类型       | 默认值       | 必须      |
+|-----------|-----------|-----------|-------------|-------------|
+| chosenCoupon | 当前选中优惠券的索引 | `Number` | `-1` | - |
+| coupons | 可用优惠券列表 | `Array` | `[]` | - |
+| editable | 能否切换优惠券 | `Boolean` | `true` | - |
+
+### OrderCouponList API
+
+| 参数       | 说明      | 类型       | 默认值       | 必须      |
+|-----------|-----------|-----------|-------------|-------------|
+| v-model | 是否展示优惠券列表 | `Boolean` | `false` | - |
+| chosenCoupon | 当前选中优惠券的索引 | `Number` | `-1` | - |
+| coupons | 可用优惠券列表 | `Array` | `[]` | - |
+| disabledCoupons | 不可用优惠券列表 | `Array` | `[]` | - |
+| exchangeButtonText | 兑换按钮文字 | `String` | `兑换` | - |
+| exchangeButtonDisabled | 是否禁用兑换按钮 | `Boolean` | `false` | - |
+| displayedCouponIndex | 滚动至特定优惠券位置 | `Number` | - | - |
+| closeButtonText | 列表底部按钮文字 | `String` | 不使用优惠 | - |
+| disabledListTitle | 不可用券列表标题 | `String` | 不可用优惠 | - |
+| inputPlaceholder | 输入框文字提示 | `String` | 请输入优惠码 | - |
+
+### OrderCouponList Event
+
+| 事件名       | 说明      | 参数       |
+|-----------|-----------|-----------|
+| change | 优惠券切换回调 | index, 选中优惠券的索引 |
+| exchange | 兑换优惠券回调 | code, 兑换码 |
+
+### 数据格式
+#### 优惠券字段说明
+| key       | 说明      | 类型       |
+|-----------|-----------|-----------|
+| id | 优惠券 id | `String` |
+| name | 优惠券名称 | `String` |
+| available | 是否可用, 1:可用,0:不可用 | `Number` |
+| discount | 折扣（0为满减券）88=>8.8折 | `Number` |
+| denominations | 面值（0为折扣券）单位分 | `Number` |
+| origin_condition | 满减条件（0为无门槛，满XX元可用）单位分 | `Number` |
+| start_at | 	卡有效开始时间 | `Number` |
+| end_at | 卡失效日期 | `Number` |
+| reason | 不可用原因 | `String` |
+| value | 订单优惠金额，单位分 | `Number` |
+| condition | 格式化输出 value | `String` |
diff --git a/docs/src/doc.config.js b/docs/src/doc.config.js
index 844406b25..b3f8289a5 100644
--- a/docs/src/doc.config.js
+++ b/docs/src/doc.config.js
@@ -201,6 +201,10 @@ module.exports = {
                 "path": "/invalid-goods",
                 "title": "InvalidGoods 不可用商品列表"
               },
+              {
+                "path": "/order-coupon",
+                "title": "OrderCoupon 下单页优惠券"
+              },
               {
                 "path": "/order-goods",
                 "title": "OrderGoods 下单页商品列表"
diff --git a/package.json b/package.json
index 9333e4fe1..9fb48cae5 100644
--- a/package.json
+++ b/package.json
@@ -116,6 +116,6 @@
     "webpack": "^3.5.5",
     "webpack-dev-server": "^2.7.1",
     "webpack-merge": "^4.1.0",
-    "zan-doc": "^0.2.10"
+    "zan-doc": "^0.2.11"
   }
 }
diff --git a/packages/index.js b/packages/index.js
index ab30360ea..9338493a0 100644
--- a/packages/index.js
+++ b/packages/index.js
@@ -23,6 +23,8 @@ import InvalidGoods from './invalid-goods';
 import Lazyload from './lazyload';
 import Loading from './loading';
 import NoticeBar from './notice-bar';
+import OrderCoupon from './order-coupon';
+import OrderCouponList from './order-coupon-list';
 import OrderGoods from './order-goods';
 import Panel from './panel';
 import PayOrder from './pay-order';
@@ -71,6 +73,8 @@ const components = [
   InvalidGoods,
   Loading,
   NoticeBar,
+  OrderCoupon,
+  OrderCouponList,
   OrderGoods,
   Panel,
   PayOrder,
@@ -135,6 +139,8 @@ export {
   Lazyload,
   Loading,
   NoticeBar,
+  OrderCoupon,
+  OrderCouponList,
   OrderGoods,
   Panel,
   PayOrder,
diff --git a/packages/order-coupon-list/Coupon.vue b/packages/order-coupon-list/Coupon.vue
new file mode 100644
index 000000000..2ee3dff84
--- /dev/null
+++ b/packages/order-coupon-list/Coupon.vue
@@ -0,0 +1,71 @@
+<template>
+  <div :class="['van-order-coupon-coupon', { 'van-order-coupon-coupon--disabled': disabled }]">
+    <div class="van-order-coupon-coupon__head">
+      <div class="van-order-coupon-coupon__lines"></div>
+      <div class="van-order-coupon-coupon__gradient">
+        <h2 v-html="faceAmount" />
+        <p>{{ conditionMessage }}</p>
+      </div>
+    </div>
+    <div class="van-order-coupon-coupon__body">
+      <h2>{{ data.name }}</h2>
+      <span>{{ validPeriod }}</span>
+      <p v-if="disabled && data.reason">{{ data.reason }}</p>
+      <div class="van-order-coupon-coupon__corner" v-if="chosen">
+        <van-icon name="success" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Icon from '../icon';
+
+export default {
+  name: 'van-order-coupon-coupon',
+
+  components: {
+    [Icon.name]: Icon
+  },
+
+  props: {
+    data: Object,
+    chosen: Boolean,
+    disabled: Boolean
+  },
+
+  computed: {
+    validPeriod() {
+      return `${this.getDate(this.data.start_at)}-${this.getDate(this.data.end_at)}`;
+    },
+    faceAmount() {
+      return this.data.denominations !== 0
+        ? `<span>¥</span> ${this.formatAmount(this.data.denominations)}`
+        : this.data.discount !== 0
+          ? this.formatDiscount(this.data.discount)
+          : '';
+    },
+    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}元可用`;
+    }
+  },
+
+  methods: {
+    getDate(timeStamp) {
+      const date = new Date(timeStamp * 1000);
+      return `${date.getFullYear()}.${this.padZero(date.getMonth() + 1)}.${this.padZero(date.getDate())}`;
+    },
+    padZero(num) {
+      return (num < 10 ? '0' : '') + num;
+    },
+    formatDiscount(discount) {
+      return `${(discount / 10).toFixed(discount % 10 === 0 ? 0 : 1)}折`;
+    },
+    formatAmount(amount) {
+      return (amount / 100).toFixed(amount % 100 === 0 ? 0 : amount % 10 === 0 ? 1 : 2);
+    }
+  }
+};
+</script>
diff --git a/packages/order-coupon-list/index.vue b/packages/order-coupon-list/index.vue
new file mode 100644
index 000000000..4daead65b
--- /dev/null
+++ b/packages/order-coupon-list/index.vue
@@ -0,0 +1,153 @@
+<template>
+  <van-popup v-model="showPopup" position="bottom" class="van-order-coupon-list">
+    <van-cell-group class="van-order-coupon-list__top">
+      <van-field v-model="exchangeCode" :placeholder="inputPlaceholder" :maxlength="20" />
+      <van-button size="small" type="danger" class="van-order-coupon-list__exchange" :disabled="exchangeButtonDisabled || !exchangeCode.length" @click="onClickExchangeButton">{{ exchangeButtonText }}</van-button>
+    </van-cell-group>
+    <div class="van-order-coupon-list__list" ref="list">
+      <van-order-coupon-coupon
+        ref="card"
+        v-for="(item, index) in coupons"
+        :key="item.id || item.name"
+        :data="item"
+        :chosen="index === chosenCoupon"
+        @click.native="onClickCoupon(index)"
+      />
+      <h3 v-if="disabledCoupons.length">{{ disabledListTitle }}</h3>
+      <van-order-coupon-coupon
+        disabled
+        v-for="item in disabledCoupons"
+        :key="item.id || item.name"
+        :data="item"
+      />
+    </div>
+    <div class="van-order-coupon-list__close" @click="onClickNotUse">{{ closeButtonText }}</div>
+  </van-popup>
+</template>
+
+<script>
+import Cell from '../cell';
+import CellGroup from '../cell-group';
+import Coupon from './Coupon';
+import Field from '../field';
+import Popup from '../popup';
+import Button from '../button';
+
+export default {
+  name: 'van-order-coupon-list',
+
+  components: {
+    [Button.name]: Button,
+    [Cell.name]: Cell,
+    [CellGroup.name]: CellGroup,
+    [Field.name]: Field,
+    [Popup.name]: Popup,
+    [Coupon.name]: Coupon
+  },
+
+  model: {
+    prop: 'show'
+  },
+
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    },
+    chosenCoupon: {
+      type: Number,
+      default: -1
+    },
+    coupons: {
+      type: Array,
+      default: () => []
+    },
+    disabledCoupons: {
+      type: Array,
+      default: () => []
+    },
+    exchangeButtonText: {
+      type: String,
+      default: '兑换'
+    },
+    exchangeButtonDisabled: {
+      type: Boolean,
+      default: false
+    },
+    displayedCouponIndex: {
+      type: Number,
+      default: -1
+    },
+    closeButtonText: {
+      type: String,
+      default: '不使用优惠'
+    },
+    disabledListTitle: {
+      type: String,
+      default: '不可用优惠'
+    },
+    inputPlaceholder: {
+      type: String,
+      default: '请输入优惠码'
+    }
+  },
+
+  watch: {
+    show(val) {
+      this.showPopup = val;
+    },
+    showPopup(val) {
+      this.$emit('input', val);
+      this.scrollToTop();
+    },
+    displayedCouponIndex(val) {
+      this.scrollToShowCoupon(val);
+    }
+  },
+
+  data() {
+    return {
+      exchangeCode: '',
+      showPopup: this.show
+    };
+  },
+
+  mounted() {
+    this.scrollToShowCoupon(this.displayedCouponIndex);
+  },
+
+  methods: {
+    onClickNotUse() {
+      this.showPopup = false;
+      this.$emit('change', -1);
+    },
+    onClickCoupon(index) {
+      this.showPopup = false;
+      this.$emit('change', index);
+    },
+    onClickExchangeButton() {
+      this.$emit('exchange', this.exchangeCode);
+      this.exchangeCode = '';
+    },
+    // 滚动到特定优惠券的位置
+    scrollToShowCoupon(index) {
+      if (index === -1) {
+        return;
+      }
+
+      this.$nextTick(() => {
+        const { card, list } = this.$refs;
+
+        if (list && card && card[index]) {
+          list.scrollTop = card[index].$el.offsetTop - 100;
+        }
+      });
+    },
+    scrollToTop() {
+      const { list } = this.$refs;
+
+      list.scrollTop = 0;
+    }
+  }
+};
+</script>
diff --git a/packages/order-coupon/index.vue b/packages/order-coupon/index.vue
new file mode 100644
index 000000000..68149c02f
--- /dev/null
+++ b/packages/order-coupon/index.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="van-order-coupon">
+    <van-cell-group>
+      <van-cell title="优惠" :isLink="editable" @click="$emit('click')">
+        <div v-if="coupons[chosenCoupon]">
+          <h2>{{ amount }}</h2>
+          <span>{{ coupons[chosenCoupon].condition }}</span>
+        </div>
+        <template v-else>{{ guide }}</template>
+      </van-cell>
+    </van-cell-group>
+  </div>
+</template>
+
+<script>
+import Cell from '../cell';
+import CellGroup from '../cell-group';
+
+export default {
+  name: 'van-order-coupon',
+
+  components: {
+    [Cell.name]: Cell,
+    [CellGroup.name]: CellGroup
+  },
+
+  model: {
+    prop: 'chosenCoupon'
+  },
+
+  props: {
+    coupons: {
+      type: Array,
+      default: () => []
+    },
+    chosenCoupon: {
+      type: Number,
+      default: -1
+    },
+    editable: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  computed: {
+    guide() {
+      return this.coupons.length === 0 ? '使用优惠' : `您有 ${this.coupons.length} 个可用优惠`;
+    },
+    amount() {
+      const coupon = this.coupons[this.chosenCoupon];
+      return `${coupon.name} 省￥${(coupon.value / 100).toFixed(2)}`;
+    }
+  }
+};
+</script>
diff --git a/packages/vant-css/assets/icons.sketch b/packages/vant-css/assets/icons.sketch
index dbb01a8b8..f81941d43 100644
Binary files a/packages/vant-css/assets/icons.sketch and b/packages/vant-css/assets/icons.sketch differ
diff --git a/packages/vant-css/src/index.css b/packages/vant-css/src/index.css
index 25bebf27e..b5b47e545 100644
--- a/packages/vant-css/src/index.css
+++ b/packages/vant-css/src/index.css
@@ -1,40 +1,51 @@
 /**
-  css组件库入口，组装成css组件库
+ * style entry
  */
+
+/* base */
 @import './reset.css';
+
+/* common components */
+@import './col.css';
+@import './row.css';
+@import './badge.css';
 @import './button.css';
 @import './cell.css';
 @import './cell-swipe.css';
 @import './card.css';
-@import './deep-select.css';
-@import './dialog.css';
-@import './field.css';
 @import './icon.css';
 @import './loading.css';
-@import './picker.css';
 @import './popup.css';
-@import './radio.css';
-@import './switch.css';
-@import './badge.css';
 @import './search.css';
 @import './panel.css';
 @import './steps.css';
 @import './tag.css';
-@import './checkbox.css';
 @import './tab.css';
-@import './col.css';
-@import './row.css';
 @import './image-preview.css';
-@import './actionsheet.css';
 @import './quantity.css';
 @import './progress.css';
-@import './toast.css';
-@import './uploader.css';
 @import './swipe.css';
-@import './notice-bar.css';
-@import './switch-cell.css';
+
+/* form components */
+@import './checkbox.css';
+@import './field.css';
+@import './radio.css';
+@import './switch.css';
+@import './uploader.css';
+
+/* action components */
+@import './actionsheet.css';
+@import './dialog.css';
+@import './picker.css';
+@import './toast.css';
+
+/* business components */
+@import './deep-select.css';
 @import './express-way.css';
-@import './pay-order.css';
-@import './order-goods.css';
-@import './invalid-goods.css';
 @import './goods-action.css';
+@import './invalid-goods.css';
+@import './notice-bar.css';
+@import './order-coupon.css';
+@import './order-goods.css';
+@import './pay-order.css';
+@import './switch-cell.css';
diff --git a/packages/vant-css/src/order-coupon.css b/packages/vant-css/src/order-coupon.css
new file mode 100644
index 000000000..80f824c34
--- /dev/null
+++ b/packages/vant-css/src/order-coupon.css
@@ -0,0 +1,196 @@
+@import "./mixins/border_retina.css";
+@import "./mixins/ellipsis.css";
+
+.van-order-coupon {
+  &-list {
+    height: 100%;
+    background-color: #f8f8f8;
+
+    &__top {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      z-index: 1;
+      box-sizing: border-box;
+
+      &::after {
+        border-top: none;
+      }
+    }
+
+    &__exchange {
+      top: 6px;
+      right: 15px;
+      position: absolute;
+      border-radius: 2px;
+    }
+
+    &__list {
+      padding: 60px 0;
+      max-height: 100%;
+      overflow-y: auto;
+      box-sizing: border-box;
+      -webkit-overflow-scrolling: touch;
+
+      h3 {
+        color: #999;
+        margin: 15px 0;
+        font-size: 14px;
+        position: relative;
+        text-align: center;
+
+        &::before,
+        &::after {
+          content: ' ';
+          width: 45px;
+          height: 1px;
+          top: 50%;
+          position: absolute;
+          background-color: #e5e5e5;
+        }
+
+        &::before {
+          left: 50%;
+          margin-left: -95px;
+        }
+
+        &::after {
+          right: 50%;
+          margin-right: -95px;
+        }
+      }
+
+      .van-order-coupon-card + h3 {
+        margin-top: 30px;
+      }
+    }
+
+    &__close {
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      font-size: 15px;
+      line-height: 45px;
+      text-align: center;
+      position: absolute;
+      background-color: #fff;
+
+      &::after {
+        @mixin border-retina (top);
+      }
+    }
+  }
+
+  &-coupon {
+    display: flex;
+    height: 100px;
+    margin: 0 15px 10px;
+
+    &__head {
+      display: flex;
+      height: 100%;
+      min-width: 126px;
+    }
+
+    &__lines {
+      height: 100%;
+      min-width: 18px;
+      background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAADICAMAAAC3WLNTAAAAclBMVEUAAAD/cHD/gID/amr/a2v/cXH/amr/dHT/cHD/cnL/bW3/aGj/dXX/gID/Z2f/Z2f/bW3/dXX/Zmb/dnb/Z2f/d3f/a2v/dnb/c3P/dXX/dHT/eHj/dHT/amr/cXH/bm7/aGj/bW3/cHD/bGz/dnb/Z2fPFIA9AAAAHHRSTlMANwyaQpoMQkLm5uaaBvPVvZSUj48rK/Pz1dVCCskVeAAABKBJREFUWMOFmdd2GzEMRKH03ntW0a5l//8vBh0hB2JgcZ/umRkC4JNJ6uvnn983rvvtnos/UzHy9uP9poj/7qGY+aCIcULxB6CPiYQjKn1VrzVIn7eqCDVT9AtlNlD6sWFBpg7RAxBiI/To9GYi8ILE9fwlaI0YSf1ugG2G6E17w22ETg0DSo/6UBtAHbKBHXJbHxwvmdBzBJzCZiLiII4FpzgNGKNbpj9/tj8LTA8hgdkZYq01Jkr/1yJmVpxn4vrPBQXSVEuQAMFyO/ssoAi1ghRZp5cBPzVkQdmqeLAFxFQSPUdaT+2GwfTQKXrQY/6kjIH8AGHr0Q4wDF5MQtgCL0FKDJtZEGrpWKoEQY4KGDiAgNpQ6Q6E/oDSHUrNIDEDXAEFYXJQurvrHEdIkYljYsBIAFRCO5FatosE0QPpUUkh7GoNeLogrg1xvXhpGHZrWDrL1QvV+jICk/ZPPYQbXTC1eFIayjlcVIcMAcqYtOOy7ChWwZWCS252lHnBhFMolM0MpAd9LBf+48Iput2FASH4mBIKMcSVQq1hKF1MKYgJKyV1teqUyi8viVBhl6IQilwru+RSigsgp1ALleyU1B1ApZUAQi7Tx5cB/yOkFLx8W5XABqHQyqVToORyH4zz9S0hpmAf/CEMfrUQhsWTSmQOxhRATkRLBUG7SpYYBM/xFJPQi1FHuCG+Mq8SCKwY1rKxHEcB0AqxOxZIJCNG9A+5ooiFWikLZuMhRfggWOEFUgSJuqRChWEsg67GtMn9Ry5zE/u/nWPEbvwLuT6/QFModGToGkouhSvBA358RK5yLEaVuJ68cs9b4W3pHOk6Lx/Sesw3vEQwlPKHEFJ9LH9SdUOkEjrqhs4gdOJuFQepPLgP5+KnU3rCkazzfSprphP9RthYrlKHnl6LrlaBtBSdz9ezMemJkBLnUEpqgrgESQyWXpXCT4jMlVqViT9KFlhY2VWsrAm6Zi6/YPZLQIMSCQ4ab3b2SerfYRvkgEPmNWgdDhlZrVC5Syk94wEHUZOuCx65Kh6sMg1dzaUbu8VEVb47Far52BTj5cdDqCtCt5jzJzXd8NATz9qhZwqE35TrUnaBlVJ5evBizoOUOVoLlHG1EktHb2YxpVWLKmMJwDHnjtp52kekYgnnajQh1dRKL9A+C4VU7hdNjCHDnlqmHXMJWE2F4IDp7fa9cxxykSL8wfs5J8FFaO/tMjpDZohYgSQyejDUeVCqUL2nDni/wYSjrsprj7XfkMqlY+xmdF/fCgb5EzppsxDxWP6kNBTGutrHIVFyBJc57fYcD3IVPLrQZbcW7FH9alkzQ6iftY7FVXKKaPcP4VdELXrYAUNoYILYV0qVbKEUlwS7B/4DysVKCQwtFmTCKxpT0ANKwe0emlT2WWeqFUwlhkRu0S0ZMCPLfvqqNEr1NGLp+lgpF+srwVqsoFPY4RULeiZ3vHnD3SEGeqnBjhn5tY6uxK0SrB1QtkAIw1qpaGYJ4axtLMbYBRFjyIjg+lgBlVpT9G6ghEGO3g9M3yv6MhB+ZqVvKIR29CmBm6D8uxCRiSOmJq0dM0l9+/L+3crwL+JFMIL5LZlUAAAAAElFTkSuQmCC') no-repeat;
+      background-size: 18px 100px;
+    }
+
+    &__gradient {
+      flex: 1;
+      color: #fff;
+      display: flex;
+      margin-left: -1px; /* hack for flex space */
+      text-align: center;
+      padding-right: 16px;
+      flex-direction: column;
+      justify-content: center;
+      background-image: linear-gradient(45deg, #ff6868, #ff8c8c);
+
+      h2 {
+        font-size: 22px;
+        margin-bottom: 10px;
+
+        span {
+          font-size: 16px;
+        }
+      }
+
+      p {
+        font-size: 14px;
+        font-weight: 300;
+        @mixin multi-ellipsis 1;
+      }
+    }
+
+    &__body {
+      flex: 1;
+      height: 100%;
+      display: flex;
+      padding: 0 15px;
+      overflow: hidden;
+      position: relative;
+      background-color: #fff;
+      flex-direction: column;
+      justify-content: center;
+      border-radius: 0 4px 4px 0;
+
+      h2 {
+        opacity: .8;
+        font-size: 16px;
+      }
+
+      p,
+      span {
+        color: #999;
+        font-size: 12px;
+        margin-top: 5px;
+      }
+
+      p,
+      h2,
+      span {
+        line-height: 1.4;
+        @mixin multi-ellipsis 1;
+      }
+    }
+
+    &__corner {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 0;
+      height: 0;
+      border-style: solid;
+      border-width: 18px 19px;
+      border-radius: 0 4px 0 0;
+      border-color: #f44 #f44 transparent transparent;
+
+      .van-icon {
+        position: absolute;
+        top: -13px;
+        right: -13px;
+        color: #fff;
+        font-size: 12px;
+        
+        &::before {
+          font-weight: bold;
+        }
+      }
+    }
+
+    &--disabled {
+      .van-order-coupon-coupon__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==');
+      }
+
+      .van-order-coupon-coupon__gradient {
+        background-image: linear-gradient(45deg, #a4a9b2, #b7bcc3);
+      }
+    }
+  }
+}
diff --git a/test/unit/specs/order-coupon.spec.js b/test/unit/specs/order-coupon.spec.js
new file mode 100644
index 000000000..0a052c07e
--- /dev/null
+++ b/test/unit/specs/order-coupon.spec.js
@@ -0,0 +1,321 @@
+import OrderCoupon from 'packages/order-coupon';
+import OrderCouponList from 'packages/order-coupon-list';
+import { mount } from 'avoriaz';
+import { DOMChecker } from '../utils';
+
+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 emptyCoupon = {
+  denominations: 0,
+  discount: 0
+};
+
+const disabledCoupon = {
+  ...coupon,
+  avaliable: 0,
+  reason: '未满足使用门槛'
+};
+
+const disabledDiscountCoupon = {
+  ...discountCoupon,
+  avaliable: 0,
+  reason: '未满足使用门槛'
+};
+
+describe('OrderCoupon', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('no coupon', () => {
+    wrapper = mount(OrderCoupon, {});
+
+    DOMChecker(wrapper, {
+      text: {
+        '.van-cell__value--link': '使用优惠'
+      }
+    });
+  });
+
+  it('has two coupon', () => {
+    wrapper = mount(OrderCoupon, {
+      propsData: {
+        coupons: [coupon, discountCoupon]
+      }
+    });
+
+    DOMChecker(wrapper, {
+      text: {
+        '.van-cell__value--link': '您有 2 个可用优惠'
+      }
+    });
+  });
+
+  it('select first coupon', () => {
+    wrapper = mount(OrderCoupon, {
+      propsData: {
+        chosenCoupon: 0,
+        coupons: [coupon, discountCoupon]
+      }
+    });
+
+    DOMChecker(wrapper, {
+      text: {
+        '.van-cell__value--link h2': '新手专用优惠券 省￥1.50',
+        '.van-cell__value--link span': '下单立减 1.50 元'
+      },
+      count: {
+        '.van-cell__right-icon': 1
+      }
+    });
+  });
+
+  it('not editable', () => {
+    wrapper = mount(OrderCoupon, {
+      propsData: {
+        chosenCoupon: 0,
+        coupons: [coupon, discountCoupon],
+        editable: false
+      }
+    });
+
+    DOMChecker(wrapper, {
+      text: {
+        '.van-cell__value h2': '新手专用优惠券 省￥1.50',
+        '.van-cell__value span': '下单立减 1.50 元'
+      },
+      count: {
+        '.van-cell__right-icon': 0
+      }
+    });
+  });
+});
+
+describe('OrderCouponList', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('no coupon', () => {
+    wrapper = mount(OrderCouponList, {
+      propsData: {
+        chosenCoupon: -1
+      }
+    });
+
+    DOMChecker(wrapper, {
+      count: {
+        '.van-order-coupon-coupon': 0,
+        '.van-order-coupon-coupon--disabled': 0,
+        '.van-order-coupon-list__list h3': 0
+      }
+    });
+  });
+
+  it('has two coupon', () => {
+    wrapper = mount(OrderCouponList, {
+      propsData: {
+        chosenCoupon: -1,
+        coupons: [coupon, discountCoupon],
+        disabledCoupons: [disabledCoupon, disabledDiscountCoupon]
+      }
+    });
+    DOMChecker(wrapper, {
+      count: {
+        '.van-order-coupon-coupon': 4,
+        '.van-order-coupon-coupon--disabled': 2,
+        '.van-order-coupon-list__list h3': 1
+      }
+    });
+  });
+
+  it('switch to first coupon', (done) => {
+    wrapper = mount(OrderCouponList, {
+      attachToDocument: true,
+      propsData: {
+        show: true,
+        chosenCoupon: -1,
+        coupons: [coupon, discountCoupon],
+        disabledCoupons: [disabledCoupon, disabledDiscountCoupon]
+      }
+    });
+
+    wrapper.vm.$on('change', (index) => {
+      wrapper.vm.chosenCoupon = index;
+    });
+
+    // 弹出 popup
+    setTimeout(() => {
+      expect(wrapper.find('.van-order-coupon-list')[0].hasStyle('display', 'none')).to.equal(false);
+      wrapper.find('.van-order-coupon-coupon')[0].trigger('click');
+
+      setTimeout(() => {
+        expect(wrapper.vm.chosenCoupon).to.equal(0);
+        done();
+      }, 300);
+    }, 300);
+  });
+
+  it('cancel select coupon', (done) => {
+    wrapper = mount(OrderCouponList, {
+      attachToDocument: true,
+      propsData: {
+        show: false,
+        chosenCoupon: 0,
+        displayedCouponIndex: 0,
+        coupons: [coupon, discountCoupon],
+        disabledCoupons: [disabledCoupon, disabledDiscountCoupon]
+      }
+    });
+
+    wrapper.vm.show = true;
+
+    wrapper.vm.$on('change', (index) => {
+      wrapper.vm.chosenCoupon = index;
+      wrapper.vm.displayedCouponIndex = index;
+    });
+
+    setTimeout(() => {
+      wrapper.find('.van-order-coupon-list__close')[0].trigger('click');
+      setTimeout(() => {
+        expect(wrapper.vm.chosenCoupon).to.equal(-1);
+        expect(wrapper.find('.van-order-coupon-list')[0].hasStyle('display', 'none')).to.equal(true);
+        done();
+      }, 500);
+    }, 500);
+  });
+
+  it('denominations format', () => {
+    wrapper = mount(OrderCouponList, {
+      attachToDocument: true,
+      propsData: {
+        coupons: [coupon, {
+          ...coupon,
+          denominations: 10
+        }, {
+          ...coupon,
+          denominations: 100
+        }, {
+          ...coupon,
+          denominations: 135
+        }, {
+          ...coupon,
+          denominations: 0
+        }]
+      }
+    });
+
+    expect(wrapper.find('.van-order-coupon-coupon__gradient h2')[0].text()).to.equal('¥ 1.5');
+    expect(wrapper.find('.van-order-coupon-coupon__gradient h2')[1].text()).to.equal('¥ 0.1');
+    expect(wrapper.find('.van-order-coupon-coupon__gradient h2')[2].text()).to.equal('¥ 1');
+    expect(wrapper.find('.van-order-coupon-coupon__gradient h2')[3].text()).to.equal('¥ 1.35');
+    expect(wrapper.find('.van-order-coupon-coupon__gradient h2')[4].text()).to.equal('');
+  });
+
+  it('discount format', () => {
+    wrapper = mount(OrderCouponList, {
+      attachToDocument: true,
+      propsData: {
+        coupons: [discountCoupon, {
+          ...discountCoupon,
+          discount: 10
+        }, {
+          ...discountCoupon,
+          discount: 0
+        }]
+      }
+    });
+
+    expect(wrapper.find('.van-order-coupon-coupon__gradient h2')[0].text()).to.equal('8.8折');
+    expect(wrapper.find('.van-order-coupon-coupon__gradient h2')[1].text()).to.equal('1折');
+    expect(wrapper.find('.van-order-coupon-coupon__gradient h2')[2].text()).to.equal('');
+  });
+
+  it('add coupon', (done) => {
+    wrapper = mount(OrderCouponList, {
+      attachToDocument: true,
+      propsData: {
+        show: true,
+        chosenCoupon: 0,
+        coupons: [coupon, discountCoupon, emptyCoupon],
+        disabledCoupons: [disabledCoupon, disabledDiscountCoupon]
+      }
+    });
+
+    const code = '123123';
+
+    wrapper.vm.$on('exchange', (code) => {
+      expect(code).to.equal(code);
+      wrapper.vm.coupons.push(coupon);
+    });
+
+    setTimeout(() => {
+      DOMChecker(wrapper, {
+        count: {
+          '.van-button--disabled': 1
+        }
+      });
+
+      wrapper.find('.van-field__control')[0].element.value = code;
+      wrapper.find('.van-field__control')[0].trigger('input');
+
+      setTimeout(() => {
+        wrapper.find('.van-order-coupon-list__exchange')[0].trigger('click');
+        DOMChecker(wrapper, {
+          count: {
+            '.van-button--disabled': 0
+          }
+        });
+
+        setTimeout(() => {
+          expect(wrapper.find('.van-order-coupon-list')[0].hasStyle('display', 'none')).to.equal(false);
+          DOMChecker(wrapper, {
+            count: {
+              '.van-button--disabled': 1,
+              '.van-order-coupon-coupon': 6,
+              '.van-order-coupon-coupon--disabled': 2
+            }
+          });
+          done();
+        }, 300);
+      }, 300);
+    }, 300);
+  });
+
+  it('displayedCouponIndex out of range', (done) => {
+    wrapper = mount(OrderCouponList, {
+      propsData: {
+        show: true,
+        displayedCouponIndex: -100,
+        coupons: [coupon, discountCoupon, emptyCoupon]
+      }
+    });
+
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper.vm.chosenCoupon).to.equal(-1);
+      done();
+    });
+  });
+});
diff --git a/yarn.lock b/yarn.lock
index b054d02b1..c2000016c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7800,9 +7800,9 @@ yeast@0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
 
-zan-doc@^0.2.10:
-  version "0.2.10"
-  resolved "https://registry.npmjs.org/zan-doc/-/zan-doc-0.2.10.tgz#eb08f72100a873dd8ae0b2eb7f7454d3ff256322"
+zan-doc@^0.2.11:
+  version "0.2.11"
+  resolved "https://registry.npmjs.org/zan-doc/-/zan-doc-0.2.11.tgz#dab35d0c0fa10fc91a28129b6ca026f62e3da78d"
   dependencies:
     cheerio "0.22.0"
     decamelize "^1.2.0"