<template>
|
<div class="register-container">
|
<div class="register-box">
|
<!-- 左侧图片 -->
|
<div class="left-img"></div>
|
<!-- 右侧登录 -->
|
<el-form
|
ref="loginRef"
|
:model="registerForm"
|
:rules="loginRules"
|
class="register-form"
|
>
|
<div class="title">
|
欢迎注册<span style="color: #1f63ff">数智管码照</span>
|
</div>
|
<el-form-item prop="userName" style="margin-top: 0.19rem">
|
<el-input
|
v-model="registerForm.userName"
|
style="height: 3.13rem"
|
type="text"
|
size="large"
|
auto-complete="off"
|
:readonly="readonly"
|
@blur="readonly = true"
|
@click="readonly = false"
|
placeholder="请输入您的登录账号（必填）"
|
autocomplete="new-password"
|
/>
|
</el-form-item>
|
<el-form-item prop="companyName" style="margin-top: 1.63rem">
|
<el-input
|
v-model="registerForm.companyName"
|
style="height: 3.13rem"
|
type="text"
|
size="large"
|
auto-complete="off"
|
:readonly="readonly"
|
@blur="readonly = true"
|
@click="readonly = false"
|
placeholder="请输入注册公司名（必填）"
|
/>
|
</el-form-item>
|
<el-form-item prop="companyName" style="margin-top: 1.63rem">
|
<el-input
|
v-model="registerForm.companyAbbreviation"
|
style="height: 3.13rem"
|
type="text"
|
size="large"
|
auto-complete="off"
|
:readonly="readonly"
|
@blur="readonly = true"
|
@click="readonly = false"
|
placeholder="请输入注册公司名简称（必填）"
|
/>
|
</el-form-item>
|
<el-form-item prop="companyContacts" style="margin-top: 1.31rem">
|
<el-input
|
v-model="registerForm.companyContacts"
|
style="height: 3.13rem"
|
type="text"
|
size="large"
|
auto-complete="off"
|
:readonly="readonly"
|
@blur="readonly = true"
|
@click="readonly = false"
|
placeholder="联系人（必填）"
|
/>
|
</el-form-item>
|
<el-form-item prop="companyPhone" style="margin-top: 1.5rem">
|
<el-input
|
v-model="registerForm.companyPhone"
|
style="height: 3.13rem"
|
type="text"
|
size="large"
|
auto-complete="off"
|
:readonly="readonly"
|
@blur="readonly = true"
|
@click="readonly = false"
|
placeholder="联系电话（必填）"
|
/>
|
</el-form-item>
|
<el-form-item prop="companyEmail" style="margin-top: 1.5rem">
|
<el-input
|
v-model="registerForm.companyEmail"
|
style="height: 3.13rem"
|
type="text"
|
size="large"
|
auto-complete="off"
|
:readonly="readonly"
|
@blur="readonly = true"
|
@click="readonly = false"
|
placeholder="邮箱（必填）"
|
/>
|
</el-form-item>
|
<el-form-item prop="password" style="margin-top: 1.31rem">
|
<el-input
|
show-password
|
v-model="registerForm.password"
|
style="height: 3.13rem"
|
type="password"
|
size="large"
|
auto-complete="off"
|
:readonly="readonly"
|
@blur="readonly = true"
|
@click="readonly = false"
|
placeholder="请设置登录密码"
|
/>
|
</el-form-item>
|
<el-form-item prop="confirmPassword" style="margin-top: 1.5rem">
|
<el-input
|
show-password
|
v-model="registerForm.confirmPassword"
|
style="height: 3.13rem"
|
type="password"
|
size="large"
|
auto-complete="off"
|
:readonly="readonly"
|
@blur="readonly = true"
|
@click="readonly = false"
|
placeholder="请再次输入登录密码"
|
>
|
</el-input>
|
</el-form-item>
|
<el-form-item style="margin-top: 1.5rem">
|
<el-input
|
:disabled="route.query.inviterCode"
|
v-model="registerForm.inviterCode"
|
style="height: 3.13rem"
|
type="text"
|
size="large"
|
auto-complete="off"
|
:readonly="readonly"
|
@blur="readonly = true"
|
@click="readonly = false"
|
placeholder="邀请码（选填）"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
:loading="loading"
|
color="#1F63FF"
|
size="large"
|
style="width: 100%; height: 3.13rem"
|
@click.prevent="handleLogin"
|
>
|
<span v-if="!loading">立即提交</span>
|
<span v-else>提 交 中...</span>
|
</el-button>
|
<div
|
style="
|
margin-top: 2.5rem;
|
display: flex;
|
justify-content: center;
|
width: 100%;
|
"
|
>
|
<router-link
|
style="
|
height: 1.06rem;
|
line-height: 1.06rem;
|
color: rgb(16, 16, 16);
|
font-size: 0.88rem;
|
text-align: left;
|
text-decoration: none;
|
"
|
:to="'/login'"
|
>
|
已有帐号？去<span style="color: #1f63ff">登录</span>
|
</router-link>
|
</div>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { register } from "@/api/login";
|
import { useRoute, useRouter } from "vue-router";
|
import { getCurrentInstance, ref } from "vue";
|
|
const route = useRoute();
|
const router = useRouter();
|
const { proxy } = getCurrentInstance();
|
|
const loading = ref(false); // 注册加载状态
|
|
const readonly = ref(true);
|
const registerForm = ref({
|
userName: "",
|
password: "",
|
companyName: "",
|
companyAbbreviation: "",
|
companyContacts: "",
|
companyPhone: "",
|
companyEmail: "",
|
inviterCode: route.query.inviterCode,
|
tenantId: route.query.tenantId,
|
});
|
|
const loginRules = {
|
companyContacts: [{ required: true, trigger: "blur", message: "请输入姓名" }],
|
companyName: [{ required: true, trigger: "blur", message: "请输入公司名称" }],
|
userName: [
|
{ required: true, trigger: "blur", message: "请输入您的登录账号（必填）" },
|
],
|
password: [
|
{ required: true, trigger: "blur", message: "请输入您的密码" },
|
{ min: 6, max: 20, message: "密码长度在 6 到 20 个字符", trigger: "blur" },
|
{
|
pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,
|
message: "密码必须包含数字和字母",
|
trigger: "blur",
|
},
|
],
|
companyPhone: [
|
{ required: true, trigger: "blur", message: "请输入手机号" },
|
{
|
pattern: /^1[3456789]\d{9}$/,
|
message: "请输入正确的手机号",
|
trigger: ["blur", "change"],
|
},
|
],
|
companyEmail: [
|
{ required: true, trigger: "blur", message: "请输入邮箱" },
|
{
|
pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
|
message: "请输入正确的邮箱",
|
trigger: ["blur", "change"],
|
},
|
],
|
confirmPassword: [
|
{ required: true, trigger: "blur", message: "请再次输入密码" },
|
{ min: 6, max: 20, message: "密码长度在 6 到 20 个字符", trigger: "blur" },
|
{
|
pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,
|
message: "密码必须包含数字和字母",
|
trigger: "blur",
|
},
|
],
|
};
|
|
function handleLogin() {
|
proxy.$refs.loginRef.validate((valid) => {
|
if (valid) {
|
loading.value = true;
|
register(registerForm.value)
|
.then((res) => {
|
proxy.$message.success(res.message);
|
router.push({ path: "/login" });
|
loading.value = false;
|
})
|
.catch((err) => {
|
loading.value = false;
|
return;
|
});
|
|
setTimeout(() => {
|
loading.value = false;
|
}, 5000);
|
}
|
});
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.register-container {
|
width: 100%;
|
height: 100%;
|
min-width: 71.5rem;
|
display: flex;
|
overflow: hidden;
|
}
|
|
.register-box {
|
width: 71.5rem;
|
height: 54.25rem;
|
line-height: 1.25rem;
|
border-radius: 0.56rem;
|
display: flex;
|
justify-content: space-between;
|
background-color: rgba(255, 255, 255, 1);
|
}
|
|
.left-img {
|
position: relative;
|
height: 100%;
|
width: 29.56rem;
|
height: 100%;
|
}
|
|
.register-form {
|
flex: 1;
|
margin-left: 10.88rem;
|
margin-top: 1.06rem;
|
overflow: hidden;
|
padding-right: 6.06rem;
|
}
|
|
.title {
|
line-height: 3.44rem;
|
color: rgb(16, 16, 16);
|
font-size: 1.5rem;
|
font-weight: 600;
|
padding-left: 0.32rem;
|
}
|
</style>
|
