浏览代码

添加login模块

yangwei 7 年之前
父节点
当前提交
92017771b2
共有 3 个文件被更改,包括 149 次插入0 次删除
  1. 138 0
      src/features/login/Login.vue
  2. 二进制
      src/features/login/bg.jpg
  3. 11 0
      src/router.js

+ 138 - 0
src/features/login/Login.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="home">
+    <div class="login-bg"></div>
+  <Row>
+    <Col :xs="{ span: 24}" :md ="{ span: 8, offset: 14}" :lg="{ span: 8, offset: 14 }">
+      <Card> 
+        <font size="5">远程教育网络考试</font>
+        <Row>
+            <Col>        
+                <Form ref="formInline" :model="formInline" :rules="ruleInline">
+                  <FormItem prop="accountType">
+                          <RadioGroup size="large" v-model="formInline.accountType">
+                              <Radio label="STUDENT_CODE">学生</Radio>
+                              <Radio label="STUDENT_IDENTITY_NUMBER">身份证号</Radio>
+                          </RadioGroup>                
+                  </FormItem>
+                  <FormItem prop="user">
+                      <Input type="text" size="large" v-model="formInline.user" placeholder="登录账号">
+                          <Icon type="ios-person-outline" slot="prepend"></Icon>
+                      </Input>
+                  </FormItem>
+                  <FormItem prop="password">
+                      <Input type="password" size="large" v-model="formInline.password" placeholder="密码">
+                          <Icon type="ios-locked-outline" slot="prepend"></Icon>
+                      </Input>
+                  </FormItem> 
+                  <FormItem>
+                      <Row>
+                        <Col span="12" style="padding-right: 5px;">
+                              <Button type="error" size="large" @click="login('formInline')">登录</Button>
+                        </Col>
+                        <Col span="12" style="padding-left: 5px;">
+                              <Button type="ghost" size="large" @click="close('formInline')">关闭</Button>
+                        </Col>
+                      </Row>
+                  </FormItem>
+              </Form>
+            
+            </Col>
+
+
+        </Row>
+      </Card>
+    </Col>
+  </Row>
+</div>
+</template>
+<script>
+export default {
+  data() {
+    debugger;
+    return {
+      domain: this.$route.query.domain || "",
+      formInline: {
+        accountValue: "",
+        password: "",
+        loginType: "STUDENT_CODE",
+        accountType: "STUDENT_CODE"
+      },
+      ruleInline: {
+        user: [
+          {
+            required: true,
+            message: "请填写登录账号",
+            trigger: "blur"
+          }
+        ],
+        password: [
+          {
+            required: true,
+            message: "请填写密码",
+            trigger: "blur"
+          }
+          // {
+          //   type: "string",
+          //   min: 6,
+          //   message: "The password length cannot be less than 6 bits",
+          //   trigger: "blur"
+          // }
+        ]
+      }
+    };
+  },
+  methods: {
+    login(name) {
+      // this.$http({
+      //   method: "get",
+      //   url: "/api/comments",
+      //   params: { a: 1 },
+      //   data: {
+      //     name: "virus"
+      //   },
+      //   message: this.$Message
+      // });
+
+      this.$get("/api/comments", {})
+        .then(res => {
+          debugger;
+          console.log(res);
+        })
+        .catch(response => {
+          debugger;
+          console.log(response);
+        });
+
+      this.$refs[name].validate(valid => {
+        if (valid) {
+          this.$Message.success("Success!");
+        } else {
+          this.$Message.error("Fail!");
+        }
+      });
+    },
+    close(name) {
+      this.$refs[name].validate(valid => {
+        if (valid) {
+          this.$Message.success("Success!");
+        } else {
+          this.$Message.error("Fail!");
+        }
+      });
+    }
+  }
+};
+</script>
+<style>
+.login-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: url("./bg.jpg");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+</style>

二进制
src/features/login/bg.jpg


+ 11 - 0
src/router.js

@@ -5,6 +5,7 @@ import About from "./views/About.vue";
 
 import NotFoundComponent from "./views/NotFoundComponent.vue";
 import OnlineExamHome from "./features/OnlineExam/OnlineExamHome.vue";
+import Login from "./features/login/Login.vue";
 
 Vue.use(Router);
 
@@ -20,6 +21,16 @@ export default new Router({
       name: "about",
       component: About
     },
+    {
+      path: "/login",
+      name: "login",
+      component: Login
+    },
+    {
+      path: "/online-exam",
+      name: "OnlineExamHome",
+      component: OnlineExamHome
+    },
     {
       path: "/online-exam",
       name: "OnlineExamHome",