|
@@ -84,6 +84,23 @@ import { ref } from 'vue';
|
|
|
const userStore = useUserStore();
|
|
|
const router = useRouter();
|
|
|
const loginForm = ref<any>({
|
|
|
+<<<<<<< HEAD
|
|
|
+<<<<<<< HEAD
|
|
|
+ username: 'admin',
|
|
|
+ password: 'admin123',
|
|
|
+ rememberMe: false,
|
|
|
+ code: '',
|
|
|
+ uuid: '',
|
|
|
+ phone: '',
|
|
|
+});
|
|
|
+
|
|
|
+const loginRules = {
|
|
|
+ username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
|
|
|
+ password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],
|
|
|
+ code: [{ required: true, trigger: 'change', message: '请输入验证码' }],
|
|
|
+=======
|
|
|
+=======
|
|
|
+>>>>>>> 6c90d73fadd504a5827e77c4e8dc469f3608d6d0
|
|
|
username: 'admin',
|
|
|
password: 'admin123',
|
|
|
rememberMe: false,
|
|
@@ -96,6 +113,10 @@ const loginRules = {
|
|
|
username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
|
|
|
password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],
|
|
|
code: [{ required: true, trigger: 'change', message: '请输入验证码' }],
|
|
|
+<<<<<<< HEAD
|
|
|
+>>>>>>> e94f5f44564039f665611f42b365b51740d0649c
|
|
|
+=======
|
|
|
+>>>>>>> 6c90d73fadd504a5827e77c4e8dc469f3608d6d0
|
|
|
};
|
|
|
|
|
|
const codeUrl = ref('');
|
|
@@ -114,6 +135,91 @@ const isFlag = ref(true);
|
|
|
let countdown = ref(60);
|
|
|
const isCountingDown = ref(false);
|
|
|
const countdownText = computed(() => {
|
|
|
+<<<<<<< HEAD
|
|
|
+<<<<<<< HEAD
|
|
|
+ return isCountingDown.value ? `${countdown.value}s 后重新获取` : '获取验证码';
|
|
|
+});
|
|
|
+const getVerificationCode = async () => {
|
|
|
+ if (!isCountingDown.value) {
|
|
|
+ await getPhoneCode({ uuid: loginForm.value.uuid }).then((res: any) => {
|
|
|
+ console.log(res);
|
|
|
+ if (res.code === 200) {
|
|
|
+ ElMessage.success('验证码发送成功');
|
|
|
+ } else {
|
|
|
+ ElMessage.error('验证码发送失败,请稍后重试');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ isCountingDown.value = true;
|
|
|
+ countdown.value = 60;
|
|
|
+ const intervalId = setInterval(() => {
|
|
|
+ countdown.value--;
|
|
|
+ if (countdown.value <= 0) {
|
|
|
+ isCountingDown.value = false;
|
|
|
+ clearInterval(intervalId);
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const publicKey =
|
|
|
+ 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKoR8mX0rGKLqzcWmOzbfj64K8ZIgOdH\n' +
|
|
|
+ 'nzkXSOVOZbFu/TJhZ7rFAN+eaGkl3C4buccQd/EjEsj9ir7ijT7h96MCAwEAAQ==';
|
|
|
+const privateKey =
|
|
|
+ 'MIIBVAIBADANBgkqhkiG9w0BAQEFAASCAT4wggE6AgEAAkEAqhHyZfSsYourNxaY\n' +
|
|
|
+ '7Nt+PrgrxkiA50efORdI5U5lsW79MmFnusUA355oaSXcLhu5xxB38SMSyP2KvuKN\n' +
|
|
|
+ 'PuH3owIDAQABAkAfoiLyL+Z4lf4Myxk6xUDgLaWGximj20CUf+5BKKnlrK+Ed8gA\n' +
|
|
|
+ 'kM0HqoTt2UZwA5E2MzS4EI2gjfQhz5X28uqxAiEA3wNFxfrCZlSZHb0gn2zDpWow\n' +
|
|
|
+ 'cSxQAgiCstxGUoOqlW8CIQDDOerGKH5OmCJ4Z21v+F25WaHYPxCFMvwxpcw99Ecv\n' +
|
|
|
+ 'DQIgIdhDTIqD2jfYjPTY8Jj3EDGPbH2HHuffvflECt3Ek60CIQCFRlCkHpi7hthh\n' +
|
|
|
+ 'YhovyloRYsM+IS9h/0BzlEAuO0ktMQIgSPT3aFAgJYwKpqRYKlLDVcflZFCKY7u3\n' +
|
|
|
+ 'UP8iWi1Qw0Y=';
|
|
|
+// -------------- 获取验证码 倒计时60秒 end ----------------
|
|
|
+// 有下一步的登陆
|
|
|
+const handleNext = () => {
|
|
|
+ loginFirstRef.value?.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ loading.value = true;
|
|
|
+ // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
|
|
|
+ if (loginForm.value.rememberMe) {
|
|
|
+ Cookies.set('username', loginForm.value.username, { expires: 30 });
|
|
|
+ const enPwd = encrypt(loginForm.value.password, publicKey);
|
|
|
+ // const enPwd = loginForm.value.password;
|
|
|
+ if (enPwd) {
|
|
|
+ Cookies.set('password', enPwd, { expires: 30 });
|
|
|
+ }
|
|
|
+ if (loginForm.value.rememberMe) {
|
|
|
+ Cookies.set('rememberMe', String(loginForm.value.rememberMe), { expires: 30 });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 否则移除
|
|
|
+ Cookies.remove('username');
|
|
|
+ Cookies.remove('password');
|
|
|
+ Cookies.remove('rememberMe');
|
|
|
+ }
|
|
|
+ // 调用action的登录方法
|
|
|
+ userStore
|
|
|
+ .phoneLogin(loginForm.value)
|
|
|
+ .then((res: any) => {
|
|
|
+ console.log(res);
|
|
|
+ // router.push({ path: redirect.value || '/' });
|
|
|
+ isFlag.value = false;
|
|
|
+ loading.value = false;
|
|
|
+ loginForm.value.code = '';
|
|
|
+ loginForm.value.uuid = res.uuid;
|
|
|
+ loginForm.value.phone = res.phone;
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ loading.value = false;
|
|
|
+ // 重新获取验证码
|
|
|
+ if (captchaEnabled.value) {
|
|
|
+ getCode();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+=======
|
|
|
+=======
|
|
|
+>>>>>>> 6c90d73fadd504a5827e77c4e8dc469f3608d6d0
|
|
|
return isCountingDown.value ? `${countdown.value}s 后重新获取` : '获取验证码';
|
|
|
});
|
|
|
const getVerificationCode = async () => {
|
|
@@ -194,10 +300,33 @@ const handleNext = () => {
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
+<<<<<<< HEAD
|
|
|
+>>>>>>> e94f5f44564039f665611f42b365b51740d0649c
|
|
|
+=======
|
|
|
+>>>>>>> 6c90d73fadd504a5827e77c4e8dc469f3608d6d0
|
|
|
};
|
|
|
|
|
|
// 有下一步的最后一步
|
|
|
const handleEndLogin = () => {
|
|
|
+<<<<<<< HEAD
|
|
|
+<<<<<<< HEAD
|
|
|
+ userStore
|
|
|
+ .phoneLogin(loginForm.value)
|
|
|
+ .then((res: any) => {
|
|
|
+ if (res.token) {
|
|
|
+ ElMessage.success('登陆成功');
|
|
|
+ router.push({ path: redirect.value || '/' });
|
|
|
+ } else {
|
|
|
+ ElMessage.error('登陆失败');
|
|
|
+ }
|
|
|
+ loading.value = false;
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ loading.value = false;
|
|
|
+ });
|
|
|
+=======
|
|
|
+=======
|
|
|
+>>>>>>> 6c90d73fadd504a5827e77c4e8dc469f3608d6d0
|
|
|
userStore
|
|
|
.phoneLogin(loginForm.value)
|
|
|
.then((res: any) => {
|
|
@@ -212,10 +341,37 @@ const handleEndLogin = () => {
|
|
|
.catch(() => {
|
|
|
loading.value = false;
|
|
|
});
|
|
|
+<<<<<<< HEAD
|
|
|
+>>>>>>> e94f5f44564039f665611f42b365b51740d0649c
|
|
|
+=======
|
|
|
+>>>>>>> 6c90d73fadd504a5827e77c4e8dc469f3608d6d0
|
|
|
};
|
|
|
|
|
|
// 无下一步的登陆
|
|
|
function handleLogin() {
|
|
|
+<<<<<<< HEAD
|
|
|
+<<<<<<< HEAD
|
|
|
+ loginFirstRef.value?.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ loading.value = true;
|
|
|
+ // 调用action的登录方法
|
|
|
+ userStore
|
|
|
+ .login(loginForm.value)
|
|
|
+ .then(() => {
|
|
|
+ router.push({ path: redirect.value || '/' });
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ loading.value = false;
|
|
|
+ // 重新获取验证码
|
|
|
+ if (captchaEnabled.value) {
|
|
|
+ getCode();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+=======
|
|
|
+=======
|
|
|
+>>>>>>> 6c90d73fadd504a5827e77c4e8dc469f3608d6d0
|
|
|
loginFirstRef.value?.validate(valid => {
|
|
|
if (valid) {
|
|
|
loading.value = true;
|
|
@@ -234,10 +390,31 @@ function handleLogin() {
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
+<<<<<<< HEAD
|
|
|
+>>>>>>> e94f5f44564039f665611f42b365b51740d0649c
|
|
|
+=======
|
|
|
+>>>>>>> 6c90d73fadd504a5827e77c4e8dc469f3608d6d0
|
|
|
}
|
|
|
|
|
|
// 登陆按钮
|
|
|
const handleAllLogin = () => {
|
|
|
+<<<<<<< HEAD
|
|
|
+<<<<<<< HEAD
|
|
|
+ // 本地
|
|
|
+ // if (env === 'development') {
|
|
|
+ // handleLogin();
|
|
|
+ // } else {
|
|
|
+ // handleNext();
|
|
|
+ // }
|
|
|
+ // handleNext();
|
|
|
+ if (phoneCaptchaEnabled.value) {
|
|
|
+ handleNext();
|
|
|
+ } else {
|
|
|
+ handleLogin();
|
|
|
+ }
|
|
|
+=======
|
|
|
+=======
|
|
|
+>>>>>>> 6c90d73fadd504a5827e77c4e8dc469f3608d6d0
|
|
|
// 本地
|
|
|
// if (env === 'development') {
|
|
|
// handleLogin();
|
|
@@ -250,11 +427,46 @@ const handleAllLogin = () => {
|
|
|
} else {
|
|
|
handleLogin();
|
|
|
}
|
|
|
+<<<<<<< HEAD
|
|
|
+>>>>>>> e94f5f44564039f665611f42b365b51740d0649c
|
|
|
+=======
|
|
|
+>>>>>>> 6c90d73fadd504a5827e77c4e8dc469f3608d6d0
|
|
|
};
|
|
|
|
|
|
// 是否有手机号
|
|
|
const phoneCaptchaEnabled = ref(false);
|
|
|
function getCode() {
|
|
|
+<<<<<<< HEAD
|
|
|
+<<<<<<< HEAD
|
|
|
+ getCodeImg().then((res: any) => {
|
|
|
+ captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
|
|
|
+ phoneCaptchaEnabled.value = res.phoneCaptchaEnabled;
|
|
|
+ if (captchaEnabled.value) {
|
|
|
+ codeUrl.value = 'data:image/gif;base64,' + res.img;
|
|
|
+ loginForm.value.uuid = res.uuid;
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function getCookie() {
|
|
|
+ const username = Cookies.get('username');
|
|
|
+ const password = Cookies.get('password');
|
|
|
+ const rememberMe = Cookies.get('rememberMe');
|
|
|
+ // let publicKey = '';
|
|
|
+
|
|
|
+ // getPublicKey().then((res: any) => {
|
|
|
+ // publicKey = res.publicKey;
|
|
|
+ // });
|
|
|
+
|
|
|
+ loginForm.value = {
|
|
|
+ username: username === undefined ? loginForm.value.username : username,
|
|
|
+ password: password === undefined ? loginForm.value.password : decrypt(password, privateKey) || '',
|
|
|
+ // password: password === undefined ? loginForm.value.password : password || '',
|
|
|
+ rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
|
|
|
+ };
|
|
|
+=======
|
|
|
+=======
|
|
|
+>>>>>>> 6c90d73fadd504a5827e77c4e8dc469f3608d6d0
|
|
|
getCodeImg().then((res: any) => {
|
|
|
captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
|
|
|
phoneCaptchaEnabled.value = res.phoneCaptchaEnabled;
|
|
@@ -281,6 +493,10 @@ function getCookie() {
|
|
|
// password: password === undefined ? loginForm.value.password : password || '',
|
|
|
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
|
|
|
};
|
|
|
+<<<<<<< HEAD
|
|
|
+>>>>>>> e94f5f44564039f665611f42b365b51740d0649c
|
|
|
+=======
|
|
|
+>>>>>>> 6c90d73fadd504a5827e77c4e8dc469f3608d6d0
|
|
|
}
|
|
|
|
|
|
getCode();
|
|
@@ -289,6 +505,79 @@ getCookie();
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.login {
|
|
|
+<<<<<<< HEAD
|
|
|
+<<<<<<< HEAD
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ height: 100%;
|
|
|
+ background-image: url('../assets/images/login-background.jpg');
|
|
|
+ background-size: cover;
|
|
|
+}
|
|
|
+
|
|
|
+.title {
|
|
|
+ margin: 0px auto 30px auto;
|
|
|
+ text-align: center;
|
|
|
+ color: #707070;
|
|
|
+}
|
|
|
+
|
|
|
+.login-form {
|
|
|
+ border-radius: 6px;
|
|
|
+ background: #ffffff;
|
|
|
+ width: 400px;
|
|
|
+ padding: 25px 25px 5px 25px;
|
|
|
+
|
|
|
+ .el-input {
|
|
|
+ height: 40px;
|
|
|
+
|
|
|
+ input {
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .input-icon {
|
|
|
+ height: 39px;
|
|
|
+ width: 14px;
|
|
|
+ margin-left: 0px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.login-tip {
|
|
|
+ font-size: 13px;
|
|
|
+ text-align: center;
|
|
|
+ color: #bfbfbf;
|
|
|
+}
|
|
|
+
|
|
|
+.login-code {
|
|
|
+ width: 33%;
|
|
|
+ height: 40px;
|
|
|
+ float: right;
|
|
|
+
|
|
|
+ img {
|
|
|
+ cursor: pointer;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.el-login-footer {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ font-family: Arial;
|
|
|
+ font-size: 12px;
|
|
|
+ letter-spacing: 1px;
|
|
|
+}
|
|
|
+
|
|
|
+.login-code-img {
|
|
|
+ height: 40px;
|
|
|
+ padding-left: 12px;
|
|
|
+=======
|
|
|
+=======
|
|
|
+>>>>>>> 6c90d73fadd504a5827e77c4e8dc469f3608d6d0
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
@@ -357,5 +646,9 @@ getCookie();
|
|
|
.login-code-img {
|
|
|
height: 40px;
|
|
|
padding-left: 12px;
|
|
|
+<<<<<<< HEAD
|
|
|
+>>>>>>> e94f5f44564039f665611f42b365b51740d0649c
|
|
|
+=======
|
|
|
+>>>>>>> 6c90d73fadd504a5827e77c4e8dc469f3608d6d0
|
|
|
}
|
|
|
</style>
|