oa/src/pages/auth/login/Login.vue

<template>
  <form @submit.prevent="onsubmit">
    <va-input
      v-model="email"
      class="mb-4"
      type="email"
      :label="'用户名'"
      :error="email.length == 0"
      :error-messages="emailErrors"
    />

    <va-input
      v-model="password"
      class="mb-4"
      type="password"
      :label="'密码'"
      :error="password.length == 0"
      :error-messages="passwordErrors"
    />
    <div class="captchaBox">
      <va-input
        v-model="captcha"
        class="mb-4"
        type="text"
        :label="'验证码'"
        :error="captcha.length == 0"
        :error-messages="passwordErrors"
      />
      <img class="captchaImg" @click="getCaptcha" :src="img" alt="" />
    </div>
    <div class="auth-layout__options flex items-center justify-between">
      <va-checkbox v-model="keepLoggedIn" class="mb-0" :label="'记住我'" />
      <!--      <router-link class="ml-1 va-link" :to="{ name: 'recover-password' }">{{-->
      <!--        t('auth.recover_password')-->
      <!--      }}</router-link>-->
    </div>
    <VaInnerLoading :loading="loading">
      <div class="flex justify-center mt-4">
        <va-button class="my-0" @click="onsubmit">{{ t('auth.login') }}</va-button>
      </div>
    </VaInnerLoading>
  </form>
</template>
<style>
  .captchaBox {
    position: relative;
  }
  .captchaImg {
    position: absolute;
    right: 2px;
    top: 18px;
    cursor: pointer;
  }
</style>
<script setup lang="ts">
  import { getCurrentInstance } from 'vue'
  const { proxy } = getCurrentInstance()
  const { $api, $toast } = proxy

  import { computed, ref, onMounted } from 'vue'
  import { useRouter } from 'vue-router'
  import { useI18n } from 'vue-i18n'
  import { useToast } from 'vuestic-ui'
  const { t } = useI18n()

  const img = ref('')
  const captcha = ref('')
  const email = ref('')
  const loading = ref(false)
  const password = ref('')
  const keepLoggedIn = ref(false)
  const emailErrors = ref<string[]>([])
  const passwordErrors = ref<string[]>([])
  const captchaErrors = ref<string[]>([])
  const router = useRouter()

  onMounted(() => {
    getCaptcha()
  })
  function getCaptcha() {
    $api.getCaptcha().then((res) => {
      img.value = res.result
    })
  }
  function onsubmit() {
    emailErrors.value = email.value ? [] : ['Email is required']
    passwordErrors.value = password.value ? [] : ['Password is required']
    captchaErrors.value = captcha.value ? [] : ['Password is required']
    if (email.value == '' || password.value == '' || captcha.value == '') {
      alert(888)
      return
    }
    loading.value = true
    let params = {
      userName: email.value,
      password: password.value,
      captcha: captcha.value,
      rememberMe: keepLoggedIn.value,
    }
    $api
      .login(params)
      .then((res) => {
        localStorage.setItem('tokenName',res.result.tokenName)
        localStorage.setItem('tokenValue',res.result.tokenValue)
        loading.value = false
        $toast.success({ message: '登录成功' })
        setTimeout(() => {
          router.push({ name: 'dashboard' })
        }, 1000)
      })
      .catch((err) => {
        loading.value = false
      })
  }
</script>