[Improvement] Coupon i18n (#431)

2017-12-14 10:46:26 +08:00
parent c6a37bba5b
commit 1d105afc70
10 changed files with 175 additions and 116 deletions
@@ -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);
    }
  }
 });
@@ -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);
@@ -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" />
-      <van-button size="small" type="danger" class="van-coupon-list__exchange" :disabled="exchangeButtonDisabled || !exchangeCode.length" @click="onClickExchangeButton">{{ exchangeButtonText }}</van-button>
+      <field
+        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
@@ -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}`
  }
 };
@@ -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}元可用`
  }
 };
@@ -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;
+      &:active {
+        .van-coupon-item__body {
+          background: $white;
+        }
      }
    }
  }