folder login => Login

src/features/Login/Login.vue

@@ -0,0 +1,201 @@
+<template>
+  <div class="home">
+
+    <header class="header">
+      <div class="school-logo"><img :src="this.logoPath" alt="school logo" />
+      </div>
+      <a class="close" style="border-bottom-left-radius: 6px;">关闭</a>
+    </header>
+
+    <div class="center">
+
+      <div class="content">
+        <div style="display:flex;">
+          <a :class="['qm-big-text', 'login-type', loginType === 'STUDENT_CODE' && 'active-type']" @click="loginType='STUDENT_CODE'" style="border-top-left-radius: 6px">学号登录</a>
+          <a :class="['qm-big-text', 'login-type', loginType !== 'STUDENT_CODE' && 'active-type']" @click="loginType='STUDENT_IDENTITY_NUMBER'" style="border-top-right-radius: 6px">身份证号登录</a>
+        </div>
+
+        <div class="qm-title-text" style="margin: 40px 0 20px 0">
+          远程教育网络考试
+        </div>
+
+        <div style="margin: 0 40px 40px 40px">
+          <i-form ref="loginForm" :model="loginForm" :rules="loginFormRule">
+            <i-form-item prop="accountValue" style='margin-bottom:35px;height:42px'>
+              <i-input type="text" size="large" v-model="loginForm.accountValue" placeholder="登录账号">
+                <i-icon type="ios-person" slot="prepend"></i-icon>
+              </i-input>
+            </i-form-item>
+            <i-form-item prop="password" style='margin-bottom:35px;height:42px'>
+              <i-input type="password" size="large" v-model="loginForm.password" placeholder="密码" @on-enter="login('loginForm')">
+                <i-icon type="ios-lock" slot="prepend"></i-icon>
+              </i-input>
+            </i-form-item>
+            <i-form-item>
+              <div v-if="errorInfo !== ''">
+                <i-alert type="error" show-icon>{{errorInfo}}</i-alert>
+              </div>
+              <i-button size="large" class="qm-primary-button" long @click="login('loginForm')">登录</i-button>
+            </i-form-item>
+          </i-form>
+        </div>
+      </div>
+    </div>
+
+    <footer class="footer"></footer>
+
+  </div>
+</template>
+
+<script>
+/**
+ * 在任何组件需要强制退出，做以下步骤
+ * 1. this.$Message.info()
+ * 2. this.$router.push("/login");
+ * 因为在/login里会删除localStorage的token，而在router.beforeEach会检查是否有token，达到退出的目的。
+ */
+export default {
+  data() {
+    return {
+      logoPath:
+        "/api/ecs_core/org/logo?domain=" + process.env.VUE_APP_LOGIN_DOMAIN,
+      productName: "远程教育网络考试",
+      loginType: "STUDENT_CODE",
+      errorInfo: "",
+      loginForm: {
+        accountValue: "",
+        password: ""
+      },
+      loginFormRule: {
+        accountValue: [
+          {
+            required: true,
+            message: "请填写登录账号",
+            trigger: "blur"
+          }
+        ],
+        password: [
+          {
+            required: true,
+            message: "请填写密码",
+            trigger: "blur"
+          }
+        ]
+      }
+    };
+  },
+  async created() {
+    try {
+      const res = await this.$http.get(
+        "/api/ecs_core/org/getRootOrgByCode?code=" +
+          process.env.VUE_APP_LOGIN_DOMAIN
+      );
+      const productName = res.data.examSysName;
+      this.productName = productName || "远程教育网络考试";
+    } catch (e) {
+      this.productName = "远程教育网络考试";
+    }
+    window.localStorage.removeItem("token");
+    window.localStorage.removeItem("key");
+  },
+  methods: {
+    async login(name) {
+      const valid = await this.$refs[name].validate();
+      if (valid) {
+        console.log("form validated. start login...");
+      } else {
+        return;
+      }
+      this.loginForm["domain"] = this.$route.query.domain || "";
+      let repPara = this.loginForm;
+      try {
+        const response = await this.$http.post("/api/ecs_core/auth/login", {
+          ...repPara,
+          accountType: this.loginType,
+          // FIXME: 根据域名来确定domain
+          domain: process.env.VUE_APP_LOGIN_DOMAIN
+        });
+        let data = response.data;
+        if (data.token) {
+          this.errorInfo = "";
+          //缓存用户信息
+          window.localStorage.setItem("token", data.token);
+          window.localStorage.setItem("key", data.key);
+
+          const student = (await this.$http.get(
+            "/api/ecs_core/student/getStudentInfoBySession"
+          )).data;
+          this.$store.state.user = { ...data, ...student };
+          this.$router.push("/online-exam");
+        } else {
+          this.errorInfo = data.desc;
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.home {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.school-logo {
+  margin-left: -300px;
+}
+
+.header {
+  min-height: 120px;
+  display: grid;
+  place-items: center;
+}
+
+.center {
+  background-image: url("./bg.jpg");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  width: 100vw;
+  min-height: 600px;
+}
+
+.content {
+  margin-top: 100px;
+  margin-left: 60%;
+  width: 300px;
+  border-radius: 6px;
+  background-color: white;
+  display: grid;
+  grid-template-areas: "";
+}
+
+.login-type {
+  flex: 1;
+  line-height: 40px;
+  background-color: #eeeeee;
+}
+
+.active-type {
+  background-color: #ffffff;
+}
+
+.close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  background-color: #eeeeee;
+  color: #999999;
+  width: 80px;
+  height: 40px;
+  line-height: 40px;
+}
+
+.close:hover {
+  color: #444444;
+}
+</style>