Skip to content

B
bigDataSystem
Commit f0bef114 authored by LiXuyang's avatar LiXuyang
Browse files
Options

企业认证

parent 0a75ba2f
Hide whitespace changes
Inline Side-by-side
Showing with 529 additions and 0 deletions
src/views/personalCenter/enterpriseCertification/ec.data.ts 0 → 100644
View file @ f0bef114
import { FormSchema } from '@/components/Form';
import { InputProps } from 'ant-design-vue';
export const identityFormSchema: FormSchema[] = [
{
field: 'identity',
label: '身份选择：',
defaultValue: '数据买家',
slot: 'identity',
required: true,
},
];
export const enterpriseFormSchema: FormSchema[] = [
{
field: 'license',
label: '营业执照：',
slot: 'license',
required: true,
},
{
field: 'logo',
label: '公司LOGO：',
slot: 'logo',
required: true,
},
{
field: 'companyName',
label: '公司名称：',
slot: 'companyName',
required: true,
},
{
field: 'code',
label: '统一社会信用代码：',
component: 'Input',
componentProps: {
placeholder: '请输入统一社会信用代码',
},
required: true,
},
{
field: 'leader',
label: '法人：',
slot: 'leader',
required: true,
},
{
field: 'leaderNum',
label: '法人身份证号码：',
component: 'Input',
componentProps: {
placeholder: '请输入法人身份证号码',
},
required: true,
},
{
field: 'buildTime',
label: '成立日期：',
component: 'DatePicker',
componentProps: {
placeholder: '请选择成立日期',
},
required: true,
},
{
field: 'registerNum',
label: '注册资本：',
component: 'Input',
componentProps: {
placeholder: '请输入注册资本',
},
required: true,
},
{
field: 'businessRange',
label: '经营范围：',
component: 'InputTextArea',
componentProps: {
placeholder: '请输入经营范围（最多1024个字符）',
rows: 4,
},
required: true,
},
{
field: 'registerAddress',
label: '注册地址：',
component: 'Select',
componentProps: {},
required: true,
},
{
field: 'detailAddress',
label: '详细地址：',
component: 'Input',
componentProps: {
placeholder: '请输入详细地址(最多30个字符)',
} as InputProps,
required: true,
},
];
export const applicantFormSchema: FormSchema[] = [
{
field: 'type',
label: '申办人身份：',
defaultValue: '授权代表',
slot: 'type',
},
{
field: 'idCardFront',
label: '申办人身份证正面：',
required: true,
slot: 'idCardFront',
},
{
field: 'idCardReverse',
label: '申办人身份证反面：',
required: true,
slot: 'idCardReverse',
},
{
field: 'name',
label: '申办人姓名：',
required: true,
slot: 'name',
},
{
field: 'idNo',
label: '申办人身份证号码：',
required: true,
slot: 'idNo',
},
{
field: 'phone',
label: '申办人电话：',
component: 'Input',
componentProps: {
placeholder: '请输入申办人电话',
},
required: true,
},
{
field: 'doc',
slot: 'doc',
required: true,
},
{
field: 'letter',
slot: 'letter',
required: true,
},
];
src/views/personalCenter/enterpriseCertification/ecData.ts 0 → 100644
View file @ f0bef114
export const identityOptions = [
{
label: '数据买家',
value: '数据买家',
},
{
label: '数据卖家',
value: '数据卖家',
},
];
export const typeOptions = [
{
label: '授权代表',
value: '授权代表',
},
{
label: '法人本人',
value: '法人本人',
},
];
src/views/personalCenter/enterpriseCertification/index.vue 0 → 100644
View file @ f0bef114
<template>
<PageWrapper>
<template #headerContent>
<div class="flex">
<div class="flex-1 header">
<!-- <LeftOutlined class="h-back" @click="handleBack" />-->
<ApiOutlined class="h-icon" />
<div class="h-txt">
<div class="h-des">企业认证</div>
<div class="h-path">个人中心/企业认证</div>
</div>
</div>
</div>
<div class="hd-tabs">
<div class="tab" @click="goToSection('identity')"> 身份选择 </div>
<div class="tab" @click="goToSection('enterprise')"> 企业信息 </div>
<div class="tab" @click="goToSection('applicant')"> 申办人信息 </div>
</div>
</template>
<div class="pe-body">
<div id="identity" class="identity pe-part">
<div class="title"> 身份选择 </div>
<Divider />
<BasicForm @register="identityForm" class="form">
<template #identity="{ field, model }">
<CheckboxGroup :options="identityOptions" v-model:value="model[field]" />
<div class="des">
身份修改后，企业认证资料将会重新审核，审核期间已上线产品不受影响，买家身份不可修改
</div>
</template>
</BasicForm>
</div>
<div id="enterprise" class="enterprise pe-part">
<div class="title"> 企业信息 </div>
<Divider />
<BasicForm @register="enterpriseForm" class="form">
<template #license="{ field, model }">
<div class="field-item">
<UploadDragger
style="width: 350px"
v-model:fileList="licenseList"
name="file"
:multiple="true"
>
<div class="license">
<PlusOutlined class="icon" />
<div> 上传营业执照 </div>
</div>
</UploadDragger>
<div class="des">
请上传png,jpg,jpeg格式文件, 请提供证件的原件照片或彩色扫描件（正副本均可），
文字/盖章 清晰可辨认，附件大小不超过5MB。
</div>
</div>
</template>
<template #logo="{ field, model }">
<div class="field-item">
<UploadDragger
style="width: 200px"
v-model:fileList="licenseList"
name="file"
:multiple="true"
>
<div class="logo">
<PlusOutlined class="icon" />
<div> 上传企业LOGO </div>
</div>
</UploadDragger>
<div class="des"> 图片尺寸300*300jpg、png格式，大小为1M以内。 </div>
</div>
</template>
<template #companyName="{ field, model }">
<Input v-model:value="model[field]" placeholder="请输入企业名称" />
<div class="des"> 名称用于核对企业信息与产品详情页的展示。 </div>
</template>
<template #leader="{ field, model }">
<Input v-model:value="model[field]" placeholder="请输入法人" />
<div class="des"> 仅用于核验企业信息，审核过程不以任何明文形式展示。 </div>
</template>
</BasicForm>
</div>
<div id="applicant" class="applicant pe-part">
<div class="title"> 申办人信息 </div>
<Divider />
<BasicForm @register="applicantForm" class="form">
<template #type="{ field, model }">
<div class="field-item">
<RadioGroup :options="typeOptions" v-model:value="model[field]" />
<div class="des"> 法人本人可免除企业授权文件，授权代表为员工或他人代理。 </div>
</div>
</template>
<template #idCardFront="{ field, model }">
<div class="field-item">
<UploadDragger
style="width: 200px"
v-model:fileList="licenseList"
name="file"
:multiple="true"
>
<div class="logo">
<PlusOutlined class="icon" />
<div> 上传人像正面照 </div>
</div>
</UploadDragger>
<div class="des"> 大小为5M以内。 </div>
</div>
</template>
<template #idCardReverse="{ field, model }">
<div class="field-item">
<UploadDragger
style="width: 200px"
v-model:fileList="licenseList"
name="file"
:multiple="true"
>
<div class="logo">
<PlusOutlined class="icon" />
<div> 上传人像正面照 </div>
</div>
</UploadDragger>
<div class="des"> 大小为5M以内。 </div>
</div>
</template>
<template #name="{ field, model }">
<div class="field-item">
<Input v-model:value="model[field]" placeholder="请输入申办人姓名" />
<div class="des"> 与身份证图片保持一致。 </div>
</div>
</template>
<template #idNo="{ field, model }">
<Input v-model:value="model[field]" placeholder="请输入申办人身份证号码" />
<div class="des"> 与身份证图片保持一致。 </div>
</template>
<template #doc="{ field, model }">
<div class="field-item flex">
<div class="label">
<div class="required" style="margin-right: 2em">企业授权文件</div>
<div>（需要加盖公章）：</div>
</div>
<div class="flex-1">
<UploadDragger
style="width: 350px"
v-model:fileList="licenseList"
name="file"
:multiple="true"
>
<div class="logo">
<PlusOutlined class="icon" />
<div> 上传企业授权书 </div>
</div>
</UploadDragger>
<div class="des">
请上传pngJPgJPeg格式文件，企业授权委托书，大小为5M以内。
<a-button type="link" @click="handleDownTemp">下载模板</a-button>
</div>
</div>
</div>
</template>
<template #letter="{ field, model }">
<div class="field-item flex">
<div class="label">
<div class="required" style="margin-right: 2em">企业承诺函</div>
<div>（需要加盖公章）：</div>
</div>
<div class="flex-1">
<UploadDragger
style="width: 350px"
v-model:fileList="licenseList"
name="file"
:multiple="true"
>
<div class="logo">
<PlusOutlined class="icon" />
<div> 上传企业承诺函 </div>
</div>
</UploadDragger>
<div class="des">
请上传pmgJPg.jPeg格式文件，数据安全承诺书，大小为5M以内。
<a-button type="link" @click="handleDownTemp">下载模板</a-button>
</div>
</div>
</div>
</template>
</BasicForm>
</div>
</div>
</PageWrapper>
</template>
<script lang="ts" setup>
import { PageWrapper } from '@/components/Page';
import { CheckboxGroup, Divider, UploadDragger, Input, RadioGroup } from 'ant-design-vue';
import { identityOptions, typeOptions } from './ecData';
import { ApiOutlined, PlusOutlined } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
import BasicForm from '@/components/Form/src/BasicForm.vue';
import { FormProps, useForm } from '@/components/Form';
import {
applicantFormSchema,
enterpriseFormSchema,
identityFormSchema,
} from '@/views/personalCenter/enterpriseCertification/ec.data';
import { ref } from 'vue';
import { useMessage } from '@/hooks/web/useMessage';
// 初始化
const router = useRouter();
const { createMessage } = useMessage();
// 参数
const licenseList = ref([]);
/**
* 方法
*/
function goToSection(id) {
const section = document.getElementById(id);
if (section) {
section.scrollIntoView({ behavior: 'smooth' });
}
}
function handleDownTemp() {
createMessage.success('下载成功！');
}
/**
* form
*/
const [identityForm] = useForm({
labelWidth: 100,
baseColProps: { span: 24 },
schemas: identityFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
} as FormProps);
const [enterpriseForm] = useForm({
labelWidth: 150,
baseColProps: { span: 24 },
schemas: enterpriseFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
} as FormProps);
const [applicantForm] = useForm({
labelWidth: 150,
baseColProps: { span: 24 },
schemas: applicantFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
} as FormProps);
</script>
<style scoped>
.header {
display: flex;
flex-direction: row;
gap: 10px;
.h-back {
font-size: 20px;
}
.h-icon {
font-size: 30px;
color: #0a208a;
}
.h-txt {
display: flex;
flex-direction: column;
.h-des {
font-size: 20px;
font-weight: bolder;
}
.h-path {
color: #a4a8b6;
}
}
}
.hd-tabs {
margin-top: 15px;
display: flex;
height: 50px;
width: 100%;
justify-content: center;
.tab {
cursor: pointer;
border: 2px solid #eff1f6;
display: flex;
justify-content: center;
align-items: center;
width: 33%;
font-size: 16px;
background-color: #ffffff;
}
}
.pe-body {
background-color: #ffffff;
.pe-part {
.form {
padding: 10px 5%;
}
.license {
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 15px;
.icon {
font-size: 30px;
}
}
.logo {
height: 60px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
.icon {
font-size: 20px;
}
}
.des {
font-size: 12px;
color: #aab2c8;
}
.field-item {
margin-bottom: 15px;
}
.label {
width: 150px;
text-align: right;
}
.required::before {
content: '*'; /* 添加星号字符 */
color: red; /* 星号颜色为红色 */
margin-right: 5px; /* 星号和文本之间的间距 */
}
}
}
.title {
font-size: 20px;
padding: 15px 0 0 1em;
}
</style>
src/views/personalCenter/personalInformation/index.vue 0 → 100644
View file @ f0bef114
<template>
</template>
<script>
export default {
name: "index"
}
</script>
<style scoped>
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment