minnan-collect-web/src/pages/login.vue

<template>
  <!-- 登录页 -->
  <div class="login main-background main-background-type0">
    <div class="nav-placeholder"></div>
    <!-- 表单 -->
    <section class="main-section ">
      <div class="content">
        <div class="title">
          <h2>登录</h2>
        </div>
        <div class="form-container">
          <DynamicForm 
            ref="form"
            :model="formModel" 
            :options="formOptions"
          />
          <a-button type="primary" block @click="handleSubmit">登录</a-button>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import type { SimpleSelectFormItemProps } from '@imengyu/imengyu-web-shared';
import { useAuthStore } from '@/stores/auth';
import { waitTimeOut } from '@imengyu/imengyu-utils';
import { DynamicForm, type IDynamicFormOptions, type IDynamicFormRef } from '@imengyu/vue-dynamic-form';
import { message, Modal, type FormInstance } from 'ant-design-vue';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const form = ref<IDynamicFormRef>();
const formModel = ref({
  mobile: '',
  password: '',
  account: '',
  type: 0,
});
const formOptions = ref<IDynamicFormOptions>({
  formLabelCol: { span: 6 },
  formWrapperCol: { span: 24 },
  formAdditionaProps: {
    layout: 'vertical'
  },
  formItems: [
    {
      label: '账号',
      name: 'mobile',
      type: 'text',
      hidden: { callback: (_, m) => (m as any).type == 1 },
      additionalProps: {
        placeholder: '请输入账号'
      },
    },
    {
      label: '账号',
      name: 'account',
      type: 'text',
      hidden: { callback: (_, m) => (m as any).type == 0 },
      additionalProps: {
        placeholder: '请输入账号'
      },
    },
    {
      label: '密码',
      name: 'password',
      type: 'password',
      additionalProps: {
        placeholder: '请输入密码' 
      }
    },
    {
      label: '登录类型',
      name: 'type',
      type: 'radio-value',
      additionalProps: {
        placeholder: '请输入密码',
        options: [
          {
            text: '传承人',
            value: 0,
          },
          {
            text: '管理员',
            value: 1,
          },
        ],
      } as SimpleSelectFormItemProps
    },
  ],
  formRules: {
    mobile: [
      { required: true, message: '请输入账号' },
    ],
    account: [
      { required: true, message: '请输入密码' }
    ],
    password: [
      { required: true, message: '请输入密码' }
    ],
  },
});

const router = useRouter();
const authStore = useAuthStore();

async function handleSubmit() {
  try {
    await (form.value?.getFormRef() as FormInstance).validate();
  } catch {
    return;
  }
  try {
    await authStore.login(
      formModel.value.type == 1 ? formModel.value.account : formModel.value.mobile,
      formModel.value.password,
      formModel.value.type,
    );
    message.success('您已成功登录');
    await waitTimeOut(200);
    if (authStore.loginType == 0) {
      router.push('/inheritor');
    } else {
      router.push('/admin');
    }
  } catch (error) {
    Modal.error({
      title: '登录失败',
      content: '' + error,
    });
  }
}
</script>

<style lang="scss">
.login {
  min-height: calc(100vh - 50px);
}
</style>