qa_portal_vue/src/views/login/index.vue

<template>
  <div class="bg">
    <div class="logo">
      <div v-if="!data.HAS_LOGO">
        <img src="~@/assets/images/lucency.png" alt="" />
      </div>
      <div v-if="data.HAS_LOGO === 'N'">
        <img
          src="https://img.zcool.cn/community/013a415fd17a7711013fdcc71843a2.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100"
          alt=""
        />
      </div>
      <div v-if="data.HAS_LOGO === 'Y'">
        <img :src="FILE_PATH + data.oemForm.APP_LOGO_PATH" alt="" />
      </div>
    </div>
    <div class="form">
      <div class="title">
        <div>欢迎登录</div>
        <div v-if="!data.oemForm.CORP_NAME">联安云全员培训学员APP</div>
        <div v-else>
          {{ data.oemForm.CORP_NAME }}
        </div>
      </div>
      <van-form label-align="top">
        <van-cell-group :border="false">
          <van-field
            v-model="data.form.userName"
            label="身份证号"
            placeholder="请输入您的身份证号"
          />
          <van-field
            v-model="data.form.userPwd"
            label="密码"
            placeholder="请输入您的密码"
            type="password"
          />
          <van-cell>
            <van-checkbox v-model="data.checked" shape="square">
              30天内免登陆
            </van-checkbox>
          </van-cell>
        </van-cell-group>
      </van-form>
      <div class="loginbtn" @click="fnLogin">登录</div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import { debounce } from "throttle-debounce";
import { showToast, showDialog } from "vant";
import { Login, getOemInfo, getAppVersion } from "@/request/api.js";
import { useUserStore } from "@/pinia/user.js";
import { useSavedUsers } from "@/pinia/savedUsers.js";
import { useMiscellaneousStore } from "@/pinia/miscellaneous.js";
import { useRouter } from "vue-router";
import dayjs from "dayjs";
import { useEventListener } from "@vueuse/core";

const userStore = useUserStore();
const miscellaneousStore = useMiscellaneousStore();
const savedUsersStore = useSavedUsers();
const router = useRouter();
const FILE_PATH = import.meta.env.VITE_FILE_PATH;
const data = reactive({
  checked: false,
  form: {
    userName: "",
    userPwd: "",
  },
  oemForm: {
    CORP_NAME: "",
    APP_LOGO_PATH: "",
  },
  HAS_LOGO: "",
  APP_DOMAIN_NAME: "",
  appVersionNew: "",
});
const fnGetAppVersion = async () => {
  const resData = await getAppVersion();
  data.appVersionNew = resData.pd.VERSION;
};
useEventListener("resize", () => {
  if (document.activeElement.tagName === "INPUT") {
    window.setTimeout(() => {
      document.activeElement.scrollIntoViewIfNeeded();
    }, 100);
  }
});
const fnIdCard = (value) => {
  return /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(
    value
  );
};
const fnLogin = debounce(
  1000,
  async () => {
    if (miscellaneousStore.getAppVersion >= data.appVersionNew) {
      if (!data.form.userName) {
        showToast("请输入用户名");
        return;
      }
      if (!fnIdCard(data.form.userName)) {
        showToast("身份证号格式不正确");
        return;
      }
      if (!data.form.userPwd) {
        showToast("密码不能为空");
        return;
      }
      if (data.checked) {
        savedUsersStore.setSavedUsers({
          userName: data.form.userName,
          userPwd: data.form.userPwd,
          startTime:
            savedUsersStore.getSavedUsers.startTime ||
            dayjs().format("YYYY-MM-DD"),
          endTime:
            savedUsersStore.getSavedUsers.endTime ||
            dayjs().add(30, "days").format("YYYY-MM-DD"),
        });
      } else {
        savedUsersStore.$reset();
      }
      const resData = await Login({
        KEYDATA: "qdkjchina" + data.form.userName + ",qd," + data.form.userPwd,
        PERSONNEL_TYPE: "6",
      });
      userStore.setUserInfo({
        USER_ID: resData.USER_ID, // 用户id
        NAME: resData.NAME, // 用户名
        USERNAME: resData.USERNAME, // 用户手机号
        CORPINFO_ID: resData.CORPINFO_ID, // 创建机构id
        // TOKEN: resData.token, // 创建机构id
        USER_SIGN_FILE_PATH: resData.USER_SIGN_FILE_PATH
          ? FILE_PATH + resData.USER_SIGN_FILE_PATH
          : "", // 学员证照
      });

      if (resData.AUTHENTICATION === "0") {
        await showDialog({
          title: "提示",
          message: "未人脸验证，点击确认前往人脸验证！",
        });
        await router.replace({
          name: "blankJump",
          query: { isFirst: "1", routerName: "face_authentication" },
        });
      } else {
        await router.replace({ name: "index" });
      }
    } else {
      showToast("当前版本过低，请点击微信右上角的刷新再试。");
    }
  },
  { atBegin: true }
);
const fnInitUser = () => {
  const { userName, userPwd, startTime, endTime } =
    savedUsersStore.getSavedUsers;
  if (userName && userPwd) {
    if (dayjs(startTime).diff(dayjs(endTime), "days") <= 30) {
      data.form.userName = userName;
      data.form.userPwd = userPwd;
      data.checked = true;
      fnLogin();
    }
  }
};
await fnGetAppVersion();
fnInitUser();
const fnGetData = async () => {
  const resData = await getOemInfo({
    APP_DOMAIN_NAME: window.location.hostname,
  });
  if (resData.pd) {
    data.oemForm.CORP_NAME = resData.pd.CORP_NAME;
    data.oemForm.APP_LOGO_PATH = resData.pd.APP_LOGO_PATH;
    data.HAS_LOGO = "Y";
  } else {
    data.HAS_LOGO = "N";
  }
};
import.meta.env.PROD && fnGetData();
</script>

<style lang="scss" scoped>
.bg {
  background-color: #fff;
  width: 100vw;
  height: 100vh;
  background-image: url("/src/assets/images/login/login_bg.jpg");
  background-size: 750px 522px;
  background-repeat: no-repeat;
  background-position: top center;
  position: relative;
  padding-top: 300px;

  .logo {
    background-color: rgba(255, 255, 255, 0.1);
    width: 238px;
    height: 238px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.43);
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.18);
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    top: 300px;

    div {
      width: 185px;
      height: 185px;
      border-radius: 50%;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      transform: rotate(-45deg);
      box-shadow: 0 0 27px rgba(0, 0, 0, 0.17);

      img {
        width: 130px;
        height: 130px;
      }
    }
  }

  .form {
    background: #fff;
    border-radius: 66px;
    padding: 60px;

    .title {
      margin-top: 150px;
      margin-bottom: 50px;
      text-align: center;

      div {
        &:nth-child(1) {
          font-weight: bold;
          font-size: 50px;
        }

        &:nth-child(2) {
          color: #656565;
          font-size: 30px;
          margin-top: 30px;
        }
      }
    }

    :deep {
      .van-field__label {
        color: #333;
        font-size: 36px;
        font-weight: bold;
      }
    }
  }

  .loginbtn {
    margin: var(--van-cell-group-inset-padding);
    background: #1082ff;
    color: #fff;
    font-size: 40px;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 50px;
    margin-top: 100px;
  }
}
</style>