baianxi_admin/src/views/Login.vue

<style lang="scss">
  @import '../style/_base.scss';
  .xt_login{
    background: url(../images/bg.png) no-repeat;
  }
  .zf_login{
    background: url(../images/bg.png) no-repeat;
  }
  .login{
    height: 100vh;
    min-height: 450px;
    background: url(../images/bg.png) no-repeat;
    background-size: 100%;
    background-position: center top; 
    // background: #1F315D;
    position: relative;
    .login-div{
      width:520px;
      height:448px;
      background:#FFFFFF;
      box-shadow:0px 12px 24px 0px rgba(0,0,0,0.24);
      border-radius:8px;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      padding:48px  75px;
      h1{
        text-align: center;
        margin-bottom: 40px;
        font-size: 28px;
      }
      .input_div{
        position: relative;
        margin-bottom: 12px;
        input{
          padding-left: 80px;
          outline: none;
          background:rgba(242,245,247,1);
          border-radius:8px;
          border:1px solid rgba(238,238,238,1);
          display: block;
          height: 54px;
          width: 100%;
          font-size: 16px;
        }
        label{
          color: #222;
          font-size: 16px;
          position: absolute;
          left: 16px;
          top:16px;
          z-index: 99;
        }
      }
      .code{
        input{
          width: 250px;
        }
        img{
          width: 108px;
          height: 54px;
          float: right;
          background-origin: 1px solid red;
        }
      }
      
      .login-btn{
        background: #FF694B;
        width: 100%;
        height: 54px;
        margin-top: 36px;
        font-size: 18px;
        color: #FFF;
        font-weight: 600;
        border:none;
        border-radius: 8px;
      }
    }
    .footer{
      position: fixed;
      width: 100%;
      bottom: 10px;
      left:0;
      z-index: 9;
      text-align: center;
      color:#333;
      font-size: 12px;
    }
  }
</style>

<template>
  <div class="login">
      <div class="login-div">
        <h1>综合风险防控平台</h1>
        <form>
            <div class="input_div">
              <label>用户名</label>
              <input type="text" v-model="logindata.username" placeholder="请输入用户名">
            </div>
            <div class="input_div">
              <label>密&nbsp;&nbsp;码</label>
              <input type="password" v-model="logindata.password" placeholder="请输入密码">
            </div>
            <div class="input_div code">
              <img @click="getCode" :src="code" alt="">
              <label>图形码</label>
              <input type="text" v-model="logindata.imgcode" placeholder="请输入验证码">  
            </div>
            <el-button @click="login" @keyup.enter="login" class="login-btn" type="primary">登  录</el-button>
        </form>
      </div>
      <p class="footer">四川百安兮注册安全工程师事务有限公司提供技术支持</p>
  </div>
</template>

<script>
export default {
  name: 'login',
  data(){
    return{
      tp:'xt',
      code:'',
      logindata:{
        username:'root',
        password:'root',
        imgcode_id:'',
        imgcode:'',
        utype:2
      }
    }
  },
  methods:{
      keyupEnter(){
          document.onkeydown = e =>{
              if (e.keyCode === 13) {
                  console.log('enter')
                  this.login()
              }
          }
      },
      login(){
          let parms=this.logindata;
            this.$api.login(parms).then((res)=>{
                let data=res.data
                  if(res.data.code == 0){
                      if(data.data.utype == 0){
                        window.location.hash='/';
                      }
                      if(data.data.utype == 1){
                        window.location.hash='/govermentData';
                      }
                      if(data.data.utype == 2){
                        window.location.hash='/companyData';
                      }
                      localStorage.setItem('utype',res.data.data.utype);
                      localStorage.setItem('token',res.data.data.token);
                  }else{
                      this.$message.error("账号或者密码有误");
                  } 
            })
            .catch(err=>{
              this.$message.error("账号或者密码有误");
            })
      },
      getCode(){
        this.$api.getCode().then(res=>{
          this.code=res.data.data.imgcode
          this.logindata.imgcode_id=res.data.data.imgcode_id
        })
      }
    },
  created(){
    this.tp = this.$route.query.tp;
    console.log(this.tp,this.$route.query.tp)
    this.getCode();
    this.keyupEnter();
  }
}
</script>