关闭window.open
This commit is contained in:
qijq
parent
36a43bf0e9
commit
7612e5ca27
@ -89,7 +89,7 @@
|
|||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<div class="internet-content-provider">
|
<div class="internet-content-provider">
|
||||||
<a href="https://beian.miit.gov.cn/" target="_blank" style="color: #fff">
|
<a href="https://beian.miit.gov.cn/" style="color: #fff" target="_blank">
|
||||||
桂ICP备2024040484号-1
|
桂ICP备2024040484号-1
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
@ -97,314 +97,314 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapActions, mapGetters } from 'vuex'
|
import { mapActions, mapGetters } from 'vuex'
|
||||||
import { translateTitle } from '@/utils/i18n'
|
import { translateTitle } from '@/utils/i18n'
|
||||||
import { isPassword } from 'vue-plugin-utils'
|
import { isPassword } from 'vue-plugin-utils'
|
||||||
import { URL } from '@/config'
|
import { URL } from '@/config'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Login',
|
name: 'Login',
|
||||||
directives: {
|
directives: {
|
||||||
focus: {
|
focus: {
|
||||||
inserted(el) {
|
inserted(el) {
|
||||||
el.querySelector('input').focus()
|
el.querySelector('input').focus()
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
beforeRouteLeave(to, from, next) {
|
||||||
beforeRouteLeave(to, from, next) {
|
clearInterval(this.timer)
|
||||||
clearInterval(this.timer)
|
next()
|
||||||
next()
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
const validateUsername = (rule, value, callback) => {
|
|
||||||
if ('' === value)
|
|
||||||
callback(new Error(this.translateTitle('用户名不能为空')))
|
|
||||||
else callback()
|
|
||||||
}
|
|
||||||
const validatePassword = (rule, value, callback) => {
|
|
||||||
if (!isPassword(value))
|
|
||||||
callback(new Error(this.translateTitle('密码不能少于6位')))
|
|
||||||
else callback()
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
form: {
|
|
||||||
user_account: '',
|
|
||||||
user_password: '',
|
|
||||||
verify_code: '',
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
user_account: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
trigger: 'blur',
|
|
||||||
validator: validateUsername,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
user_password: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
trigger: 'blur',
|
|
||||||
validator: validatePassword,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
verify_code: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
trigger: 'blur',
|
|
||||||
message: '验证码不能空',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
loading: false,
|
|
||||||
passwordType: 'password',
|
|
||||||
redirect: undefined,
|
|
||||||
timer: 0,
|
|
||||||
codeUrl: URL.verifyCode,
|
|
||||||
previewText: '',
|
|
||||||
verify_token: '',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapGetters({
|
|
||||||
title: 'settings/title',
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
$route: {
|
|
||||||
handler(route) {
|
|
||||||
this.redirect = (route.query && route.query.redirect) || '/'
|
|
||||||
},
|
|
||||||
immediate: true,
|
|
||||||
},
|
},
|
||||||
},
|
data() {
|
||||||
mounted() {
|
const validateUsername = (rule, value, callback) => {
|
||||||
this.changeCode()
|
if ('' === value)
|
||||||
if (URL.api_url == 'https://demo.lancerdt.com') {
|
callback(new Error(this.translateTitle('用户名不能为空')))
|
||||||
this.form.user_account = 'demoadmin'
|
else callback()
|
||||||
this.form.user_password = '111111'
|
}
|
||||||
}
|
const validatePassword = (rule, value, callback) => {
|
||||||
|
if (!isPassword(value))
|
||||||
|
callback(new Error(this.translateTitle('密码不能少于6位')))
|
||||||
|
else callback()
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
form: {
|
||||||
|
user_account: '',
|
||||||
|
user_password: '',
|
||||||
|
verify_code: '',
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
user_account: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
trigger: 'blur',
|
||||||
|
validator: validateUsername,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
user_password: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
trigger: 'blur',
|
||||||
|
validator: validatePassword,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
verify_code: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
trigger: 'blur',
|
||||||
|
message: '验证码不能空',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
loading: false,
|
||||||
|
passwordType: 'password',
|
||||||
|
redirect: undefined,
|
||||||
|
timer: 0,
|
||||||
|
codeUrl: URL.verifyCode,
|
||||||
|
previewText: '',
|
||||||
|
verify_token: '',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapGetters({
|
||||||
|
title: 'settings/title',
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
$route: {
|
||||||
|
handler(route) {
|
||||||
|
this.redirect = (route.query && route.query.redirect) || '/'
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.changeCode()
|
||||||
|
if (URL.api_url == 'https://demo.lancerdt.com') {
|
||||||
|
this.form.user_account = 'demoadmin'
|
||||||
|
this.form.user_password = '111111'
|
||||||
|
}
|
||||||
|
|
||||||
// 为了演示效果，会在官网演示页自动登录到首页，正式开发可删除
|
// 为了演示效果，会在官网演示页自动登录到首页，正式开发可删除
|
||||||
if (
|
if (
|
||||||
document.domain === 'vue-admin-beautiful.com' ||
|
document.domain === 'vue-admin-beautiful.com' ||
|
||||||
document.domain === 'chu1204505056.gitee.io'
|
document.domain === 'chu1204505056.gitee.io'
|
||||||
) {
|
) {
|
||||||
this.previewText = '（演示地址验证码可不填）'
|
this.previewText = '（演示地址验证码可不填）'
|
||||||
this.timer = setTimeout(() => {
|
this.timer = setTimeout(() => {
|
||||||
this.handleLogin()
|
this.handleLogin()
|
||||||
}, 5000)
|
}, 5000)
|
||||||
}
|
}
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
...mapActions({
|
|
||||||
login: 'user/login',
|
|
||||||
}),
|
|
||||||
translateTitle,
|
|
||||||
handlePassword() {
|
|
||||||
this.passwordType === 'password'
|
|
||||||
? (this.passwordType = '')
|
|
||||||
: (this.passwordType = 'password')
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.$refs.password.focus()
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
handleRoute() {
|
methods: {
|
||||||
return this.redirect === '/404' || this.redirect === '/403'
|
...mapActions({
|
||||||
? '/'
|
login: 'user/login',
|
||||||
: this.redirect
|
}),
|
||||||
},
|
translateTitle,
|
||||||
handleLogin() {
|
handlePassword() {
|
||||||
this.$refs.form.validate(async (valid) => {
|
this.passwordType === 'password'
|
||||||
if (valid) {
|
? (this.passwordType = '')
|
||||||
try {
|
: (this.passwordType = 'password')
|
||||||
this.loading = true
|
this.$nextTick(() => {
|
||||||
this.form.verify_token = this.verify_token
|
this.$refs.password.focus()
|
||||||
let code = await this.login(this.form)
|
})
|
||||||
if (1003 == code || 1005 == code) {
|
},
|
||||||
this.changeCode()
|
handleRoute() {
|
||||||
}
|
return this.redirect === '/404' || this.redirect === '/403'
|
||||||
|
? '/'
|
||||||
let routes = this.$router.options.routes
|
: this.redirect
|
||||||
if (routes) {
|
},
|
||||||
if (!routes.some((route) => route.path === this.redirect)) {
|
handleLogin() {
|
||||||
this.redirect = '/index'
|
this.$refs.form.validate(async (valid) => {
|
||||||
|
if (valid) {
|
||||||
|
try {
|
||||||
|
this.loading = true
|
||||||
|
this.form.verify_token = this.verify_token
|
||||||
|
let code = await this.login(this.form)
|
||||||
|
if (1003 == code || 1005 == code) {
|
||||||
|
this.changeCode()
|
||||||
}
|
}
|
||||||
}
|
|
||||||
await this.$router.push(this.handleRoute())
|
|
||||||
} finally {
|
|
||||||
this.loading = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
changeCode() {
|
|
||||||
window.open(
|
|
||||||
`https://mal1.gpxscs.cn/admin/#/login?loginInfo=JsoN.parse(J.stringify(res.data))`
|
|
||||||
)
|
|
||||||
|
|
||||||
// this.codeUrl = `https://www.oschina.net/action/user/captcha?timestamp=${new Date().getTime()}`
|
let routes = this.$router.options.routes
|
||||||
this.verify_token = new Date().getTime()
|
if (routes) {
|
||||||
this.codeUrl = URL.verifyCode + '?verify_token=' + this.verify_token
|
if (!routes.some((route) => route.path === this.redirect)) {
|
||||||
|
this.redirect = '/index'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
await this.$router.push(this.handleRoute())
|
||||||
|
} finally {
|
||||||
|
this.loading = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
changeCode() {
|
||||||
|
// window.open(
|
||||||
|
// `https://mal1.gpxscs.cn/admin/#/login?loginInfo=JsoN.parse(J.stringify(res.data))`
|
||||||
|
// )
|
||||||
|
|
||||||
|
// this.codeUrl = `https://www.oschina.net/action/user/captcha?timestamp=${new Date().getTime()}`
|
||||||
|
this.verify_token = new Date().getTime()
|
||||||
|
this.codeUrl = URL.verifyCode + '?verify_token=' + this.verify_token
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
}
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.login-container {
|
.login-container {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
background: url('~@/assets/login_images/background.jpg') center center fixed
|
background: url('~@/assets/login_images/background.jpg') center center fixed
|
||||||
no-repeat;
|
no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
|
|
||||||
.internet-content-provider {
|
.internet-content-provider {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 100%;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-form {
|
|
||||||
position: relative;
|
|
||||||
max-width: 100%;
|
|
||||||
padding: 4.5vh;
|
|
||||||
margin: calc((100vh - 475px) / 2) 5vw 5vw;
|
|
||||||
overflow: hidden;
|
|
||||||
background: url('~@/assets/login_images/login_form.png');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 36px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: $base-color-white;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-tips {
|
|
||||||
margin-top: 29px;
|
|
||||||
font-size: 26px;
|
|
||||||
font-weight: 400;
|
|
||||||
color: $base-color-white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-btn {
|
|
||||||
margin: auto;
|
|
||||||
display: inherit;
|
|
||||||
width: 100%;
|
|
||||||
height: 50px;
|
|
||||||
margin-top: 5px;
|
|
||||||
border: 0;
|
|
||||||
font-size: 18px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.forget-passwordword {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 40px;
|
color: #fff;
|
||||||
text-align: left;
|
|
||||||
|
|
||||||
.forget-password {
|
|
||||||
width: 129px;
|
|
||||||
height: 19px;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 400;
|
|
||||||
color: rgba(92, 102, 240, 1);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.tips {
|
.login-form {
|
||||||
margin-bottom: 10px;
|
|
||||||
font-size: $base-font-size-default;
|
|
||||||
color: $base-color-white;
|
|
||||||
|
|
||||||
span {
|
|
||||||
&:first-of-type {
|
|
||||||
margin-right: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-container {
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
max-width: 100%;
|
||||||
|
padding: 4.5vh;
|
||||||
|
margin: calc((100vh - 475px) / 2) 5vw 5vw;
|
||||||
|
overflow: hidden;
|
||||||
|
background: url('~@/assets/login_images/login_form.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
margin: 0 auto 40px auto;
|
font-size: 36px;
|
||||||
font-size: 34px;
|
font-weight: 500;
|
||||||
font-weight: bold;
|
color: $base-color-white;
|
||||||
color: $base-color-blue;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
i {
|
.title-tips {
|
||||||
position: absolute;
|
margin-top: 29px;
|
||||||
top: 8px;
|
font-size: 26px;
|
||||||
left: 5px;
|
font-weight: 400;
|
||||||
z-index: $base-z-index;
|
color: $base-color-white;
|
||||||
font-size: 16px;
|
}
|
||||||
color: #ccc;
|
|
||||||
cursor: pointer;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.show-password {
|
.login-btn {
|
||||||
position: absolute;
|
margin: auto;
|
||||||
right: 25px;
|
display: inherit;
|
||||||
left: -35px;
|
width: 100%;
|
||||||
font-size: 16px;
|
height: 50px;
|
||||||
color: #ccc;
|
margin-top: 5px;
|
||||||
cursor: pointer;
|
border: 0;
|
||||||
user-select: none;
|
font-size: 18px;
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep {
|
&:hover {
|
||||||
.el-form-item {
|
opacity: 0.9;
|
||||||
padding-right: 0;
|
|
||||||
margin: 20px 0;
|
|
||||||
color: #454545;
|
|
||||||
background: transparent;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
border-radius: 2px;
|
|
||||||
|
|
||||||
&__content {
|
|
||||||
min-height: $base-input-height;
|
|
||||||
line-height: $base-input-height;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__error {
|
.forget-passwordword {
|
||||||
position: absolute;
|
width: 100%;
|
||||||
top: 100%;
|
margin-top: 40px;
|
||||||
left: 18px;
|
text-align: left;
|
||||||
font-size: $base-font-size-small;
|
|
||||||
line-height: 18px;
|
.forget-password {
|
||||||
color: $base-color-red;
|
width: 129px;
|
||||||
|
height: 19px;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: rgba(92, 102, 240, 1);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-input {
|
.tips {
|
||||||
box-sizing: border-box;
|
margin-bottom: 10px;
|
||||||
|
font-size: $base-font-size-default;
|
||||||
|
color: $base-color-white;
|
||||||
|
|
||||||
input {
|
span {
|
||||||
height: 48px;
|
&:first-of-type {
|
||||||
padding-left: 35px;
|
margin-right: 16px;
|
||||||
font-size: $base-font-size-default;
|
}
|
||||||
line-height: 58px;
|
|
||||||
background: #f6f4fc;
|
|
||||||
border: 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.code {
|
.title-container {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin: 0 auto 40px auto;
|
||||||
|
font-size: 34px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: $base-color-blue;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 4px;
|
top: 8px;
|
||||||
right: 4px;
|
left: 5px;
|
||||||
|
z-index: $base-z-index;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #ccc;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-radius: $base-border-radius;
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.show-password {
|
||||||
|
position: absolute;
|
||||||
|
right: 25px;
|
||||||
|
left: -35px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #ccc;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep {
|
||||||
|
.el-form-item {
|
||||||
|
padding-right: 0;
|
||||||
|
margin: 20px 0;
|
||||||
|
color: #454545;
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-radius: 2px;
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
min-height: $base-input-height;
|
||||||
|
line-height: $base-input-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__error {
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
left: 18px;
|
||||||
|
font-size: $base-font-size-small;
|
||||||
|
line-height: 18px;
|
||||||
|
color: $base-color-red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-input {
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
input {
|
||||||
|
height: 48px;
|
||||||
|
padding-left: 35px;
|
||||||
|
font-size: $base-font-size-default;
|
||||||
|
line-height: 58px;
|
||||||
|
background: #f6f4fc;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.code {
|
||||||
|
position: absolute;
|
||||||
|
top: 4px;
|
||||||
|
right: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: $base-border-radius;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user