refactor(deps): migrate to nuxt v4
This commit is contained in:
173
app/pages/user/register.vue
Normal file
173
app/pages/user/register.vue
Normal file
@@ -0,0 +1,173 @@
|
||||
<script lang="ts" setup>
|
||||
import type { FormSubmitEvent } from '#ui/types'
|
||||
import { object, string, type InferType } from 'yup'
|
||||
|
||||
definePageMeta({
|
||||
layout: 'authenticate',
|
||||
})
|
||||
|
||||
useSeoMeta({
|
||||
title: '注册',
|
||||
})
|
||||
|
||||
const router = useRouter()
|
||||
const toast = useToast()
|
||||
const loginState = useLoginState()
|
||||
|
||||
const final_loading = ref(false)
|
||||
|
||||
const registerState = reactive({
|
||||
username: '',
|
||||
password: '',
|
||||
mobile: '',
|
||||
company: '',
|
||||
})
|
||||
|
||||
const registerSchema = object({
|
||||
username: string().required('请输入用户名'),
|
||||
password: string().required('请输入新密码').min(6, '密码长度至少为6位'),
|
||||
mobile: string()
|
||||
.required('请输入手机号')
|
||||
.matches(/^1[3-9]\d{9}$/, '手机号格式不正确'),
|
||||
company: string().required('请输入公司/单位名称'),
|
||||
})
|
||||
|
||||
type RegisterSchema = InferType<typeof registerSchema>
|
||||
|
||||
const onSubmit = (form: RegisterSchema) => {
|
||||
final_loading.value = true
|
||||
useFetchWrapped<Partial<UserSchema>, BaseResponse<{ user_id: number }>>(
|
||||
'App.User_User.Register',
|
||||
{
|
||||
...registerState,
|
||||
}
|
||||
).then(
|
||||
(res) => {
|
||||
final_loading.value = false
|
||||
if (res) {
|
||||
toast.add({
|
||||
title: '注册成功',
|
||||
description: '请联系客服激活账号后登录',
|
||||
color: 'green',
|
||||
icon: 'i-tabler-check',
|
||||
})
|
||||
router.push('/user/authenticate')
|
||||
}
|
||||
},
|
||||
(err) => {
|
||||
final_loading.value = false
|
||||
toast.add({
|
||||
title: '注册失败',
|
||||
description: err.message || '注册失败,请稍后再试',
|
||||
color: 'red',
|
||||
icon: 'i-tabler-alert-triangle',
|
||||
})
|
||||
}
|
||||
)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full min-h-screen flex flex-col justify-center items-center">
|
||||
<div class="flex flex-col items-center py-12 gap-2">
|
||||
<h1 class="text-3xl font-bold text-gray-900 dark:text-white">
|
||||
AIGC 微课视频研创平台
|
||||
</h1>
|
||||
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">账号注册</p>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<UCard
|
||||
@submit.prevent="() => onSubmit(registerState)"
|
||||
class="w-full sm:w-[400px]"
|
||||
>
|
||||
<!-- <template #header>
|
||||
<p
|
||||
class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
|
||||
>
|
||||
{{ item.label }}
|
||||
</p>
|
||||
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
||||
{{ item.description }}
|
||||
</p>
|
||||
</template> -->
|
||||
|
||||
<div class="space-y-3">
|
||||
<UFormGroup
|
||||
label="姓名"
|
||||
name="username"
|
||||
help="请使用姓名作为用户名,将用于登录"
|
||||
required
|
||||
>
|
||||
<UInput
|
||||
v-model="registerState.username"
|
||||
:disabled="final_loading"
|
||||
required
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="密码"
|
||||
name="password"
|
||||
required
|
||||
>
|
||||
<UInput
|
||||
v-model="registerState.password"
|
||||
:disabled="final_loading"
|
||||
type="password"
|
||||
required
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="手机号"
|
||||
name="mobile"
|
||||
required
|
||||
>
|
||||
<UInput
|
||||
v-model="registerState.mobile"
|
||||
:disabled="final_loading"
|
||||
required
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="公司/单位"
|
||||
name="company"
|
||||
required
|
||||
>
|
||||
<UInput
|
||||
v-model="registerState.company"
|
||||
:disabled="final_loading"
|
||||
required
|
||||
/>
|
||||
</UFormGroup>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex items-center justify-between">
|
||||
<UButton
|
||||
type="submit"
|
||||
color="black"
|
||||
:loading="final_loading"
|
||||
>
|
||||
注册
|
||||
</UButton>
|
||||
</div>
|
||||
</template>
|
||||
</UCard>
|
||||
</div>
|
||||
<div class="pt-4">
|
||||
<UButton
|
||||
color="gray"
|
||||
variant="ghost"
|
||||
class="!text-gray-500"
|
||||
@click="
|
||||
() => {
|
||||
router.push('/user/authenticate')
|
||||
}
|
||||
"
|
||||
>
|
||||
已有账号,前往登录
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
Reference in New Issue
Block a user