airconditioner/sources/client/vrv-platform/src/views/login/login.vue

<template>
  <div id="login" class="loginForm">

      <el-form :model="form" :rules="formRules">
        <el-form-item prop="account">
          <el-input v-model="form.account"
                    placeholder="请输入账号"
                    prefix-icon="el-icon-user"
                    style="width: 280px"></el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input v-model="form.password"
                    prefix-icon="el-icon-lock"
                    placeholder="请输入密码"
                    type="password"
                    style="width: 280px"></el-input>
        </el-form-item>

        <el-form-item prop="verifyCode">
          <div>

            <el-input v-model="form.verifyCode"
                      prefix-icon="el-icon-circle-check"
                      placeholder="请输入图形验证码"
                      style="width: 140px;
                      float: left;
                      margin-right: 10px"
            ></el-input>

            <img @click="handleRefreshVerifyCode" class="verify-img" :src="verifyCodeUrl" style="cursor: pointer"
                 alt="">

          </div>

        </el-form-item>

        <div>
          <el-button @click="login" type="primary" style="margin-left: 100px;background-color: lightslategrey;color: black">登录
          </el-button>
        </div>

      </el-form>


  </div>

</template>

<script>
export default {
  name: "login",
  data() {
    return {


      form: {
        account: '',
        password: '',
        verifyCode: '',
      },

      formErrorMsg: {
        account: '',
        password: '',
        verifyCode: '',
      },

      formRules: {
        account: [
          {required: true, message: '请输入账号', trigger: 'blur'},
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
        ],
        verifyCode: [
          {required: true, message: '请输入验证码', trigger: 'blur'},
        ]
      },

      verifyCodeUrl: this.$api.auth.verifyCode,
    };
  },

  created() {
    this.handleRefreshVerifyCode();
  },

  methods: {
    handleRefreshVerifyCode() {
      this.verifyCodeUrl = (this.$api.auth.verifyCode + "?t=" + new Date().getTime());
    },

    login() {
      const vm = this;

      vm.$http.get(vm.$api.auth.login, {
        params: {
          account: this.form.account,
          password: this.form.password,
          verifyCode: this.form.verifyCode,
        }
      }).then((resp) => {
        if (resp.data.status === 200) {
          vm.$message({
            type: "success",
            message: resp.data.desc
          });


          vm.$router.push({
            path: '/',
            query: {userBean: resp.data.data.userBean}
          });

        }

        if (resp.data.status === 400) {
          vm.$message({
            type: "error",
            message: resp.data.data.errorFields[0].message
          });
        }

        if (resp.data.status === 500) {
          vm.$message({
            type: "error",
            message: resp.data.desc
          });
        }
      })

    }

  },

}
</script>

<style scoped>
.el-form {
  width: 360px;
  height: 360px;
  margin-left: 60px;
  margin-top: 30px;
}

.verify-img {
  width: 130px;
  height: 40px;
}

.loginForm{
  padding: 10px;
  width: 400px;
  height: 290px;
  margin-left: 38%;
  margin-top: 16%;
  background-color: whitesmoke;
}


</style>