|
@@ -6,13 +6,13 @@
|
|
direction="ltr"
|
|
direction="ltr"
|
|
custom-class="drawerClass">
|
|
custom-class="drawerClass">
|
|
<el-tabs tab-position="top" stretch>
|
|
<el-tabs tab-position="top" stretch>
|
|
- <el-tab-pane label="正版图片">
|
|
|
|
|
|
+ <el-tab-pane label="历史图片">
|
|
<!-- v-loading="loading" -->
|
|
<!-- v-loading="loading" -->
|
|
<div style="column-count: 3;column-gap: 0;">
|
|
<div style="column-count: 3;column-gap: 0;">
|
|
<div v-for="(item,index) in externalImagesList" :key="index" >
|
|
<div v-for="(item,index) in externalImagesList" :key="index" >
|
|
<el-image
|
|
<el-image
|
|
style="height: 100%;"
|
|
style="height: 100%;"
|
|
- :src="item.src" @click="handleImageClick(item.src)"></el-image>
|
|
|
|
|
|
+ :src="item.url" @click="handleImageClick(item.url)"></el-image>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
@@ -25,10 +25,16 @@
|
|
<div class="image-lib-inner">
|
|
<div class="image-lib-inner">
|
|
<div class="image-lib-btn">
|
|
<div class="image-lib-btn">
|
|
<el-upload
|
|
<el-upload
|
|
- action="https://jsonplaceholder.typicode.com/posts/"
|
|
|
|
- :before-upload="beforeUpload"
|
|
|
|
|
|
+ action="/filemanage/upload"
|
|
accept="jpg,png,gif"
|
|
accept="jpg,png,gif"
|
|
- :show-file-list="false">
|
|
|
|
|
|
+ name="upload"
|
|
|
|
+ :data="{
|
|
|
|
+ type: 'upload'
|
|
|
|
+ }"
|
|
|
|
+ :show-file-list="false"
|
|
|
|
+ :on-success="uploadSuccess"
|
|
|
|
+ :on-error="uploadError"
|
|
|
|
+ >
|
|
<el-button size="small" type="primary">点击上传</el-button>
|
|
<el-button size="small" type="primary">点击上传</el-button>
|
|
<span slot="tip" class="el-upload__tip marginL20">只能上传jpg/png/gif文件,且不超过2M</span>
|
|
<span slot="tip" class="el-upload__tip marginL20">只能上传jpg/png/gif文件,且不超过2M</span>
|
|
</el-upload>
|
|
</el-upload>
|
|
@@ -41,8 +47,6 @@
|
|
<div class="padding60 text-center gray" v-else>暂无数据</div>
|
|
<div class="padding60 text-center gray" v-else>暂无数据</div>
|
|
</div>
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tab-pane>
|
|
- <el-tab-pane label="我的收藏"></el-tab-pane>
|
|
|
|
- <el-tab-pane label="最近图片"></el-tab-pane>
|
|
|
|
</el-tabs>
|
|
</el-tabs>
|
|
</el-drawer>
|
|
</el-drawer>
|
|
</div>
|
|
</div>
|
|
@@ -74,16 +78,27 @@
|
|
})
|
|
})
|
|
},
|
|
},
|
|
watch: {
|
|
watch: {
|
|
- // dialogVisible(val) {
|
|
|
|
- // if (val && !this.uploading) {
|
|
|
|
- // this.getMyImages()
|
|
|
|
- // }
|
|
|
|
- // }
|
|
|
|
|
|
+ dialogVisible(val) {
|
|
|
|
+ if (val && !this.uploading) {
|
|
|
|
+ this.getMyImages()
|
|
|
|
+ }
|
|
|
|
+ }
|
|
},
|
|
},
|
|
|
|
|
|
methods: {
|
|
methods: {
|
|
getMyImage(){
|
|
getMyImage(){
|
|
this.getMyImages()
|
|
this.getMyImages()
|
|
|
|
+ },
|
|
|
|
+ uploadSuccess (res, file, fileList) {
|
|
|
|
+ console.log(res, file, fileList)
|
|
|
|
+ if (res.url) {
|
|
|
|
+ this.uploadPsd(process.env.VUE_APP_UPLOAD_IMAGE_BASE + res.url)
|
|
|
|
+ } else {
|
|
|
|
+ this.uploadError('请检查接口')
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ uploadError (err) {
|
|
|
|
+ this.$message.error('上传失败', err)
|
|
},
|
|
},
|
|
beforeUpload(file) {
|
|
beforeUpload(file) {
|
|
if (file.size > 1 * 1024 * 1024) {
|
|
if (file.size > 1 * 1024 * 1024) {
|
|
@@ -100,10 +115,10 @@
|
|
return false;
|
|
return false;
|
|
},
|
|
},
|
|
uploadPsd(file) {
|
|
uploadPsd(file) {
|
|
- let params = new FormData()
|
|
|
|
- params.append('file', file);
|
|
|
|
this.uploading = true;
|
|
this.uploading = true;
|
|
- this.$API.uploadImage(params).then(res => {
|
|
|
|
|
|
+ this.$API.uploadImage({
|
|
|
|
+ fileUrl: file
|
|
|
|
+ }).then(res => {
|
|
this.uploading = false;
|
|
this.uploading = false;
|
|
this.imageList.splice(0, 0, res.body)
|
|
this.imageList.splice(0, 0, res.body)
|
|
}).catch(() => {
|
|
}).catch(() => {
|
|
@@ -113,16 +128,14 @@
|
|
getMyImages() {
|
|
getMyImages() {
|
|
this.hasLoadData = true;
|
|
this.hasLoadData = true;
|
|
this.$API.getMyImages().then(res => {
|
|
this.$API.getMyImages().then(res => {
|
|
- this.imageList = res.body || [];
|
|
|
|
|
|
+ this.imageList = res?.body || [];
|
|
})
|
|
})
|
|
},
|
|
},
|
|
getExternalImages(){
|
|
getExternalImages(){
|
|
this.$API.getExternalImages().then(res => {
|
|
this.$API.getExternalImages().then(res => {
|
|
- res.body.data.dataList.forEach(v => {
|
|
|
|
- this.externalImagesList.push({
|
|
|
|
- 'src':"https://res1.eqh5.com/"+ v.productTypeMap.tmbPath
|
|
|
|
- })
|
|
|
|
- });
|
|
|
|
|
|
+ if (res?.body?.data) {
|
|
|
|
+ this.externalImagesList = res.body.data || []
|
|
|
|
+ }
|
|
})
|
|
})
|
|
|
|
|
|
},
|
|
},
|