index.vue

<template>
  <div class="lock-page">
    <div class="lock-page__entry">
      <div class="lock-page__header">
        <img src="../../../assets/images/header.jpg" class="lock-page__header-img" />
        <p class="lock-page__header-name">{{ realName }}</p>
      </div>
      <BasicForm @register="register" v-if="!getIsNotPwd" />
      <Alert v-if="errMsgRef" type="error" message="锁屏密码错误" banner />
      <div class="lock-page__footer">
        <a-button type="default" class="mt-2 mr-2" @click="goLogin" v-if="!getIsNotPwd">
          返回登录
        </a-button>
        <a-button type="primary" class="mt-2" @click="unLock(!getIsNotPwd)" :loading="loadingRef">
          进入系统
        </a-button>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  // 组件相关
  import { defineComponent, ref, computed } from 'vue';
  import { Alert } from 'ant-design-vue';
  // hook
  import { BasicForm, useForm } from '/@/components/Form';

  import { userStore } from '/@/store/modules/user';
  import { appStore } from '/@/store/modules/app';
  export default defineComponent({
    name: 'LockPage',
    components: { Alert, BasicForm },

    setup() {
      // 获取配置文件
      // 样式前缀
      const loadingRef = ref(false);
      const errMsgRef = ref(false);
      const [register, { validateFields }] = useForm({
        showActionButtonGroup: false,
        schemas: [
          {
            field: 'password',
            label: '',
            component: 'InputPassword',
            componentProps: {
              style: { width: '100%' },
              placeholder: '请输入锁屏密码或者用户密码',
            },
            rules: [{ required: true }],
          },
        ],
      });
      const realName = computed(() => {
        const { realName } = userStore.getUserInfoState || {};
        return realName;
      });
      /**
       * @description: unLock
       */
      async function unLock(valid = true) {
        let password = '';
        if (valid) {
          try {
            const values = (await validateFields()) as any;
            password = values.password;
          } catch (error) {
            return;
          }
        }
        try {
          loadingRef.value = true;
          const res = await appStore.unLockAction({ password, valid });
          errMsgRef.value = !res;
        } finally {
          loadingRef.value = false;
        }
      }
      function goLogin() {
        userStore.loginOut(true);
        appStore.resetLockInfo();
      }
      const getIsNotPwd = computed(() => {
        if (!appStore.getLockInfo) {
          return true;
        }
        return appStore.getLockInfo.pwd === undefined;
      });
      // 账号密码登录
      return {
        register,
        getIsNotPwd,
        goLogin,
        realName,
        unLock,
        errMsgRef,
        loadingRef,
      };
    },
  });
</script>
<style lang="less" scoped>
  @import (reference) '../../../design/index.less';

  .lock-page {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    display: flex;
    width: 100vw;
    height: 100vh;
    background: url(../../../assets/images/lock-page.jpg) no-repeat;
    background-size: 100% 100%;
    align-items: center;
    justify-content: flex-end;

    &__entry {
      position: relative;
      width: 400px;
      height: 260px;
      padding: 80px 50px 0 50px;
      margin-right: 50px;
      background: #fff;
      border-radius: 6px;
    }

    &__header {
      position: absolute;
      top: -35px;
      left: calc(50% - 45px);
      width: auto;
      text-align: center;

      &-img {
        width: 70px;
        border-radius: 50%;
      }

      &-name {
        margin-top: 5px;
      }
    }

    &__footer {
      text-align: center;
    }
  }
</style>