<template>
<div class="register-container">
<el-form
ref="registerForm"
:model="registerForm"
label-width="80px"
class="register-form"
:rules="rules"
label-position="left"
>
<div class="title-container">
<h3 class="title">用户注册</h3>
</div>
<el-form-item label="手机号" prop="phone">
<el-input v-model="registerForm.phone" clearable></el-input>
</el-form-item>
<el-form-item label="验证码" prop="code">
<el-input v-model="registerForm.code">
<el-button
slot="append"
clearable
:disabled="countdown !== 0"
@click="sendCode"
type="primary"
@blur="checkCode"
>{{
countdown ? `${countdown} 秒后重新获取` : "获取验证码"
}}</el-button
>
</el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input
type="password"
clearable
v-model="registerForm.password"
></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="confirmPassword">
<el-input
type="password"
clearable
v-model="registerForm.confirmPassword"
></el-input>
</el-form-item>
<el-form-item>
<el-button
type="primary"
style="width: 100%; margin-bottom: 30px; margin-top: 10px"
@click.native.prevent="submitForm"
>注 册</el-button
>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
registerForm: {
phone: "",
code: "",
password: "",
confirmPassword: "",
},
countdown: 0, // 倒计时
};
},
computed: {
rules() {
return {
phone: [
{ required: true, message: "请输入手机号", trigger: "blur" },
{
pattern: /^1[3456789]\d{9}$/,
message: "请输入正确的手机号",
trigger: "blur",
},
],
code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
password: [
{ required: true, message: "请输入密码", trigger: "blur" },
{ min: 6, message: "密码长度不能少于6位", trigger: "blur" },
],
confirmPassword: [
{ required: true, message: "请确认密码", trigger: "blur" },
{
validator: (rule, value, callback) => {
if (value !== this.registerForm.password) {
callback(new Error("两次输入的密码不一致"));
} else {
callback();
}
},
trigger: "blur",
},
],
};
},
},
methods: {
async checkCode() {
let res = await this.$axios.get(
`/iext/back/MessageController/verifyCode?phone=${this.registerForm.phone}&validCode=${this.registerForm.code}`
);
if (res.success !== 1) {
this.$message({
type: "warning",
message: "请输入正确的验证码",
});
this.registerForm.validCode = "";
return;
}
},
async sendCode() {
if (this.registerForm.phone == "") {
this.$message({
type: "warning",
message: "请输入手机号",
});
return;
}
// 这里可以发送获取验证码的请求
let res = await this.$axios.get(
`/iext/back/MessageController/sendMsgCode?phone=${this.registerForm.phone}`
);
if (res.success == 1) {
this.$message({
type: "success",
message: "发送成功",
});
// 发送成功后开始倒计时
this.countdown = 60;
const timer = setInterval(() => {
if (this.countdown > 0) {
this.countdown--;
} else {
clearInterval(timer);
}
}, 1000);
}
},
async register() {
let res = await this.$axios.post(`/iext/back/AuthController/register`, {
code: this.registerForm.code,
password: this.registerForm.password,
phone: this.registerForm.phone,
});
if (res.success == 1) {
this.$message({
type: "success",
message: "注册成功",
});
} else {
this.$message({
type: "success",
message: res.msg,
});
}
},
submitForm() {
this.$refs.registerForm.validate((valid) => {
if (valid) {
// 这里可以发送注册请求
console.log("注册成功");
this.register();
} else {
console.log("注册失败");
}
});
},
},
};
</script>
<style lang="scss" scoped>
.register-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
background: url("../assets/img/背景.png") no-repeat;
background-size: 100% 100%;
position: relative;
.title-container {
position: relative;
.title {
font-size: 30px;
color: #fff;
margin: 30px auto 30px auto;
text-align: center;
font-weight: bold;
}
}
}
</style>
<style lang="scss">
.register-container {
.el-form {
position: absolute;
width: 432px;
// height: 403px;
// top: 0;
// bottom: 0;
right: 150px;
margin: auto;
background: url("../assets/img/1.png") no-repeat;
background-size: 100% 100%;
padding: 20px 45px;
.el-form-item__label {
color: #fff;
}
}
}
</style>
标准的注册页面
最新推荐文章于 2024-05-03 11:47:20 发布