[new feature] sku组件增加图片上传功能 (#612)

* [new feature] sku组件增加图片上传功能

docs/demos/views/sku.vue

@@ -13,6 +13,7 @@
           :reset-stepper-on-hide="true"
           :reset-selected-sku-on-hide="true"
           :disable-stepper-input="true"
+          :message-config="messageConfig"
           @buy-clicked="onBuyClicked"
           @add-cart="onAddCartClicked"
         />
@@ -23,7 +24,7 @@
     <demo-block :title="$t('title2')">
       <div class="sku-container">
         <van-sku
-          v-model="showBase"
+          v-model="showStepper"
           :sku="$t('sku').sku"
           :goods="$t('sku').goods_info"
           :goods-id="$t('sku').goods_id"
@@ -34,7 +35,7 @@
           @buy-clicked="onBuyClicked"
           @add-cart="onAddCartClicked"
         />
-        <van-button type="primary" @click="showBase = true" block>{{ $t('title2') }}</van-button>
+        <van-button type="primary" @click="showStepper = true" block>{{ $t('title2') }}</van-button>
       </div>
     </demo-block>
 
@@ -94,6 +95,7 @@ export default {
     return {
       showBase: false,
       showCustom: false,
+      showStepper: false,
       initialSku: {
         s1: '30349',
         s2: '1193'
@@ -113,6 +115,14 @@ export default {
             }
           }
         }
+      },
+      messageConfig: {
+        uploadImg: () => {
+          return new Promise((resolve) => {
+            setTimeout(() => resolve('https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg'), 1000);
+          });
+        },
+        uploadMaxSize: 3
       }
     };
   },

docs/markdown/en-US/sku.md

@@ -22,6 +22,7 @@ Vue.use(Sku);
   :reset-stepper-on-hide="resetStepperOnHide"
   :reset-selected-sku-on-hide="resetSelectedSkuOnHide"
   :disable-stepper-input="disableStepperInput"
+  :message-config="messageConfig"
   @buy-clicked="onBuyClicked"
   @add-cart="onAddCartClicked"
 />
@@ -90,6 +91,7 @@ Vue.use(Sku);
 | disable-stepper-input | Whether to disable stepper input | `Boolean` | `false` | - |
 | stepper-title | Quantity title | `String` | `Quantity` | - |
 | custom-stepper-config | Custom stepper related config | `Object` | `{}` | - |
+| message-config | Message related config | `Object` | `{}` | - |
 | get-container | Return the mount node for sku | `Function` | - | `() => HTMLElement` |
 
 ### Event
@@ -201,6 +203,26 @@ customStepperConfig: {
 }
 ```
 
+#### messageConfig Data Structure
+```javascript
+messageConfig: {
+  // the upload image callback
+  uploadImg: () => {
+    return new Promise((resolve) => {
+      setTimeout(() => resolve('https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg'), 1000);
+    });
+  },
+  // max file size (MB)
+  uploadMaxSize: 3,
+  // placehold config
+  placeholderMap: {
+    text: 'xxx',
+    tel: 'xxx',
+    ...
+  }
+}
+```
+
 #### Event Params Data Structure
 
 ```javascript

docs/markdown/zh-CN/sku.md

@@ -22,6 +22,7 @@ Vue.use(Sku);
   :reset-stepper-on-hide="resetStepperOnHide"
   :reset-selected-sku-on-hide="resetSelectedSkuOnHide"
   :disable-stepper-input="disableStepperInput"
+  :message-config="messageConfig"
   @buy-clicked="onBuyClicked"
   @add-cart="onAddCartClicked"
 />
@@ -91,6 +92,7 @@ Vue.use(Sku);
 | disable-stepper-input | 是否禁用sku中stepper的input框 | `Boolean` | `false` | - |
 | stepper-title | 数量选择组件左侧文案 | `String` | `购买数量` | - |
 | custom-stepper-config | 步进器相关自定义配置 | `Object` | `{}` | - |
+| message-config | 留言相关配置 | `Object` | `{}` | - |
 | get-container | 指定挂载的 HTML 节点 | `Function` | - | `() => HTMLElement` |
 
 ### Event
@@ -207,6 +209,26 @@ customStepperConfig: {
 }
 ```
 
+#### messageConfig Data Structure
+```javascript
+messageConfig: {
+  // 图片上传回调，需要返回一个promise，promise正确执行的结果需要是一个图片url
+  uploadImg: () => {
+    return new Promise((resolve) => {
+      setTimeout(() => resolve('https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg'), 1000);
+    });
+  },
+  // 最大上传体积 (MB)
+  uploadMaxSize: 3,
+  // placehold配置
+  placeholderMap: {
+    text: 'xxx',
+    tel: 'xxx',
+    ...
+  }
+}
+```
+
 #### 添加购物车和点击购买回调函数接收的 skuData 对象结构
 ```javascript
 skuData: {