初始化
This commit is contained in:
322
addons/webman/views/login.vue
Normal file
322
addons/webman/views/login.vue
Normal file
@@ -0,0 +1,322 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="login-layout">
|
||||
<div class="left">
|
||||
<div class="logo-container">
|
||||
<img v-if="webLogo" class="logo" src="/exadmin/img/login_logo.png"/>
|
||||
</div>
|
||||
<div class="left-container">
|
||||
<img class="ad" src="/exadmin/img/login-box-bg.9027741f.svg">
|
||||
<div class="text-block">
|
||||
{{ webName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="login-container">
|
||||
<a-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
|
||||
<div class="title-container">
|
||||
<h3 class="title">
|
||||
<span>{{ admin_login }}</span>
|
||||
</h3>
|
||||
</div>
|
||||
<a-form-item name="username">
|
||||
<a-input
|
||||
v-model:value="loginForm.username"
|
||||
auto-complete="on"
|
||||
placeholder:enter_account
|
||||
size="large"
|
||||
tabindex="1"
|
||||
>
|
||||
<template #prefix>
|
||||
<UserOutlined/>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item name="password">
|
||||
<a-input-password
|
||||
v-model:value="loginForm.password"
|
||||
auto-complete="on"
|
||||
placeholder:enter_password
|
||||
size="large"
|
||||
tabindex="2"
|
||||
@keyup.enter.native="handleLogin"
|
||||
>
|
||||
<template #prefix>
|
||||
<LockOutlined/>
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
<div v-if="verification" style="display: flex;justify-content: space-between;">
|
||||
<a-form-item name="verify" style="flex:1;margin-right: 10px">
|
||||
<a-input
|
||||
v-model:value="loginForm.verify"
|
||||
auto-complete="on"
|
||||
maxlength="4"
|
||||
placeholder:enter_verify
|
||||
size="large"
|
||||
tabindex="3"
|
||||
@keyup.enter.native="handleLogin"
|
||||
>
|
||||
<template #prefix>
|
||||
<SafetyCertificateOutlined/>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<img :height="40" :src="verifyImage" class="verify" @click="getVerify"/>
|
||||
</div>
|
||||
<a-button :loading="loading" block size="large" type="primary" @click="handleLogin">{{ loginBtnText }}
|
||||
</a-button>
|
||||
</a-form>
|
||||
</div>
|
||||
<div class="icp"><a href="http://beian.miit.gov.cn" target="_blank">{{ webMiitbeian }}</a> | {{ webCopyright }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'Login',
|
||||
props: {
|
||||
webLogo: String,
|
||||
webName: String,
|
||||
webCopyright: String,
|
||||
webMiitbeian: String,
|
||||
deBug: Boolean,
|
||||
agent_login: String,
|
||||
admin_login: String,
|
||||
enter_account: String,
|
||||
enter_password: String,
|
||||
enter_verify: String,
|
||||
password_verify: String,
|
||||
login: String,
|
||||
},
|
||||
data() {
|
||||
const validatePassword = (rule, value, callback) => {
|
||||
if (value.length < 5) {
|
||||
return Promise.reject(this.password_verify)
|
||||
} else {
|
||||
return Promise.resolve()
|
||||
}
|
||||
}
|
||||
return {
|
||||
verification: false,
|
||||
loginForm: {
|
||||
username: '',
|
||||
password: '',
|
||||
verify: '',
|
||||
hash: '',
|
||||
source: 'admin',
|
||||
},
|
||||
loginRules: {
|
||||
username: [{required: true, trigger: 'change', message: this.enter_account}],
|
||||
verify: [{required: true, message: this.enter_verify}],
|
||||
password: [{required: true, trigger: 'change', validator: validatePassword}]
|
||||
},
|
||||
loading: false,
|
||||
verifyImage: '',
|
||||
loginBtnText: this.login,
|
||||
redirect: null,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route: {
|
||||
handler: function (route) {
|
||||
if (route.query && route.query.redirect) {
|
||||
const index = route.fullPath.indexOf('?redirect=')
|
||||
if (index > -1) {
|
||||
this.redirect = route.fullPath.substr(index + 10)
|
||||
}
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.deBug) {
|
||||
this.loginForm.username = '';
|
||||
this.loginForm.password = '';
|
||||
}
|
||||
this.getVerify()
|
||||
},
|
||||
methods: {
|
||||
getVerify() {
|
||||
this.$request({
|
||||
url: 'ex-admin/login/captcha'
|
||||
}).then(res => {
|
||||
this.verifyImage = res.data.image
|
||||
this.loginForm.hash = res.data.hash
|
||||
this.verification = res.data.verification
|
||||
})
|
||||
},
|
||||
|
||||
handleLogin(data) {
|
||||
this.$refs.loginForm.validate().then(() => {
|
||||
this.loading = true
|
||||
this.$action.login(this.loginForm).then(res => {
|
||||
this.$router.push(this.redirect || '/')
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
}).catch(() => {
|
||||
this.getVerify()
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
.logo {
|
||||
|
||||
}
|
||||
|
||||
.login-layout .left {
|
||||
position: relative;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
margin-left: 150px;
|
||||
}
|
||||
|
||||
.login-layout .left .ad {
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.login-layout .right {
|
||||
position: relative;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.icp {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
|
||||
width: 100%;
|
||||
color: #000;
|
||||
opacity: .5;
|
||||
font-size: 12px;
|
||||
|
||||
}
|
||||
|
||||
.icp a {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@keyframes bg-run {
|
||||
0% {
|
||||
background-position-x: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
background-position-x: -1920px;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
overflow: hidden;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.container:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-left: -48%;
|
||||
background-image: url("/exadmin/img/login-bg.b9f5c736.svg");
|
||||
background-position: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto 100%;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.text-block {
|
||||
margin-top: 30px;
|
||||
font-size: 32px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
position: relative;
|
||||
top: 50px;
|
||||
margin-left: 20px;
|
||||
|
||||
}
|
||||
|
||||
.logo-container img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.login-layout {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.left-container {
|
||||
position: absolute;
|
||||
top: calc(50% - 100px);
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
width: 400px;
|
||||
position: absolute;
|
||||
top: calc(50% - 250px);
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.login-container .login-form {
|
||||
|
||||
}
|
||||
|
||||
.login-container .tips {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.login-container .svg-container {
|
||||
padding: 6px 5px 6px 15px;
|
||||
color: #889aa4;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.login-container .title-container .title {
|
||||
font-size: 26px;
|
||||
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.login-container .show-pwd {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 7px;
|
||||
font-size: 16px;
|
||||
color: #889aa4;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.verify {
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user