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. 236
      src/views/login.vue

236
src/views/login.vue
Unescape View File

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

Write Preview
Loading…
Cancel
Save