diff --git a/src/sku/components/SkuImgUploader.js b/src/sku/components/SkuImgUploader.js
index a9d8003aa..d92aeed5a 100644
--- a/src/sku/components/SkuImgUploader.js
+++ b/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 (
-
- {content}
-
- );
- },
-
- genMask() {
- return (
-
- {this.uploadFail ? (
- [
-
,
-
,
- ]
- ) : (
-
- )}
-
- );
+ onDelete() {
+ this.$emit('input', '');
},
},
render() {
return (
-
- {this.value &&
- this.genUploader(
- [
-

,
-
{
- this.$emit('input', '');
- }}
- />,
- ],
- true
- )}
-
- {this.paddingImg &&
- this.genUploader(
- [
, this.genMask()],
- !this.uploadFail
- )}
-
- {!this.value &&
- !this.paddingImg &&
- this.genUploader(
-
-
-
- )}
-
+
);
},
});
diff --git a/src/sku/index.less b/src/sku/index.less
index 5b53f5d59..a9e2a2374 100644
--- a/src/sku/index.less
+++ b/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;