151 lines
4.1 KiB
Vue
151 lines
4.1 KiB
Vue
<template>
|
|
<div id="backgroud">
|
|
<div class="register-head" style="padding-top: 20px"></div>
|
|
<div class="model">
|
|
<div class="location-title"><h1>注册</h1></div>
|
|
|
|
<el-form ref="ruleForm" :model="ruleForm" status-icon :rules="rules" label-width="100px" class="demo-ruleForm">
|
|
<el-form-item label="用户名" prop="username">
|
|
<el-input v-model.trim="ruleForm.username" type="text" placeholder="用户名" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="密码" prop="password">
|
|
<el-input v-model="ruleForm.password" type="password" placeholder="密码" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="确认密码" prop="checkPass">
|
|
<el-input v-model="ruleForm.checkPass" type="password" placeholder="确认密码" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="手机号" prop="mobile">
|
|
<el-input v-model.trim="ruleForm.mobile" placeholder="手机号" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="邮箱" prop="email">
|
|
<el-input v-model.trim="ruleForm.email" type="text" placeholder="邮箱" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
<el-form-item class="register-actions">
|
|
<el-button class="enter-btn" type="primary" :disabled="!select" @click="submitForm('ruleForm')">
|
|
立即注册
|
|
</el-button>
|
|
<el-button class="login-link-btn" type="text" @click="goLogin">去登录</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { Register } from '@/api/Userapi'
|
|
|
|
export default {
|
|
name: 'Register',
|
|
data() {
|
|
const validatePass = (rule, value, callback) => {
|
|
if (value === '') {
|
|
callback(new Error('请输入密码'))
|
|
return
|
|
}
|
|
if (this.ruleForm.password !== '') {
|
|
this.$refs.ruleForm.validateField('checkPass')
|
|
}
|
|
callback()
|
|
}
|
|
const validatePass2 = (rule, value, callback) => {
|
|
if (value === '') {
|
|
callback(new Error('请再次输入密码'))
|
|
} else if (value !== this.ruleForm.password) {
|
|
callback(new Error('两次输入密码不一致!'))
|
|
} else {
|
|
callback()
|
|
}
|
|
}
|
|
const validateUsername = (rule, value, callback) => {
|
|
if (value === '') {
|
|
callback(new Error('请输入用户名'))
|
|
return
|
|
}
|
|
callback()
|
|
}
|
|
|
|
return {
|
|
select: true,
|
|
ruleForm: {
|
|
username: '',
|
|
password: '',
|
|
checkPass: '',
|
|
mobile: '',
|
|
email: ''
|
|
},
|
|
rules: {
|
|
username: [{ required: true, validator: validateUsername, trigger: 'blur' }],
|
|
password: [{ required: true, validator: validatePass, trigger: 'blur' }],
|
|
checkPass: [{ required: true, validator: validatePass2, trigger: 'blur' }]
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
open(message) {
|
|
this.$alert(message, '提示', {
|
|
confirmButtonText: '确定'
|
|
})
|
|
},
|
|
handleRegister() {
|
|
Register({
|
|
username: this.ruleForm.username,
|
|
password: this.ruleForm.password,
|
|
mobile: this.ruleForm.mobile,
|
|
email: this.ruleForm.email,
|
|
createdBy: 1
|
|
}).then(data => {
|
|
if (data && data.id) {
|
|
this.open('注册成功')
|
|
this.$router.push({ name: 'login' })
|
|
} else {
|
|
this.open(data.message || '注册失败')
|
|
}
|
|
})
|
|
},
|
|
submitForm(formName) {
|
|
this.$refs[formName].validate(valid => {
|
|
if (valid) {
|
|
this.handleRegister()
|
|
}
|
|
})
|
|
},
|
|
goLogin() {
|
|
this.$router.push({ name: 'login' })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@import "../../assets/css/Form.css";
|
|
|
|
.location-title {
|
|
text-align: center;
|
|
}
|
|
|
|
.register-head {
|
|
position: absolute;
|
|
}
|
|
|
|
.el-input {
|
|
float: left;
|
|
width: 80%;
|
|
}
|
|
|
|
.register-actions .el-form-item__content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.login-link-wrap {
|
|
width: 100%;
|
|
margin-top: 8px;
|
|
text-align: right;
|
|
}
|
|
|
|
.login-link-btn {
|
|
padding-right: 0;
|
|
}
|
|
</style>
|