SaaS-lib/lib/saas/view/system/login.vue

<!-- @format -->

<template>
  <div style="height: 100%">
    <a-layout style="height: 100%">
      <!-- <a-layout-header class="home_header" style="position: relative"> -->
      <!-- <ns-icon class="test" name="login" size="64" style="width: 220px" /> -->
      <!-- <img v-else :src="themeConfig.logoUrl" style="width: 220px; height: 48px" /> -->
      <!-- </a-layout-header> -->
      <a-layout-content
        class="center-content"
        :style="{
          background: `url(${
            themeConfig.bgImageUrl ? themeConfig.bgImageUrl : '/asset/image/login/background.png'
          })  no-repeat `,
          backgroundSize: 'cover',
        }">
        <div class="lg_card">
          <h1 class="lg_card_title">账号登录</h1>
          <p v-show="!errorShow" style="height: 8px"></p>
          <p v-show="errorShow" class="lg_card_error">{{ errorMsg }}</p>
          <p class="lg_card_tip">用户名/手机号</p>
          <a-input
            placeholder="登录账号"
            v-model:value="userName"
            style="height: 48px; margin-bottom: 20px">
            <template #prefix>
              <ns-icon class="loginIcon" name="userName" size="25" style="margin-right: 5px" />
            </template>
          </a-input>
          <p class="lg_card_tip">密码</p>
          <a-input-password placeholder="登录密码" v-model:value="password" style="height: 48px">
            <template #prefix>
              <ns-icon class="loginIcon" name="passWord" size="25" style="margin-right: 5px" />
            </template>
          </a-input-password>
          <a-button
            @click="submit"
            :loading="loading"
            type="primary"
            style="margin-top: 30px; width: 100%; height: 53px"
            >登录</a-button
          >
        </div>
      </a-layout-content>
      <!-- <a-layout-footer>Copyright 2021 xu科技 All Rights Reserved</a-layout-footer> -->
    </a-layout>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { appConfigStore } from '/nerv-lib/saas/store/modules/app-config';
  import { authorizationService } from '/nerv-base/store/modules/authorization-service';
  import { Cookies } from '/nerv-lib/util/cookie';
  import { storeToRefs } from 'pinia';
  import { http } from '/nerv-lib/util';
  export default defineComponent({
    name: 'UserLogin',
    setup() {
      const url = ref('/asset/image/login/background.png');
      const userName = ref<string>('');
      const password = ref<string>('');
      const logUrl = ref<string>('');
      const bgUrl = ref<string>('');
      const errorMsg = ref<string>('');
      const errorShow = ref<boolean>(false);
      const router = useRouter();
      const title = ref<string>('');
      const initUrl = ref('');
      title.value = '账号登录';
      // title.value = appConfig.title ? appConfig.title : '账号登录';
      const loading = ref<boolean>(false);
      const configStore = appConfigStore();
      const { getThemeConfig: themeConfig } = storeToRefs(configStore);
      const useAuthorization = authorizationService();
      const submit = (): void => {
        if (password.value === '') {
          errorMsg.value = '请输入密码';
          errorShow.value = true;
        }
        if (userName.value === '') {
          errorMsg.value = '请输入账号';
          errorShow.value = true;
        }
        if (userName.value !== '' && password.value !== '') {
          errorShow.value = false;
          let data = JSON.stringify({ accountNo: userName.value, password: password.value });
          // Cookies.set('nervsid', 'mockdata');
          // router.replace({ name: 'root' });

          loading.value = true;
          async function logins() {
            try {
              const res = await configStore.userLogin(JSON.parse(data));
              if (res.data?.token) {
                if (res.data?.token) {
                  Cookies.set('nervsid', res.data?.token);
                }
                const info = await configStore.userInfo();
                info.data
                  ? window.sessionStorage.setItem('userInfo', JSON.stringify(info.data))
                  : '';
                loading.value = false;
                if (configStore.enablePermissions) {
                  const res = await configStore.userResource(info);

                  if (configStore.customApplication) {
                    await useAuthorization.initMenuResource();
                  }

                  initUrl.value = '';
                  const dealInitUrl = (item) => {
                    if (item.type === 'menus' && item.menus && item.menus?.length !== 0) {
                      dealInitUrl(item.menus[0]);
                    } else {
                      // if (item.type === 'noChildrenMenu') {
                      initUrl.value = configStore.resourceName
                        ? item.code.replace(configStore.resourceName, '')
                        : item.code;
                      // }
                    }
                  };
                  if (configStore.resourceName) {
                    const initResource = [];
                    res.data.forEach((item) => {
                      if (item.code.includes(configStore.resourceName)) {
                        initResource.push(item);
                      }
                    });
                    dealInitUrl(initResource[0]);
                  } else {
                    dealInitUrl(res.data[0]);
                  }
                  // dealInitUrl(res.data[0]);
                  useAuthorization.updateUserResource(res.data);
                  const initRouterList = useAuthorization.getInitRouterList;

                  router.push({
                    name: initRouterList.length === 0 ? 'error403' : initUrl.value,
                  });
                } else {
                  router.replace({ name: 'root' });
                }
              }
            } catch (err) {
              loading.value = false;
            }
          }
          logins();
        }
      };
      const checkoutLogo = (): void => {
        logUrl.value = '';
      };
      const checkoutBg = (): void => {
        Math.random() > 0.5
          ? (url.value = 'src/assetimg/background.jpg')
          : (url.value = 'src/assetimg/background.png');
      };
      return {
        title,
        themeConfig,
        url,
        loading,
        userName,
        password,
        submit,
        errorMsg,
        bgUrl,
        logUrl,
        checkoutLogo,
        checkoutBg,
        errorShow,
      };
    },
    created() {
      const _this = this;
      window.sessionStorage.clear();
      document.onkeydown = function (e) {
        const key = window.event === undefined ? e.keyCode : window.event.keyCode;
        key === 13 ? _this.submit() : '';
      };
    },
    beforeUnmount() {
      document.onkeydown = function (e) {};
    },

    mounted() {
      // if (Cookies.get('nervsid') !== undefined) {
      //   this.$router.push('/home');
      // }
    },
  });
</script>

<style lang="less" scoped>
  .home_header {
    height: 64px !important;
    display: flex;
    align-items: center;
  }
  :deep(.center-content) {
    // background: url('/asset/image/login/background.png') center center no-repeat;
    // background-size: cover;

    // background-position-y: -120px;
    margin: 0;
  }
  .icon {
    color: @primary-color !important;
    // background: #000;
    // min-height: 25px;
    // min-width: 25px;
    // display: flex;
    // justify-content: center;
    // align-items: center;
    // border-radius: 50%;
  }

  .lg_card .loginIcon {
    color: @primary-color !important;
  }
  .ant-layout-header {
    min-height: 64px;
    background: #fff !important;
  }

  .ant-layout-content {
    height: calc(100vh - 112px);
    width: 100%;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 100px;
  }

  .ant-layout-footer {
    max-height: 48px;
    min-height: 48px;
    font-size: 14px;
    font-weight: 400;
    color: #8f8f8f;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lg_card {
    width: 385px;
    height: 409px;
    background: #fff;
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 5%), 0 0 18px 0 rgb(0 0 0 / 8%);
    border-radius: 6px;
    margin: 0 30px 0 30px;
    padding: 35px;
    .lg_card_tip {
      color: #a7b6c9;
      margin-bottom: 12px;
    }
  }

  .lg_card .lg_card_title {
    height: 28px;
    font-size: 20px;
    font-weight: bold;
    color: #172e3d;
    line-height: 28px;
    text-align: left;
  }

  .lg_card_error {
    text-align: left;
    color: #e4393c;
    font-size: 14px;
  }
  .lg_card .loginIcon {
    color: @primary-color !important;
  }
</style>