zhly-web/src/views/login/login.vue

<template>
  <div class="login">
    <div class="login-main" :element-loading-text="loadingMsg" v-loading="loading">
          <!-- <h3 class="login-title">登录</h3> -->
          <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon>
            <el-form-item prop="userName">
              <el-input v-model="dataForm.userName" placeholder="帐号"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
            </el-form-item>
            <!-- <el-form-item prop="verCode">
              <el-input style="width:60%!important;float:left" v-model="dataForm.verCode" placeholder="验证码"></el-input>
              <img @click="getVerCode()"  :src="codeImg" width="100" height="40" class="head_pic" style="float:right" />
            </el-form-item> -->
            <el-form-item>
              <el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">登录</el-button>
            </el-form-item>
          </el-form>
      </div>
  </div>
</template>

<script>
import AES from "@/plugins/cryptoJs/aes";
import { userLogin } from "@/api/account"
import Mqtt from '../../components/mqtt.vue'
export default {
  name: 'login',
  components: {
    Mqtt
  },
  data() {
    return {
      dataForm: {
        userName: '',
        password: '',
        uuid: '',
        captcha: '',
        verCode:"",
        codeId:""
      },
      dataRule: {
        userName: [
          { required: true, message: '帐号不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ],
        // verCode: [
        //   { required: true, message: '验证码不能为空', trigger: 'blur' }
        // ]
      },
      captchaPath: '',
      loading: false, //初始化loading
      loadingMsg: "",
      codeImg:"",
      codeId:""
      

    };
  },
  mounted() {
      
  },
  methods:{
    createLoad() {
      this.loading = true;
      this.loadingMsg = "登录中...";
    },
    clearLoad() {
      this.loading = false;
      this.loadingMsg = "";
    },
    // 提交表单
    dataFormSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          sessionStorage.removeItem("token")
          this.createLoad();
          var userPossword =  AES.encrypt(this.dataForm.password)
          var username =  AES.encrypt(this.dataForm.userName)
          // let param = new URLSearchParams()
          // param.append('userName', this.dataForm.password)
          // param.append('password', this.dataForm.password)
          let Content = {
            'username': this.dataForm.userName,
            'password': this.dataForm.password,
            // 'password': userPossword,
            // 'verCode' :this.dataForm.verCode,
            // 'codeId' :this.dataForm.codeId

          };

          // console.log(Content)
          userLogin(Content).then(res => {
            if (res.code == "200") {
              console.log("success")
              this.clearLoad();
              sessionStorage.setItem('token',res.token)
              this.$router.replace({ name: 'fullScreen' })
              
              // setToken(res.returnData.token);
              // this.$router.replace({ name: 'home' })
            } else {
              // this.getVerCode();
              this.$message({
                message: res.message,
                type: "warning"
              });
              setTimeout(() => {
                this.clearLoad();
              }, 300);
            }
          }).catch(err => {
            console.log(err);
            setTimeout(() => {
              this.clearLoad();
            }, 300);
          });
        }
      })
    }



  }
}
</script>
<style lang="scss" scoped>
 .login{
  width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    
    background-image: url("../../assets/images/loginBg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .login-main {
      margin-left: 35%;
      position: absolute;
      top: 20%;
      left: 30% ;
      padding: 1.875rem 0.75rem 2.25rem;
      width: 18%;
      min-height: 15%;
      background-color: #fff;
    }
    .login-title {
      font-size: 0.6rem;
    }
    .login-captcha {
      overflow: hidden;
      > img {
        width: 100%;
        cursor: pointer;
      }
    }
    .login-btn-submit {
      width: 100%;
      margin-top: 0.5rem;
    }
    .el-input {
      width: 100% !important;
    }
 }
    
  
</style>