|
|
@@ -1,451 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="login-container">
|
|
|
- <div class="new-login">
|
|
|
- <div class="new-login-l">
|
|
|
- <img src="@/assets/images/logo.png" alt="">
|
|
|
- </div>
|
|
|
- <div class="new-login-r">
|
|
|
- <div class="title">用户登录</div>
|
|
|
- <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
|
|
|
- <el-form-item prop="username">
|
|
|
- <span class="svg-container">
|
|
|
- <svg-icon icon-class="user" />
|
|
|
- </span>
|
|
|
- <el-input ref="username" v-model="loginForm.username" placeholder="用户名" name="username" type="text" tabindex="1" auto-complete="on" />
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item prop="password" class="password">
|
|
|
- <span class="svg-container">
|
|
|
- <svg-icon icon-class="password" />
|
|
|
- </span>
|
|
|
- <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" placeholder="密码" name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin" />
|
|
|
- <span class="show-pwd" @click="showPwd">
|
|
|
- <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
|
|
|
- </span>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item prop="password" class="rememberPassword">
|
|
|
- <input id="remember-password-checkbox" v-model="rememberPassword" type="checkbox" value="remember-me" @click="doRememberPassword($event)">
|
|
|
- <span for="remember-password-checkbox">
|
|
|
- 记住密码
|
|
|
- </span>
|
|
|
- </input>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <el-button type="text" :loading="loading" class="btn" @click.native.prevent="handleLogin">登录</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style="position: absolute;bottom: 0;left: 0;right:0;color: #000;background: #fee; opacity: .7; font-size: 14px;">
|
|
|
- <p style="text-align:center;line-height:16px;">
|
|
|
- 版权所有
|
|
|
- <a href="http://www.dairyinfo.com.cn" target="_blank">上海科湃腾信息科技有限公司</a>
|
|
|
- <a style="margin-left: 20px;" href="https://beian.miit.gov.cn/" target="_blank">沪ICP备11008303号-3 </a>
|
|
|
- </p>
|
|
|
-
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import { validUsername } from '@/utils/validate'
|
|
|
-import Cookies from 'js-cookie'
|
|
|
-import { getToken } from '@/utils/auth'
|
|
|
-const md5 = require("md5")
|
|
|
-export default {
|
|
|
- name: 'Login',
|
|
|
- data() {
|
|
|
- const validateUsername = (rule, value, callback) => {
|
|
|
- if (!validUsername(value)) {
|
|
|
- callback(new Error('请输入正确的用户名'))
|
|
|
- } else {
|
|
|
- callback()
|
|
|
- }
|
|
|
- }
|
|
|
- const validatePassword = (rule, value, callback) => {
|
|
|
- if (value.length < 6) {
|
|
|
- callback(new Error('密码不能少于6个字符'))
|
|
|
- } else {
|
|
|
- callback()
|
|
|
- }
|
|
|
- }
|
|
|
- return {
|
|
|
- loginForm: {
|
|
|
- username: '',
|
|
|
- password: ''
|
|
|
- },
|
|
|
- loginRules: {
|
|
|
- username: [
|
|
|
- { required: true, trigger: 'blur', validator: validateUsername }
|
|
|
- ],
|
|
|
- password: [
|
|
|
- { required: true, trigger: 'blur', validator: validatePassword }
|
|
|
- ]
|
|
|
- },
|
|
|
- loading: false,
|
|
|
- passwordType: 'password',
|
|
|
- redirect: undefined,
|
|
|
- rememberPassword: ''
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- $route: {
|
|
|
- handler: function(route) {
|
|
|
- this.redirect = route.query && route.query.redirect
|
|
|
- },
|
|
|
- immediate: true
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- var that = this
|
|
|
- document.onkeydown = function(e) {
|
|
|
- e = window.event || e
|
|
|
- // eslint-disable-next-line eqeqeq
|
|
|
- if (that.$route.path == '/login' && (e.code == 'Enter' || e.code == 'Num Enter')) { // 验证在登录界面和按得键是回车键enter
|
|
|
- that.handleLogin('ruleForm2') // 登录函数 （handleSubmit2('ruleForm2')-登录按钮的点击事件）
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- mounted: function() {
|
|
|
- // 读取cookie中的账号信息，如果有accountInfo的话，则说明该用户之前勾选了记住密码的功能，则需要自动填上账号密码
|
|
|
- this.loadAccountInfo()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- showPwd() {
|
|
|
- if (this.passwordType === 'password') {
|
|
|
- this.passwordType = ''
|
|
|
- } else {
|
|
|
- this.passwordType = 'password'
|
|
|
- }
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$refs.password.focus()
|
|
|
- })
|
|
|
- },
|
|
|
- handleLogin() {
|
|
|
- var obj = {
|
|
|
- username: this.loginForm.username,
|
|
|
- password: md5(this.loginForm.password)
|
|
|
- }
|
|
|
- var rememberStatus = this.rememberPassword
|
|
|
- var accountInfo = this.loginForm.username + '&' + this.loginForm.password
|
|
|
- this.$refs.loginForm.validate(valid => {
|
|
|
- if (valid) {
|
|
|
- this.loading = true
|
|
|
- this.$store.dispatch('user/login', obj).then(() => {
|
|
|
- // this.$store.dispatch('user/login', this.loginForm).then(() => {
|
|
|
- if (rememberStatus) {
|
|
|
- console.log('勾选了记住密码，现在开始写入cookie')
|
|
|
- Cookies.set('accountInfo', accountInfo, 1440 * 3)
|
|
|
- } else {
|
|
|
- console.log('没有勾选记住密码，现在开始删除账号cookie')
|
|
|
- Cookies.remove('accountInfo')
|
|
|
- }
|
|
|
-
|
|
|
- // 若为本地环境 则手写cookie
|
|
|
- if (window.location.href.indexOf('localhost') != -1) {
|
|
|
- Cookies.set('token', getToken(), 1440)
|
|
|
- }
|
|
|
- this.$router.push({ path: this.redirect || '/' })
|
|
|
- this.loading = false
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- this.loading = false
|
|
|
- })
|
|
|
- } else {
|
|
|
- console.log('error submit!!')
|
|
|
- return false
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- doRememberPassword() {
|
|
|
- const rememberStatus = this.rememberPassword
|
|
|
- this.rememberPassword = !rememberStatus
|
|
|
- },
|
|
|
- loadAccountInfo: function() {
|
|
|
- const _this = this
|
|
|
- // zhaopeng&A15hOsu8YeGnCsjb
|
|
|
- const accountInfo = Cookies.get('accountInfo')
|
|
|
- // 如果cookie里没有账号信息
|
|
|
- if (Boolean(accountInfo) == false) {
|
|
|
- console.log('cookie中没有检测到账号信息！')
|
|
|
- return false
|
|
|
- } else {
|
|
|
- // 如果cookie里有账号信息
|
|
|
- console.log('cookie中检测到账号信息！现在开始预填写！')
|
|
|
- let userName = ''
|
|
|
- let passWord = ''
|
|
|
- const index = accountInfo.indexOf('&')
|
|
|
-
|
|
|
- userName = accountInfo.substring(0, index)
|
|
|
- passWord = accountInfo.substring(index + 1)
|
|
|
- // this.loginForm.username + '&' + this.loginForm.password
|
|
|
- _this.loginForm.username = userName
|
|
|
- _this.loginForm.password = passWord
|
|
|
- _this.rememberPassword = true
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
-/* 修复input 背景不协调 和光标变色 */
|
|
|
-/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
|
|
|
-
|
|
|
-// $bg: #283443;
|
|
|
-// $light_gray: #fff;
|
|
|
-// $cursor: #fff;
|
|
|
-// 更改
|
|
|
-// $bg: #ccc;
|
|
|
-// $light_gray: #ccc;
|
|
|
-// $cursor: #000;
|
|
|
-// @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
|
|
|
-// .login-container .el-input input {
|
|
|
-// color: $cursor;
|
|
|
-// }
|
|
|
-// }
|
|
|
-// .login-container {
|
|
|
-// min-height: 232px;
|
|
|
-// .el-input {
|
|
|
-// display: inline-block;
|
|
|
-// height: 38px;
|
|
|
-// width: 80%;
|
|
|
-
|
|
|
-// input {
|
|
|
-// background: #fff;
|
|
|
-// border: 0px;
|
|
|
-// -webkit-appearance: none;
|
|
|
-// border-radius: 0px;
|
|
|
-// padding: 5px 5px 5px 15px;
|
|
|
-// color: #000;
|
|
|
-// height: 16.7%;
|
|
|
-// caret-color: $cursor;
|
|
|
-
|
|
|
-// &:-webkit-autofill {
|
|
|
-// box-shadow: 0 0 0px 1000px $bg inset !important;
|
|
|
-// -webkit-text-fill-color: $cursor !important;
|
|
|
-// }
|
|
|
-// }
|
|
|
-// }
|
|
|
-// .el-form-item {
|
|
|
-// border: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
-// background: #fff;
|
|
|
-// border-radius: 5px;
|
|
|
-// color: #999;
|
|
|
-// width: 73%;
|
|
|
-// margin: 10px auto;
|
|
|
-// .el-form-item__content {
|
|
|
-// line-height: 16%;
|
|
|
-// border-bottom: 1px solid #e7e7e7;
|
|
|
-// }
|
|
|
-
|
|
|
-// }
|
|
|
-// .rememberPassword{
|
|
|
-// .el-form-item__content {
|
|
|
-// line-height:16%;
|
|
|
-// border: none;
|
|
|
-// span{padding-left: 5px;}
|
|
|
-// }
|
|
|
-
|
|
|
-// }
|
|
|
-// .password{
|
|
|
-// margin-top: 20px;margin-bottom: 15px;
|
|
|
-// }
|
|
|
-// .btn{
|
|
|
-// position: relative;
|
|
|
-// width: 520px;
|
|
|
-// max-width: 100%;
|
|
|
-// overflow: hidden;
|
|
|
-// }
|
|
|
-// .btn span{width:72%;background:#01996a;border: #01996a;border-radius: 5px;line-height: 40px; text-align: center;color:#fff; margin: 0 auto;display: block;}
|
|
|
-
|
|
|
-// }
|
|
|
-
|
|
|
-</style>
|
|
|
-
|
|
|
-/* <style>
|
|
|
-
|
|
|
-.login-container .el-input input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
|
|
|
- -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
|
|
|
- box-shadow: 0 0 0px 1000px #fff inset !important;
|
|
|
- -webkit-text-fill-color: #000 !important;
|
|
|
-}
|
|
|
-
|
|
|
-</style> */
|
|
|
-// <style lang="scss" scoped>
|
|
|
-// $bg: #2d3a4b;
|
|
|
-// $dark_gray: #999;
|
|
|
-// $light_gray: #000;
|
|
|
-
|
|
|
-// .login-container {
|
|
|
-// min-height: 100%;
|
|
|
-// width: 100%;
|
|
|
-// height: 100%;
|
|
|
-// position: relative;
|
|
|
-// background: url("../../assets/images/nlogin-bg.png") no-repeat;
|
|
|
-// background-size:100%;
|
|
|
-// overflow: hidden;
|
|
|
-// .login {
|
|
|
-// border-radius: 5%;
|
|
|
-// padding: 30px;
|
|
|
-// background: rgba(0,0,0,0.4);
|
|
|
-// width: 380px;
|
|
|
-// height: 340px;
|
|
|
-// position: relative;
|
|
|
-// top: 50%;
|
|
|
-// left: 50%;
|
|
|
-// margin-left: -190px;
|
|
|
-// margin-top: -270px;
|
|
|
-// box-shadow:0px 0px 10px #fff;
|
|
|
-// .login-form {
|
|
|
-// margin-top: 60px;
|
|
|
-// position: relative;
|
|
|
-// width: 520px;
|
|
|
-// max-width: 100%;
|
|
|
-// overflow: hidden;
|
|
|
-// }
|
|
|
-
|
|
|
-// .tips {
|
|
|
-// font-size: 14px;
|
|
|
-// color: #fff;
|
|
|
-// margin-bottom: 10px;
|
|
|
-
|
|
|
-// span {
|
|
|
-// &:first-of-type {
|
|
|
-// margin-right: 16px;
|
|
|
-// }
|
|
|
-// }
|
|
|
-// }
|
|
|
-
|
|
|
-// .svg-container {
|
|
|
-// padding: 6px 5px 6px 15px;
|
|
|
-// color: $dark_gray;
|
|
|
-// vertical-align: middle;
|
|
|
-// width: 30px;
|
|
|
-// display: inline-block;
|
|
|
-// }
|
|
|
-
|
|
|
-// .title {
|
|
|
-// font-size: 26px;
|
|
|
-// color: $light_gray;
|
|
|
-// margin: 0px auto 0 auto;
|
|
|
-// text-align: center;
|
|
|
-// font-weight: bold;
|
|
|
-// }
|
|
|
-// b {
|
|
|
-// text-align: center;
|
|
|
-// font: 14px/2 "";
|
|
|
-// }
|
|
|
-
|
|
|
-// .show-pwd {
|
|
|
-// position: absolute;
|
|
|
-// right: 10px;
|
|
|
-// top: 7px;
|
|
|
-// font-size: 16px;
|
|
|
-// color: $dark_gray;
|
|
|
-// cursor: pointer;
|
|
|
-// user-select: none;
|
|
|
-// }
|
|
|
-
|
|
|
-// .kpt{text-align: center;color: #fff;display: inline-block;width: 100%;font:12px/18px '';}
|
|
|
-// }
|
|
|
-// }
|
|
|
-// </style>
|
|
|
-// <style lang="scss" scoped>
|
|
|
-// .login-container {
|
|
|
-// width: 100vw;
|
|
|
-// height: 100vh;
|
|
|
-// display: flex;
|
|
|
-// justify-content: center;
|
|
|
-// align-items: center;
|
|
|
-// .new-login{
|
|
|
-// width: 57%;
|
|
|
-// height: 43%;
|
|
|
-// display: flex;
|
|
|
-// .new-login-l{
|
|
|
-// flex: 1 1;
|
|
|
-// width: 50%;
|
|
|
-// background: url("../../assets/images/nlogin-bg2.png") no-repeat;
|
|
|
-// position: relative;
|
|
|
-// .new-login-l-t{
|
|
|
-// width: 34%;
|
|
|
-// height: 13%;
|
|
|
-// position: absolute;
|
|
|
-// top: 36%;
|
|
|
-// left: 32%;
|
|
|
-// right: 0;
|
|
|
-// bottom: 0;
|
|
|
-// }
|
|
|
-// .new-login-l-b{
|
|
|
-// position: absolute;
|
|
|
-// // 138,263
|
|
|
-// width: 40%;
|
|
|
-// // height: 5%;
|
|
|
-// top: 56%;
|
|
|
-// left: 30%;
|
|
|
-// // right: 0;
|
|
|
-// // bottom: 0;
|
|
|
-// }
|
|
|
-// }
|
|
|
-// .new-login-r{
|
|
|
-// flex: 1 1;
|
|
|
-// width: 50%;
|
|
|
-// background: url("../../assets/images/nlogin-bg3.png") no-repeat;
|
|
|
-// position: relative;
|
|
|
-// .title{
|
|
|
-// text-align: center;
|
|
|
-// font-size: 26px;
|
|
|
-// font-weight: 700;
|
|
|
-// color: #01996a;
|
|
|
-// padding-top: 10%;
|
|
|
-// padding-bottom: 3%;
|
|
|
-// }
|
|
|
-// .btn {position: absolute;bottom: 10%;}
|
|
|
-// }
|
|
|
-// }
|
|
|
-// }
|
|
|
-// </style>
|
|
|
-<style lang="scss" scoped>
|
|
|
-$bg: #2d3a4b;
|
|
|
-$dark_gray: #999;
|
|
|
-$light_gray: #000;
|
|
|
-$bg: #ccc;
|
|
|
-$light_gray: #ccc;
|
|
|
-$cursor: #000;
|
|
|
-.login-container{
|
|
|
- position: relative;height: 100%;width: 100%;background: url("../../assets/images/nlogin-bg1.jpg") no-repeat;background-size: cover;
|
|
|
- .new-login{
|
|
|
- width: 50%;height: 42%;position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;
|
|
|
- .new-login-l{
|
|
|
- float:left;height:100%;width:50%;background: url("../../assets/images/nlogin-bg2.png") no-repeat;position: relative;background-size: cover;
|
|
|
- img{position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;width: 50%;height:23%;}
|
|
|
- }
|
|
|
- .new-login-r{
|
|
|
- background: #fff;float:left;height:100%;width:50%;position: relative;
|
|
|
- .title{margin-top: 10%;font-size: 20px;font-weight: 600;color: #019969;text-align: center;}
|
|
|
- .login-form{
|
|
|
- position: relative;width: 520px;overflow: hidden;height: 48%;width: 100%;
|
|
|
- .svg-container{padding: 6px 5px 6px 15px; color: $dark_gray; vertical-align: middle; width: 30px; display: inline-block;}
|
|
|
- .el-input {
|
|
|
- display: inline-block; width: 80%;
|
|
|
- }
|
|
|
- }
|
|
|
- .el-form-item {
|
|
|
- border: none; background: #fff; border-radius: 5px; color: #999;width: 73%; margin: 10px auto;height: 30%;
|
|
|
- /deep/.el-form-item__content {
|
|
|
- line-height: 16%; border-bottom: 1px solid #e7e7e7;
|
|
|
- }
|
|
|
- .el-form-item__content .el-input{
|
|
|
- /deep/.el-input__inner{border: none !important;}
|
|
|
- }
|
|
|
- }
|
|
|
- .rememberPassword{
|
|
|
- /deep/.el-form-item__content { line-height:16%; border: none;padding-bottom: 10px; span{padding-left: 5px;} }
|
|
|
- }
|
|
|
- .password{margin-top: 10px;margin-bottom: 20px;}
|
|
|
- .btn{
|
|
|
- position: absolute; overflow: hidden; width: 75%;left: 0;right: 0;bottom: 10%;margin: 0 auto;
|
|
|
- /deep/span{background:#01996a;border: #01996a;border-radius: 5px;line-height: 40px; text-align: center;color:#fff; display: block;}
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
