<template>
<div class="register ">
<div style="position: relative;bottom: 360px;width:1050px">
<el-steps :active="active" finish-status="success" simple>
<el-step title="基础信息"></el-step>
<el-step title="企业信息"></el-step>
<el-step title="法人信息"></el-step>
<el-step title="账户信息"></el-step>
<el-step title="入驻完成"></el-step>
</el-steps>
</div>
<el-form :model="registerForm" ref="registerForm" class="register-form" label-width="180px" :rules="registerRules">
<div v-show="active == 0">
<div style="height: 600px;">
<el-form-item prop="contact" label="联系人:" >
<el-input v-model="registerForm.contact" type="text" auto-complete="off" placeholder="请输入联系人" clearable>
</el-input>
</el-form-item>
<el-form-item prop="contactPhone" label="联系电话:" >
<el-input v-model="registerForm.contactPhone" type="text" auto-complete="off" placeholder="请输入联系电话" clearable>
</el-input>
</el-form-item>
<el-form-item prop="contactMail" label="联系邮箱:" >
<el-input v-model="registerForm.contactMail" type="text" auto-complete="off" placeholder="请输入联系邮箱" clearable>
</el-input>
</el-form-item>
<el-form-item label="服务区域" prop="serArea">
<el-cascader size="large" :options="pcaTextArr" v-model="selectedOptions" placeholder="请选择服务区域" @change="handleChange"></el-cascader>
</el-form-item>
<el-form-item prop="regPerFacaImageList" label="企业门头照:" >
<el-upload
list-type="picture-card"
:action="url"
accept="image/*"
:headers="Headers"
:on-success="handleregPerFacaImage"
:before-remove="handleRemoveregPerFacaImage"
:file-list="fileList"
><i class="el-icon-plus"> </i>
</el-upload>
</el-form-item>
<el-form-item prop="regPerEnvImageList" label="企业办公环境:" >
<el-upload
list-type="picture-card"
:action="url"
accept="image/*"
:headers="Headers"
:on-success="handleregPerEnvImage"
:before-remove="handleRemoveregPerEnvImage"
:file-list="fileList"
><i class="el-icon-plus"> </i>
</el-upload>
</el-form-item>
</div>
<div style="text-align: center;">
<el-button type="primary" @click="next">下一步</el-button>
</div>
<div style="text-align: center;"> <span class="link-type" @click="gotologin">《救在身边服务商细则》</span></div>
</div>
<div v-show="active == 1" style="margin-bottom: -5px;">
<div style="height: 600px;">
<el-form-item prop="name" label="公司名称:">
<el-input v-model="registerForm.name" type="text" auto-complete="off" placeholder="请输入公司名称" clearable>
</el-input>
</el-form-item>
<el-form-item prop="usccNo" label="统一社会信用代码:">
<el-input v-model="registerForm.usccNo" type="text" auto-complete="off" placeholder="请输入统一社会信用代码" clearable>
</el-input>
</el-form-item>
<el-form-item prop="belong" label="公司类型:" >
<el-select v-model="registerForm.belong" placeholder="请选择公司类型">
<el-option label="私营" value="1"></el-option>
<el-option label="政府" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="regAddress" label="注册地址:">
<el-input v-model="registerForm.regAddress" type="text" auto-complete="off" placeholder="请输入注册地址" clearable>
</el-input>
</el-form-item>
<el-form-item prop="bussScope" label="经营范围:">
<el-input v-model="registerForm.bussScope" type="textarea" :rows="7" auto-complete="off" placeholder="请输入经营范围" clearable />
</el-form-item>
<el-form-item prop="regPerCertImageId" label="营业执照:" >
<el-upload
:limit="1"
:on-exceed="handleExceed"
list-type="picture-card"
:action="url"
accept="image/*"
:headers="Headers"
:on-success="handleregPerCertImage"
:before-remove="handleRemoveregPerCertImage"
:file-list="fileList"
><i class="el-icon-plus"> </i>
</el-upload>
</el-form-item>
</div>
<div style="text-align: center;display:flex;">
<el-button @click="pre">上一步</el-button>
<el-button type="primary" @click="next">下一步</el-button>
</div>
<div style="text-align: center;"> <span class="link-type" @click="gotologin">《救在身边服务商细则》</span></div>
</div>
<div v-show="active == 2" style="margin-bottom: -5px;">
<div style="height: 600px;">
<el-form-item prop="legalPerName" label="法人代表姓名:">
<el-input v-model="registerForm.legalPerName" type="text" auto-complete="off" placeholder="请输入法人代表姓名" clearable>
</el-input>
</el-form-item>
<el-form-item prop="legalPerId" label="法人代表身份证号:">
<el-input v-model="registerForm.legalPerId" type="text" auto-complete="off" placeholder="请输入法人代表身份证号" clearable>
</el-input>
</el-form-item>
<el-form-item prop="legalPerValid" label="法人身份证截止日期:">
<el-input v-model="registerForm.legalPerValid" type="text" auto-complete="off" placeholder="请输入法人身份证截止日期" clearable>
</el-input>
</el-form-item>
<el-form-item prop="legalPerAddress" label="法人家庭地址:">
<el-input v-model="registerForm.legalPerAddress" type="text" auto-complete="off" placeholder="请输入法人家庭地址" clearable>
</el-input>
</el-form-item>
<el-form-item prop="legalPerPhone" label="法人代表手机号:">
<el-input v-model="registerForm.legalPerPhone" type="text" auto-complete="off" placeholder="请输入法人代表手机号" clearable>
</el-input>
</el-form-item>
<el-form-item prop="legalPerFrontImageId" label="法人身份证:" >
<div style="width:340px;display: flex;justify-content:space-between">
<el-upload
:limit="1"
:on-exceed="handleExceed"
list-type="picture-card"
:action="url"
accept="image/*"
:headers="Headers"
:on-success="handlelegalPerFront"
:before-remove="handleRemovelegalPerFront"
:file-list="fileList"
><div style="display: flex;flex-direction: column;margin-top: 40px;"><i class="el-icon-plus"></i><span
style="line-height: 40px;">上传身份证正面</span></div>
</el-upload>
<el-upload
:limit="1"
:on-exceed="handleExceed"
list-type="picture-card"
:action="url"
accept="image/*"
:headers="Headers"
:on-success="handlelegalPerBack"
:before-remove="handleRemovelegalPerBack"
:file-list="fileList"
><div style="display: flex;flex-direction: column;margin-top: 40px;"><i class="el-icon-plus"></i><span
style="line-height: 40px;">上传身份证背面</span></div>
</el-upload>
</div>
</el-form-item>
</div>
<div style="text-align: center;display:flex;">
<el-button @click="pre">上一步</el-button>
<el-button type="primary" @click="next">下一步</el-button>
</div>
<div style="text-align: center;"> <span class="link-type" @click="gotologin">《救在身边服务商细则》</span></div>
</div>
<div v-show="active == 3" style="margin-bottom: -5px;">
<div style="height: 600px;">
<el-form-item prop="operBank" label="开户银行:" >
<el-input v-model="registerForm.operBank" type="text" auto-complete="off" placeholder="请输入开户银行">
</el-input>
</el-form-item>
<el-form-item prop="operBankAccount" label="开户行账号:" >
<el-input v-model="registerForm.operBankAccount" type="text" auto-complete="off" placeholder="请输入账号">
</el-input>
</el-form-item>
<el-form-item prop="operBankAddress" label="开户行所在地:" >
<el-input v-model="registerForm.operBankAddress" type="text" auto-complete="off" placeholder="请输入开户行账号">
</el-input>
</el-form-item>
<el-form-item prop="operBankSubbranch" label="所属支行:" >
<el-input v-model="registerForm.operBankSubbranch" type="text" auto-complete="off" placeholder="请输入所属支行">
</el-input>
</el-form-item>
<el-form-item prop="regPerSmatImageList" label="对公结算材料:" >
<el-upload
list-type="picture-card"
:action="url"
accept="image/*"
:headers="Headers"
:on-success="handleregPerSmatImage"
:before-remove="handleRemoveregPerSmatImage"
:file-list="fileList"
><i class="el-icon-plus"> </i>
</el-upload>
</el-form-item>
</div>
<div style="text-align: center;display:flex;">
<el-button @click="pre">上一步</el-button>
<el-button type="primary" @click="applyForm()">提交审核</el-button>
</div>
<div style="text-align: center;"> <span class="link-type" @click="gotologin">《救在身边服务商细则》</span></div>
</div>
</el-form>
<div class="register-form" label-width="120px" v-show="active == 4" style="text-align: center;height:680px;padding-top: 150px;">
<div v-if="status==0">
<div><img src="@/assets/images/sh.png" alt=""></div>
<h2>提交成功，审核中...</h2>
<div style="color: gray;" @click="gotologin()">请耐心等待...点击返回登录</div>
</div>
<div v-if="status==1">
<div><img src="@/assets/images/sh.png" alt=""></div>
<h2>提交成功，审核通过</h2>
<div style="color: gray;" @click="gotoindex()">点击跳转首页</div>
</div>
<div v-if="status==2">
<div><img src="@/assets/images/btg.png" alt=""></div>
<h2>审核不通过</h2>
<div style="color: gray;">请核对并修改以下信息后，再重新提交。</div>
<div style="border: 1px solid black;width:800px;height:200px;margin:60px auto;text-align: left;padding: 30px;">
<p>您提交的内容有如下错误：</p>
<p style="font-size: 14px;color:grey"><i class="el-icon-circle-close" style="color: red;"/> 你的账户已被冻结</p>
<p style="font-size: 14px;color:grey"><i class="el-icon-circle-close" style="color: red;"/> 你的账户还不具备申请资格</p>
</div>
<div>
<el-button type="primary" @click="gotoauth()">重新认证</el-button>
</div>
</div>
</div>
<!-- 底部 -->
<div class="el-register-footer">
<span>Copyright © 2018-2023 All Rights Reserved.</span>
</div>
</div>
</template>
<script>
import {pcaTextArr} from "element-china-area-data";
import { getToken } from "@/utils/auth";
export default {
data() {
return {
fileList:[],
url:process.env.VUE_APP_BASE_API + "/common/upload",
Headers: {Authorization: "Bearer " + getToken(),},
selectedOptions:[],
pcaTextArr,
status:"",
active: 0,
codeUrl: "",
registerForm: {
contact:"", //联系人
contactPhone:"", //联系电话
contactMail:"", //联系邮箱
serProvince:"", //服务区域 省
serCity:"", //服务区域 市
serArea:"", //服务区域 区
regPerFacaImageList:[], //企业门头照
regPerEnvImageList:[], //企业办公环境
name:"", //公司名称
usccNo:"", //统一社会信用代码
belong:"", //公司类型 1 私营 2 政府
regAddress:"", //注册地址
bussScope:"", //经营范围
regPerCertImageId:"", //营业执照
legalPerName:"", //法人代表姓名
legalPerId:"", //法人代表身份证号
legalPerValid:"", //法人身份证截至日期
legalPerAddress:"", //法人家庭地址
legalPerPhone:"", //法人代表手机号
legalPerFrontImageId:"",//法人身份证正面
legalPerBackImageId:"", //法人身份证反面
operBank:"", //开户银行
operBankAccount:"", //开户行帐号
operBankAddress:"", //开户行所在地
operBankSubbranch:"", //所属支行
regPerSmatImageList:[], //对公结算材料
},
registerRules: {
contact: [
{ required: true, message: "请输入联系人" ,trigger: "blur"},
{ pattern: /^[\u4E00-\u9FA5]{1,}$/, message: "只能输入汉字", trigger: "blur"}
],
contactPhone: [
{ required: true, trigger: "blur", message: "请输入联系电话"},
{ pattern: /^1[3-9]\d{9}$/, message: "请输入合法格式的联系电话", trigger: "blur"}
],
contactMail: [{ required: true, trigger: "blur", message: "请输入联系邮箱" },
{ pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/, message: "请输入合法格式的联系邮箱", trigger: "blur"}
],
serArea: [ { required: true, trigger: "blur", message: "请选择服务区域"},],
regPerFacaImageList: [{ required: true, trigger: "blur", message: "请上传企业门头照" },],
regPerEnvImageList: [ { required: true, trigger: "blur", message: "请上传企业办公环境"},],
name: [{ required: true, trigger: "blur", message: "请输入公司名称" },],
usccNo: [ { required: true, trigger: "blur", message: "请输入统一社会信用代码"},],
belong: [{ required: true, trigger: "blur", message: "请选择公司类型" },],
regAddress: [ { required: true, trigger: "blur", message: "请输入注册地址"},],
bussScope: [{ required: true, trigger: "blur", message: "请输入经营范围" },],
regPerCertImageId: [ { required: true, trigger: "blur", message: "请上传营业执照"},],
legalPerName: [{ required: true, trigger: "blur", message: "请输入法人代表姓名" },
{ pattern: /^[\u4E00-\u9FA5]{1,}$/, message: "只能输入汉字", trigger: "blur"}
],
legalPerId: [ { required: true, trigger: "blur", message: "请输入法人代表身份证号"},],
legalPerValid: [ { required: true, trigger: "blur", message: "请输入法人身份证截至日期"},],
legalPerAddress: [{ required: true, trigger: "blur", message: "请输入法人家庭地址" },],
legalPerPhone: [{ required: true, trigger: "blur", message: "请输入法人代表手机号" },
{ pattern: /^1[3-9]\d{9}$/, message: "请输入合法格式的联系电话", trigger: "blur"}
],
legalPerFrontImageId: [ { required: true, trigger: "blur", message: "请上传法人身份证正面"},],
legalPerBackImageId: [{ required: true, trigger: "blur", message: "请上传法人身份证反面" },],
operBank: [ { required: true, trigger: "blur", message: "请输入开户银行"},],
operBankAccount: [{ required: true, trigger: "blur", message: "请输入开户行帐号" },],
operBankAddress: [ { required: true, trigger: "blur", message: "请输入开户行所在地"},],
operBankSubbranch: [ { required: true, trigger: "blur", message: "请输入所属支行"},],
regPerSmatImageList: [ { required: true, trigger: "blur", message: "请上传对公结算材料"},],
},
arr:[]
};
},
created() {
this.getprofile()
},
watch: {
// registerForm: {
// deep: true,
// // immediate: true,
// handler(newVal) {
// console.log(newVal)
// },
// },
},
methods: {
gotoindex(){
this.$router.push('/index/index');
},
gotologin(){
this.$store.dispatch('LogOut').then(() => {
location.href = '/index';
})
},
getprofile(){
this.$service.get(`/merchant/isPerfect`).then(res => {
if(res.code==200){
this.status = res.msg;
if(this.status){
this.active = 4;
}else{
this.active = 0;
}
}else{
this.$message({
type: 'error', // success error warning
message: res.msg,
duration: 2000,
})
}
}).catch(() => {});
},
//省市区选择
handleChange(){
this.registerForm.serProvince = this.selectedOptions[0];
this.registerForm.serCity = this.selectedOptions[1];
this.registerForm.serArea = this.selectedOptions[2];
},
//企业门头照
handleregPerFacaImage(res){
if(res.code == 200){
this.registerForm.regPerFacaImageList.push(res.data.id)
}
},
//企业办公环境
handleregPerEnvImage(res){
if(res.code == 200){
this.registerForm.regPerEnvImageList.push(res.data.id)
}
},
//营业执照
handleregPerCertImage(res){
if(res.code == 200){
this.registerForm.regPerCertImageId = res.data.id;
}
},
//身份证正面
handlelegalPerFront(res){
if(res.code == 200){
this.registerForm.legalPerFrontImageId = res.data.id;
}
},
//身份证反面
handlelegalPerBack(res){
if(res.code == 200){
this.registerForm.legalPerBackImageId = res.data.id;
}
},
//对公结算材料
handleregPerSmatImage(res){
if(res.code == 200){
this.registerForm.regPerSmatImageList.push(res.data.id)
}
},
//删除企业门头图片
handleRemoveregPerFacaImage(file){
const fileid = file.response.data.id;
const index = this.registerForm.regPerFacaImageList.findIndex((item) => item === fileid);
this.registerForm.regPerFacaImageList.splice(index, 1);
},
//删除办公环境图片
handleRemoveregPerEnvImage(file) {
const fileid = file.response.data.id;
const index = this.registerForm.regPerEnvImageList.findIndex((item) => item === fileid);
this.registerForm.regPerEnvImageList.splice(index, 1);
},
//删除营业执照
handleRemoveregPerCertImage(){
this.registerForm.regPerCertImageId = '';
},
//删除身份证正面
handleRemovelegalPerFront(){
this.registerForm.legalPerFrontImageId = '';
},
//删除身份证背面
handleRemovelegalPerBack(){
this.registerForm.legalPerBackImageId = '';
},
//删除对公材料
handleRemoveregPerSmatImage(file){
const fileid = file.response.data.id;
const index = this.registerForm.regPerSmatImageList.findIndex((item) => item === fileid);
this.registerForm.regPerSmatImageList.splice(index, 1);
},
//图片超出
handleExceed(){
this.$message.warning(`当前限制选择 1 张图片`);
},
//提交表单
applyForm(){
this.$refs.registerForm.validate(valid => {
if (valid) {
let body = this.registerForm;
this.$service.post(`/merchant`,body).then(res => {
if(res.code==200){
console.log(this.registerForm);
this.next();
}
}).catch(() => {});
}else {
this.$message({
type: 'error', // success error warning
message: "请输入必填项",
duration: 2000,
})
}
});
},
gotoauth(){
this.active = 0
},
// 步骤条下一步的方法
next() {
if (this.active++ > 3) this.active = 0
},
// 步骤条上一步的方法
pre() {
if (this.active-- < 2) this.active = 0
},
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-form-item--medium .el-form-item__content{
line-height: 10px;
}
::v-deep .el-cascader{
width: 100%;
}
.el-select{
width: 100%;
}
.register {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-image: url("../assets/images/login-background.jpg");
background-size: cover;
}
.title {
margin: 0px auto 30px auto;
text-align: center;
color: #707070;
}
.register-tip {
font-size: 13px;
text-align: center;
color: #bfbfbf;
}
.register-form {
position: absolute;
border-radius: 6px;
background: #ffffff;
width: 1050px;
padding: 25px 25px 5px 25px;
.el-input {
height: 35px;
input {
height: 35px;
}
}
.input-icon {
height: 35px;
width: 14px;
margin-left: 2px;
}
}
.register-tip {
font-size: 13px;
text-align: center;
color: #bfbfbf;
}
.el-register-footer {
height: 40px;
line-height: 40px;
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
color: #fff;
font-family: Arial;
font-size: 12px;
letter-spacing: 1px;
}
.el-button {
width: 500px;
}</style>vue实现步骤条
于 2023-10-17 16:58:58 首次发布
2730
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
