diff --git a/src/pages/login/apis/type.ts b/src/pages/login/apis/type.ts index 8ef7ffe..301fe2a 100644 --- a/src/pages/login/apis/type.ts +++ b/src/pages/login/apis/type.ts @@ -1,34 +1,27 @@ export interface LoginRequestData { - /** admin 或 editor */ - username: string + username: string; /** 密码 */ - password: string, - //手机号 - // phone: string, - //手机验证码 - //mobileCode: string + password: string; } export interface phoneLoginRequestData { //手机号 - phone: string, + phone: string; //手机验证码 - mobileCode: string + mobileCode: string; } export interface forgetRequestData { - /** admin 或 editor */ - // username: string /** 密码 */ - password: string, + password: string; //确认密码 - confirmPassword: string, + confirmPassword: string; //手机号 - phone: string, + phone: string; //手机验证码 - mobileCode: string + mobileCode: string; } -export type CaptchaResponseData = ApiResponseData +export type CaptchaResponseData = ApiResponseData; -export type LoginResponseData = ApiResponseData<{ token: string }> +export type LoginResponseData = ApiResponseData<{ token: string }>; diff --git a/src/pages/login/index.vue b/src/pages/login/index.vue index a8784ac..f6055b6 100644 --- a/src/pages/login/index.vue +++ b/src/pages/login/index.vue @@ -23,7 +23,10 @@ const { isFocus, handleBlur, handleFocus } = useFocus(); /** 登录表单元素的引用 */ const loginFormRef = ref(null); - +/** 短信验证码登录表单元素的引用 */ +const phoneFormRef = ref(null); +/** 短信验证码登录表单元素的引用 */ +const forgetFormRef = ref(null); /** 登录按钮 Loading */ const loading = ref(false); //是否验证码登录 @@ -59,20 +62,6 @@ const forgetFormData: forgetRequestData = reactive({ mobileCode: "", }); -// const loginFormRules: FormRules = { -// username: [{ required: true, message: "请输入用户名", trigger: "blur" }], -// password: [ -// { required: true, message: "请输入密码", trigger: "blur" }, -// { min: 8, max: 16, message: "长度在 8 到 16 个字符", trigger: "blur" }, -// ], -// mobileCode: [ -// { required: true, message: "请输入手机验证码", trigger: "blur" }, -// ], -// phone: [ -// { required: true, message: "请输入手机号", trigger: "blur" }, -// { min: 4, max: 4, message: "请检查验证码是否正确!", trigger: "blur" }, -// ], -// }; /** 登录表单校验规则 */ const loginFormRules = reactive>({ username: [{ required: true, message: "请输入用户名", trigger: "blur" }], @@ -82,7 +71,7 @@ const loginFormRules = reactive>({ ], }); -/** 登录表单校验规则 */ +/** 短信验证码登录登录表单校验规则 */ const phoneFormRules = reactive>({ phone: [ { required: true, message: "请输入手机号", trigger: "blur" }, @@ -159,15 +148,14 @@ const forgetFormRules = reactive>({ }, ], }); -/** 登录 */ -async function handleLogin(formEl) { +/** 账号密码登录 */ +async function handleUserLogin(formEl) { if (!formEl) return; await formEl.validate((valid, fields) => { if (valid) { loading.value = true; loginApi(loginFormData) .then(({ data }) => { - console.log(data); userStore.setToken(data.token); router.push("/"); }) @@ -182,27 +170,54 @@ async function handleLogin(formEl) { return; } }); - // loginFormRef.value?.validate((valid) => { - // if (!valid) { - // ElMessage.error("表单校验不通过"); - // return; - // } - // loading.value = true; - // loginApi(loginFormData) - // .then(({ data }) => { - // console.log(data); - // userStore.setToken(data.token); - // router.push("/"); - // }) - // .catch(() => { - // loginFormData.password = ""; - // }) - // .finally(() => { - // loading.value = false; - // }); - // }); } - +//短信验证码登录 +async function handlePhoneLogin(formEl) { + if (!formEl) return; + await formEl.validate((valid, fields) => { + if (valid) { + loading.value = true; + loginApi(forgetFormData) + .then(({ data }) => { + console.log(data); + userStore.setToken(data.token); + router.push("/"); + }) + .catch(() => { + forgetFormData.mobileCode = ""; + }) + .finally(() => { + loading.value = false; + }); + } else { + ElMessage.error("表单校验不通过"); + return; + } + }); +} +//忘记密码提交按钮 +async function submit(formEl) { + if (!formEl) return; + await formEl.validate((valid, fields) => { + if (valid) { + loading.value = true; + loginApi() + .then(({ data }) => { + userStore.setToken(data.token); + router.push("/"); + }) + .catch(() => { + phoneFormData.mobileCode = ""; + }) + .finally(() => { + loading.value = false; + }); + } else { + ElMessage.error("表单校验不通过"); + return; + } + }); +} //手机验证码登录 true是账号密码登录 false是手机验证码登录 function mobileCode(type: boolean) { loginMethod.value = type; @@ -242,14 +257,15 @@ watch(isDisabled, (newVal, oldVal) => {
数据运营管理平台
-
+
- + { size="large" /> - + { @focus="handleFocus" /> - - - - - - - - - 登 录 - -
-
- - - { maxlength="11" /> - + { /> + + + 登 录 + + + + + + + + + +