1072 lines
30 KiB
Vue
1072 lines
30 KiB
Vue
<template>
|
||
<div class="login-container">
|
||
<h1>
|
||
<div>
|
||
<img :src="loginImg" alt="Logo" class="logo-img" />
|
||
<a class="system-title">{{ $t("login.title") }}</a>
|
||
</div>
|
||
</h1>
|
||
<div class="login-wrapper">
|
||
<!-- 左侧：背景图区域 -->
|
||
<div class="left-section">
|
||
<div class="slogan">
|
||
<p>绿水青山就是金山银山</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧：登录表单区域 -->
|
||
<div class="right-section">
|
||
<!-- 忘记密码页面 -->
|
||
<div v-if="showForgotPassword" class="forgot-password-container">
|
||
<div class="forgot-password-header">
|
||
<a-button type="link" @click="backToLogin" class="back-button">
|
||
<span>← 返回</span>
|
||
</a-button>
|
||
<!-- <h3 class="forgot-password-title">忘记密码</h3> -->
|
||
</div>
|
||
|
||
<a-form
|
||
:model="forgotPasswordForm"
|
||
:rules="forgotPasswordRules"
|
||
layout="vertical"
|
||
class="form-container"
|
||
>
|
||
<a-form-item label="" name="phone">
|
||
<a-input
|
||
v-model:value="forgotPasswordForm.phone"
|
||
placeholder="请输入手机号"
|
||
size="large"
|
||
>
|
||
<template #prefix>
|
||
<MobileOutlined />
|
||
</template>
|
||
</a-input>
|
||
</a-form-item>
|
||
|
||
<a-form-item label="" name="captcha">
|
||
<div class="captcha-row">
|
||
<a-input
|
||
v-model:value="forgotPasswordForm.captcha"
|
||
placeholder="请输入验证码"
|
||
size="large"
|
||
autocomplete="current-captcha"
|
||
class="captcha-input"
|
||
>
|
||
<template #prefix>
|
||
<LockOutlined />
|
||
</template>
|
||
<template #suffix>
|
||
<a-button
|
||
type="text"
|
||
size="small"
|
||
@click="sendForgotPasswordSms"
|
||
:disabled="smsButtonDisabled"
|
||
:loading="loading"
|
||
>
|
||
{{
|
||
smsCountdown > 0 ? `${smsCountdown}秒后重新获取` : "获取验证码"
|
||
}}
|
||
</a-button>
|
||
</template>
|
||
</a-input>
|
||
</div>
|
||
</a-form-item>
|
||
|
||
<a-form-item label="" name="newPassword">
|
||
<a-input-password
|
||
v-model:value="forgotPasswordForm.newPassword"
|
||
autocomplete="current-password"
|
||
placeholder="请输入新密码"
|
||
size="large"
|
||
>
|
||
<template #prefix>
|
||
<LockOutlined />
|
||
</template>
|
||
</a-input-password>
|
||
</a-form-item>
|
||
|
||
<a-form-item label="" name="confirmPassword">
|
||
<a-input-password
|
||
v-model:value="forgotPasswordForm.confirmPassword"
|
||
autocomplete="current-confirmPassword"
|
||
placeholder="请再次输入密码"
|
||
size="large"
|
||
>
|
||
<template #prefix>
|
||
<LockOutlined />
|
||
</template>
|
||
</a-input-password>
|
||
</a-form-item>
|
||
|
||
<a-button
|
||
type="primary"
|
||
size="large"
|
||
block
|
||
@click="handleResetPassword"
|
||
:loading="loading"
|
||
>
|
||
<span>提交</span>
|
||
</a-button>
|
||
</a-form>
|
||
</div>
|
||
|
||
<!-- 登录页面 -->
|
||
<div v-else>
|
||
<!-- Tabs 切换：账号登录 / 短信登录 -->
|
||
<a-tabs v-model:activeKey="activeTab" class="login-tabs">
|
||
<a-tab-pane key="account" tab="账号登录">
|
||
<a-form
|
||
:model="loginData"
|
||
:rules="loginRules"
|
||
layout="vertical"
|
||
class="form-container"
|
||
@finish="onFinish"
|
||
>
|
||
<!-- 用户名/账号/手机号输入框 -->
|
||
<a-form-item label="" name="username">
|
||
<a-input
|
||
ref="username"
|
||
v-model:value="loginData.username"
|
||
clearable
|
||
type="text"
|
||
placeholder="请输入用户账号/手机号"
|
||
size="large"
|
||
autocomplete="current-username"
|
||
>
|
||
<template #prefix>
|
||
<UserOutlined />
|
||
</template>
|
||
</a-input>
|
||
</a-form-item>
|
||
|
||
<!-- 密码输入框 -->
|
||
<a-form-item label="" name="password">
|
||
<a-input-password
|
||
type="password"
|
||
v-model:value="loginData.password"
|
||
placeholder="请输入密码"
|
||
size="large"
|
||
autocomplete="current-password"
|
||
>
|
||
<template #prefix>
|
||
<LockOutlined />
|
||
</template>
|
||
</a-input-password>
|
||
</a-form-item>
|
||
<!-- 验证码区域 -->
|
||
<a-form-item label="" name="captcha">
|
||
<div class="captcha-row">
|
||
<a-row :gutter="24" align="middle">
|
||
<a-col :span="10"
|
||
><a-input
|
||
v-model:value="loginData.code"
|
||
placeholder="请输入验证码"
|
||
autocomplete="current-captcha"
|
||
size="large"
|
||
class="captcha-input"
|
||
/></a-col>
|
||
<a-col :span="10"
|
||
><img :src="codeUrl" alt="验证码" class="captcha-img"
|
||
/></a-col>
|
||
<a-col :span="4"> <a @click="getCode">换一张</a></a-col>
|
||
</a-row>
|
||
</div>
|
||
</a-form-item>
|
||
<a-button
|
||
type="primary"
|
||
size="large"
|
||
block
|
||
htmlType="submit"
|
||
:loading="loading"
|
||
>
|
||
<span>登录</span>
|
||
</a-button>
|
||
<div
|
||
style="
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
"
|
||
>
|
||
<a-checkbox v-model:checked="remember" style="margin-top: 10px"
|
||
>记住密码</a-checkbox
|
||
>
|
||
<a-button
|
||
type="link"
|
||
size="mini"
|
||
@click="showForgotPasswordPage"
|
||
:style="{ marginTop: '10px', border: 'none' }"
|
||
>
|
||
忘记密码
|
||
</a-button>
|
||
<!-- <a-button
|
||
type="link"
|
||
size="mini"
|
||
@click="goRegister"
|
||
:style="{ marginTop: '10px', border: 'none' }"
|
||
>
|
||
用户注册
|
||
</a-button> -->
|
||
</div>
|
||
|
||
<!-- 忘记密码 -->
|
||
</a-form>
|
||
</a-tab-pane>
|
||
|
||
<!-- 短信登录 Tab (占位) -->
|
||
<a-tab-pane key="sms" tab="短信登录">
|
||
<a-form
|
||
:model="loginData"
|
||
:rules="state.smsLoginRules"
|
||
layout="vertical"
|
||
class="form-container"
|
||
@finish="onSmsLogin"
|
||
>
|
||
<a-form-item label="" name="username">
|
||
<a-input
|
||
v-model:value="loginData.username"
|
||
placeholder="请输入手机号"
|
||
size="large"
|
||
>
|
||
<template #prefix>
|
||
<MobileOutlined />
|
||
</template>
|
||
</a-input>
|
||
</a-form-item>
|
||
<a-form-item label="" name="captcha">
|
||
<div class="captcha-row">
|
||
<a-input
|
||
v-model:value="loginData.code"
|
||
placeholder="请输入验证码"
|
||
size="large"
|
||
class="captcha-input"
|
||
>
|
||
<template #prefix>
|
||
<LockOutlined />
|
||
</template>
|
||
<template #suffix>
|
||
<a-button
|
||
type="text"
|
||
size="small"
|
||
@click="sendSms"
|
||
:disabled="smsButtonDisabled"
|
||
:loading="loading"
|
||
>
|
||
{{
|
||
smsCountdown > 0
|
||
? `${smsCountdown}秒后重新获取`
|
||
: "获取验证码"
|
||
}}
|
||
</a-button>
|
||
</template>
|
||
</a-input>
|
||
</div>
|
||
</a-form-item>
|
||
<a-button
|
||
type="primary"
|
||
size="large"
|
||
block
|
||
htmlType="submit"
|
||
:loading="loading"
|
||
>
|
||
<span>登录</span>
|
||
</a-button>
|
||
<div
|
||
style="
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: start;
|
||
"
|
||
>
|
||
<a-button
|
||
type="link"
|
||
size="mini"
|
||
block
|
||
@click="showForgotPasswordPage"
|
||
:style="{ marginTop: '10px', border: 'none' }"
|
||
style="width: 20%;"
|
||
>
|
||
忘记密码
|
||
</a-button>
|
||
<!-- <a-button
|
||
type="link"
|
||
size="mini"
|
||
block
|
||
@click="goRegister"
|
||
:style="{ marginTop: '10px', border: 'none' }"
|
||
>
|
||
注册
|
||
</a-button> -->
|
||
</div>
|
||
</a-form>
|
||
</a-tab-pane>
|
||
</a-tabs>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { onMounted, reactive, ref, toRefs, watch } from "vue";
|
||
import loginImg from "@/assets/images/logo.png";
|
||
import { UserOutlined, LockOutlined, MobileOutlined } from "@ant-design/icons-vue";
|
||
import { getCaptcha, sendSmsCode, smsLoginApi, resetPassword } from "@/api/auth";
|
||
import { message } from "ant-design-vue";
|
||
import { setToken } from "@/utils/auth";
|
||
import Cookies from "js-cookie";
|
||
// 组件依赖
|
||
|
||
import router from "@/router";
|
||
// API依赖
|
||
import { useRoute } from "vue-router";
|
||
import { LoginData } from "@/api/auth/types";
|
||
|
||
//密码加密
|
||
import { encrypt, decrypt } from "@/utils/rsaEncrypt";
|
||
|
||
// 状态管理依赖
|
||
import { useUserStore } from "@/store/modules/user";
|
||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||
|
||
// 国际化
|
||
import { useI18n } from "vue-i18n";
|
||
const { t } = useI18n();
|
||
const userStore = useUserStore();
|
||
const route = useRoute();
|
||
// 图片验证码
|
||
const codeUrl = ref("");
|
||
|
||
const smsCountdown = ref(0); // 短信验证码倒计时
|
||
const smsButtonDisabled = ref(false); // 短信按钮禁用状态
|
||
// 记住密码
|
||
let remember = ref(false);
|
||
|
||
// 忘记密码表单数据
|
||
const forgotPasswordForm = ref({
|
||
phone: "",
|
||
captcha: "",
|
||
newPassword: "",
|
||
confirmPassword: "",
|
||
});
|
||
// 忘记密码
|
||
const showForgotPassword = ref(false);
|
||
// 登录方式
|
||
const activeTab = ref("account");
|
||
|
||
const state = reactive({
|
||
redirect: "",
|
||
loginData: {
|
||
uuid: "",
|
||
username: "",
|
||
password: "",
|
||
code: "",
|
||
} as LoginData,
|
||
loginRules: {
|
||
username: [{ required: true, trigger: "blur", message: t("login.rulesUsername") }],
|
||
password: [{ required: true, trigger: "blur", message: t("login.rulesPassword") }],
|
||
code: [{ required: true, trigger: "blur", message: "请输入验证码" }],
|
||
},
|
||
smsLoginRules: {
|
||
username: [{ required: true, trigger: "blur", message: "请输入手机号" }],
|
||
code: [{ required: true, trigger: "blur", message: "请输入验证码" }],
|
||
},
|
||
loginImg: loginImg[0],
|
||
loading: false,
|
||
passwordType: "password",
|
||
// 大写提示禁用
|
||
capslockTooltipDisabled: true,
|
||
otherQuery: {},
|
||
clientHeight: document.documentElement.clientHeight,
|
||
showDialog: false,
|
||
|
||
cookiePass: "",
|
||
});
|
||
|
||
// 忘记密码表单校验规则
|
||
const forgotPasswordRules = ref({
|
||
phone: [
|
||
{ required: true, message: "手机号不能为空", trigger: "blur" },
|
||
{ pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号", trigger: "blur" },
|
||
],
|
||
captcha: [{ required: true, message: "验证码不能为空", trigger: "blur" }],
|
||
newPassword: [
|
||
{ required: true, message: "新密码不能为空", trigger: "blur" },
|
||
{ min: 10, message: "密码长度不能少于10位", trigger: "blur" },
|
||
{
|
||
validator: (rule: any, value: string) => {
|
||
if (!value) return Promise.resolve();
|
||
|
||
// 检查密码复杂度：至少包含四类字符中的三类
|
||
const hasUpperCase = /[A-Z]/.test(value);
|
||
const hasLowerCase = /[a-z]/.test(value);
|
||
const hasNumber = /\d/.test(value);
|
||
const hasSpecialChar = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(value);
|
||
|
||
const typeCount = [hasUpperCase, hasLowerCase, hasNumber, hasSpecialChar].filter(
|
||
Boolean
|
||
).length;
|
||
|
||
if (typeCount < 3) {
|
||
return Promise.reject(
|
||
new Error("密码必须包含大写字母、小写字母、数字、特殊字符中的至少三种")
|
||
);
|
||
}
|
||
|
||
// 检查连续重复字符
|
||
if (/(.)\1{1,}/.test(value)) {
|
||
return Promise.reject(new Error("密码不能包含连续重复字符"));
|
||
}
|
||
|
||
// 检查连续递增/递减数字
|
||
for (let i = 0; i < value.length - 1; i++) {
|
||
if (/\d/.test(value[i]) && /\d/.test(value[i + 1])) {
|
||
const diff = value.charCodeAt(i + 1) - value.charCodeAt(i);
|
||
if (Math.abs(diff) === 1) {
|
||
return Promise.reject(new Error("密码不能包含连续递增或递减的数字"));
|
||
}
|
||
}
|
||
}
|
||
|
||
// 检查连续递增/递减字母
|
||
for (let i = 0; i < value.length - 1; i++) {
|
||
if (/[a-zA-Z]/.test(value[i]) && /[a-zA-Z]/.test(value[i + 1])) {
|
||
const diff = value.charCodeAt(i + 1) - value.charCodeAt(i);
|
||
if (Math.abs(diff) === 1) {
|
||
return Promise.reject(new Error("密码不能包含连续递增或递减的字母"));
|
||
}
|
||
}
|
||
}
|
||
|
||
return Promise.resolve();
|
||
},
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
confirmPassword: [
|
||
// { required: true, message: "请再次输入密码", trigger: "blur" },
|
||
{
|
||
validator: (rule: any, value: string) => {
|
||
if (!value) {
|
||
return Promise.reject(new Error("请再次输入密码"));
|
||
}
|
||
if (value !== forgotPasswordForm.value.newPassword) {
|
||
return Promise.reject(new Error("两次输入的密码不一致"));
|
||
}
|
||
return Promise.resolve();
|
||
},
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
});
|
||
|
||
const {
|
||
loginData,
|
||
loginRules,
|
||
loading,
|
||
// passwordType, capslockTooltipDisabled
|
||
} = toRefs(state);
|
||
|
||
// function checkCapslock(e: any) {
|
||
// const { key } = e;
|
||
// state.capslockTooltipDisabled = key && key.length === 1 && key >= "A" && key <= "Z";
|
||
// }
|
||
|
||
// function showPwd() {
|
||
// if (passwordType.value === "password") {
|
||
// passwordType.value = "";
|
||
// } else {
|
||
// passwordType.value = "password";
|
||
// }
|
||
// nextTick(() => {
|
||
// passwordRef.value.focus();
|
||
// });
|
||
// }
|
||
|
||
/**
|
||
* 登录
|
||
*/
|
||
function onFinish() {
|
||
state.loading = true;
|
||
const user = {
|
||
username: state.loginData.username,
|
||
password: state.loginData.password,
|
||
// rememberMe: state.loginData.rememberMe,
|
||
code: state.loginData.code,
|
||
uuid: state.loginData.uuid,
|
||
};
|
||
if (user.password !== state.cookiePass) {
|
||
user.password = encrypt(user.password);
|
||
}
|
||
userStore
|
||
.login(user)
|
||
.then(() => {
|
||
if (remember.value == true) {
|
||
Cookies.set("username", user.username, { expires: 30 });
|
||
Cookies.set("password", user.password, { expires: 30 });
|
||
Cookies.set("rememberMe", String(remember.value), { expires: 30 });
|
||
} else {
|
||
// 如果用户取消勾选记住密码，应该移除 cookie
|
||
Cookies.remove("username");
|
||
Cookies.remove("password");
|
||
Cookies.remove("rememberMe");
|
||
}
|
||
router.push({ path: "/" });
|
||
state.loading = false;
|
||
message.success("登录成功");
|
||
})
|
||
.catch(() => {
|
||
getCode();
|
||
state.loading = false;
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 短信验证码登录
|
||
*/
|
||
const onSmsLogin = async () => {
|
||
try {
|
||
// ========== 第一部分：表单验证 ==========
|
||
const phoneRegex = /^1[3-9]\d{9}$/;
|
||
if (!loginData.value.username || !phoneRegex.test(loginData.value.username)) {
|
||
message.error("请输入正确的手机号");
|
||
return;
|
||
}
|
||
|
||
if (!loginData.value.code || loginData.value.code.trim() === "") {
|
||
message.error("请输入验证码");
|
||
return;
|
||
}
|
||
|
||
// ========== 第二部分：设置加载状态 ==========
|
||
state.loading = true;
|
||
|
||
// ========== 第三部分：调用短信登录 API ==========
|
||
console.log("开始调用短信登录API, 手机号:", loginData.value.username);
|
||
const res: any = await smsLoginApi(
|
||
loginData.value.username, // 手机号
|
||
loginData.value.code // 短信验证码
|
||
);
|
||
console.log("短信登录API响应:", res);
|
||
|
||
// ========== 第四部分：检查响应结果 ==========
|
||
console.log("检查响应结果, res.code:", res.code, "类型:", typeof res.code);
|
||
|
||
// 注意：code 可能是字符串 "0" 或数字 0，需要兼容处理
|
||
if (res.code !== 0 && res.code !== "0") {
|
||
console.error("短信登录失败, 错误码:", res.code, "错误信息:", res.msg);
|
||
message.error(res.msg || "登录失败");
|
||
return;
|
||
}
|
||
|
||
// ========== 第五部分：提取并存储 Token ==========
|
||
console.log("开始提取Token, res.data:", res.data);
|
||
const token = res.data?.token || res.data; // 兼容两种结构
|
||
|
||
if (!token) {
|
||
console.error("Token为空, res.data结构:", JSON.stringify(res.data));
|
||
message.error("登录失败:未获取到Token");
|
||
return;
|
||
}
|
||
|
||
console.log("Token获取成功:", token);
|
||
// 存储到 Cookie
|
||
setToken(token);
|
||
|
||
// 更新 Store 状态（注意是大写 Token）
|
||
userStore.Token = token;
|
||
console.log("Token已存储到Store");
|
||
|
||
// ========== 第六部分：获取用户信息和角色 ==========
|
||
console.log("开始获取用户信息...");
|
||
const userInfo = await userStore.getInfo();
|
||
console.log("用户信息获取成功:", userInfo);
|
||
const roles = userInfo.roles;
|
||
console.log("用户角色:", roles);
|
||
|
||
// ========== 第七部分：生成路由（获取菜单）==========
|
||
console.log("开始生成路由...");
|
||
const permissionStore = usePermissionStoreHook();
|
||
const accessRoutes: any = await permissionStore.generateRoutes(roles);
|
||
console.log("路由生成成功, 路由数量:", accessRoutes.length);
|
||
|
||
// ========== 第八部分：动态添加路由 ==========
|
||
accessRoutes.forEach((route: any) => {
|
||
router.addRoute(route);
|
||
});
|
||
|
||
// ========== 第九部分：设置路径并跳转 ==========
|
||
router.push({ path: accessRoutes[0].children[0].opturl });
|
||
message.success("登录成功");
|
||
} catch (error: any) {
|
||
// ========== 第十部分：错误处理 ==========
|
||
console.error("短信登录失败", error);
|
||
message.error(error.message || "登录失败，请重试");
|
||
} finally {
|
||
// ========== 第十一部分：关闭加载状态 ==========
|
||
state.loading = false;
|
||
}
|
||
};
|
||
|
||
watch(
|
||
route,
|
||
() => {
|
||
const query = route.query;
|
||
if (query) {
|
||
state.redirect = query.redirect as string;
|
||
state.otherQuery = getOtherQuery(query);
|
||
}
|
||
},
|
||
{
|
||
immediate: true,
|
||
}
|
||
);
|
||
|
||
function getOtherQuery(query: any) {
|
||
return Object.keys(query).reduce((acc: any, cur: any) => {
|
||
if (cur !== "redirect") {
|
||
acc[cur] = query[cur];
|
||
}
|
||
return acc;
|
||
}, {});
|
||
}
|
||
function getCookie() {
|
||
const username = Cookies.get("username");
|
||
let password = Cookies.get("password");
|
||
const rememberMe = Cookies.get("rememberMe");
|
||
rememberMe == "true" ? (remember.value = Boolean(rememberMe)) : false;
|
||
// 保存cookie里面的加密后的密码
|
||
state.cookiePass = password === undefined ? "" : password;
|
||
password = password === undefined ? state.loginData.password : password;
|
||
state.loginData = {
|
||
username: username === undefined ? state.loginData.username : username,
|
||
password: decrypt(password),
|
||
code: "",
|
||
uuid: "",
|
||
};
|
||
remember.value = rememberMe === undefined ? false : Boolean(rememberMe);
|
||
}
|
||
function getCode() {
|
||
getCaptcha().then((result: any) => {
|
||
codeUrl.value = result.data.img;
|
||
state.loginData.uuid = result.data.uuid;
|
||
});
|
||
}
|
||
|
||
// 开始倒计时
|
||
const startCountdown = () => {
|
||
smsCountdown.value = 60;
|
||
|
||
const timer = setInterval(() => {
|
||
smsCountdown.value--;
|
||
|
||
if (smsCountdown.value <= 0) {
|
||
clearInterval(timer);
|
||
smsButtonDisabled.value = false;
|
||
}
|
||
}, 1000);
|
||
};
|
||
|
||
// 显示忘记密码页面
|
||
const showForgotPasswordPage = () => {
|
||
showForgotPassword.value = true;
|
||
};
|
||
//注册用户页面
|
||
const goRegister = () => {
|
||
router.push({ path: "/register" });
|
||
};
|
||
// 返回登录页面
|
||
const backToLogin = () => {
|
||
showForgotPassword.value = false;
|
||
// 重置忘记密码表单
|
||
forgotPasswordForm.value = {
|
||
phone: "",
|
||
captcha: "",
|
||
newPassword: "",
|
||
confirmPassword: "",
|
||
};
|
||
};
|
||
|
||
// 发送短信验证码
|
||
const sendSms = async () => {
|
||
// 检查手机号是否为空
|
||
if (!loginData.value.username) {
|
||
message.error("请输入手机号");
|
||
return;
|
||
}
|
||
|
||
// 检查手机号格式
|
||
const phoneRegex = /^1[3-9]\d{9}$/;
|
||
if (!phoneRegex.test(loginData.value.username)) {
|
||
message.error("请输入正确的手机号");
|
||
return;
|
||
}
|
||
|
||
// 如果正在倒计时，不允许重复发送
|
||
if (smsCountdown.value > 0) {
|
||
return;
|
||
}
|
||
|
||
loading.value = true;
|
||
smsButtonDisabled.value = true;
|
||
|
||
try {
|
||
// 调用发送短信验证码接口，type默认为1（注册类型）
|
||
const res: any = await sendSmsCode(loginData.value.username, 3);
|
||
if (res.code == 1) {
|
||
message.success(res.msg);
|
||
return;
|
||
}
|
||
// 发送成功
|
||
message.success("验证码发送成功");
|
||
|
||
// 开始倒计时
|
||
startCountdown();
|
||
} catch (error) {
|
||
console.error("发送验证码失败", error);
|
||
message.error("验证码发送失败，请重试");
|
||
smsButtonDisabled.value = false;
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
};
|
||
// 发送忘记密码短信验证码
|
||
const sendForgotPasswordSms = async () => {
|
||
// 检查手机号是否为空
|
||
if (!forgotPasswordForm.value.phone) {
|
||
message.error("请输入手机号");
|
||
return;
|
||
}
|
||
|
||
// 检查手机号格式
|
||
const phoneRegex = /^1[3-9]\d{9}$/;
|
||
if (!phoneRegex.test(forgotPasswordForm.value.phone)) {
|
||
message.error("请输入正确的手机号");
|
||
return;
|
||
}
|
||
|
||
// 如果正在倒计时，不允许重复发送
|
||
if (smsCountdown.value > 0) {
|
||
return;
|
||
}
|
||
|
||
loading.value = true;
|
||
smsButtonDisabled.value = true;
|
||
|
||
try {
|
||
// 调用发送短信验证码接口，type=3表示找回密码类型
|
||
const res: any = await sendSmsCode(forgotPasswordForm.value.phone, 2);
|
||
|
||
if (res.code == 1) {
|
||
message.error(res.msg);
|
||
smsButtonDisabled.value = false;
|
||
return;
|
||
}
|
||
|
||
// 发送成功
|
||
message.success("验证码发送成功");
|
||
|
||
// 开始倒计时
|
||
startCountdown();
|
||
} catch (error: any) {
|
||
// console.error("发送验证码失败", error);
|
||
// message.error(error.message || "验证码发送失败，请重试");
|
||
smsButtonDisabled.value = false;
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
};
|
||
// 处理密码重置
|
||
const handleResetPassword = async () => {
|
||
// 先进行表单验证
|
||
try {
|
||
// 手动验证各个字段
|
||
const phoneRegex = /^1[3-9]\d{9}$/;
|
||
if (
|
||
!forgotPasswordForm.value.phone ||
|
||
!phoneRegex.test(forgotPasswordForm.value.phone)
|
||
) {
|
||
message.error("请输入正确的手机号");
|
||
return;
|
||
}
|
||
|
||
if (!forgotPasswordForm.value.captcha) {
|
||
message.error("请输入验证码");
|
||
return;
|
||
}
|
||
|
||
if (!forgotPasswordForm.value.newPassword) {
|
||
message.error("请输入新密码");
|
||
return;
|
||
}
|
||
|
||
// 验证确认密码
|
||
if (!forgotPasswordForm.value.confirmPassword) {
|
||
message.error("请再次输入密码");
|
||
return;
|
||
}
|
||
|
||
// 验证两次密码是否一致
|
||
if (
|
||
forgotPasswordForm.value.newPassword !== forgotPasswordForm.value.confirmPassword
|
||
) {
|
||
message.error("两次输入的密码不一致");
|
||
return;
|
||
}
|
||
|
||
// 密码复杂度校验
|
||
const password = forgotPasswordForm.value.newPassword;
|
||
if (password.length < 10) {
|
||
message.error("密码长度不能少于10位");
|
||
return;
|
||
}
|
||
|
||
const hasUpperCase = /[A-Z]/.test(password);
|
||
const hasLowerCase = /[a-z]/.test(password);
|
||
const hasNumber = /\d/.test(password);
|
||
const hasSpecialChar = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password);
|
||
|
||
const typeCount = [hasUpperCase, hasLowerCase, hasNumber, hasSpecialChar].filter(
|
||
Boolean
|
||
).length;
|
||
if (typeCount < 3) {
|
||
message.error("密码必须包含大写字母、小写字母、数字、特殊字符中的至少三种");
|
||
return;
|
||
}
|
||
|
||
// 检查连续重复字符
|
||
if (/(.)\1{1,}/.test(password)) {
|
||
message.error("密码不能包含连续重复字符");
|
||
return;
|
||
}
|
||
|
||
// 检查连续递增/递减数字
|
||
for (let i = 0; i < password.length - 1; i++) {
|
||
if (/\d/.test(password[i]) && /\d/.test(password[i + 1])) {
|
||
const diff = password.charCodeAt(i + 1) - password.charCodeAt(i);
|
||
if (Math.abs(diff) === 1) {
|
||
message.error("密码不能包含连续递增或递减的数字");
|
||
return;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 检查连续递增/递减字母
|
||
for (let i = 0; i < password.length - 1; i++) {
|
||
if (/[a-zA-Z]/.test(password[i]) && /[a-zA-Z]/.test(password[i + 1])) {
|
||
const diff = password.charCodeAt(i + 1) - password.charCodeAt(i);
|
||
if (Math.abs(diff) === 1) {
|
||
message.error("密码不能包含连续递增或递减的字母");
|
||
return;
|
||
}
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error("表单验证失败", error);
|
||
return;
|
||
}
|
||
|
||
loading.value = true;
|
||
|
||
try {
|
||
// 对密码进行 RSA 加密
|
||
const encryptedPassword = encrypt(forgotPasswordForm.value.newPassword);
|
||
|
||
// 调用重置密码接口，使用加密后的密码
|
||
const res: any = await resetPassword(
|
||
forgotPasswordForm.value.phone,
|
||
forgotPasswordForm.value.captcha,
|
||
encryptedPassword
|
||
);
|
||
|
||
if (res.code == 0) {
|
||
message.success("密码重置成功");
|
||
// 返回登录页面
|
||
backToLogin();
|
||
} else {
|
||
message.error(res.msg || "密码重置失败");
|
||
}
|
||
} catch (error: any) {
|
||
// console.error("密码重置失败", error);
|
||
// message.error(error.message || "密码重置失败，请重试");
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
};
|
||
|
||
onMounted(() => {
|
||
getCode();
|
||
getCookie();
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.login-container {
|
||
margin: 0px auto;
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
min-width: 1500px;
|
||
background-color: rgb(255, 255, 255);
|
||
|
||
h1 {
|
||
position: relative;
|
||
padding: 66px 0px 2px 80px;
|
||
margin-bottom: 0px;
|
||
height: 155px;
|
||
|
||
div {
|
||
position: relative;
|
||
line-height: 71px;
|
||
}
|
||
|
||
.logo-img {
|
||
position: absolute;
|
||
left: 0px;
|
||
top: 10px;
|
||
width: 55px;
|
||
}
|
||
|
||
.system-title {
|
||
margin-left: 71px;
|
||
font-weight: 700;
|
||
font-size: 35px;
|
||
color: rgb(47, 107, 152);
|
||
}
|
||
}
|
||
|
||
:deep(.ant-tabs-tab) {
|
||
padding: 8px 0;
|
||
}
|
||
|
||
:deep(.ant-input-prefix) {
|
||
display: flex;
|
||
width: 26px;
|
||
|
||
svg {
|
||
width: 18px;
|
||
height: 18px;
|
||
margin-right: 4px;
|
||
}
|
||
}
|
||
|
||
.login-wrapper {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 72%;
|
||
min-height: 600px;
|
||
background: url("@/assets/images/login-bg.jpg");
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
// 左侧背景区域
|
||
.left-section {
|
||
.slogan {
|
||
position: absolute;
|
||
top: 28%;
|
||
left: 18%;
|
||
width: 440px;
|
||
height: 112px;
|
||
color: rgb(255, 255, 255);
|
||
font-size: 40px;
|
||
}
|
||
}
|
||
|
||
// 右侧登录卡片区域
|
||
.right-section {
|
||
position: absolute;
|
||
left: 74%;
|
||
top: 20%;
|
||
width: 20%;
|
||
max-height: 402px;
|
||
max-width: 400px;
|
||
min-height: 362px;
|
||
border-radius: 3px;
|
||
padding: 15px 24px 24px;
|
||
background-color: rgb(255, 255, 255);
|
||
|
||
.ant-tabs-nav {
|
||
height: 38px;
|
||
}
|
||
}
|
||
|
||
/* 验证码布局 */
|
||
.captcha-row {
|
||
display: flex;
|
||
|
||
.ant-row {
|
||
display: flex;
|
||
align-items: start;
|
||
}
|
||
|
||
/* gap: 12px;
|
||
align-items: center; */
|
||
|
||
.captcha-img {
|
||
width: 100%;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
background-repeat: no-repeat;
|
||
background-size: contain;
|
||
background-position: center center;
|
||
}
|
||
|
||
a {
|
||
line-height: 50px;
|
||
float: right;
|
||
color: #1890ff;
|
||
text-decoration: none;
|
||
background-color: transparent;
|
||
outline: none;
|
||
cursor: pointer;
|
||
transition: color 0.3s;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
// 忘记密码样式
|
||
.forgot-link {
|
||
float: right;
|
||
color: #1677ff;
|
||
font-size: 14px;
|
||
}
|
||
|
||
// 短信登录占位提示
|
||
.sms-login-tip {
|
||
padding: 40px 20px;
|
||
text-align: center;
|
||
color: #999;
|
||
}
|
||
|
||
// 忘记密码页面样式
|
||
.forgot-password-container {
|
||
.forgot-password-header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 24px;
|
||
|
||
.back-button {
|
||
padding: 0;
|
||
margin-right: 12px;
|
||
color: #1677ff;
|
||
font-size: 14px;
|
||
|
||
&:hover {
|
||
color: #4096ff;
|
||
}
|
||
}
|
||
|
||
.forgot-password-title {
|
||
margin: 0;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|