xinyilu/xinelu-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

登录页

Browse Source
This commit is contained in:
shidongli 2023-09-21 10:54:19 +08:00
parent 395e46f7ff
commit 7cea6b0b31
1 changed files with 46 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

181
src/views/login.vue
View File

@ -1,25 +1,15 @@
<template> <template>
<div class="login"> <div class="login">
<el-form <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
ref="loginForm" <h3 class="title">若依后台管理系统</h3>
:model="loginForm"
:rules="loginRules"
class="login-form"
>
<h3 class="title">新版小程序管理系统</h3>
<el-form-item prop="username"> <el-form-item prop="username">
<el-input <el-input
v-model="loginForm.username" v-model="loginForm.username"
type="text" type="text"
auto-complete="off" auto-complete="off"
placeholder="账号" placeholder="账号"
style="width: 310px"
> >
<svg-icon <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
slot="prefix"
icon-class="user"
class="el-input__icon input-icon"
/>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password">
@ -29,13 +19,8 @@
auto-complete="off" auto-complete="off"
placeholder="密码" placeholder="密码"
@keyup.enter.native="handleLogin" @keyup.enter.native="handleLogin"
style="width: 310px"
> >
<svg-icon <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
slot="prefix"
icon-class="password"
class="el-input__icon input-icon"
/>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="code" v-if="captchaOnOff"> <el-form-item prop="code" v-if="captchaOnOff">
@ -43,59 +28,35 @@
v-model="loginForm.code" v-model="loginForm.code"
auto-complete="off" auto-complete="off"
placeholder="验证码" placeholder="验证码"
style="width: 200px" style="width: 63%"
@keyup.enter.native="handleLogin" @keyup.enter.native="handleLogin"
> >
<svg-icon <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
slot="prefix"
icon-class="validCode"
class="el-input__icon input-icon"
/>
</el-input> </el-input>
<div class="login-code"> <div class="login-code">
<img :src="codeUrl" @click="getCode" class="login-code-img" /> <img :src="codeUrl" @click="getCode" class="login-code-img"/>
</div> </div>
</el-form-item> </el-form-item>
<el-checkbox <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
v-model="loginForm.rememberMe" <el-form-item style="width:100%;">
style="margin: 0px 0px 25px 0px"
>记住密码</el-checkbox
>
<el-form-item style="width: 100%">
<el-button <el-button
:loading="loading" :loading="loading"
size="medium" size="medium"
style=" type="primary"
width: 300px; style="width:100%;"
height: 50px;
background-image: linear-gradient(to right, #01a4ff, #1259ee);
border-radius: -33px;
border: none;
color: #ffffff;
border-radius: 20px;
"
@click.native.prevent="handleLogin" @click.native.prevent="handleLogin"
> >
<span v-if="!loading">登 录</span> <span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span> <span v-else>登 录 中...</span>
</el-button> </el-button>
<div style="float: right" v-if="register"> <div style="float: right;" v-if="register">
<router-link class="link-type" :to="'/register'" <router-link class="link-type" :to="'/register'">立即注册</router-link>
>立即注册</router-link
>
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div class="bg" style="border-radius: 0 6px 6px 0; padding: 0">
<img
src="../assets/images/bg3.png"
alt=""
style="width: 1400px; height: 700px; border-radius: 0 6px 6px 0"
/>
</div>
<!-- 底部 --> <!-- 底部 -->
<div class="el-login-footer"> <div class="el-login-footer">
<!-- <span>Copyright © 2018-2022 xinyilu.vip All Rights Reserved.</span> --> <span>Copyright © 2018-2022 xinelu.vip All Rights Reserved.</span>
</div> </div>
</div> </div>
</template> </template>
@ -103,7 +64,7 @@
<script> <script>
import { getCodeImg } from "@/api/login"; import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie"; import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt"; import { encrypt, decrypt } from '@/utils/jsencrypt'
export default { export default {
name: "Login", name: "Login",
@ -115,32 +76,32 @@ export default {
password: "", password: "",
rememberMe: false, rememberMe: false,
code: "", code: "",
uuid: "", uuid: ""
}, },
loginRules: { loginRules: {
username: [ username: [
{ required: true, trigger: "blur", message: "请输入您的账号" }, { required: true, trigger: "blur", message: "请输入您的账号" }
], ],
password: [ password: [
{ required: true, trigger: "blur", message: "请输入您的密码" }, { required: true, trigger: "blur", message: "请输入您的密码" }
], ],
code: [{ required: true, trigger: "change", message: "请输入验证码" }], code: [{ required: true, trigger: "change", message: "请输入验证码" }]
}, },
loading: false, loading: false,
// 验证码开关 // 验证码开关
captchaOnOff: true, captchaOnOff: true,
// 注册开关 // 注册开关
register: false, register: false,
redirect: undefined, redirect: undefined
}; };
}, },
watch: { watch: {
$route: { $route: {
handler: function (route) { handler: function(route) {
this.redirect = route.query && route.query.redirect; this.redirect = route.query && route.query.redirect;
}, },
immediate: true, immediate: true
}, }
}, },
created() { created() {
this.getCode(); this.getCode();
@ -148,9 +109,8 @@ export default {
}, },
methods: { methods: {
getCode() { getCode() {
getCodeImg().then((res) => { getCodeImg().then(res => {
this.captchaOnOff = this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
res.captchaOnOff === undefined ? true : res.captchaOnOff;
if (this.captchaOnOff) { if (this.captchaOnOff) {
this.codeUrl = "data:image/gif;base64," + res.img; this.codeUrl = "data:image/gif;base64," + res.img;
this.loginForm.uuid = res.uuid; this.loginForm.uuid = res.uuid;
@ -160,93 +120,61 @@ export default {
getCookie() { getCookie() {
const username = Cookies.get("username"); const username = Cookies.get("username");
const password = Cookies.get("password"); const password = Cookies.get("password");
const rememberMe = Cookies.get("rememberMe"); const rememberMe = Cookies.get('rememberMe')
this.loginForm = { this.loginForm = {
username: username === undefined ? this.loginForm.username : username, username: username === undefined ? this.loginForm.username : username,
password: password: password === undefined ? this.loginForm.password : decrypt(password),
password === undefined ? this.loginForm.password : decrypt(password), rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
}; };
}, },
handleLogin() { handleLogin() {
this.$refs.loginForm.validate((valid) => { this.$refs.loginForm.validate(valid => {
if (valid) { if (valid) {
this.loading = true; this.loading = true;
if (this.loginForm.rememberMe) { if (this.loginForm.rememberMe) {
Cookies.set("username", this.loginForm.username, { expires: 30 }); Cookies.set("username", this.loginForm.username, { expires: 30 });
Cookies.set("password", encrypt(this.loginForm.password), { Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
expires: 30, Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
});
Cookies.set("rememberMe", this.loginForm.rememberMe, {
expires: 30,
});
} else { } else {
Cookies.remove("username"); Cookies.remove("username");
Cookies.remove("password"); Cookies.remove("password");
Cookies.remove("rememberMe"); Cookies.remove('rememberMe');
} }
this.$store this.$store.dispatch("Login", this.loginForm).then(() => {
.dispatch("Login", this.loginForm) this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
.then(() => { }).catch(() => {
this.$router.push({ path: this.redirect || "/" }).catch(() => {}); this.loading = false;
setTimeout(() => { if (this.captchaOnOff) {
this.loading = false; this.getCode();
}, 1500); }
}) });
.catch(() => {
this.loading = false;
if (this.captchaOnOff) {
this.getCode();
}
});
} }
}); });
}, }
}, }
}; };
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss">
.bg {
position: absolute;
}
// .el-input el-input--medium el-input--prefix{
// height: 50px;
// line-height: 36px;
// background-color: red;
// border: none;
// border-radius: 10px;
// }
.el-input--medium ::v-deep .el-input__inner {
height: 50px;
line-height: 36px;
// background-color: red;
border: none;
border: 1px solid #e5e5e5;
border-radius: 36px;
}
.login { .login {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100%; height: 100%;
background-image: url("../assets/images/bg2.png"); background-image: url("../assets/images/login-background.jpg");
background-size: cover; background-size: cover;
} }
.title { .title {
margin: 0px 40px 30px auto; margin: 0px auto 30px auto;
text-align: center; text-align: center;
color: #707070; color: #707070;
} }
.login-form { .login-form {
margin-left: 20%;
border-radius: 6px; border-radius: 6px;
background: #ffffff; background: #ffffff;
width: 400px; width: 400px;
padding: 25px 25px 5px 25px; padding: 25px 25px 5px 25px;
z-index: 999;
margin-right: 50%;
.el-input { .el-input {
height: 38px; height: 38px;
input { input {
@ -256,8 +184,7 @@ export default {
.input-icon { .input-icon {
height: 39px; height: 39px;
width: 14px; width: 14px;
margin-left: 5px; margin-left: 2px;
margin-top: 5px;
} }
} }
.login-tip { .login-tip {
@ -269,7 +196,6 @@ export default {
width: 33%; width: 33%;
height: 38px; height: 38px;
float: right; float: right;
margin-right: 30px;
img { img {
cursor: pointer; cursor: pointer;
vertical-align: middle; vertical-align: middle;
@ -289,20 +215,5 @@ export default {
} }
.login-code-img { .login-code-img {
height: 38px; height: 38px;
margin-top: 5px;
} }
// .el-button{
// background-image: linear-gradient(to right , #90C8DF, #4CA8CD);
// border-radius: -33px;
// border: none;
// height: 50px;
// color: #FFFFFF;
// border-radius: 20px;
// }
// .el-button--primary {
// color: #FFFFFF;
// // background-color: #1890ff;
// // border-color: #1890ff;
// }
</style> </style>