[Improvement] Sku: support i18n (#439)

packages/sku/components/SkuActions.vue

@@ -1,14 +1,15 @@
 <template>
   <div class="van-sku-actions">
-    <van-button v-if="showAddCartBtn" bottomAction @click="onAddCartClicked">加入购物车</van-button>
-    <van-button type="primary" bottomAction @click="onBuyClicked">{{ buyText }}</van-button>
+    <van-button v-if="showAddCartBtn" bottomAction @click="onAddCartClicked">{{ $t('cart') }}</van-button>
+    <van-button type="primary" bottomAction @click="onBuyClicked">{{ buyText || $t('buy') }}</van-button>
   </div>
 </template>
 
 <script>
 import VanButton from '../../button';
+import { create } from '../../utils';
 
-export default {
+export default create({
   name: 'van-sku-actions',
 
   components: {
@@ -16,12 +17,9 @@ export default {
   },
 
   props: {
+    buyText: String,
     skuEventBus: Object,
-    showAddCartBtn: Boolean,
-    buyText: {
-      type: String,
-      default: '立即购买'
-    }
+    showAddCartBtn: Boolean
   },
 
   methods: {
@@ -32,5 +30,5 @@ export default {
       this.skuEventBus.$emit('sku:buy');
     }
   }
-};
+});
 </script>

packages/sku/components/SkuHeader.vue

@@ -12,7 +12,9 @@
 </template>
 
 <script>
-export default {
+import { create } from '../../utils';
+
+export default create({
   name: 'van-sku-header',
 
   props: {
@@ -62,5 +64,5 @@ export default {
       }
     }
   }
-};
+});
 </script>

packages/sku/components/SkuMessages.vue

@@ -6,7 +6,7 @@
         :key="`${goodsId}-${index}`"
         :required="message.required == '1'"
         :label="message.name"
-        :placeholder="placeholderMap.textarea"
+        :placeholder="getPlaceholder('textarea')"
         type="textarea"
         v-model="messageValues[index]">
       </field>
@@ -14,7 +14,7 @@
         :key="`${goodsId}-${index}`"
         :required="message.required == '1'"
         :label="message.name"
-        :placeholder="placeholderMap[message.type]"
+        :placeholder="getPlaceholder(message.type)"
         :type="getType(message)"
         v-model="messageValues[index]">
       </field>
@@ -23,13 +23,13 @@
 </template>
 
 <script>
+import { create } from '../../utils';
 import Field from '../../field';
 import CellGroup from '../../cell-group';
 import validateEmail from '../../utils/validate/email';
 import validateNumber from '../../utils/validate/number';
-import { DEFAULT_PLACEHOLDER_MAP } from '../constants';
 
-export default {
+export default create({
   name: 'van-sku-messages',
 
   components: {
@@ -43,12 +43,6 @@ export default {
     goodsId: [Number, String]
   },
 
-  data() {
-    return {
-      placeholderMap: Object.assign({}, DEFAULT_PLACEHOLDER_MAP, this.messagePlaceholderMap)
-    };
-  },
-
   computed: {
     internalMessages() {
       if (Object.prototype.toString.call(this.messages) === '[object Array]') {
@@ -56,6 +50,7 @@ export default {
       }
       return [];
     },
+
     messageValues() {
       const messageValues = [];
       this.internalMessages.forEach((message, index) => {
@@ -71,6 +66,7 @@ export default {
       if (type === 'id_no') return 'text';
       return datetime > 0 ? 'datetime-local' : type;
     },
+
     getMessages() {
       const messages = {};
 
@@ -83,6 +79,7 @@ export default {
 
       return messages;
     },
+
     getCartMessages() {
       const messages = {};
 
@@ -96,6 +93,11 @@ export default {
 
       return messages;
     },
+
+    getPlaceholder(key) {
+      return this.messagePlaceholderMap[key] || this.$t(`placeholder.${key}`);
+    },
+
     validateMessages() {
       const values = this.messageValues;
 
@@ -109,27 +111,26 @@ export default {
             if (message.type === 'image') {
               continue;
             } else {
-              return `请填写${message.name}`;
+              return this.$t('fill') + message.name;
             }
           }
         } else {
           if (message.type === 'tel' && !validateNumber(value)) {
-            return '请填写正确的数字格式留言';
+            return this.$t('number');
           }
           if (message.type === 'email' && !validateEmail(value)) {
-            return '请填写正确的邮箱';
+            return this.$t('email');
           }
           if (message.type === 'id_no' && (value.length < 15 || value.length > 18)) {
-            return '请填写正确的身份证号码';
+            return this.$t('id_no');
           }
         }
 
         if (value.length > 200) {
-          return `${message.name} 写的太多了<br/>不要超过200字`;
+          return `${message.name} ${this.$t('overlimit')}`;
         }
       }
     }
   }
-
-};
+});
 </script>

packages/sku/components/SkuStepper.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="van-sku-stepper-stock">
     <div class="van-sku-stepper-container">
-      <div class="van-sku__stepper-title">{{ stepperTitle }}：</div>
+      <div class="van-sku__stepper-title">{{ stepperTitle || $t('title') }}：</div>
       <stepper
         class="van-sku__stepper"
         v-model="currentNum"
@@ -11,18 +11,19 @@
         @overlimit="handleOverLimit">
       </stepper>
     </div>
-    <div v-if="!hideStock" class="van-sku__stock">剩余{{ stock }}件</div>
-    <div v-if="quota > 0" class="van-sku__quota">每人限购{{ quota }}件</div>
+    <div v-if="!hideStock" class="van-sku__stock">{{ $t('remain', stock) }}</div>
+    <div v-if="quota > 0" class="van-sku__quota">{{ $t('quota', quota) }}</div>
   </div>
 </template>
 
 <script>
+import { create } from '../../utils';
 import Stepper from '../../stepper';
-import { LIMIT_TYPE, DEFAULT_BUY_TEXT } from '../constants';
+import { LIMIT_TYPE } from '../constants';
 
 const { QUOTA_LIMIT, STOCK_LIMIT } = LIMIT_TYPE;
 
-export default {
+export default create({
   name: 'van-sku-stepper',
 
   components: {
@@ -35,6 +36,7 @@ export default {
     selectedSku: Object,
     selectedSkuComb: Object,
     selectedNum: Number,
+    stepperTitle: String,
     quota: Number,
     quotaUsed: Number,
     hideStock: {
@@ -44,10 +46,6 @@ export default {
     disableStepperInput: {
       type: Boolean,
       default: false
-    },
-    stepperTitle: {
-      type: String,
-      default: DEFAULT_BUY_TEXT
     }
   },
 
@@ -107,5 +105,5 @@ export default {
       });
     }
   }
-};
+});
 </script>