DiKongGanZhiPingTai/src/views/sys/login/Login.vue

<template>
  <div class="background">
    <div class="form-div">
      <div class="login-title">
        <div class="logo"></div>
        <div class="interval"></div>
        <div class="title-div">
          <div class="welcome">欢迎登录</div>
          <div class="title">低空数智态势感知平台</div>
        </div>
      </div>
      <div class="login-form">
        <a-form
          :model="formData"
          :rules="getFormRules"
          ref="formRef"
          @keypress.enter="handleLogin">
          <FormItem name="account">
            <div class="form-item-label">账号</div>
            <Input
              class="form-item-account"
              v-model:value="formData.account"
              placeholder="请输入账号"/>
          </FormItem>
          <FormItem name="password">
            <div class="form-item-label">密码</div>
            <InputPassword
              class="form-item-account"
              v-model:value="formData.password"
              placeholder="请输入密码"/>
          </FormItem>
          <div class="checkbox-div">
            <a-checkbox class="rememberMe" v-model:checked="rememberMe">
              <span class="rememberMe-span"> {{ t('sys.login.rememberMe') }}</span>
            </a-checkbox>
            <div class="getPassword">找回密码</div>
          </div>
          <FormItem>
            <div style="display: flex;">
              <a-button
                @click="handleLogin"
                :loading="loading"
                class="submit-button">
                <span>登录</span><ArrowRightOutlined />
              </a-button>
              <a-button
                class="register-button">
                <span>注册</span>
              </a-button>
            </div>
          </FormItem>
        </a-form>
      </div>
    </div>
    <div class="bottom-span">Copyright © 山东慧创信息科技有限公司 </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import { useFormRules, useFormValid } from './useLogin';
  import { useUserStore } from '@/store/modules/user';
  import { useMessage } from '@/hooks/web/useMessage';
  import { useI18n } from '@/hooks/web/useI18n';
  import { Form, Input, } from 'ant-design-vue';
  import { ArrowRightOutlined } from '@ant-design/icons-vue';
  const FormItem = Form.Item;
  const InputPassword = Input.Password;
  const { t } = useI18n();
  const { notification, createErrorModal } = useMessage();
  const userStore = useUserStore();
  const formRef = ref();
  const { getFormRules } = useFormRules();
  const { validForm } = useFormValid(formRef);
  const formData = reactive({
    account: '',
    password: '',
  });
  const loading = ref(false);
  const rememberMe = ref(false);
  async function handleLogin() {
    const data = await validForm();
    if (!data) return;
    try {
      loading.value = true;
      const userInfo = await userStore.login({
        password: data.password,
        account: data.account,
        mode: 'none', //不要默认的错误提示
      });
      console.log(userInfo);
      localStorage.setItem('fireUserLoginName', userInfo.name);
      if (userInfo) {
        localStorage.setItem('userid', userInfo.id);
        notification.success({
          message: t('sys.login.loginSuccessTitle'),
          description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.name}`,

          duration: 3,
        });
      }
    } catch (error) {
      createErrorModal({
        title: t('sys.api.errorTip'),
        content: (error as unknown as Error).message || t('sys.api.networkExceptionMsg'),
      });
    } finally {
      loading.value = false;
    }
  }
</script>
<style lang="scss">
.background{
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url('/public/login/login_background.png');
  background-size: cover; 
  background-position: center; 
  background-repeat: no-repeat;
  .form-div{
    position: absolute;
    top: 275px;
    left: 262px;
    width: 436px;
    .login-title{
      display: flex;
      align-items: center;
      height: 86px;
      margin-bottom: 16px;
      user-select: none;
      .logo{
        width: 82px;
        height: 73px;
        background-image: url('/public/login/login_logo.png');
        background-size: 100% 100%;
        margin-right: 20px;
      }
      .interval{
        width: 2px;
        height: 70px;
        background: #FFFFFF;
        margin-right: 22px;
      }
      .title-div{
        .welcome{
          font-family: PingFangSC-Semibold;
          // font-weight: 600;
          font-size: 32px;
          color: #FFFFFF;
          line-height: 43px;
        }
        .title{
          font-family: PingFangSC-Semibold;
          // font-weight: 600;
          font-size: 25px;
          color: #FFFFFF;
          line-height: 43px;
        }
      }
    }
    .login-form{
      .form-item-label{
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 16px;
        color: #FFFFFF;
        line-height: 28px;
        margin-bottom: 8px;
        user-select: none;
      }
      .form-item-account{
        height: 44px;
      }
      .checkbox-div{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 44px;
        user-select: none;
        .rememberMe{
          .rememberMe-span{
            font-family: PingFangSC-Regular;
            font-weight: 400;
            font-size: 16px;
            color: #FFFFFF;
            line-height: 28px;
          }
        }
        .getPassword{
          font-family: PingFangSC-Regular;
          font-weight: 400;
          font-size: 16px;
          color: #3A57E8;
          line-height: 28px;
          cursor: pointer;
        }
      }
      .submit-button{
        width: 211px;
        height: 44px;
        background: #3A57E8;
        border-radius: 4px;
        border: 0px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 18px;
        color: #FFFFFF;
        line-height: 28px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 15px;
      }
      .register-button{
        width: 211px;
        height: 44px;
        background: #FFFFFF;
        border-radius: 4px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 18px;
        color: #000000;
        line-height: 28px;
      }
    }
  }
  .bottom-span{
    position: absolute;
    bottom: 55px;
    left: 50%;
    transform: translateX(-50%);
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 16px;
    color: #8A92A6;
    line-height: 22px;
    user-select: none;
  }
}
</style>