|
|
|
@ -1,154 +1,148 @@ |
|
|
|
<template> |
|
|
|
<div class="app-container"> |
|
|
|
<div class="app-main"> |
|
|
|
<p class="font-size-24 font-weight-bold line-height-2em">加入联盟</p> |
|
|
|
<el-divider></el-divider> |
|
|
|
<el-form :model="form" :rules="rules" ref="userInfo" class="el-form-new"> |
|
|
|
<el-row class="text-center"> |
|
|
|
<p class="font-size-21 font-weight-bold text-center line-height-2em">登录信息</p> |
|
|
|
<el-row> |
|
|
|
<p class="tab-title">登录信息</p> |
|
|
|
<el-col :span="11" > |
|
|
|
<el-form-item label="用户名：" :label-width="formLabelWidth" prop="userName"> |
|
|
|
<el-input v-model="form.userName" auto-complete="new-password" size="small"></el-input> |
|
|
|
<el-input v-model="form.userName" auto-complete="new-password" size="small" placeholder="请输入用户名"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="密码：" :label-width="formLabelWidth" prop="password"> |
|
|
|
<el-input type="password" v-model="form.password" auto-complete="new-password" size="small"></el-input> |
|
|
|
<el-input type="password" v-model="form.password" auto-complete="new-password" size="small" placeholder="请输入密码"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label-width="formLabelWidth"> |
|
|
|
<check-password-strong :sValue="form.password"></check-password-strong> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="确认密码：" :label-width="formLabelWidth" prop="again"> |
|
|
|
<el-input type="password" v-model="form.again" autocomplete="off" size="small"></el-input> |
|
|
|
<el-input type="password" v-model="form.again" autocomplete="off" size="small" placeholder="请再次输入密码"></el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
|
|
|
|
<el-col :span="2" style="height:1px;"></el-col> |
|
|
|
<el-col :span="11"> |
|
|
|
|
|
|
|
<el-form-item label="姓名：" :label-width="formLabelWidth" prop="name"> |
|
|
|
<el-input v-model="form.name" autocomplete="off" size="small"></el-input> |
|
|
|
<el-input v-model="form.name" autocomplete="off" size="small" placeholder="请输入姓名"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="邮箱：" :label-width="formLabelWidth" prop="email"> |
|
|
|
<el-input v-model="form.email" autocomplete="off" size="small"></el-input> |
|
|
|
<el-input v-model="form.email" autocomplete="off" size="small" placeholder="请输入邮箱"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="手机号：" :label-width="formLabelWidth" prop="telPhone" ref="telPhone"> |
|
|
|
<el-input v-model.number="form.telPhone" autocomplete="off" size="small"></el-input> |
|
|
|
<el-input v-model.number="form.telPhone" autocomplete="off" size="small" placeholder="请输入手机号"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="验证码：" :label-width="formLabelWidth" prop="code"> |
|
|
|
<el-input v-model="form.code" autocomplete="off" size="small" style="width:110px;"></el-input> |
|
|
|
<el-input v-model="form.code" autocomplete="off" size="small" style="width:180px;" placeholder="请输入验证码"></el-input> |
|
|
|
<img id="codePic" :src="codeSrc" alt="点击刷新" class="code-pic" @click="refreshCode"/> |
|
|
|
<img :src="_getImage('login','refresh.png')" alt="点击刷新" class="code-refresh" @click="refreshCode" /> |
|
|
|
</el-form-item> |
|
|
|
<!-- <el-form-item label="短信验证码：" :label-width="formLabelWidth" prop="code"> |
|
|
|
<el-input v-model.number="form.code" autocomplete="off" size="small" style="width:110px;margin-right:5px;"></el-input> |
|
|
|
<el-button type="danger" style="width:100px;" size="small" @click="getSendMessage" :disabled="sendStatus"> |
|
|
|
{{ !sendStatus ? '获取验证码' : timer + '秒' }} |
|
|
|
</el-button> |
|
|
|
</el-form-item> --> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
|
|
|
|
<el-row> |
|
|
|
<p class="font-size-21 font-weight-bold text-center line-height-2em">企业信息</p> |
|
|
|
<el-col :span="11" style="padding-right:30px;"> |
|
|
|
<el-form-item label="企业名称：" :label-width="formLabelWidth" prop="name"> |
|
|
|
<el-input v-model="form.name" autocomplete="off"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="企业类型：" :label-width="formLabelWidth" prop="typeId"> |
|
|
|
<!-- 企业类型的下拉菜单 --> |
|
|
|
<el-select v-model="form.typeId" placeholder="请选择企业类型"> |
|
|
|
<el-option label="政府机关" :value="1"></el-option> |
|
|
|
<el-option label="研究机构" :value="2"></el-option> |
|
|
|
<el-option label="社会团体" :value="3"></el-option> |
|
|
|
<el-option label="企事业单位" :value="4"></el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="统一社会信用代码：" :label-width="formLabelWidth" prop="code"> |
|
|
|
<el-input v-model="form.code" autocomplete="off"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="法人证件类型：" :label-width="formLabelWidth" prop="ceId"> |
|
|
|
<!-- 法人证件类型的下拉菜单 --> |
|
|
|
<el-select v-model="form.ceId" placeholder="请选择法人证件类型"> |
|
|
|
<el-option label="中国居民身份证" :value="1"></el-option> |
|
|
|
<el-option label="港澳居民往来内地通行证" :value="2"></el-option> |
|
|
|
<el-option label="台湾居民往来大陆通行证" :value="3"></el-option> |
|
|
|
<el-option label="外国人永久居留身份证" :value="4"></el-option> |
|
|
|
<el-option label="港澳台居民居住证" :value="5"></el-option> |
|
|
|
<el-option label="护照" :value="6"></el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="法人证件号码：" :label-width="formLabelWidth" prop="enCeNumber"> |
|
|
|
<el-input v-model="form.enCeNumber" autocomplete="off"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<p class="tab-title">企业信息</p> |
|
|
|
<el-col :span="11"> |
|
|
|
<el-form-item label="企业名称：" :label-width="formLabelWidth" prop="name"> |
|
|
|
<el-input v-model="form.name" autocomplete="off" placeholder="请输入企业名称"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="企业类型：" :label-width="formLabelWidth" prop="typeId"> |
|
|
|
<!-- 企业类型的下拉菜单 --> |
|
|
|
<el-select v-model="form.typeId" placeholder="请选择企业类型"> |
|
|
|
<el-option label="政府机关" :value="1"></el-option> |
|
|
|
<el-option label="研究机构" :value="2"></el-option> |
|
|
|
<el-option label="社会团体" :value="3"></el-option> |
|
|
|
<el-option label="企事业单位" :value="4"></el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="统一社会信用代码：" :label-width="formLabelWidth" prop="code"> |
|
|
|
<el-input v-model="form.code" autocomplete="off" placeholder="请输入统一社会信用代码"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="法人证件类型：" :label-width="formLabelWidth" prop="ceId"> |
|
|
|
<!-- 法人证件类型的下拉菜单 --> |
|
|
|
<el-select v-model="form.ceId" placeholder="请选择法人证件类型"> |
|
|
|
<el-option label="中国居民身份证" :value="1"></el-option> |
|
|
|
<el-option label="港澳居民往来内地通行证" :value="2"></el-option> |
|
|
|
<el-option label="台湾居民往来大陆通行证" :value="3"></el-option> |
|
|
|
<el-option label="外国人永久居留身份证" :value="4"></el-option> |
|
|
|
<el-option label="港澳台居民居住证" :value="5"></el-option> |
|
|
|
<el-option label="护照" :value="6"></el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="法人证件号码：" :label-width="formLabelWidth" prop="enCeNumber"> |
|
|
|
<el-input v-model="form.enCeNumber" autocomplete="off" placeholder="请输入法人证件号码"></el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="2" style="height:1px;"></el-col> |
|
|
|
<el-col :span="11" style="padding-right:30px;"> |
|
|
|
<el-form-item label="所属行业：" :label-width="formLabelWidth" prop="inBigId"> |
|
|
|
<!-- 行业大类的下拉菜单 --> |
|
|
|
<el-select |
|
|
|
v-model="form.inBigId" |
|
|
|
placeholder="行业大类" |
|
|
|
style="width:calc(50% - 10px);margin-right: 20px;" |
|
|
|
@change="changeSmallIndustry(true)" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="(item,index) in bigIndustryType" |
|
|
|
:key="index" |
|
|
|
:label="item.name" |
|
|
|
:value="item.id" |
|
|
|
></el-option> |
|
|
|
</el-select> |
|
|
|
<!-- 行业小类的下拉菜单 --> |
|
|
|
<el-select |
|
|
|
v-model="form.inSmallId" |
|
|
|
placeholder="行业小类" |
|
|
|
style="width:calc(50% - 10px);" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="(item,index) in smallIndustryType" |
|
|
|
:key="index" |
|
|
|
:label="item.name" |
|
|
|
:value="item.id" |
|
|
|
></el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="法人姓名：" :label-width="formLabelWidth" prop="enLegalName"> |
|
|
|
<el-input v-model="form.enLegalName" autocomplete="off"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="法人证件：" :label-width="formLabelWidth" prop="enCeAddressZ"> |
|
|
|
<div class="flex-box"> |
|
|
|
<el-upload |
|
|
|
class="avatar-uploader flex-1" |
|
|
|
:action="upload_file" |
|
|
|
:show-file-list="false" |
|
|
|
:on-success="handlePhotoSuccess" |
|
|
|
:before-upload="beforeAvatarUpload" |
|
|
|
> |
|
|
|
<img v-if="photoUrl" :src="photoUrl" class="avatar"/> |
|
|
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i> |
|
|
|
</el-upload> |
|
|
|
<el-upload |
|
|
|
class="avatar-uploader flex-1" |
|
|
|
:action="upload_file" |
|
|
|
:show-file-list="false" |
|
|
|
:on-success="handleReverseSuccess" |
|
|
|
:before-upload="beforeAvatarUpload" |
|
|
|
> |
|
|
|
<img v-if="reversePhotoUrl" :src="reversePhotoUrl" class="avatar"/> |
|
|
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i> |
|
|
|
</el-upload> |
|
|
|
</div> |
|
|
|
<el-form-item label-width="150px" prop="enCeAddressF"></el-form-item> |
|
|
|
</el-form-item> |
|
|
|
<el-col :span="11"> |
|
|
|
<el-form-item label="所属行业：" :label-width="formLabelWidth" prop="inBigId"> |
|
|
|
<!-- 行业大类的下拉菜单 --> |
|
|
|
<el-select |
|
|
|
v-model="form.inBigId" |
|
|
|
placeholder="行业大类" |
|
|
|
style="width:calc(50% - 10px);margin-right: 20px;" |
|
|
|
@change="changeSmallIndustry(true)" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="(item,index) in bigIndustryType" |
|
|
|
:key="index" |
|
|
|
:label="item.name" |
|
|
|
:value="item.id" |
|
|
|
></el-option> |
|
|
|
</el-select> |
|
|
|
<!-- 行业小类的下拉菜单 --> |
|
|
|
<el-select |
|
|
|
v-model="form.inSmallId" |
|
|
|
placeholder="行业小类" |
|
|
|
style="width:calc(50% - 10px);" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="(item,index) in smallIndustryType" |
|
|
|
:key="index" |
|
|
|
:label="item.name" |
|
|
|
:value="item.id" |
|
|
|
></el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="法人姓名：" :label-width="formLabelWidth" prop="enLegalName"> |
|
|
|
<el-input v-model="form.enLegalName" autocomplete="off" placeholder="请输入法人姓名"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="法人证件：" :label-width="formLabelWidth" prop="enCeAddressZ"> |
|
|
|
<div class="flex-box"> |
|
|
|
<el-upload |
|
|
|
class="avatar-uploader flex-1" |
|
|
|
:action="upload_file" |
|
|
|
:show-file-list="false" |
|
|
|
:on-success="handlePhotoSuccess" |
|
|
|
:before-upload="beforeAvatarUpload" |
|
|
|
> |
|
|
|
<img v-if="photoUrl" :src="photoUrl" class="avatar"/> |
|
|
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i> |
|
|
|
</el-upload> |
|
|
|
<el-upload |
|
|
|
class="avatar-uploader flex-1" |
|
|
|
:action="upload_file" |
|
|
|
:show-file-list="false" |
|
|
|
:on-success="handleReverseSuccess" |
|
|
|
:before-upload="beforeAvatarUpload" |
|
|
|
> |
|
|
|
<img v-if="reversePhotoUrl" :src="reversePhotoUrl" class="avatar"/> |
|
|
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i> |
|
|
|
</el-upload> |
|
|
|
</div> |
|
|
|
<el-form-item label-width="150px" prop="enCeAddressF"></el-form-item> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
<el-row> |
|
|
|
<el-col :span="24" style="padding-right:30px;"> |
|
|
|
<el-col :span="24"> |
|
|
|
<el-form-item label="企业简介：" :label-width="formLabelWidth" prop="enIntroduction"> |
|
|
|
<!-- <el-input v-model="form.enIntroduction" autocomplete="off"></el-input> --> |
|
|
|
<el-input type="textarea" v-model="form.enIntroduction"></el-input> |
|
|
|
<el-input type="textarea" v-model="form.enIntroduction" placeholder="请输入企业简介"></el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
<el-row> |
|
|
|
<el-col :span="11" style="padding-right:30px;"> |
|
|
|
<el-col :span="11"> |
|
|
|
<el-form-item label="组织/单位注册所在地：" :label-width="formLabelWidth" prop="areaId"> |
|
|
|
<!-- <v-distpicker @selected="onSelected" class="my-distpicker"></v-distpicker> --> |
|
|
|
<el-select |
|
|
|
@ -187,21 +181,24 @@ |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="官方网址：" :label-width="formLabelWidth" prop="enOffWeb"> |
|
|
|
<el-input v-model="form.enOffWeb" autocomplete="off"></el-input> |
|
|
|
<el-input v-model="form.enOffWeb" autocomplete="off" placeholder="请输入官方网址"></el-input> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
|
|
|
|
<el-form-item label="联系人姓名：" :label-width="formLabelWidth" prop="conName"> |
|
|
|
<el-input v-model="form.conName" autocomplete="off"></el-input> |
|
|
|
<el-input v-model="form.conName" autocomplete="off" placeholder="请输入联系人姓名"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="联系人电话：" :label-width="formLabelWidth" prop="telPhone"> |
|
|
|
<el-input v-model="form.telPhone" autocomplete="off" placeholder="请输入联系人电话"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="联系人邮箱：" :label-width="formLabelWidth" prop="email"> |
|
|
|
<el-input v-model="form.email" autocomplete="off"></el-input> |
|
|
|
<el-input v-model="form.email" autocomplete="off" placeholder="请输入联系人邮箱"></el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="2" style="height:1px;"></el-col> |
|
|
|
<el-col :span="11" style="padding-right:30px;"> |
|
|
|
<el-col :span="11"> |
|
|
|
<el-form-item label="注册详细地址：" :label-width="formLabelWidth" prop="enDetAddress"> |
|
|
|
<el-input v-model="form.enDetAddress" autocomplete="off"></el-input> |
|
|
|
<el-input v-model="form.enDetAddress" autocomplete="off" placeholder="请输入注册详细地址"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="组织/单位营业执照：" :label-width="formLabelWidth" prop="enOpeAddress"> |
|
|
|
<div class="flex-box"> |
|
|
|
@ -217,16 +214,13 @@ |
|
|
|
</el-upload> |
|
|
|
</div> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="联系人电话：" :label-width="formLabelWidth" prop="telPhone"> |
|
|
|
<el-input v-model="form.telPhone" autocomplete="off"></el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
|
|
|
|
|
|
|
|
<el-row> |
|
|
|
<el-form-item :label-width="formLabelWidth" style="text-align: center;"> |
|
|
|
<el-button type="danger" size="small" @click="submitForm('userInfo')" style="width:200px;text-align: center;">注册</el-button> |
|
|
|
<el-button type="primary" size="small" @click="submitForm('userInfo')" style="width:200px;text-align: center;">注册</el-button> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label-width="formLabelWidth" class="text-center"> |
|
|
|
已有账号？ |
|
|
|
@ -259,7 +253,19 @@ export default { |
|
|
|
sendStatus: false, |
|
|
|
timer: 60, |
|
|
|
codeSrc: '', |
|
|
|
formLabelWidth: '150px', |
|
|
|
formLabelWidth: '160px', |
|
|
|
upload_file: config.UPLOAD_URL, //上传图片的接口地址 |
|
|
|
bigIndustryType: [], //行业大类列表 |
|
|
|
smallIndustryType: [], //行业小类列表 |
|
|
|
photoUrl: "", //正面法人证件照 |
|
|
|
reversePhotoUrl: "", //反面法人证件照 |
|
|
|
businessLicenceUrl: "", //组织/单位营业执照 |
|
|
|
provinceValue: "", //注册地的省 |
|
|
|
provinces: [], //注册地-省列表 |
|
|
|
cityValue: "", //注册地的市 |
|
|
|
citys: [], //注册地-市列表 |
|
|
|
areaValue: "", //注册地的区域 |
|
|
|
areas: [], //注册地-区列表 |
|
|
|
form: { |
|
|
|
name: '', |
|
|
|
userName: '', |
|
|
|
@ -307,9 +313,9 @@ export default { |
|
|
|
goLogin() { |
|
|
|
this.$router.push({name: 'login'}) |
|
|
|
}, |
|
|
|
// refreshCode:function(){ |
|
|
|
// document.getElementById("codePic").setAttribute("src",config.API_URL+"/api-login/common/verifycode?" + Math.random()) |
|
|
|
// }, |
|
|
|
refreshCode:function(){ |
|
|
|
document.getElementById("codePic").setAttribute("src",config.API_URL+"/api-login/common/verifycode?" + Math.random()) |
|
|
|
}, |
|
|
|
getSendMessage() { |
|
|
|
this.$refs['userInfo'].validateField('telPhone', (valid) => { |
|
|
|
if (valid) { |
|
|
|
@ -356,18 +362,67 @@ export default { |
|
|
|
resetForm(formName) { |
|
|
|
this.$refs[formName].resetFields(); |
|
|
|
this.$router.go(-1) |
|
|
|
} |
|
|
|
}, |
|
|
|
//行业大类变化获取行业小类 |
|
|
|
changeSmallIndustry(clean) { |
|
|
|
// if (clean) { |
|
|
|
// this.formData.inSmallId = ""; |
|
|
|
// } |
|
|
|
// getSmallIndustryList({pid: this.formData.inBigId}).then(res => { |
|
|
|
// this.smallIndustryType = res.data; |
|
|
|
// }); |
|
|
|
}, |
|
|
|
//组织/单位营业执照图片上传成功的回调 |
|
|
|
handleLicenceSuccess(res, file) { |
|
|
|
// this.businessLicenceUrl = URL.createObjectURL(file.raw); |
|
|
|
// this.formData.enOpeAddress = res; |
|
|
|
}, |
|
|
|
//法人正面照图片上传成功的回调 |
|
|
|
handlePhotoSuccess(res, file) { |
|
|
|
// this.photoUrl = URL.createObjectURL(file.raw); |
|
|
|
// this.formData.enCeAddressZ = res; |
|
|
|
}, |
|
|
|
//法人反面照图片上传成功的回调 |
|
|
|
handleReverseSuccess(res, file) { |
|
|
|
// this.reversePhotoUrl = URL.createObjectURL(file.raw); |
|
|
|
// this.formData.enCeAddressF = res; |
|
|
|
}, |
|
|
|
//图片上传前的检测 |
|
|
|
beforeAvatarUpload(file) { |
|
|
|
const isLt2M = file.size / 1024 / 1024 < 2; |
|
|
|
if (!isLt2M) { |
|
|
|
this.$message.error("上传图片大小不能超过 2MB!"); |
|
|
|
} |
|
|
|
return isLt2M; |
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scope> |
|
|
|
.form-footer { |
|
|
|
text-align: center; |
|
|
|
// .form-footer { |
|
|
|
// text-align: center; |
|
|
|
// } |
|
|
|
.tab-title { |
|
|
|
font-size: 16px; |
|
|
|
font-family: Microsoft YaHei; |
|
|
|
font-weight: bold; |
|
|
|
color: #000000; |
|
|
|
line-height: 26px; |
|
|
|
margin: 20px 0; |
|
|
|
&::before { |
|
|
|
content: " "; |
|
|
|
position: absolute; |
|
|
|
left: -15px; |
|
|
|
top: 23px; |
|
|
|
width: 5px; |
|
|
|
height: 18px; |
|
|
|
background: #01496E; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.el-form-new { |
|
|
|
max-width: 1200px; |
|
|
|
padding: 0 70px; |
|
|
|
// width: 400px; |
|
|
|
// margin: 0 auto; |
|
|
|
} |
|
|
|
@ -388,4 +443,7 @@ export default { |
|
|
|
height: 32px; |
|
|
|
vertical-align: middle; |
|
|
|
} |
|
|
|
.el-select { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
DESKTOP-00SUCB6\Administrator
5 years ago
