This commit is contained in:
parent
2da265a3c8
commit
b6186de1ce
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue