examcloud-admin-web/src/modules/portal/components/Login.vue

<template>
  <div>
    <header class="login-header">
      <a href="javascript:void(0)">
        <img v-if="!jwptCustomize" src="../assets/images/login_footer_logo.jpg">
        <img v-if="jwptCustomize" src="../assets/images/new_login_logo.png">
      </a>
      <ul>
        <li>
          <span></span>
        </li>
        <li>
          <h1 v-if="!jwptCustomize">考试云平台</h1>
          <h1 v-if="jwptCustomize" style="line-height: 36px; font-size: 24px">{{title}}</h1>
        </li>
      </ul>
    </header>
    <!--main-->
    <main class="login-main">
      <div class="main_bg"></div>
      <div class="main_box">
        <div class="left_tree fl"><img src="../assets/images/login_main_left_tree.png"></div>
        <div class="right_login fr">
          <div class="login">
            <h1>用户登录</h1>
            <div class="username">
              <i></i>
              <input @keyup.enter="login()" type="text" id="accountValue" v-model="loginInfo.accountValue" placeholder="账号" />
            </div>
            <div class="password">
              <em></em>
              <input @keyup.enter="login()" type="password" id="password" v-model="loginInfo.password" placeholder="密码" />
            </div>
            <input type="button" value="登 录" class="btn" @click="login()" />
          </div>
        </div>
      </div>
    </main>

    <!--footer-->
    <footer class="login-footer">
      <div class="main">
        <div>Copyright &copy; 2016
          <a href="javascript:void(0)">讯飞启明</a>.</div>
      </div>
    </footer>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import { USER_SIGNIN } from "../store/user";
import { core_api } from "../constants/constants";

export default {
  data() {
    return {
      pending: false,
      errorInfo: "",
      title: "考试云平台",
      jwptCustomize: false,
      loginInfo: {
        rootOrgId: "",
        domain: "",
        accountType: "COMMON_LOGIN_NAME",
        accountValue: "",
        password: ""
      }
    };
  },
  methods: {
    ...mapActions([USER_SIGNIN]),

    checkAccountValue() {
      this.errorInfo = "";
      if (!this.loginInfo.accountValue) {
        this.errorInfo += "账号不能为空!\n";
      }
      if (this.errorInfo) {
        this.$notify({
          showClose: true,
          message: this.errorInfo,
          type: "error"
        });
        return false;
      }
      return true;
    },

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

    login() {
      if (!this.checkAccountValue()) {
        return;
      }
      if (!this.checkPassword()) {
        return;
      }
      if (this.pending) {
        return;
      }
      this.pending = true;
      var url = core_api + "/auth/login";
      this.$http
        .post(url, this.loginInfo)
        .then(response => {
          console.log(response);
          var user = response.data;
          this.USER_SIGNIN(user);
          user.loginUrl = "http://" + window.location.host + "/#/login";
          user.indexUrl = "http://" + window.location.host + "/#/index";
          window.name = JSON.stringify(user);
          this.$router.replace({ path: "/home" });
          this.$notify({
            message: "登录成功",
            type: "success"
          });
          this.pending = false;
        })
        .catch(response => {
          if (response.status == 500) {
            this.$notify({
              showClose: true,
              message: response.body.desc,
              type: "error"
            });
          }
          this.pending = false;
        });
    },
    jwptCustomizeMethod() {
      // 普通高校考试综合管理平台 定制
      if (location.host === "jwpt.ecs.qmth.com.cn") {
        document.title = "普通高校-题库";
        this.title = " | 普通高校-题库";
        this.jwptCustomize = true;
      }
    }
  },

  created() {
    this.loginInfo.domain = window.location.host;
    sessionStorage.clear();
    var params = this.$route.query;

    this.loginInfo.rootOrgId = params.orgId;
    console.log("rootOrgId=" + this.loginInfo.rootOrgId);

    this.jwptCustomizeMethod();
  },
  watch: {
    $route(to, from) {
      this.loginInfo.rootOrgId = to.query.orgId;
    }
  }
};
</script>

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