[Improvement] Coupon: upgrade style (#1636)

packages/coupon-list/index.vue

@@ -1,15 +1,16 @@
 <template>
   <div :class="b()">
-    <cell-group v-if="showExchangeBar" :class="b('top')">
-      <field
-        v-model="currentCode"
-        clearable
-        :class="b('field')"
-        class="van-hairline--surround"
-        :placeholder="inputPlaceholder || $t('placeholder')"
-        :maxlength="20"
-      />
+    <field
+      v-if="showExchangeBar"
+      v-model="currentCode"
+      clearable
+      :border="false"
+      :class="b('field')"
+      :placeholder="inputPlaceholder || $t('placeholder')"
+      :maxlength="20"
+    >
       <van-button
+        slot="button"
         size="small"
         type="danger"
         :class="b('exchange')"
@@ -18,33 +19,44 @@
         :disabled="buttonDisabled"
         @click="onClickExchangeButton"
       />
-    </cell-group>
-    <div :class="b('list', { 'with-exchange': showExchangeBar })" ref="list">
-      <coupon-item
-        ref="card"
-        v-for="(item, index) in coupons"
-        :key="item.id || item.name"
-        :data="item"
-        :chosen="index === chosenCoupon"
-        @click.native="$emit('change', index)"
-      />
-      <h3 v-if="disabledCoupons.length">{{ disabledListTitle || $t('disabled') }}</h3>
-      <coupon-item
-        disabled
-        v-for="item in disabledCoupons"
-        :key="item.id || item.name"
-        :data="item"
-      />
-      <div v-if="!coupons.length && !disabledCoupons.length" :class="b('empty')">
-        <img src="https://img.yzcdn.cn/v2/image/wap/trade/new_order/empty@2x.png" >
-        <p>{{ $t('empty') }}</p>
-      </div>
-    </div>
-    <div
+    </field>
+    <tabs v-model="tab" :class="b('tab')" :line-width="120">
+      <tab :title="title">
+        <div :class="b('list')" :style="listStyle">
+          <coupon-item
+            ref="card"
+            v-for="(item, index) in coupons"
+            :key="item.id || item.name"
+            :data="item"
+            :chosen="index === chosenCoupon"
+            @click.native="$emit('change', index)"
+          />
+          <div v-if="!coupons.length" :class="b('empty')">
+            <img src="https://img.yzcdn.cn/v2/image/wap/trade/new_order/empty@2x.png" >
+            <p>{{ $t('empty') }}</p>
+          </div>
+        </div>
+      </tab>
+      <tab :title="disabledTitle">
+        <div :class="b('list')" :style="listStyle">
+          <coupon-item
+            disabled
+            v-for="item in disabledCoupons"
+            :key="item.id || item.name"
+            :data="item"
+          />
+          <div v-if="!disabledCoupons.length" :class="b('empty')">
+            <img src="https://img.yzcdn.cn/v2/image/wap/trade/new_order/empty@2x.png" >
+            <p>{{ $t('empty') }}</p>
+          </div>
+        </div>
+      </tab>
+    </tabs>
+    <van-button
       v-show="showCloseButton"
-      v-text="closeButtonText || $t('close')"
+      size="large"
       :class="b('close')"
-      class="van-hairline--top"
+      :text="closeButtonText || $t('close')"
       @click="$emit('change', -1)"
     />
   </div>
@@ -55,13 +67,17 @@ import create from '../utils/create';
 import CouponItem from './Item';
 import Field from '../field';
 import VanButton from '../button';
+import Tab from '../tab';
+import Tabs from '../tabs';
 
 export default create({
   name: 'coupon-list',
 
   components: {
-    VanButton,
+    Tab,
+    Tabs,
     Field,
+    VanButton,
     CouponItem
   },
 
@@ -109,6 +125,8 @@ export default create({
 
   data() {
     return {
+      tab: 0,
+      winHeight: window.innerHeight,
       currentCode: this.code || ''
     };
   },
@@ -120,6 +138,20 @@ export default create({
         (this.exchangeButtonDisabled ||
           this.currentCode.length < this.exchangeMinLength)
       );
+    },
+
+    title() {
+      return `${this.$t('enable')} (${this.coupons.length})`;
+    },
+
+    disabledTitle() {
+      return `${this.$t('disabled')} (${this.disabledCoupons.length})`;
+    },
+
+    listStyle() {
+      return {
+        height: this.winHeight - (this.showExchangeBar ? 140 : 94) + 'px'
+      };
     }
   },