增加注册功能
This commit is contained in:
parent
b3332a3044
commit
0b66bd6441
|
|
@ -6,25 +6,62 @@
|
|||
<h3 class="login-title">{{ entryName }}</h3>
|
||||
<el-form
|
||||
:model="dataForm"
|
||||
:rules="dataRule"
|
||||
:rules="dataRule1"
|
||||
ref="dataForm"
|
||||
@keyup.enter.native="dataFormSubmit()"
|
||||
status-icon
|
||||
>
|
||||
<el-form-item prop="userName">
|
||||
<div v-if="!isLogin">
|
||||
<el-form-item prop="mobile" >
|
||||
<div class="flex" style="display: flex">
|
||||
<el-input v-model="dataForm.mobile" placeholder="手机号">
|
||||
</el-input>
|
||||
<el-button
|
||||
style="margin-left: 20px"
|
||||
type="primary"
|
||||
size="medium"
|
||||
@click="sendMsg()"
|
||||
>
|
||||
{{ msgTime >= 60 ? "发送验证码" : msgTime }}</el-button
|
||||
>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code" >
|
||||
<el-input
|
||||
v-model="dataForm.code"
|
||||
placeholder="验证码"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="email" >
|
||||
<el-input
|
||||
v-model="dataForm.email"
|
||||
placeholder="邮箱"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-form-item prop="userName" >
|
||||
<el-input
|
||||
v-model="dataForm.userName"
|
||||
placeholder="帐号"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
|
||||
<el-form-item prop="password" >
|
||||
<el-input
|
||||
type="password"
|
||||
v-model="dataForm.password"
|
||||
placeholder="密码"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password1" v-if="!isLogin" >
|
||||
<el-input
|
||||
v-model="dataForm.password1"
|
||||
type="password"
|
||||
placeholder="密码"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="captcha">
|
||||
<el-form-item prop="captcha" v-if="isLogin" >
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="14">
|
||||
<el-input v-model="dataForm.captcha" placeholder="验证码">
|
||||
|
|
@ -35,7 +72,8 @@
|
|||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
|
||||
<el-form-item v-if="isLogin">
|
||||
<div class="btn-box">
|
||||
<div class="" style="margin-top: 38px">
|
||||
<el-button
|
||||
|
|
@ -45,15 +83,36 @@
|
|||
>登录</el-button
|
||||
>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<div>
|
||||
<el-button
|
||||
class="login-btn-submit"
|
||||
plain
|
||||
type="primary"
|
||||
@click="dataFormSubmit()"
|
||||
type="text"
|
||||
@click="isLogin = false"
|
||||
>注册</el-button
|
||||
>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="!isLogin">
|
||||
<div class="btn-box">
|
||||
<div class="" style="margin-top: 38px">
|
||||
<el-button
|
||||
class="login-btn-submit"
|
||||
type="primary"
|
||||
@click="register()"
|
||||
>立即注册</el-button
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<el-button
|
||||
class="login-btn-submit"
|
||||
plain
|
||||
type="text"
|
||||
@click="isLogin = true"
|
||||
>返回登录</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
|
@ -69,20 +128,35 @@ import { entryName } from "@/utils/httpRequest";
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
isLogin: true,
|
||||
timer: null,
|
||||
msgTime: 60,
|
||||
dataForm: {
|
||||
mobile: "",
|
||||
email: "",
|
||||
userName: "",
|
||||
password: "",
|
||||
password1: "",
|
||||
uuid: "",
|
||||
captcha: "",
|
||||
entryName: "",
|
||||
code: "",
|
||||
},
|
||||
dataRule: {
|
||||
dataRule1: {
|
||||
mobile: [
|
||||
{ required: true, message: "手机号不能为空", trigger: "blur" },
|
||||
],
|
||||
email: [{ required: true, message: "邮箱不能为空", trigger: "blur" }],
|
||||
code: [{ required: true, message: "验证码不能为空", trigger: "blur" }],
|
||||
userName: [
|
||||
{ required: true, message: "帐号不能为空", trigger: "blur" },
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: "密码不能为空", trigger: "blur" },
|
||||
],
|
||||
password1: [
|
||||
{ required: true, message: "密码不能为空", trigger: "blur" },
|
||||
],
|
||||
captcha: [
|
||||
{ required: true, message: "验证码不能为空", trigger: "blur" },
|
||||
],
|
||||
|
|
@ -90,11 +164,94 @@ export default {
|
|||
captchaPath: "",
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
isLogin(newval) {
|
||||
this.$refs.dataForm.resetFields();
|
||||
if (newval) {
|
||||
this.getCaptcha();
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.entryName = entryName;
|
||||
this.getCaptcha();
|
||||
},
|
||||
methods: {
|
||||
sendMsg() {
|
||||
if (this.msgTime < 60) {
|
||||
return;
|
||||
}
|
||||
this.$http({
|
||||
// url: this.$http.adornUrl('app/Login/sendMsg/'+this.tableData.mobile+'/regis'),
|
||||
url: this.$http.adornUrl(
|
||||
"app/Login/sendMsg/" + this.dataForm.mobile + "/regis"
|
||||
),
|
||||
method: "get",
|
||||
}).then((res) => {
|
||||
console.log(res);
|
||||
if (res.data.code == 0) {
|
||||
this.$message({
|
||||
message: "发送成功",
|
||||
type: "success",
|
||||
});
|
||||
this.msgTime--;
|
||||
this.timer = setInterval(() => {
|
||||
this.msgTime--;
|
||||
if (this.msgTime == 0) {
|
||||
clearInterval(this.timer);
|
||||
this.msgTime = 60;
|
||||
}
|
||||
}, 1000);
|
||||
} else {
|
||||
this.$message({
|
||||
message: "发送失败",
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
reset() {
|
||||
this.dataForm.code = "";
|
||||
this.timer = null;
|
||||
cleartimeout(this.timer);
|
||||
this.msgTime = 60;
|
||||
},
|
||||
register() {
|
||||
if (this.dataForm.password != this.dataForm.password1) {
|
||||
this.$notify({
|
||||
title: "提示",
|
||||
duration: 1800,
|
||||
message: "两次密码不一致",
|
||||
type: "warning",
|
||||
});
|
||||
this.$message.error("两次密码不一致");
|
||||
return;
|
||||
}
|
||||
this.$refs["dataForm"].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$http({
|
||||
url: this.$http.adornUrl("sys/registered?msg=" + this.dataForm.code),
|
||||
method: "post",
|
||||
data: this.$http.adornData({
|
||||
mobile: this.dataForm.mobile,
|
||||
username: this.dataForm.userName,
|
||||
password: this.dataForm.password,
|
||||
email: this.dataForm.email,
|
||||
}),
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.$message.success("注册成功，请登录");
|
||||
this.isLogin=true
|
||||
// this.$cookie.set("token", data.token);
|
||||
// this.$router.replace({ name: "home" });
|
||||
} else {
|
||||
// this.getCaptcha();
|
||||
this.$message.error(data.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 提交表单
|
||||
dataFormSubmit() {
|
||||
this.$refs["dataForm"].validate((valid) => {
|
||||
|
|
@ -103,7 +260,7 @@ export default {
|
|||
url: this.$http.adornUrl("sys/login"),
|
||||
method: "post",
|
||||
data: this.$http.adornData({
|
||||
username: this.dataForm.userName,
|
||||
userName: this.dataForm.userName,
|
||||
password: this.dataForm.password,
|
||||
uuid: this.dataForm.uuid,
|
||||
captcha: this.dataForm.captcha,
|
||||
|
|
@ -193,8 +350,9 @@ export default {
|
|||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -200px;
|
||||
margin-top: -150px;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
// margin-left: -200px;
|
||||
// margin-top: -150px;
|
||||
padding: 20px 30px;
|
||||
width: 400px;
|
||||
border-radius: 8px;
|
||||
|
|
|
|||
|
|
@ -218,7 +218,8 @@
|
|||
type="primary"
|
||||
size="medium"
|
||||
@click="sendMsg()"
|
||||
> {{ msgTime >= 60 ? "发送验证码" : msgTime }}</el-button
|
||||
>
|
||||
{{ msgTime >= 60 ? "发送验证码" : msgTime }}</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
<el-form-item label="验证码" :label-width="formLabelWidth" required>
|
||||
|
|
@ -939,14 +940,14 @@ export default {
|
|||
methods: {
|
||||
reset() {
|
||||
this.msg = "";
|
||||
this.timer = null;
|
||||
cleartimeout(this.timer);
|
||||
this.msgTime = 60;
|
||||
this.timer = null;
|
||||
cleartimeout(this.timer);
|
||||
this.msgTime = 60;
|
||||
},
|
||||
sendMsg() {
|
||||
if(this.msgTime<60){
|
||||
return
|
||||
}
|
||||
if (this.msgTime < 60) {
|
||||
return;
|
||||
}
|
||||
this.$http({
|
||||
// url: this.$http.adornUrl('app/Login/sendMsg/'+this.tableData.mobile+'/regis'),
|
||||
url: this.$http.adornUrl(
|
||||
|
|
@ -960,7 +961,7 @@ export default {
|
|||
message: "发送成功",
|
||||
type: "success",
|
||||
});
|
||||
this.msgTime--;
|
||||
this.msgTime--;
|
||||
this.timer = setInterval(() => {
|
||||
this.msgTime--;
|
||||
if (this.msgTime == 0) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue