|
@@ -11,7 +11,7 @@
|
|
</el-upload>
|
|
</el-upload>
|
|
</div>
|
|
</div>
|
|
<!-- 视频或图片 -->
|
|
<!-- 视频或图片 -->
|
|
- <div class="image-list">
|
|
|
|
|
|
+ <draggable v-model="fileList" class="image-list" @end="onDragEnd">
|
|
<div v-for="(file, index) in fileList" :key="index"
|
|
<div v-for="(file, index) in fileList" :key="index"
|
|
:class="`${!file.loading ? 'image-item-hover' : ''} image-item`">
|
|
:class="`${!file.loading ? 'image-item-hover' : ''} image-item`">
|
|
<img :src="require('../../assets/image/yunketang.png')" class="cert-image" @click="previewImage(index)">
|
|
<img :src="require('../../assets/image/yunketang.png')" class="cert-image" @click="previewImage(index)">
|
|
@@ -22,13 +22,14 @@
|
|
<div class="image-actions-loging" v-if="file.loading">
|
|
<div class="image-actions-loging" v-if="file.loading">
|
|
文件上传中...
|
|
文件上传中...
|
|
</div>
|
|
</div>
|
|
|
|
+ <div class="image-name">{{ file.name }}</div>
|
|
</div>
|
|
</div>
|
|
- </div>
|
|
|
|
|
|
+ </draggable>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- 预览视频 -->
|
|
<!-- 预览视频 -->
|
|
- <el-dialog title="预览视频" append-to-body :visible.sync="previewingVideoVisable" width="900px" top="6.5vh" :before-close="handleClose">
|
|
|
|
|
|
+ <el-dialog :title="previewVideoName" append-to-body :visible.sync="previewingVideoVisable" width="900px" top="6.5vh" :before-close="handleClose">
|
|
<div class="previewingVideo">
|
|
<div class="previewingVideo">
|
|
<video :src="previewVideoSrc" :poster="require('../../assets/image/yunketang.png')" controls></video>
|
|
<video :src="previewVideoSrc" :poster="require('../../assets/image/yunketang.png')" controls></video>
|
|
</div>
|
|
</div>
|
|
@@ -38,6 +39,7 @@
|
|
|
|
|
|
<script>
|
|
<script>
|
|
import { post, checkAndAddUpload } from '../../api'
|
|
import { post, checkAndAddUpload } from '../../api'
|
|
|
|
+import draggable from 'vuedraggable'
|
|
export default {
|
|
export default {
|
|
name: 'GcpCertification',
|
|
name: 'GcpCertification',
|
|
data() {
|
|
data() {
|
|
@@ -46,13 +48,15 @@ export default {
|
|
imageList: [],
|
|
imageList: [],
|
|
imageListTime: null,
|
|
imageListTime: null,
|
|
previewingVideoVisable: false,
|
|
previewingVideoVisable: false,
|
|
- previewVideoSrc: ''
|
|
|
|
|
|
+ previewVideoSrc: '',
|
|
|
|
+ previewVideoName: ''
|
|
}
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
previewingVideo(index) {
|
|
previewingVideo(index) {
|
|
const row = this.fileList[index]
|
|
const row = this.fileList[index]
|
|
this.previewVideoSrc = row.url
|
|
this.previewVideoSrc = row.url
|
|
|
|
+ this.previewVideoName = row.name
|
|
this.previewingVideoVisable = true
|
|
this.previewingVideoVisable = true
|
|
},
|
|
},
|
|
uploadGCPImg(file) {
|
|
uploadGCPImg(file) {
|
|
@@ -69,14 +73,16 @@ export default {
|
|
const formData = new FormData()
|
|
const formData = new FormData()
|
|
formData.append('coverImage', this.imageList[i])
|
|
formData.append('coverImage', this.imageList[i])
|
|
this.fileList.unshift({
|
|
this.fileList.unshift({
|
|
- name: 'a',
|
|
|
|
|
|
+ name: (this.imageList[i].name || '').split('.')[0],
|
|
loading: true,
|
|
loading: true,
|
|
url: '',
|
|
url: '',
|
|
- imgError: ''
|
|
|
|
|
|
+ imgError: '',
|
|
|
|
+ id: '',
|
|
})
|
|
})
|
|
this.http.uploadFile(`/course-carousel/uploadAndSave`, formData, res => {
|
|
this.http.uploadFile(`/course-carousel/uploadAndSave`, formData, res => {
|
|
this.fileList[i].url = checkAndAddUpload(res.data.courseUrl)
|
|
this.fileList[i].url = checkAndAddUpload(res.data.courseUrl)
|
|
- this.fileList[i].name = res.data.id
|
|
|
|
|
|
+ this.fileList[i].name = (res.data.fileName || '').split('.')[0]
|
|
|
|
+ this.fileList[i].id = res.data.id
|
|
this.fileList[i].loading = false
|
|
this.fileList[i].loading = false
|
|
}, err => {
|
|
}, err => {
|
|
this.fileList.splice(i, 1)
|
|
this.fileList.splice(i, 1)
|
|
@@ -111,13 +117,41 @@ export default {
|
|
post(`/course-carousel/list`, {}).then(res => {
|
|
post(`/course-carousel/list`, {}).then(res => {
|
|
this.fileList = res.data.map(item => {
|
|
this.fileList = res.data.map(item => {
|
|
return {
|
|
return {
|
|
- name: item.id,
|
|
|
|
|
|
+ name: (item.fileName || '').split('.')[0],
|
|
|
|
+ url: checkAndAddUpload(item.courseUrl),
|
|
|
|
+ loading: false,
|
|
|
|
+ imgError: '',
|
|
|
|
+ id: item.id
|
|
|
|
+ }
|
|
|
|
+ }).reverse()
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ onDragEnd() {
|
|
|
|
+ console.log(this.fileList, '<==== fileList')
|
|
|
|
+ const list = this.fileList.map((item, index) => {
|
|
|
|
+ return {
|
|
|
|
+ id: item.id,
|
|
|
|
+ seq: index
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ post(`/course-carousel/sortSeq`, { jsonStr: JSON.stringify(list) }).then(res => {
|
|
|
|
+ this.fileList = res.data.map(item => {
|
|
|
|
+ return {
|
|
|
|
+ name: (item.fileName || '').split('.')[0],
|
|
url: checkAndAddUpload(item.courseUrl),
|
|
url: checkAndAddUpload(item.courseUrl),
|
|
loading: false,
|
|
loading: false,
|
|
- imgError: ''
|
|
|
|
|
|
+ imgError: '',
|
|
|
|
+ id: item.id
|
|
}
|
|
}
|
|
}).reverse()
|
|
}).reverse()
|
|
})
|
|
})
|
|
|
|
+ },
|
|
|
|
+ previewImage(index) {
|
|
|
|
+ // Placeholder for image preview functionality
|
|
|
|
+ },
|
|
|
|
+ handleClose(done) {
|
|
|
|
+ this.previewingVideoVisable = false
|
|
|
|
+ done()
|
|
}
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
mounted() {
|
|
@@ -167,12 +201,16 @@ export default {
|
|
|
|
|
|
.image-item {
|
|
.image-item {
|
|
position: relative;
|
|
position: relative;
|
|
- width: 148px;
|
|
|
|
|
|
+ width: 240px;
|
|
height: 148px;
|
|
height: 148px;
|
|
border-radius: 4px;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
transition: all 0.3s;
|
|
transition: all 0.3s;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ align-items: center;
|
|
}
|
|
}
|
|
|
|
|
|
.image-item:hover {
|
|
.image-item:hover {
|
|
@@ -185,12 +223,17 @@ export default {
|
|
}
|
|
}
|
|
|
|
|
|
.cert-image {
|
|
.cert-image {
|
|
- width: 100%;
|
|
|
|
- height: 100%;
|
|
|
|
|
|
+ width: 80%;
|
|
|
|
+ height: 80%;
|
|
object-fit: cover;
|
|
object-fit: cover;
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+.image-name {
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ margin-top: 4px;
|
|
|
|
+}
|
|
|
|
+
|
|
.image-actions {
|
|
.image-actions {
|
|
position: absolute;
|
|
position: absolute;
|
|
top: 0;
|
|
top: 0;
|