<template>
|
<el-form size="large" class="login-content-form">
|
<el-form-item class="login-animation1">
|
<el-input type="text" placeholder="请输入用户名" v-model="ruleForm.name" clearable autocomplete="off" size="large">
|
<template #prefix>
|
<el-icon class="el-input__icon" style="margin-right: 20px"><img src="../../../assets/loginPage/login_icon_user.png" style="width: 24px; height: 24px" /></el-icon>
|
</template>
|
</el-input>
|
</el-form-item>
|
<el-form-item class="login-animation2">
|
<el-input :type="isShowPassword ? 'text' : 'password'" placeholder="请输入密码" v-model="ruleForm.pwd" autocomplete="off" size="large" @keyup.enter.native="onSignIn">
|
<template #prefix>
|
<el-icon class="el-input__icon" style="margin-right: 20px"><img src="../../../assets/loginPage/login_icon_password.png" style="width: 24px; height: 24px" /></el-icon>
|
</template>
|
<template #suffix>
|
<i class="iconfont el-input__icon login-content-password" :class="isShowPassword ? 'icon-xianshimima' : 'icon-yincangmima'" @click="isShowPassword = !isShowPassword"> </i>
|
</template>
|
</el-input>
|
</el-form-item>
|
<el-form-item class="login-animation4 codeDeal">
|
<el-checkbox v-model="saveCode" label="记住密码" size="large" style="color: #11FEEE"/>
|
<!-- <span class="forgetCode" @click="identify">忘记密码？</span>-->
|
</el-form-item>
|
<div class="btnBox">
|
<el-button type="primary" class="login-content-submit" round @click="onSignIn" :loading="loading.signIn">
|
<span>登 录</span>
|
</el-button>
|
</div>
|
</el-form>
|
<el-dialog v-model="identifyDialog" title="重置密码" width="30%" center @close="clearIdentity">
|
<el-form :model="identity" label-width="80px" ref="identifyRef" :rules="identityRules">
|
<el-divider border-style="dashed">身份验证</el-divider>
|
<el-form-item label="姓名" prop="realName">
|
<el-input v-model="identity.realName"/>
|
</el-form-item>
|
<el-form-item label="身份证号" prop="identify">
|
<el-input v-model="identity.identify"/>
|
</el-form-item>
|
<el-form-item label="手机号" prop="phone">
|
<el-input v-model="identity.phone"/>
|
</el-form-item>
|
<el-divider border-style="dashed">重设密码</el-divider>
|
<el-form-item label="密码" prop="password">
|
<el-input v-model="identity.password" :type="showPass ? 'text': 'password'" autocomplete="off">
|
<template #suffix>
|
<i class="iconfont el-input__icon login-content-password" :class="showPass ? 'icon-xianshimima' : 'icon-yincangmima'" @click="showPass = !showPass"> </i>
|
</template>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="确认密码" prop="rePassword">
|
<el-input
|
v-model="identity.rePassword"
|
:type="showRePass ? 'text': 'password'"
|
autocomplete="off"
|
>
|
<template #suffix>
|
<i class="iconfont el-input__icon login-content-password" :class="showRePass ? 'icon-xianshimima' : 'icon-yincangmima'" @click="showRePass = !showRePass"> </i>
|
</template>
|
</el-input>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button type="warning" @click="identifyDialog = false" size="default">取消</el-button>
|
<el-button type="primary" @click="confirmIdentity(identifyRef)" size="default">确认</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script lang="ts">
|
import {toRefs, reactive, defineComponent, computed, ref, onMounted} from 'vue';
|
import { useRoute, useRouter } from 'vue-router';
|
import { ElMessage } from 'element-plus';
|
import { useI18n } from 'vue-i18n';
|
import Cookies from 'js-cookie';
|
import { storeToRefs } from 'pinia';
|
import { useThemeConfig } from '/@/stores/themeConfig';
|
import { initFrontEndControlRoutes } from '/@/router/frontEnd';
|
import { initBackEndControlRoutes } from '/@/router/backEnd';
|
import { Session } from '/@/utils/storage';
|
import { formatAxis } from '/@/utils/formatTime';
|
import { NextLoading } from '/@/utils/loading';
|
import { useLoginApi } from '/@/api/login';
|
import { useUserInfo } from '/@/stores/userInfo';
|
import type { FormInstance, FormRules } from 'element-plus'
|
import "amfe-flexible";
|
import {verifyPhone,verifyIdCard} from "/@/utils/toolsValidate"
|
import { Base64 } from 'js-base64'
|
import {useMenuApi} from "/@/api/systemManage/menu";
|
export default defineComponent({
|
name: 'accountLogin',
|
setup() {
|
const { t } = useI18n();
|
const userInfo = useUserInfo();
|
const route = useRoute();
|
const router = useRouter();
|
const state = reactive({
|
isShowPassword: false,
|
showPass: false,
|
showRePass: false,
|
saveCode: false,
|
ruleForm: {
|
name: '',
|
pwd: ''
|
},
|
loading: {
|
signIn: false
|
},
|
identity:{
|
realName: '',
|
identify: '',
|
phone: '',
|
password: '',
|
rePassword: ''
|
},
|
identifyDialog: false,
|
menu: []
|
});
|
const identifyRef = ref<FormInstance>()
|
|
// 页面载入时执行方法
|
onMounted(() => {
|
hasUserCodeOrPassword()
|
const baseSize = 38;
|
/* 设置 rem 函数 */
|
function setRem() {
|
const scale = document.documentElement.clientWidth / 1920; /* 当前页面宽度缩放比例，可根据自己需要修改 */
|
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + "px";/* 设置页面根节点字体大小 */
|
}
|
setRem();/* 初始化 rem */
|
|
window.onresize = () => {
|
setRem();/* 改变窗口大小时重新设置 rem */
|
}
|
// getAllDepartment();
|
});
|
|
const hasUserCodeOrPassword =()=> {
|
if (localStorage.getItem('userCode') && localStorage.getItem('userPassword')) {
|
state.ruleForm.name = localStorage.getItem('userCode') as string
|
state.ruleForm.pwd = Base64.decode(localStorage.getItem('userPassword'))//解密
|
state.saveCode = true
|
}
|
}
|
const checkCode = (rule: any, value: any, callback: any) => {
|
if (value == '') {
|
return callback(new Error('该内容不能为空'))
|
}
|
setTimeout(() => {
|
if (!verifyIdCard(value)) {
|
callback(new Error('身份证格式不正确'))
|
}else callback();
|
}, 400)
|
}
|
const checkPhone = (rule: any, value: any, callback: any) => {
|
if (value == '') {
|
return callback(new Error('该内容不能为空'))
|
}
|
setTimeout(() => {
|
if (!verifyPhone(value)) {
|
callback(new Error('手机号格式不正确'))
|
}else callback();
|
}, 400)
|
}
|
// 修改密码
|
const validatePass = (rule: any, value: any, callback: any) => {
|
if (value === '') {
|
callback(new Error('该内容不能为空'))
|
} else {
|
if (state.identity.rePassword !== '') {
|
if (!identifyRef.value) return
|
identifyRef.value.validateField('rePassword', () => null)
|
}
|
callback()
|
}
|
}
|
const validatePass2 = (rule: any, value: any, callback: any) => {
|
if (value === '') {
|
callback(new Error('该内容不能为空'))
|
} else if (value !== state.identity.password) {
|
callback(new Error("两次输入的密码不一致!"))
|
} else {
|
callback()
|
}
|
}
|
const identityRules = reactive({
|
realName: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
|
identify: [{ required: true, validator: checkCode, trigger: 'blur'}],
|
phone: [{ required: true, validator: checkPhone, trigger: 'blur' }],
|
pwd: [{ required: true, validator: validatePass, trigger: 'blur' }],
|
rePassword: [{ required: true, validator: validatePass2, trigger: 'blur' }]
|
});
|
|
// 时间获取
|
const currentTime = computed(() => {
|
return formatAxis(new Date());
|
});
|
// 登录
|
const onSignIn = async () => {
|
state.loading.signIn = true;
|
// 存储 token 到浏览器缓存
|
let res = await useLoginApi().signIn(state.ruleForm);
|
if (res.data.code === 100) {
|
await userInfo.setUserInfos(res.data.data);
|
Cookies.set('token', res.data.data.tk);
|
Cookies.set('uid', res.data.data.uid);
|
Cookies.set('roles', JSON.stringify(res.data.data.roles));
|
if (state.saveCode) {
|
localStorage.setItem('userCode', state.ruleForm.name)
|
localStorage.setItem('userPassword', Base64.encode(state.ruleForm.pwd),)
|
} else {
|
localStorage.removeItem('userCode')
|
localStorage.removeItem('userPassword')
|
}
|
await signInSuccess();
|
} else {
|
state.loading.signIn = false;
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
state.loading.signIn = false;
|
// Session.set('token', Math.random().toString(36).substr(0));
|
// // 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断（模拟数据）
|
// Cookies.set('name', state.ruleForm.name);
|
// if (!themeConfig.value.isRequestRoutes) {
|
// // 前端控制路由，2、请注意执行顺序
|
// await initFrontEndControlRoutes();
|
// signInSuccess();
|
// } else {
|
// // 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
|
// // 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
|
// await initBackEndControlRoutes();
|
// // 执行完 initBackEndControlRoutes，再执行 signInSuccess
|
// signInSuccess();
|
// }
|
};
|
|
const getMenu = async () => {
|
let res = await useMenuApi().getMenuAdmin();
|
if (res.data.code === 100) {
|
state.menu = JSON.parse(JSON.stringify(res.data.data))
|
router.push(state.menu[0].path);
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
|
};
|
|
// 登录成功后的跳转
|
const signInSuccess = async () => {
|
// 初始化登录成功时间问候语
|
let currentTimeInfo = currentTime.value;
|
// 登录成功，跳到转首页
|
// 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
|
// if (route.json.query?.redirect) {
|
getMenu()
|
// console.log(state.menu,'menu')
|
|
// router.push({
|
// path: <string>route.json.query?.redirect,
|
// query: Object.keys(<string>route.json.query?.params).length > 0 ? JSON.parse(<string>route.json.query?.params) : '',
|
// });
|
// } else {
|
// router.push('/loginPage');
|
// }
|
state.loading.signIn = true;
|
const signInText = t('message.signInText');
|
ElMessage.success(`${currentTimeInfo}，${signInText}`);
|
// 登录成功提示
|
// 关闭 loading
|
// 添加 loading，防止第一次进入界面时出现短暂空白
|
// NextLoading.start();
|
};
|
|
// 修改密码
|
const identify =()=>{
|
state.identifyDialog = true
|
}
|
|
// 提交验证
|
const confirmIdentity = (formEl: FormInstance | undefined) => {
|
if (!formEl) return
|
formEl.validate(async(valid) => {
|
if (valid) {
|
const res = await useLoginApi().changeCode(state.identity);
|
if(res.data.code == '200'){
|
ElMessage({
|
type: 'success',
|
message: '修改成功，请使用新密码登录'
|
});
|
}else{
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
state.identifyDialog = false
|
} else {
|
console.log('error submit!')
|
return false
|
}
|
})
|
}
|
const clearIdentity = ()=>{
|
state.identity = {
|
realName: '',
|
identify: '',
|
phone: '',
|
password: '',
|
rePassword: ''
|
}
|
}
|
|
return {
|
identifyRef,
|
identityRules,
|
getMenu,
|
clearIdentity,
|
onSignIn,
|
identify,
|
confirmIdentity,
|
validatePass,
|
validatePass2,
|
...toRefs(state)
|
};
|
}
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.login-content-form {
|
margin-top: 30px;
|
width: 100%;
|
|
.el-input ::v-deep(.el-input__wrapper) {
|
height: 48px;
|
background-color: #0A3296;
|
border-radius: 2px;
|
padding: 0 30px;
|
border: 1px solid rgba(17,254,238,.4);
|
.el-input__inner{
|
color: #fff;
|
}
|
&:focus-within {
|
border: 1px solid #11FEEE;
|
}
|
}
|
@for $i from 1 through 4 {
|
.login-animation#{$i} {
|
opacity: 0;
|
animation-name: error-num;
|
animation-duration: 0.5s;
|
animation-fill-mode: forwards;
|
animation-delay: calc($i/10) + s;
|
}
|
}
|
.codeDeal ::v-deep(.el-form-item__content) {
|
display: flex;
|
justify-content: space-between;
|
.el-checkbox__inner{
|
background-color: transparent;
|
border: 1px solid #11FEEE;
|
}
|
|
.forgetCode {
|
color: #2053d7;
|
cursor: pointer;
|
}
|
}
|
.login-content-password {
|
width: 100%;
|
display: inline-block;
|
cursor: pointer;
|
&:hover {
|
color: #909399;
|
}
|
}
|
.login-content-code {
|
width: 100%;
|
padding: 0;
|
font-weight: bold;
|
letter-spacing: 5px;
|
}
|
.btnBox{
|
display: flex;
|
justify-content: center;
|
}
|
.login-content-submit {
|
width: 100%;
|
height: 56px;
|
font-size: 18px;
|
border-radius: 28px;
|
border: 1px solid #11FEEE;
|
letter-spacing: 4px;
|
font-weight: 300;
|
background-image: linear-gradient(to bottom,#0081C2,#003892,#0081C2);
|
transition: 0.3s;
|
box-shadow: 0 8px 30px rgba(88,101,241,.4);
|
&:hover {
|
letter-spacing: 6px;
|
border: 2px solid #11FEEE;
|
color: #11FEEE;
|
font-weight: bolder;
|
background-color: transparent;
|
background-image: linear-gradient(to bottom,#003892,#003892,#003892);
|
}
|
&:active {
|
letter-spacing: 6px;
|
border: 2px solid #11FEEE;
|
color: #11FEEE;
|
font-weight: bolder;
|
background-color: transparent;
|
background-image: linear-gradient(to bottom,#003892,#003892,#003892);
|
}
|
}
|
}
|
</style>
|
