fd_dwgz_zhyw_nx/src/views/layout/login-page.vue

<template>
  <div class="login-panel">
    <div class="login-title">
      <p>
        <img
          src="@/assets/imgs/login-icon.png"
          alt=""
          class="login-img"
        />发电场站
      </p>
      <div class="login-name">生产实时运营管理平台</div>
    </div>
    <el-form
      ref="loginRef"
      :model="loginForm"
      :rules="loginRules"
      class="login-form"
    >
      <el-form-item prop="username">
        <el-input
          v-model="loginForm.username"
          size="large"
          placeholder="请输入账号"
        >
          <template #prefix>
            <i class="svg-icon svg-icon-white">
              <SvgIcon svgid="svg-user"></SvgIcon>
            </i>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="loginForm.password"
          placeholder="请输入密码"
          show-password
          @keyup.enter="Login"
        >
          <template #prefix>
            <el-icon size="20"><Lock /></el-icon>
          </template>
        </el-input>
      </el-form-item>
    </el-form>
    <div class="hintText">
      <el-checkbox v-model="loginForm.rememberMe" @change="updateRemember"
        >记住用户名
      </el-checkbox>
    </div>
    <el-button :loading="loading" class="login-btn" @click.enter="Login">
      <span v-if="!loading">登 录</span>
      <span v-else>登 录 中...</span>
    </el-button>
  </div>
</template>
<script>
import { login } from "@/api/common.js";
import Cookies from "js-cookie";
import { Base64 } from "js-base64";
import SvgIcon from "@com/coms/icon/svg-icon.vue";
export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
        rememberMe: false,
      },
      redirectUrl: "",
      loading: false,
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入您的账号" },
        ],
        password: [
          { min: 6, max: 20, message: "长度在6到20个字符", trigger: "blur" },
          //   {
          //     min: 6,
          //     max: 20,
          //     pattern: /(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{6,20}/,
          //     message: "密码必须由数字、字母和特殊字符组成",
          //     trigger: "blur",
          //   },
        ],
      },
    };
  },
  emits: {
    onLogin: null,
  },
  components: { SvgIcon },
  watch: {
    $route: {
      handler(val) {
        console.log(val);
        this.redirectUrl = val.query.redirect ? val.query.redirect : "/";
      },
      immediate: true,
    },
  },
  methods: {
    Login() {
      let that = this;
      that.$refs.loginRef.validate((valid) => {
        that.loading = true;
        if (!valid) return;
        if (that.loginForm.rememberMe) {
          Cookies.set("username", that.loginForm.username, { expires: 300 });
          Cookies.set("password", Base64.encode(that.loginForm.password), {
            expires: 300,
          });
          Cookies.set("rememberMe", that.loginForm.rememberMe, {
            expires: 300,
          });
        } else {
          // 否则移除
          Cookies.remove("username");
          Cookies.remove("password");
          Cookies.remove("rememberMe");
        }
        login(this.loginForm).then((data) => {
          if (data.code == "200") {
            that.BASE.showMsg({
              msg: "登录成功",
              type: "success",
            });
            this.loading = false;
            this.$store.commit("user/SET_TOKEN", data);
            this.$emit("onLogin", {
              token: data.token,
              username: that.loginForm.username,
            });
            that.$router.push(this.redirectUrl); // 跳转到首页
          }
        });
      });
    },
    updateRemember(v) {
      Cookies.set("rememberMe", v);
    },
    getRememberInfo() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      const rememberMe = Boolean(Cookies.get("rememberMe"));
      if (rememberMe) {
        this.loginForm.username =
          username === undefined ? this.loginForm.username : username;
        if (password) {
          this.loginForm.password = Base64.decode(password);
        }
        this.loginForm.rememberMe =
          rememberMe === undefined ? false : rememberMe;
      }
    },
  },
  created() {
    this.getRememberInfo();
  },
};
</script>

<style lang="less" scoped>
.login-panel {
  position: absolute;
  width: 470px;
  height: 636px;
  background: rgba(0, 0, 0, 0.4);
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 90px;
}
.login-title {
  display: flex;
  align-items: center;
  flex-direction: column;
  font-size: 30px;
  margin-bottom: 40px;
  p {
    display: flex;
    align-items: center;
    .login-img {
      width: 56px;
      height: 56px;
      margin-right: 5px;
    }
  }
}
.login-btn ::v-deep {
  background: url("~@/assets/imgs/login-btn.png") no-repeat;
  background-size: cover;
  width: 385px;
  height: 56px;
  border-radius: 5px;
  border-width: 0;
  color: #fff;
  font-size: 16px;
  margin-top: 66px;
  cursor: pointer;
  &:hover,
  &:focus {
    color: #fff;
    background-color: transparent;
    border-width: 0;
  }
}

.login-form ::v-deep {
  .el-form-item {
    width: 383px;
    margin-bottom: 22px;
    .el-form-item__content {
      .el-input {
        .el-input__inner {
          height: 50px;
          line-height: 50px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #fff;
          background: #1b1a1f;
          border-width: 0;
          font-size: 16px;
          padding-left: 35px;
        }
        .el-input__prefix {
          top: 50%;
          transform: translateY(-28%);
        }
      }
    }
  }
}

/**改变input里的字体颜色*/
/deep/ input::-webkit-input-placeholder {
  color: #777777;
  font-size: 16px;
}
::v-deep .el-input__inner:-webkit-autofill {
  transition: background-color 50000s ease-in-out 0s;
  -webkit-text-fill-color: #fff; //记住密码的颜色
  caret-color: #fff; //改变输入框光标颜色,同时又不改变输入框里面的内容的颜色
}
::v-deep.hintText {
  display: flex;
  width: 383px;
  padding-top: 5px;
  padding-left: 18px;
  .el-checkbox {
    .el-checkbox__inner {
      background: #fff;
      border-color: #fff;
    }
    .el-checkbox__label {
      font-size: 14px;
      color: #777;
    }
  }
}
</style>