174 lines
4.3 KiB
Vue
174 lines
4.3 KiB
Vue
<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>
|