login.vue

<template>
  <div class="login">
    <div class="login_div_">
        <div class="login-box">
          <div class="right-box">
            <div class="header">用户登录</div>
            <div class="login-input-box">
              <el-input
                placeholder="用户名"
                suffix-icon="el-icon-user"
                class="item-input"
                v-model="userName">
              </el-input>
            </div>
            <div class="login-input-box">
                 <el-input
                placeholder="密码"
                suffix-icon="el-icon-lock"
                class="item-input"
                type="passWord"
                @keyup.enter.native="login"
                v-model="passWord">
              </el-input>
            </div>
            <div class="login-button" @click="login">登录</div>
            <div class="login-about">技术支持：北京文安智能科技股份有限公司</div>
          </div>
        </div>
    </div>
  </div>
</template>
<script>
  import { mapMutations } from 'vuex'
export default {
  data() {
    return {
      userName: "",
      passWord: ""
    };
  },
  methods: {
    login() {
      //--添加验证
      if (this.userName == "") {
        this.$message.error("请输入用户名");
        return;
      }

      if (this.userName != "admin" && this.userName.length < 2) {
        this.$message.error("请输入至少2位用户ID");
        return;
      }

      if (this.passWord == "") {
        this.$message.error("请输入密码在继续");
        return;
      }
      var data = { loginName: this.userName, password: this.passWord };
      this.axios
        .post(this.API.auth.login, data)
        .then(response => {
          localStorage.setItem("atoken", response.data.data.atoken);
          localStorage.setItem("rtoken", response.data.data.rtoken);
          localStorage.setItem("user_id", response.data.data.user_unid);
          localStorage.setItem("username", this.userName);
          localStorage.setItem("userId",  response.data.data.user.id);
          sessionStorage.removeItem("threemenu");
          sessionStorage.removeItem("menu");
          localStorage.setItem("accountId", response.data.data.user.accountId);
          // localStorage.setItem("accountId", 2);
          // this.axios.get(this.API.auth.accountid,{
          //   params:{
          //     id:response.
          //   }
          // })
          //----cyl 添加获取更加详细的用户信息---


          //---end
           this.getMenuInfo();

          // console.log(response.data)
          // localStorage.setItem("atoken",'dc62ae05-21be-43ad-9be2-d5f8a6bd0dac');
        })
        .catch(err => {
          console.log(err)
          let info = "用户名或密码错误！";
          if (err.message == "Network Error") info = "网络错误!";
          this.$message.error(info);
        });
    },
    /**
     * 获取路由列表
     */
     getMenuApp(){
        return  new Promise((reslove, reject) =>{
          this.axios.get(this.API.url + "/auth/api/v1/auth/apps").then(response => {
            reslove(response);
          })
        });

    },
    async getMenuInfo() {
        let res =await this.getMenuApp();
        let unid=''
        res.data.list_data.forEach(item=>{
          if(item.name=='shebao'){
            unid=item.unid
          }
        })
          this.axios.get(this.API.url + "/auth/api/v1/auth/apps/" + unid + "/menus?shape=tree").then(response => {
            localStorage.setItem(
              "menuArr",
              JSON.stringify(response.data.menu_tree[0].children)
            );
            this.$store
              .dispatch("GetMenuRole", response.data.menu_tree[0].children)
              .then(res => {
                this.$router.push("/show");
              });
          })

    }
  }
};
</script>
<style lang="stylus">
.login {
  position relative
  height: 100%;
  background: url('../../assets/img/login_bg.png');
  background-size: 100% 100%;
}

.login-box {
  position absolute
  top 0
  right 0
  left 0
  bottom 0
  margin auto
  height: 48vh;
  width: 68.8vw;
  overflow: hidden;
  color: #fff;
  border-radius: 5px;
  background-size 100% 100%
  .left-box{
    height: 48vh;
    width 43vw
    // background: url('../../assets/img/loginbox.png') no-repeat;
    // background-size 100% 100%
    .ploce-box{
      position absolute
      height 4vw
      width  4vw
      // background: url('../../assets/img/police.png') no-repeat;
      // background-size 100% 100%
      left 3vw
      top 3.2vh
    }
    .content-box{
      letter-spacing .3vw
      position absolute
      bottom 14vh
      left 8vw
      font-size 2.3rem
      text-align center
      .plat-name{
        margin-top 1vh
      }
    }
    .version-box{
      position absolute
      bottom 5vh
      left 8vw
      letter-spacing .2vw
      opacity .8
    }
  }
  .right-box{
    position absolute
    top 0
    right 0
    width 20.7vw
    height 48vh
    background #fff
    box-shadow:0px 5px 29px 0px rgba(0,69,148,0.26)
    border-radius:12px
    .header{
      width 100%
      text-align center
      font-size 1.9rem
      letter-spacing .2vw
      color #0b76fb
      margin-top 6vh
    }
    .login-about{
      width 100%
      position absolute
      font-size 1rem
      color #0b76fb
      bottom 2vh
      text-align center
      opacity .8
    }
    .login-input-box{
      width 15.1vw
      margin 4vh auto 0

    }
    .login-input-box:nth-child(3){
      margin-top 4vh
    }
    .login-button{
      width 15.1vw
      margin 5vh auto
      background #0b76fb
      border-radius 20px
      text-align center
      height 4vh
      line-height 4vh
    }
  }
}

.login-info {
  margin-top: 40px;
}

.header-box-title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px;
  overflow: hidden;
}

.login-btn {
  width: 100px;
  height: 40px;
  border-radius: 5px;
}

.el_input_b .el-input__inner {
  background: #fff !important;
  color: #394389 !important;
}

.left_login_mc {
  float: left;
  width: 390px;
  height: 150px;
  margin-left: 62%;
  margin-top: 260px;
  background: #2E7CA2;
  opacity: 0.7;
}

.ml_l {
  margin-left: 88px;
}
</style>