index.vue 3.71 KB
<template>
    <div class="login">
      <div class="wrap-main">
        <h1 class="title">唱唱启蒙——后台管理系统</h1>
        <el-form :model="login" :rules="loginRules" ref="loginForm">
          <el-form-item prop="username">
            <el-input v-model="login.username" placeholder="用户名"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" v-model="login.password" placeholder="密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="btn" size="medium" type="primary" @click="submitForm">登陆</el-button>
            <!-- <el-button class="fr" size="medium" type="success" @click="goRegister">去注册</el-button> -->
          </el-form-item>
        </el-form>
      </div>
    </div>
</template>

<script>
  import { loginApi } from "../../service/api";
  import md5 from 'js-md5';
    export default {
      data(){
        return{
          login:{
            username:'',
            password:''
          },
          loginRules:{
            username:[
              { required: true, message: '请输入您的用户名', trigger: 'blur' }
            ],
            password:[
              { required: true, message: '请输入您的密码', trigger: 'blur' }
            ]
          }
        }
      },
      mounted(){
        let that = this;
        document.onkeydown=keyDownSearch;
        function keyDownSearch(e) {
          // 兼容FF和IE和Opera
          let theEvent = e || window.event;
          let code = theEvent.keyCode || theEvent.which || theEvent.charCode;
          if (code === 13 && that.$route.name === 'login') {
            that.submitForm();//具体处理函数
            return false;
          }
          return true;
        }
      },
      methods:{
          // 提交
        submitForm(){
          this.$refs["loginForm"].validate((valid) => {
            if (valid) {
              let json = {
                username:this.login.username,
                password:md5(this.login.password)
              };
              // debugger
              loginApi(json).then(res=>{
                      if(res.teacher_info){
                         let data=JSON.stringify(res.teacher_info)
                             localStorage.setItem("phoneNum",data)
                      }else{
                        localStorage.setItem("phoneNum","")
                      }
                  this.$store.dispatch('setToken',res.token);
                  this.$store.dispatch('setUserName',res.desc);
                  this.$store.dispatch('setPermission',JSON.parse(res.roles.menu_ids));
                  // debugger
                  window.location.href = '/';

              })
            }
          })
        },
        goRegister(){
          this.$router.push({
            name:"register"
          })
        }
      }
    }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .login{
    height: 100%;
    background: linear-gradient(to bottom right, #ecec7c, #787af4); /* 标准的语法(必须放在最后) */
  }
  .wrap-main{
    width: 300px;
    height: 180px;
    padding:50px 20px;
    border-radius: 5px;
    box-shadow: 8px 8px 15px rgba(49, 49, 49, 0.5);
    position: fixed;
    line-height: 50px;
    background-color: rgba(255,255,255,0.3);
    top: 50%;
    left: 50%;
    margin-left: -200px;
    margin-top: -200px;
    .btn{
      display: block;
      width: 100%;
    }
    .title{
      position: absolute;
      top: -100px;
      width: 100%;
      text-align: center;
      left: 0;
      color: white;
      font-size: 26px;
      text-shadow: 6px 6px 3px rgba(49, 49, 49, 0.5);
    }
  }
  .fr{float: right;margin-top: 10px;margin-right: 110px;}
</style>