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}
+      />
     );
   },
 });