492 lines
17 KiB
Vue
492 lines
17 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=""></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="7">
|
|||
|
|
<el-form-item label="统一社会信用代码">
|
|||
|
|
<el-input placeholder=""></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<el-form-item label="注册地址">
|
|||
|
|
<el-row :gutter="10">
|
|||
|
|
<el-col :span="3">
|
|||
|
|
<el-select v-model="thisValue" placeholder="请选择省份">
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in options"
|
|||
|
|
:key="item.value"
|
|||
|
|
:label="item.label"
|
|||
|
|
:value="item.value">
|
|||
|
|
</el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="3">
|
|||
|
|
<el-select v-model="thisValue" placeholder="请选择市">
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in options"
|
|||
|
|
:key="item.value"
|
|||
|
|
:label="item.label"
|
|||
|
|
:value="item.value">
|
|||
|
|
</el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="3">
|
|||
|
|
<el-select v-model="thisValue" placeholder="请选择区">
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in options"
|
|||
|
|
:key="item.value"
|
|||
|
|
:label="item.label"
|
|||
|
|
:value="item.value">
|
|||
|
|
</el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="15">
|
|||
|
|
<el-input placeholder="请输入实际办公地址"></el-input>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="经营地址">
|
|||
|
|
<el-row :gutter="10">
|
|||
|
|
<el-col :span="3">
|
|||
|
|
<el-select v-model="thisValue" placeholder="请选择省份">
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in options"
|
|||
|
|
:key="item.value"
|
|||
|
|
:label="item.label"
|
|||
|
|
:value="item.value">
|
|||
|
|
</el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="3">
|
|||
|
|
<el-select v-model="thisValue" placeholder="请选择市">
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in options"
|
|||
|
|
:key="item.value"
|
|||
|
|
:label="item.label"
|
|||
|
|
:value="item.value">
|
|||
|
|
</el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="3">
|
|||
|
|
<el-select v-model="thisValue" placeholder="请选择区">
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in options"
|
|||
|
|
:key="item.value"
|
|||
|
|
:label="item.label"
|
|||
|
|
:value="item.value">
|
|||
|
|
</el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="15">
|
|||
|
|
<el-input 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="thisValue" placeholder="请选择省份">
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in options"
|
|||
|
|
:key="item.value"
|
|||
|
|
:label="item.label"
|
|||
|
|
:value="item.value">
|
|||
|
|
</el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
|
|||
|
|
<el-col :span="7">
|
|||
|
|
<el-form-item label="法人证件号码">
|
|||
|
|
<el-input></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
|
|||
|
|
<el-col :span="4">
|
|||
|
|
<el-form-item class="" label="营业执照">
|
|||
|
|
<upload-img width="80" @onClick="test" />
|
|||
|
|
<div class="previewExample">
|
|||
|
|
<span>预览</span>
|
|||
|
|
<span>查看示例</span>
|
|||
|
|
</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
|
|||
|
|
<el-col :span="4">
|
|||
|
|
<el-form-item class="" label="身份证国徽面">
|
|||
|
|
<upload-img width="80" @onClick="test" />
|
|||
|
|
<div class="previewExample">
|
|||
|
|
<span>预览</span>
|
|||
|
|
<span>查看示例</span>
|
|||
|
|
</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
|
|||
|
|
<el-col :span="4">
|
|||
|
|
<el-form-item class="" label="身份证肖像面">
|
|||
|
|
<upload-img width="80" @onClick="test" />
|
|||
|
|
<div class="previewExample">
|
|||
|
|
<span>预览</span>
|
|||
|
|
<span>查看示例</span>
|
|||
|
|
</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="法人姓名">
|
|||
|
|
<el-input></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="邀请码">
|
|||
|
|
<el-input></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="邀请企业名称">
|
|||
|
|
<el-input></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<el-row>
|
|||
|
|
<el-col :span="24">
|
|||
|
|
<el-form-item label="经营范围">
|
|||
|
|
<el-input 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 ></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="5">
|
|||
|
|
<el-form-item label="被授权人身份证">
|
|||
|
|
<el-input ></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="5">
|
|||
|
|
<el-form-item label="被授权人手机号">
|
|||
|
|
<div class="phone">
|
|||
|
|
<el-input ></el-input>
|
|||
|
|
<div class="tip">
|
|||
|
|
被授权人手机号修改且运营审核通过后，企业系统管理员权限将同步到修改后被授权手机号的登录账号。
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="5">
|
|||
|
|
<el-form-item label="被授权人邮箱">
|
|||
|
|
<el-input ></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="5">
|
|||
|
|
<el-form-item label="法人授权书">
|
|||
|
|
<upload-img width="80" @onClick="test" />
|
|||
|
|
<div class="previewExample">
|
|||
|
|
<span>预览</span>
|
|||
|
|
<span>查看示例</span>
|
|||
|
|
</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="5">
|
|||
|
|
<el-form-item label="被授权人身份证国徽面">
|
|||
|
|
<upload-img width="80" @onClick="test" />
|
|||
|
|
<div class="previewExample">
|
|||
|
|
<span>预览</span>
|
|||
|
|
<span>查看示例</span>
|
|||
|
|
</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="5">
|
|||
|
|
<el-form-item label="被授权人身份证肖像面">
|
|||
|
|
<upload-img width="80" @onClick="test" />
|
|||
|
|
<div class="previewExample">
|
|||
|
|
<span>预览</span>
|
|||
|
|
<span>查看示例</span>
|
|||
|
|
</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="5" class="d-flex align-center">
|
|||
|
|
<el-checkbox size="large" />
|
|||
|
|
<div class="agreement ">我已阅读并同意相关条款内容《
|
|||
|
|
<span class="previewExample">服务协议</span>
|
|||
|
|
》 《
|
|||
|
|
<span class="previewExample">隐私协议</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-row class="header">
|
|||
|
|
<el-col :span="v.span" v-for="(v,i) in bankTableHeader" :key="i">
|
|||
|
|
<div class="item border-top-left" :class="i+1 == bankTableHeader.length && 'border-right'">
|
|||
|
|
{{ v.label }}
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<el-row class="content" v-for="(val,index) in bankTableData" :key="index">
|
|||
|
|
<el-col :span="v.span" v-for="(v,i) in bankTableHeader" :key="i">
|
|||
|
|
<div
|
|||
|
|
v-if="!v.slot"
|
|||
|
|
class="item border-top-left"
|
|||
|
|
:class="`${i+1 == bankTableHeader.length && 'border-right'} ${index+1 == bankTableData.length && 'border-bottom'}`"
|
|||
|
|
>
|
|||
|
|
{{ val[v.prop] || '' }}
|
|||
|
|
</div>
|
|||
|
|
<div v-else
|
|||
|
|
class="item border-top-left"
|
|||
|
|
:class="`${i+1 == bankTableHeader.length && 'border-right'} ${index+1 == bankTableData.length && 'border-bottom'}`"
|
|||
|
|
>
|
|||
|
|
上传附件
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<script lang="ts" setup>
|
|||
|
|
import uploadImg from '@/compontents/uploadImg.vue'
|
|||
|
|
import {reactive, ref} from "vue";
|
|||
|
|
|
|||
|
|
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 = () => {}
|
|||
|
|
</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>
|