feat: 添加注册页面,更新路由配置和表单验证逻辑

This commit is contained in:
2025-12-20 21:56:36 +07:00
parent e8278fa957
commit 2e42bbc278
5 changed files with 63 additions and 5 deletions

View File

@@ -1,13 +1,27 @@
import type { RouteRecordRaw } from "vue-router"; import type { RouteRecordRaw } from "vue-router";
const routes: Array<RouteRecordRaw> = [ const routes: Array<RouteRecordRaw> = [
// {
// path: "/auth",
// component: () => import("@/views/auth/index.vue"),
// children: [
// {
// path: "/auth/login",
// component: () => import("@/views/auth/login/index.vue"),
// },
// {
// path: "/auth/signup",
// component: () => import("@/views/auth/signup/index.vue"),
// },
// ],
// },
{ {
path: "/auth/login", path: "/auth/login",
component: () => import("@/views/auth/login/index.vue"), component: () => import("@/views/auth/login/index.vue"),
}, },
{ {
path: "/auth/signup", path: "/auth/signup",
component: () => import("@/auth/components/signup/index.vue"), component: () => import("@/views/auth/signup/index.vue"),
}, },
]; ];

9
src/views/auth/index.vue Normal file
View File

@@ -0,0 +1,9 @@
<script lang='ts' setup>
</script>
<template>
<IonRouterOutlet />
</template>
<style lang='css' scoped></style>

View File

@@ -111,7 +111,7 @@ onUnmounted(() => {
<template> <template>
<Form :validation-schema="schema" class="mt-5" @submit="handleSubmit"> <Form :validation-schema="schema" class="mt-5" @submit="handleSubmit">
<Field v-slot="{ field, errors }" name="email" type="email"> <Field v-slot="{ field, errorMessage }" name="email" type="email">
<div class="mb-4"> <div class="mb-4">
<ui-input <ui-input
v-bind="field" v-bind="field"
@@ -137,8 +137,8 @@ onUnmounted(() => {
</span> </span>
</ion-button> </ion-button>
</ui-input> </ui-input>
<div v-if="errors[0] || emailError" class="text-xs text-red-500 mt-1"> <div v-if="errorMessage || emailError" class="text-xs text-red-500 mt-1">
{{ errors[0] || emailError }} {{ errorMessage || emailError }}
</div> </div>
</div> </div>
</Field> </Field>

View File

@@ -34,7 +34,7 @@ async function handleSignInPhoneNumber(value: PhoneNumberVerifyClient) {
<IonHeader class="ion-no-border"> <IonHeader class="ion-no-border">
<IonToolbar class="ui-toolbar"> <IonToolbar class="ui-toolbar">
<ion-back-button slot="start" /> <ion-back-button slot="start" />
<ion-button slot="end" fill="clear"> <ion-button slot="end" fill="clear" @click="router.push('/auth/signup')">
{{ t('auth.login.signupButton') }} {{ t('auth.login.signupButton') }}
</ion-button> </ion-button>
</IonToolbar> </IonToolbar>

View File

@@ -0,0 +1,35 @@
<script lang='ts' setup>
import { Field, Form } from "vee-validate";
</script>
<template>
<IonPage>
<IonHeader class="ion-no-border">
<IonToolbar class="ui-toolbar">
<ion-back-button slot="start" />
</IonToolbar>
</IonHeader>
<IonContent :fullscreen="true" class="ion-padding">
<div class="text-2xl font-semibold mb-5">
用户注册
</div>
<Form>
<Field v-slot="{ field, errorMessage }" name="email" type="email">
<div class="mb-4">
<ui-input
v-bind="field"
placeholder="请输入邮箱"
type="email"
/>
<div v-if="errorMessage" class="text-xs text-red-500 mt-1">
{{ errorMessage }}
</div>
</div>
</Field>
</Form>
</IonContent>
</IonPage>
</template>
<style lang='css' scoped></style>