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

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

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;