|
@@ -5,7 +5,7 @@
|
|
<img src="../../assets/images/login-head.png" class="images" />
|
|
<img src="../../assets/images/login-head.png" class="images" />
|
|
</div>
|
|
</div>
|
|
<el-form
|
|
<el-form
|
|
- v-if="loginOrRetrieve=='login'"
|
|
|
|
|
|
+ v-if="loginOrRetrieve == 'login'"
|
|
ref="loginForm"
|
|
ref="loginForm"
|
|
:model="loginForm"
|
|
:model="loginForm"
|
|
:rules="loginRules"
|
|
:rules="loginRules"
|
|
@@ -66,33 +66,55 @@
|
|
@click="handleLogin"
|
|
@click="handleLogin"
|
|
>立即登录</el-button
|
|
>立即登录</el-button
|
|
>
|
|
>
|
|
- <!-- <div class="tips">
|
|
|
|
- <div @click="Retrieve" style="cursor: pointer">找回密码</div>
|
|
|
|
- </div> -->
|
|
|
|
|
|
+ <div class="tips">
|
|
|
|
+ <div @click="Retrieve('retrieve')" style="cursor: pointer">
|
|
|
|
+ 找回密码
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
</el-form>
|
|
</el-form>
|
|
- <div v-if="loginOrRetrieve=='retrieve'">
|
|
|
|
|
|
+ <div v-if="loginOrRetrieve == 'retrieve'">
|
|
<el-form
|
|
<el-form
|
|
- ref="loginForm"
|
|
|
|
- :model="loginForm"
|
|
|
|
- :rules="loginRules"
|
|
|
|
|
|
+ ref="RetrieveForm"
|
|
|
|
+ :model="RetrieveForm"
|
|
|
|
+ :rules="RetrieveRules"
|
|
class="login-form"
|
|
class="login-form"
|
|
autocomplete="on"
|
|
autocomplete="on"
|
|
label-position="left"
|
|
label-position="left"
|
|
>
|
|
>
|
|
- <el-form-item prop="username">
|
|
|
|
- <span class="svg-container">
|
|
|
|
- <svg-icon icon-class="user" />
|
|
|
|
- </span>
|
|
|
|
|
|
+ <el-form-item prop="phone">
|
|
<el-input
|
|
<el-input
|
|
- ref="username"
|
|
|
|
- v-model="loginForm.username"
|
|
|
|
- placeholder="登录用户名"
|
|
|
|
- name="username"
|
|
|
|
|
|
+ ref="phone"
|
|
|
|
+ v-model="RetrieveForm.phone"
|
|
|
|
+ placeholder="请输入手机号"
|
|
|
|
+ name="phone"
|
|
type="text"
|
|
type="text"
|
|
tabindex="1"
|
|
tabindex="1"
|
|
autocomplete="on"
|
|
autocomplete="on"
|
|
/>
|
|
/>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
|
+ <el-tooltip
|
|
|
|
+ v-model="capsTooltip"
|
|
|
|
+ content="Caps lock is On"
|
|
|
|
+ placement="right"
|
|
|
|
+ manual
|
|
|
|
+ >
|
|
|
|
+ <el-form-item prop="verification_code">
|
|
|
|
+ <el-input
|
|
|
|
+ ref="verification_code"
|
|
|
|
+ v-model="RetrieveForm.verification_code"
|
|
|
|
+ type="text"
|
|
|
|
+ placeholder="请输入验证码"
|
|
|
|
+ name="text"
|
|
|
|
+ tabindex="2"
|
|
|
|
+ autocomplete="on"
|
|
|
|
+ />
|
|
|
|
+ <span class="show-pwd">
|
|
|
|
+ <el-button :disabled="isDisabled" @click="getCode">
|
|
|
|
+ {{ buttonText }}
|
|
|
|
+ </el-button>
|
|
|
|
+ </span>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-tooltip>
|
|
|
|
|
|
<el-tooltip
|
|
<el-tooltip
|
|
v-model="capsTooltip"
|
|
v-model="capsTooltip"
|
|
@@ -100,22 +122,21 @@
|
|
placement="right"
|
|
placement="right"
|
|
manual
|
|
manual
|
|
>
|
|
>
|
|
- <el-form-item prop="password">
|
|
|
|
|
|
+ <el-form-item prop="new_password1">
|
|
<span class="svg-container">
|
|
<span class="svg-container">
|
|
<svg-icon icon-class="password" />
|
|
<svg-icon icon-class="password" />
|
|
</span>
|
|
</span>
|
|
<el-input
|
|
<el-input
|
|
:key="passwordType"
|
|
:key="passwordType"
|
|
ref="password"
|
|
ref="password"
|
|
- v-model="loginForm.password"
|
|
|
|
|
|
+ v-model="RetrieveForm.new_password1"
|
|
:type="passwordType"
|
|
:type="passwordType"
|
|
- placeholder="登录密码"
|
|
|
|
|
|
+ placeholder="信"
|
|
name="password"
|
|
name="password"
|
|
tabindex="2"
|
|
tabindex="2"
|
|
autocomplete="on"
|
|
autocomplete="on"
|
|
@keyup.native="checkCapslock"
|
|
@keyup.native="checkCapslock"
|
|
@blur="capsTooltip = false"
|
|
@blur="capsTooltip = false"
|
|
- @keyup.enter.native="handleLogin"
|
|
|
|
/>
|
|
/>
|
|
<span class="show-pwd" @click="showPwd">
|
|
<span class="show-pwd" @click="showPwd">
|
|
<svg-icon
|
|
<svg-icon
|
|
@@ -124,16 +145,47 @@
|
|
</span>
|
|
</span>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
</el-tooltip>
|
|
</el-tooltip>
|
|
|
|
+ <el-tooltip
|
|
|
|
+ v-model="capsTooltip"
|
|
|
|
+ content="Caps lock is On"
|
|
|
|
+ placement="right"
|
|
|
|
+ manual
|
|
|
|
+ >
|
|
|
|
+ <el-form-item prop="new_password2">
|
|
|
|
+ <span class="svg-container">
|
|
|
|
+ <svg-icon icon-class="password" />
|
|
|
|
+ </span>
|
|
|
|
+ <el-input
|
|
|
|
+ :key="passwordType"
|
|
|
|
+ ref="passwords"
|
|
|
|
+ v-model="RetrieveForm.new_password2"
|
|
|
|
+ :type="passwordTypes"
|
|
|
|
+ placeholder="确认新密码"
|
|
|
|
+ name="password"
|
|
|
|
+ tabindex="2"
|
|
|
|
+ autocomplete="on"
|
|
|
|
+ @keyup.native="checkCapslock"
|
|
|
|
+ @blur="capsTooltips = false"
|
|
|
|
+ />
|
|
|
|
+ <span class="show-pwd" @click="showPwds">
|
|
|
|
+ <svg-icon
|
|
|
|
+ :icon-class="
|
|
|
|
+ passwordTypes === 'password' ? 'eye' : 'eye-open'
|
|
|
|
+ "
|
|
|
|
+ />
|
|
|
|
+ </span>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-tooltip>
|
|
|
|
|
|
<el-button
|
|
<el-button
|
|
:loading="loading"
|
|
:loading="loading"
|
|
type="primary"
|
|
type="primary"
|
|
style="width: 100%; margin-bottom: 30px"
|
|
style="width: 100%; margin-bottom: 30px"
|
|
- @click="handleLogin"
|
|
|
|
- >立即登录</el-button
|
|
|
|
|
|
+ @click="retPass"
|
|
|
|
+ >重置密码</el-button
|
|
>
|
|
>
|
|
<div class="tips">
|
|
<div class="tips">
|
|
- <div @click="Retrieve" style="cursor: pointer">找回密码</div>
|
|
|
|
|
|
+ <div @click="Retrieve('login')" style="cursor: pointer">去登陆</div>
|
|
</div>
|
|
</div>
|
|
</el-form>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
@@ -143,6 +195,7 @@
|
|
|
|
|
|
<script>
|
|
<script>
|
|
import { validUsername } from "@/utils/validate";
|
|
import { validUsername } from "@/utils/validate";
|
|
|
|
+import { tailPhone, codeCheckout, updatePassword, login } from "@/api/user";
|
|
import SocialSign from "./components/SocialSignin";
|
|
import SocialSign from "./components/SocialSignin";
|
|
|
|
|
|
export default {
|
|
export default {
|
|
@@ -163,6 +216,37 @@ export default {
|
|
callback();
|
|
callback();
|
|
}
|
|
}
|
|
};
|
|
};
|
|
|
|
+ const validatePhone = (rule, value, callback) => {
|
|
|
|
+ const phoneRegex = /^1[3-9]\d{9}$/;
|
|
|
|
+ if (value === "") {
|
|
|
|
+ callback(new Error("请输入手机号码"));
|
|
|
|
+ } else if (!phoneRegex.test(value)) {
|
|
|
|
+ callback(new Error("请输入正确的手机号码"));
|
|
|
|
+ } else {
|
|
|
|
+ callback();
|
|
|
|
+ }
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ const validateNewPassword = (rule, value, callback) => {
|
|
|
|
+ if (value.length < 6) {
|
|
|
|
+ callback(new Error("新密码不能少于6个字符"));
|
|
|
|
+ } else {
|
|
|
|
+ if (this.RetrieveForm.new_password2 !== "") {
|
|
|
|
+ this.$refs.RetrieveForm.validateField("new_password2");
|
|
|
|
+ }
|
|
|
|
+ callback();
|
|
|
|
+ }
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ const validateConfirmPassword = (rule, value, callback) => {
|
|
|
|
+ if (value === "") {
|
|
|
|
+ callback(new Error("请再次输入密码"));
|
|
|
|
+ } else if (value !== this.RetrieveForm.new_password1) {
|
|
|
|
+ callback(new Error("两次输入的密码不一致"));
|
|
|
|
+ } else {
|
|
|
|
+ callback();
|
|
|
|
+ }
|
|
|
|
+ };
|
|
return {
|
|
return {
|
|
loginForm: {
|
|
loginForm: {
|
|
username: "",
|
|
username: "",
|
|
@@ -177,12 +261,38 @@ export default {
|
|
],
|
|
],
|
|
},
|
|
},
|
|
passwordType: "password",
|
|
passwordType: "password",
|
|
|
|
+ passwordTypes: "password",
|
|
capsTooltip: false,
|
|
capsTooltip: false,
|
|
loading: false,
|
|
loading: false,
|
|
showDialog: false,
|
|
showDialog: false,
|
|
redirect: undefined,
|
|
redirect: undefined,
|
|
otherQuery: {},
|
|
otherQuery: {},
|
|
- loginOrRetrieve:'login'
|
|
|
|
|
|
+ loginOrRetrieve: "login",
|
|
|
|
+ RetrieveForm: {
|
|
|
|
+ phone: "",
|
|
|
|
+ verification_code: "",
|
|
|
|
+ new_password1: "",
|
|
|
|
+ new_password2: "",
|
|
|
|
+ },
|
|
|
|
+ RetrieveRules: {
|
|
|
|
+ phone: [{ required: true, trigger: "blur", validator: validatePhone }],
|
|
|
|
+ verification_code: [
|
|
|
|
+ { required: true, message: "请输入验证码", trigger: "blur" },
|
|
|
|
+ ],
|
|
|
|
+ new_password1: [
|
|
|
|
+ { required: true, trigger: "blur", validator: validateNewPassword },
|
|
|
|
+ ],
|
|
|
|
+ new_password2: [
|
|
|
|
+ {
|
|
|
|
+ required: true,
|
|
|
|
+ trigger: "blur",
|
|
|
|
+ validator: validateConfirmPassword,
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ },
|
|
|
|
+ countdown: 60,
|
|
|
|
+ isDisabled: false,
|
|
|
|
+ buttonText: "获取验证码",
|
|
};
|
|
};
|
|
},
|
|
},
|
|
watch: {
|
|
watch: {
|
|
@@ -211,6 +321,66 @@ export default {
|
|
// window.removeEventListener('storage', this.afterQRScan)
|
|
// window.removeEventListener('storage', this.afterQRScan)
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
|
|
+ /* 找回密码 */
|
|
|
|
+ retPass() {
|
|
|
|
+ this.$refs.RetrieveForm.validate((valid) => {
|
|
|
|
+ if (valid) {
|
|
|
|
+ codeCheckout({
|
|
|
|
+ phone: this.RetrieveForm.phone,
|
|
|
|
+ verification_code: this.RetrieveForm.verification_code,
|
|
|
|
+ })
|
|
|
|
+ .then((response) => {
|
|
|
|
+ if (response.status !== 200) return;
|
|
|
|
+ updatePassword(this.RetrieveForm).then((res) => {
|
|
|
|
+ this.loginOrRetrieve = "login";
|
|
|
|
+ this.$message.success("密码已成功重置");
|
|
|
|
+ });
|
|
|
|
+ })
|
|
|
|
+ .catch((error) => {
|
|
|
|
+ this.$message.error("验证码校验失败");
|
|
|
|
+ });
|
|
|
|
+ } else {
|
|
|
|
+ console.log("error submit!!");
|
|
|
|
+ return false;
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ /* 获取验证码 */
|
|
|
|
+ getCode() {
|
|
|
|
+ this.$refs.RetrieveForm.validateField("phone", (errorMessage) => {
|
|
|
|
+ if (errorMessage) {
|
|
|
|
+ this.$message.warning(errorMessage);
|
|
|
|
+ } else {
|
|
|
|
+ this.isDisabled = true;
|
|
|
|
+ this.buttonText = `${this.countdown}s`;
|
|
|
|
+ const timer = setInterval(() => {
|
|
|
|
+ if (this.countdown > 0) {
|
|
|
|
+ this.countdown--;
|
|
|
|
+ this.buttonText = `${this.countdown}s`;
|
|
|
|
+ } else {
|
|
|
|
+ clearInterval(timer);
|
|
|
|
+ this.isDisabled = false;
|
|
|
|
+ this.buttonText = "获取验证码";
|
|
|
|
+ this.countdown = 60;
|
|
|
|
+ }
|
|
|
|
+ }, 1000);
|
|
|
|
+
|
|
|
|
+ tailPhone({ phone: this.RetrieveForm.phone }).then((res) => {
|
|
|
|
+ console.log(res);
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ showPwds() {
|
|
|
|
+ if (this.passwordTypes === "password") {
|
|
|
|
+ this.passwordTypes = "";
|
|
|
|
+ } else {
|
|
|
|
+ this.passwordTypes = "password";
|
|
|
|
+ }
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ this.$refs.passwords.focus();
|
|
|
|
+ });
|
|
|
|
+ },
|
|
checkCapslock(e) {
|
|
checkCapslock(e) {
|
|
const { key } = e;
|
|
const { key } = e;
|
|
this.capsTooltip = key && key.length === 1 && key >= "A" && key <= "Z";
|
|
this.capsTooltip = key && key.length === 1 && key >= "A" && key <= "Z";
|
|
@@ -274,7 +444,9 @@ export default {
|
|
// }
|
|
// }
|
|
// }
|
|
// }
|
|
/* 找回密码 */
|
|
/* 找回密码 */
|
|
- Retrieve() {},
|
|
|
|
|
|
+ Retrieve(val) {
|
|
|
|
+ this.loginOrRetrieve = val;
|
|
|
|
+ },
|
|
},
|
|
},
|
|
};
|
|
};
|
|
</script>
|
|
</script>
|