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: "KK123",
  captchaId: 0,
  systemCode: "",
});
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);
          // userStore.getMenu({systemCode:form.value.system}).then((res:any)=>{
          //   console.log(res)
          // })
        })
        .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;
}

.title1 {
  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 {
  font-weight: 400;
  font-size: 20px;
  color: #fff;
  height: 50px;
  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="title1 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" maxlength="11">
            <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" style="color: #666;"> <span style="font-size: 14px;">记住账号</span></ElCheckbox>
        <ElLink  style="font-size: 14px;color: #3275FF;" :underline="false" @click="emits('onResetPassword', form.userName)">
          忘记密码
        </ElLink>
      </div>
      <ElButton class="loginCSS" text bg :loading="loading" @keydown.enter="handleEnter"
        @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>