<!--登陆注册-->
<template>
<div :style="{ backgroundImage: 'url(' + bgUrl + ')' }" class="login-container">
<!-- 登陆框 -->
<div class="FormBox">
<div class="fromTitle">
<div class="itemTitle" @click="change(0)">
<div class="title" :class="{ txt2175a1: select == '0' }">
登陆
</div>
<div class="rectangle" :class="{ bg2175a1: select == '0' }" />
</div>
<div class="itemTitle" @click="change(1)">
<div class="title" :class="{ txt2175a1: select == '1' }">
注册
</div>
<div class="rectangle" :class="{ bg2175a1: select == '1' }" />
</div>
</div>
<div v-if="select == '0'" class="login-div">
<div ref="element" class="right-div">
<el-form id="login-form" ref="loginForm" :model="loginForm" size="large" :rules="loginRules"
class="login-form" autocomplete="on" label-position="right">
<el-form-item prop="username" label="用户:">
<el-input v-model.trim="loginForm.username" name="username" type="text" autocomplete="on"
placeholder="用户名" style="width: 217px">
<!-- <span slot="prefix" class="input-prefix-icon">
<svg-icon icon-class="user" />
</span> -->
</el-input>
</el-form-item>
<el-form-item prop="password" label="密码:">
<el-input v-model.trim="loginForm.password" :type="pwdType" name="password" auto-complete="on"
placeholder="密码" @keyup.enter.native="handleLogin" style="width: 217px">
<!-- <span slot="prefix" class="input-prefix-icon">
<svg-icon icon-class="password" />
</span> -->
<span slot="suffix" class="show-pwd" @click="showPwd">
<svg-icon :icon-class="pwdType === 'password' ? 'eye' : 'eye-open'" />
</span>
</el-input>
</el-form-item>
<el-form-item>
<div class="txtbtn">
<el-checkbox v-model="checked">
记住密码
</el-checkbox>
<div class="txt2175a1">
忘记密码?
</div>
</div>
</el-form-item>
<kaptcha-comp v-if="showKaptcha" ref="kaptcha" @passKaptcha="passKaptcha" />
<el-form-item style="margin-left: 54px;">
<el-button :loading="loading" class="login-btn" type="primary" style="width: 217px"
@click.native.prevent="handleLogin">
登录
</el-button>
</el-form-item>
</el-form>
</div>
<div class="clear-div" />
</div>
<div v-if="select == '1'" class="register">
<el-form ref="register" class="register-form" :model="register" :rules="registerRules">
<el-form-item prop="phone">
<el-input v-model="register.phone" placeholder="请输入手机号" style="width: 320px">
<template slot="prepend">
+86
</template>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model.trim="register.password" placeholder="请输入登录密码" style="width: 320px" />
</el-form-item>
<el-form-item prop="confirmPassword">
<el-input v-model.trim="register.confirmPassword" placeholder="请再次输入密码" style="width: 320px" />
</el-form-item>
<el-form-item>
<div>
<el-radio-group v-model="register.roleId"
style=" width: 320px; display: flex; justify-content: space-between; ">
<el-radio :label="1">
供应商
</el-radio>
<el-radio :label="2">
经销商
</el-radio>
<el-radio :label="3">
子公司
</el-radio>
</el-radio-group>
</div>
</el-form-item>
<el-form-item>
<el-input v-model="register.verifyCode" placeholder="请输入验证码" style="width: 200px" />
<el-button type="primary" class="bg2175a1" style="margin-left:5px" @click="sendCode">
获取验证码
</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" style="width: 320px" class="bg2175a1" @click="registerClick">
注册
</el-button>
</el-form-item>
</el-form>
</div>
</div>
<!-- 登陆框 -->
<!-- 标题 -->
<div class="system-title">
<!--logo-img-->
<svg-icon icon-class="logo" />
<!--title-img-->
<div class="title-img-div">
<img :src="titleUrl" class="title-img" fit="scale-down">
</div>
</div>
<!-- 标题 -->
</div>
</template>
<script>
import { RSAencrypt, RSAdecrypt } from '@/utils/security'
import kaptchaComp from '@/views/login/kaptcha/kaptcha'
import { getCode, UserRegister } from '../../api/login/login'
export default {
name: 'Login',
components: {
// 注册组件
kaptchaComp: kaptchaComp
},
data() {
const validateUsername = (rule, value, callback) => {
if (value.length < 1) {
callback(new Error('用户名不能为空'))
} else {
callback()
}
}
const validatePass = (rule, value, callback) => {
if (value.length < 1) {
callback(new Error('密码不能为空'))
} else {
callback()
}
}
const validateKaptcha = (rule, value, callback) => {
console.log('验证验证码')
if (this.showKaptcha) {
// 如果开启了验证码判断，否则不判断
if (value.length < 1) {
callback(new Error('验证码不能为空'))
} else {
callback()
}
} else {
callback()
}
}
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'))
} else if (value !== this.register.password) {
console.log(value)
callback(new Error('两次输入密码不一致!'))
} else {
callback()
}
}
const validatephone = (rule, value, callback) => {
if (value.length != 11) {
callback(new Error('手机号不正确请重新输入'))
} else {
callback()
}
}
return {
select: 0,
register: {
verifyCode: '',
account: '',
roleId: 1,
deptId: '',
password: '',
phone: '',
confirmPassword: ''
},
loginForm: {
username: '',
password: '',
kaptcha: ''
},
registerRules: {
phone: [
{ validator: validatephone, trigger: 'blur', required: true }
],
password: [
{ validator: validatePass, trigger: 'blur', required: true }
],
confirmPassword: [
{ validator: validatePass2, trigger: 'blur', required: true }
]
},
loginRules: {
username: [
{
required: true,
trigger: ['blur', 'change'],
validator: validateUsername
}
],
password: [
{
required: true,
trigger: ['blur', 'change'],
validator: validatePass
}
],
kaptcha: [
{
required: false,
trigger: ['blur', 'change'],
validator: validateKaptcha
}
]
},
checked:false, // 是否记住密码
loading: false,
pwdType: 'password',
redirect: '/',
showKaptcha: false, // 是否显示验证码
passwordFlag: 'smartKitchen_password', // 本地存储密码标识
usernameFlag: 'smartKitchen_username', // 本地存储用户名标识
bgUrl: require('../../assets/kitchen/bg.png'), // 背景图片
titleUrl: require('../../assets/kitchen/title.png') // 背景图片
}
},
watch: {
$route: {
handler: function (route) {
this.redirect = route.query && route.query.redirect
},
immediate: true
}
},
mounted(){
if (localStorage.getItem(this.passwordFlag)) {
// 根据本地存储 来判断是否有保存的密码
this.checked = true
this.loginForm.username = localStorage.getItem(this.usernameFlag)
this.loginForm.password = RSAdecrypt(localStorage.getItem(this.passwordFlag))
}
},
beforeCreate: function () {
// 从后台获取系统配置，根据配置判断是否加载验证码控件
this.loading = true
this.$store
.dispatch('GetConfig')
.then(() => {
this.loading = false
this.$message.success('连接服务器成功')
this.showKaptcha = this.$store.getters.kaptcha
})
.catch((e) => {
this.$message.error('连接服务器失败')
this.loading = false
})
},
methods: {
registerClick() {
// console.log(1111);
const temp = {}
// const temp ={...this.register}
temp.deptId = this.register.roleId
temp.verifyCode = this.register.verifyCode
temp.roleId = this.register.roleId
temp.password = RSAencrypt(this.register.password)
temp.account = this.register.phone
temp.phone = this.register.phone
// temp.password = (this.password)
UserRegister(temp).then(res => {
if (res != '') {
this.$message.success('注册成功，请前往登陆页登陆')
}
})
},
sendCode() {
getCode(this.register.phone).then(res => {
if (res != '') {
this.$message.success('验证码发送成功')
}
})
},
change(index) {
this.select = index
},
showPwd() {
// 明文显示密码
if (this.pwdType === 'password') {
this.pwdType = ''
} else {
this.pwdType = 'password'
}
},
passKaptcha() {
// 从子组件获取验证码的数据
this.loginForm.kaptcha = this.$refs.kaptcha.kaptcha
console.log(this.loginForm.kaptcha)
},
// 点击登录按钮
handleLogin() {
this.$refs.loginForm.validate((valid) => {
if (valid) {
this.loading = true
// 密码加密
const loginForm = {
sid: this.$store.getters.sid,
username: this.loginForm.username,
password: RSAencrypt(this.loginForm.password),
kaptcha: this.loginForm.kaptcha
}
this.$store
.dispatch('Login', loginForm)
.then(() => {
this.loading = false
this.$message.success('登录成功')
this.$router.push({ path: '/' }, () => { })
// 判断是否记住密码
if (this.checked) {
// 本地持久化存储用户名密码
localStorage.setItem(this.passwordFlag, loginForm.password)
localStorage.setItem(this.usernameFlag, loginForm.username)
} else {
localStorage.removeItem(this.passwordFlag)
localStorage.removeItem(this.usernameFlag)
}
})
.catch(() => {
this.loading = false
if (this.showKaptcha) {
this.$refs.kaptcha.refreshCode()
}
})
} else {
return false
}
})
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss">
$bg: #ffffff;
$light_gray: #ffffff;
$dark_gray: #889aa4;
/* reset element-ui css */
.login-container {
// .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
// display: none;
// }
.txtbtn {
display: flex;
justify-content: space-evenly;
width: 310px;
border-color: #2175a1;
}
.bg2175a1 {
background: #2175a1;
border-color: #2175a1;
}
.txt2175a1 {
color: #2175a1 !important;
}
.FormBox {
background: #efefef;
width: 460px;
// height: 450px;
border-radius: 10px;
position: absolute;
overflow: hidden;
left: 64%;
top: 60%;
margin-top: -220px;
padding: 20px;
box-sizing: border-box;
.fromTitle {
display: flex;
height: 60px;
align-items: center;
justify-content: space-evenly;
.itemTitle {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
.title {
font-size: 25px;
color: #666;
}
.rectangle {
margin-top: 10px;
height: 2px;
width: 100px;
// background: red;
}
}
}
.register-form {
max-width: 100%;
padding: 15px 15px 5px 48px;
margin: auto;
overflow: hidden;
}
}
.el-form-item {
/*border: 1px solid #c5c5c5;*/
// background: #ffffff;
border-radius: 5px;
/*color: #000000;*/
// margin-bottom: 35px;
width: 320px;
display: flex;
.el-form-item__content {
line-height: 47px;
}
.el-input__inner {
/*padding-top: 5px;*/
/*padding-bottom:5px;*/
height: 48px;
}
}
.el-button {
line-height: 1.2;
}
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
$bg: #ffffff;
$dark_gray: #889aa4;
$light_gray: #fff;
.login-container {
position: relative;
height: 100%;
width: 100%;
background-repeat: no-repeat;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
background-color: $bg;
min-height: 900px;
.system-title {
font-size: 30px;
color: white;
position: absolute;
top: 228px;
right: 141px;
display: flex;
justify-content: flex-start;
align-items: center;
.title-img-div {
position: relative;
height: 100%;
min-width: 200px;
.title-img {
height: 100%;
}
/*width: 200px;*/
}
}
/*登录div*/
.login-div {
// width:500px;
// position:absolute;
// overflow:hidden;
// left:60%;
// top:50%;
// margin-top:-220px;
.right-div {
width: 100%;
padding: 20px 50px;
float: left;
.login-form {
max-width: 100%;
padding: 15px 15px 5px 15px;
margin: auto;
overflow: hidden;
/*输入框前图标*/
.input-prefix-icon {
padding: 0px 6px;
color: $dark_gray;
}
/*显示密码图标*/
.show-pwd {
font-size: 16px;
padding: 0 6px;
color: $dark_gray;
cursor: pointer;
user-select: none;
}
/*用户登录*/
.login-title {
font-size: 25px;
font-weight: 500;
color: #0e3877;
margin: 10px auto 10px auto;
}
/*登录英文*/
.login-subtitle {
font-size: 18px;
font-weight: 400;
color: #9c9c9c;
margin: 10px auto 30px auto;
}
/*登录按钮*/
.login-btn {
background-color: #2175a1;
font-size: 17px;
border-color: #2175a1;
color: #fff;
line-height: 1.2;
padding: 12px 20px;
}
.login-btn:hover {
background-color: #2175a1;
border-color: #2175a1;
}
}
.clear-div {
clear: both;
}
}
}
}
</style>
