sku组件增加库存文案配置和自定义validator的配置 (#1732)

sku留言增加手机号类型的简单校验
customStepperConfig中新增stockFormatter参数来自定义剩余库存文案
新增customSkuValidator参数来做规格未选择完整时的自定义错误文案配置

packages/locale/lang/en-US.js

@@ -81,6 +81,7 @@ export default {
     fill: 'Please fill',
     upload: 'Please upload',
     number: 'Please fill in the correct number format message',
+    mobile: 'The length of mobile number must be 6 to 12',
     email: 'Please fill in the correct email message',
     id_no: 'Please fill in the correct ID number message',
     onePic: 'only one picture',

packages/locale/lang/zh-CN.js

@@ -81,6 +81,7 @@ export default {
     fill: '请填写',
     upload: '请上传',
     number: '请填写正确的数字格式留言',
+    mobile: '手机号长度为6-20位数字',
     email: '请填写正确的邮箱',
     id_no: '请填写正确的身份证号码',
     onePic: '仅限一张',

packages/locale/lang/zh-HK.js

@@ -81,6 +81,7 @@ export default {
     fill: '請填寫',
     upload: '請上傳',
     number: '請填寫正確的數字格式留言',
+    mobile: '手機號長度為6-20位數字',
     email: '請填寫正確的郵箱',
     id_no: '請填寫正確的身份證號碼',
     onePic: '僅限一張',

packages/sku/Sku.vue

@@ -180,7 +180,8 @@ export default create({
     customStepperConfig: {
       type: Object,
       default: () => ({})
-    }
+    },
+    customSkuValidator: Function
   },
 
   data() {
@@ -336,6 +337,12 @@ export default create({
         return this.validateSkuMessages();
       }
 
+      // 自定义sku校验
+      if (this.customSkuValidator) {
+        const err = this.customSkuValidator(this);
+        if (err) return err;
+      }
+
       return this.$t('spec');
     },
 

packages/sku/components/SkuMessages.vue

@@ -136,6 +136,9 @@ export default create({
           if (message.type === 'tel' && !validateNumber(value)) {
             return this.$t('number');
           }
+          if (message.type === 'mobile' && !/^\d{6,20}$/.test(value)) {
+            return this.$t('mobile');
+          }
           if (message.type === 'email' && !validateEmail(value)) {
             return this.$t('email');
           }

packages/sku/components/SkuStepper.vue

@@ -12,7 +12,7 @@
         @change="onChange"
       />
     </div>
-    <div v-if="!hideStock" class="van-sku__stock">{{ $t('remain', stock) }}</div>
+    <div v-if="!hideStock" class="van-sku__stock">{{ stockText }}</div>
     <div v-if="quotaText" class="van-sku__quota">{{ quotaText }}</div>
   </div>
 </template>
@@ -73,6 +73,13 @@ export default create({
       return this.skuStockNum;
     },
 
+    stockText() {
+      const { stockFormatter } = this.customStepperConfig;
+      if (stockFormatter) return stockFormatter(this.stock);
+
+      return this.$t('remain', this.stock);
+    },
+
     quotaText() {
       const { quotaText } = this.customStepperConfig;
       let text = '';

packages/sku/demo/index.vue

@@ -15,6 +15,7 @@
           disable-stepper-input
           :close-on-click-overlay="closeOnClickOverlay"
           :message-config="messageConfig"
+          :custom-sku-validator="customSkuValidator"
           @buy-clicked="onBuyClicked"
           @add-cart="onAddCartClicked"
         />
@@ -109,8 +110,12 @@ export default {
         s1: '30349',
         s2: '1193'
       },
+      customSkuValidator: (component) => {
+        return '请选择xxx';
+      },
       customStepperConfig: {
         quotaText: '单次限购100件',
+        stockFormatter: (stock) => `剩余${stock}间`,
         handleOverLimit: (data) => {
           const { action, limitType, quota } = data;
 

packages/vant-css/src/sku.css

@@ -16,6 +16,14 @@
     &::-webkit-scrollbar {
       display: none;
     }
+
+    /* 修复ios下点击没反应的问题 */
+    .van-field {
+      input[type*=date],
+      input[type*=time] {
+        height: 26px;
+      }
+    }
   }
 
   &-group-container {