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.
398 lines
12 KiB
398 lines
12 KiB
<template>
|
|
<div class="L-unitInfo">
|
|
<el-row style="height: 100%;">
|
|
<el-col :span="12" class="left-img-box">
|
|
<div class="img-box img-top-box">
|
|
<div class="enterprise-header">
|
|
<span class="dataCloudMap-birght"></span>
|
|
<div class="enterprise-header-title">正面照</div>
|
|
</div>
|
|
<div class="upload-img-box">
|
|
<el-upload :action="uploadImgUrl" :headers="headers" list-type="picture-card" class="up-load-el"
|
|
:file-list="fileListOne" :on-success="handleUploadSuccess" :before-upload="handleBeforeUpload">
|
|
<i slot="default" class="el-icon-plus"></i>
|
|
<span class="huisetouxiang">上传图片</span>
|
|
<div slot="file" slot-scope="{file}">
|
|
<img class="el-upload-list__item-thumbnail" :src="VUE_APP_BASE_API + file.url" alt="">
|
|
<span class="el-upload-list__item-actions">
|
|
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
|
|
<i class="el-icon-zoom-in"></i>
|
|
</span>
|
|
<!-- <span
|
|
v-if="!disabled"
|
|
class="el-upload-list__item-delete"
|
|
@click="handleDownload(file)"
|
|
>
|
|
<i class="el-icon-download"></i>
|
|
</span> -->
|
|
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemoveOne(file)">
|
|
<i class="el-icon-delete"></i>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</el-upload>
|
|
<el-dialog :visible.sync="dialogVisible" width="30%">
|
|
<img width="100%" height="auto" :src="dialogImageUrl" alt="">
|
|
</el-dialog>
|
|
</div>
|
|
</div>
|
|
<div class="img-box img-bottom-box">
|
|
<div class="enterprise-header">
|
|
<span class="dataCloudMap-birght"></span>
|
|
<div class="enterprise-header-title">其他照片</div>
|
|
</div>
|
|
<div class="upload-img-box">
|
|
<el-upload :action="uploadImgUrl" :headers="headers" list-type="picture-card" class="up-load-el"
|
|
:file-list="fileListTwo" :on-success="handleUploadSuccessTwo" :before-upload="handleBeforeUpload">
|
|
<i slot="default" class="el-icon-plus"></i>
|
|
<span class="huisetouxiang">上传图片</span>
|
|
<div slot="file" slot-scope="{file}">
|
|
<img class="el-upload-list__item-thumbnail" :src="VUE_APP_BASE_API + file.url" alt="">
|
|
<span class="el-upload-list__item-actions">
|
|
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
|
|
<i class="el-icon-zoom-in"></i>
|
|
</span>
|
|
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemoveTwo(file)">
|
|
<i class="el-icon-delete"></i>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</el-upload>
|
|
<el-dialog :visible.sync="dialogVisible" width="30%">
|
|
<img width="100%" height="auto" :src="dialogImageUrl" alt="">
|
|
</el-dialog>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12" class="right-img-box">
|
|
<div style="flex: 1;">
|
|
<div class="enterprise-header">
|
|
<span class="dataCloudMap-birght"></span>
|
|
<div class="enterprise-header-title">身份证照片</div>
|
|
</div>
|
|
<div class="built_in_box">
|
|
<!-- 身份证正面 -->
|
|
<el-upload class="up-load-el-two up-load-el-three" :action="uploadImgUrl" :headers="headers" :limit="1"
|
|
:show-file-list="false" :on-success="handleAvatarSuccessOne" :before-upload="handleBeforeUpload">
|
|
<img v-if="imageUrlOne" :src="VUE_APP_BASE_API + imageUrlOne" class="avatar">
|
|
<div class="avatar-box" v-else>
|
|
<i class="el-icon-plus avatar-uploader-icon"></i>
|
|
<span class="huisetouxiang">请上传国徽侧照片</span>
|
|
</div>
|
|
</el-upload>
|
|
<!-- 身份证反面 -->
|
|
<el-upload class="up-load-el-two" :action="uploadImgUrl" :headers="headers" :limit="1"
|
|
:show-file-list="false" :on-success="handleAvatarSuccessTwo" :before-upload="handleBeforeUpload">
|
|
<img v-if="imageUrlTwo" :src="VUE_APP_BASE_API + imageUrlTwo" class="avatar">
|
|
<div class="avatar-box" v-else>
|
|
<i class="el-icon-plus avatar-uploader-icon"></i>
|
|
<span class="huisetouxiang">请上传头像侧照片</span>
|
|
</div>
|
|
</el-upload>
|
|
</div>
|
|
</div>
|
|
<div class="right-btn-box">
|
|
<el-button type="primary" @click="save">保存</el-button>
|
|
</div>
|
|
<div class="rightleft">
|
|
<!-- <eluploadimgshenfenz></eluploadimgshenfenz>
|
|
<eluploadimgshenfenz></eluploadimgshenfenz> -->
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { getToken } from "@/utils/auth";
|
|
import eluploadimgshenfenz from "@/views/components/eluploadimgshenfenz/index.vue"
|
|
export default {
|
|
name: "tabTwo",
|
|
components: { eluploadimgshenfenz },
|
|
data() {
|
|
return {
|
|
uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
|
|
VUE_APP_BASE_API: process.env.VUE_APP_BASE_API,
|
|
headers: {
|
|
Authorization: "Bearer " + getToken(),
|
|
},
|
|
dialogVisible: false,
|
|
dialogImageUrl: '',
|
|
disabled: false,
|
|
// 正面照
|
|
fileListOne: [],
|
|
// 其他照片
|
|
fileListTwo: [],
|
|
// 身份证正面
|
|
imageUrlOne: "",
|
|
// 身份证反面
|
|
imageUrlTwo: "",
|
|
}
|
|
},
|
|
|
|
props: {
|
|
info: {
|
|
type: Object,
|
|
default: () => {
|
|
return {}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
// 放大当前图片
|
|
handlePictureCardPreview(file) {
|
|
console.log(file);
|
|
|
|
this.dialogImageUrl = process.env.VUE_APP_BASE_API + file.url;
|
|
this.dialogVisible = true;
|
|
},
|
|
// 正面照的删除
|
|
handleRemoveOne(file) {
|
|
const findex = this.fileListOne.map(f => f.name).indexOf(file.name);
|
|
if (findex > -1) {
|
|
this.fileListOne.splice(findex, 1);
|
|
}
|
|
},
|
|
// 其他照片的删除
|
|
handleRemoveTwo(file) {
|
|
const findex = this.fileListTwo.map(f => f.name).indexOf(file.name);
|
|
if (findex > -1) {
|
|
this.fileListTwo.splice(findex, 1);
|
|
}
|
|
},
|
|
// 上传前loading加载
|
|
handleBeforeUpload(file) {
|
|
let isImg = false;
|
|
let fileExtension = "";
|
|
if (file.name.lastIndexOf(".") > -1) {
|
|
fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
|
|
}
|
|
isImg = ["png", "jpg", "jpeg"].some(type => {
|
|
if (file.type.indexOf(type) > -1) return true;
|
|
if (fileExtension && fileExtension.indexOf(type) > -1) return true;
|
|
return false;
|
|
});
|
|
|
|
if (!isImg) {
|
|
this.$modal.msgError(`文件格式不正确, 请上传${["png", "jpg", "jpeg"].join("/")}图片格式文件!`);
|
|
return false;
|
|
}
|
|
const isLt = file.size / 1024 / 1024 < 5;
|
|
if (!isLt) {
|
|
this.$modal.msgError(`上传图片大小不能超过 ${5} MB!`);
|
|
return false;
|
|
}
|
|
this.$modal.loading("正在上传图片，请稍候...");
|
|
},
|
|
// 正面照上传成功钩子
|
|
handleUploadSuccess(res, file) {
|
|
if (res.code === 200) {
|
|
this.fileListOne.push({ name: res.fileName, url: res.fileName });
|
|
this.$modal.closeLoading();
|
|
}
|
|
},
|
|
// 其他照片上传成功钩子
|
|
handleUploadSuccessTwo(res, file) {
|
|
if (res.code === 200) {
|
|
this.fileListTwo.push({ name: res.fileName, url: res.fileName });
|
|
this.$modal.closeLoading();
|
|
}
|
|
},
|
|
// 身份证国徽侧上传成功钩子
|
|
handleAvatarSuccessOne(res, file) {
|
|
if (res.code === 200) {
|
|
this.imageUrlOne = res.fileName;
|
|
this.$modal.closeLoading();
|
|
}
|
|
},
|
|
// 身份证头像侧上传成功钩子
|
|
handleAvatarSuccessTwo(res, file) {
|
|
if (res.code === 200) {
|
|
this.imageUrlTwo = res.fileName;
|
|
this.$modal.closeLoading();
|
|
}
|
|
},
|
|
// 保存按钮
|
|
save() {
|
|
if (this.imageUrlOne && this.imageUrlTwo && this.fileListOne.length) {
|
|
let imgArrOne = [];
|
|
let imgArrTwo = [];
|
|
if (this.fileListOne.length > 0) {
|
|
this.fileListOne.forEach(item => {
|
|
imgArrOne.push(item.url);
|
|
})
|
|
}
|
|
if (this.fileListTwo.length > 0) {
|
|
this.fileListTwo.forEach(item => {
|
|
imgArrTwo.push(item.url);
|
|
})
|
|
}
|
|
console.log("正面照", imgArrOne.join(','));
|
|
console.log("其他照片", imgArrTwo.join(','));
|
|
console.log("国徽侧照片", this.imageUrlOne);
|
|
console.log("头像侧照片", this.imageUrlTwo);
|
|
} else {
|
|
if (!this.imageUrlOne) {
|
|
this.$modal.msgError(`请上传国徽侧照片`);
|
|
} else if (!this.imageUrlTwo) {
|
|
this.$modal.msgError(`请上传头像侧照片`);
|
|
} else if (!this.fileListOne.length) {
|
|
this.$modal.msgError(`请上传正面照`);
|
|
}
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.L-unitInfo {
|
|
padding: 10px;
|
|
height: 100%;
|
|
|
|
.enterprise-header {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
|
|
.dataCloudMap-birght {
|
|
width: 6px;
|
|
height: 18px;
|
|
background: #0086FF;
|
|
box-shadow: 3px 0 3px 0px #0086FF;
|
|
border-radius: 5px 5px 5px 5px;
|
|
}
|
|
|
|
.enterprise-header-title {
|
|
font-family: AlibabaPuHuiTiB;
|
|
margin: 0 10px;
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
.upload-img-box {
|
|
margin: 10px 0;
|
|
height: 150px;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
|
|
::v-deep .up-load-el {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
width: 100%;
|
|
|
|
// 列表
|
|
.el-upload-list--picture-card {
|
|
margin-right: 10px;
|
|
max-width: calc(100% - 120px);
|
|
overflow-x: auto;
|
|
/* 开启 X 轴滚动 */
|
|
white-space: nowrap;
|
|
/* 防止换行 */
|
|
}
|
|
|
|
// 选择框
|
|
.el-upload--picture-card {
|
|
width: 100px;
|
|
height: 100px;
|
|
margin-bottom: 5px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
line-height: 25px;
|
|
}
|
|
|
|
li {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 身份证照片
|
|
.built_in_box {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
::v-deep .up-load-el-two {
|
|
width: 400px;
|
|
height: 240px;
|
|
|
|
.el-upload {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.avatar {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.avatar-box {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 1px dashed #ccc;
|
|
border-radius: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
::v-deep .up-load-el-three {
|
|
margin-right: 40px;
|
|
}
|
|
}
|
|
|
|
.left-img-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.img-top-box {}
|
|
|
|
.img-bottom-box {}
|
|
}
|
|
|
|
.right-img-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
|
|
.right-btn-box {
|
|
margin-left: 700px;
|
|
margin-top: 100px;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
.el-button {
|
|
// width: 80%;
|
|
width: 100px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.img-box {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.rightleft {
|
|
width: 100%;
|
|
display: grid;
|
|
grid-template-columns: 45% 45%;
|
|
// grid-row-gap: 10px;
|
|
}
|
|
|
|
.huisetouxiang {
|
|
font-family: "Source Han Sans CN-Regular";
|
|
font-size: 20px;
|
|
color: #8c939d;
|
|
}
|
|
.el-icon-plus {
|
|
color: #8c939d;
|
|
|
|
font-size: 35px;
|
|
}
|
|
</style> |