Zlpt_Portal/src/views/EnterpriseCertification.vue

943 lines
36 KiB
Vue

<template>
<div class="enterpriseCertification">
<div class="baseInfo card">
<div class="top">
<div class="title">企业基本信息</div>
<div class="options">
<!-- <el-button size="small" type="primary">我的邀请码</el-button>
<el-button size="small" type="primary">编辑</el-button> -->
</div>
</div>
<el-form class="baseForm">
<el-row :gutter="20">
<el-col :span="6">
<el-form-item label="企业名称">
<el-input
placeholder="输入企业名称"
clearable
v-model.trim="applyParams.companyName"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="企业类型">
<el-select
placeholder="请选择企业类型"
clearable
v-model="applyParams.companyType"
@change="changeProvince">
<el-option
v-for="item in selcompanyTypeList"
:key="item.id"
:label="item.name"
:value="item.name"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<el-form-item label="企业所属">
<el-select
placeholder="请选择企业所属"
clearable
v-model="applyParams.companyLtd"
@change="changeProvince">
<el-option
v-for="item in selcompanyLtdList"
:key="item.id"
:label="item.name"
:value="item.name"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="统一社会信用代码">
<el-input
placeholder="请输入统一社会信用代码"
clearable
v-model.trim="applyParams.creditCode"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="注册地址">
<el-row :gutter="20">
<el-col :span="5">
<el-select
placeholder="请选择省份"
clearable
v-model="applyParams.registerS"
@change="changeProvince">
<el-option
v-for="item in selProvinceList"
:key="item.id"
:label="item.name"
:value="item.code + ',' + item.name"></el-option>
</el-select>
</el-col>
<el-col :span="5">
<el-select
v-model="applyParams.registerAddressProvince"
placeholder="请选择市"
@change="changeMarket"
clearable>
<el-option
v-for="item in selMarketList"
:key="item.id"
:label="item.name"
:value="item.code + ',' + item.name"></el-option>
</el-select>
</el-col>
<el-col :span="5">
<el-select
v-model="applyParams.registerAddressArea"
placeholder="请选择区"
clearable
@change="changeArea">
<el-option
v-for="item in selAreaList"
:key="item.id"
:label="item.name"
:value="item.code + ',' + item.name"></el-option>
</el-select>
</el-col>
<el-col :span="6">
<el-input
v-model="applyParams.registerAddress"
placeholder="请输入实际办公地址"
clearable></el-input>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="经营地址">
<el-row :gutter="20">
<el-col :span="5">
<el-select
placeholder="请选择省份"
clearable
v-model="applyParams.registerSs"
@change="opeChangeProvince">
<el-option
v-for="item in selProvinceList"
:key="item.id"
:label="item.name"
:value="item.code + ',' + item.name"></el-option>
</el-select>
</el-col>
<el-col :span="5">
<el-select
v-model="applyParams.operateAddressProvince"
placeholder="请选择市"
@change="opeChangeMarket"
clearable>
<el-option
v-for="item in selMarketList"
:key="item.id"
:label="item.name"
:value="item.code + ',' + item.name"></el-option>
</el-select>
</el-col>
<el-col :span="5">
<el-select
v-model="applyParams.operateAddressArea"
placeholder="请选择区"
@change="opeChangeArea"
clearable>
<el-option
v-for="item in selAreaList"
:key="item.id"
:label="item.name"
:value="item.code + ',' + item.name"></el-option>
</el-select>
</el-col>
<el-col :span="6">
<el-input
v-model="applyParams.operateAddress"
clearable
placeholder="请输入实际办公地址"></el-input>
</el-col>
</el-row>
</el-form-item>
<el-row :gutter="20">
<el-col :span="5">
<el-form-item label="法人证件类型">
<el-select
v-model="applyParams.certificatetype"
clearable
placeholder="请选法人证件类型">
<el-option
v-for="item in selIdTypeList"
:key="item.id"
:label="item.name"
:value="item.name"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="法人证件号码">
<el-input
placeholder="请输入法人证件号码"
v-model.trim="applyParams.idNumber"
clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item class="" label="企业logo">
<uploadComponent
:maxLimit="3"
listType="picture-card"
:acceptTypeList="['.jpg', '.jpeg', '.png']"
width="120px"
height="120px"
:autoUpload="true"
:successResultCallBack="successResultCallBackFn">
<template v-slot:default>
<el-icon size="48" color="#aaa"><Plus /></el-icon>
</template>
</uploadComponent>
<div class="previewExample">
<!-- <span>预览</span> -->
<span @click="previewBusinessLicense">查看示例</span>
</div>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="8">
<el-form-item class="" label="身份证国徽面">
<uploadComponent
:maxLimit="3"
listType="picture-card"
:acceptTypeList="['.jpg', '.jpeg', '.png']"
width="120px"
height="120px"
:successResultCallBack="successResultCallBackFnfrCardf">
<template v-slot:default>
<el-icon size="48" color="#aaa"><Plus /></el-icon>
</template>
</uploadComponent>
<div class="previewExample">
<!-- <span>预览</span> -->
<span @click="previewCardOpposite">查看示例</span>
</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item class="" label="身份证肖像面">
<uploadComponent
:maxLimit="3"
listType="picture-card"
:acceptTypeList="['.jpg', '.jpeg', '.png']"
width="120px"
height="120px"
:successResultCallBack="successResultCallBackFnfrCardz">
<template v-slot:default>
<el-icon size="48" color="#aaa"><Plus /></el-icon>
</template>
</uploadComponent>
<div class="previewExample">
<!-- <span>预览</span> -->
<span @click="previewCardFront">查看示例</span>
</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item class="" label="营业执照">
<uploadComponent
:maxLimit="3"
listType="picture-card"
:acceptTypeList="['.jpg', '.jpeg', '.png']"
width="120px"
height="120px"
:successResultCallBack="successResultCallBackFnfryz">
<template v-slot:default>
<el-icon size="48" color="#aaa"><Plus /></el-icon>
</template>
</uploadComponent>
<div class="previewExample">
<!-- <span>预览</span> -->
<span @click="previewBusinessLicense">查看示例</span>
</div>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<el-form-item label="法人姓名">
<el-input
placeholder="请输入法人姓名"
v-model.trim="applyParams.legalPerson"
clearable>
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="邀请码">
<el-input
placeholder="请输入邀请码"
v-model.trim="applyParams.invitationCode"
clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="邀请企业名称">
<el-input
placeholder="请输入邀请企业名称"
v-model.trim="applyParams.invitationCoName"
clearable></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="经营范围">
<el-input
placeholder="请输入经营范围"
v-model.trim="applyParams.businessScope"
clearable
type="textarea"
:rows="5"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div class="personInfo card">
<div class="top">
<div class="title">被授权人信息</div>
</div>
<el-form class="personForm">
<el-row :gutter="20">
<el-col :span="5">
<el-form-item label="被授权人姓名">
<el-input
placeholder="请输入被授权人姓名"
v-model.trim="applyParams.authPerson"
clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="被授权人身份证">
<el-input
placeholder="请输入被授权人身份证"
v-model.trim="applyParams.authIdNumber"
clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="被授权人手机号">
<div class="phone">
<el-input
placeholder="请输入被授权人手机号"
v-model.trim="applyParams.authPhone"
clearable></el-input>
<div class="tip">
被授权人手机号修改且运营审核通过后,企业系统管理员权限将同步到修改后被授权手机号的登录账号。
</div>
</div>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="被授权人邮箱">
<el-input
v-model.trim="applyParams.authEmail"
placeholder="请输入被授权人邮箱"
clearable>
>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="10">
<el-form-item label="被授权人身份证肖像面">
<uploadComponent
:maxLimit="3"
listType="picture-card"
:acceptTypeList="['.jpg', '.jpeg', '.png']"
width="120px"
height="120px"
:successResultCallBack="successResultCallBackFnCardbsz">
<template v-slot:default>
<el-icon size="48" color="#aaa"><Plus /></el-icon>
</template>
</uploadComponent>
<div class="previewExample">
<!-- <span>预览</span> -->
<span @click="previewCardFront">查看示例</span>
</div>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="被授权人身份证国徽面">
<!-- <upload-img width="80" @onClick="test" /> -->
<uploadComponent
:maxLimit="3"
listType="picture-card"
:acceptTypeList="['.jpg', '.jpeg', '.png']"
width="120px"
height="120px"
:successResultCallBack="successResultCallBackFnCardbsf">
<template v-slot:default>
<el-icon size="48" color="#aaa"><Plus /></el-icon>
</template>
</uploadComponent>
<div class="previewExample">
<!-- <span>预览</span> -->
<span @click="previewCardOpposite">查看示例</span>
</div>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="10">
<el-form-item label="法人授权书">
<uploadComponent
:maxLimit="3"
listType="picture-card"
:acceptTypeList="['.jpg', '.jpeg', '.png']"
width="120px"
height="120px"
:successResultCallBack="successResultCallBackFnsqs">
<template v-slot:default>
<el-icon size="48" color="#aaa"><Plus /></el-icon>
</template>
</uploadComponent>
<div class="previewExample">
<!-- <span>预览</span> -->
<span @click="previewPowerOfAttorney">查看示例</span>
</div>
</el-form-item>
</el-col>
<el-col :span="10" class="d-flex align-center">
<el-checkbox size="large" />
<div class="agreement">
我已阅读并同意相关条款内容《
<span class="previewExample" @click="serviceAgreement">服务协议</span>
》 《
<span class="previewExample" @click="privacyAgreement">隐私协议</span>
</div>
</el-col>
</el-row>
</el-form>
</div>
<div class="bankInfo card">
<!-- <div class="top">
<div class="title">
银行账号信息
<span class="tip">开户行许可示例</span>
</div>
</div>
<el-table border :data="bankTableList">
<el-table-column align="center" label="开户行">
<template #default="{ row }">
<el-input v-model="row.v_kaihu"></el-input>
</template>
</el-table-column>
<el-table-column align="center" label="账号名称">
<template #default="{ row }">
<el-input></el-input>
</template>
</el-table-column>
<el-table-column align="center" label="银行账号">
<template #default="{ row }">
<el-input></el-input>
</template>
</el-table-column>
<el-table-column align="center" label="开户行所在地">
<template #default="{ row }">
<el-input></el-input>
</template>
</el-table-column>
<el-table-column align="center" label="开户许可证核准号(基本存款账号编号)">
<template #default="{ row }">
<el-input></el-input>
</template>
</el-table-column>
<el-table-column align="center" label="开户许可证/基本存款账号信息">
<template #default="{ row }">
<a>
<uploadComponent
:maxLimit="1"
listType="picture-card"
:acceptTypeList="['.jpg', '.jpeg', '.png']"
height="30px">
<template v-slot:default>上传附件</template>
</uploadComponent>
</a>
</template>
</el-table-column>
</el-table> -->
</div>
<el-row style="padding-top: 15px">
<el-form-item>
<el-button type="success" @click="handlerSubmitBtn"> </el-button>
<el-button type="warning" @click="handlerCloseBtn"> </el-button>
</el-form-item>
</el-row>
<el-dialog v-model="picItemVisible" title="图片示例" width="40%">
<el-image :src="previewPicUrl" fit="cover" style="display: block; margin: 0 auto" />
</el-dialog>
</div>
</template>
<script lang="ts" setup>
import uploadComponent from 'components/uploadComponent/index.vue'
import { ElMessage } from 'element-plus'
import { reactive, ref } from 'vue'
import { useStore } from 'store/user'
const store = useStore()
const previewPicUrl = ref('')
import { applyAttestationApi } from 'http/api/usercenter/baseinfo'
onMounted(() => {
// 获取省级数据
store.getprovinceList()
// 获取证件类型数据
store.getIdTypeList()
// 获取企业类型
store.getcompanyTypeList()
// 获取企业所属
store.getcompanyLtdList()
})
const picItemVisible = ref(false)
//查看身份证正面示例
const previewCardFront = () => {
picItemVisible.value = true
previewPicUrl.value =
'https://p7.itc.cn/images01/20211109/51307123942047a89ec6e05b24b4f152.jpeg'
}
//查看身份证反面示例
const previewCardOpposite = () => {
picItemVisible.value = true
previewPicUrl.value = 'https://image2.sina.com.cn/dy/o/2005-02-01/1107213262_.haWGD.jpg'
}
//查看营业执照示例
const previewBusinessLicense = () => {
picItemVisible.value = true
previewPicUrl.value =
'https://img0.baidu.com/it/u=399142335,2996450343&fm=253&fmt=auto&app=138&f=JPEG?w=347&h=500'
}
//查看授权书示例
const previewPowerOfAttorney = () => {
picItemVisible.value = true
previewPicUrl.value =
'https://static.quanyaotong.com/uploads/201901/17/35e8cf5034de7484ba256058e972580d.jpg'
}
// 银行数据源绑定
const bankTableList = ref([{ v_kaihu: '', v_admin: '' }])
// 注册地址拼装
const AssemblyRegisterAddress: any = reactive([])
// 经营地址拼装
const AssemblyOperateAddress: any = reactive([])
// 申请认证参数
const applyParams: any = reactive({
companyName: '', // 企业名称
companyType: '', // 企业类型
companyLtd: '', // 企业所属
creditCode: '', // 统一信用代码
registerAddress: '', // 注册地址
/* 注册地址ID */
registerId: '',
/* 经营地址ID */
operateId: '',
registerS: '',
registerAddressProvince: '', // 注册地址(市级)
registerAddressArea: '', // 注册地址(区级)
registerRealityAddress: '', // 注册地址(实际地址)
operateAddress: '', // 经营地址
registerSs: '',
operateAddressProvince: '', // 经营地址(市级)
operateAddressArea: '', // 经营地址(区级)
operateRealityAddress: '', // 注册地址(实际地址)
certificatetype: '', // 法人证件类型
idNumber: '', // 法人证件号码
/* 企业logo */
logoUrl: '',
businessLicense: '', // 营业执照
legalFaceUrl: '', // 法人身份证国徽面
legalNationUrl: '', // 法人身份证肖像
legalPerson: '', // 法人姓名
invitationCode: '', // 邀请码
invitationCoName: '', // 邀请企业名称
businessScope: '', // 经营范围
authPerson: '', // 被授权人姓名
authIdNumber: '', // 被授权身份证号
authPhone: '', // 被授权手机号
/* 被授权人邮箱 */
authEmail: '',
authDocument:
'https://zlpt-1259760603.cos.ap-nanjing.myqcloud.com/488bab245180ebf9f1f3d7db5301be4.png', // 法人授权书
idNationUrl:
'https://zlpt-1259760603.cos.ap-nanjing.myqcloud.com/488bab245180ebf9f1f3d7db5301be4.png', // 被授权人国徽
idFaceUrl:
'vhttps://zlpt-1259760603.cos.ap-nanjing.myqcloud.com/488bab245180ebf9f1f3d7db5301be4.png' // 被授权人头像
})
// 省级数据源
const selProvinceList: any = computed(() => {
return store.provinceList
})
// 省级下拉框选中时获取市级
const changeProvince = (val: any) => {
// console.log(val, '省选择**')
store.getmarketList(val.split(',')[0])
AssemblyRegisterAddress[0] = val.split(',')[0]
}
const opeChangeProvince = (val: any) => {
// console.log(val, '省选择**')
store.getmarketList(val.split(',')[0])
AssemblyOperateAddress[0] = val.split(',')[0]
}
// 获取市级数据源
const selMarketList: any = computed(() => {
return store.marketList
})
// 市级下拉框选中获取区级数据
const changeMarket = (val: any) => {
store.getareaList(val.split(',')[0])
AssemblyRegisterAddress[1] = val.split(',')[0]
}
const opeChangeMarket = (val: any) => {
store.getareaList(val.split(',')[0])
AssemblyOperateAddress[1] = val.split(',')[0]
}
// 获取区级数据源
const selAreaList: any = computed(() => {
return store.areaList
})
// 区级下拉框选中时
const changeArea = (val: any) => {
AssemblyRegisterAddress[2] = val.split(',')[0]
}
const opeChangeArea = (val: any) => {
AssemblyOperateAddress[2] = val.split(',')[0]
}
// 获取证件类型
const selIdTypeList: any = computed(() => {
return store.idTypeList
})
// 获取企业类型
const selcompanyTypeList: any = computed(() => {
return store.companyTypeList
})
// 获取企业所属
const selcompanyLtdList: any = computed(() => {
return store.companyLtdList
})
const emit = defineEmits(['closeAuthenticationDialog'])
// 提交认证按钮
const handlerSubmitBtn = async () => {
AssemblyRegisterAddress[3] = applyParams.registerRealityAddress
AssemblyOperateAddress[3] = applyParams.operateRealityAddress
applyParams.registerId = AssemblyRegisterAddress.join(',')
applyParams.operateId = AssemblyOperateAddress.join(',')
const res: any = await applyAttestationApi({
bmCompanyInfo: applyParams,
bmCoBank: {}
})
if (res.code === 200) {
ElMessage({
type: 'success',
message: '申请成功'
})
// 关闭弹框
emit('closeAuthenticationDialog', false)
}
}
// 关闭按钮
const handlerCloseBtn = () => {
emit('closeAuthenticationDialog', false)
}
/* 服务协议 */
const serviceAgreement = () => {
window.open('https://zlpt-1259760603.cos.ap-nanjing.myqcloud.com/serviceAgreement.pdf')
}
/* 隐私协议 */
const privacyAgreement = () => {
window.open('https://zlpt-1259760603.cos.ap-nanjing.myqcloud.com/privacyPolicy.pdf')
}
const options = reactive([
{
value: '选项1',
label: '黄金糕'
},
{
value: '选项2',
label: '双皮奶'
},
{
value: '选项3',
label: '蚵仔煎'
},
{
value: '选项4',
label: '龙须面'
},
{
value: '选项5',
label: '北京烤鸭'
}
])
const thisValue = ref('')
const imageUrl = ref('')
const bankTableHeader = reactive([
{
span: 4,
label: '开户行',
prop: 'bankName'
},
{
span: 2,
label: '账号名称',
prop: 'b'
},
{
span: 2,
label: '银行账号',
prop: 'a'
},
{
span: 2,
label: '开户行所在地',
prop: 'a'
},
{
span: 2,
label: '开户许可证核准号(基本存款账号编号)',
prop: 'a'
},
{
span: 2,
label: '开户行许可证/基本存款账号信息',
prop: 'a',
slot: 'annex'
}
])
const bankTableData = reactive([
{
a: 1,
bankName: '中国银行'
},
{
a: 1,
bankName: 'test'
},
{
a: 1,
bankName: 'test'
},
{
a: 1,
bankName: 'test'
},
{
a: 1,
bankName: 'test'
},
{
a: 1,
bankName: 'test'
}
])
const test = () => {}
/* log地址 */
const successResultCallBackFn = (val: any) => {
applyParams.logoUrl = val.msg
}
/* 法人身份证正面图片地址 */
const successResultCallBackFnfrCardz = (val: any) => {
applyParams.legalNationUrl = val.msg
}
/* 法人身份证反面图片地址 */
const successResultCallBackFnfrCardf = (val: any) => {
applyParams.legalFaceUrl = val.msg
}
/* 法人营业执照图片地址 */
const successResultCallBackFnfryz = (val: any) => {
applyParams.businessLicense = val.msg
}
/* 被授权人身份证正面 */
const successResultCallBackFnCardbsz = (val: any) => {
applyParams.idFaceUrl = val.msg
}
/* 被授权人身份证反面 */
const successResultCallBackFnCardbsf = (val: any) => {
applyParams.idNationUrl = val.msg
}
/* 法人授权书 */
const successResultCallBackFnsqs = (val: any) => {
applyParams.authDocument = val.msg
}
</script>
<style lang="scss" scoped>
.d-flex {
display: flex;
}
.align-center {
align-items: center;
}
::v-deep.el-form-item {
display: flex;
.el-form-item__content {
flex: 1;
}
}
.enterpriseCertification {
height: 100%;
/* background: #f2f2f2;
padding: 15px 10px; */
.card {
border-radius: 5px;
background: white;
padding: 10px;
}
.top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
.title {
font-size: 16px;
font-weight: 600;
}
.options {
}
}
.baseForm {
padding: 0 10px;
}
.previewExample {
font-size: 12px;
color: blue;
cursor: pointer;
span {
margin: 0 5px;
}
}
.personInfo {
margin-top: 15px;
.personForm {
padding: 0 10px;
.phone {
.tip {
line-height: normal;
color: red;
font-size: 12px;
}
}
.agreement {
font-size: 13px !important;
margin-left: 8px;
}
}
}
.bankInfo {
margin-top: 15px;
.top {
.title {
.tip {
color: blue;
font-size: 12px;
cursor: pointer;
}
}
}
.header {
.item {
background: #e0efff;
min-height: 40px;
display: flex;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
padding: 5px;
height: 100%;
}
}
.border-top-left {
border-top: 1px solid black;
border-left: 1px solid black;
}
.border-right {
border-right: 1px solid black;
}
.border-bottom {
border-bottom: 1px solid black;
}
.content {
.item {
min-height: 40px;
display: flex;
align-items: center;
//justify-content: center;
box-sizing: border-box;
padding: 5px;
height: 100%;
}
}
}
}
</style>