|
|
@@ -33,7 +33,7 @@
|
|
|
:on-remove="handleOnRemove"
|
|
|
:on-preview="handleOnPreview"
|
|
|
>
|
|
|
- <i class="el-icon-plus"></i>
|
|
|
+ <i class="el-icon-plus" />
|
|
|
</el-upload>
|
|
|
</div>
|
|
|
</el-card>
|
|
|
@@ -41,10 +41,14 @@
|
|
|
</el-col>
|
|
|
<el-col :md="16">
|
|
|
<div>
|
|
|
- <el-col v-for="(image, index) in data.images"
|
|
|
- :key="image.thumbnailUrl"
|
|
|
- :md="6" :sm="12" :xs="12"
|
|
|
- style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
|
|
|
+ <el-col
|
|
|
+ v-for="(image, index) in data.images"
|
|
|
+ :key="image.thumbnailUrl"
|
|
|
+ :md="6"
|
|
|
+ :sm="12"
|
|
|
+ :xs="12"
|
|
|
+ style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px"
|
|
|
+ >
|
|
|
<el-card :body-style="{ padding: '0px' }" class="card">
|
|
|
<div class="imgs">
|
|
|
<el-image
|
|
|
@@ -52,8 +56,8 @@
|
|
|
fit="cover"
|
|
|
class="coverImg"
|
|
|
:src="image.thumbnailUrl"
|
|
|
- @click="showImages(index)">
|
|
|
- </el-image>
|
|
|
+ @click="showImages(index)"
|
|
|
+ />
|
|
|
</div>
|
|
|
<div style="padding: 14px;">
|
|
|
<el-tooltip class="item" effect="dark" content="删除图片" placement="top-end">
|
|
|
@@ -61,14 +65,16 @@
|
|
|
size="mini"
|
|
|
type="danger"
|
|
|
class="el-icon-delete"
|
|
|
- @click="onDeleteImage(image.imageFileId)"></el-button>
|
|
|
+ @click="onDeleteImage(image.imageFileId)"
|
|
|
+ />
|
|
|
</el-tooltip>
|
|
|
<el-tooltip class="item" effect="dark" content="设为封面" placement="top-end">
|
|
|
<el-button
|
|
|
size="mini"
|
|
|
type="warning"
|
|
|
class="el-icon-picture-outline"
|
|
|
- @click="onSetCover(image.imageFileId)"></el-button>
|
|
|
+ @click="onSetCover(image.imageFileId)"
|
|
|
+ />
|
|
|
</el-tooltip>
|
|
|
</div>
|
|
|
</el-card>
|
|
|
@@ -80,15 +86,15 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import {getAlbumImage, deleteAlbumImage, addAlbumImage, updateAlbumCover} from "@/api/image";
|
|
|
-import {getServerInfo} from "@/api/file";
|
|
|
+import { getAlbumImage, deleteAlbumImage, addAlbumImage, updateAlbumCover } from '@/api/image'
|
|
|
+import { getServerInfo } from '@/api/content'
|
|
|
|
|
|
var imageFileMap = new Map()
|
|
|
export default {
|
|
|
name: 'EditImage',
|
|
|
data() {
|
|
|
return {
|
|
|
- /***********************************************************************/
|
|
|
+ /** *********************************************************************/
|
|
|
imgHeaders: {
|
|
|
Authorization: ''
|
|
|
},
|
|
|
@@ -98,12 +104,12 @@ export default {
|
|
|
dialogImageUrl: '',
|
|
|
dialogVisible: false,
|
|
|
uploadImages: [],
|
|
|
- /***********************************************************************/
|
|
|
+ /** *********************************************************************/
|
|
|
// 屏幕宽度, 为了控制分页条的大小
|
|
|
screenWidth: document.body.clientWidth,
|
|
|
data: null,
|
|
|
imageCount: 0,
|
|
|
- limit: 0,
|
|
|
+ limit: 0
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
@@ -115,7 +121,7 @@ export default {
|
|
|
const resData = res.data
|
|
|
this.data = resData
|
|
|
this.imageCount = this.data.images.length
|
|
|
- this.limit = 40-this.data.images.length
|
|
|
+ this.limit = 40 - this.data.images.length
|
|
|
this.form.albumName = resData.albumName
|
|
|
}
|
|
|
})
|
|
|
@@ -123,7 +129,7 @@ export default {
|
|
|
getServerInfo(this.imgData.channelId).then(res => {
|
|
|
if (res.code === 0) {
|
|
|
const resData = res.data
|
|
|
- this.imgHeaders.Authorization = "Bearer " + resData.token
|
|
|
+ this.imgHeaders.Authorization = 'Bearer ' + resData.token
|
|
|
} else {
|
|
|
this.$notify({
|
|
|
title: '失败提示',
|
|
|
@@ -151,12 +157,12 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- /***********************************************************************/
|
|
|
+ /** *********************************************************************/
|
|
|
handleBeforeUpload(file) {
|
|
|
const fileType = file.type
|
|
|
var isJPG = false
|
|
|
- if (file.type === 'image/jpeg' || file.type === 'image/webp'
|
|
|
- || file.type === 'image/gif' || file.type === 'image/png') {
|
|
|
+ if (file.type === 'image/jpeg' || file.type === 'image/webp' ||
|
|
|
+ file.type === 'image/gif' || file.type === 'image/png') {
|
|
|
isJPG = true
|
|
|
}
|
|
|
|
|
|
@@ -195,10 +201,10 @@ export default {
|
|
|
imageFileMap.delete(file.name)
|
|
|
},
|
|
|
handleOnPreview(file) {
|
|
|
- this.dialogImageUrl = file.url;
|
|
|
- this.dialogVisible = true;
|
|
|
+ this.dialogImageUrl = file.url
|
|
|
+ this.dialogVisible = true
|
|
|
},
|
|
|
- /***********************************************************************/
|
|
|
+ /** *********************************************************************/
|
|
|
showImages(index) {
|
|
|
const imageUrls = []
|
|
|
for (const i of this.data.images) {
|