examcloud-web-photo-upload/src/views/login.vue

<template>
    <div class="main_bg">
        <div class="login-main">
            <div class="username">
                <input class="form-control comminput" @keyup.enter="login()" type="text" id="accountValue" v-model="loginInfo.accountValue" placeholder="账号" />
            </div>
            <div class="password">
                <input class="form-control comminput" @keyup.enter="login()" type="password" id="password" v-model="loginInfo.password" placeholder="密码" />
            </div>
            <div class="domain">
                <input class="form-control comminput" @keyup.enter="login()" type="text" id="domain" v-model="loginInfo.domain" placeholder="机构域名" />
            </div>
            <input type="button" value="登 录" class="btn comminput" style="background: #3ed798;color:white;" @click="login()" />
            <div class="errorInfo">{{errorInfo}}</div>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      pending: false,
      errorInfo: "",
      loginInfo: {
        rootOrgId: "",
        domain: "",
        accountType: "COMMON_LOGIN_NAME",
        accountValue: "",
        password: ""
      }
    };
  },
  methods: {
    checkAccountValue() {
      this.errorInfo = "";
      if (!this.loginInfo.accountValue) {
        this.errorInfo += "用户名不能为空!\n";
        return false;
      }
      return true;
    },

    checkPassword() {
      this.errorInfo = "";
      if (!this.loginInfo.password) {
        this.errorInfo += "密码不能为空!\n";
        return false;
      }
      return true;
    },

    checkDomain() {
      this.errorInfo = "";
      if (!this.loginInfo.domain) {
        this.errorInfo += "机构域名不能为空!\n";
        return false;
      }
      return true;
    },

    login() {
      if (!this.checkAccountValue()) {
        return;
      }
      if (!this.checkPassword()) {
        return;
      }
      if (!this.checkDomain()) {
        return;
      }
      if (this.pending) {
        return;
      }
      this.pending = true;
      this.$http
        .post("/api/ecs_core/auth/login", this.loginInfo)
        .then(response => {
          var user = response.data;
          localStorage.setItem("user_token", user.userToken);
          localStorage.setItem("rootOrgId", user.rootOrgId);
          localStorage.setItem("userName", user.displayName);
          this.$router.replace({ path: "/index" });
          this.pending = false;
        })
        .catch(response => {
          this.errorInfo += response.body.desc;
          this.pending = false;
        });
    }
  },

  created() {
    var params = this.$route.query;
    this.loginInfo.rootOrgId = params.orgId;
  }
};
</script>

<style>
.h1 {
  font-family: "Micrsoft YaHei";
}
</style>