feat: 添加注册页面,更新路由配置和表单验证逻辑
This commit is contained in:
@@ -1,13 +1,27 @@
|
||||
import type { RouteRecordRaw } from "vue-router";
|
||||
|
||||
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",
|
||||
component: () => import("@/views/auth/login/index.vue"),
|
||||
},
|
||||
{
|
||||
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
9
src/views/auth/index.vue
Normal file
@@ -0,0 +1,9 @@
|
||||
<script lang='ts' setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<IonRouterOutlet />
|
||||
</template>
|
||||
|
||||
<style lang='css' scoped></style>
|
||||
@@ -111,7 +111,7 @@ onUnmounted(() => {
|
||||
|
||||
<template>
|
||||
<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">
|
||||
<ui-input
|
||||
v-bind="field"
|
||||
@@ -137,8 +137,8 @@ onUnmounted(() => {
|
||||
</span>
|
||||
</ion-button>
|
||||
</ui-input>
|
||||
<div v-if="errors[0] || emailError" class="text-xs text-red-500 mt-1">
|
||||
{{ errors[0] || emailError }}
|
||||
<div v-if="errorMessage || emailError" class="text-xs text-red-500 mt-1">
|
||||
{{ errorMessage || emailError }}
|
||||
</div>
|
||||
</div>
|
||||
</Field>
|
||||
|
||||
@@ -34,7 +34,7 @@ async function handleSignInPhoneNumber(value: PhoneNumberVerifyClient) {
|
||||
<IonHeader class="ion-no-border">
|
||||
<IonToolbar class="ui-toolbar">
|
||||
<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') }}
|
||||
</ion-button>
|
||||
</IonToolbar>
|
||||
|
||||
35
src/views/auth/signup/index.vue
Normal file
35
src/views/auth/signup/index.vue
Normal 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>
|
||||
Reference in New Issue
Block a user