....

src/modules/portal/views/Login.vue

@@ -0,0 +1,352 @@
+<template>
+  <div class="bg">
+    <!-- <header class="login-header">
+      <img v-if="!jwptCustomize" src="../assets/images/login_footer_logo.jpg" />
+      <img v-else src="../assets/images/new_login_logo.png" />
+      <span class="qm-logo-text" v-if="!jwptCustomize">考试云平台</span>
+      <span class="qm-logo-text" v-else>{{ title }}</span>
+    </header> -->
+
+    <main class="login-main">
+      <!-- <img class="left_tree" src="../assets/images/login_main_left_tree.png" /> -->
+
+      <div class="logo-text">考试云平台</div>
+      <div class="right_login">
+        <h1 style="font-size: 20px; color: #666">欢迎登录</h1>
+        <div class="username">
+          <v-icon name="user" scale="2" style="padding: 5px 0px; z-index: 3;" />
+          <input
+            @keyup.enter="login"
+            type="text"
+            id="accountValue"
+            v-model="loginInfo.accountValue"
+            placeholder="请输入账号"
+          />
+        </div>
+        <div class="password">
+          <v-icon name="lock" scale="2" style="padding: 5px 0px; z-index: 3;" />
+          <input
+            @keyup.enter="login"
+            type="password"
+            id="password"
+            v-model="loginInfo.password"
+            placeholder="请输入密码"
+          />
+        </div>
+        <button class="login-btn" @click="login">登 录</button>
+      </div>
+      <footer class="login-footer">
+        Copyright &copy; 2019 <a href="javascript:void(0)">讯飞启明</a>.
+      </footer>
+    </main>
+
+    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
+      <input
+        @keyup.enter="loginWithSms"
+        type="number"
+        v-model="loginInfo.smsCode"
+        style="width: 80%"
+        placeholder="请向王伟咨询手机验证码"
+      />
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="loginWithSms">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { mapActions } from "vuex";
+import { USER_SIGNIN } from "../store/user";
+import { CORE_API } from "@/constants/constants";
+
+export default {
+  data() {
+    return {
+      errorInfo: "",
+      title: "考试云平台",
+      jwptCustomize: false,
+      dialogVisible: false,
+      loginInfo: {
+        rootOrgId: "",
+        domain: "",
+        accountType: "COMMON_LOGIN_NAME",
+        accountValue: "",
+        password: "",
+        smsCode: null
+      }
+    };
+  },
+  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;
+      }
+      var url = CORE_API + "/auth/login";
+      this.$httpWithMsg
+        .post(url, this.loginInfo)
+        .then(response => {
+          var user = response.data;
+          this.USER_SIGNIN(user);
+          this.$router.replace({ path: "/home/overview" });
+          this.$notify({
+            message: "登录成功",
+            type: "success",
+            duration: 1000
+          });
+        })
+        .catch(error => {
+          if (error.response.data.code === "B-001100") {
+            this.dialogVisible = true;
+          }
+        });
+    },
+    loginWithSms() {
+      this.dialogVisible = false;
+      this.login();
+    },
+    jwptCustomizeMethod() {
+      // 普通高校考试综合管理平台 定制
+      if (location.host === "jwpt.ecs.qmth.com.cn") {
+        document.title = "普通高校-题库";
+        this.title = " | 普通高校-题库";
+        this.jwptCustomize = true;
+      }
+    }
+  },
+  created() {
+    if (this.$route.hash && this.$route.hash.startsWith("#/access?")) {
+      this.$router.push(this.$route.hash.slice(1));
+      return;
+    }
+    this.loginInfo.domain = window.location.host;
+    sessionStorage.clear();
+    var params = this.$route.query;
+
+    this.loginInfo.rootOrgId = params.orgId;
+
+    this.jwptCustomizeMethod();
+  },
+  watch: {
+    $route(to) {
+      this.loginInfo.rootOrgId = to.query.orgId;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.bg {
+  width: 100vw;
+  height: 100vh;
+  background-image: url("../assets/images/bg.jpg");
+  background-size: cover;
+}
+/* .login-header {
+  font-family: "Microsoft YaHei";
+  width: 990px;
+  height: 80px;
+  background-color: #fff;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-items: center;
+} */
+
+.qm-logo-text {
+  font-size: 36px;
+  font-weight: 700;
+  font-stretch: normal;
+  line-height: 36px;
+  letter-spacing: 0px;
+  margin-left: 40px;
+}
+
+.logo-text {
+  font-family: "Xingkai SC", "STXingkai", "KaiTi";
+  width: 200px;
+  height: 40px;
+  font-size: 40px;
+  font-weight: bold;
+  font-stretch: normal;
+  line-height: 48px;
+  letter-spacing: 0px;
+  color: #3968d7;
+  text-shadow: 0px 7px 4px rgba(77, 124, 196, 0.3);
+  margin-bottom: 30px;
+}
+
+.login-main {
+  width: 100%;
+  height: 100vh;
+  /* min-width: 990px;
+  min-height: 550px; */
+  /* background-image: url("../assets/images/login_main_bg_full.png"); */
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  /* justify-content: space-evenly; */
+}
+/*
+.left_tree {
+  height: 500px;
+} */
+
+.right_login {
+  /* width: 420px;
+  background-color: #fff;
+  border-radius: 16px; */
+  /* box-shadow: 0 13px 29px #0d3b5d; */
+
+  width: 520px;
+  height: 350px;
+  background-color: #ffffff;
+  box-shadow: 0px 7px 20px 0px rgba(77, 124, 196, 0.1);
+  border-radius: 38px;
+  opacity: 0.85;
+
+  padding: 0 80px;
+}
+
+.right_login h1 {
+  /* font-size: 34px;
+  color: #fff; */
+  /* text-shadow: 0 8px 13px #0d72ac; */
+  text-align: center;
+
+  height: 20px;
+
+  font-size: 20px;
+  font-weight: normal;
+  font-stretch: normal;
+  line-height: 24px;
+  letter-spacing: 0px;
+  color: #666666;
+
+  margin: 40px 0;
+
+  /* border-top: 16px solid #3c8dbc;
+  border-radius: 16px 16px 0 0; */
+  /* background-color: #3c8dbc; */
+  /* padding: 10px;
+  margin: 0; */
+}
+
+.right_login .username {
+  /* width: 320px; */
+  height: 46px;
+  /* border-bottom: 1px solid #999; */
+  /* margin: 54px 0 0 50px; */
+  /* padding-bottom: 5px; */
+
+  display: flex;
+  align-items: center;
+  justify-items: center;
+  /* margin-top: 40px; */
+}
+.right_login .password {
+  /* width: 320px; */
+  height: 46px;
+  /* border-bottom: 1px solid #999; */
+  /* margin: 30px 0 0 50px;
+  padding-bottom: 5px; */
+
+  display: flex;
+  align-items: center;
+  justify-items: center;
+  margin-top: 30px;
+}
+
+.right_login input {
+  width: 100%;
+  padding: 10px 30px;
+  margin-left: -28px;
+  font-size: 16px;
+  border-radius: 10px;
+}
+
+.right_login input::placeholder {
+  /* width: 100%; */
+  /* padding: 10px 30px; */
+  /* margin-left: 40px; */
+  font-size: 16px;
+  color: #000000;
+  opacity: 0.3;
+}
+
+.login-btn {
+  margin-top: 30px;
+  /* margin-left: 50px; */
+  margin-bottom: 20px;
+  width: 100%;
+  /* width: 320px;
+  height: 60px; */
+  background-color: #4d7cc4;
+  font-size: 25px;
+  color: #fff;
+  cursor: pointer;
+
+  border-radius: 27px;
+}
+
+.login-btn:hover {
+  box-shadow: 0 16px 29px rgba(29, 170, 240, 0.3);
+}
+
+.login-footer {
+  clear: both;
+  /* width: 100%; */
+  /* min-width: 990px; */
+  width: 240px;
+  height: 40px;
+  line-height: 40px;
+  background-color: #fff;
+  color: #999999;
+
+  margin: -20px auto;
+  text-align: center;
+
+  border-radius: 25px;
+  z-index: 3;
+}
+</style>