ruoyi-plus-vben5/packages/effects/common-ui/src/ui/authentication/code-login.vue

109 lines
2.2 KiB
Vue
Raw Normal View History

2024-05-19 21:20:42 +08:00
<script setup lang="ts">
import type { VbenFormSchema } from '@vben-core/form-ui';
import type { LoginCodeEmits } from './types';
2024-05-19 21:20:42 +08:00
import { computed, reactive } from 'vue';
2024-05-19 21:20:42 +08:00
import { useRouter } from 'vue-router';
import { $t } from '@vben/locales';
import { useVbenForm } from '@vben-core/form-ui';
import { VbenButton } from '@vben-core/shadcn-ui';
2024-05-19 21:20:42 +08:00
2024-06-08 19:49:06 +08:00
import Title from './auth-title.vue';
2024-05-19 21:20:42 +08:00
interface Props {
formSchema: VbenFormSchema[];
2024-05-19 21:20:42 +08:00
/**
* @zh_CN 是否处于加载处理状态
*/
loading?: boolean;
/**
* @zh_CN 登陆路径
*/
loginPath?: string;
/**
* @zh_CN 标题
*/
title?: string;
/**
* @zh_CN 描述
*/
subTitle?: string;
/**
* @zh_CN 按钮文本
*/
submitButtonText?: string;
2024-05-19 21:20:42 +08:00
}
defineOptions({
name: 'AuthenticationCodeLogin',
});
const props = withDefaults(defineProps<Props>(), {
2024-05-19 21:20:42 +08:00
loading: false,
loginPath: '/auth/login',
submitButtonText: '',
subTitle: '',
title: '',
2024-05-19 21:20:42 +08:00
});
const emit = defineEmits<{
submit: LoginCodeEmits['submit'];
}>();
const router = useRouter();
const [Form, { validate }] = useVbenForm(
reactive({
commonConfig: {
hideLabel: true,
hideRequiredMark: true,
},
schema: computed(() => props.formSchema),
showDefaultActions: false,
}),
);
async function handleSubmit() {
const { valid, values } = await validate();
if (valid) {
emit('submit', {
code: values?.code,
phoneNumber: values?.phoneNumber,
});
2024-05-19 21:20:42 +08:00
}
}
function goToLogin() {
router.push(props.loginPath);
2024-05-19 21:20:42 +08:00
}
</script>
<template>
<div>
<Title>
<slot name="title">
{{ title || $t('authentication.welcomeBack') }} 📲
</slot>
2024-05-19 21:20:42 +08:00
<template #desc>
<span class="text-muted-foreground">
<slot name="subTitle">
{{ subTitle || $t('authentication.codeSubtitle') }}
</slot>
2024-05-19 21:20:42 +08:00
</span>
</template>
</Title>
<Form />
<VbenButton :loading="loading" class="w-full" @click="handleSubmit">
<slot name="submitButtonText">
{{ submitButtonText || $t('common.login') }}
</slot>
2024-05-19 21:20:42 +08:00
</VbenButton>
<VbenButton class="mt-4 w-full" variant="outline" @click="goToLogin()">
2024-05-19 21:20:42 +08:00
{{ $t('common.back') }}
</VbenButton>
</div>
</template>