PC_FiveFollowing/src/views/login.vue

<template>
  <div class="loginBox">
    <div class="loginInnerBox">
      <h2 class="bigTit">智慧用电监控平台</h2>
      <p class="loginTitle">用户登录</p>

      <el-form
        :label-position="labelPosition"
        :model="loginForm"
        :rules="rules"
        ref="loginForm"
        class="demo-loginForm"
      >
        <el-form-item prop="username" class="oneSec">
          <img class="icon" src="../assets/images/userIcon.png" alt="" />
          <el-input
            v-model="loginForm.username"
            placeholder="请输入登录ID"
          ></el-input>
        </el-form-item>

        <el-form-item prop="password" class="oneSec">
          <img class="icon" src="../assets/images/passwordIcon.png" alt="" />
          <el-input
            v-model="loginForm.password"
            type="password"
            placeholder="请输入密码"
            auto-complete="new-password"
            clearable
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <div class="remember">
          <el-checkbox label="记住密码" v-model="isChecked"></el-checkbox>
        </div>
        <el-form-item>
          <el-button @click="submitForm" class="submitBox">登录</el-button>
          <!-- <el-button @click="resetForm">重置</el-button> -->
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import api from "../api/login/user.js";
export default {
  data() {
    return {
      loginData: "",

      labelPosition: "right",

      loginForm: {
        username: "",
        password: "",
      },

      rules: {
        username: [
          // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 6,
            message: "用户名长度在 3 到 6 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输密码", trigger: "blur" },
          {
            min: 3,
            max: 6,
            message: "密码长度在 3 到 6 个字符",
            trigger: "blur",
          },
        ],
      },

      isChecked: true, // 记住密码
    };
  },
  mounted() {
    this.getCookie();
  },

  methods: {
    //登录数据对接
    login_api(query = {}) {
      api.login_api(query).then((requset) => {
        this.loginData = requset.data;
        console.log(this.loginData);
      });
    },

    submitForm() {
      // ref 用在组件中，就表示当前组件  通过 $refs.xxx可以拿到所有ref的集合
      // this.$refs.loginForm  //当前的表单对象
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          //valid成功为ture，失败为false
          //发送请求 ，调用登录接口
          console.log(this.loginForm);

          this.login_api({
            name: this.loginForm.username,
            password: this.loginForm.password,
          });

          this.$router.push({ path: "/" });
          // alert('submit!');
        } else {
          console.log("校验失败");
          return false;
        }
      });




      if (this.isChecked) {
        // 记住密码
        this.setCookie(this.loginForm.username, this.loginForm.password, 30); // 保存期限为30天
      } else {
        this.clearCookie(); // 清空 Cookie
      }
    },





    // 设置Cookie
    setCookie(username, password, exdays) {
      // 用户名, 密码, 保存天数
      let exdate = new Date(); // 获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays);
      // 字符串拼接cookie
      window.document.cookie =
        "userName=" + username + ";path=/;expires=" + exdate.toGMTString();
      window.document.cookie =
        "userPwd=" + password + ";path=/;expires=" + exdate.toGMTString();
    },

    // 读取Cookie
    getCookie() {
      // console.log(document.cookie);
      if (document.cookie.length > 0) {
        let arr = document.cookie.split("; "); // 这里显示的格式需要切割一下自己可输出看下
        for (let i = 0; i < arr.length; i++) {
          let arr2 = arr[i].split("="); // 再次切割
          // 判断查找相对应的值
          if (arr2[0] == "userName") {
            this.loginForm.usernameText = arr2[1]; // 保存到保存数据的地方
          } else if (arr2[0] == "userPwd") {
            this.loginForm.passwordText = arr2[1];
          }
        }
      }
    },

    // 清除Cookie
    clearCookie() {
      this.setCookie("", "", -1); // 修改2值都为空，天数为负1天就好了
    },

    // resetForm() {
    //   //表单重置
    //   this.$refs.loginForm.resetFields();
    // },





  },
};
</script>

<style lang="scss">
#header {
  display: none;
}
.bigTit {
  position: absolute;
  top: -90px;
  left: 7px;
  text-align: center;
  width: 100%;
  color: #00e1eb;
  font-size: 0.625rem;

  //   margin-left:-0.775rem;
  font-family: PangMenZhengDao Regular, PangMenZhengDao Regular-Regular;
  font-weight: bold;
  letter-spacing: 17px;
}
.loginBox {
  background-image: url(../assets/images/login-bg.png) !important;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100vh;
  min-width: 1024px;
  min-height: 600px;
  background-position: center center;
  display: block;
  display: flex;
  align-items: center;
  justify-content: center;
  color: red;

  .loginInnerBox {
    position: relative;
    width: 8.3875rem;
    height: 5.8rem;
    background-image: url(../assets/images/loginIn-bg.png) !important;
    background-size: cover;
    padding: 0.45rem 0.775rem;
    // text-align: center;
    .loginTitle {
      font-size: 0.45rem;
      color: #00e1eb;
      text-align: center;
      letter-spacing: 12px;
    }
    .oneSec {
      text-align: left;
      width: 6.85rem;
      height: 0.7375rem;
      line-height: 0.7375rem;
      background: rgba(11, 161, 248, 0.4);
      border: 1px solid #0ba1f8;
      margin-top: 0.4875rem;
      position: relative;
      .icon {
        position: absolute;
        top: 0.2rem;
        left: 0.2rem;
        width: 0.3rem;
        height: 0.3rem;
      }
      input {
        background: transparent;
        border: 0;
        -webkit-appearance: none;
        border-radius: 0;
        // padding: 12px 5px 12px 0;
        color: #fff;
        height: 47px;
        caret-color: #fff;
        outline: none;
        font-size: 0.325rem;
        padding-left: 0.85rem;
        line-height: 0.7375rem;
        height: 0.7375rem;
      }
    }
    .remember {
      margin: 0.275rem 0;
      .el-checkbox__inner {
        width: 0.3rem;
        height: 0.3rem;
      }
      .el-checkbox__label {
        font-size: 0.325rem;
        font-weight: 300;
      }
      .el-checkbox__inner::after {
        top: 0.07rem;
        width: 0.0625rem;
        left: 0.1125rem;
      }
      .el-checkbox {
        color: #fff;
      }
    }
    .submitBox {
      width: 6.85rem;
      // height: 0.7375rem;
      opacity: 1;
      background: #00e1eb;
      color: #001a2b;
      font-size: 0.45rem;
      text-align: center;
      // line-height: 0.7375rem;
      cursor: pointer;
    }
  }
}
</style>