refactor(Sku): refactor image upload

src/sku/components/SkuImgUploader.js

@@ -2,8 +2,6 @@
 import { createNamespace } from '../../utils';
 
 // Components
-import Icon from '../../icon';
-import Loading from '../../loading';
 import Uploader from '../../uploader';
 
 const [createComponent, bem, t] = createNamespace('sku-img-uploader');
@@ -20,26 +18,32 @@ export default createComponent({
 
   data() {
     return {
-      // 正在上传的图片 base64
-      paddingImg: '',
-      uploadFail: false,
+      fileList: [],
     };
   },
 
+  watch: {
+    value(val) {
+      if (val) {
+        this.fileList = [{ url: val, isImage: true }];
+      } else {
+        this.fileList = [];
+      }
+    },
+  },
+
   methods: {
     afterReadFile(file) {
-      // 上传文件
-      this.paddingImg = file.content;
-      this.uploadFail = false;
+      file.status = 'uploading';
+      file.message = '上传中...';
       this.uploadImg(file.file, file.content)
         .then((img) => {
+          file.status = 'done';
           this.$emit('input', img);
-          this.$nextTick(() => {
-            this.paddingImg = '';
-          });
         })
         .catch(() => {
-          this.uploadFail = true;
+          file.status = 'failed';
+          file.message = '上传失败';
         });
     },
 
@@ -47,68 +51,21 @@ export default createComponent({
       this.$toast(t('oversize', this.maxSize));
     },
 
-    genUploader(content, disabled = false) {
-      return (
-        <Uploader
-          class={bem('uploader')}
-          disabled={disabled}
-          afterRead={this.afterReadFile}
-          maxSize={this.maxSize * 1024 * 1024}
-          onOversize={this.onOversize}
-        >
-          <div class={bem('img')}>{content}</div>
-        </Uploader>
-      );
-    },
-
-    genMask() {
-      return (
-        <div class={bem('mask')}>
-          {this.uploadFail ? (
-            [
-              <Icon name="warning-o" size="20px" />,
-              <div class={bem('warn-text')} domPropsInnerHTML={t('fail')} />,
-            ]
-          ) : (
-            <Loading type="spinner" size="20px" color="white" />
-          )}
-        </div>
-      );
+    onDelete() {
+      this.$emit('input', '');
     },
   },
 
   render() {
     return (
-      <div class={bem()}>
-        {this.value &&
-          this.genUploader(
-            [
-              <img src={this.value} />,
-              <Icon
-                name="clear"
-                class={bem('delete')}
-                onClick={() => {
-                  this.$emit('input', '');
-                }}
-              />,
-            ],
-            true
-          )}
-
-        {this.paddingImg &&
-          this.genUploader(
-            [<img src={this.paddingImg} />, this.genMask()],
-            !this.uploadFail
-          )}
-
-        {!this.value &&
-          !this.paddingImg &&
-          this.genUploader(
-            <div class={bem('trigger')}>
-              <Icon name="photograph" size="22px" />
-            </div>
-          )}
-      </div>
+      <Uploader
+        vModel={this.fileList}
+        maxCount={1}
+        afterRead={this.afterReadFile}
+        maxSize={this.maxSize * 1024 * 1024}
+        onOversize={this.onOversize}
+        onDelete={this.onDelete}
+      />
     );
   },
 });

src/sku/index.less

@@ -332,7 +332,6 @@
       }
 
       &-label {
-        margin-top: @padding-xs;
         color: @cell-label-color;
         font-size: @cell-label-font-size;
         line-height: @cell-label-line-height;
@@ -340,74 +339,6 @@
     }
   }
 
-  &-img-uploader {
-    display: inline-block;
-
-    &__uploader {
-      vertical-align: middle;
-    }
-
-    &__img {
-      position: relative;
-      float: left;
-      width: 64px;
-      height: 64px;
-      margin-right: @padding-xs;
-      background: @sku-item-background-color;
-      border-radius: @border-radius-sm;
-
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: contain;
-      }
-    }
-
-    &__delete {
-      position: absolute;
-      top: -12px;
-      right: -14px;
-      z-index: 1;
-      padding: 6px;
-      color: @sku-upload-mask-color;
-      opacity: 0.8;
-
-      &::before {
-        background-color: @white;
-        border-radius: 14px;
-      }
-    }
-
-    &__mask {
-      position: absolute;
-      top: 0;
-      left: 0;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      height: 100%;
-      color: white;
-      background: @sku-upload-mask-color;
-    }
-
-    &__warn-text {
-      margin-top: 6px;
-      font-size: @font-size-sm;
-      line-height: 14px;
-    }
-
-    &__trigger {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      height: 100%;
-      color: @sku-icon-gray-color;
-    }
-  }
-
   &-actions {
     display: flex;
     flex-shrink: 0;