[improvement] Sku: support i18n (#4123)

src/locale/README.zh-CN.md

@@ -46,3 +46,7 @@ Locale.add(messages);
 | 土耳其语 | tr-TR |
 
 在 [这里](https://github.com/youzan/vant/tree/dev/src/locale/lang) 查看所有的 i18n 配置文件。
+
+### Sku 组件
+
+语言包中默认不包含 Sku 业务组件的语言配置，因此如果有 Sku 组件的国际化需求，请自行配置国际化文案。

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"

src/sku/index.js

@@ -1,3 +1,5 @@
+import lang from './lang';
+import Locale from '../locale';
 import Sku from './Sku';
 import SkuActions from './components/SkuActions';
 import SkuHeader from './components/SkuHeader';
@@ -9,6 +11,8 @@ import SkuRowItem from './components/SkuRowItem';
 import skuHelper from './utils/skuHelper';
 import constants from './constants';
 
+Locale.add(lang);
+
 Sku.SkuActions = SkuActions;
 Sku.SkuHeader = SkuHeader;
 Sku.SkuHeaderItem = SkuHeaderItem;

src/sku/lang.ts

@@ -0,0 +1,40 @@
+/**
+ * Sku only provide zh-CN lang by default
+ */
+
+export default {
+  'zh-CN': {
+    vanSkuActions: {
+      buy: '立即购买',
+      addCart: '加入购物车'
+    },
+    vanSkuImgUploader: {
+      oversize: (maxSize: number) => `最大可上传图片为${maxSize}MB，请尝试压缩图片尺寸`,
+      fail: '上传失败<br />重新上传'
+    },
+    vanSkuStepper: {
+      num: '购买数量'
+    },
+    vanSkuMessages: {
+      fill: '请填写',
+      upload: '请上传',
+      imageLabel: '仅限一张',
+      invalid: {
+        tel: '请填写正确的数字格式留言',
+        mobile: '手机号长度为6-20位数字',
+        email: '请填写正确的邮箱',
+        id_no: '请填写正确的身份证号码'
+      },
+      placeholder: {
+        id_no: '输入身份证号码',
+        text: '输入文本',
+        tel: '输入数字',
+        email: '输入邮箱',
+        date: '点击选择日期',
+        time: '点击选择时间',
+        textarea: '点击填写段落文本',
+        mobile: '输入手机号码'
+      }
+    }
+  }
+};