<template>
|
<div class="login_container">
|
<div class="login_box">
|
<!--头像区域-->
|
<div class="avatar_box">
|
<img src="../../assets/emi.png">
|
</div>
|
<el-form ref="registerRef" :model="registerForm" label-width="80px" :rules="registerRules"
|
class="login_form">
|
<el-form-item :label="$t('langUsernameLabel')" prop="username">
|
<el-input v-model="registerForm.username" :placeholder="$t('langUsernamePlaceholder')"></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('langPasswordLabel')" prop="password1">
|
<el-input v-model="registerForm.password1" :placeholder="$t('langPasswordPlaceholder')" type="password"></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('langConfirmPasswordLabel')" prop="password">
|
<el-input v-model="registerForm.password" :placeholder="$t('langConfirmPasswordPlaceholder')" type="password"></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('langEmailLabel')" prop="email">
|
<el-input v-model="registerForm.email" :placeholder="$t('langEmailPlaceholder')" type="text"></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('langQQLabel')" prop="qq">
|
<el-input v-model="registerForm.qq" :placeholder="$t('langQQPlaceholder')" type="text"></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('langPhoneNumberLabel')" prop="phone">
|
<el-input v-model="registerForm.phone" :placeholder="$t('langPhoneNumberPlaceholder')" type="text"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="register">{{$t('langRegisterButton')}}</el-button>
|
<el-button @click="reset">{{$t('langResetButton')}}</el-button>
|
<el-button @click="toLogin">{{$t('langCancelButton')}}</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {register} from '../../api/user'
|
import LanguageMixin from '../../lang/LanguageMixin'
|
|
export default {
|
name: 'Register',
|
mixins: [LanguageMixin],
|
data() {
|
// 自定义校验规则
|
const validatePassword = (rule, value, callback) => {
|
if (this.registerForm.password1 !== this.registerForm.password) {
|
callback(new Error("两次输入密码不一致!"));
|
} else {
|
callback();
|
}
|
};
|
return {
|
registerForm: {},
|
registerRules: {
|
username: [
|
{required: true, message: this.$t('usernameRequired'), trigger: 'blur'},
|
{min: 5, max: 15, message: this.$t('usernameLength'), trigger: 'blur'}
|
],
|
password1: [
|
{required: true, message: this.$t('passwordRequired'), trigger: 'blur'},
|
{min: 5, max: 15, message: this.$t('passwordLength'), trigger: 'blur'},
|
{validator: validatePassword, trigger: "blur"}
|
],
|
password: [
|
{required: true, message: this.$t('passwordRequired'), trigger: 'blur'},
|
{min: 5, max: 15, message: this.$t('passwordLength'), trigger: 'blur'},
|
{validator: validatePassword, trigger: "blur"}
|
],
|
email: [
|
{required: false, message: this.$t('langEmailPlaceholder'), trigger: 'blur'},
|
{type: 'email', message: this.$t('langEmailPlaceholder'), trigger: 'blur'}
|
]
|
}
|
}
|
},
|
methods: {
|
register() {
|
this.$refs.registerRef.validate(async valid => {
|
if (!valid) return;
|
register(this.registerForm).then(() => {
|
this.$router.push('/login')
|
this.$message.success('注册成功');
|
});
|
})
|
},
|
reset() {
|
this.refs['registerRef'].resetFields();
|
},
|
toLogin() {
|
this.router.push('/login')
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
.login_container {
|
background-color: #2b4b6b;
|
height: 100%;
|
}
|
|
.login_box {
|
width: 450px;
|
height: 550px;
|
background-color: #fff;
|
border-radius: 3px;
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
|
.avatar_box {
|
height: 130px;
|
width: 130px;
|
border: 1px solid #eee;
|
border-radius: 50%;
|
padding: 10px;
|
box-shadow: 0 0 10px #ddd;
|
position: absolute;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
background-color: #fff;
|
|
img {
|
width: 100%;
|
height: 100%;
|
border-radius: 50%;
|
background-color: #eee;
|
}
|
}
|
}
|
|
.btns {
|
display: flex;
|
justify-content: flex-end;
|
}
|
|
.login_form {
|
position: absolute;
|
bottom: 0;
|
width: 100%;
|
padding: 0 20px;
|
box-sizing: border-box;
|
}
|
</style>
|
