feat: 添加注册页面,更新路由配置和表单验证逻辑
This commit is contained in:
@@ -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
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>
|
<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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
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