This commit is contained in:
faiz 2024-07-03 16:33:19 +08:00
parent 2da265a3c8
commit b6186de1ce
1 changed files with 61 additions and 18 deletions

View File

@ -82,10 +82,15 @@
:show-file-list="false"
:on-success="handleAvatarSuccess"
>
<img style="width: 100px;height: 100px;" v-if="imageUrl" :src="imageUrl" class="avatar" alt="">
<i v-else class="el-icon-plus avatar-uploader-icon" />
<div v-if="anchors.img_zip" class="img-box">
<i @click.stop="handleClose('img_zip')" class="close el-icon-close" />
<i v-if="!checkIfUrlContainsImage(anchors.img_zip)" class="el-icon-folder" />
<img v-else style="width: 100px;height: 100px;" :src="anchors.img_zip" class="avatar" alt="">
</div>
<i v-else class="el-icon-plus avatar-uploader-icon"/>
</el-upload>
<span style="color: red">(请上传zip格式的文件图片)</span>
<span>{{ anchors.img_zip }}</span>
<div style="color: red">(请上传zip格式的文件图片)</div>
</el-form-item>
<el-form-item label="上传行程">
<el-upload
@ -94,9 +99,14 @@
:show-file-list="false"
:on-success="handleSuccess"
>
<img style="width: 100px;height: 100px;" v-if="imageUrls" :src="imageUrls" class="avatar" alt="">
<i v-else class="el-icon-plus avatar-uploader-icon" />
<div v-if="anchors.trip_zip" class="img-box">
<i @click.stop="handleClose('trip_zip')" class="close el-icon-close" />
<i v-if="!checkIfUrlContainsImage(anchors.trip_zip)" class="el-icon-folder" />
<img v-else style="width: 100px;height: 100px;" :src="anchors.trip_zip" class="avatar" alt="">
</div>
<i v-else class="el-icon-plus avatar-uploader-icon"/>
</el-upload>
<span>{{ anchors.trip_zip }}</span>
<span style="color: red">(本行程请上传,ppt,word,pdf格式的文件)</span>
</el-form-item>
</el-form>
@ -154,10 +164,15 @@
:show-file-list="false"
:on-success="handleAvatarSuccess"
>
<img style="width: 100px;height: 100px;" v-if="imageUrl" :src="imageUrl" class="avatar" alt="">
<i v-else class="el-icon-plus avatar-uploader-icon" />
<div v-if="anchors.img_zip" class="img-box">
<i @click.stop="handleClose('img_zip')" class="close el-icon-close" />
<i v-if="!checkIfUrlContainsImage(anchors.img_zip)" class="el-icon-folder" />
<img v-else style="width: 100px;height: 100px;" :src="anchors.img_zip" class="avatar" alt="">
</div>
<i v-else class="el-icon-plus avatar-uploader-icon"/>
</el-upload>
<span style="color: red">(请上传zip格式的文件图片)</span>
<span>{{ anchors.img_zip }}</span>
<div style="color: red">(请上传zip格式的文件图片)</div>
</el-form-item>
<el-form-item label="上传行程">
<el-upload
@ -166,10 +181,15 @@
:show-file-list="false"
:on-success="handleSuccess"
>
<img style="width: 100px;height: 100px;" v-if="imageUrls" :src="imageUrls" class="avatar" alt="">
<i v-else class="el-icon-plus avatar-uploader-icon" />
<div v-if="anchors.trip_zip" class="img-box">
<i @click.stop="handleClose('trip_zip')" class="close el-icon-close" />
<i v-if="!checkIfUrlContainsImage(anchors.trip_zip)" class="el-icon-folder" />
<img v-else style="width: 100px;height: 100px;" :src="anchors.trip_zip" class="avatar" alt="">
</div>
<i v-else class="el-icon-plus avatar-uploader-icon"/>
</el-upload>
<span style="color: red">(本行程请上传,ppt,word,pdf格式的文件)</span>
<span>{{ anchors.trip_zip }}</span>
<div style="color: red">(本行程请上传,ppt,word,pdf格式的文件)</div>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
@ -206,8 +226,6 @@ export default {
dialogCreate: false,
dialogEdit: false,
item: {},
imageUrl:'',
imageUrls:'',
anchors: {
qaQuestions:[]
},
@ -222,6 +240,13 @@ export default {
this.onChange()
},
methods: {
checkIfUrlContainsImage(url) {
const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.svg', '.webp'];
return imageExtensions.some(extension => url.toLowerCase().endsWith(extension));
},
handleClose(val){
this.anchors[val] = ''
},
handleAdd(){
this.anchors.qaQuestions.push({
sort:this.anchors.qaQuestions[this.anchors.qaQuestions.length-1].sort+1,
@ -250,13 +275,12 @@ export default {
})
},
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw)
this.anchors.img_zip = this.imageUrl
console.log(this.imageUrl);
this.anchors.img_zip = URL.createObjectURL(file.raw)
// this.anchors.img_zip = this.img_zip
},
handleSuccess(res, file) {
this.imageUrls = URL.createObjectURL(file.raw)
this.anchors.trip_zip = this.imageUrls
this.anchors.trip_zip = URL.createObjectURL(file.raw)
// this.anchors.trip_zip = this.trip_zip
},
onAdd() {
this.anchors = {
@ -266,6 +290,8 @@ export default {
content: ''
}]
} // 0
this.anchors.img_zip = ''
this.anchors.trip_zip = ''
this.dialogCreate = true
},
onEdit(item) {
@ -281,6 +307,8 @@ export default {
}else{
this.anchors = { ...item}
}
this.anchors.img_zip = item.img_zip
this.anchors.trip_zip = item.trip_zip
this.dialogEdit = true
},
onSave() {
@ -337,6 +365,20 @@ export default {
</script>
<style scoped>
.img-box{
position: relative;
}
.el-icon-folder{
color: #409EFF !important;
font-size: 100px;
}
.close{
position: absolute;
top: -10px;
right: -8px;
font-size: 18px;
color: #409EFF;
}
.qa-desc{
display: flex;
}
@ -390,6 +432,7 @@ export default {
height: 100px;
line-height: 100px;
text-align: center;
position: relative;
}
</style>
<style src="@wangeditor/editor/dist/css/style.css"></style>