11d273cbb6
- 在 CodeLogin 和 QrcodeLogin 组件中添加 showBack 属性 - 根据 showBack 属性决定是否显示返回按钮 - 默认值为 true，即默认显示返回按钮
123 lines
2.4 KiB
Vue
123 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import type { Recordable } from '@vben/types';
|
|
|
|
import type { VbenFormSchema } from '@vben-core/form-ui';
|
|
|
|
import { computed, reactive } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
|
|
import { $t } from '@vben/locales';
|
|
|
|
import { useVbenForm } from '@vben-core/form-ui';
|
|
import { VbenButton } from '@vben-core/shadcn-ui';
|
|
|
|
import Title from './auth-title.vue';
|
|
|
|
interface Props {
|
|
formSchema: VbenFormSchema[];
|
|
/**
|
|
* @zh_CN 是否处于加载处理状态
|
|
*/
|
|
loading?: boolean;
|
|
/**
|
|
* @zh_CN 登录路径
|
|
*/
|
|
loginPath?: string;
|
|
/**
|
|
* @zh_CN 标题
|
|
*/
|
|
title?: string;
|
|
/**
|
|
* @zh_CN 描述
|
|
*/
|
|
subTitle?: string;
|
|
/**
|
|
* @zh_CN 按钮文本
|
|
*/
|
|
submitButtonText?: string;
|
|
/**
|
|
* @zh_CN 是否显示返回按钮
|
|
*/
|
|
showBack?: boolean;
|
|
}
|
|
|
|
defineOptions({
|
|
name: 'AuthenticationCodeLogin',
|
|
});
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
loading: false,
|
|
showBack: true,
|
|
loginPath: '/auth/login',
|
|
submitButtonText: '',
|
|
subTitle: '',
|
|
title: '',
|
|
});
|
|
|
|
const emit = defineEmits<{
|
|
submit: [Recordable<any>];
|
|
}>();
|
|
|
|
const router = useRouter();
|
|
|
|
const [Form, formApi] = useVbenForm(
|
|
reactive({
|
|
commonConfig: {
|
|
hideLabel: true,
|
|
hideRequiredMark: true,
|
|
},
|
|
schema: computed(() => props.formSchema),
|
|
showDefaultActions: false,
|
|
}),
|
|
);
|
|
|
|
async function handleSubmit() {
|
|
const { valid } = await formApi.validate();
|
|
const values = await formApi.getValues();
|
|
if (valid) {
|
|
emit('submit', values);
|
|
}
|
|
}
|
|
|
|
function goToLogin() {
|
|
router.push(props.loginPath);
|
|
}
|
|
|
|
defineExpose({
|
|
getFormApi: () => formApi,
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<Title>
|
|
<slot name="title">
|
|
{{ title || $t('authentication.welcomeBack') }} 📲
|
|
</slot>
|
|
<template #desc>
|
|
<span class="text-muted-foreground">
|
|
<slot name="subTitle">
|
|
{{ subTitle || $t('authentication.codeSubtitle') }}
|
|
</slot>
|
|
</span>
|
|
</template>
|
|
</Title>
|
|
<Form />
|
|
<VbenButton
|
|
:class="{
|
|
'cursor-wait': loading,
|
|
}"
|
|
:loading="loading"
|
|
class="w-full"
|
|
@click="handleSubmit"
|
|
>
|
|
<slot name="submitButtonText">
|
|
{{ submitButtonText || $t('common.login') }}
|
|
</slot>
|
|
</VbenButton>
|
|
<VbenButton v-if="showBack" class="mt-4 w-full" variant="outline" @click="goToLogin()">
|
|
{{ $t('common.back') }}
|
|
</VbenButton>
|
|
</div>
|
|
</template>
|