|
|
@@ -74,7 +74,8 @@
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item v-if="cardType==='reset'||cardType==='register'">
|
|
|
- <el-input v-model="cardForm.identifyCode"></el-input>
|
|
|
+ <el-input id="auth-card-code-verifier" v-model="cardForm.identifyCode"></el-input>
|
|
|
+ <el-button :disabled="cardButtonDisabled">{{ cardText }}</el-button>
|
|
|
</el-form-item>
|
|
|
|
|
|
<div v-if="cardType==='login'" id="auth-card-login-password-options">
|
|
|
@@ -114,7 +115,12 @@ export default {
|
|
|
}
|
|
|
};
|
|
|
return {
|
|
|
- cardType: "login",
|
|
|
+ // cardType: "login",
|
|
|
+ cardType: "register",
|
|
|
+ cardButtonDisabled: false,
|
|
|
+ cardText: "获取验证码",
|
|
|
+ cardVerified: true,
|
|
|
+ rememberPassword: false,
|
|
|
cardForm: {
|
|
|
phone: "",
|
|
|
name: "",
|
|
|
@@ -176,8 +182,9 @@ export default {
|
|
|
trigger: "blur",
|
|
|
},
|
|
|
{
|
|
|
+ min: 8,
|
|
|
max: 20,
|
|
|
- message: "输入过多字符",
|
|
|
+ message: "密码长度应为8-20个字符",
|
|
|
trigger: "20",
|
|
|
}
|
|
|
],
|
|
|
@@ -189,10 +196,6 @@ export default {
|
|
|
}
|
|
|
],
|
|
|
},
|
|
|
-
|
|
|
- cardVerified: false,
|
|
|
-
|
|
|
- rememberPassword: false,
|
|
|
};
|
|
|
},
|
|
|
|
|
|
@@ -224,7 +227,7 @@ export default {
|
|
|
if (this.cardType === "login") {
|
|
|
return "请输入密码";
|
|
|
} else if (this.cardType === "register" || this.cardType === "reset") {
|
|
|
- return "请输入密码,只允许英文和数字,长度为8-20个字符";
|
|
|
+ return "请输入密码,需要包含英文和数字,长度为8-20个字符";
|
|
|
} else {
|
|
|
return "err";
|
|
|
}
|
|
|
@@ -236,7 +239,7 @@ export default {
|
|
|
if (this.cardType === "login") {
|
|
|
this.handleLogin();
|
|
|
} else if (this.cardType === "register") {
|
|
|
- return "已有账号? 前往登录";
|
|
|
+ this.handleRegister();
|
|
|
} else if (this.cardType === "reset") {
|
|
|
return "记得密码? 前往登录";
|
|
|
}
|
|
|
@@ -277,25 +280,67 @@ export default {
|
|
|
console.log(e);
|
|
|
});
|
|
|
} else {
|
|
|
- let elem = document.getElementById("auth-card-slide-verifier");
|
|
|
- elem.classList.add("shake");
|
|
|
- setTimeout(() => {
|
|
|
- elem.classList.remove("shake");
|
|
|
- }, 800);
|
|
|
+ this.shakeElem("auth-card-slide-verifier");
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
- // handleRegister() {
|
|
|
- //
|
|
|
- // },
|
|
|
- // handleReset() {
|
|
|
- //
|
|
|
- // },
|
|
|
+ handleRegister() {
|
|
|
+ //傻子写法,有机会了重构一下
|
|
|
+ const thatForm = this.$refs.cardFormRef;
|
|
|
+ thatForm.validateField("name", v1 => {
|
|
|
+ thatForm.validateField("username", v2 => {
|
|
|
+ thatForm.validateField("email", v3 => {
|
|
|
+ thatForm.validateField("password", v4 => {
|
|
|
+ thatForm.validateField("passwordConfirm", v5 => {
|
|
|
+ thatForm.validateField("phone", v6 => {
|
|
|
+ if (!v1 && !v2 && !v3 && !v4 && !v5 && !v6) {
|
|
|
+ if (this.cardVerified) {
|
|
|
+ const params = {
|
|
|
+ name: this.cardForm.name,
|
|
|
+ username: this.cardForm.username,
|
|
|
+ email: this.cardForm.email,
|
|
|
+ password: this.cardForm.password,
|
|
|
+ passwordConfirm: this.cardForm.passwordConfirm,
|
|
|
+ phone: this.cardForm.phone,
|
|
|
+ };
|
|
|
+ this.$apis.registerAPI(params)
|
|
|
+ .then((res) => {
|
|
|
+ console.log(res);
|
|
|
+ })
|
|
|
+ .catch((e) => {
|
|
|
+ console.log(e);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ console.log(1);
|
|
|
+ this.shakeElem("auth-card-code-verifier");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleReset() {
|
|
|
+
|
|
|
+ },
|
|
|
|
|
|
handleSlideVerifier(verifyStatus) {
|
|
|
this.cardVerified = verifyStatus;
|
|
|
+ },
|
|
|
+ handleSendMessage() {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ shakeElem(elemId) {
|
|
|
+ let elem = document.getElementById(elemId);
|
|
|
+ elem.classList.add("shake");
|
|
|
+ setTimeout(() => {
|
|
|
+ elem.classList.remove("shake");
|
|
|
+ }, 800);
|
|
|
}
|
|
|
}
|
|
|
};
|