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

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

packages/sku/Sku.vue

@@ -81,7 +81,7 @@
             <sku-messages
               ref="skuMessages"
               :goods-id="goodsId"
-              :message-placeholder-map="messagePlaceholderMap"
+              :message-config="messageConfig"
               :messages="sku.messages"
             />
           </slot>
@@ -165,9 +165,13 @@ export default create({
       type: Number,
       default: 200
     },
-    messagePlaceholderMap: {
+    messageConfig: {
       type: Object,
-      default: () => ({})
+      default: () => ({
+        placeholderMap: {},
+        uploadImg: () => Promise.resolve(),
+        uploadMaxSize: 5
+      })
     },
     customStepperConfig: {
       type: Object,

packages/sku/components/SkuImgUploader.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="van-sku-img-uploader">
+    <!-- 头部 -->
+    <van-uploader
+      :disabled="!canUpload"
+      :before-read="beforeReadFile"
+      :after-read="afterReadFile"
+      accept="image/*">
+      <div class="van-sku-img-uploader__header">
+        <div v-if="paddingImg">{{ $t('uploading') }}</div>
+        <template v-else>
+          <van-icon name="photograph" />
+          <span class="label">{{ getPhotoText(value) }}</span> {{ $t('or') }}
+          <van-icon name="photo" />
+          <span class="label">{{ getPicText(value) }}</span>
+        </template>
+      </div>
+    </van-uploader>
+    <!-- 图片列表区域 -->
+    <div class="van-sku-img-uploader__imglist" v-if="paddingImg || imgList.length > 0">
+      <!-- 已有的图片,图片右上角显示删除按钮 -->
+      <div
+        v-for="(img, index) in imgList"
+        :key="index"
+        class="van-sku-img-uploader__img-container">
+        <span class="van-sku-img-uploader__delete-picture" @click="deleteImg(index)">
+          <van-icon name="clear" />
+        </span>
+        <img :src="img">
+      </div>
+      <!-- 正在上传的图片,有上传等待提示 -->
+      <div
+        v-if="paddingImg"
+        class="van-sku-img-uploader__img-container">
+        <img :src="paddingImg">
+        <van-loading class="van-sku-img-uploader__uploading" type="spinner" color="black" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Icon from '../../icon';
+import Uploader from '../../uploader';
+import Loading from '../../loading';
+import { create } from '../../utils';
+
+export default create({
+  name: 'van-sku-img-uploader',
+
+  components: {
+    'van-uploader': Uploader,
+    'van-icon': Icon,
+    'van-loading': Loading
+  },
+
+  props: {
+    value: String,
+    uploadImg: {
+      type: Function,
+      required: true
+    },
+    maxSize: {
+      type: Number,
+      default: 6
+    }
+  },
+
+  data() {
+    return {
+      // 正在上传的图片base 64
+      paddingImg: ''
+    };
+  },
+  computed: {
+    imgList() {
+      return this.value && !this.paddingImg ? [this.value] : [];
+    },
+    canUpload() {
+      // 判断当前是否允许上传图片
+      if (this.paddingImg) return false;
+      return true;
+    }
+  },
+
+  methods: {
+    getPhotoText(value) {
+      return value ? this.$t('rephoto') : this.$t('photo');
+    },
+
+    getPicText(value) {
+      return value ? this.$t('reselect') : this.$t('select');
+    },
+    beforeReadFile(file) {
+      // 拦截非图片的文件，以及大小限制
+      if (file.size > this.maxSize * 1024 * 1024) {
+        Toast(this.$t('maxSize', this.maxSize));
+        return false;
+      }
+      return true;
+    },
+    afterReadFile(file) {
+      // 上传文件
+      this.paddingImg = file.content;
+      this.uploadImg(file.file).then(img => {
+        this.updateImg(img);
+        this.$nextTick(() => {
+          this.paddingImg = '';
+        });
+      }).catch(() => {
+        this.paddingImg = '';
+      });
+    },
+    deleteImg() {
+      this.$emit('input', '');
+    },
+    updateImg(img) {
+      this.$emit('input', img);
+    }
+  }
+});
+</script>

packages/sku/components/SkuMessages.vue

@@ -1,14 +1,29 @@
 <template>
   <cell-group class="van-sku-messages">
-    <field
-      v-for="(message, index) in internalMessages"
-      v-model="messageValues[index]"
-      :key="`${goodsId}-${index}`"
-      :required="message.required == '1'"
-      :label="message.name"
-      :placeholder="getPlaceholder(message)"
-      :type="getType(message)"
-    />
+    <template v-for="(message, index) in messages">
+      <cell
+        v-if="message.type === 'image'"
+        class="van-sku-messages__image-cell"
+        :label="$t('onePic')"
+        :key="`${goodsId}-${index}`"
+        :required="message.required == '1'"
+        :title="message.name">
+        <sku-img-uploader
+          v-model="messageValues[index].value"
+          :upload-img="messageConfig.uploadImg"
+          :max-size="messageConfig.uploadMaxSize"
+        />
+      </cell>
+      <field
+        v-else
+        v-model="messageValues[index].value"
+        :key="`${goodsId}-${index}`"
+        :required="message.required == '1'"
+        :label="message.name"
+        :placeholder="getPlaceholder(message)"
+        :type="getType(message)"
+      />
+    </template>
   </cell-group>
 </template>
 
@@ -16,30 +31,36 @@
 import { create } from '../../utils';
 import Field from '../../field';
 import CellGroup from '../../cell-group';
+import Cell from '../../cell';
 import validateEmail from '../../utils/validate/email';
 import validateNumber from '../../utils/validate/number';
+import SkuImgUploader from './SkuImgUploader';
 
 export default create({
   name: 'van-sku-messages',
 
   components: {
+    SkuImgUploader,
     Field,
+    Cell,
     CellGroup
   },
 
   props: {
     messages: Array,
-    messagePlaceholderMap: Object,
+    messageConfig: Object,
     goodsId: [Number, String]
   },
 
-  computed: {
-    internalMessages() {
-      return Array.isArray(this.messages) ? this.messages.filter(message => message.type !== 'image') : [];
-    },
+  data() {
+    return {
+      messageValues: this.messages.map(() => ({ value: '' }))
+    };
+  },
 
-    messageValues() {
-      return this.internalMessages.map(() => '');
+  computed: {
+    messagePlaceholderMap() {
+      return this.messageConfig.placeholderMap || {};
     }
   },
 
@@ -57,8 +78,9 @@ export default create({
     getMessages() {
       const messages = {};
 
-      this.messageValues.forEach((value, index) => {
-        if (this.internalMessages[index].datetime > 0) {
+      this.messageValues.forEach((item, index) => {
+        let value = item.value;
+        if (this.messages[index].datetime > 0) {
           value = value.replace(/T/g, ' ');
         }
         messages[`message_${index}`] = value;
@@ -70,8 +92,9 @@ export default create({
     getCartMessages() {
       const messages = {};
 
-      this.messageValues.forEach((value, index) => {
-        const message = this.internalMessages[index];
+      this.messageValues.forEach((item, index) => {
+        let value = item.value;
+        const message = this.messages[index];
         if (message.datetime > 0) {
           value = value.replace(/T/g, ' ');
         }
@@ -90,17 +113,16 @@ export default create({
       const values = this.messageValues;
 
       for (let i = 0; i < values.length; i++) {
-        const value = values[i];
-        const message = this.internalMessages[i];
+        const value = values[i].value;
+        const message = this.messages[i];
 
         if (value === '') {
           // 必填字段的校验
           if (message.required == '1') { // eslint-disable-line
-            if (message.type === 'image') {
-              continue;
-            } else {
-              return this.$t('fill') + message.name;
-            }
+            const textType = message.type === 'image'
+              ? 'upload'
+              : 'fill';
+            return this.$t(textType) + message.name;
           }
         } else {
           if (message.type === 'tel' && !validateNumber(value)) {

packages/sku/components/SkuStepper.vue

@@ -9,6 +9,7 @@
         :max="stepperLimit"
         :disable-input="disableStepperInput"
         @overlimit="onOverLimit"
+        @change="onChange"
       />
     </div>
     <div v-if="!hideStock" class="van-sku__stock">{{ $t('remain', stock) }}</div>
@@ -104,7 +105,6 @@ export default create({
     setCurrentNum(num) {
       this.currentNum = num;
     },
-
     onOverLimit(action) {
       this.skuEventBus.$emit('sku:overLimit', {
         action,
@@ -112,6 +112,10 @@ export default create({
         quota: this.quota,
         quotaUsed: this.quotaUsed
       });
+    },
+    onChange(currentValue) {
+      const { handleStepperChange } = this.customStepperConfig;
+      handleStepperChange && handleStepperChange(currentValue);
     }
   }
 });