328 lines
9.7 KiB
Vue
328 lines
9.7 KiB
Vue
|
<template>
|
||
|
|
<page-meta :page-style="$theme.pageStyle">
|
||
|
|
<!-- #ifndef H5 -->
|
||
|
|
<navigation-bar
|
||
|
|
:front-color="$theme.navColor"
|
||
|
|
:background-color="$theme.navBgColor"
|
||
|
|
/>
|
||
|
|
<!-- #endif -->
|
||
|
|
</page-meta>
|
||
|
|
<view class="pre-registration min-h-full pb-[env(safe-area-inset-bottom)]">
|
||
|
|
<!-- 基本信息 -->
|
||
|
|
<view class="px-[30rpx] py-[30rpx]">
|
||
|
|
<view class="flex items-center mb-[30rpx]">
|
||
|
|
<view class="w-[6rpx] h-[32rpx] bg-blue-500 rounded-[3rpx] mr-[16rpx]"></view>
|
||
|
|
<view class="text-lg font-medium">基本信息</view>
|
||
|
|
</view>
|
||
|
|
<view class="form-item">
|
||
|
|
<view class="label required">姓名</view>
|
||
|
|
<u-input
|
||
|
|
v-model="formData.name"
|
||
|
|
placeholder="请输入真实姓名"
|
||
|
|
:border="false"
|
||
|
|
:custom-style="inputStyle"
|
||
|
|
/>
|
||
|
|
</view>
|
||
|
|
<view class="form-item">
|
||
|
|
<view class="label required">性别</view>
|
||
|
|
<u-radio-group v-model="formData.gender" direction="row">
|
||
|
|
<u-radio :name="1" active-color="#3B82F6">男</u-radio>
|
||
|
|
<u-radio :name="2" class="ml-[60rpx]" active-color="#3B82F6">女</u-radio>
|
||
|
|
</u-radio-group>
|
||
|
|
</view>
|
||
|
|
<view class="form-item">
|
||
|
|
<view class="label required">身份证号</view>
|
||
|
|
<u-input
|
||
|
|
v-model="formData.idCard"
|
||
|
|
placeholder="请输入18位身份证号"
|
||
|
|
maxlength="18"
|
||
|
|
:border="false"
|
||
|
|
:custom-style="inputStyle"
|
||
|
|
/>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 学业信息 -->
|
||
|
|
<view class="px-[30rpx] py-[30rpx]">
|
||
|
|
<view class="flex items-center mb-[30rpx]">
|
||
|
|
<view class="w-[6rpx] h-[32rpx] bg-green-500 rounded-[3rpx] mr-[16rpx]"></view>
|
||
|
|
<view class="text-lg font-medium">学业信息</view>
|
||
|
|
</view>
|
||
|
|
<view class="form-item">
|
||
|
|
<view class="label required">毕业学校</view>
|
||
|
|
<u-input
|
||
|
|
v-model="formData.school"
|
||
|
|
placeholder="请输入毕业学校全称"
|
||
|
|
:border="false"
|
||
|
|
:custom-style="inputStyle"
|
||
|
|
/>
|
||
|
|
</view>
|
||
|
|
<view class="form-item">
|
||
|
|
<view class="label required">中考成绩</view>
|
||
|
|
<u-input
|
||
|
|
v-model="formData.score"
|
||
|
|
placeholder="请输入中考成绩"
|
||
|
|
type="digit"
|
||
|
|
maxlength="6"
|
||
|
|
:border="false"
|
||
|
|
:custom-style="inputStyle"
|
||
|
|
/>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 身体信息 -->
|
||
|
|
<view class="px-[30rpx] py-[30rpx]">
|
||
|
|
<view class="flex items-center mb-[30rpx]">
|
||
|
|
<view class="w-[6rpx] h-[32rpx] bg-orange-500 rounded-[3rpx] mr-[16rpx]"></view>
|
||
|
|
<view class="text-lg font-medium">身体信息</view>
|
||
|
|
</view>
|
||
|
|
<view class="form-row">
|
||
|
|
<view class="form-item flex-1 mr-[20rpx]">
|
||
|
|
<view class="label required">身高(cm)</view>
|
||
|
|
<u-input
|
||
|
|
v-model="formData.height"
|
||
|
|
placeholder="如: 175"
|
||
|
|
type="digit"
|
||
|
|
maxlength="5"
|
||
|
|
:border="false"
|
||
|
|
:custom-style="inputStyle"
|
||
|
|
/>
|
||
|
|
</view>
|
||
|
|
<view class="form-item flex-1">
|
||
|
|
<view class="label required">体重(kg)</view>
|
||
|
|
<u-input
|
||
|
|
v-model="formData.weight"
|
||
|
|
placeholder="如: 60"
|
||
|
|
type="digit"
|
||
|
|
maxlength="5"
|
||
|
|
:border="false"
|
||
|
|
:custom-style="inputStyle"
|
||
|
|
/>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="form-item">
|
||
|
|
<view class="label required">鞋码</view>
|
||
|
|
<u-input
|
||
|
|
v-model="formData.shoeSize"
|
||
|
|
placeholder="请输入鞋码，如: 42"
|
||
|
|
type="number"
|
||
|
|
maxlength="3"
|
||
|
|
:border="false"
|
||
|
|
:custom-style="inputStyle"
|
||
|
|
/>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="h-[2rpx] bg-gray-200 mx-[30rpx]"></view>
|
||
|
|
|
||
|
|
<!-- 报名信息 -->
|
||
|
|
<view class="px-[30rpx] py-[30rpx]">
|
||
|
|
<view class="flex items-center mb-[30rpx]">
|
||
|
|
<view class="w-[6rpx] h-[32rpx] bg-purple-500 rounded-[3rpx] mr-[16rpx]"></view>
|
||
|
|
<view class="text-lg font-medium">报名信息</view>
|
||
|
|
</view>
|
||
|
|
<view class="form-item">
|
||
|
|
<view class="label required">报名专业</view>
|
||
|
|
<u-input
|
||
|
|
v-model="formData.major"
|
||
|
|
placeholder="请输入意向专业名称"
|
||
|
|
:border="false"
|
||
|
|
:custom-style="inputStyle"
|
||
|
|
/>
|
||
|
|
</view>
|
||
|
|
<view class="form-item">
|
||
|
|
<view class="label required">招生老师</view>
|
||
|
|
<u-input
|
||
|
|
v-model="formData.teacher"
|
||
|
|
placeholder="请输入招生老师姓名"
|
||
|
|
:border="false"
|
||
|
|
:custom-style="inputStyle"
|
||
|
|
/>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 提交按钮 -->
|
||
|
|
<view class="px-[30rpx] py-[40rpx]">
|
||
|
|
<u-button
|
||
|
|
type="primary"
|
||
|
|
@click="submit"
|
||
|
|
:loading="submitting"
|
||
|
|
:custom-style="submitBtnStyle"
|
||
|
|
>
|
||
|
|
{{ submitting ? '提交中...' : '提交报名' }}
|
||
|
|
</u-button>
|
||
|
|
<view class="text-center mt-[20rpx] text-xs text-gray-400">
|
||
|
|
提交即表示您同意我们的服务条款
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { reactive, ref } from 'vue'
|
||
|
|
|
||
|
|
const formData = reactive({
|
||
|
|
name: '',
|
||
|
|
gender: 1,
|
||
|
|
idCard: '',
|
||
|
|
school: '',
|
||
|
|
score: '',
|
||
|
|
height: '',
|
||
|
|
weight: '',
|
||
|
|
shoeSize: '',
|
||
|
|
major: '',
|
||
|
|
teacher: ''
|
||
|
|
})
|
||
|
|
|
||
|
|
const submitting = ref(false)
|
||
|
|
|
||
|
|
const inputStyle = {
|
||
|
|
background: '#F5F5F5',
|
||
|
|
padding: '24rpx',
|
||
|
|
borderRadius: '12rpx',
|
||
|
|
fontSize: '28rpx'
|
||
|
|
}
|
||
|
|
|
||
|
|
const submitBtnStyle = {
|
||
|
|
height: '100rpx',
|
||
|
|
fontSize: '32rpx',
|
||
|
|
borderRadius: '50rpx',
|
||
|
|
background: 'linear-gradient(135deg, #3B82F6 0%, #2563EB 100%)',
|
||
|
|
boxShadow: '0 8rpx 24rpx rgba(59, 130, 246, 0.3)'
|
||
|
|
}
|
||
|
|
|
||
|
|
const validateForm = () => {
|
||
|
|
if (!formData.name.trim()) {
|
||
|
|
uni.$u.toast('请输入姓名')
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
if (!formData.idCard.trim()) {
|
||
|
|
uni.$u.toast('请输入身份证号')
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
if (!/^\d{17}[\dXx]$/.test(formData.idCard)) {
|
||
|
|
uni.$u.toast('请输入正确的18位身份证号')
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
if (!formData.school.trim()) {
|
||
|
|
uni.$u.toast('请输入毕业学校')
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
if (!formData.score) {
|
||
|
|
uni.$u.toast('请输入中考成绩')
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
if (Number(formData.score) < 0 || Number(formData.score) > 750) {
|
||
|
|
uni.$u.toast('请输入正确的中考成绩')
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
if (!formData.height) {
|
||
|
|
uni.$u.toast('请输入身高')
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
if (Number(formData.height) < 50 || Number(formData.height) > 250) {
|
||
|
|
uni.$u.toast('请输入正确的身高')
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
if (!formData.weight) {
|
||
|
|
uni.$u.toast('请输入体重')
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
if (Number(formData.weight) < 20 || Number(formData.weight) > 200) {
|
||
|
|
uni.$u.toast('请输入正确的体重')
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
if (!formData.shoeSize) {
|
||
|
|
uni.$u.toast('请输入鞋码')
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
if (Number(formData.shoeSize) < 15 || Number(formData.shoeSize) > 55) {
|
||
|
|
uni.$u.toast('请输入正确的鞋码')
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
if (!formData.major.trim()) {
|
||
|
|
uni.$u.toast('请输入报名专业')
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
if (!formData.teacher.trim()) {
|
||
|
|
uni.$u.toast('请输入招生老师姓名')
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
return true
|
||
|
|
}
|
||
|
|
|
||
|
|
const submit = async () => {
|
||
|
|
if (!validateForm()) return
|
||
|
|
|
||
|
|
submitting.value = true
|
||
|
|
|
||
|
|
try {
|
||
|
|
await new Promise(resolve => setTimeout(resolve, 1000))
|
||
|
|
|
||
|
|
uni.showModal({
|
||
|
|
title: '提交成功',
|
||
|
|
content: '您的预报名信息已提交，我们将尽快与您联系！',
|
||
|
|
showCancel: false,
|
||
|
|
confirmText: '知道了',
|
||
|
|
success: () => {
|
||
|
|
uni.navigateBack()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
} catch (error) {
|
||
|
|
uni.$u.toast('提交失败，请重试')
|
||
|
|
} finally {
|
||
|
|
submitting.value = false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.pre-registration {
|
||
|
|
background-color: #FFFFFF;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-item {
|
||
|
|
margin-bottom: 30rpx;
|
||
|
|
|
||
|
|
&:last-child {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-row {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
}
|
||
|
|
|
||
|
|
.label {
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #333;
|
||
|
|
margin-bottom: 16rpx;
|
||
|
|
font-weight: 500;
|
||
|
|
|
||
|
|
&.required::before {
|
||
|
|
content: '*';
|
||
|
|
color: #FF4D4F;
|
||
|
|
margin-right: 6rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.bg-blue-500 {
|
||
|
|
background-color: #3B82F6;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bg-green-500 {
|
||
|
|
background-color: #22C55E;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bg-orange-500 {
|
||
|
|
background-color: #F97316;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bg-purple-500 {
|
||
|
|
background-color: #A855F7;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</style>
|