[improvement] Sku: support i18n (#4123)

src/sku/components/SkuActions.tsx

@@ -13,7 +13,7 @@ export type SkuActionsProps = {
   showAddCartBtn?: boolean;
 };
 
-const [createComponent, bem] = createNamespace('sku-actions');
+const [createComponent, bem, t] = createNamespace('sku-actions');
 
 function SkuActions(
   h: CreateElement,
@@ -31,14 +31,14 @@ function SkuActions(
         <Button
           size="large"
           type="warning"
-          text={props.addCartText || '加入购物车'}
+          text={props.addCartText || t('addCart')}
           onClick={createEmitter('sku:addCart')}
         />
       )}
       <Button
         size="large"
         type="danger"
-        text={props.buyText || '立即购买'}
+        text={props.buyText || t('buy')}
         onClick={createEmitter('sku:buy')}
       />
     </div>

src/sku/components/SkuImgUploader.js

@@ -3,7 +3,7 @@ import Icon from '../../icon';
 import Loading from '../../loading';
 import Uploader from '../../uploader';
 
-const [createComponent, bem] = createNamespace('sku-img-uploader');
+const [createComponent, bem, t] = createNamespace('sku-img-uploader');
 
 export default createComponent({
   props: {
@@ -41,7 +41,7 @@ export default createComponent({
     },
 
     onOversize() {
-      this.$toast(`最大可上传图片为${this.maxSize}MB，请尝试压缩图片尺寸`);
+      this.$toast(t('oversize', this.maxSize));
     },
 
     renderUploader(content, disabled = false) {
@@ -67,7 +67,7 @@ export default createComponent({
             ? (
               [
                 <Icon name="warning-o" size="20px" />,
-                <div class={bem('warn-text')}>上传失败<br />重新上传</div>
+                <div class={bem('warn-text')} domPropsInnerHTML={t('fail')} />
               ]
             ) : (
               <Loading type="spinner" size="20px" color="white" />

src/sku/components/SkuMessages.js

@@ -6,18 +6,7 @@ import { isEmail } from '../../utils/validate/email';
 import { isNumber } from '../../utils/validate/number';
 import SkuImgUploader from './SkuImgUploader';
 
-const [createComponent, bem] = createNamespace('sku-messages');
-
-const PLACEHOLDER = {
-  id_no: '输入身份证号码',
-  text: '输入文本',
-  tel: '输入数字',
-  email: '输入邮箱',
-  date: '点击选择日期',
-  time: '点击选择时间',
-  textarea: '点击填写段落文本',
-  mobile: '输入手机号码'
-};
+const [createComponent, bem, t] = createNamespace('sku-messages');
 
 export default createComponent({
   props: {
@@ -88,7 +77,7 @@ export default createComponent({
     getPlaceholder(message) {
       const type = +message.multiple === 1 ? 'textarea' : message.type;
       const map = this.messageConfig.placeholderMap || {};
-      return message.placeholder || map[type] || PLACEHOLDER[type];
+      return message.placeholder || map[type] || t(`placeholder.${type}`);
     },
 
     validateMessages() {
@@ -101,23 +90,21 @@ export default createComponent({
         if (value === '') {
           // 必填字段的校验
           if (String(message.required) === '1') {
-            const textType = message.type === 'image'
-              ? '请上传'
-              : '请填写';
+            const textType = t(message.type === 'image' ? 'upload' : 'fill');
             return textType + message.name;
           }
         } else {
           if (message.type === 'tel' && !isNumber(value)) {
-            return '请填写正确的数字格式留言';
+            return t('invalid.tel');
           }
           if (message.type === 'mobile' && !/^\d{6,20}$/.test(value)) {
-            return '手机号长度为6-20位数字';
+            return t('invalid.mobile');
           }
           if (message.type === 'email' && !isEmail(value)) {
-            return '请填写正确的邮箱';
+            return t('invalid.email');
           }
           if (message.type === 'id_no' && (value.length < 15 || value.length > 18)) {
-            return '请填写正确的身份证号码';
+            return t('invalid.id_no');
           }
         }
       }
@@ -131,7 +118,7 @@ export default createComponent({
           <Cell
             class={bem('image-cell')}
             value-class={bem('image-cell-value')}
-            label="仅限一张"
+            label={t('imageLabel')}
             title={message.name}
             key={`${this.goodsId}-${index}`}
             required={String(message.required) === '1'}

src/sku/components/SkuStepper.js

@@ -2,7 +2,9 @@ import { createNamespace } from '../../utils';
 import Stepper from '../../stepper';
 import { LIMIT_TYPE } from '../constants';
 
-const [createComponent] = createNamespace('sku-stepper');
+const namespace = createNamespace('sku-stepper');
+const createComponent = namespace[0];
+const t = namespace[2];
 const { QUOTA_LIMIT, STOCK_LIMIT } = LIMIT_TYPE;
 
 export default createComponent({
@@ -88,7 +90,7 @@ export default createComponent({
     return (
       <div class="van-sku-stepper-stock">
         <div class="van-sku-stepper-container">
-          <div class="van-sku__stepper-title">{this.stepperTitle || '购买数量'}</div>
+          <div class="van-sku__stepper-title">{this.stepperTitle || t('num')}</div>
           <Stepper
             vModel={this.currentNum}
             class="van-sku__stepper"