1
This commit is contained in:
parent
fcdd4861bd
commit
0070a99b50
4
.env
4
.env
@ -1,3 +1,5 @@
|
||||
|
||||
# 页面标题
|
||||
VITE_APP_TITLE = 'ZRAdmin.NET'
|
||||
VITE_APP_TITLE = '上海华特数字化转型'
|
||||
# 登录信息界面
|
||||
VITE_APP_LOGINFO=" 上海华特企业集团股份有限公司成立于1998年1月，总部坐落于嘉定区外冈镇恒裕路385号，是一家从事汽车饰件、汽车零配件、高分子材料、轨道交通设备及产品的设计、开发、制造、销售、进出口一体的专业公司。曾先后获评上海市高新技术企业、上海市市级企业技术中心、上海市火炬计划、上海市著名商标、上海市专利工作培育企业、上海名牌、第八届至正杯上海科技企业创新奖等荣誉称号，2017年授牌华特上海车辆零部件声学（NVH）工程技术研究中心,多次获评嘉定区先进制造业、嘉定区十强民营企业。集团旗下共有16家公司，遍布全国9个省市。"
|
||||
@ -55,8 +55,8 @@ watch(
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
console.log('🎉源码地址: https://gitee.com/izory/ZrAdminNetCore')
|
||||
console.log('📖官方文档：http://www.izhaorui.cn')
|
||||
console.log('💰打赏作者：http://www.izhaorui.cn/doc/support.html')
|
||||
console.log('📱移动端体验：http://www.izhaorui.cn/h5')
|
||||
// console.log('🎉源码地址: https://gitee.com/izory/ZrAdminNetCore')
|
||||
// console.log('📖官方文档：http://www.izhaorui.cn')
|
||||
// console.log('💰打赏作者：http://www.izhaorui.cn/doc/support.html')
|
||||
// console.log('📱移动端体验：http://www.izhaorui.cn/h5')
|
||||
</script>
|
||||
|
||||
@ -36,7 +36,7 @@ export const constantRoutes = [
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
component: () => import('@/views/login'),
|
||||
component: () => import('@/views/login/login'),
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
|
||||
209
src/settings.js
209
src/settings.js
@ -1,111 +1,112 @@
|
||||
export default {
|
||||
/**
|
||||
* 框架版本号
|
||||
*/
|
||||
version: '20240105',
|
||||
/**
|
||||
* 网页标题
|
||||
*/
|
||||
title: import.meta.env.VITE_APP_TITLE,
|
||||
/**
|
||||
* 侧边栏主题 深色主题theme-dark，浅色主题theme-light
|
||||
*/
|
||||
sideTheme: 'theme-dark',
|
||||
/**
|
||||
* 框架主题颜色值
|
||||
*/
|
||||
theme: '#409EFF',
|
||||
/**
|
||||
* 是否系统布局配置
|
||||
*/
|
||||
showSettings: false,
|
||||
/**
|
||||
* 框架版本号
|
||||
*/
|
||||
version: '20240819',
|
||||
/**
|
||||
* 网页标题
|
||||
*/
|
||||
title: import.meta.env.VITE_APP_TITLE,
|
||||
loginfo: import.meta.env.VITE_APP_LOGINFO,
|
||||
/**
|
||||
* 侧边栏主题 深色主题theme-dark，浅色主题theme-light
|
||||
*/
|
||||
sideTheme: 'theme-dark',
|
||||
/**
|
||||
* 框架主题颜色值
|
||||
*/
|
||||
theme: '#409EFF',
|
||||
/**
|
||||
* 是否系统布局配置
|
||||
*/
|
||||
showSettings: false,
|
||||
|
||||
/**
|
||||
* 是否显示顶部导航
|
||||
*/
|
||||
topNav: false,
|
||||
/**
|
||||
* 是否显示顶部导航
|
||||
*/
|
||||
topNav: false,
|
||||
|
||||
/**
|
||||
* 是否显示 tagsView
|
||||
*/
|
||||
tagsView: true,
|
||||
/**
|
||||
* 是否显示 tagsView
|
||||
*/
|
||||
tagsView: true,
|
||||
|
||||
/**
|
||||
* 是否固定头部
|
||||
*/
|
||||
fixedHeader: false,
|
||||
/**
|
||||
* 是否固定头部
|
||||
*/
|
||||
fixedHeader: false,
|
||||
|
||||
/**
|
||||
* 是否显示logo
|
||||
*/
|
||||
sidebarLogo: true,
|
||||
/**
|
||||
* 是否显示logo
|
||||
*/
|
||||
sidebarLogo: true,
|
||||
|
||||
/**
|
||||
* 是否显示动态标题
|
||||
*/
|
||||
dynamicTitle: false,
|
||||
/**
|
||||
* 是否显示动态标题
|
||||
*/
|
||||
dynamicTitle: false,
|
||||
|
||||
/**
|
||||
* @type {string | array} 'production' | ['production', 'development']
|
||||
* @description Need show err logs component.
|
||||
* The default is only used in the production env
|
||||
* If you want to also use it in dev, you can pass ['production', 'development']
|
||||
*/
|
||||
errorLog: 'production',
|
||||
/**
|
||||
* 版权信息
|
||||
*/
|
||||
copyright: 'Copyright ©2024 <a target="_black" href="http://www.izhaorui.cn">ZRAdmin.NET</a> All Rights Reserved.',
|
||||
/**
|
||||
* 是否显示底部栏
|
||||
*/
|
||||
showFooter: true,
|
||||
/**
|
||||
* 是否显示水印
|
||||
*/
|
||||
showWatermark: false,
|
||||
/**
|
||||
* 水印文案
|
||||
*/
|
||||
watermarkText: 'ZRAdmin.NET',
|
||||
/**
|
||||
* 是否显示其他登录
|
||||
*/
|
||||
showOtherLogin: true,
|
||||
/**
|
||||
* 默认大小
|
||||
*/
|
||||
defaultSize: 'default',
|
||||
/**
|
||||
* 默认语言
|
||||
*/
|
||||
defaultLang: 'zh-cn',
|
||||
/**
|
||||
* 左侧菜单是否显示New标记
|
||||
*/
|
||||
menuShowNew: false,
|
||||
/**
|
||||
* 是否显示QR登录
|
||||
*/
|
||||
showQrLogin: true,
|
||||
/**
|
||||
* 是否显示手机号登录
|
||||
*/
|
||||
showPhoneLogin: true,
|
||||
/**
|
||||
* 标签页持久化
|
||||
*/
|
||||
tagsViewPersist: false,
|
||||
/**
|
||||
* 标签显示icon
|
||||
*/
|
||||
tagsShowIcon: true,
|
||||
/**
|
||||
* 导航模式 1、侧边栏 2、混合 3、纯顶部
|
||||
*/
|
||||
navType: 1,
|
||||
/**
|
||||
* 前往通知地址
|
||||
*/
|
||||
noticeUrl: 'https://gitee.com/izory/ZrAdminNetCore'
|
||||
}
|
||||
/**
|
||||
* @type {string | array} 'production' | ['production', 'development']
|
||||
* @description Need show err logs component.
|
||||
* The default is only used in the production env
|
||||
* If you want to also use it in dev, you can pass ['production', 'development']
|
||||
*/
|
||||
errorLog: 'production',
|
||||
/**
|
||||
* 版权信息
|
||||
*/
|
||||
copyright: 'Copyright ©2024 <a target="_black" href="http://www.izhaorui.cn">ZRAdmin.NET</a> All Rights Reserved.',
|
||||
/**
|
||||
* 是否显示底部栏
|
||||
*/
|
||||
showFooter: true,
|
||||
/**
|
||||
* 是否显示水印
|
||||
*/
|
||||
showWatermark: false,
|
||||
/**
|
||||
* 水印文案
|
||||
*/
|
||||
watermarkText: 'ZRAdmin.NET',
|
||||
/**
|
||||
* 是否显示其他登录
|
||||
*/
|
||||
showOtherLogin: true,
|
||||
/**
|
||||
* 默认大小
|
||||
*/
|
||||
defaultSize: 'default',
|
||||
/**
|
||||
* 默认语言
|
||||
*/
|
||||
defaultLang: 'zh-cn',
|
||||
/**
|
||||
* 左侧菜单是否显示New标记
|
||||
*/
|
||||
menuShowNew: false,
|
||||
/**
|
||||
* 是否显示QR登录
|
||||
*/
|
||||
showQrLogin: true,
|
||||
/**
|
||||
* 是否显示手机号登录
|
||||
*/
|
||||
showPhoneLogin: true,
|
||||
/**
|
||||
* 标签页持久化
|
||||
*/
|
||||
tagsViewPersist: false,
|
||||
/**
|
||||
* 标签显示icon
|
||||
*/
|
||||
tagsShowIcon: true,
|
||||
/**
|
||||
* 导航模式 1、侧边栏 2、混合 3、纯顶部
|
||||
*/
|
||||
navType: 1,
|
||||
/**
|
||||
* 前往通知地址
|
||||
*/
|
||||
noticeUrl: 'https://gitee.com/izory/ZrAdminNetCore'
|
||||
}
|
||||
@ -9,8 +9,8 @@
|
||||
<div style="padding: 0 25px 5px 25px">
|
||||
<el-tabs v-model="loginType" @tab-click="handleLoginType">
|
||||
<el-tab-pane :label="$t('login.loginway1')" :name="1"></el-tab-pane>
|
||||
<el-tab-pane :label="$t('login.loginway2')" :name="2" v-if="defaultSettings.showPhoneLogin"></el-tab-pane>
|
||||
<el-tab-pane :label="$t('login.loginway3')" :name="3" v-if="defaultSettings.showQrLogin"></el-tab-pane>
|
||||
<!-- <el-tab-pane :label="$t('login.loginway2')" :name="2" v-if="defaultSettings.showPhoneLogin"></el-tab-pane> -->
|
||||
<!-- <el-tab-pane :label="$t('login.loginway3')" :name="3" v-if="defaultSettings.showQrLogin"></el-tab-pane> -->
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
|
||||
1
src/views/login/iconfont.js
Normal file
1
src/views/login/iconfont.js
Normal file
@ -0,0 +1 @@
|
||||
window._iconfont_svg_string_4062655='<svg><symbol id="icon-gongyezidonghua" viewBox="0 0 1024 1024"><path d="M304.697598 824.441653a291.891313 291.891313 0 1 1 291.891313-291.891313 292.48701 292.48701 0 0 1-291.891313 291.891313zM304.697598 298.441593a232.321658 232.321658 0 1 0 232.321657 232.321657A232.917354 232.917354 0 0 0 304.697598 298.441593z" fill="#0F3567" ></path><path d="M304.697598 674.921817a142.371477 142.371477 0 1 1 141.775781-142.371477 142.371477 142.371477 0 0 1-141.775781 142.371477z m0-224.577602a82.801822 82.801822 0 1 0 82.206125 82.206125A82.801822 82.801822 0 0 0 304.697598 450.344215zM53.909347 677.304603l58.378263-12.509627 74.34293 346.754966-58.378263 12.509628zM537.9128 541.307079l56.769882-17.990036 143.562871 452.550675-56.769882 17.990036zM192.587506 262.401951l494.070725-193.89923 21.742924 55.39978-494.070725 193.958799z" fill="#0F3567" ></path><path d="M548.456629 531.001529l283.84941-218.14408 36.33749 47.238737L584.67498 578.240266z" fill="#0F3567" ></path><path d="M828.910569 365.755304a182.878843 182.878843 0 1 1 110.799559-327.633107 29.784828 29.784828 0 0 1 11.318235 26.210648 28.593435 28.593435 0 0 1-16.083807 23.827863l-69.100801 36.33749 26.806345 51.229904L965.920777 137.603522a27.997738 27.997738 0 0 1 27.402042 0 29.189131 29.189131 0 0 1 16.083807 22.636469v23.232166a182.283147 182.283147 0 0 1-180.496057 182.283147z m0-305.592334a123.309187 123.309187 0 1 0 119.139311 154.285408l-54.208386 27.997738a29.784828 29.784828 0 0 1-22.63647 0 28.593435 28.593435 0 0 1-17.2752-14.892414l-54.208387-104.246897a29.189131 29.189131 0 0 1 12.509628-39.91167l42.890152-22.040772A131.053243 131.053243 0 0 0 828.910569 60.16297z" fill="#0F3567" ></path></symbol></svg>',function(n){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var i,o,a,l,d,c=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}i=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_4062655,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?c(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(i,0):(o=function(){document.removeEventListener("DOMContentLoaded",o,!1),i()},document.addEventListener("DOMContentLoaded",o,!1)):document.attachEvent&&(a=i,l=n.document,d=!1,r(),l.onreadystatechange=function(){"complete"==l.readyState&&(l.onreadystatechange=null,s())})}function s(){d||(d=!0,a())}function r(){try{l.documentElement.doScroll("left")}catch(t){return void setTimeout(r,50)}s()}}(window);
|
||||
123
src/views/login/login.scss
Normal file
123
src/views/login/login.scss
Normal file
@ -0,0 +1,123 @@
|
||||
.login-wrap {
|
||||
background: radial-gradient(220% 105% at top center, #182461 10%, #153379 40%, #0674e1 65%, #1f73c5);
|
||||
background-attachment: fixed;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
// background-image: url('@/assets/images/login-bg.jpg');
|
||||
background-size: cover;
|
||||
flex-direction: column;
|
||||
|
||||
.login {
|
||||
margin: 0 auto;
|
||||
background: #ffffff;
|
||||
border-radius: 6px;
|
||||
width: var(--base-login-width);
|
||||
position: relative;
|
||||
// height: 420px;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 10px auto 15px auto;
|
||||
text-align: center;
|
||||
// color: #fff;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
padding: 5px 25px 5px 25px;
|
||||
position: relative;
|
||||
height: 230px;
|
||||
|
||||
.input-icon {
|
||||
height: 30px;
|
||||
width: 14px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-tip {
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
color: #bfbfbf;
|
||||
}
|
||||
|
||||
.login-code {
|
||||
width: 33%;
|
||||
height: 40px;
|
||||
float: right;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.el-login-footer {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-family: Arial;
|
||||
font-size: 12px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.login-code-img {
|
||||
height: 40px;
|
||||
padding-left: 12px;
|
||||
}
|
||||
.langSet {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.scan-wrap {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
cursor: pointer;
|
||||
transition: all ease 0.3s;
|
||||
overflow: hidden;
|
||||
|
||||
.icon {
|
||||
width: 48px;
|
||||
height: 50px;
|
||||
display: inline-block;
|
||||
font-size: 48px;
|
||||
position: absolute;
|
||||
right: 1px;
|
||||
top: 0px;
|
||||
}
|
||||
.scan-delta {
|
||||
position: absolute;
|
||||
width: 35px;
|
||||
height: 70px;
|
||||
z-index: 2;
|
||||
top: 2px;
|
||||
right: 21px;
|
||||
background: var(--el-color-white);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.login-scan-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
}
|
||||
365
src/views/login/login.vue
Normal file
365
src/views/login/login.vue
Normal file
@ -0,0 +1,365 @@
|
||||
<template>
|
||||
<starBackground></starBackground>
|
||||
<div class="login-wrap">
|
||||
<div class="bluebackground">
|
||||
<div class="left">
|
||||
<!-- <div style="height: 90px"></div> -->
|
||||
<div class="bigtitle">{{ defaultSettings.title }}</div>
|
||||
<div class="small-info">
|
||||
{{ defaultSettings.loginfo }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="login contain">
|
||||
<div style="height: 30px"></div>
|
||||
|
||||
<h3 class="title">
|
||||
<svg class="icon_title" aria-hidden="true">
|
||||
<use xlink:href="#icon-gongyezidonghua" />
|
||||
</svg>
|
||||
用户登陆
|
||||
</h3>
|
||||
<div style="padding: 0 25px 5px 25px">
|
||||
<el-tabs v-model="loginType" @tab-click="handleLoginType">
|
||||
<el-tab-pane :label="$t('login.loginway1')" :name="1"></el-tab-pane>
|
||||
<!--<el-tab-pane :label="$t('login.loginway2')" :name="2" v-if="defaultSettings.showPhoneLogin"></el-tab-pane>
|
||||
<el-tab-pane :label="$t('login.loginway3')" :name="3" v-if="defaultSettings.showQrLogin"></el-tab-pane> -->
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
<el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form" v-show="loginType == 1">
|
||||
<el-form-item prop="username">
|
||||
<el-input v-model="loginForm.username" type="text" auto-complete="off" :placeholder="$t('login.account')">
|
||||
<template #prefix>
|
||||
<svg-icon name="user" class="input-icon" />
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
v-model="loginForm.password"
|
||||
type="password"
|
||||
auto-complete="off"
|
||||
:placeholder="$t('login.password')"
|
||||
@keyup.enter="handleLogin">
|
||||
<template #prefix>
|
||||
<svg-icon name="password" class="input-icon" />
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code" v-if="captchaOnOff != 'off'">
|
||||
<el-input
|
||||
v-model="loginForm.code"
|
||||
auto-complete="off"
|
||||
:placeholder="$t('login.captcha')"
|
||||
style="width: 63%"
|
||||
@keyup.enter="handleLogin">
|
||||
<template #prefix>
|
||||
<svg-icon name="validCode" class="input-icon" />
|
||||
</template>
|
||||
</el-input>
|
||||
<div class="login-code">
|
||||
<el-image :src="codeUrl" @click="getCode" class="login-code-img" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="width: 100%" :style="{ 'margin-top': captchaOnOff == 'off' ? '40px' : '' }">
|
||||
<el-button :loading="loading" size="default" round style="width: 100%" @click.prevent="handleLogin">
|
||||
<span v-if="!loading">{{ $t('login.btnLogin') }}</span>
|
||||
<span v-else>登 录 中...</span>
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
|
||||
<div style="display: flex; justify-content: space-between; align-items: center">
|
||||
<el-checkbox v-model="loginForm.rememberMe">{{ $t('login.rememberMe') }}</el-checkbox>
|
||||
<span style="font-size: 12px">
|
||||
<!-- <router-link class="link-type" :to="'/register'">{{ $t('login.register') }}</router-link> -->
|
||||
<!-- <span @click="handleForgetPwd()" class="forget-pwd">{{ $t('login.forgotPwd') }}</span> -->
|
||||
</span>
|
||||
</div>
|
||||
</el-form>
|
||||
<div class="qr-wrap login-form" v-show="loginType == 3">
|
||||
<div class="login-scan-container">
|
||||
<div ref="imgContainerRef" id="imgContainer" class="qrCode"></div>
|
||||
<div class="mt10 text-muted">{{ $t('login.tip_scan_code') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="el-login-footer">
|
||||
<div v-html="defaultSettings.copyright"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="login">
|
||||
import { getCodeImg } from '@/api/system/login'
|
||||
import Cookies from 'js-cookie'
|
||||
import { encrypt, decrypt } from '@/utils/jsencrypt'
|
||||
import defaultSettings from '@/settings'
|
||||
import starBackground from './starBackground.vue'
|
||||
import LangSelect from '@/components/LangSelect/index.vue'
|
||||
import useUserStore from '@/store/modules/user'
|
||||
import QRCode from 'qrcodejs2-fixes'
|
||||
import { verifyScan, generateQrcode } from '@/api/system/login'
|
||||
// import oauthLogin from './components/Login/oauthLogin.vue'
|
||||
// import phoneLogin from './components/Login/phoneLogin.vue'
|
||||
import './iconfont.js'
|
||||
// import qrLogin from './components/Login/qrLogin.vue'
|
||||
|
||||
var visitorId = ''
|
||||
const fpPromise = import('https://openfpcdn.io/fingerprintjs/v3').then((FingerprintJS) => FingerprintJS.load())
|
||||
|
||||
const userStore = useUserStore()
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const { proxy } = getCurrentInstance()
|
||||
|
||||
const loginForm = ref({
|
||||
username: '',
|
||||
password: '',
|
||||
rememberMe: false,
|
||||
code: '',
|
||||
uuid: ''
|
||||
})
|
||||
const host = window.location.host
|
||||
const loginRules = {
|
||||
username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
|
||||
password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],
|
||||
code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
|
||||
}
|
||||
const loginType = ref(1)
|
||||
const codeUrl = ref('')
|
||||
const loading = ref(false)
|
||||
// 验证码开关
|
||||
const captchaOnOff = ref('')
|
||||
// 注册开关
|
||||
const register = ref(false)
|
||||
const redirect = ref()
|
||||
redirect.value = route.query.redirect
|
||||
// Get the visitor identifier when you need it.
|
||||
fpPromise
|
||||
.then((fp) => fp.get())
|
||||
.then((result) => {
|
||||
// This is the visitor identifier:
|
||||
visitorId = result.visitorId
|
||||
userStore.setClientId(visitorId)
|
||||
})
|
||||
function handleLogin() {
|
||||
proxy.$refs.loginRef.validate((valid) => {
|
||||
if (valid) {
|
||||
loading.value = true
|
||||
// 勾选了需要记住密码设置在cookie中设置记住用户名和密码
|
||||
if (loginForm.value.rememberMe) {
|
||||
Cookies.set('username', loginForm.value.username, { expires: 30, path: host })
|
||||
Cookies.set('password', encrypt(loginForm.value.password), { expires: 30, path: host })
|
||||
Cookies.set('rememberMe', loginForm.value.rememberMe, { expires: 30, path: host })
|
||||
} else {
|
||||
// 否则移除
|
||||
Cookies.remove('username')
|
||||
Cookies.remove('password')
|
||||
Cookies.remove('rememberMe')
|
||||
}
|
||||
// 调用action的登录方法
|
||||
userStore
|
||||
.login(loginForm.value)
|
||||
.then(() => {
|
||||
proxy.$modal.msgSuccess(proxy.$t('login.loginSuccess'))
|
||||
router.push({ path: redirect.value || '/' })
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error)
|
||||
proxy.$modal.msgError(error.msg)
|
||||
loading.value = false
|
||||
// 重新获取验证码
|
||||
if (captchaOnOff.value) {
|
||||
getCode()
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function getCode() {
|
||||
getCodeImg().then((res) => {
|
||||
codeUrl.value = 'data:image/gif;base64,' + res.data.img
|
||||
loginForm.value.uuid = res.data.uuid
|
||||
captchaOnOff.value = res.data.captchaOff
|
||||
})
|
||||
}
|
||||
|
||||
function getCookie() {
|
||||
const username = Cookies.get('username')
|
||||
const password = Cookies.get('password')
|
||||
const rememberMe = Cookies.get('rememberMe')
|
||||
loginForm.value = {
|
||||
username: username === undefined ? loginForm.value.username : username,
|
||||
password: password === undefined ? loginForm.value.password : decrypt(password),
|
||||
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
|
||||
}
|
||||
}
|
||||
function handleForgetPwd() {
|
||||
proxy.$modal.msg('请联系管理员')
|
||||
}
|
||||
|
||||
const interval = ref(null)
|
||||
function handleShowQrLogin() {
|
||||
nextTick(() => {
|
||||
generateCode()
|
||||
})
|
||||
}
|
||||
// 生成二维码
|
||||
function generateCode() {
|
||||
clearQr()
|
||||
var uuid = getUuid()
|
||||
|
||||
document.getElementById('imgContainer').innerHTML = '正在生成中...'
|
||||
generateQrcode({ uuid, deviceId: visitorId }).then((res) => {
|
||||
const { code, data } = res
|
||||
document.getElementById('imgContainer').innerHTML = ''
|
||||
|
||||
if (code == 200) {
|
||||
new QRCode(document.getElementById('imgContainer'), {
|
||||
// text: 'https://qm.qq.com/cgi-bin/qm/qr?k=kgt4HsckdljU0VM-0kxND6d_igmfuPlL&authKey=r55YUbruiKQ5iwC/folG7KLCmZ++Y4rQVgNlvLbUniUMkbk24Y9+zNuOmOnjAjRc&noverify=0',
|
||||
text: JSON.stringify(data.codeContent),
|
||||
width: 160,
|
||||
height: 160
|
||||
})
|
||||
}
|
||||
})
|
||||
interval.value = setInterval(() => {
|
||||
verifyScan({ uuid: uuid, deviceId: userStore.clientId })
|
||||
.then((res) => {
|
||||
const { code, data } = res
|
||||
if (data.status == -1) {
|
||||
clearQr()
|
||||
document.getElementById('imgContainer').innerHTML = '二维码已过期'
|
||||
} else if (data.status == 2) {
|
||||
userStore
|
||||
.scanLogin(data)
|
||||
.then(() => {
|
||||
proxy.$modal.msgSuccess(proxy.$t('login.loginSuccess'))
|
||||
router.push({ path: redirect.value || '/' })
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error)
|
||||
proxy.$modal.msgError(error.msg)
|
||||
})
|
||||
clearQr()
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
clearQr()
|
||||
})
|
||||
}, 1000)
|
||||
}
|
||||
function clearQr() {
|
||||
clearInterval(interval.value)
|
||||
interval.value = null
|
||||
}
|
||||
function getUuid() {
|
||||
var temp_url = URL.createObjectURL(new Blob())
|
||||
var uuid = temp_url.toString().replace('-', '') // blob:https://xxx.com/b250d159-e1b6-4a87-9002-885d90033be3
|
||||
URL.revokeObjectURL(temp_url)
|
||||
return uuid.substr(uuid.lastIndexOf('/') + 1)
|
||||
}
|
||||
function handleLoginType(t) {
|
||||
const val = t.paneName
|
||||
|
||||
if (val == 3) {
|
||||
handleShowQrLogin()
|
||||
} else {
|
||||
clearQr()
|
||||
}
|
||||
}
|
||||
getCode()
|
||||
getCookie()
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './login.scss';
|
||||
.forget-pwd {
|
||||
color: #ccc;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
border-left: 1px solid;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.qrCode {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
line-height: 160px;
|
||||
}
|
||||
|
||||
.bluebackground {
|
||||
display: flex;
|
||||
height: 320px;
|
||||
width: 700px;
|
||||
background: #203589;
|
||||
border-radius: 10px;
|
||||
margin-left: 30%;
|
||||
margin-top: 0;
|
||||
.left {
|
||||
width: 40%;
|
||||
.bigtitle {
|
||||
color: #fff;
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
|
||||
margin: 20px;
|
||||
}
|
||||
// 小字部分
|
||||
.small-info {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-family: '幼圆';
|
||||
margin: 20px;
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
margin-top: -10%;
|
||||
width: 60%;
|
||||
// 登录框
|
||||
.contain {
|
||||
// position: relative;
|
||||
// border-radius: 6px;
|
||||
// top: -300px;
|
||||
// left: 150px;
|
||||
background: #fff;
|
||||
width: 350px;
|
||||
height: 470px;
|
||||
.login-form {
|
||||
border-radius: 6px;
|
||||
height: inherit;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
.el-input {
|
||||
height: 38px;
|
||||
|
||||
input {
|
||||
height: 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-code-img {
|
||||
height: 38px;
|
||||
width: 80px;
|
||||
}
|
||||
.icon_title {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
vertical-align: -0.15em;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
.border {
|
||||
border: 1px solid #000;
|
||||
}
|
||||
</style>
|
||||
60
src/views/login/starBackground.vue
Normal file
60
src/views/login/starBackground.vue
Normal file
@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div class="stars">
|
||||
<div class="star" v-for="(item, index) in starsCount" :key="index" ref="star"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="starBackground">
|
||||
import { getCurrentInstance, onMounted } from 'vue'
|
||||
|
||||
const starsCount = ref(600)
|
||||
const distance = ref(800)
|
||||
const { proxy } = getCurrentInstance()
|
||||
onMounted(() => {
|
||||
initStars()
|
||||
})
|
||||
function initStars() {
|
||||
let starArr = proxy.$refs.star
|
||||
starArr.forEach((item) => {
|
||||
let speed = 0.2 + Math.random() * 1
|
||||
let thisDistance = distance.value + Math.random() * 300
|
||||
item.style.transformOrigin = `0 0 ${thisDistance}px`
|
||||
item.style.transform = `translate3d(0, 0, -${thisDistance}px) rotateY(${Math.random() * 360}deg) rotateX(${
|
||||
Math.random() * -50
|
||||
}deg) scale(${speed}, ${speed})`
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: perspective(600px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
|
||||
}
|
||||
100% {
|
||||
transform: perspective(600px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.stars {
|
||||
transform: perspective(500px);
|
||||
transform-style: preserve-3d;
|
||||
// position: absolute;
|
||||
perspective-origin: 50% 100%;
|
||||
left: 50%;
|
||||
animation: rotate 90s infinite linear;
|
||||
bottom: -200px;
|
||||
// 注意要用fixed，不然会超出屏幕
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.star {
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
background: #f7f7b8;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user