You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
135 lines
4.3 KiB
135 lines
4.3 KiB
<template>
|
|
<div class="body1">
|
|
<p class="title">其他要求文件</p>
|
|
<div class="else_file" v-if="contentDatas.else_file!=null">
|
|
<div>
|
|
<img :src="contentDatas.else_file[0].url" class="file_img" v-if="contentDatas.else_file[0].type==0">
|
|
<p class="upload_span" v-else>
|
|
<a class="table_right_item_a" :href="contentDatas.else_file[0].url" target="_blank" rel="nofollow">点击下载</a>
|
|
</p>
|
|
<div class="img_span">
|
|
<span @click="onPreview([contentDatas.else_file[0].url])" v-if="contentDatas.else_file[0].type==0">查看原图</span>
|
|
<el-upload
|
|
class="upload-demo"
|
|
:action="action"
|
|
:on-change="fileChange"
|
|
:show-file-list="false"
|
|
:on-error="handleAvatarError"
|
|
list-type="picture"
|
|
:on-success="(res,file)=>{handleAvatarSuccess(res,file,0,0)}"
|
|
>
|
|
<span class="upload_span">重新上传</span>
|
|
</el-upload>
|
|
</div>
|
|
</div>
|
|
<div class="else_file_right" v-if="contentDatas.else_file.length>1">
|
|
<!-- <div class="else_file_right" v-if="contentDatas.else_file!=null"> -->
|
|
<div class="img_span else_files" v-for="(item,index) in contentDatas.else_file" :key="index">
|
|
<template v-if="index!=0">
|
|
<span>资质证明文件{{index}}</span>
|
|
<div class="img_span">
|
|
<span @click="onPreview([item.url])" v-if="item.type==0">查看原图</span>
|
|
<a class="upload_span" v-else :href="item.url" target="_blank" rel="nofollow">点击下载</a>
|
|
<el-upload
|
|
class="upload-demo"
|
|
:action="action"
|
|
:on-change="fileChange"
|
|
:show-file-list="false"
|
|
:on-error="handleAvatarError"
|
|
list-type="picture"
|
|
:on-success="(res,file)=>{handleAvatarSuccess(res,file,0,index)}"
|
|
>
|
|
<span class="upload_span">重新上传</span>
|
|
</el-upload>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<div class="img_span">
|
|
<el-upload
|
|
class="upload-demo"
|
|
:action="action"
|
|
:on-change="fileChange"
|
|
:show-file-list="false"
|
|
:on-error="handleAvatarError"
|
|
list-type="picture"
|
|
:on-success="(res,file)=>{handleAvatarSuccess(res,file,1)}"
|
|
>
|
|
<span class="upload_span">+上传更多文件</span>
|
|
</el-upload>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<el-image-viewer
|
|
v-if="showViewer"
|
|
:on-close="closeViewer"
|
|
:url-list="img_url"
|
|
:z-index="9999"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import bus from '../../bus'
|
|
export default {
|
|
props:{
|
|
contentDatas:{
|
|
require: true,
|
|
}
|
|
},
|
|
components: {
|
|
ElImageViewer: () => import('element-ui/packages/image/src/image-viewer')
|
|
},
|
|
data() {
|
|
return{
|
|
host:'http://rccqapi.szcaee.cn ',
|
|
action:'http://rccqapi.szcaee.cn /api/Index/uploadFile',
|
|
showViewer:false,
|
|
img_url:[]
|
|
}
|
|
},
|
|
methods:{
|
|
onPreview(img) {
|
|
this.img_url = img
|
|
this.showViewer = true
|
|
},
|
|
// 关闭查看器
|
|
closeViewer() {
|
|
this.showViewer = false
|
|
},
|
|
handleAvatarError(){
|
|
this.$message.error('文件上传失败！');
|
|
},
|
|
handleAvatarSuccess(res,file,type,index){
|
|
console.info(res)
|
|
if(res.code==1){
|
|
let upDate={
|
|
url:{url:this.host+res.data.img_url,type:file_type},
|
|
key:'else_file',
|
|
index:index,
|
|
type:type
|
|
}
|
|
bus.$emit('img', upDate);
|
|
this.$message.success('文件上传成功！');
|
|
}
|
|
},
|
|
fileChange(file){
|
|
const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg','application/pdf'];
|
|
const isJPG = typeArr.indexOf(file.raw.type) !== -1;
|
|
const isLt3M = file.size / 1024 / 1024 < 10;
|
|
if (!isJPG) {
|
|
this.$message.error('只能上传图片和PDF文件!');
|
|
this.$refs.upload.clearFiles();
|
|
return;
|
|
}
|
|
if (!isLt3M) {
|
|
this.$message.error('上传图片大小不能超过 10MB!');
|
|
this.$refs.upload.clearFiles();
|
|
// this.$set(this.query, 'goods_img', '');
|
|
return;
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
@import url('../../../../assets/css/sidebar.css');
|
|
</style>
|
|
|