!160 refactor: 补充登录页与注册页的国际化内容并添加切换语言按钮
Merge pull request !160 from QianRj/补充登录页与注册页国际化内容
This commit is contained in:
疯狂的狮子Li
Gitee
commit
98a8e96feb
@ -4,11 +4,67 @@
|
||||
"document": "Document"
|
||||
},
|
||||
"login": {
|
||||
"selectPlaceholder": "Please select/enter a company name",
|
||||
"username": "Username",
|
||||
"password": "Password",
|
||||
"login": "Login",
|
||||
"logging": "Logging...",
|
||||
"code": "Verification Code",
|
||||
"copyright": ""
|
||||
"rememberPassword": "Remember me",
|
||||
"switchRegisterPage": "Sign up now",
|
||||
"rule": {
|
||||
"tenantId": {
|
||||
"required": "Please enter your tenant id"
|
||||
},
|
||||
"username": {
|
||||
"required": "Please enter your account"
|
||||
},
|
||||
"password": {
|
||||
"required": "Please enter your password"
|
||||
},
|
||||
"code": {
|
||||
"required": "Please enter a verification code"
|
||||
}
|
||||
},
|
||||
"social": {
|
||||
"wechat": "Wechat Login",
|
||||
"maxkey": "MaxKey Login",
|
||||
"topiam": "TopIam Login",
|
||||
"gitee": "Gitee Login",
|
||||
"github": "Github Login"
|
||||
}
|
||||
},
|
||||
"register": {
|
||||
"selectPlaceholder": "Please select/enter a company name",
|
||||
"username": "Username",
|
||||
"password": "Password",
|
||||
"confirmPassword": "Confirm Password",
|
||||
"register": "Register",
|
||||
"registering": "Registering...",
|
||||
"registerSuccess": "Congratulations, your {username} account has been registered!",
|
||||
"code": "Verification Code",
|
||||
"switchLoginPage": "Log in with an existing account",
|
||||
"rule": {
|
||||
"tenantId": {
|
||||
"required": "Please enter your tenant id"
|
||||
},
|
||||
"username": {
|
||||
"required": "Please enter your account",
|
||||
"length": "The length of the user account must be between {min} and {max}"
|
||||
},
|
||||
"password": {
|
||||
"required": "Please enter your password",
|
||||
"length": "The user password must be between {min} and {max} in length",
|
||||
"pattern": "Can't contain illegal characters: {strings}"
|
||||
},
|
||||
"code": {
|
||||
"required": "Please enter a verification code"
|
||||
},
|
||||
"confirmPassword": {
|
||||
"required": "Please enter your password again",
|
||||
"equalToPassword": "The password entered twice is inconsistent"
|
||||
}
|
||||
}
|
||||
},
|
||||
"navbar": {
|
||||
"full": "Full Screen",
|
||||
|
||||
@ -6,11 +6,68 @@ export default {
|
||||
},
|
||||
// 登录页面国际化
|
||||
login: {
|
||||
selectPlaceholder: 'Please select/enter a company name',
|
||||
username: 'Username',
|
||||
password: 'Password',
|
||||
login: 'Login',
|
||||
logging: 'Logging...',
|
||||
code: 'Verification Code',
|
||||
copyright: ''
|
||||
rememberPassword: 'Remember me',
|
||||
switchRegisterPage: 'Sign up now',
|
||||
rule: {
|
||||
tenantId: {
|
||||
required: 'Please enter your tenant id'
|
||||
},
|
||||
username: {
|
||||
required: 'Please enter your account'
|
||||
},
|
||||
password: {
|
||||
required: 'Please enter your password'
|
||||
},
|
||||
code: {
|
||||
required: 'Please enter a verification code'
|
||||
}
|
||||
},
|
||||
social: {
|
||||
wechat: 'Wechat Login',
|
||||
maxkey: 'MaxKey Login',
|
||||
topiam: 'TopIam Login',
|
||||
gitee: 'Gitee Login',
|
||||
github: 'Github Login'
|
||||
}
|
||||
},
|
||||
// 注册页面国际化
|
||||
register: {
|
||||
selectPlaceholder: 'Please select/enter a company name',
|
||||
username: 'Username',
|
||||
password: 'Password',
|
||||
confirmPassword: 'Confirm Password',
|
||||
register: 'Register',
|
||||
registering: 'Registering...',
|
||||
registerSuccess: 'Congratulations, your {username} account has been registered!',
|
||||
code: 'Verification Code',
|
||||
switchLoginPage: 'Log in with an existing account',
|
||||
rule: {
|
||||
tenantId: {
|
||||
required: 'Please enter your tenant id'
|
||||
},
|
||||
username: {
|
||||
required: 'Please enter your account',
|
||||
length: 'The length of the user account must be between {min} and {max}'
|
||||
},
|
||||
password: {
|
||||
required: 'Please enter your password',
|
||||
length: 'The user password must be between {min} and {max} in length',
|
||||
pattern: "Can't contain illegal characters: {strings}"
|
||||
},
|
||||
code: {
|
||||
required: 'Please enter a verification code'
|
||||
},
|
||||
confirmPassword: {
|
||||
required: 'Please enter your password again',
|
||||
equalToPassword: 'The password entered twice is inconsistent'
|
||||
}
|
||||
}
|
||||
},
|
||||
// 导航栏国际化
|
||||
navbar: {
|
||||
|
||||
@ -4,11 +4,67 @@
|
||||
"document": "项目文档"
|
||||
},
|
||||
"login": {
|
||||
"selectPlaceholder": "请选择/输入公司名称",
|
||||
"username": "用户名",
|
||||
"password": "密码",
|
||||
"login": "登 录",
|
||||
"code": "请输入验证码",
|
||||
"copyright": ""
|
||||
"logging": "登 录 中...",
|
||||
"code": "验证码",
|
||||
"rememberPassword": "记住我",
|
||||
"switchRegisterPage": "立即注册",
|
||||
"rule": {
|
||||
"tenantId": {
|
||||
"required": "请输入您的租户编号"
|
||||
},
|
||||
"username": {
|
||||
"required": "请输入您的账号"
|
||||
},
|
||||
"password": {
|
||||
"required": "请输入您的密码"
|
||||
},
|
||||
"code": {
|
||||
"required": "请输入验证码"
|
||||
}
|
||||
},
|
||||
"social": {
|
||||
"wechat": "微信登录",
|
||||
"maxkey": "MaxKey登录",
|
||||
"topiam": "TopIam登录",
|
||||
"gitee": "Gitee登录",
|
||||
"github": "Github登录"
|
||||
}
|
||||
},
|
||||
"register": {
|
||||
"selectPlaceholder": "请选择/输入公司名称",
|
||||
"username": "用户名",
|
||||
"password": "密码",
|
||||
"confirmPassword": "确认密码",
|
||||
"register": "注 册",
|
||||
"registering": "注 册 中...",
|
||||
"registerSuccess": "恭喜你，您的账号 {username} 注册成功！",
|
||||
"code": "验证码",
|
||||
"switchLoginPage": "使用已有账户登录",
|
||||
"rule": {
|
||||
"tenantId": {
|
||||
"required": "请输入您的租户编号"
|
||||
},
|
||||
"username": {
|
||||
"required": "请输入您的账号",
|
||||
"length": "用户账号长度必须介于 {min} 和 {max} 之间"
|
||||
},
|
||||
"password": {
|
||||
"required": "请输入您的密码",
|
||||
"length": "用户密码长度必须介于 {min} 和 {max} 之间",
|
||||
"pattern": "不能包含非法字符：{strings}"
|
||||
},
|
||||
"code": {
|
||||
"required": "请输入验证码"
|
||||
},
|
||||
"confirmPassword": {
|
||||
"required": "请再次输入您的密码",
|
||||
"equalToPassword": "两次输入的密码不一致"
|
||||
}
|
||||
}
|
||||
},
|
||||
"navbar": {
|
||||
"full": "全屏",
|
||||
|
||||
@ -6,12 +6,70 @@ export default {
|
||||
},
|
||||
// 登录页面国际化
|
||||
login: {
|
||||
selectPlaceholder: '请选择/输入公司名称',
|
||||
username: '用户名',
|
||||
password: '密码',
|
||||
login: '登 录',
|
||||
code: '请输入验证码',
|
||||
copyright: ''
|
||||
logging: '登 录 中...',
|
||||
code: '验证码',
|
||||
rememberPassword: '记住我',
|
||||
switchRegisterPage: '立即注册',
|
||||
rule: {
|
||||
tenantId: {
|
||||
required: '请输入您的租户编号'
|
||||
},
|
||||
username: {
|
||||
required: '请输入您的账号'
|
||||
},
|
||||
password: {
|
||||
required: '请输入您的密码'
|
||||
},
|
||||
code: {
|
||||
required: '请输入验证码'
|
||||
}
|
||||
},
|
||||
social: {
|
||||
wechat: '微信登录',
|
||||
maxkey: 'MaxKey登录',
|
||||
topiam: 'TopIam登录',
|
||||
gitee: 'Gitee登录',
|
||||
github: 'Github登录'
|
||||
}
|
||||
},
|
||||
// 注册页面国际化
|
||||
register: {
|
||||
selectPlaceholder: '请选择/输入公司名称',
|
||||
username: '用户名',
|
||||
password: '密码',
|
||||
confirmPassword: '确认密码',
|
||||
register: '注 册',
|
||||
registering: '注 册 中...',
|
||||
registerSuccess: '恭喜你，您的账号 {username} 注册成功！',
|
||||
code: '验证码',
|
||||
switchLoginPage: '使用已有账户登录',
|
||||
rule: {
|
||||
tenantId: {
|
||||
required: '请输入您的租户编号'
|
||||
},
|
||||
username: {
|
||||
required: '请输入您的账号',
|
||||
length: '用户账号长度必须介于 {min} 和 {max} 之间'
|
||||
},
|
||||
password: {
|
||||
required: '请输入您的密码',
|
||||
length: '用户密码长度必须介于 {min} 和 {max} 之间',
|
||||
pattern: '不能包含非法字符：{strings}'
|
||||
},
|
||||
code: {
|
||||
required: '请输入验证码'
|
||||
},
|
||||
confirmPassword: {
|
||||
required: '请再次输入您的密码',
|
||||
equalToPassword: '两次输入的密码不一致'
|
||||
}
|
||||
}
|
||||
},
|
||||
// 导航栏国际化
|
||||
navbar: {
|
||||
full: '全屏',
|
||||
language: '语言',
|
||||
|
||||
@ -1,56 +1,73 @@
|
||||
<template>
|
||||
<div class="login">
|
||||
<el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
|
||||
<h3 class="title">RuoYi-Vue-Plus多租户管理系统</h3>
|
||||
<div class="title-box">
|
||||
<h3 class="title">RuoYi-Vue-Plus多租户管理系统</h3>
|
||||
<lang-select class="lang-select hover-effect" />
|
||||
</div>
|
||||
<el-form-item v-if="tenantEnabled" prop="tenantId">
|
||||
<el-select v-model="loginForm.tenantId" filterable placeholder="请选择/输入公司名称" style="width: 100%">
|
||||
<el-select v-model="loginForm.tenantId" filterable :placeholder="$t('tenant.selectPlaceholder')" style="width: 100%">
|
||||
<el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName" :value="item.tenantId"></el-option>
|
||||
<template #prefix><svg-icon icon-class="company" class="el-input__icon input-icon" /></template>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="username">
|
||||
<el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" placeholder="账号">
|
||||
<el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" :placeholder="$t('login.username')">
|
||||
<template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input v-model="loginForm.password" type="password" size="large" auto-complete="off" placeholder="密码" @keyup.enter="handleLogin">
|
||||
<el-input
|
||||
v-model="loginForm.password"
|
||||
type="password"
|
||||
size="large"
|
||||
auto-complete="off"
|
||||
:placeholder="$t('login.password')"
|
||||
@keyup.enter="handleLogin"
|
||||
>
|
||||
<template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="captchaEnabled" prop="code">
|
||||
<el-input v-model="loginForm.code" size="large" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter="handleLogin">
|
||||
<el-input
|
||||
v-model="loginForm.code"
|
||||
size="large"
|
||||
auto-complete="off"
|
||||
:placeholder="$t('login.code')"
|
||||
style="width: 63%"
|
||||
@keyup.enter="handleLogin"
|
||||
>
|
||||
<template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
|
||||
</el-input>
|
||||
<div class="login-code">
|
||||
<img :src="codeUrl" class="login-code-img" @click="getCode" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-checkbox v-model="loginForm.rememberMe" style="margin: 0 0 25px 0">记住密码</el-checkbox>
|
||||
<el-checkbox v-model="loginForm.rememberMe" style="margin: 0 0 25px 0">{{ $t('login.rememberPassword') }}</el-checkbox>
|
||||
<el-form-item style="float: right">
|
||||
<el-button circle title="微信登录" @click="doSocialLogin('wechat')">
|
||||
<el-button circle :title="$t('login.social.wechat')" @click="doSocialLogin('wechat')">
|
||||
<svg-icon icon-class="wechat" />
|
||||
</el-button>
|
||||
<el-button circle title="MaxKey登录" @click="doSocialLogin('maxkey')">
|
||||
<el-button circle :title="$t('login.social.maxkey')" @click="doSocialLogin('maxkey')">
|
||||
<svg-icon icon-class="maxkey" />
|
||||
</el-button>
|
||||
<el-button circle title="TopIam登录" @click="doSocialLogin('topiam')">
|
||||
<el-button circle :title="$t('login.social.topiam')" @click="doSocialLogin('topiam')">
|
||||
<svg-icon icon-class="topiam" />
|
||||
</el-button>
|
||||
<el-button circle title="Gitee登录" @click="doSocialLogin('gitee')">
|
||||
<el-button circle :title="$t('login.social.gitee')" @click="doSocialLogin('gitee')">
|
||||
<svg-icon icon-class="gitee" />
|
||||
</el-button>
|
||||
<el-button circle title="Github登录" @click="doSocialLogin('github')">
|
||||
<el-button circle :title="$t('login.social.github')" @click="doSocialLogin('github')">
|
||||
<svg-icon icon-class="github" />
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%">
|
||||
<el-button :loading="loading" size="large" type="primary" style="width: 100%" @click.prevent="handleLogin">
|
||||
<span v-if="!loading">登 录</span>
|
||||
<span v-else>登 录 中...</span>
|
||||
<span v-if="!loading">{{ $t('login.login') }}</span>
|
||||
<span v-else>{{ $t('login.logging') }}</span>
|
||||
</el-button>
|
||||
<div v-if="register" style="float: right">
|
||||
<router-link class="link-type" :to="'/register'">立即注册</router-link>
|
||||
<router-link class="link-type" :to="'/register'">{{ $t('login.switchRegisterPage') }}</router-link>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
@ -68,9 +85,11 @@ import { useUserStore } from '@/store/modules/user';
|
||||
import { LoginData, TenantVO } from '@/api/types';
|
||||
import { to } from 'await-to-js';
|
||||
import { HttpStatus } from '@/enums/RespEnum';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
const userStore = useUserStore();
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
|
||||
const loginForm = ref<LoginData>({
|
||||
tenantId: '000000',
|
||||
@ -82,10 +101,10 @@ const loginForm = ref<LoginData>({
|
||||
} as LoginData);
|
||||
|
||||
const loginRules: ElFormRules = {
|
||||
tenantId: [{ required: true, trigger: 'blur', message: '请输入您的租户编号' }],
|
||||
username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
|
||||
password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],
|
||||
code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
|
||||
tenantId: [{ required: true, trigger: 'blur', message: t('login.rule.tenantId.required') }],
|
||||
username: [{ required: true, trigger: 'blur', message: t('login.rule.username.required') }],
|
||||
password: [{ required: true, trigger: 'blur', message: t('login.rule.password.required') }],
|
||||
code: [{ required: true, trigger: 'change', message: t('login.rule.code.required') }]
|
||||
};
|
||||
|
||||
const codeUrl = ref('');
|
||||
@ -218,10 +237,23 @@ onMounted(() => {
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0px auto 30px auto;
|
||||
text-align: center;
|
||||
color: #707070;
|
||||
.title-box {
|
||||
display: flex;
|
||||
|
||||
.title {
|
||||
margin: 0px auto 30px auto;
|
||||
text-align: center;
|
||||
color: #707070;
|
||||
}
|
||||
|
||||
.lang-select {
|
||||
line-height: 30px;
|
||||
color: #7483a3;
|
||||
|
||||
&.hover-effect {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-form {
|
||||
|
||||
@ -1,20 +1,30 @@
|
||||
<template>
|
||||
<div class="register">
|
||||
<el-form ref="registerRef" :model="registerForm" :rules="registerRules" class="register-form">
|
||||
<h3 class="title">RuoYi-Vue-Plus多租户管理系统</h3>
|
||||
<div class="title-box">
|
||||
<h3 class="title">RuoYi-Vue-Plus多租户管理系统</h3>
|
||||
<lang-select class="lang-select hover-effect" />
|
||||
</div>
|
||||
<el-form-item v-if="tenantEnabled" prop="tenantId">
|
||||
<el-select v-model="registerForm.tenantId" filterable placeholder="请选择/输入公司名称" style="width: 100%">
|
||||
<el-select v-model="registerForm.tenantId" filterable :placeholder="$t('register.selectPlaceholder')" style="width: 100%">
|
||||
<el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName" :value="item.tenantId"> </el-option>
|
||||
<template #prefix><svg-icon icon-class="company" class="el-input__icon input-icon" /></template>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="username">
|
||||
<el-input v-model="registerForm.username" type="text" size="large" auto-complete="off" placeholder="账号">
|
||||
<el-input v-model="registerForm.username" type="text" size="large" auto-complete="off" :placeholder="$t('register.username')">
|
||||
<template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input v-model="registerForm.password" type="password" size="large" auto-complete="off" placeholder="密码" @keyup.enter="handleRegister">
|
||||
<el-input
|
||||
v-model="registerForm.password"
|
||||
type="password"
|
||||
size="large"
|
||||
auto-complete="off"
|
||||
:placeholder="$t('register.password')"
|
||||
@keyup.enter="handleRegister"
|
||||
>
|
||||
<template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
@ -24,14 +34,21 @@
|
||||
type="password"
|
||||
size="large"
|
||||
auto-complete="off"
|
||||
placeholder="确认密码"
|
||||
:placeholder="$t('register.confirmPassword')"
|
||||
@keyup.enter="handleRegister"
|
||||
>
|
||||
<template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="captchaEnabled" prop="code">
|
||||
<el-input v-model="registerForm.code" size="large" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter="handleRegister">
|
||||
<el-input
|
||||
v-model="registerForm.code"
|
||||
size="large"
|
||||
auto-complete="off"
|
||||
:placeholder="$t('register.code')"
|
||||
style="width: 63%"
|
||||
@keyup.enter="handleRegister"
|
||||
>
|
||||
<template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
|
||||
</el-input>
|
||||
<div class="register-code">
|
||||
@ -40,11 +57,11 @@
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%">
|
||||
<el-button :loading="loading" size="large" type="primary" style="width: 100%" @click.prevent="handleRegister">
|
||||
<span v-if="!loading">注 册</span>
|
||||
<span v-else>注 册 中...</span>
|
||||
<span v-if="!loading">{{ $t('register.register') }}</span>
|
||||
<span v-else>{{ $t('register.registering') }}</span>
|
||||
</el-button>
|
||||
<div style="float: right">
|
||||
<router-link class="link-type" :to="'/login'">使用已有账户登录</router-link>
|
||||
<router-link class="link-type" :to="'/login'">{{ $t('register.switchLoginPage') }}</router-link>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
@ -59,9 +76,12 @@
|
||||
import { getCodeImg, register, getTenantList } from '@/api/login';
|
||||
import { RegisterForm, TenantVO } from '@/api/types';
|
||||
import { to } from 'await-to-js';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const registerForm = ref<RegisterForm>({
|
||||
tenantId: '',
|
||||
username: '',
|
||||
@ -77,28 +97,28 @@ const tenantEnabled = ref(true);
|
||||
|
||||
const equalToPassword = (rule: any, value: string, callback: any) => {
|
||||
if (registerForm.value.password !== value) {
|
||||
callback(new Error('两次输入的密码不一致'));
|
||||
callback(new Error(t('register.rule.confirmPassword.equalToPassword')));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
const registerRules: ElFormRules = {
|
||||
tenantId: [{ required: true, trigger: 'blur', message: '请输入您的租户编号' }],
|
||||
tenantId: [{ required: true, trigger: 'blur', message: t('register.rule.tenantId.required') }],
|
||||
username: [
|
||||
{ required: true, trigger: 'blur', message: '请输入您的账号' },
|
||||
{ min: 2, max: 20, message: '用户账号长度必须介于 2 和 20 之间', trigger: 'blur' }
|
||||
{ required: true, trigger: 'blur', message: t('register.rule.username.required') },
|
||||
{ min: 2, max: 20, message: t('register.rule.username.length', { min: 2, max: 20 }), trigger: 'blur' }
|
||||
],
|
||||
password: [
|
||||
{ required: true, trigger: 'blur', message: '请输入您的密码' },
|
||||
{ min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' },
|
||||
{ pattern: /^[^<>"'|\\]+$/, message: '不能包含非法字符：< > " \' \\ |', trigger: 'blur' }
|
||||
{ required: true, trigger: 'blur', message: t('register.rule.password.required') },
|
||||
{ min: 5, max: 20, message: t('register.rule.password.length', { min: 5, max: 20 }), trigger: 'blur' },
|
||||
{ pattern: /^[^<>"'|\\]+$/, message: t('register.rule.password.pattern', { strings: '< > " \' \\ |' }), trigger: 'blur' }
|
||||
],
|
||||
confirmPassword: [
|
||||
{ required: true, trigger: 'blur', message: '请再次输入您的密码' },
|
||||
{ required: true, trigger: 'blur', message: t('register.rule.confirmPassword.required') },
|
||||
{ required: true, validator: equalToPassword, trigger: 'blur' }
|
||||
],
|
||||
code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
|
||||
code: [{ required: true, trigger: 'change', message: t('register.rule.code.required') }]
|
||||
};
|
||||
const codeUrl = ref('');
|
||||
const loading = ref(false);
|
||||
@ -114,7 +134,7 @@ const handleRegister = () => {
|
||||
const [err] = await to(register(registerForm.value));
|
||||
if (!err) {
|
||||
const username = registerForm.value.username;
|
||||
await ElMessageBox.alert("<font color='red'>恭喜你，您的账号 " + username + ' 注册成功！</font>', '系统提示', {
|
||||
await ElMessageBox.alert("<font color='red'>" + t('register.registerSuccess', { username }) + '</font>', '系统提示', {
|
||||
dangerouslyUseHTMLString: true,
|
||||
type: 'success'
|
||||
});
|
||||
@ -166,10 +186,23 @@ onMounted(() => {
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0 auto 30px auto;
|
||||
text-align: center;
|
||||
color: #707070;
|
||||
.title-box {
|
||||
display: flex;
|
||||
|
||||
.title {
|
||||
margin: 0px auto 30px auto;
|
||||
text-align: center;
|
||||
color: #707070;
|
||||
}
|
||||
|
||||
.lang-select {
|
||||
line-height: 30px;
|
||||
color: #7483a3;
|
||||
|
||||
&.hover-effect {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.register-form {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user