Coupon: not contain popup by default

docs/examples-docs/coupon.md

@@ -1,5 +1,3 @@
-## Coupon 优惠券选择器
-
 <script>
 import { Toast } from 'packages';
 
@@ -49,6 +47,7 @@ export default {
 
   methods: {
     onChange(index) {
+      this.showList = false;      
       this.chosenCoupon = index;
     },
     onExchange(code) {
@@ -59,6 +58,16 @@ export default {
 }
 </script>
 
+<style>
+.demo-coupon {
+  .van-popup {
+    height: 100%;
+  }
+}
+</style>
+
+## Coupon 优惠券选择器
+
 ### 使用指南
 ``` javascript
 import { CouponCell, CouponList } from 'vant';
@@ -81,14 +90,15 @@ Vue.component(CouponList.name, CouponList);
 ></van-coupon-cell>
 
 <!-- 优惠券列表 -->
-<van-coupon-list
+<van-popup v-model="showList" position="bottom">
-  v-model="showList"
+  <van-coupon-list
-  :coupons="coupons"
+    :coupons="coupons"
-  :chosen-coupon="chosenCoupon"
+    :chosen-coupon="chosenCoupon"
-  :disabled-coupons="disabledCoupons"
+    :disabled-coupons="disabledCoupons"
-  @change="onChange"
+    @change="onChange"
-  @exchange="onExchange"
+    @exchange="onExchange"
-></van-coupon-list>
+  ></van-coupon-list>
+</van-popup>
 ```
 
 ```javascript
@@ -116,6 +126,7 @@ export default {
 
   methods: {
     onChange(index) {
+      this.showList = false;
       this.chosenCoupon = index;
     },
     onExchange(code) {

packages/coupon-list/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <van-popup v-model="showPopup" position="bottom" class="van-coupon-list">
+  <div class="van-coupon-list">
     <van-cell-group class="van-coupon-list__top">
       <van-field v-model="exchangeCode" :placeholder="inputPlaceholder" :maxlength="20" />
       <van-button size="small" type="danger" class="van-coupon-list__exchange" :disabled="exchangeButtonDisabled || !exchangeCode.length" @click="onClickExchangeButton">{{ exchangeButtonText }}</van-button>
@@ -22,7 +22,7 @@
       />
     </div>
     <div class="van-coupon-list__close van-hairline--top" @click="onClickNotUse">{{ closeButtonText }}</div>
-  </van-popup>
+  </div>
 </template>
 
 <script>
@@ -45,15 +45,7 @@ export default {
     [Item.name]: Item
   },
 
-  model: {
-    prop: 'show'
-  },
-
   props: {
-    show: {
-      type: Boolean,
-      default: false
-    },
     chosenCoupon: {
       type: Number,
       default: -1
@@ -93,13 +85,6 @@ export default {
   },
 
   watch: {
-    show(val) {
-      this.showPopup = val;
-    },
-    showPopup(val) {
-      this.$emit('input', val);
-      this.scrollToTop();
-    },
     displayedCouponIndex(val) {
       this.scrollToShowCoupon(val);
     }
@@ -107,8 +92,7 @@ export default {
 
   data() {
     return {
-      exchangeCode: '',
+      exchangeCode: ''
-      showPopup: this.show
     };
   },
 
@@ -118,11 +102,9 @@ export default {
 
   methods: {
     onClickNotUse() {
-      this.showPopup = false;
       this.$emit('change', -1);
     },
     onClickCoupon(index) {
-      this.showPopup = false;
       this.$emit('change', index);
     },
     onClickExchangeButton() {
@@ -142,11 +124,6 @@ export default {
           list.scrollTop = card[index].$el.offsetTop - 100;
         }
       });
-    },
-    scrollToTop() {
-      const { list } = this.$refs;
-
-      list.scrollTop = 0;
     }
   }
 };

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

@@ -4,6 +4,7 @@
 .van-coupon {
   &-list {
     height: 100%;
+    position: relative;
     background-color: $background-color;
 
     &__top {
@@ -33,6 +34,7 @@
         color: $gray-dark;
         margin: 15px 0;
         font-size: 14px;
+        font-weight: normal;
         position: relative;
         text-align: center;
 
@@ -105,7 +107,8 @@
 
       h2 {
         font-size: 22px;
-        margin-bottom: 10px;
+        font-weight: normal;
+        margin: 0 0 10px;
 
         span {
           font-size: 16px;
@@ -113,6 +116,7 @@
       }
 
       p {
+        margin: 0;
         font-size: 14px;
         font-weight: 300;
         @mixin multi-ellipsis 1;
@@ -132,8 +136,10 @@
       border-radius: 0 4px 4px 0;
 
       h2 {
+        margin: 0;
         opacity: .8;
         font-size: 16px;
+        font-weight: normal;
       }
 
       p,