brianling/FreePS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(register.vue): Make the register page

Browse Source
This commit is contained in:
漩葵 2024-06-10 02:35:22 +08:00
parent 84f403b393
commit d834378c1c
5 changed files with 57 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
pages/apply/index.vue
View File

@ -5,14 +5,17 @@
<Meta name="description"/>
</Head>
<div style="width:50%;margin:auto;" :style="{
boxShadow: `var(--el-box-shadow-dark)`,
boxShadow: `var(--el-box-shadow-light)`,
}">
<ClientOnly >
<Vueform view="tabs" style="padding:20px" >
<TextElement name="username" label="昵称" placeholder="昵称" :columns="{ container: 4, label: 3, wrapper: 12 }"/>
<PhoneElement name="phone" allow-incomplete unmask default="+86" :include="['cn']" label="手机号" placeholder="+86" :columns="{ container: 12, label: 1, wrapper: 3 }" />
<TextElement name="code" label="验证码" placeholder="xxxxxx" :columns="{ container: 3, label: 4, wrapper: 12 }" />
<ButtonElement name="button" :columns="{ container: 2, label: 3, wrapper: 12 }" button-label="发送验证码"/>
<Vueform endpoint="/api/test" method="POST" view="tabs" style="padding:30px" >
<StaticElement tag="h4" align="center" content="个人信息" name="static" />
<TextElement name="username" label="昵称" placeholder="昵称" :columns="{ container: 4, label: 3, wrapper: 12 }" rules="required|min:3"/>
<PhoneElement name="phone" allow-incomplete unmask default="+86" :include="['cn']" label="手机号" placeholder="+86" :columns="{ container: 12, label: 1, wrapper: 4 }" rules="required"/>
<TextElement name="code" label="验证码" placeholder="xxxxxx" :columns="{ container: 4, label: 3, wrapper: 12 }" rules="required"/>
<ButtonElement name="button" :columns="{ container: 8, label: 3, wrapper: 12 }" button-label="发送验证码"/>
<StaticElement tag="h4" align="center" content="项目详情" name="static" />
<TextElement name="name" label="项目名称" placeholder="项目名称" :columns="{ container: 4, label: 4, wrapper: 12 }" rules="required"/>
<SelectElement
name="select"
default="辽宁一区"
@ -24,6 +27,7 @@
'江西一区',
]"
:columns="{ container: 4, label: 3, wrapper: 12 }"
rules="required"
/>
<RadiogroupElement
default="2 Core"
@ -41,7 +45,7 @@
/>
<SliderElement
name="hhd"
name="disk"
label="磁盘容量"
:default="5"
:min="1"
@ -63,8 +67,10 @@
<ButtonElement name="submit" button-label="提交申请" align="center" size="lg" submits/>
</Vueform>
</ClientOnly>
</div>
</template>
<script setup lang="ts">
import PhoneElemen from '@vueform/vueform'
const form = ref()
</script>

35
pages/register/index.vue
View File

@ -4,12 +4,31 @@
<Title>注册页面</Title>
<Meta name="description"/>
</Head>
<div>
<el-text class="mx-1" type="primary" >
Primary
</el-text>
</div>
</template>
<script setup lang="ts">
<div style="width:50%;margin:auto;" :style="{
boxShadow: `var(--el-box-shadow-light)`,
}">
<ClientOnly >
<Vueform endpoint="/api/test" method="POST" view="tabs" style="padding:30px" >
<StaticElement tag="h4" align="center" content="个人信息" name="static" />
<TextElement name="username" allow-incomplete label="昵称" placeholder="昵称" :columns="{ container: 4, label: 3, wrapper: 8 }" rules="required|min:3|max:64"/>
<PhoneElement input-type="number" name="phone" allow-incomplete unmask default="+86" :include="['cn']" label="手机号" placeholder="+86" :columns="{ container: 12, label: 1, wrapper: 4 }" rules="required|max:6|min:6"/>
<TextElement name="code" label="验证码" placeholder="xxxxxx" :columns="{ container: 4, label: 3, wrapper: 12 }" rules="required"/>
<ButtonElement name="button" :columns="{ container: 8, label: 3, wrapper: 12 }" button-label="发送验证码"/>
<TextElement input-type="password" name="password" label="密码" rules="required|min:8|max:16|confirmed"/>
<TextElement input-type="password" name="password_confirmation" label="确认密码" rules="required|min:8|max:16"/>
<CheckboxElement name="policy" label="用户协议" rules="required" message="您必须同意用户政策才能继续">
已阅读并同意<ElLink href="/" target="_blank">《用户协议》</ElLink>
</CheckboxElement>
<CheckboxElement name="news">
希望获取最新资讯
</CheckboxElement>
<ButtonElement name="submit" button-label="提交申请" align="center" size="lg" submits/>
</Vueform>
</ClientOnly>
</script>
</div>
</template>
<script setup lang="ts">
import PhoneElemen from '@vueform/vueform'
const form = ref()
</script>

6
server/api/test/index.ts
View File

@ -2,6 +2,8 @@ import { PrismaClient } from "@prisma/client"
const db = new PrismaClient()
export default defineEventHandler((event) => {
return 'Hello World!'
export default defineEventHandler(async(event) => {
const body = await readBody(event)
console.info(body)
return body
})

8
types/Application/Application.ts
View File

@ -1,3 +1,9 @@
export type Application = {
name: string
area: string
cpu: number
ram: number
disk: number
usage: string
applicantId: number
}

4
vueform.config.ts
View File

@ -4,6 +4,7 @@ import en from '@vueform/vueform/locales/en'
import zh_CN from '@vueform/vueform/locales/zh_CN'
import vueform from '@vueform/vueform/dist/vueform'
import { defineConfig } from '@vueform/vueform'
import PluginMask from '@vueform/plugin-mask'
import axios from 'axios'
// You might place these anywhere else in your project
@ -16,4 +17,7 @@ export default defineConfig({
theme: vueform,
locales: { zh_CN,en },
locale: 'zh_CN',
plugins: [
PluginMask,
]
})