|
@@ -0,0 +1,421 @@
|
|
|
+<template>
|
|
|
+ <div class="register" :style="`background-image:url(${require('@/assets/image/register_background.png')})`">
|
|
|
+ <div class="content">
|
|
|
+ <div class="logo">
|
|
|
+ <el-image :src="require('@/assets/image/logo3.png')" class="img" fit="contain"></el-image>
|
|
|
+ </div>
|
|
|
+ <div class="body">
|
|
|
+ <div class="title">
|
|
|
+ <div>企业注册</div>
|
|
|
+ </div>
|
|
|
+ <div class="input">
|
|
|
+ <el-form ref="ruleForm" :model="form" :rules="rules" label-position="right" label-width="80px">
|
|
|
+ <template>
|
|
|
+ <div>
|
|
|
+ <div class="form_item_title">
|
|
|
+ <div>付费码信息<span style="color:red;font-size:12px;">(请先检验付费码)</span>:</div>
|
|
|
+ <el-button type="primary" size="small" @click="verification">校验</el-button>
|
|
|
+ </div>
|
|
|
+ <el-form-item prop="paidCode" label="付费码:">
|
|
|
+ <el-input v-model="form.paidCode" placeholder="请输入付费码"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="phoneCode1" label="验证码:">
|
|
|
+ <el-input v-model="form.phoneCode1" placeholder="请输入验证码">
|
|
|
+ <el-button slot="append" class="phoneCode" :disabled="phoneCodeText.indexOf('秒')!=-1" @click="sendPhoneCodeByPaidCode">{{phoneCodeText}}</el-button>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- <div class="verification">
|
|
|
+ <el-button type="primary" size="small" @click="verification">校验</el-button>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <!-- <div class="form_item_title">注册信息:</div> -->
|
|
|
+ <p class="form_item_title">企业信息:</p>
|
|
|
+ <el-row :gutter="24">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="名称:" prop="tenantName">
|
|
|
+ <el-input
|
|
|
+ v-model="form.tenantName"
|
|
|
+ placeholder="请输入企业名称"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="类型:" prop="tenantType">
|
|
|
+ <el-select v-model="form.tenantType" placeholder="请选择企业类型" style="width:100%">
|
|
|
+ <el-option v-for="item in tenantType" :key="item.dictChildValue" :label="item.dictChildLabel" :value="Number(item.dictChildValue)"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="地址:" prop="tenantAddress">
|
|
|
+ <el-input
|
|
|
+ v-model="form.tenantAddress"
|
|
|
+ placeholder="请输入企业地址"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <p class="form_item_title">人员信息:</p>
|
|
|
+ <el-row :gutter="24">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="姓名:" prop="personnelName">
|
|
|
+ <el-input
|
|
|
+ v-model="form.personnelName"
|
|
|
+ placeholder="请输入姓名"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="邮箱:" prop="personnelEmail">
|
|
|
+ <el-input
|
|
|
+ v-model="form.personnelEmail"
|
|
|
+ placeholder="请输入邮箱"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="手机号:" prop="personnelPhone">
|
|
|
+ <el-input
|
|
|
+ v-model="form.personnelPhone"
|
|
|
+ placeholder="请输入手机号"
|
|
|
+ maxlength="11"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="验证码:" prop="phoneCode">
|
|
|
+ <el-input v-model="form.phoneCode" placeholder="请输入验证码">
|
|
|
+ <el-button slot="append" class="phoneCode" :disabled="phoneCodeText1.indexOf('秒')!=-1" @click="getPhoneCode">{{phoneCodeText1}}</el-button>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="账号:" prop="personnelUserName">
|
|
|
+ <el-input
|
|
|
+ v-model="form.personnelUserName"
|
|
|
+ placeholder="请输入账号"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="密码:" prop="personnelPassword">
|
|
|
+ <el-input
|
|
|
+ v-model="form.personnelPassword"
|
|
|
+ placeholder="请输入密码"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="btn">
|
|
|
+ <el-button round style="width:100%;background:var(--color);color:white;height:50px;" :loading="btnLoading" @click="submit">注册</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="copyright">
|
|
|
+ copyright©灵智信息服务(深圳)有限公司
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import Storage from '@/utils/storage';
|
|
|
+ export default {
|
|
|
+ components: {},
|
|
|
+ props: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ btnLoading:false,
|
|
|
+ form:{
|
|
|
+ },
|
|
|
+ phoneCodeText:'获取验证码',
|
|
|
+ phoneCodeText1:'获取验证码',
|
|
|
+ rules:{
|
|
|
+ personnelPhone: [
|
|
|
+ { required: true, message: "请输入手机号码", trigger: "blur" },
|
|
|
+ {
|
|
|
+ pattern:
|
|
|
+ /(^((\+86)|(86))?(1[3-9])\d{9}$)|(^(0\d{2,3})-?(\d{7,8})$)/,
|
|
|
+ message: "请输入正确的手机号码",
|
|
|
+ trigger: "blur",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ phoneCode:[
|
|
|
+ {required: true, message: "请输入验证码", trigger: "blur"}
|
|
|
+ ],
|
|
|
+ tenantType:[
|
|
|
+ {required: true, message: "请选择类型", trigger: "change"}
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ tenantType:[]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+ computed: {},
|
|
|
+ created() {},
|
|
|
+ mounted() {
|
|
|
+ this.getTenantType()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getTenantType(){
|
|
|
+ var params = {
|
|
|
+ type:'TENANT_TYPE'
|
|
|
+ }
|
|
|
+ this.$api.getSysDictByType(params).then(response => {
|
|
|
+ this.tenantType = response.data.TENANT_TYPE
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //获取验证码
|
|
|
+ sendPhoneCodeByPaidCode(){
|
|
|
+ if(!this.form.paidCode){
|
|
|
+ this.$message.warning('请输入手机号')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(this.phoneCodeText.indexOf('秒')!=-1){
|
|
|
+ return
|
|
|
+ }
|
|
|
+ var params = {
|
|
|
+ paidCode:this.form.paidCode
|
|
|
+ }
|
|
|
+ this.$api.sendPhoneCodeByPaidCode(params).then(response=>{
|
|
|
+ if(response.code == 200){
|
|
|
+ this.$message.success('验证码已发送到付费码预留的手机号')
|
|
|
+ var num = 60
|
|
|
+ this.phoneCodeText = num + '秒'
|
|
|
+ var timer = setInterval(()=>{
|
|
|
+ num -= 1
|
|
|
+ this.phoneCodeText = num + '秒'
|
|
|
+ if(num == 0){
|
|
|
+ this.phoneCodeText = '再次获取验证码'
|
|
|
+ clearInterval(timer)
|
|
|
+ }
|
|
|
+ },1000)
|
|
|
+ }else{
|
|
|
+ this.$message.error(response.message)
|
|
|
+ }
|
|
|
+ }).catch(error=>{
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //获取验证码
|
|
|
+ getPhoneCode(){
|
|
|
+ if(!this.form.personnelPhone){
|
|
|
+ this.$message.warning('请输入手机号')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(this.phoneCodeText1.indexOf('秒')!=-1){
|
|
|
+ return
|
|
|
+ }
|
|
|
+ var params = {
|
|
|
+ phoneNum:this.form.personnelPhone
|
|
|
+ }
|
|
|
+ this.$api.getPhoneCode(params).then(response=>{
|
|
|
+ if(response.code == 200){
|
|
|
+ var num = 60
|
|
|
+ this.phoneCodeText1 = num + '秒'
|
|
|
+ var timer = setInterval(()=>{
|
|
|
+ num -= 1
|
|
|
+ this.phoneCodeText1 = num + '秒'
|
|
|
+ if(num == 0){
|
|
|
+ this.phoneCodeText1 = '再次获取验证码'
|
|
|
+ clearInterval(timer)
|
|
|
+ }
|
|
|
+ },1000)
|
|
|
+ }else{
|
|
|
+ this.$message.error(response.message)
|
|
|
+ }
|
|
|
+ }).catch(error=>{
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //检验验证码以及返回信息
|
|
|
+ verification(){
|
|
|
+ if(!this.form.paidCode){
|
|
|
+ this.$message.warning('请输入付费码')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(!this.form.phoneCode1){
|
|
|
+ this.$message.warning('请输入验证')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ var params = {
|
|
|
+ paidCode:this.form.paidCode,
|
|
|
+ phoneCode:this.form.phoneCode1
|
|
|
+ }
|
|
|
+ this.$api.checkPhoneCodeByPaidCode(params).then(response=>{
|
|
|
+ if(response.code == 200 && response.data.token){
|
|
|
+ this.$message.success('检验通过')
|
|
|
+ var form = {
|
|
|
+ ...response.data,
|
|
|
+ ...this.form
|
|
|
+ }
|
|
|
+ this.form = form
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //提交信息
|
|
|
+ submit(){
|
|
|
+ if(!this.form.token){
|
|
|
+ this.$message.warning('请先校验付费码')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.$refs.ruleForm.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ var api = 'companySignUp'
|
|
|
+ this.btnLoading = true
|
|
|
+ this.$api[api](this.form).then(response=>{
|
|
|
+ if(response.code == 200){
|
|
|
+ this.btnLoading = false
|
|
|
+ // this.$cookie.set('token',response.data.token)
|
|
|
+ Storage.setStr('username', this.form.personnelUserName)
|
|
|
+ Storage.setStr('password', this.form.personnelPassword)
|
|
|
+ Storage.setStr('phoneNum', this.form.personnelPhone)
|
|
|
+ this.$message.success('注册成功')
|
|
|
+ this.$router.replace(
|
|
|
+ {
|
|
|
+ path:'/administrator/login',
|
|
|
+ }
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }).catch(error=>{
|
|
|
+ this.btnLoading = false
|
|
|
+ })
|
|
|
+
|
|
|
+ }else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+ .register{
|
|
|
+ .content{
|
|
|
+ .el-form-item{
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input__inner{
|
|
|
+ // border-radius: 8px;
|
|
|
+ height: 35px;
|
|
|
+ border: 1px solid var(--color) ;
|
|
|
+ box-shadow: 2px 2px 2px 0 rgba($color: #494a9c, $alpha: 0.5);
|
|
|
+ }
|
|
|
+ .el-input-group__append{
|
|
|
+ border: 1px solid var(--color) ;
|
|
|
+ border-left: 0;
|
|
|
+ box-shadow: 2px 2px 2px 0 rgba($color: #494a9c, $alpha: 0.5);
|
|
|
+ background-color: var(--color);
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+ .el-input__prefix{
|
|
|
+ line-height: 35px !important;
|
|
|
+ }
|
|
|
+ .is-error{
|
|
|
+ margin-bottom: 20px;
|
|
|
+ .el-input__inner{
|
|
|
+ border: #F56C6C ;
|
|
|
+ box-shadow: 2px 2px 2px 0 rgba($color: #F56C6C, $alpha: 0.5);
|
|
|
+ }
|
|
|
+ .el-input-group__append{
|
|
|
+ border: #F56C6C ;
|
|
|
+ box-shadow: 2px 2px 2px 0 rgba($color: #F56C6C, $alpha: 0.5);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content_btn{
|
|
|
+ .el-button{
|
|
|
+ width: 100%;
|
|
|
+ background-color: var(--color);
|
|
|
+ border-color: var(--color);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .register{
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ position: relative;
|
|
|
+ background-attachment: fixed;
|
|
|
+ }
|
|
|
+ .form_item_title{
|
|
|
+ padding: 5px 0;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .verification{
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ padding: 5px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .content{
|
|
|
+ width: 1000px;
|
|
|
+ height: fit-content;
|
|
|
+ background: rgba($color: white, $alpha: 0.6);
|
|
|
+ position: absolute;
|
|
|
+ inset: 0;
|
|
|
+ margin: auto;
|
|
|
+ z-index: 999;
|
|
|
+ padding: 20px;
|
|
|
+ .img{
|
|
|
+ height: 50px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .body{
|
|
|
+ width:750px;
|
|
|
+ padding: 0px 0 35px 0;
|
|
|
+ margin: auto;
|
|
|
+ .title{
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28px;
|
|
|
+ // color: var(--color);
|
|
|
+ color: black;
|
|
|
+ font-weight: bold;
|
|
|
+ &>div{
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .input{
|
|
|
+ margin:20px 0;
|
|
|
+ &>div{
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .forget{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ // text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ .forget_btn{
|
|
|
+ color: var(--color);
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn{
|
|
|
+ margin-top:20px;
|
|
|
+ }
|
|
|
+ .copyright{
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ left: 0;
|
|
|
+ bottom: 35px;
|
|
|
+ margin: auto;
|
|
|
+ text-align: center;
|
|
|
+ color: black;
|
|
|
+ z-index: 9999;
|
|
|
+ }
|
|
|
+ </style>
|