tenant-Platform/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,onUnmounted } 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,
  system: "",
});
const rules = ref<FormRules>({
  userName: [{ required: true, trigger: "blur", message: "请输入用户名" }],
  system: [{ required: true, trigger: "blur", message: "请输入租户编码" }],
  passWord: [
    { required: true, trigger: "blur", message: "请输入密码" },
    { min: 6, max: 18, trigger: "blur", message: "密码长度为6到18位" },
  ],
});
onMounted(() => {
  refreshCaptcha();
  window.addEventListener('keydown', handleEnter)
});
onUnmounted(() => {
  window.removeEventListener('keydown', handleEnter, false)
})
//获取验证码接口
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 handleEnter (e:any) {
  // console.log(e)
  // console.log(e)
  if (e.keyCode == 13 || e.keyCode == 108) {
    //登录接口逻辑
    handleLogin()
  }
}
function handleLogin() {
  // console.log(123)
  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");
          }
          localStorage.setItem("login_system", form.value.system);
          emits("onLogin", form.value.userName);
        })
        .finally(() => {
          loading.value = false;
          refreshCaptcha();
        });
    }
  });
}

// function testAccount(userName: string) {
//   form.value.userName = userName
//   form.value.passWord = '123456'
//   handleLogin()
// }
</script>
<style lang="scss" scoped>
:deep(.el-form-item--large) {
  margin-bottom: 30px;
}

:deep(.el-input__prefix) {
  color: #3275ff;
}

.title {
  position: relative;
  margin-bottom: 56px;
  font-size: 36px;
  color: #333;

  span {
    position: relative;
    z-index: 9999;
    letter-spacing: 5px;
  }

  .tag {
    position: absolute;
    bottom: 0;
    width: 76px;
    height: 8px;
    background: linear-gradient(90deg, #4fcaff 0%, #2b62ff 100%);
  }
}

.loginCSS {
  padding: 2px;
  font-size: 20px;
  background: linear-gradient(91deg, #4fcaff 0%, #2b62ff 100%);
}
</style>
<template>
  <ElForm
    ref="formRef"
    :model="form"
    :rules="rules"
    class="min-h-500px w-full flex-col-stretch-center"
    style="padding: 81px 75px"
    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 class="title strong">
        <span>登录</span>
        <div class="tag"></div>
      </div>
      <div>
        <ElFormItem prop="system">
          <ElInput
            v-model="form.system"
            placeholder="输入租户编码"
            type="text"
            tabindex="1"
          >
            <template #prefix>
              <el-icon><Postcard /></el-icon>
            </template>
          </ElInput>
        </ElFormItem>
        <ElFormItem prop="userName">
          <ElInput
            v-model="form.userName"
            placeholder="手机号或工号"
            type="text"
            tabindex="1"
          >
            <template #prefix>
              <el-icon><User /></el-icon>
            </template>
          </ElInput>
        </ElFormItem>
        <ElFormItem prop="passWord">
          <ElInput
            v-model="form.passWord"
            type="password"
            placeholder="登录密码"
            tabindex="2"
            show-password
            @keyup.enter="handleLogin"
          >
            <template #prefix>
              <el-icon><Lock /></el-icon>
            </template>
          </ElInput>
        </ElFormItem>

        <ElFormItem prop="captcha" style="margin-bottom: 0">
          <ElCol :md="14" :sm="14" :xs="14">
            <ElInput
              v-model="form.captcha"
              placeholder="验证码"
              type="text"
              tabindex="3"
            >
              <template #prefix>
                <el-icon><CircleCheck /></el-icon>
              </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-17 flex-center-between">
        <ElCheckbox v-model="remember"> 记住密码 </ElCheckbox>
        <ElLink
          type="primary"
          :underline="false"
          @click="emits('onResetPassword', form.userName)"
        >
          忘记密码
        </ElLink>
      </div>
      <ElButton
        class="loginCSS"
        :loading="loading"
        type="primary"
        @keydown.enter="handleEnter"
        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>