292 lines
11 KiB
Vue
292 lines
11 KiB
Vue
<template>
|
|
<div class="main">
|
|
<div class="container">
|
|
<div class="left">
|
|
<div class="left-logo-box"></div>
|
|
</div>
|
|
<!-- 登录 -->
|
|
<div class="right" v-if="dataStore.type === 1">
|
|
<div class="right-logo-box">
|
|
<div>
|
|
<div class="right-logo-font">登录</div>
|
|
<div class="sign-in">Sign in</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-left: 100px">
|
|
<el-form
|
|
ref="ruleFormRef"
|
|
style="width: 300px"
|
|
:model="dataStore.ruleForm"
|
|
:rules="dataStore.rules"
|
|
label-width="auto"
|
|
label-position="top"
|
|
class="demo-ruleForm"
|
|
hide-required-asterisk
|
|
>
|
|
<el-form-item label="账号" prop="username">
|
|
<el-input v-model="dataStore.ruleForm.username" :prefix-icon="Iphone" autocomplete="off" />
|
|
</el-form-item>
|
|
<el-form-item label="密码" prop="password">
|
|
<el-input
|
|
v-model="dataStore.ruleForm.password"
|
|
type="password"
|
|
show-password
|
|
:prefix-icon="Lock"
|
|
autocomplete="off"
|
|
/>
|
|
<!-- <div
|
|
style="
|
|
width: 350px;
|
|
font-size: 12px;
|
|
line-height: 1;
|
|
color: #4178d5;
|
|
text-align: right;
|
|
cursor: pointer;
|
|
"
|
|
@click="handleTabClick(2)"
|
|
>
|
|
忘记密码?
|
|
</div> -->
|
|
</el-form-item>
|
|
<!-- <el-form-item prop="captcha">
|
|
<span style="margin-right: 10px; color: #606266">验证码</span>
|
|
<el-input v-model="dataStore.ruleForm.captcha" style="width: 80px" autocomplete="off" />
|
|
<img :src="dataStore.base64" style="width: 150px; height: 60px; margin: 0 6px" />
|
|
<el-button type="primary" v-debounce="getLoginCodeImg">刷新</el-button>
|
|
</el-form-item> -->
|
|
<el-form-item>
|
|
<el-button
|
|
size="large"
|
|
type="primary"
|
|
style="width: 100px; height: 36px; border-radius: 2px; box-shadow: 2px 5px 16px #4178d5"
|
|
v-debounce="submitForm"
|
|
>登录</el-button
|
|
>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
<!--忘记密码 -->
|
|
<div class="right" v-if="dataStore.type === 2">
|
|
<div style="margin-left: 100px">
|
|
<el-button
|
|
type="primary"
|
|
:icon="ArrowLeftBold"
|
|
circle
|
|
style="margin: 60px 0 20px"
|
|
@click="handleTabClick(1)"
|
|
/>
|
|
<el-form
|
|
ref="resetRuleFormRef"
|
|
:model="dataStore.resetRuleForm"
|
|
:rules="dataStore.resetRules"
|
|
label-width="auto"
|
|
label-position="top"
|
|
class="demo-ruleForm"
|
|
hide-required-asterisk
|
|
>
|
|
<el-form-item label="手机号" prop="iphone">
|
|
<el-input v-model="dataStore.resetRuleForm.iphone" :prefix-icon="Iphone" autocomplete="off" />
|
|
</el-form-item>
|
|
<el-form-item prop="code" label="验证码">
|
|
<el-input v-model="dataStore.resetRuleForm.code" autocomplete="off">
|
|
<template #append>
|
|
<div style="font-size: 14px; color: #4178d5; cursor: pointer" v-debounce="handleGetCode">
|
|
{{ dataStore.codeFont }}
|
|
</div>
|
|
<div v-if="dataStore.isShowTime" style="margin: 0 5px; font-size: 14px; color: #4178d5">
|
|
{{ dataStore.timeCount }}s
|
|
</div>
|
|
</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="新密码" prop="newPassword">
|
|
<el-input
|
|
v-model="dataStore.resetRuleForm.newPassword"
|
|
type="password"
|
|
show-password
|
|
:prefix-icon="Lock"
|
|
autocomplete="off"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="确认密码" prop="confirmPassword">
|
|
<el-input
|
|
v-model="dataStore.resetRuleForm.confirmPassword"
|
|
type="password"
|
|
show-password
|
|
:prefix-icon="Lock"
|
|
autocomplete="off"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button
|
|
size="large"
|
|
type="primary"
|
|
style="width: 100px; height: 36px; border-radius: 2px; box-shadow: 2px 5px 16px #4178d5"
|
|
v-debounce="resetConfirmForm"
|
|
>提交</el-button
|
|
>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import CryptoJS from "crypto-js";
|
|
//loginCodeImgApi
|
|
import { loginApi } from "@/api/modules/login";
|
|
import { Iphone, Lock, ArrowLeftBold } from "@element-plus/icons-vue";
|
|
import { RULES, RULE_FORM, RESET_RULES, RESET_RULE_FORM } from "./constant/index";
|
|
import { cloneDeep } from "lodash-es";
|
|
//用户信息存储
|
|
import { useUserStore } from "@/stores/modules/user";
|
|
const userStore = useUserStore();
|
|
const $router = useRouter();
|
|
//登录表单Ref
|
|
const ruleFormRef: any = ref(null);
|
|
//修改密码表单Ref
|
|
const resetRuleFormRef: any = ref(null);
|
|
//数据源
|
|
const dataStore = reactive<any>({
|
|
timeCount: 120, //修改密码里验证码倒计时
|
|
isShowTime: false,
|
|
|
|
base64: "", //验证码图片
|
|
type: 1, //1:登录,2:修改密码
|
|
codeFont: "获取验证码", //修改密码里的验证码按钮文字
|
|
ruleForm: cloneDeep(RULE_FORM), //登录表单数据
|
|
rules: cloneDeep(RULES), //登录表单验证
|
|
resetRuleForm: cloneDeep(RESET_RULE_FORM), //修改密码表单数据
|
|
resetRules: cloneDeep(RESET_RULES) //修改密码表单验证
|
|
});
|
|
//计时器
|
|
let intervalId: any = null;
|
|
|
|
//登录
|
|
const submitForm = () => {
|
|
console.log(ruleFormRef);
|
|
if (!ruleFormRef) return;
|
|
ruleFormRef?.value?.validate((valid: any) => {
|
|
if (valid) {
|
|
login();
|
|
} else {
|
|
console.log("error submit!");
|
|
}
|
|
});
|
|
};
|
|
//忘记密码提交事件
|
|
const resetConfirmForm = () => {
|
|
if (!resetRuleFormRef) return;
|
|
resetRuleFormRef?.value?.validate((valid: any) => {
|
|
if (valid) {
|
|
let password = CryptoJS.MD5(dataStore.ruleForm.password)?.toString();
|
|
console.log(password, "==== dataStore.ruleForm.password====");
|
|
console.log("submit!");
|
|
} else {
|
|
console.log("error submit!");
|
|
}
|
|
});
|
|
};
|
|
//登录接口
|
|
const login = async () => {
|
|
const result: any = await loginApi({
|
|
...dataStore.ruleForm,
|
|
password: CryptoJS?.MD5(dataStore.ruleForm.password)?.toString()
|
|
});
|
|
|
|
if (result?.code === 0) {
|
|
const { data } = result;
|
|
setUserData(data);
|
|
}
|
|
// else {
|
|
// getLoginCodeImg();
|
|
// }
|
|
};
|
|
//获取验证码图片接口
|
|
// const getLoginCodeImg = async () => {
|
|
// const result: any = await loginCodeImgApi();
|
|
// if (result?.code === 0) {
|
|
// const { data } = result;
|
|
// const { captcha, token } = data;
|
|
// dataStore.base64 = captcha;
|
|
// dataStore.ruleForm.token = token;
|
|
// }
|
|
// };
|
|
// getLoginCodeImg();
|
|
//登录和密码重置切换
|
|
const handleTabClick = (type: any) => {
|
|
dataStore.type = type;
|
|
for (let key in dataStore.ruleForm) {
|
|
dataStore.ruleForm[key] = "";
|
|
}
|
|
for (let key in dataStore.resetRuleForm) {
|
|
dataStore.resetRuleForm[key] = "";
|
|
}
|
|
if (intervalId) {
|
|
handleClearInterval();
|
|
dataStore.timeCount = 120;
|
|
dataStore.isShowTime = false;
|
|
}
|
|
};
|
|
//120秒验证时间
|
|
const updateCountdown = () => {
|
|
intervalId = setInterval(() => {
|
|
if (dataStore.timeCount > 0) {
|
|
dataStore.isShowTime = true;
|
|
dataStore.timeCount--;
|
|
} else {
|
|
handleClearInterval();
|
|
dataStore.timeCount = 120;
|
|
dataStore.isShowTime = false;
|
|
}
|
|
}, 1000);
|
|
};
|
|
//获取验证码
|
|
const handleGetCode = () => {
|
|
//如果计时器已经启动了,就不要再去触发了
|
|
if (intervalId) {
|
|
return;
|
|
}
|
|
resetRuleFormRef.value.validateField("iphone", (valid: any) => {
|
|
if (valid) {
|
|
updateCountdown();
|
|
} else {
|
|
}
|
|
});
|
|
};
|
|
//清理定时器
|
|
const handleClearInterval = () => {
|
|
clearInterval(intervalId);
|
|
intervalId = null;
|
|
};
|
|
|
|
// 设置用户数据
|
|
const setUserData = (data: any) => {
|
|
const { username, uid, token, avatar } = data;
|
|
console.log();
|
|
// 设置token
|
|
userStore.setToken("Bearer" + " " + token);
|
|
userStore.setUid(uid);
|
|
userStore.setNickname(username);
|
|
userStore.setAvatar(avatar);
|
|
// await userStore.getAuthMenuList();
|
|
//跳转到首页
|
|
setTimeout(() => {
|
|
$router.push("/admin/index");
|
|
}, 500);
|
|
};
|
|
|
|
onUnmounted(() => {
|
|
//页面卸载的时候清空定时器
|
|
if (intervalId) {
|
|
handleClearInterval();
|
|
}
|
|
});
|
|
</script>
|
|
<style lang="scss">
|
|
@import "./index.scss";
|
|
</style>
|