|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
|
|
|
<div class="login-container">
|
|
|
-
|
|
|
+
|
|
|
|
|
|
<div class="login-weaper animated bounceInDown" style="z-index:100">
|
|
|
<div class="login-left">
|
|
@@ -13,19 +13,19 @@
|
|
|
<el-image src="/static/img/login.png">
|
|
|
</el-image>
|
|
|
|
|
|
-
|
|
|
+
|
|
|
</div>
|
|
|
<div class="login-border">
|
|
|
<div class="login-main">
|
|
|
-
|
|
|
+
|
|
|
<h4 class="login-title">
|
|
|
登录
|
|
|
</h4>
|
|
|
<h3 class="login-sub-title">
|
|
|
请使用账号密码登录
|
|
|
- </h3>
|
|
|
+ </h3>
|
|
|
<el-form size="small" ref="inputForm" :model="inputForm" :rules="rules" class="login-form" @keyup.enter.native="login()" @submit.native.prevent>
|
|
|
-
|
|
|
+
|
|
|
<el-form-item prop="username">
|
|
|
<el-input type="text" placeholder="请输入账号" v-model="inputForm.username">
|
|
|
<i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
|
|
@@ -36,41 +36,47 @@
|
|
|
<i slot="prefix" class="el-input__icon el-icon-female"></i>
|
|
|
</el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-row :gutter="10">
|
|
|
- <el-col :span="8"><el-image @click="getCaptcha" :src="captchaImg" style="height:34px"></el-image></el-col>
|
|
|
- <el-col :span="16">
|
|
|
- <el-form-item prop="code">
|
|
|
+ <el-form-item v-if="this.isShow">
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :span="8"><el-image @click="getCaptcha" :src="captchaImg" style="height:34px"></el-image></el-col>
|
|
|
+ <el-col :span="16">
|
|
|
+ <el-form-item prop="code">
|
|
|
<el-input placeholder="请输入验证码" v-model="inputForm.code"></el-input>
|
|
|
- </el-form-item>
|
|
|
+ </el-form-item>
|
|
|
</el-col>
|
|
|
- </el-row>
|
|
|
+ </el-row>
|
|
|
</el-form-item>
|
|
|
+ <div style ="margin: 20px">
|
|
|
+ <!-- 记住我 -->
|
|
|
+ <el-checkbox v-model="checked" class="rememberMe">记住我</el-checkbox>
|
|
|
+ <!-- 找回密码 -->
|
|
|
+ <!--<el-button type="text" @click="open()" class="forgetPw">忘记密码?</el-button>-->
|
|
|
+ </div>
|
|
|
<el-form-item>
|
|
|
<el-button type="primary" :loading="loading" class="login-submit" @click="login">登录</el-button>
|
|
|
</el-form-item>
|
|
|
- <el-form-item>
|
|
|
+ <!--<el-form-item>
|
|
|
<div class="block">
|
|
|
-
|
|
|
+
|
|
|
<el-image class="mobile" src="/static/img/mobile.png"></el-image>
|
|
|
<span class="demonstration">H5</span>
|
|
|
</div>
|
|
|
<div class="block">
|
|
|
-
|
|
|
+
|
|
|
<el-image class="mobile" src="/static/img/mobile.png"></el-image>
|
|
|
<span class="demonstration">Android</span>
|
|
|
</div>
|
|
|
<div class="block">
|
|
|
-
|
|
|
+
|
|
|
<el-image class="mobile" src="/static/img/mobile.png"></el-image>
|
|
|
<span class="demonstration">IOS</span>
|
|
|
</div>
|
|
|
- </el-form-item>
|
|
|
+ </el-form-item>-->
|
|
|
</el-form>
|
|
|
</div>
|
|
|
<el-image class="right" src="/static/img/right.png"></el-image>
|
|
|
|
|
|
-
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -88,6 +94,8 @@
|
|
|
productName: '',
|
|
|
loading: false,
|
|
|
captchaImg: '',
|
|
|
+ isShow: false,
|
|
|
+ checked: false,
|
|
|
inputForm: {
|
|
|
username: 'admin',
|
|
|
password: 'admin',
|
|
@@ -129,6 +137,9 @@
|
|
|
methods: {
|
|
|
// 提交表单
|
|
|
login () {
|
|
|
+ var checked = this.checked
|
|
|
+ var password = this.inputForm.password
|
|
|
+ var username = this.inputForm.username
|
|
|
this.$refs['inputForm'].validate((valid) => {
|
|
|
if (valid) {
|
|
|
this.loading = true
|
|
@@ -141,6 +152,16 @@
|
|
|
localStorage.setItem('dictList', JSON.stringify(data.dictList || '[]'))
|
|
|
this.$router.push({name: 'home'})
|
|
|
})
|
|
|
+ let Base64 = require('js-base64').Base64
|
|
|
+ /* ------ 账号密码的存储 ------ */
|
|
|
+ if (checked) {
|
|
|
+ // eslint-disable-next-line no-undef
|
|
|
+ // let password = Base64.encode(passwordLogin) // base64加密
|
|
|
+ this.setCookie(username, Base64.encode(password), 7)
|
|
|
+ } else {
|
|
|
+ this.setCookie('', '', -1) // 修改2值都为空,天数为负1天就好了
|
|
|
+ }
|
|
|
+ /* ------ http登录请求 ------ */
|
|
|
this.$notify({
|
|
|
title: '登录成功',
|
|
|
message: `欢迎回来!<br/>你上次的登录IP是 ${data.oldLoginIp},登录时间是 ${data.oldLoginDate}。`,
|
|
@@ -164,6 +185,43 @@
|
|
|
this.captchaImg = 'data:image/gif;base64,' + data.codeImg
|
|
|
this.inputForm.uuid = data.uuid
|
|
|
})
|
|
|
+ },
|
|
|
+ // 获取验证码
|
|
|
+ getLoginCodeNumber (username) {
|
|
|
+ this.loginService.getLoginCodeNumber(username).then(({data}) => {
|
|
|
+ if (data.redisLoginNumber >= data.loginNumber) {
|
|
|
+ this.getCaptcha()
|
|
|
+ this.isShow = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 设置cookie
|
|
|
+ setCookie (username, password, days) {
|
|
|
+ let date = new Date() // 获取时间
|
|
|
+ date.setTime(date.getTime() + 24 * 60 * 60 * 1000 * days) // 保存的天数
|
|
|
+ // 字符串拼接cookie
|
|
|
+ window.document.cookie =
|
|
|
+ 'username' + '=' + username + ';path=/;expires=' + date.toGMTString()
|
|
|
+ window.document.cookie =
|
|
|
+ 'password' + '=' + password + ';path=/;expires=' + date.toGMTString()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 读取cookie 将用户名和密码回显到input框中
|
|
|
+ getCookie () {
|
|
|
+ let Base64 = require('js-base64').Base64
|
|
|
+ if (document.cookie.length > 0) {
|
|
|
+ let arr = document.cookie.split('; ') // 分割成一个个独立的“key=value”的形式
|
|
|
+ for (let i = 0; i < arr.length; i++) {
|
|
|
+ let arr2 = arr[i].split('=') // 再次切割,arr2[0]为key值,arr2[1]为对应的value
|
|
|
+ if (arr2[0] === 'username') {
|
|
|
+ this.inputForm.username = arr2[1]
|
|
|
+ } else if (arr2[0] === 'password') {
|
|
|
+ // eslint-disable-next-line no-undef
|
|
|
+ this.inputForm.password = Base64.decode(arr2[1])// base64解密
|
|
|
+ this.checked = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -171,4 +229,4 @@
|
|
|
|
|
|
<style lang="scss">
|
|
|
@import '~@/assets/scss/login.scss';
|
|
|
-</style>
|
|
|
+</style>
|