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,
            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>