entranceGuardWebMG/src/views/login/index.vue

<template>
  <div class="login-container">
    <div class="login-nav">
      <div class="login-nav-img">
        <img src="../../../public/images/nav-2.png" />
      </div>
      <div class="login-nav-info">门禁设备管理平台</div>

      <div class="login-form">
        <div class="login-form-head">
          <div class="login-form-titile">用户登录</div>
          <div class="login-form-info">—— 欢迎登录用户系统管理 ——</div>
        </div>

        <el-form
          ref="loginForm"
          :model="loginForm"
          :inline="false"
          size="normal"
          :rules="rules"
          autocomplete="on"
        >
          <el-form-item class="login-form-item" prop="username">
            <span><img src="../../../public/images/denglu.png" /></span>
            <el-input
              class="login-form-input"
              v-model="loginForm.username"
              ref="username"
              name="username"
              placeholder="请输入您的账号"
            ></el-input>
          </el-form-item>

          <el-form-item class="login-form-item" prop="password">
            <span><img src="../../../public/images/mima.png" /></span>
            <el-input
              class="login-form-input"
              type="password"
              v-model="loginForm.password"
              placeholder="请输入您的密码"
              ref="password"
              name="password"
              autocomplete="on"
              @keyup.native="checkCapslock"
              @blur="capsTooltip = false"
              @keyup.enter.native="handleLogin"
            >
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-button
              :loading="loading"
              type="primary"
              @click.native.prevent="handleLogin"
              class="login-form-button"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { validUsername } from "@/utils/validate";
import SocialSign from "./components/SocialSignin";

export default {
  name: "Login",
  components: { SocialSign },
  data() {
    const validateUsername = (rule, value, callback) => {
      if (value.length < 5) {
        callback(new Error("账号至少五位数"));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error("密码至少六位数"));
      } else {
        callback();
      }
    };
    return {
      loginForm: {
        username: "admin",
        password: "123abc",
      },
      rules: {
        username: [
          { required: true, trigger: "blur", validator: validateUsername },
        ],
        password: [
          { required: true, trigger: "blur", validator: validatePassword },
        ],
      },
      capsTooltip: false,
      loading: false,
      redirect: undefined,
      otherQuery: {},
    };
  },
  // watch: {
  //   $route: {
  //     handler: function(route) {
  //       const query = route.query
  //       if (query) {
  //         this.redirect = query.redirect
  //         this.otherQuery = this.getOtherQuery(query)
  //       }
  //     },
  //     immediate: true
  //   }
  // },
  // created() {
  //   window.addEventListener('storage', this.afterQRScan)
  // },
  mounted() {
    if (this.loginForm.username === "") {
      this.$refs.username.focus();
    } else if (this.loginForm.password === "") {
      this.$refs.password.focus();
    }
  },
  // destroyed() {
  //   window.removeEventListener('storage', this.afterQRScan)
  // },
  methods: {
    checkCapslock(e) {
      const { key } = e;
      this.capsTooltip = key && key.length === 1 && key >= "A" && key <= "Z";
    },
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$store
            .dispatch("user/login", this.loginForm)
            .then(() => {
              this.$router.push({
                path: this.redirect || "/",
                query: this.otherQuery,
              });
              this.loading = false;
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.login-container {
  width: 960px;
  height: 540px;
  margin: 100px auto;
  box-shadow: 0 0 25px #cac6c6;
}

.login-nav {
  position: relative;
  width: 960px;
  height: 250px;
  background: url(../../../public/images/nav-1.png) center center/100% 100%;
}

.login-nav-img {
  position: absolute;
  top: 21.5px;
  left: 31.5px;
  width: 162px;
  height: 44px;
}

.login-nav-img img {
  width: 100%;
}

.login-nav-info {
  position: absolute;
  top: 71px;
  left: 326px;
  margin: 0 auto;
  width: 330px;
  line-height: 37.5px;
  font-size: 40.01px;
  color: #ffffff;
}

.login-form {
  position: absolute;
  top: 127.5px;
  left: 315px;
  margin: 0 auto;
  width: 330px;
  height: 350.1px;
  background-color: #fff;
  box-shadow: 0 0 25px #cac6c6;
}

.login-form-head {
  position: relative;
  width: 330px;
  height: 122.6px;
}

.login-form-titile {
  position: absolute;
  top: 34px;
  left: 109.5px;
  height: 28px;
  font-size: 30.01px;
  color: #425570;
}

.login-form-info {
  position: absolute;
  top: 82px;
  left: 48.5px;
  height: 15px;
  font-size: 16px;
  color: #666666;
}

.login-form-item {
  margin-top: 10.9px;
  margin-left: 30px;
}

.login-form-item span {
  display: inline-block;
  width: 43px;
  height: 43px;
  background-color: #1e4365;
  text-align: center;
}

.login-form-item span img {
  width: 19px;
  margin-top: 12.5px;
  vertical-align: sub;
}

.login-form-item .login-form-input {
  width: 227.5px;
  height: 40px;
}

.login-form-button {
  width: 270px;
  height: 36px;
  background-color: #1d4264;
  color: #ffffff;
  border-radius: 4px;
  font-size: 13px;
  margin-left: 30.5px;
  margin-top: 21.2px;
}
</style>