operation-Backend/src/components/LoginForm/index.vue

<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
import useUserStore from '@/store/modules/user'
import { ref, useTemplateRef, onMounted } from 'vue'

defineOptions({
  name: 'LoginForm',
})

const props = defineProps<{
  userName?: string
  passWord?: string
  captcha?: string
  system?: string
  captchaId?: number
}>()

const emits = defineEmits<{
  onLogin: [userName: string]
  onRegister: [userName: string]
  onResetPassword: [userName: string]
}>()

const userStore = useUserStore()
const title = import.meta.env.VITE_APP_TITLE
const baseurl = import.meta.env.VITE_APP_API_BASEURL
const loading = ref(false)
const remember = ref(false)
const captchaSrc = ref("")//验证码图片
// const system = ref([
//   'PLATFORM',
//   'JZG'
// ])
// 登录方式，default 账号密码登录，qrcode 扫码登录
const type = ref('default')
const formRef = useTemplateRef<FormInstance>('formRef')
const form = ref({
  userName: props.userName ?? localStorage.login_account ?? '',
  passWord: '',
  captcha: "",
  system: "PLATFORM",
  captchaId: 0,
})
const rules = ref<FormRules>({
  userName: [
    { required: true, trigger: 'blur', message: '请输入用户名' },
  ],
  passWord: [
    { required: true, trigger: 'blur', message: '请输入密码' },
    { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' },
  ],
})
onMounted(() => {
  refreshCaptcha()
})
//获取验证码接口
function refreshCaptcha() {
  let randnum = Math.floor(Math.random() * (1000000 - 1 + 1)) + 1;
  captchaSrc.value =
    baseurl +
    "/auth/captchaById?t=" +
    new Date().getTime() +
    "&captchaId=" +
    randnum;
  form.value.captchaId = randnum;
}
function handleLogin() {
  formRef.value?.validate((valid) => {
    if (valid) {
      loading.value = true
      userStore.login(form.value).then(() => {
        if (remember) {
          localStorage.setItem('login_account', form.value.userName)
        }
        else {
          localStorage.removeItem('login_account')
        }
        emits('onLogin', form.value.userName)
      }).finally(() => {
        loading.value = false
        refreshCaptcha();

      })
    }
  })
}

function testAccount(userName: string) {
  form.value.userName = userName
  form.value.passWord = '123456'
  handleLogin()
}
</script>

<template>
  <ElForm ref="formRef" :model="form" :rules="rules" class="min-h-500px w-full flex-col-stretch-center p-12"
    size="large">
    <div class="mb-6">
      <HTabList v-model="type" :options="[
        { label: '账号密码登录', value: 'default' },
        { label: '扫码登录', value: 'qrcode' },
      ]" />
    </div>
    <template v-if="type === 'default'">
      <h3 class="mb-8 text-xl color-[var(--el-text-color-primary)] font-bold">
        欢迎使用 {{ title }} ! 👋🏻
      </h3>
      <div>
        <ElFormItem prop="userName">
          <ElInput v-model="form.userName" placeholder="用户名" type="text" tabindex="1">
            <template #prefix>
              <SvgIcon name="i-ri:user-3-fill" />
            </template>
          </ElInput>
        </ElFormItem>
        <ElFormItem prop="passWord">
          <ElInput v-model="form.passWord" type="password" placeholder="密码" tabindex="2" show-password
            @keyup.enter="handleLogin">
            <template #prefix>
              <SvgIcon name="i-ri:lock-2-fill" />
            </template>
          </ElInput>
        </ElFormItem>

        <ElFormItem prop="captcha">
          <ElCol :md="14" :sm="14" :xs="14">
            <ElInput v-model="form.captcha" placeholder="验证码" type="text" tabindex="3">
              <template #prefix>
                <SvgIcon name="i-ri:user-3-fill" />
              </template>
            </ElInput>
          </ElCol>
          <ElCol :md="10" :sm="10" :xs="10" flex>
            <img style="width: 100%; height: 32px; margin-left: 20px;" class="pointer" :src="captchaSrc"
              @click="refreshCaptcha" />
          </ElCol>
        </ElFormItem>
      </div>
      <div class="mb-4 flex-center-between">
        <ElCheckbox v-model="remember">
          记住密码
        </ElCheckbox>
        <ElLink type="primary" :underline="false" @click="emits('onResetPassword', form.userName)">
          忘记密码了?
        </ElLink>
      </div>
      <ElButton :loading="loading" type="primary" size="large" style="width: 100%;" @click.prevent="handleLogin">
        登录
      </ElButton>
      <div class="mt-4 flex-center gap-2 text-sm color-[var(--el-text-color-secondary)]">
        还没有帐号?
        <ElLink type="primary" :underline="false" @click="emits('onRegister', form.userName)">
          创建新帐号
        </ElLink>
      </div>
    </template>
    <template v-else-if="type === 'qrcode'">
      <div class="flex-col-center">
        <el-image src="https://s2.loli.net/2024/04/26/GsahtuIZ9XOg5jr.png" class="h-[250px] w-[250px]" />
        <div class="mt-2 op-50">
          请使用微信扫码登录
        </div>
      </div>
    </template>
    <div class="mt-4 text-center -mb-4">
      <ElDivider>演示账号一键登录</ElDivider>
      <ElButton type="primary" size="small" plain @click="testAccount('admin')">
        admin
      </ElButton>
      <ElButton size="small" plain @click="testAccount('test')">
        test
      </ElButton>
    </div>
  </ElForm>
</template>