码农齐齐齐
2022-09-09 89946abb222981e075e52feb8a01e937f322db5b
src/views/login/index.vue
@@ -19,7 +19,7 @@
        ref="loginForm"
        label-position="left"
      >
      <!-- title -->
        <!-- title -->
        <h2 class="login-title">用户登录 / USER LOGIN</h2>
        <el-form-item prop="username">
          <!-- 用户名输入框 -->
@@ -45,9 +45,9 @@
            autoComplete="on"
            placeholder="请输入登录密码"
          >
          <!-- 输入框前icon -->
            <!-- 输入框前icon -->
            <span slot="prefix">
              <svg-icon  icon-class="password" class="color"></svg-icon>
              <svg-icon icon-class="password" class="color"></svg-icon>
            </span>
            <!-- 输入框后icon -->
            <span slot="suffix" @click="showPwd">
@@ -76,7 +76,8 @@
<script>
import { isvalidUsername } from "@/utils/validate";
import { createNamespacedHelpers } from "vuex";
const { mapActions } = createNamespacedHelpers("users");
export default {
  name: "login",
  data() {
@@ -96,8 +97,8 @@
    };
    return {
      loginForm: {
        username: "",
        password: "",
        username: "admin",
        password: "macro123",
      },
      loginRules: {
        username: [
@@ -111,23 +112,7 @@
      pwdType: false,
    };
  },
  created() {
    // this.loginForm.username = getCookie("username");
    // this.loginForm.password = getCookie("password");
    // if (
    //   this.loginForm.username === undefined ||
    //   this.loginForm.username == null ||
    //   this.loginForm.username === ""
    // ) {
    //   this.loginForm.username = "admin";
    // }
    // if (
    //   this.loginForm.password === undefined ||
    //   this.loginForm.password == null
    // ) {
    //   this.loginForm.password = "";
    // }
  },
  created() {},
  methods: {
    showPwd() {
      if (!this.pwdType) {
@@ -136,59 +121,50 @@
        this.pwdType = false;
      }
    },
    ...mapActions(["login"]),
    handleLogin() {
      this.$router.push({ path: "/home" });
      // this.$refs.loginForm.validate((valid) => {
      //   if (valid) {
      //     console.log(valid);
      //     this.loading = true;
      //     this.$store
      //       .dispatch("Login", this.loginForm)
      //       .then(() => {
      //         this.loading = false;
      //         setCookie("username", this.loginForm.username, 15);
      //         setCookie("password", this.loginForm.password, 15);
      //         this.$router.push({ path: "/" });
      //       })
      //       .catch(() => {
      //         this.loading = false;
      //       });
      //   } else {
      //     console.log("参数验证不合法!");
      //     return false;
      //   }
      // });
      console.log("in login");
      const { username, password } = this.loginForm;
      this.$axios
        .post("http://42.193.1.25:8082/sccg/admin/login", {
        password,
        username,
        })
        .then(function (response) {
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
};
</script>
<style  lang="scss" scoped>
.color{
.color {
  color: red;
}
#background {
  width: 100vw;
  height: 100vh;
  background: url("@/assets/imgs/login/login_bg.jpg");
  background-size: cover  ;
  background-size: cover;
  position: relative;
  display: flex;
  min-width: 800px;
}
.login-form-layout {
  position: absolute;
  top: 20%;
  right: 5%;
  width: 360px;
  align-self: center;
}
.text {
  align-self: flex-start;
  position: absolute;
  top:20%;
  top: 20%;
  left: 5%;
  // margin-top: 180px;
  // margin-left: 50px;
  display: flex;
  width: 400px;
  justify-content: space-between;