union-question-web/src/modules/portal/views/Login.vue

<template>
  <div class="login">
    <div class="login-box">
      <div class="login-card">
        <img class="login-logo" src="../../../assets/images/login-logo.png" />
        <div class="middle-text">
          <h1>欢迎登录</h1>
          <h1>题库管理系统</h1>
        </div>
        <div class="bottom-text">
          <p>Copyright &copy; 2021</p>
          <p>
            <a href="https://www.qmth.com.cn" target="_block">启明泰和</a>.<a
              href="https://beian.miit.gov.cn/"
              target="_blank"
              >鄂ICP备12000033号-13</a
            >
            <span v-if="version" class="margin-left-10">v{{ version }}</span>
          </p>
        </div>
      </div>
      <div class="login-form-box">
        <div class="login-title">输入信息</div>
        <div class="login-sub-title">请输入账号与密码</div>
        <el-form
          ref="loginForm"
          :model="loginInfo"
          :rules="loginRules"
          size="large"
        >
          <el-form-item prop="accountValue">
            <el-input
              v-model.trim="loginInfo.accountValue"
              placeholder="请输入账号"
              clearable
              @keydown.enter.native="submit"
            >
              <!-- <i slot="prefix" class="icon icon-username"></i> -->
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model.trim="loginInfo.password"
              type="password"
              placeholder="请输入密码"
              show-password
              @keydown.enter.native="submit"
            >
              <!-- <i slot="prefix" class="icon icon-password"></i> -->
            </el-input>
          </el-form-item>
          <el-form-item v-if="dialogVisible" prop="smsCode">
            <el-input
              v-model.trim="loginInfo.smsCode"
              placeholder="请输入短信验证码"
              clearable=""
            >
              <i slot="prefix" class="icon icon-code"></i>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              :disabled="isSubmit"
              @click="submit"
              style="width: 100%"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- <main class="login-main">
      <div class="login-title">
        <p>欢迎登录</p>
        <p>题库管理系统</p>
      </div>
      <div class="login-footer">
        Copyright &copy; 2021
        <a href="https://www.qmth.com.cn" target="_block">启明泰和</a>.<a
          href="https://beian.miit.gov.cn/"
          target="_blank"
          >鄂ICP备12000033号-13</a
        >
        <span v-if="version" class="margin-left-10">v{{ version }}</span>
      </div>
      <div class="login-body" @keyup.enter="submit">
        <h1 class="login-body-title">题库管理系统</h1>
        <el-form ref="loginForm" :model="loginInfo" :rules="loginRules">
          <el-form-item prop="accountValue">
            <el-input
              v-model.trim="loginInfo.accountValue"
              placeholder="请输入账号"
              clearable
            >
              <i slot="prefix" class="icon icon-username"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model.trim="loginInfo.password"
              type="password"
              placeholder="请输入密码"
              clearable
            >
              <i slot="prefix" class="icon icon-password"></i>
            </el-input>
          </el-form-item>
          <el-form-item v-if="dialogVisible" prop="smsCode">
            <el-input
              v-model.trim="loginInfo.smsCode"
              placeholder="请输入短信验证码"
              clearable=""
            >
              <i slot="prefix" class="icon icon-code"></i>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              class="login-submit-btn"
              type="danger"
              :disabled="isSubmit"
              @click="submit"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </main> -->
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { USER_SIGNIN } from "../store/user";
import { QUESTION_API } from "@/constants/constants";

export default {
  name: "Login",
  data() {
    return {
      isSubmit: false,
      dialogVisible: false,
      loginInfo: {
        rootOrgId: "",
        domain: "",
        code: "",
        accountType: "COMMON_LOGIN_NAME",
        accountValue: "",
        password: "",
        smsCode: null,
      },
      loginRules: {
        accountValue: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "change",
          },
        ],
        password: [
          {
            validator: (rule, value, callback) => {
              if (
                value &&
                (/^([0-9]+|[a-z]+|[A-Z]+)$/.test(value) ||
                  !/^[a-zA-Z0-9_]+$/.test(value))
              ) {
                callback(
                  new Error("密码只能大写字母、小写字母、数字至少两种组成")
                );
              } else {
                callback();
              }
            },
            trigger: "change",
          },
          {
            required: true,
            min: 8,
            max: 16,
            message: "密码只能8-16个字符",
            trigger: "change",
          },
        ],
        // password: [
        //   {
        //     required: true,
        //     pattern: /^[a-zA-Z0-9_]{1,20}$/,
        //     message: "密码只能由数字、字母和下划线组成，长度1-20个字符",
        //     trigger: "change",
        //   },
        // ],
        smsCode: [
          {
            required: true,
            message: "请输入短信验证码",
            trigger: "change",
          },
        ],
      },
    };
  },
  computed: {
    ...mapState(["version"]),
  },
  watch: {
    $route(to) {
      this.loginInfo.code = to.query.code;
    },
  },
  created() {
    if (this.$route.hash && this.$route.hash.startsWith("#/access?")) {
      this.$router.push(this.$route.hash.slice(1));
      return;
    }
    this.loginInfo.domain = window.location.hostname.split(".")[0];
    sessionStorage.clear();
    var params = this.$route.query;

    this.loginInfo.code = params.code;
  },
  methods: {
    ...mapActions([USER_SIGNIN]),
    async submit() {
      const valid = await this.$refs.loginForm.validate().catch(() => {});
      if (!valid) return;

      var url = QUESTION_API + "/auth/login";
      this.$httpWithMsg
        .post(url, this.loginInfo)
        .then((response) => {
          var user = response.data;
          user.questionUnlock = false;
          this.USER_SIGNIN(user);
          this.$router.replace({ path: "/questions/tips" });
          this.$notify({
            message: "登录成功",
            type: "success",
            duration: 1000,
          });
        })
        .catch((error) => {
          if (error.response.data.code === "UQ-003100") {
            this.dialogVisible = true;
          }
        });
    },
    loginWithSms() {
      this.dialogVisible = false;
      this.submit();
    },
  },
};
</script>
<style lang="scss" scoped>
.login {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("../../../assets/images/login-bg.png") 0 0 no-repeat;
  background-size: 100% 100%;
  .login-box {
    width: 800px;
    height: 500px;
    display: flex;
    border-radius: 30px;
    overflow: hidden;
    .login-card {
      width: 400px;
      height: 100%;
      background: url("../../../assets/images/login-card.png") 0 0 no-repeat;
      background-size: 100% 100%;
      padding: 48px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .login-logo {
        width: 78px;
      }
      .middle-text {
        font-size: 42px;
        font-weight: bold;
        color: #fff;
        line-height: 56px;
      }
      .bottom-text {
        p {
          color: #e5e5e5;
          line-height: 22px;
          font-size: 14px;
        }
      }
    }
    .login-form-box {
      flex: 1;
      background-color: #fff;
      padding: 40px;
      .login-title {
        font-size: 24px;
        color: #262626;
        font-weight: bold;
        margin-top: 66px;
      }
      .login-sub-title {
        font-size: 16px;
        color: #8c8c8c;
        margin-top: 10px;
        margin-bottom: 25px;
      }
    }
  }
}
</style>