关闭window.open
This commit is contained in:
qijq
parent
36a43bf0e9
commit
7612e5ca27
@ -89,7 +89,7 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
<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
|
||||
</a>
|
||||
</div>
|
||||
@ -97,314 +97,314 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
import { translateTitle } from '@/utils/i18n'
|
||||
import { isPassword } from 'vue-plugin-utils'
|
||||
import { URL } from '@/config'
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
import { translateTitle } from '@/utils/i18n'
|
||||
import { isPassword } from 'vue-plugin-utils'
|
||||
import { URL } from '@/config'
|
||||
|
||||
export default {
|
||||
name: 'Login',
|
||||
directives: {
|
||||
focus: {
|
||||
inserted(el) {
|
||||
el.querySelector('input').focus()
|
||||
export default {
|
||||
name: 'Login',
|
||||
directives: {
|
||||
focus: {
|
||||
inserted(el) {
|
||||
el.querySelector('input').focus()
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
beforeRouteLeave(to, from, next) {
|
||||
clearInterval(this.timer)
|
||||
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,
|
||||
beforeRouteLeave(to, from, next) {
|
||||
clearInterval(this.timer)
|
||||
next()
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.changeCode()
|
||||
if (URL.api_url == 'https://demo.lancerdt.com') {
|
||||
this.form.user_account = 'demoadmin'
|
||||
this.form.user_password = '111111'
|
||||
}
|
||||
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,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.changeCode()
|
||||
if (URL.api_url == 'https://demo.lancerdt.com') {
|
||||
this.form.user_account = 'demoadmin'
|
||||
this.form.user_password = '111111'
|
||||
}
|
||||
|
||||
// 为了演示效果，会在官网演示页自动登录到首页，正式开发可删除
|
||||
if (
|
||||
document.domain === 'vue-admin-beautiful.com' ||
|
||||
document.domain === 'chu1204505056.gitee.io'
|
||||
) {
|
||||
this.previewText = '（演示地址验证码可不填）'
|
||||
this.timer = setTimeout(() => {
|
||||
this.handleLogin()
|
||||
}, 5000)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions({
|
||||
login: 'user/login',
|
||||
}),
|
||||
translateTitle,
|
||||
handlePassword() {
|
||||
this.passwordType === 'password'
|
||||
? (this.passwordType = '')
|
||||
: (this.passwordType = 'password')
|
||||
this.$nextTick(() => {
|
||||
this.$refs.password.focus()
|
||||
})
|
||||
// 为了演示效果，会在官网演示页自动登录到首页，正式开发可删除
|
||||
if (
|
||||
document.domain === 'vue-admin-beautiful.com' ||
|
||||
document.domain === 'chu1204505056.gitee.io'
|
||||
) {
|
||||
this.previewText = '（演示地址验证码可不填）'
|
||||
this.timer = setTimeout(() => {
|
||||
this.handleLogin()
|
||||
}, 5000)
|
||||
}
|
||||
},
|
||||
handleRoute() {
|
||||
return this.redirect === '/404' || this.redirect === '/403'
|
||||
? '/'
|
||||
: this.redirect
|
||||
},
|
||||
handleLogin() {
|
||||
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()
|
||||
}
|
||||
|
||||
let routes = this.$router.options.routes
|
||||
if (routes) {
|
||||
if (!routes.some((route) => route.path === this.redirect)) {
|
||||
this.redirect = '/index'
|
||||
methods: {
|
||||
...mapActions({
|
||||
login: 'user/login',
|
||||
}),
|
||||
translateTitle,
|
||||
handlePassword() {
|
||||
this.passwordType === 'password'
|
||||
? (this.passwordType = '')
|
||||
: (this.passwordType = 'password')
|
||||
this.$nextTick(() => {
|
||||
this.$refs.password.focus()
|
||||
})
|
||||
},
|
||||
handleRoute() {
|
||||
return this.redirect === '/404' || this.redirect === '/403'
|
||||
? '/'
|
||||
: this.redirect
|
||||
},
|
||||
handleLogin() {
|
||||
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()}`
|
||||
this.verify_token = new Date().getTime()
|
||||
this.codeUrl = URL.verifyCode + '?verify_token=' + this.verify_token
|
||||
let routes = this.$router.options.routes
|
||||
if (routes) {
|
||||
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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.login-container {
|
||||
height: 100vh;
|
||||
background: url('~@/assets/login_images/background.jpg') center center fixed
|
||||
no-repeat;
|
||||
background-size: cover;
|
||||
.login-container {
|
||||
height: 100vh;
|
||||
background: url('~@/assets/login_images/background.jpg') center center fixed
|
||||
no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
.internet-content-provider {
|
||||
position: absolute;
|
||||
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 {
|
||||
.internet-content-provider {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin-top: 40px;
|
||||
text-align: left;
|
||||
|
||||
.forget-password {
|
||||
width: 129px;
|
||||
height: 19px;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
color: rgba(92, 102, 240, 1);
|
||||
}
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
margin-bottom: 10px;
|
||||
font-size: $base-font-size-default;
|
||||
color: $base-color-white;
|
||||
|
||||
span {
|
||||
&:first-of-type {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title-container {
|
||||
.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 {
|
||||
margin: 0 auto 40px auto;
|
||||
font-size: 34px;
|
||||
font-weight: bold;
|
||||
color: $base-color-blue;
|
||||
font-size: 36px;
|
||||
font-weight: 500;
|
||||
color: $base-color-white;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 5px;
|
||||
z-index: $base-z-index;
|
||||
font-size: 16px;
|
||||
color: #ccc;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.title-tips {
|
||||
margin-top: 29px;
|
||||
font-size: 26px;
|
||||
font-weight: 400;
|
||||
color: $base-color-white;
|
||||
}
|
||||
|
||||
.show-password {
|
||||
position: absolute;
|
||||
right: 25px;
|
||||
left: -35px;
|
||||
font-size: 16px;
|
||||
color: #ccc;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.login-btn {
|
||||
margin: auto;
|
||||
display: inherit;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
margin-top: 5px;
|
||||
border: 0;
|
||||
font-size: 18px;
|
||||
|
||||
::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;
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
&__error {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 18px;
|
||||
font-size: $base-font-size-small;
|
||||
line-height: 18px;
|
||||
color: $base-color-red;
|
||||
.forget-passwordword {
|
||||
width: 100%;
|
||||
margin-top: 40px;
|
||||
text-align: left;
|
||||
|
||||
.forget-password {
|
||||
width: 129px;
|
||||
height: 19px;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
color: rgba(92, 102, 240, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-input {
|
||||
box-sizing: border-box;
|
||||
.tips {
|
||||
margin-bottom: 10px;
|
||||
font-size: $base-font-size-default;
|
||||
color: $base-color-white;
|
||||
|
||||
input {
|
||||
height: 48px;
|
||||
padding-left: 35px;
|
||||
font-size: $base-font-size-default;
|
||||
line-height: 58px;
|
||||
background: #f6f4fc;
|
||||
border: 0;
|
||||
span {
|
||||
&:first-of-type {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
top: 8px;
|
||||
left: 5px;
|
||||
z-index: $base-z-index;
|
||||
font-size: 16px;
|
||||
color: #ccc;
|
||||
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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user