|
|
|
|
@ -0,0 +1,130 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div id="building">
|
|
|
|
|
<el-card style="background-color: rgba(255,255,255,85%)" class="register_container" shadow="always">
|
|
|
|
|
<el-form label-width="80px" ref="form" :model="form" :rules="rules">
|
|
|
|
|
<img id="im" src="@/assets/logo1.png" alt="好花">
|
|
|
|
|
<h3 class="login_title">好花网用户注册</h3>
|
|
|
|
|
<el-form-item label="用户名" prop="user_name" style="margin-bottom: 35px;margin-top: 60px">
|
|
|
|
|
<el-input v-model="form.user_name" placeholder="请输入账号"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="密码" prop="user_pwd">
|
|
|
|
|
<el-input type="password" show-password v-model="form.user_pwd" placeholder="密码长度在6到12个字符"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="确认密码" prop="user_pwd2">
|
|
|
|
|
<el-input type="password" show-password v-model="form.user_pwd2" placeholder="请确认密码"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button @click="submit" id="button" type="danger">立即注册</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-link :underline="false" @click="navTo('/login')" style="font-weight: normal;margin-top: -15px">
|
|
|
|
|
<i class="el-icon-arrow-left"></i>已有账号？前往登录
|
|
|
|
|
</el-link>
|
|
|
|
|
</el-form>
|
|
|
|
|
</el-card>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
data(){
|
|
|
|
|
//两次密码一致校验
|
|
|
|
|
const _this = this;
|
|
|
|
|
const equalToPassword = (rule, value, callback) => {
|
|
|
|
|
if (_this.form.user_pwd !== value) {
|
|
|
|
|
callback(new Error("两次输入的密码不一致"));
|
|
|
|
|
} else {
|
|
|
|
|
callback();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return {
|
|
|
|
|
form:{
|
|
|
|
|
user_name:'',
|
|
|
|
|
user_pwd:'',
|
|
|
|
|
user_pwd2:''
|
|
|
|
|
},
|
|
|
|
|
rules:{
|
|
|
|
|
user_name:[
|
|
|
|
|
{ required:true, trigger:'blur', message:'请输入用户名'}
|
|
|
|
|
],
|
|
|
|
|
user_pwd:[
|
|
|
|
|
{ required:true, trigger:'blur', message:'请输入密码'},
|
|
|
|
|
{ min: 6, max: 12, message: "长度在 6 到 12个字符", trigger: "blur" }
|
|
|
|
|
],
|
|
|
|
|
user_pwd2:[
|
|
|
|
|
{ required:true, trigger:'blur', message:'请确认密码'},
|
|
|
|
|
{ validator: equalToPassword, trigger: "blur" }
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods:{
|
|
|
|
|
//注册
|
|
|
|
|
submit(){
|
|
|
|
|
const _this=this
|
|
|
|
|
this.$refs.form.validate( (valid) => {
|
|
|
|
|
if(valid){
|
|
|
|
|
try {
|
|
|
|
|
axios({
|
|
|
|
|
method: 'post',
|
|
|
|
|
url: 'http://localhost:8181/user/register',
|
|
|
|
|
data:{
|
|
|
|
|
user_name:_this.form.user_name,
|
|
|
|
|
user_pwd:_this.form.user_pwd
|
|
|
|
|
}
|
|
|
|
|
}).then(function (response){
|
|
|
|
|
if (response.data.code===200) {
|
|
|
|
|
//注册成功，跳转到首页
|
|
|
|
|
_this.$router.push('/login')
|
|
|
|
|
_this.$message({message: response.data.msg, type: 'success'});
|
|
|
|
|
}
|
|
|
|
|
if (response.data.code===403) {
|
|
|
|
|
_this.$message.error(response.data.msg);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}catch (error)
|
|
|
|
|
{
|
|
|
|
|
_this.$message.warning('页面加载出错,请重试!')
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
navTo(url){
|
|
|
|
|
location.href = url
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<style>
|
|
|
|
|
#building{
|
|
|
|
|
background:url("@/assets/background.jpg");
|
|
|
|
|
width:100%;
|
|
|
|
|
height:100%;
|
|
|
|
|
position:fixed;
|
|
|
|
|
background-size:100% 100%;
|
|
|
|
|
}
|
|
|
|
|
.register_container{
|
|
|
|
|
width: 480px;
|
|
|
|
|
height: 450px;
|
|
|
|
|
border: 1px solid #eaeaea;
|
|
|
|
|
margin: 250px auto;
|
|
|
|
|
padding: 35px 50px 15px 35px;
|
|
|
|
|
}
|
|
|
|
|
#button{
|
|
|
|
|
margin-right:70px;
|
|
|
|
|
margin-top: 28px ;
|
|
|
|
|
width: 140px;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
font-weight: bolder;
|
|
|
|
|
}
|
|
|
|
|
.login_title{
|
|
|
|
|
font-size:26px;
|
|
|
|
|
color:#d66760;
|
|
|
|
|
margin-left: 30px;
|
|
|
|
|
margin-top: -64px;
|
|
|
|
|
}
|
|
|
|
|
#im{
|
|
|
|
|
height: 85px;
|
|
|
|
|
width: 70px;
|
|
|
|
|
margin-left: -300px;
|
|
|
|
|
margin-top: -20px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
