commit message

manager/src/views/login.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="login">
+    <Row @keydown.enter.native="submitLogin" class="flex">
+      <Col style="width: 368px">
+      <Header />
+      <Row style="flex-direction: column;">
+
+        <Form ref="usernameLoginForm" :model="form" :rules="rules" class="form">
+          <FormItem prop="username">
+            <Input v-model="form.username" prefix="ios-contact" size="large" clearable placeholder="请输入用户名" autocomplete="off" />
+          </FormItem>
+          <FormItem prop="password">
+            <Input type="password" v-model="form.password" prefix="ios-lock" size="large" password placeholder="请输入密码" autocomplete="off" />
+          </FormItem>
+        </Form>
+
+        <Row>
+          <Button class="login-btn" type="primary" size="large" :loading="loading" @click="submitLogin" long>
+            <span v-if="!loading">{{ $t("login") }}</span>
+            <span v-else>{{ $t("logining") }}</span>
+          </Button>
+        </Row>
+
+      </Row>
+      <div v-if="socialLogining">
+        <RectLoading />
+      </div>
+      <Footer />
+      </Col>
+      <LangSwitch />
+    </Row>
+  </div>
+</template>
+
+<script>
+import { login, userInfo } from "@/api/index";
+import Cookies from "js-cookie";
+import Header from "@/views/main-components/header";
+import Footer from "@/views/main-components/footer";
+import LangSwitch from "@/views/main-components/lang-switch";
+import RectLoading from "@/views/my-components/lili/rect-loading";
+import CountDownButton from "@/views/my-components/lili/count-down-button";
+import util from "@/libs/util.js";
+
+export default {
+  components: {
+    CountDownButton,
+    RectLoading,
+    LangSwitch,
+    Header,
+    Footer,
+  },
+  data() {
+    return {
+      error: false,
+      loading: false,
+      sending: false,
+      form: {
+        username: "",
+        password: "",
+        mobile: "",
+        code: "",
+      },
+      rules: {
+        username: [
+          {
+            required: true,
+            message: "账号不能为空",
+            trigger: "blur",
+          },
+        ],
+        password: [
+          {
+            required: true,
+            message: "密码不能为空",
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    mounted() {},
+    afterLogin(res) {
+      let accessToken = res.result.accessToken;
+      let refreshToken = res.result.refreshToken;
+      this.setStore("accessToken", accessToken);
+      this.setStore("refreshToken", refreshToken);
+      // 获取用户信息
+      userInfo().then((res) => {
+        if (res.success) {
+          // 加载菜单
+          this.setStore("userInfo", res.result);
+          Cookies.set("userInfo", JSON.stringify(res.result));
+          this.$store.commit("setAvatarPath", res.result.avatar);
+          util.initRouter(this);
+          this.$router.push({
+            name: "home_index",
+          });
+        } else {
+          this.loading = false;
+        }
+      });
+    },
+    submitLogin() {
+      this.$refs.usernameLoginForm.validate((valid) => {
+        if (valid) {
+          this.loading = true;
+          login({
+            username: this.form.username,
+            password: this.md5(this.form.password),
+          }).then((res) => {
+            if (res && res.success) {
+              this.afterLogin(res);
+            } else {
+              this.loading = false;
+            }
+          });
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.login {
+  height: 100%;
+  background: url("../assets/background.png") no-repeat;
+  background-color: #f0f2f5;
+  display: flex;
+  background-size: cover;
+  align-items: center;
+  justify-content: center;
+
+  .ivu-tabs-nav-container {
+    line-height: 2;
+    font-size: 17px;
+    box-sizing: border-box;
+    white-space: nowrap;
+    overflow: hidden;
+    position: relative;
+    zoom: 1;
+  }
+
+  .form {
+    padding-top: 1vh;
+
+    .input-verify {
+      width: 67%;
+    }
+  }
+
+  .forget-pass,
+  .other-way {
+    font-size: 14px;
+  }
+
+  .login-btn,
+  .other-login {
+    margin-top: 3vh;
+  }
+
+  .icons {
+    display: flex;
+    align-items: center;
+  }
+
+  .other-icon {
+    cursor: pointer;
+    margin-left: 10px;
+    display: flex;
+    align-items: center;
+    color: rgba(0, 0, 0, 0.2);
+
+    :hover {
+      color: #2d8cf0;
+    }
+  }
+}
+.flex {
+  justify-content: center;
+}
+
+</style>