[Improvement] component use bem mixin (#921)

packages/coupon-list/Item.vue

@@ -1,17 +1,17 @@
 <template>
-  <div class="van-coupon-item" :class="{ 'van-coupon-item--disabled': disabled }">
-    <div class="van-coupon-item__head">
-      <div class="van-coupon-item__lines" />
-      <div class="van-coupon-item__gradient">
+  <div :class="b({ disabled })">
+    <div :class="b('head')">
+      <div :class="b('lines')" />
+      <div :class="b('gradient')">
         <h2 v-html="faceAmount" />
         <p>{{ conditionMessage }}</p>
       </div>
     </div>
-    <div class="van-coupon-item__body">
+    <div :class="b('body')">
       <h2>{{ data.name }}</h2>
       <span>{{ validPeriod }}</span>
       <p v-if="disabled && data.reason">{{ data.reason }}</p>
-      <div class="van-coupon-item__corner" v-if="chosen">
+      <div v-if="chosen" :class="b('corner')" >
         <icon name="success" />
       </div>
     </div>
@@ -34,6 +34,7 @@ export default create({
     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)}`
@@ -41,6 +42,7 @@ export default create({
           ? this.formatDiscount(this.data.discount)
           : '';
     },
+
     conditionMessage() {
       let condition = this.data.origin_condition;
       condition = condition % 100 === 0 ? Math.round(condition / 100) : (condition / 100).toFixed(2);
@@ -53,12 +55,15 @@ export default create({
       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 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,9 @@
 <template>
-  <div class="van-coupon-list">
-    <cell-group class="van-coupon-list__top" v-if="showExchangeBar">
+  <div :class="b()">
+    <cell-group v-if="showExchangeBar" :class="b('top')">
       <field
-        class="van-coupon-list__filed van-hairline--surround"
+        :class="b('field')"
+        class="van-hairline--surround"
         v-model="currentCode"
         :placeholder="inputPlaceholder || $t('placeholder')"
         :maxlength="20"
@@ -10,14 +11,14 @@
       <van-button
         size="small"
         type="danger"
-        class="van-coupon-list__exchange"
+        :class="b('exchange')"
         :text="exchangeButtonText || $t('exchange')"
         :loading="exchangeButtonLoading"
         :disabled="buttonDisabled"
         @click="onClickExchangeButton"
       />
     </cell-group>
-    <div class="van-coupon-list__list" :class="{ 'van-coupon-list--with-exchange': showExchangeBar }" ref="list">
+    <div :class="b('list', { 'with-exchange': showExchangeBar })" ref="list">
       <coupon-item
         ref="card"
         v-for="(item, index) in coupons"
@@ -33,7 +34,7 @@
         :key="item.id || item.name"
         :data="item"
       />
-      <div class="van-coupon-list__empty" v-if="!coupons.length && !disabledCoupons.length">
+      <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>
@@ -41,7 +42,8 @@
     <div
       v-show="showCloseButton"
       v-text="closeButtonText || $t('close')"
-      class="van-coupon-list__close van-hairline--top"
+      :class="b('close')"
+      class="van-hairline--top"
       @click="$emit('change', -1)"
     />
   </div>