From d29304716403cdaae20c080d28b7e8c8d45581ac Mon Sep 17 00:00:00 2001
From: wny <colonD.wny@gmail.com>
Date: Thu, 30 Aug 2018 23:19:44 +0800
Subject: [PATCH] =?UTF-8?q?sku=E7=BB=84=E4=BB=B6=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E5=BA=93=E5=AD=98=E6=96=87=E6=A1=88=E9=85=8D=E7=BD=AE=E5=92=8C?=
 =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89validator=E7=9A=84=E9=85=8D=E7=BD=AE?=
 =?UTF-8?q?=20(#1732)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

sku留言增加手机号类型的简单校验
customStepperConfig中新增stockFormatter参数来自定义剩余库存文案
新增customSkuValidator参数来做规格未选择完整时的自定义错误文案配置
---
 packages/locale/lang/en-US.js           | 1 +
 packages/locale/lang/zh-CN.js           | 1 +
 packages/locale/lang/zh-HK.js           | 1 +
 packages/sku/Sku.vue                    | 9 ++++++++-
 packages/sku/components/SkuMessages.vue | 3 +++
 packages/sku/components/SkuStepper.vue  | 9 ++++++++-
 packages/sku/demo/index.vue             | 5 +++++
 packages/vant-css/src/sku.css           | 8 ++++++++
 8 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/packages/locale/lang/en-US.js b/packages/locale/lang/en-US.js
index f989b399d..36dc06db4 100644
--- a/packages/locale/lang/en-US.js
+++ b/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',
diff --git a/packages/locale/lang/zh-CN.js b/packages/locale/lang/zh-CN.js
index a8d13db98..978dc9b58 100644
--- a/packages/locale/lang/zh-CN.js
+++ b/packages/locale/lang/zh-CN.js
@@ -81,6 +81,7 @@ export default {
     fill: '请填写',
     upload: '请上传',
     number: '请填写正确的数字格式留言',
+    mobile: '手机号长度为6-20位数字',
     email: '请填写正确的邮箱',
     id_no: '请填写正确的身份证号码',
     onePic: '仅限一张',
diff --git a/packages/locale/lang/zh-HK.js b/packages/locale/lang/zh-HK.js
index 20282f60d..b00953d13 100644
--- a/packages/locale/lang/zh-HK.js
+++ b/packages/locale/lang/zh-HK.js
@@ -81,6 +81,7 @@ export default {
     fill: '請填寫',
     upload: '請上傳',
     number: '請填寫正確的數字格式留言',
+    mobile: '手機號長度為6-20位數字',
     email: '請填寫正確的郵箱',
     id_no: '請填寫正確的身份證號碼',
     onePic: '僅限一張',
diff --git a/packages/sku/Sku.vue b/packages/sku/Sku.vue
index fb290e7e4..0da14730e 100644
--- a/packages/sku/Sku.vue
+++ b/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');
     },
 
diff --git a/packages/sku/components/SkuMessages.vue b/packages/sku/components/SkuMessages.vue
index ba517cc52..aa49f02fa 100644
--- a/packages/sku/components/SkuMessages.vue
+++ b/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');
           }
diff --git a/packages/sku/components/SkuStepper.vue b/packages/sku/components/SkuStepper.vue
index a6b3a8fac..5ba5bd642 100644
--- a/packages/sku/components/SkuStepper.vue
+++ b/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 = '';
diff --git a/packages/sku/demo/index.vue b/packages/sku/demo/index.vue
index b3bd37c74..a442f631b 100644
--- a/packages/sku/demo/index.vue
+++ b/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;
 
diff --git a/packages/vant-css/src/sku.css b/packages/vant-css/src/sku.css
index 5ae280872..022841b2c 100644
--- a/packages/vant-css/src/sku.css
+++ b/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 {