替换成youchain
parent
6bd3ddb555
commit
25a98632d1
|
|
@ -1,201 +0,0 @@
|
|||
.login-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(/@/assets/images/login/login-bg.png) no-repeat center;
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.box-item {
|
||||
width: 444px;
|
||||
height: 600px;
|
||||
&.desc {
|
||||
background: #ffffff;
|
||||
border-radius: 12px 0px 0px 12px;
|
||||
box-shadow: 0px 16px 73px 8px rgba(203, 203, 203, 0.2);
|
||||
padding: 23px 25px;
|
||||
}
|
||||
&.login {
|
||||
background: #ffffff;
|
||||
border-radius: 0px 12px 12px 0px;
|
||||
padding: 34px 42px;
|
||||
position: relative;
|
||||
}
|
||||
.login-qr {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 66px;
|
||||
height: 66px;
|
||||
}
|
||||
.welcome {
|
||||
background: url(/@/assets/images/login/left-bg1.png) no-repeat center;
|
||||
background-size: cover;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 6px 20px 0px rgba(33,47,117,0.10);
|
||||
padding-top: 35px;
|
||||
p{
|
||||
color: #333333;
|
||||
line-height: 25px;
|
||||
letter-spacing: 0.26px;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
font-size: 26px;
|
||||
}
|
||||
.sub-welcome{
|
||||
color: #333333;
|
||||
line-height: 25px;
|
||||
letter-spacing: 0.26px;
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
.app-qr-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
margin-top: 20px;
|
||||
.app-qr {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 50%;
|
||||
> img {
|
||||
width: 112px;
|
||||
height: 112px;
|
||||
}
|
||||
|
||||
.qr-desc {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 11px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
> img {
|
||||
width: 15px;
|
||||
height: 18px;
|
||||
margin-right: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
.qr-desc-marquee {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 11px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
|
||||
@keyframes marquee {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-30%);
|
||||
}
|
||||
}
|
||||
|
||||
.marquee {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
animation: marquee 5s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.login-title {
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
color: #1e1e1e;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
.login-form {
|
||||
.captcha-input {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.captcha-img {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.ant-input,
|
||||
.ant-input-affix-wrapper {
|
||||
height: 44px;
|
||||
border: 1px solid #ededed;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.code-btn{
|
||||
height: 44px;
|
||||
padding: 4px 5px;
|
||||
width: 108px;
|
||||
}
|
||||
|
||||
.eye-box {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
.eye-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
width: 350px;
|
||||
height: 50px;
|
||||
background: #1748FD;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
line-height: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.more {
|
||||
margin-top: 30px;
|
||||
.title-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
> p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.line {
|
||||
width: 114px;
|
||||
height: 1px;
|
||||
background: #e6e6e6;
|
||||
}
|
||||
.title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #a1aebe;
|
||||
margin: 0 19px;
|
||||
}
|
||||
.login-type {
|
||||
padding: 0 5px;
|
||||
margin-top: 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
> img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,246 +0,0 @@
|
|||
<!--
|
||||
* 登录
|
||||
*
|
||||
* @Author: 1024创新实验室-主任：卓大
|
||||
* @Date: 2022-09-12 22:34:00
|
||||
* @Wechat: zhuda1024
|
||||
* @Email: lab1024@163.com
|
||||
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
|
||||
*
|
||||
-->
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<div class="box-item desc">
|
||||
<div class="welcome">
|
||||
<p>欢迎登录 SmartAdmin V3</p>
|
||||
<p class="sub-welcome">「高质量代码、简洁、安全」的开发平台</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-item login">
|
||||
<img class="login-qr" :src="loginQR" />
|
||||
<div class="login-title">账号登录</div>
|
||||
<a-form ref="formRef" class="login-form" :model="loginForm" :rules="rules">
|
||||
<a-form-item name="loginName">
|
||||
<a-input v-model:value.trim="loginForm.loginName" placeholder="请输入用户名" />
|
||||
</a-form-item>
|
||||
<a-form-item name="emailCode" v-if="emailCodeShowFlag">
|
||||
<a-input-group compact>
|
||||
<a-input style="width: calc(100% - 110px)" v-model:value="loginForm.emailCode" autocomplete="on" placeholder="请输入邮箱验证码" />
|
||||
<a-button @click="sendSmsCode" class="code-btn" type="primary" :disabled="emailCodeButtonDisabled">
|
||||
{{ emailCodeTips }}
|
||||
</a-button>
|
||||
</a-input-group>
|
||||
</a-form-item>
|
||||
<a-form-item name="password">
|
||||
<a-input-password
|
||||
v-model:value="loginForm.password"
|
||||
autocomplete="on"
|
||||
:type="showPassword ? 'text' : 'password'"
|
||||
placeholder="请输入密码"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item name="captchaCode">
|
||||
<a-input class="captcha-input" v-model:value.trim="loginForm.captchaCode" placeholder="请输入验证码" />
|
||||
<img class="captcha-img" :src="captchaBase64Image" @click="getCaptcha" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-checkbox v-model:checked="rememberPwd">记住密码</a-checkbox>
|
||||
<span> ( 账号：admin, 密码：123456)</span>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<div class="btn" @click="onLogin">登录</div>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<div class="more">
|
||||
<div class="title-box">
|
||||
<p class="line"></p>
|
||||
<p class="title">其他方式登录</p>
|
||||
<p class="line"></p>
|
||||
</div>
|
||||
<div class="login-type">
|
||||
<img :src="wechatIcon" />
|
||||
<img :src="aliIcon" />
|
||||
<img :src="douyinIcon" />
|
||||
<img :src="qqIcon" />
|
||||
<img :src="weiboIcon" />
|
||||
<img :src="feishuIcon" />
|
||||
<img :src="googleIcon" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { message } from 'ant-design-vue';
|
||||
import { onMounted, onUnmounted, reactive, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { loginApi } from '/@/api/system/login-api';
|
||||
import { SmartLoading } from '/@/components/framework/smart-loading';
|
||||
import { LOGIN_DEVICE_ENUM } from '/@/constants/system/login-device-const';
|
||||
import { useUserStore } from '/@/store/modules/system/user';
|
||||
import loginQR from '/@/assets/images/login/login-qr.png';
|
||||
import wechatIcon from '/@/assets/images/login/wechat-icon.png';
|
||||
import aliIcon from '/@/assets/images/login/ali-icon.png';
|
||||
import douyinIcon from '/@/assets/images/login/douyin-icon.png';
|
||||
import qqIcon from '/@/assets/images/login/qq-icon.png';
|
||||
import weiboIcon from '/@/assets/images/login/weibo-icon.png';
|
||||
import feishuIcon from '/@/assets/images/login/feishu-icon.png';
|
||||
import googleIcon from '/@/assets/images/login/google-icon.png';
|
||||
|
||||
import { buildRoutes } from '/@/router/index';
|
||||
import { smartSentry } from '/@/lib/smart-sentry';
|
||||
import { encryptData } from '/@/lib/encrypt';
|
||||
import { localSave } from '/@/utils/local-util.js';
|
||||
import LocalStorageKeyConst from '/@/constants/local-storage-key-const.js';
|
||||
import { useDictStore } from '/@/store/modules/system/dict.js';
|
||||
import { dictApi } from '/@/api/support/dict-api.js';
|
||||
|
||||
//--------------------- 登录表单 ---------------------------------
|
||||
|
||||
const loginForm = reactive({
|
||||
loginName: 'admin',
|
||||
password: '',
|
||||
captchaCode: '',
|
||||
captchaUuid: '',
|
||||
loginDevice: LOGIN_DEVICE_ENUM.PC.value,
|
||||
});
|
||||
const rules = {
|
||||
loginName: [{ required: true, message: '用户名不能为空' }],
|
||||
password: [{ required: true, message: '密码不能为空' }],
|
||||
captchaCode: [{ required: true, message: '验证码不能为空' }],
|
||||
};
|
||||
|
||||
const showPassword = ref(false);
|
||||
const router = useRouter();
|
||||
const formRef = ref();
|
||||
const rememberPwd = ref(false);
|
||||
|
||||
onMounted(() => {
|
||||
document.onkeyup = (e) => {
|
||||
if (e.keyCode === 13) {
|
||||
onLogin();
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
document.onkeyup = null;
|
||||
});
|
||||
|
||||
//登录
|
||||
async function onLogin() {
|
||||
formRef.value.validate().then(async () => {
|
||||
try {
|
||||
SmartLoading.show();
|
||||
// 密码加密
|
||||
let encryptPasswordForm = Object.assign({}, loginForm, {
|
||||
password: encryptData(loginForm.password),
|
||||
});
|
||||
const res = await loginApi.login(encryptPasswordForm);
|
||||
stopRefreshCaptchaInterval();
|
||||
localSave(LocalStorageKeyConst.USER_TOKEN, res.data.token ? res.data.token : '');
|
||||
message.success('登录成功');
|
||||
//更新用户信息到pinia
|
||||
useUserStore().setUserLoginInfo(res.data);
|
||||
// 初始化数据字典
|
||||
const dictRes = await dictApi.getAllDictData();
|
||||
useDictStore().initData(dictRes.data);
|
||||
//构建系统的路由
|
||||
buildRoutes();
|
||||
router.push('/home');
|
||||
} catch (e) {
|
||||
if (e.data && e.data.code !== 0) {
|
||||
loginForm.captchaCode = '';
|
||||
getCaptcha();
|
||||
}
|
||||
smartSentry.captureError(e);
|
||||
} finally {
|
||||
SmartLoading.hide();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//--------------------- 验证码 ---------------------------------
|
||||
|
||||
const captchaBase64Image = ref('');
|
||||
async function getCaptcha() {
|
||||
try {
|
||||
let captchaResult = await loginApi.getCaptcha();
|
||||
captchaBase64Image.value = captchaResult.data.captchaBase64Image;
|
||||
loginForm.captchaUuid = captchaResult.data.captchaUuid;
|
||||
beginRefreshCaptchaInterval(captchaResult.data.expireSeconds);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
}
|
||||
|
||||
let refreshCaptchaInterval = null;
|
||||
function beginRefreshCaptchaInterval(expireSeconds) {
|
||||
if (refreshCaptchaInterval === null) {
|
||||
refreshCaptchaInterval = setInterval(getCaptcha, (expireSeconds - 5) * 1000);
|
||||
}
|
||||
}
|
||||
|
||||
function stopRefreshCaptchaInterval() {
|
||||
if (refreshCaptchaInterval != null) {
|
||||
clearInterval(refreshCaptchaInterval);
|
||||
refreshCaptchaInterval = null;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getCaptcha();
|
||||
getTwoFactorLoginFlag();
|
||||
});
|
||||
|
||||
//--------------------- 邮箱验证码 ---------------------------------
|
||||
|
||||
const emailCodeShowFlag = ref(false);
|
||||
let emailCodeTips = ref('获取邮箱验证码');
|
||||
let emailCodeButtonDisabled = ref(false);
|
||||
// 定时器
|
||||
let countDownTimer = null;
|
||||
// 开始倒计时
|
||||
function runCountDown() {
|
||||
emailCodeButtonDisabled.value = true;
|
||||
let countDown = 60;
|
||||
emailCodeTips.value = `${countDown}秒后重新获取`;
|
||||
countDownTimer = setInterval(() => {
|
||||
if (countDown > 1) {
|
||||
countDown--;
|
||||
emailCodeTips.value = `${countDown}秒后重新获取`;
|
||||
} else {
|
||||
clearInterval(countDownTimer);
|
||||
emailCodeButtonDisabled.value = false;
|
||||
emailCodeTips.value = '获取验证码';
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// 获取双因子登录标识
|
||||
async function getTwoFactorLoginFlag() {
|
||||
try {
|
||||
let result = await loginApi.getTwoFactorLoginFlag();
|
||||
emailCodeShowFlag.value = result.data;
|
||||
} catch (e) {
|
||||
smartSentry.captureError(e);
|
||||
}
|
||||
}
|
||||
|
||||
// 发送邮箱验证码
|
||||
async function sendSmsCode() {
|
||||
try {
|
||||
SmartLoading.show();
|
||||
let result = await loginApi.sendLoginEmailCode(loginForm.loginName);
|
||||
message.success('验证码发送成功!请登录邮箱查看验证码~');
|
||||
runCountDown();
|
||||
} catch (e) {
|
||||
smartSentry.captureError(e);
|
||||
} finally {
|
||||
SmartLoading.hide();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import './login.less';
|
||||
</style>
|
||||
|
|
@ -1,208 +0,0 @@
|
|||
.login-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(/@/assets/images/login/login-bg.png) no-repeat center;
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.box-item {
|
||||
width: 460px;
|
||||
height: 600px;
|
||||
&.desc {
|
||||
background: #ffffff;
|
||||
border-radius: 12px 0px 0px 12px;
|
||||
box-shadow: 0px 16px 73px 8px rgba(203, 203, 203, 0.2);
|
||||
padding: 23px 25px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
&.login {
|
||||
background: #ffffff;
|
||||
border-radius: 0px 12px 12px 0px;
|
||||
padding: 34px 42px;
|
||||
position: relative;
|
||||
}
|
||||
.login-qr {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 66px;
|
||||
height: 66px;
|
||||
}
|
||||
.welcome {
|
||||
padding-top: 35px;
|
||||
p{
|
||||
color: #333333;
|
||||
line-height: 25px;
|
||||
letter-spacing: 0.26px;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
font-size: 26px;
|
||||
}
|
||||
.sub-welcome{
|
||||
padding: 10px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
line-height: 25px;
|
||||
letter-spacing: 0.26px;
|
||||
opacity: 0.96;
|
||||
background: #1748fd;
|
||||
border-radius: 22px 22px 2px 22px;
|
||||
}
|
||||
}
|
||||
.welcome-img{
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
}
|
||||
.app-qr-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
margin-top: 20px;
|
||||
.app-qr {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 50%;
|
||||
> img {
|
||||
width: 112px;
|
||||
height: 112px;
|
||||
}
|
||||
|
||||
.qr-desc {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 11px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
> img {
|
||||
width: 15px;
|
||||
height: 18px;
|
||||
margin-right: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
.qr-desc-marquee {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 11px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
|
||||
@keyframes marquee {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-30%);
|
||||
}
|
||||
}
|
||||
|
||||
.marquee {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
animation: marquee 5s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.login-title {
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
color: #1e1e1e;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
.login-form {
|
||||
.captcha-input {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.captcha-img {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.ant-input,
|
||||
.ant-input-affix-wrapper {
|
||||
height: 44px;
|
||||
border: 1px solid #ededed;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.code-btn{
|
||||
height: 44px;
|
||||
padding: 4px 5px;
|
||||
width: 108px;
|
||||
}
|
||||
.eye-box {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
.eye-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
width: 350px;
|
||||
height: 50px;
|
||||
background: #1748FD;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
line-height: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.more {
|
||||
margin-top: 30px;
|
||||
.title-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
> p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.line {
|
||||
width: 114px;
|
||||
height: 1px;
|
||||
background: #e6e6e6;
|
||||
}
|
||||
.title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #a1aebe;
|
||||
margin: 0 19px;
|
||||
}
|
||||
.login-type {
|
||||
padding: 0 5px;
|
||||
margin-top: 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
> img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,249 +0,0 @@
|
|||
<!--
|
||||
* 登录
|
||||
*
|
||||
* @Author: 1024创新实验室-主任：卓大
|
||||
* @Date: 2022-09-12 22:34:00
|
||||
* @Wechat: zhuda1024
|
||||
* @Email: lab1024@163.com
|
||||
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
|
||||
*
|
||||
-->
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<div class="box-item desc">
|
||||
<div class="welcome">
|
||||
<p>欢迎登录 SmartAdmin V3</p>
|
||||
<p class="sub-welcome">「高质量代码、简洁、高效、安全」的开发平台</p>
|
||||
</div>
|
||||
<img class="welcome-img" :src="loginGif" />
|
||||
</div>
|
||||
<div class="box-item login">
|
||||
<img class="login-qr" :src="loginQR" />
|
||||
<div class="login-title">账号登录</div>
|
||||
<a-form ref="formRef" class="login-form" :model="loginForm" :rules="rules">
|
||||
<a-form-item name="loginName">
|
||||
<a-input v-model:value.trim="loginForm.loginName" placeholder="请输入用户名" />
|
||||
</a-form-item>
|
||||
<a-form-item name="emailCode" v-if="emailCodeShowFlag">
|
||||
<a-input-group compact>
|
||||
<a-input style="width: calc(100% - 110px)" v-model:value="loginForm.emailCode" autocomplete="on" placeholder="请输入邮箱验证码" />
|
||||
<a-button @click="sendSmsCode" class="code-btn" type="primary" :disabled="emailCodeButtonDisabled">
|
||||
{{ emailCodeTips }}
|
||||
</a-button>
|
||||
</a-input-group>
|
||||
</a-form-item>
|
||||
<a-form-item name="password">
|
||||
<a-input-password
|
||||
v-model:value="loginForm.password"
|
||||
autocomplete="on"
|
||||
:type="showPassword ? 'text' : 'password'"
|
||||
placeholder="请输入密码：至少三种字符，最小 8 位"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item name="captchaCode">
|
||||
<a-input class="captcha-input" v-model:value.trim="loginForm.captchaCode" placeholder="请输入验证码" />
|
||||
<img class="captcha-img" :src="captchaBase64Image" @click="getCaptcha" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-checkbox v-model:checked="rememberPwd">记住密码</a-checkbox>
|
||||
<span> ( 账号：admin, 密码：123456)</span>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<div class="btn" @click="onLogin">登录</div>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<div class="more">
|
||||
<div class="title-box">
|
||||
<p class="line"></p>
|
||||
<p class="title">其他方式登录</p>
|
||||
<p class="line"></p>
|
||||
</div>
|
||||
<div class="login-type">
|
||||
<img :src="wechatIcon" />
|
||||
<img :src="aliIcon" />
|
||||
<img :src="douyinIcon" />
|
||||
<img :src="qqIcon" />
|
||||
<img :src="weiboIcon" />
|
||||
<img :src="feishuIcon" />
|
||||
<img :src="googleIcon" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { message } from 'ant-design-vue';
|
||||
import { onMounted, onUnmounted, reactive, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { loginApi } from '/@/api/system/login-api';
|
||||
import { SmartLoading } from '/@/components/framework/smart-loading';
|
||||
import { LOGIN_DEVICE_ENUM } from '/@/constants/system/login-device-const';
|
||||
import { useUserStore } from '/@/store/modules/system/user';
|
||||
import loginQR from '/@/assets/images/login/login-qr.png';
|
||||
import leftBg2 from '/@/assets/images/login/left-bg2.png';
|
||||
import loginGif from '/@/assets/images/login/login.gif';
|
||||
import wechatIcon from '/@/assets/images/login/wechat-icon.png';
|
||||
import aliIcon from '/@/assets/images/login/ali-icon.png';
|
||||
import douyinIcon from '/@/assets/images/login/douyin-icon.png';
|
||||
import qqIcon from '/@/assets/images/login/qq-icon.png';
|
||||
import weiboIcon from '/@/assets/images/login/weibo-icon.png';
|
||||
import feishuIcon from '/@/assets/images/login/feishu-icon.png';
|
||||
import googleIcon from '/@/assets/images/login/google-icon.png';
|
||||
|
||||
import { buildRoutes } from '/@/router/index';
|
||||
import { smartSentry } from '/@/lib/smart-sentry';
|
||||
import { encryptData } from '/@/lib/encrypt';
|
||||
import { localSave } from '/@/utils/local-util.js';
|
||||
import LocalStorageKeyConst from '/@/constants/local-storage-key-const.js';
|
||||
import { useDictStore } from '/@/store/modules/system/dict.js';
|
||||
import { dictApi } from '/@/api/support/dict-api.js';
|
||||
|
||||
//--------------------- 登录表单 ---------------------------------
|
||||
|
||||
const loginForm = reactive({
|
||||
loginName: 'admin',
|
||||
password: '',
|
||||
captchaCode: '',
|
||||
captchaUuid: '',
|
||||
loginDevice: LOGIN_DEVICE_ENUM.PC.value,
|
||||
});
|
||||
const rules = {
|
||||
loginName: [{ required: true, message: '用户名不能为空' }],
|
||||
password: [{ required: true, message: '密码不能为空' }],
|
||||
captchaCode: [{ required: true, message: '验证码不能为空' }],
|
||||
};
|
||||
|
||||
const showPassword = ref(false);
|
||||
const router = useRouter();
|
||||
const formRef = ref();
|
||||
const rememberPwd = ref(false);
|
||||
|
||||
onMounted(() => {
|
||||
document.onkeyup = (e) => {
|
||||
if (e.keyCode === 13) {
|
||||
onLogin();
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
document.onkeyup = null;
|
||||
});
|
||||
|
||||
//登录
|
||||
async function onLogin() {
|
||||
formRef.value.validate().then(async () => {
|
||||
try {
|
||||
SmartLoading.show();
|
||||
// 密码加密
|
||||
let encryptPasswordForm = Object.assign({}, loginForm, {
|
||||
password: encryptData(loginForm.password),
|
||||
});
|
||||
const res = await loginApi.login(encryptPasswordForm);
|
||||
stopRefreshCaptchaInterval();
|
||||
localSave(LocalStorageKeyConst.USER_TOKEN, res.data.token ? res.data.token : '');
|
||||
message.success('登录成功');
|
||||
//更新用户信息到pinia
|
||||
useUserStore().setUserLoginInfo(res.data);
|
||||
// 初始化数据字典
|
||||
const dictRes = await dictApi.getAllDictData();
|
||||
useDictStore().initData(dictRes.data);
|
||||
//构建系统的路由
|
||||
buildRoutes();
|
||||
router.push('/home');
|
||||
} catch (e) {
|
||||
if (e.data && e.data.code !== 0) {
|
||||
loginForm.captchaCode = '';
|
||||
getCaptcha();
|
||||
}
|
||||
smartSentry.captureError(e);
|
||||
} finally {
|
||||
SmartLoading.hide();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//--------------------- 验证码 ---------------------------------
|
||||
|
||||
const captchaBase64Image = ref('');
|
||||
async function getCaptcha() {
|
||||
try {
|
||||
let captchaResult = await loginApi.getCaptcha();
|
||||
captchaBase64Image.value = captchaResult.data.captchaBase64Image;
|
||||
loginForm.captchaUuid = captchaResult.data.captchaUuid;
|
||||
beginRefreshCaptchaInterval(captchaResult.data.expireSeconds);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
}
|
||||
|
||||
let refreshCaptchaInterval = null;
|
||||
function beginRefreshCaptchaInterval(expireSeconds) {
|
||||
if (refreshCaptchaInterval === null) {
|
||||
refreshCaptchaInterval = setInterval(getCaptcha, (expireSeconds - 5) * 1000);
|
||||
}
|
||||
}
|
||||
|
||||
function stopRefreshCaptchaInterval() {
|
||||
if (refreshCaptchaInterval != null) {
|
||||
clearInterval(refreshCaptchaInterval);
|
||||
refreshCaptchaInterval = null;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getCaptcha();
|
||||
getTwoFactorLoginFlag();
|
||||
});
|
||||
|
||||
//--------------------- 邮箱验证码 ---------------------------------
|
||||
|
||||
const emailCodeShowFlag = ref(false);
|
||||
let emailCodeTips = ref('获取邮箱验证码');
|
||||
let emailCodeButtonDisabled = ref(false);
|
||||
// 定时器
|
||||
let countDownTimer = null;
|
||||
// 开始倒计时
|
||||
function runCountDown() {
|
||||
emailCodeButtonDisabled.value = true;
|
||||
let countDown = 60;
|
||||
emailCodeTips.value = `${countDown}秒后重新获取`;
|
||||
countDownTimer = setInterval(() => {
|
||||
if (countDown > 1) {
|
||||
countDown--;
|
||||
emailCodeTips.value = `${countDown}秒后重新获取`;
|
||||
} else {
|
||||
clearInterval(countDownTimer);
|
||||
emailCodeButtonDisabled.value = false;
|
||||
emailCodeTips.value = '获取验证码';
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// 获取双因子登录标识
|
||||
async function getTwoFactorLoginFlag() {
|
||||
try {
|
||||
let result = await loginApi.getTwoFactorLoginFlag();
|
||||
emailCodeShowFlag.value = result.data;
|
||||
} catch (e) {
|
||||
smartSentry.captureError(e);
|
||||
}
|
||||
}
|
||||
|
||||
// 发送邮箱验证码
|
||||
async function sendSmsCode() {
|
||||
try {
|
||||
SmartLoading.show();
|
||||
let result = await loginApi.sendLoginEmailCode(loginForm.loginName);
|
||||
message.success('验证码发送成功!请登录邮箱查看验证码~');
|
||||
runCountDown();
|
||||
} catch (e) {
|
||||
smartSentry.captureError(e);
|
||||
} finally {
|
||||
SmartLoading.hide();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import './login.less';
|
||||
</style>
|
||||
Loading…
Reference in New Issue