securityHtml/src/views/login/index.vue

<template>
  <div class="login-container">
    <div class="bg" v-if="erp"><img :src="bg" alt=""></div>
    <div class="logo" v-if="erp">
      <img :src="logo" alt="">
      <span class="logo_txt">东信综合安防管理系统</span>
    </div>
    <el-form class="login-form" auto-complete="on"  ref="loginForm" :model="loginForm" :rules="loginRules" v-if="erp">
      <h3 class="title">用户登录 <span>LOGIN</span></h3>
      <el-form-item prop="username" width="460px">
        <el-input v-model="loginForm.username"
          ref="username"
          placeholder="请输入用户名"
          name="username"
          @keyup.enter.native="login_info()"
          type="text" auto-complete="off" >
          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>

      <el-form-item prop="password">
        <el-input
          class="inputs"
          ref="password"
          placeholder="请输入密码"
          name="password"
          @keyup.enter.native="login_info()"
          :type="passwordtxt"
          v-model="loginForm.password" >
          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
        <svg-icon slot="prefix" icon-class="eye"  class="el-input__icon input-icon"  style="position:absolute;right:-340px"  @click="eyeTab" v-show="passwordtxt =='password'" />
        <svg-icon slot="prefix" icon-class="eye-open"  class="el-input__icon input-icon"  style="position:absolute;right:-340px"  @click="eyeTab" v-show="passwordtxt =='text'" />
        </el-input>

      </el-form-item>
      <el-form-item prop="code">
        <el-input
          v-model="loginForm.code"
          auto-complete="off"
          placeholder="验证码"
          style="width: 63%"
        >
          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
        </el-input>
        <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-button
        type="primary"
        @click.native.prevent="login_info()"
        @keyup.enter = "login_info()"
        >
        <span v-if="!loading" >登 录</span>
        <span v-else>登 录 中...</span></el-button
      >
    </el-form>
     <div id="loader-wrapper" v-if="ERPloading">
        <div id="loader"></div>
        <div class="loader-section section-left"></div>
        <div class="loader-section section-right"></div>
        <div class="load_title">正在加载系统资源，请耐心等待</div>
    </div>
  </div>
</template>
<script>
// import { validUsername } from "@/utils/validate";
import { getCodeImg } from '@/api/user'
import TimeMenu from "@/components/TimeMenu";
import navHeader from "../index/components/navHeader";
import $ from 'jquery'
// import {Menu_List} from "../../router/index";
import bgImg from "../../assets/bg-login.png";
import logoImg from "../../assets/logo-b.png";
import Cookies from "js-cookie";
import { encrypt, decrypt } from '../../utils/jsencrypt';
export default {
  name: 'Login',
  components: {
    TimeMenu,
    navHeader,
  },
  data() {
    return {
      erp:false,
      ERPloading:true,
      loading:false,
      passwordtxt:"password",
      bg:bgImg,
      logo:logoImg,
      codeUrl: "",
      cookiePassword: "",
      show_num:[],
      // 验证码开关
        // captchaOnOff: true,
      loginForm: {
        username: "",
        password: "",
        rememberMe: true,
        code: "",
        uuid: ""
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入您的账号" }
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入您的密码" }
        ],
        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
      },
    };
  },
  mounted(){
    $('.el-menu').css("display","none");
    $('.right-menu').css("display","none");
  },
  created() {
    this.keyupEnter()
    this.getUrl()
  },
  methods: {
    getUrl(){
      let url = this.$route.query
      if(url.id && url.name){
        let data = {id:url.id,name:url.name}
        this.handleLoginERP(data)
      }else{
        this.erp = true
        this.ERPloading = false
        this.getCode();
        this.getCookie();
        this.zddl();//自动登录
      }
    },
    keyupEnter(){
      let _this = this
      document.onkeydown = function(e){
        var key = window.event.keyCode;
        if(key == 13){
          _this.login_info()
        }
      }
    },
    eyeTab(){//密码显示开关
      if(this.passwordtxt == "password"){
        this.passwordtxt = "text"
      }else{
        this.passwordtxt = "password"
      }
    },
    getCode() {//获取验证码
      getCodeImg().then(res => {
        this.codeUrl = "data:image/gif;base64," + res.data.img;
        this.loginForm.uuid = res.data.uuid;
      });
    },
    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)
      };
    },
    login_info() {//登录
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          if (this.loginForm.rememberMe) {
            Cookies.set("username429", this.loginForm.username, { expires: 300 });
            Cookies.set("password429", encrypt(this.loginForm.password), { expires: 300 });
            Cookies.set('rememberMe429', this.loginForm.rememberMe, { expires: 300 });
          } else {
            Cookies.remove("username429");
            Cookies.remove("password429");
            Cookies.remove('rememberMe429');
          }
          this.$store.dispatch('login', this.loginForm).then(() => {
            this.$router.push('/index?name='+this.loginForm.username)
            window.localStorage.setItem('key',this.loginForm.username)
            this.loading=false
          }).catch(err => {
            this.loading=false
            this.getCode()
            this.$message.error(err); //登录失败提示错误
          });
        }
      });
    },
    handleLoginERP(data) {//erp登录
      Cookies.set("username429", data.name);
      this.$store.dispatch("LoginERP", data).then((res) => {
        this.$router.push({ path: "/index"}).catch(()=>{});
      }).catch((err) => {
        location.href = '/#/';
      });
    },
    zddl(){//自动登录
      if(Cookies.get("vue_admin_template_token1708") && localStorage.getItem("key")){
        this.$router.push('/index?name=' + localStorage.getItem("key"))
      }
    }
  },
  watch:{
    password:function(){
      this.password=this.password.replace(/[\W]/g,'');
    },
    username:function(){
      this.username=this.username.replace(/[\W]/g,'');
    },
    code:function(){
      this.code=this.code.replace(/[\W]/g,'');
    },
  },
};
</script>


<style lang="scss" scoped>
.code-verify {
  top: 3px;
  position: absolute;
  right: -108px;
  width: 82px;
}
.bg{
  width:100%;
  height:100%;
  overflow: hidden;
  position: fixed;
  top:0;
  left:0;
  z-index: -1;
  .bgimg{
    width:100%;
    height:100%;
    position: absolute;
    top:0;
    left:0;
    z-index: -1;
  }
}
.logo{
  width:100%;
  position: fixed;
  top:0;
  img{
    width:152px;
    margin:10px 20px 0 20px;
    vertical-align: middle;
  }
  .logo_txt{
    font-size: 20px;
    color:#fff;
    vertical-align: middle;
    letter-spacing: 4px;
  }
}
.login-form {
  border-radius: 6px;
  background: #ffffff;
  width: 456px;
  padding: 63px 35px;
  position: absolute;
  top:25%;
  left:50%;
  margin-left:-228px;
  .title {
    margin: 0px auto 30px auto;
    text-align: left;
    color: #000000;
    font-size: 20px;
    span{
      margin-left:10px;
      opacity: 0.25;
    }
  }
  .el-input {
    height: 40px;
    input {
      height:100%;
      padding:10px 0;
      display: inline-block;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}
.el-form-item__content{
  height:40px;
}
.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.login-code {
  width: 33%;
  height: 38px;
  float: right;
  margin-top:-2px;
  text-align: right;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
.login-code-img {
  height: 38px;
}

.el-button--primary{
  width:100%;
  margin-top:10px;
  color: #fff;
  background-color: #1890ff;
  border-color: #1890ff;
  border-radius: 4px;
}
body,html{
  width:100%;
  height:100%;
  background: #7171C6;
}
        
        #loader-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 999999;
        }
        
        #loader {
            display: block;
            position: relative;
            left: 50%;
            top: 50%;
            width: 150px;
            height: 150px;
            margin: -75px 0 0 -75px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: #FFF;
            -webkit-animation: spin 2s linear infinite;
            -ms-animation: spin 2s linear infinite;
            -moz-animation: spin 2s linear infinite;
            -o-animation: spin 2s linear infinite;
            animation: spin 2s linear infinite;
            z-index: 1001;
        }
        
        #loader:before {
            content: "";
            position: absolute;
            top: 5px;
            left: 5px;
            right: 5px;
            bottom: 5px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: #FFF;
            -webkit-animation: spin 3s linear infinite;
            -moz-animation: spin 3s linear infinite;
            -o-animation: spin 3s linear infinite;
            -ms-animation: spin 3s linear infinite;
            animation: spin 3s linear infinite;
        }
        
        #loader:after {
            content: "";
            position: absolute;
            top: 15px;
            left: 15px;
            right: 15px;
            bottom: 15px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: #FFF;
            -moz-animation: spin 1.5s linear infinite;
            -o-animation: spin 1.5s linear infinite;
            -ms-animation: spin 1.5s linear infinite;
            -webkit-animation: spin 1.5s linear infinite;
            animation: spin 1.5s linear infinite;
        }
        
        @-webkit-keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        
        @keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        
        #loader-wrapper .loader-section {
            position: fixed;
            top: 0;
            width: 51%;
            height: 100%;
            background: #7171C6;
            z-index: 1000;
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0);
        }
        
        #loader-wrapper .loader-section.section-left {
            left: 0;
        }
        
        #loader-wrapper .loader-section.section-right {
            right: 0;
        }
        
        .loaded #loader-wrapper .loader-section.section-left {
            -webkit-transform: translateX(-100%);
            -ms-transform: translateX(-100%);
            transform: translateX(-100%);
            -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
            transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
        }
        
        .loaded #loader-wrapper .loader-section.section-right {
            -webkit-transform: translateX(100%);
            -ms-transform: translateX(100%);
            transform: translateX(100%);
            -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
            transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
        }
        
        .loaded #loader {
            opacity: 0;
            -webkit-transition: all 0.3s ease-out;
            transition: all 0.3s ease-out;
        }
        
        .loaded #loader-wrapper {
            visibility: hidden;
            -webkit-transform: translateY(-100%);
            -ms-transform: translateY(-100%);
            transform: translateY(-100%);
            -webkit-transition: all 0.3s 1s ease-out;
            transition: all 0.3s 1s ease-out;
        }
        
        .no-js #loader-wrapper {
            display: none;
        }
        
        .no-js h1 {
            color: #222222;
        }
        
        #loader-wrapper .load_title {
            font-family: 'Open Sans';
            color: #FFF;
            font-size: 19px;
            width: 100%;
            text-align: center;
            z-index: 9999999999999;
            position: absolute;
            top: 60%;
            opacity: 1;
            line-height: 30px;
        }
        
        #loader-wrapper .load_title span {
            font-weight: normal;
            font-style: italic;
            font-size: 13px;
            color: #FFF;
            opacity: 0.5;
        }
</style>
<style>
.el-input__inner{
  height:40px;
}
</style>