<template>
|
<div class="content">
|
<div class="header">
|
<div class="headimg">
|
<img width="167px" height="44px" src="@/assets/home/logo.png" alt="" />
|
</div>
|
</div>
|
<div class="article">
|
<div class="formDiv">
|
<div class="formheader">
|
<span class="title">请填写已下注册信息</span>
|
<span class="other"
|
>有企业营业执照(含个体工商户)的用户请注册。权益如下：做企业实名认证、参与招投标业务、开通企业门户等</span
|
>
|
</div>
|
<el-divider />
|
<div v-loading="isLoading" class="formContent">
|
<el-form
|
ref="ruleFormRef"
|
style="width: 95%"
|
:model="state.ruleForm"
|
:rules="state.rules"
|
label-width="auto"
|
>
|
<el-form-item label="注册身份" prop="exRoleCode">
|
<el-radio-group v-model="state.ruleForm.exRoleCode">
|
<el-radio
|
v-for="item in state.roleList"
|
:key="item.id"
|
:value="item.code"
|
>{{ item.name }}</el-radio
|
>
|
</el-radio-group>
|
</el-form-item>
|
<!-- <el-form-item label="企业名称" prop="name">
|
<el-input
|
v-model="ruleForm.name"
|
placeholder="请输入营业执照上的企业名称"
|
/>
|
</el-form-item>
|
<el-form-item label="用户名" prop="region">
|
<el-input v-model="ruleForm.region" placeholder="请输入用户名" />
|
</el-form-item> -->
|
<!-- <el-form-item label="姓名" prop="nickName">
|
<el-input
|
v-model="state.ruleForm.nickName"
|
placeholder="请输入姓名"
|
/>
|
</el-form-item> -->
|
<el-row>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
<el-form-item label="企业类型" prop="enterpriseType">
|
<el-tree-select
|
v-model="state.ruleForm.enterpriseType"
|
:data="state.enterpriseList"
|
multiple
|
node-key="name"
|
:render-after-expand="false"
|
show-checkbox
|
check-strictly
|
check-on-click-node
|
:load="loadNode"
|
lazy
|
:props="{
|
label: 'name',
|
children: 'child',
|
isLeaf: 'leaf'
|
}"
|
/>
|
<!-- <el-select
|
v-model="state.ruleForm.enterpriseType"
|
placeholder="请选择"
|
clearable
|
multiple
|
>
|
<el-option
|
v-for="item in state.enterpriseList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.code"
|
/>
|
</el-select> -->
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row><div class="baseclass">企业资料</div></el-row>
|
<el-row>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
<el-form-item label="营业执照" prop="businessLicense">
|
<el-upload
|
:action="`${baseUrlApi('/api/upFile/upBizLicense')}`"
|
:show-file-list="false"
|
:on-success="handleAvatarSuccess"
|
:before-upload="beforeAvatarUpload"
|
:headers="state.headers"
|
>
|
<img
|
v-if="state.ruleForm.businessLicense"
|
:src="state.ruleForm.businessLicense"
|
width="200px"
|
height="150px"
|
/>
|
<el-button v-else type="primary">上传</el-button>
|
</el-upload>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
<el-form-item label="企业名称" prop="enterpriseName">
|
<el-input
|
v-model="state.ruleForm.enterpriseName"
|
disabled
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
<el-form-item
|
label="统一社会信用代码"
|
prop="unifiedSocialCreditCode"
|
>
|
<el-input
|
v-model="state.ruleForm.unifiedSocialCreditCode"
|
disabled
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
<el-form-item label="注册资金" prop="registeredCapital">
|
<el-input
|
v-model="state.ruleForm.registeredCapital"
|
disabled
|
placeholder="请输入"
|
>
|
<template #append>万元</template></el-input
|
>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
|
<el-form-item label="法定代表人" prop="legalRepresentativeName">
|
<el-input
|
v-model="state.ruleForm.legalRepresentativeName"
|
disabled
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
|
<el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
|
<el-form-item label="住所地" prop="residence">
|
<el-input
|
v-model="state.ruleForm.residence"
|
disabled
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
<el-form-item label="成立时间" prop="establishmentTime">
|
<el-input
|
v-model="state.ruleForm.establishmentTime"
|
disabled
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
<el-form-item label="主营业务" prop="mainBusiness">
|
<el-input
|
v-model="state.ruleForm.mainBusiness"
|
disabled
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
<el-form-item label="联系电话" prop="enterprisePhone">
|
<el-input
|
v-model="state.ruleForm.enterprisePhone"
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
<el-form-item label="邮箱" prop="enterpriseEmail">
|
<el-input
|
v-model="state.ruleForm.enterpriseEmail"
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
<el-form-item label="开户行" prop="bankName">
|
<el-input
|
v-model="state.ruleForm.bankName"
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
|
<el-form-item label="银行账号" prop="bankAccount">
|
<el-input
|
v-model="state.ruleForm.bankAccount"
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
<el-form-item label="开户行收款二维码" prop="bankAccountIMG">
|
<el-upload
|
:action="`${baseUrlApi('/api/upFile/file')}`"
|
:show-file-list="false"
|
:on-success="handlebankAccountIMG"
|
:before-upload="beforeAvatarUpload"
|
:headers="state.headers"
|
>
|
<img
|
v-if="state.ruleForm.bankAccountIMG"
|
:src="state.ruleForm.bankAccountIMG"
|
width="85.6px"
|
height="5.4px"
|
/>
|
<el-button v-else type="primary">上传</el-button>
|
</el-upload>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row><div class="baseclass">法定代表人资料</div></el-row>
|
<el-row>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
<el-form-item label="身份证" prop="legalRepresentativeIdCard">
|
<el-upload
|
:ref="uploadSFZ"
|
:action="`${baseUrlApi('/api/upFile/uploadIdCord?PageName=FRONT')}`"
|
:show-file-list="false"
|
:on-success="handleAvatarSuccessLegalRepresentative"
|
:before-upload="beforeAvatarUpload"
|
:headers="state.headers"
|
>
|
<img
|
v-if="state.ruleForm.legalRepresentativeIdCard"
|
:src="state.ruleForm.legalRepresentativeIdCard"
|
width="85.6px"
|
height="5.4px"
|
/>
|
<el-button v-else type="primary">上传身份证</el-button>
|
</el-upload>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
<el-form-item label="姓名" prop="legalRepresentativeName">
|
<el-input
|
v-model="state.ruleForm.legalRepresentativeName"
|
disabled
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
<el-form-item label="身份证" prop="legalRepresentativeIdNumber">
|
<el-input
|
v-model="state.ruleForm.legalRepresentativeIdNumber"
|
disabled
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
<el-form-item label="联系电话" prop="legalRepresentativePhone">
|
<el-input
|
v-model="state.ruleForm.legalRepresentativePhone"
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row><div class="baseclass">业务经办人资料</div></el-row>
|
|
<el-row>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
<el-form-item label="身份证" prop="operatorIdCard">
|
<el-upload
|
:action="`${baseUrlApi('/api/upFile/uploadIdCord?PageName=FRONT')}`"
|
:show-file-list="false"
|
:on-success="handleAvatarSuccessOperator"
|
:before-upload="beforeAvatarUpload"
|
:headers="state.headers"
|
>
|
<img
|
v-if="state.ruleForm.operatorIdCard"
|
:src="state.ruleForm.operatorIdCard"
|
width="85.6px"
|
height="5.4px"
|
/>
|
<el-button v-else type="primary">上传身份证</el-button>
|
</el-upload>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
<el-form-item label="姓名" prop="operatorName">
|
<el-input
|
v-model="state.ruleForm.operatorName"
|
disabled
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
<el-form-item label="身份证" prop="operatorIdNumber">
|
<el-input
|
v-model="state.ruleForm.operatorIdNumber"
|
disabled
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
<el-form-item label="联系电话" prop="operatorPhone">
|
<el-input
|
v-model="state.ruleForm.operatorPhone"
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
<el-form-item
|
label="验证码"
|
class="login-animation3"
|
prop="code"
|
>
|
<el-col :span="15">
|
<el-input
|
ref="codeRef"
|
v-model="state.code"
|
text
|
maxlength="4"
|
placeholder="请输入验证码"
|
clearable
|
autocomplete="off"
|
/>
|
</el-col>
|
<el-col :span="1" />
|
<el-col :span="8">
|
<div
|
:class="[
|
state.expirySeconds > 0
|
? 'login-content-code'
|
: 'login-content-code-expired'
|
]"
|
@click="getCaptcha"
|
>
|
<img
|
class="login-content-code-img"
|
width="130px"
|
height="38px"
|
:src="state.captchaImage"
|
style="cursor: pointer"
|
/>
|
</div>
|
</el-col>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
<el-form-item prop="phoneVCode" label="手机验证码">
|
<el-input
|
v-model.number="state.ruleForm.phoneVCode"
|
class="form-input"
|
placeholder="请输入验证码"
|
>
|
<template #suffix>
|
<span v-if="state.phoneSeconds == 0" id="suffix-span">
|
<span
|
id="suffix-span-2"
|
ref="spanRef"
|
@click="sendValidationCode"
|
>
|
获取验证码
|
</span>
|
</span>
|
<span v-else id="suffix-span">
|
<span id="suffix-span-2" ref="spanRef">
|
{{ state.phoneSeconds }}秒后重新获取
|
</span>
|
</span>
|
</template>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-form-item label=" ">
|
<el-checkbox
|
v-model="state.checkedAgree"
|
name="type"
|
/>我已阅读并同意
|
<el-link type="primary" :underline="false" @click="openAgreement"
|
>《非政采招标采购交易平台用户协议》</el-link
|
>
|
</el-form-item>
|
<el-form-item label=" ">
|
<el-button type="primary" @click="sumbitData(ruleFormRef)">
|
同意并注册
|
</el-button>
|
</el-form-item>
|
<el-form-item label=" ">
|
<span>已有账号？</span>
|
<el-link type="primary" :underline="false">立即登录</el-link>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { useRegister } from "./utils/hook";
|
import { baseUrlApi } from "@/api/util";
|
|
const {
|
state,
|
resetForm,
|
sendValidationCode,
|
getCaptcha,
|
ruleFormRef,
|
spanRef,
|
beforeAvatarUpload,
|
handleAvatarSuccessOperator,
|
handleAvatarSuccessLegalRepresentative,
|
sumbitData,
|
handleAvatarSuccess,
|
loadNode,
|
handlebankAccountIMG,
|
isLoading,
|
uploadSFZ,
|
openAgreement
|
} = useRegister();
|
|
defineOptions({
|
name: "newRegister"
|
});
|
</script>
|
<style scoped>
|
@import url("@/style/login.css");
|
</style>
|
<style lang="scss" scoped>
|
.content {
|
background-color: #f8f8f8;
|
width: 100%;
|
height: 100%;
|
.header {
|
display: flex;
|
align-items: center;
|
height: 80px;
|
width: 100%;
|
margin: 0 auto;
|
background-color: #fff;
|
.headimg {
|
width: 1200px;
|
margin: 0 auto;
|
}
|
}
|
.article {
|
margin: 20px auto;
|
width: 80%;
|
height: 85%;
|
background: rgb(255, 255, 255);
|
.formDiv {
|
width: 90%;
|
margin: 0 auto;
|
.formheader {
|
// display: flex;
|
// align-items: center;
|
// justify-content: space-around;
|
padding-top: 30px;
|
}
|
.title {
|
color: rgb(51, 51, 51);
|
font-size: 18px;
|
font-weight: 700;
|
line-height: 16px;
|
letter-spacing: 0%;
|
text-align: left;
|
text-transform: capitalize;
|
}
|
.other {
|
color: rgb(173, 173, 173);
|
font-size: 12px;
|
font-weight: 500;
|
line-height: 16px;
|
letter-spacing: 0%;
|
text-align: left;
|
text-transform: capitalize;
|
}
|
.formContent {
|
// display: flex;
|
// justify-content: center;
|
}
|
}
|
}
|
}
|
.el-form-item {
|
align-items: center;
|
}
|
#suffix-span {
|
cursor: pointer;
|
}
|
.login-content-code {
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
position: relative;
|
|
.login-content-code-img {
|
width: 100%;
|
height: 40px;
|
line-height: 40px;
|
background-color: #ffffff;
|
border: 1px solid rgb(220, 223, 230);
|
cursor: pointer;
|
transition: all ease 0.2s;
|
border-radius: 4px;
|
user-select: none;
|
|
&:hover {
|
border-color: #c0c4cc;
|
transition: all ease 0.2s;
|
}
|
}
|
}
|
|
.login-content-code-expired {
|
@extend .login-content-code;
|
&::before {
|
content: "验证码已过期";
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
border-radius: 4px;
|
background-color: rgba(0, 0, 0, 0.5);
|
color: #ffffff;
|
text-align: center;
|
line-height: 40px;
|
}
|
}
|
</style>
|
