xpyy-scm/src/pages/login/login-info/index.vue

<script setup lang="ts">
import userIcon from '@assets/images/login/user.webp';
import posswordIcon from '@assets/images/login/passowrd.webp';
import enterpriseIcon from '@assets/images/login/enterprise.webp';
import {PreviewOpen, PreviewCloseOne} from '@icon-park/vue-next';
import {useToggle} from '@vueuse/core';
import {RouterLink} from 'vue-router';
import {useI18n} from 'vue-i18n';
import {LDButton, LDLoginInput} from '@components';
import {REGISTER_PATH} from '@routes';
import {useFormState} from './hooks';
import {USER_PASSWORD_LOGIN_STORAGE} from '@utils';

defineOptions({name: 'LoginInfo'});

const [remberPassword, toggleRemberPassword] = useToggle(
  Boolean(localStorage.getItem(USER_PASSWORD_LOGIN_STORAGE)),
);

const {t} = useI18n();

const [{isLoading, isCompanyLoading}, onSubmit] = useFormState(remberPassword);
</script>

<template>
  <form @submit="onSubmit">
    <div class="login-info">
      <h2 class="login-title">Login</h2>

      <div class="info">
        <LDLoginInput
          name="name"
          :placeholder="t('login.placeholder.userName')"
        >
          <template #prefix>
            <img :src="userIcon" class="input-icon" />
          </template>
        </LDLoginInput>

        <LDLoginInput
          name="password"
          :placeholder="t('login.placeholder.password')"
          type="password"
        >
          <template #prefix>
            <img :src="posswordIcon" class="input-icon" />
          </template>
          <template #passwordInvisibleIcon>
            <PreviewCloseOne theme="filled" />
          </template>
          <template #passwordvisibleIcon>
            <PreviewOpen theme="filled" />
          </template>
        </LDLoginInput>

        <LDLoginInput
          name="company"
          readonly
          :placeholder="t('login.placeholder.company')"
          :loading="isCompanyLoading"
        >
          <template #prefix>
            <img :src="enterpriseIcon" class="input-icon" />
          </template>
        </LDLoginInput>

        <div class="operation">
          <span
            :class="{'rember-password': remberPassword}"
            @click="toggleRemberPassword(!remberPassword)"
          >
            {{t('login.remberPassword')}}
          </span>
          <span>{{t('login.forgetPassword')}}</span>
        </div>

        <LDButton class="login-btn" attrType="submit" :loading="isLoading">
          {{t('login.loginBtnText')}}
        </LDButton>
      </div>

      <RouterLink :to="REGISTER_PATH" class="regist">
        {{t('login.regist')}}
      </RouterLink>
    </div>
  </form>
</template>

<style scoped lang="css">
@import './index.css';
</style>