|
|
|
|
@ -1,28 +1,144 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="L-unitInfo">
|
|
|
|
|
<el-row>
|
|
|
|
|
<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>
|
|
|
|
|
<eluploadimg></eluploadimg>
|
|
|
|
|
|
|
|
|
|
<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>上传图片</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>
|
|
|
|
|
<eluploadimg></eluploadimg>
|
|
|
|
|
|
|
|
|
|
<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>上传图片</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 class="enterprise-header">
|
|
|
|
|
<span class="dataCloudMap-birght"></span>
|
|
|
|
|
<div class="enterprise-header-title">身份证照片</div>
|
|
|
|
|
<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>请上传国徽侧照片</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>请上传头像侧照片</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>
|
|
|
|
|
@ -33,15 +149,28 @@
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
import eluploadimg from "@/views/components/eluploadimg/index.vue"
|
|
|
|
|
import eluploadimgshenfenz from "@/views/components/eluploadimgshenfenz/index.vue"
|
|
|
|
|
import { getToken } from "@/utils/auth";
|
|
|
|
|
export default {
|
|
|
|
|
name: "tabTwo",
|
|
|
|
|
components: { eluploadimg,eluploadimgshenfenz },
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
// 判断登陆用户是何身份⌈ 01 ： 企业 02 ： 政务 ⌋
|
|
|
|
|
userType: this.$store.state.user.userType,
|
|
|
|
|
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: "",
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
@ -53,19 +182,105 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
goEnterprice(creditCode) {
|
|
|
|
|
// console.log(creditCode);
|
|
|
|
|
if (this.userType == '01') {
|
|
|
|
|
this.$router.push({
|
|
|
|
|
name: 'EenterInfo',
|
|
|
|
|
query: { userId: this.info.id, creditCode: creditCode }
|
|
|
|
|
})
|
|
|
|
|
methods:{
|
|
|
|
|
// 放大当前图片
|
|
|
|
|
handlePictureCardPreview(file) {
|
|
|
|
|
this.dialogImageUrl = file.url;
|
|
|
|
|
this.dialogVisible = true;
|
|
|
|
|
},
|
|
|
|
|
// 正面照的删除
|
|
|
|
|
handleRemoveOne() {
|
|
|
|
|
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 {
|
|
|
|
|
this.$router.push({
|
|
|
|
|
name: 'enterpriselibraryInfo',
|
|
|
|
|
query: { userId: this.info.id, creditCode: creditCode }
|
|
|
|
|
})
|
|
|
|
|
if(!this.imageUrlOne) {
|
|
|
|
|
this.$modal.msgError(`请上传国徽侧照片`);
|
|
|
|
|
} else if(!this.imageUrlTwo) {
|
|
|
|
|
this.$modal.msgError(`请上传头像侧照片`);
|
|
|
|
|
} else if(!this.fileListOne.length) {
|
|
|
|
|
this.$modal.msgError(`请上传正面照`);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
@ -74,7 +289,7 @@ export default {
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.L-unitInfo {
|
|
|
|
|
padding: 10px;
|
|
|
|
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
.enterprise-header {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
@ -96,10 +311,94 @@ export default {
|
|
|
|
|
color: #333333;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.upload-img-box {
|
|
|
|
|
margin: 10px 0;
|
|
|
|
|
height: 170px;
|
|
|
|
|
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 {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
.el-button {
|
|
|
|
|
// width: 80%;
|
|
|
|
|
width: 100px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
