root
/
cy_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

去验证码

Browse Source
master
Mr.sun 2 years ago
parent ab4f63608b
commit b3e09bff8a
1 changed files with 145 additions and 105 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 250
      src/views/login.vue

250
src/views/login.vue
Unescape View File

@ -1,27 +1,64 @@
<template>
<div class="login">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
<el-form
ref="loginForm"
:model="loginForm"
:rules="loginRules"
class="login-form"
>
<h3 class="title">后台管理系统</h3>
<el-form-item prop="username">
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="请输入账号"
@keyup.enter.native="changeBranchList" @blur="changeBranchList">
<span class="item-label" slot="prefix">账号</span>
<el-input
v-model="loginForm.username"
type="text"
auto-complete="off"
placeholder="请输入账号"
@keyup.enter.native="changeBranchList"
@blur="changeBranchList"
>
<span
class="item-label"
slot="prefix"
>账号</span>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="请输入密码"
@keyup.enter.native="handleLogin">
<span class="item-label" slot="prefix">密码</span>
<el-input
v-model="loginForm.password"
type="password"
auto-complete="off"
placeholder="请输入密码"
@keyup.enter.native="handleLogin"
>
<span
class="item-label"
slot="prefix"
>密码</span>
</el-input>
</el-form-item>
<el-form-item v-if="branchShow" :rules="validateType">
<el-select placeholder="请选择仓库" v-model="loginForm.branchId" style="width: 100%" clearable>
<span class="item-label" slot="prefix">仓库</span>
<el-option v-for="(item, index) in branchList" :key="index" :label="item.branchName"
:value="item.id"></el-option>
<el-form-item
v-if="branchShow"
:rules="validateType"
>
<el-select
placeholder="请选择仓库"
v-model="loginForm.branchId"
style="width: 100%"
clearable
>
<span
class="item-label"
slot="prefix"
>仓库</span>
<el-option
v-for="(item, index) in branchList"
:key="index"
:label="item.branchName"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item prop="code" v-if="captchaOnOff">
<!-- <el-form-item prop="code" v-if="captchaOnOff">
<el-input v-model="loginForm.code" auto-complete="off" placeholder="请输入验证码" style="width: 63%"
@keyup.enter.native="handleLogin">
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
@ -29,16 +66,27 @@
<div class="login-code">
<img :src="codeUrl" @click="getCode" class="login-code-img" />
</div>
</el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin: 0px 0px 25px 0px">记住密码</el-checkbox>
</el-form-item> -->
<!-- <el-checkbox v-model="loginForm.rememberMe" style="margin: 0px 0px 25px 0px">记住密码</el-checkbox> -->
<el-form-item style="width: 100%">
<el-button :loading="loading" size="medium" type="primary" style="width: 100%"
@click.native.prevent="handleLogin">
<el-button
:loading="loading"
size="medium"
type="primary"
style="width: 100%"
@click.native.prevent="handleLogin"
>
<span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span>
</el-button>
<div style="float: right" v-if="register">
<router-link class="link-type" :to="'/register'">立即注册</router-link>
<div
style="float: right"
v-if="register"
>
<router-link
class="link-type"
:to="'/register'"
>立即注册</router-link>
</div>
</el-form-item>
</el-form>
@ -50,34 +98,30 @@
</template>
<script>
import { getCodeImg } from "@/api/login";
import { optionBranchByUserName } from "@/api/system/branch";
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";
import { getCodeImg } from '@/api/login'
import { optionBranchByUserName } from '@/api/system/branch'
import Cookies from 'js-cookie'
import { encrypt, decrypt } from '@/utils/jsencrypt'
export default {
name: "Login",
data () {
name: 'Login',
data() {
return {
branchList: [], // 仓库列表
branchShow: true, // 是否展示仓库选择
codeUrl: "",
codeUrl: '',
loginForm: {
username: "",
password: "",
branchId: "",
username: '',
password: '',
branchId: '',
rememberMe: false,
code: "",
uuid: "",
code: '',
uuid: ''
},
loginRules: {
username: [
{ required: true, trigger: "blur", message: "请输入您的账号" },
],
password: [
{ required: true, trigger: "blur", message: "请输入您的密码" },
],
code: [{ required: true, trigger: "change", message: "请输入验证码" }],
username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],
code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
},
loading: false,
// 验证码开关
@ -85,116 +129,112 @@ export default {
// 注册开关
register: false,
redirect: undefined,
roleType: "",
};
roleType: ''
}
},
watch: {
$route: {
handler: function (route) {
this.redirect = route.query && route.query.redirect;
this.redirect = route.query && route.query.redirect
},
immediate: true,
},
immediate: true
}
},
computed: {
validateType () {
return this.roleType === 4
? [{ required: true, message: "请选择仓库", trigger: "change" }]
: [];
},
validateType() {
return this.roleType === 4 ? [{ required: true, message: '请选择仓库', trigger: 'change' }] : []
}
},
created () {
this.getCode();
this.getCookie();
this.changeBranchList();
created() {
this.getCode()
this.getCookie()
this.changeBranchList()
},
methods: {
// 登陆时根据输入的用户名获取仓库选择框列表
changeBranchList () {
changeBranchList() {
if (this.loginForm.username) {
optionBranchByUserName(this.loginForm.username).then((res) => {
if (res.code === 200) {
this.roleType = res.data.status;
this.roleType = res.data.status
switch (res.data.status) {
case 1:
this.branchShow = false;
break;
this.branchShow = false
break
case 2:
this.branchShow = true;
this.loginForm.branchId = "";
this.branchList = [];
break;
this.branchShow = true
this.loginForm.branchId = ''
this.branchList = []
break
case 3:
this.branchShow = true;
this.branchList = res.data.baseBranchs;
break;
this.branchShow = true
this.branchList = res.data.baseBranchs
break
case 4:
this.branchShow = true;
this.branchList = res.data.baseBranchs;
break;
this.branchShow = true
this.branchList = res.data.baseBranchs
break
default:
this.branchShow = false;
break;
this.branchShow = false
break
}
}
});
})
}
},
getCode () {
getCode() {
getCodeImg().then((res) => {
this.captchaOnOff =
res.captchaOnOff === undefined ? true : res.captchaOnOff;
this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff
if (this.captchaOnOff) {
this.codeUrl = "data:image/gif;base64," + res.img;
this.loginForm.uuid = res.uuid;
this.codeUrl = 'data:image/gif;base64,' + res.img
this.loginForm.uuid = res.uuid
}
});
})
},
getCookie () {
const username = Cookies.get("username");
const password = Cookies.get("password");
const rememberMe = Cookies.get("rememberMe");
getCookie() {
const username = Cookies.get('username')
const password = Cookies.get('password')
const rememberMe = Cookies.get('rememberMe')
this.loginForm = {
username: username === undefined ? this.loginForm.username : username,
password:
password === undefined ? this.loginForm.password : decrypt(password),
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
};
password: password === undefined ? this.loginForm.password : decrypt(password),
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
}
},
handleLogin () {
handleLogin() {
this.$refs.loginForm.validate((valid) => {
if (valid) {
this.loading = true;
this.loading = true
if (this.loginForm.rememberMe) {
Cookies.set("username", this.loginForm.username, { expires: 30 });
Cookies.set("password", encrypt(this.loginForm.password), {
expires: 30,
});
Cookies.set("rememberMe", this.loginForm.rememberMe, {
expires: 30,
});
Cookies.set('username', this.loginForm.username, { expires: 30 })
Cookies.set('password', encrypt(this.loginForm.password), {
expires: 30
})
Cookies.set('rememberMe', this.loginForm.rememberMe, {
expires: 30
})
} else {
Cookies.remove("username");
Cookies.remove("password");
Cookies.remove("rememberMe");
Cookies.remove('username')
Cookies.remove('password')
Cookies.remove('rememberMe')
}
this.$store
.dispatch("Login", this.loginForm)
.dispatch('Login', this.loginForm)
.then(() => {
this.$router.push({ path: this.redirect || "/" }).catch(() => { });
this.$router.push({ path: this.redirect || '/' }).catch(() => {})
})
.catch(() => {
this.loading = false;
this.loading = false
if (this.captchaOnOff) {
this.getCode();
this.getCode()
}
});
})
}
});
},
},
};
})
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss">
@ -203,7 +243,7 @@ export default {
justify-content: center;
align-items: center;
height: 100%;
background-image: url("../assets/images/login-background.jpg");
background-image: url('../assets/images/login-background.jpg');
background-size: cover;
background-color: rgba(0, 110, 255, 0.0980392156862745);
// filter:blur(1px)

Write Preview
Loading…
Cancel
Save