minnan/src/pages/collect/login.vue

<template>
  <FlexCol gap="gap.xl" padding="space.lg">
    <FlexCol center>
      <Text fontConfig="h2">传承人登录</Text>
      <Text fontConfig="subText">欢迎使用非遗数字化资源信息校对系统</Text>
    </FlexCol>
    <FlexCol radius="radius.md" backgroundColor="white" overflow="hidden">
      <DynamicForm
        ref="formRef"
        :model="formModel"
        :options="formDefine"
      />
    </FlexCol>
    <FlexCol gap="gap.md">
      <Button type="primary" block :loading="loading" @click="handleSubmit">
        登录
      </Button>
      <Button block @click="back()">
        返回
      </Button>
    </FlexCol>
    <XBarSpace />
  </FlexCol>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useAuthStore } from '@/store/auth';
import { showError } from '@/common/composeabe/ErrorDisplay';
import { toast } from '@/components/utils/DialogAction';
import Button from '@/components/basic/Button.vue';
import XBarSpace from '@/components/layout/space/XBarSpace.vue';
import DynamicForm from '@/components/dynamic/DynamicForm.vue';
import type { IDynamicFormOptions, IDynamicFormRef } from '@/components/dynamic';
import type { FormProps } from '@/components/form/Form.vue';
import type { RadioValueProps } from '@/components/dynamic/wrappers/RadioValue';
import { back, redirectTo } from '@/components/utils/PageAction';
import FlexCol from '@/components/layout/FlexCol.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Text from '@/components/basic/Text.vue';

const authStore = useAuthStore();
const formRef = ref<IDynamicFormRef>();
const loading = ref(false);

const formModel = ref({
  mobile: '',
  account: '',
  password: '',
  type: 0,
});

const formDefine: IDynamicFormOptions = {
  formAdditionaProps: {
    labelFlex: 4,
    inputFlex: 8,
  } as FormProps,
  formRules: {
    mobile: [{ required: true, message: '请输入账号' }],
    account: [{ required: true, message: '请输入账号' }],
    password: [{ required: true, message: '请输入密码' }],
  },
  formItems: [
    {
      label: '账号',
      name: 'mobile',
      type: 'text',
      defaultValue: '',
      show: { callback: (_, m) => (m as { type: number }).type === 0 },
      additionalProps: {
        placeholder: '请输入账号',
      },
    },
    {
      label: '账号',
      name: 'account',
      type: 'text',
      defaultValue: '',
      show: { callback: (_, m) => (m as { type: number }).type === 1 },
      additionalProps: {
        placeholder: '请输入账号',
      },
    },
    {
      label: '密码',
      name: 'password',
      type: 'text',
      defaultValue: '',
      formProps: {
        type: 'password',
      },
      additionalProps: {
        placeholder: '请输入密码',
      },
    },
    /* {
      label: '登录类型',
      name: 'type',
      type: 'radio-value',
      defaultValue: 0,
      additionalProps: {
        options: [
          { text: '传承人', value: 0 },
          { text: '管理员', value: 1 },
        ],
      } as RadioValueProps,
    }, */
  ],
};

async function handleSubmit() {
  if (!formRef.value)
    return;
  try {
    await formRef.value.validate();
  } catch {
    uni.showToast({
      title: '有必填项未填写，请检查',
      icon: 'none',
    });
    return;
  }

  const loginType = Number(formModel.value.type);
  const account =
    loginType === 1
      ? formModel.value.account.trim()
      : formModel.value.mobile.trim();
  if (!account) {
    uni.showToast({
      title: '请输入账号',
      icon: 'none',
    });
    return;
  }

  loading.value = true;
  try {
    await authStore.loginCollect(account, formModel.value.password, loginType);
    toast('您已成功登录');
    await new Promise((r) => setTimeout(r, 200));
    if (authStore.loginType === 0) {
      uni.redirectTo({ url: '/pages/collect/inheritor' });
    } else {
      uni.switchTab({ url: '/pages/user/index' });
    }
  } catch (e) {
    showError(e);
  } finally {
    loading.value = false;
  }
}

onMounted(() => {
  if (authStore.isLogged && authStore.isCollect) {
    redirectTo('/pages/collect/inheritor');
  }
});
</script>

<style lang="scss">
</style>