Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
75d726d5 1 parent 4b50722f

feat(familyForm): 新增家庭报名表单模块 

添加家庭报名表单页面、路由、服务及模拟数据
- 创建表单页面，包含幼儿园班级选择、参赛人数、孩童姓名、手机号、证件登记和服装尺码等字段
- 添加路由配置，支持 /family-form 路径访问
- 实现服务层，提供获取学校选项和提交报名信息的功能
- 添加模拟数据，包含幼儿园列表和本地存储的报名记录
Inline Side-by-side
Showing 4 changed files with 503 additions and 0 deletions
const familyFormRoutes = [
{
path: '/family-form',
name: '家庭报名表单',
component: () => import('@/views/familyForm/index.vue'),
meta: {
title: '家庭表单录入'
},
children: []
}
];
export default familyFormRoutes;
<template>
<div class="family-form-page">
<van-config-provider :theme-vars="themeVars">
<div class="form-card">
<header class="page-header">
<h1>[新]第六届“益起走”幼儿园公益践行赛报名</h1>
<p>感谢参加本场活动！</p>
</header>
<van-form
scroll-to-error
scroll-to-error-position="center"
validate-first
@submit="saveForm"
@failed="handleSubmitFailed"
>
<section class="form-section">
<div class="field-block required">
<div class="field-label">所在幼儿园班级</div>
<div class="school-row">
<van-field
v-model="form.kg_name"
readonly
is-link
name="kg_name"
placeholder="请选择幼儿园"
:rules="[{ required: true, message: '请选择幼儿园' }]"
@click="showSchoolPicker = true"
/>
<van-field
v-model="form.class_name"
readonly
is-link
name="class_name"
placeholder="请选择班级"
:rules="[{ required: true, message: '请选择班级' }]"
@click="openClassPicker"
/>
</div>
</div>
<div class="field-block required">
<div class="field-label">活动当天参赛的孩童数量（输入大于等于1的数字）</div>
<van-field
v-model="form.child_count"
name="child_count"
type="digit"
placeholder="请输入孩童数量"
:rules="[{ validator: childCountValidator, message: '请输入大于等于1的数字' }]"
/>
</div>
<div class="field-block required">
<div class="field-label">活动当天参赛的家长数量（请输入1-2之间的数字）</div>
<van-field
v-model="form.parent_count"
name="parent_count"
type="digit"
placeholder="请输入家长数量"
:rules="[{ validator: parentCountValidator, message: '请输入1-2之间的数字' }]"
/>
</div>
<div class="field-block required">
<div class="field-label">参赛孩童姓名</div>
<p class="field-desc">如果有2位小朋友参赛，可以用空格间隔孩童姓名，例：申小花 申小朵</p>
<van-field
v-model="form.child_names"
name="child_names"
placeholder="请输入参赛孩童姓名"
:rules="[{ required: true, message: '请输入参赛孩童姓名' }]"
/>
</div>
<div class="field-block required">
<div class="field-label">手机</div>
<p class="field-desc">每组家庭填写一个手机号码，该号码将用于登录专属小程序支付报名费、募款、并在活动当天在线打卡等。</p>
<van-field
v-model="form.phone"
name="phone"
type="tel"
maxlength="11"
placeholder="请输入手机号"
:rules="[
{ required: true, message: '请输入手机号' },
{ validator: phoneValidator, message: '请输入正确手机号' }
]"
/>
</div>
<div class="field-block required">
<div class="field-label">证件登记</div>
<p class="field-desc">请准确填写参赛人员姓名和证件信息，用于购买赛事保险；如证件为非身份证，请填写出生年月日。</p>
<p class="field-desc">填写格式：<br>姓名1 证件号1<br>姓名2 证件号2</p>
<van-field
v-model="form.certificate_info"
name="certificate_info"
type="textarea"
rows="4"
autosize
placeholder="请输入证件登记信息"
:rules="[{ required: true, message: '请输入证件登记信息' }]"
/>
</div>
</section>
<section class="form-section clothes-section">
<div class="section-title">服装尺码登记</div>
<p class="section-desc">在需要的尺码里，填写数量</p>
<div v-for="item in clothesFields" :key="item.field" class="field-block">
<div class="field-label">{{ item.label }}</div>
<van-field
v-model="form[item.field]"
:name="item.field"
type="digit"
:placeholder="`请输入${item.label}数量`"
/>
</div>
</section>
<div class="submit-bar">
<van-button block round type="primary" native-type="submit" :loading="saveLoading">保存</van-button>
</div>
</van-form>
</div>
<van-popup v-model:show="showSchoolPicker" round position="bottom">
<van-picker
:columns="schoolOnlyColumns"
@cancel="showSchoolPicker = false"
@confirm="onSchoolConfirm"
/>
</van-popup>
<van-popup v-model:show="showClassPicker" round position="bottom">
<van-picker
:columns="classColumns"
@cancel="showClassPicker = false"
@confirm="onClassConfirm"
/>
</van-popup>
</van-config-provider>
</div>
</template>
<script setup>
import { computed, onMounted, reactive, ref } from 'vue';
import { showDialog, showFailToast, showSuccessToast } from 'vant';
import { styleColor } from '@/constant.js';
import {
fetchSchoolOptions,
submitRegistration
} from './service';
const themeVars = {
buttonPrimaryBackground: styleColor.baseColor,
buttonPrimaryBorderColor: styleColor.baseColor,
buttonPrimaryColor: styleColor.baseFontColor
};
const defaultForm = {
kg_id: '',
kg_name: '',
class_id: '',
class_name: '',
child_count: '',
parent_count: '',
child_names: '',
phone: '',
certificate_info: '',
clothes_child_110: '',
clothes_child_120: '',
clothes_child_130: '',
clothes_adult_xs: '',
clothes_adult_s: '',
clothes_adult_m: '',
clothes_adult_l: ''
};
const clothesFields = [
{ label: '孩童110码', field: 'clothes_child_110' },
{ label: '孩童120码', field: 'clothes_child_120' },
{ label: '孩童130码', field: 'clothes_child_130' },
{ label: '成年XS码', field: 'clothes_adult_xs' },
{ label: '成年S码', field: 'clothes_adult_s' },
{ label: '成年M码', field: 'clothes_adult_m' },
{ label: '成年L码', field: 'clothes_adult_l' }
];
const form = reactive({ ...defaultForm });
const schoolColumns = ref([]);
const showSchoolPicker = ref(false);
const showClassPicker = ref(false);
const saveLoading = ref(false);
const currentSchool = computed(() => schoolColumns.value.find((item) => item.value === form.kg_id));
const classColumns = computed(() => currentSchool.value?.children || []);
const schoolOnlyColumns = computed(() => schoolColumns.value.map((item) => ({
text: item.text,
value: item.value
})));
const childCountValidator = (value) => Number(value) >= 1;
const parentCountValidator = (value) => {
const count = Number(value);
return count >= 1 && count <= 2;
};
const phoneValidator = (value) => /^1\d{10}$/.test(value);
const openClassPicker = () => {
if (!form.kg_id) {
showFailToast('请先选择幼儿园');
return;
}
showClassPicker.value = true;
};
const onSchoolConfirm = ({ selectedOptions }) => {
const school = selectedOptions[0];
showSchoolPicker.value = false;
form.kg_id = school.value;
form.kg_name = school.text;
form.class_id = '';
form.class_name = '';
};
const onClassConfirm = ({ selectedOptions }) => {
const classItem = selectedOptions[0];
showClassPicker.value = false;
form.class_id = classItem.value;
form.class_name = classItem.text;
};
const saveForm = async () => {
saveLoading.value = true;
try {
await submitRegistration({ ...form });
showSuccessToast('保存成功');
} catch (error) {
showFailToast(error.message);
} finally {
saveLoading.value = false;
}
};
const handleSubmitFailed = ({ errors = [] }) => {
const message = errors.find((item) => item.message)?.message || '请检查报名信息';
showDialog({
title: '请完善报名信息',
message,
confirmButtonColor: styleColor.baseColor
});
};
onMounted(async () => {
document.title = '家庭表单录入';
try {
schoolColumns.value = await fetchSchoolOptions();
} catch (error) {
showFailToast(error.message);
}
});
</script>
<style lang="less" scoped>
.family-form-page {
min-height: 100vh;
padding: 16px;
background: #f3f5f7;
box-sizing: border-box;
}
.form-card {
min-height: calc(100vh - 32px);
padding: 22px 14px 28px;
background: #ffffff;
border-radius: 16px;
box-sizing: border-box;
}
.page-header {
margin-bottom: 42px;
h1 {
margin: 0;
color: #101010;
font-size: 22px;
line-height: 1.35;
font-weight: 700;
}
p {
margin: 14px 0 0;
color: #8a8f96;
font-size: 14px;
line-height: 1.6;
}
}
.form-section {
margin-bottom: 36px;
}
.field-block {
margin-bottom: 30px;
:deep(.van-cell) {
min-height: 46px;
padding: 0 14px;
align-items: center;
border: 1px solid #e8e8e8;
border-radius: 6px;
box-shadow: none;
}
:deep(.van-field__control) {
color: #222222;
font-size: 14px;
}
:deep(.van-field__control::placeholder) {
color: #b9bec3;
}
:deep(.van-field__error-message) {
padding-top: 4px;
}
}
.field-label,
.section-title {
position: relative;
margin-bottom: 14px;
color: #101010;
font-size: 17px;
line-height: 1.4;
font-weight: 700;
}
.required .field-label {
padding-left: 14px;
&::before {
position: absolute;
left: 0;
top: 1px;
color: #ee3f3f;
content: '*';
}
}
.field-desc,
.section-desc {
margin: -6px 0 14px;
color: #9aa1a8;
font-size: 14px;
line-height: 1.65;
}
.school-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.clothes-section {
padding-top: 4px;
}
.section-desc {
margin-top: 0;
margin-bottom: 58px;
}
.submit-bar {
padding-top: 4px;
}
@media (max-width: 340px) {
.school-row {
grid-template-columns: 1fr;
}
}
</style>
const STORAGE_KEY = 'family-form-registrations';
const mockSchoolList = [
{
id: 'kg_001',
name: '上海市杨浦区科技幼儿园',
classes: [
{ id: 'kg_001_c_001', name: '小一班' },
{ id: 'kg_001_c_002', name: '中二班' },
{ id: 'kg_001_c_003', name: '大三班' }
]
},
{
id: 'kg_002',
name: '上海市黄浦区蓓蕾幼儿园',
classes: [
{ id: 'kg_002_c_001', name: '小太阳班' },
{ id: 'kg_002_c_002', name: '星星班' },
{ id: 'kg_002_c_003', name: '彩虹班' }
]
},
{
id: 'kg_003',
name: '上海市徐汇区童心幼儿园',
classes: [
{ id: 'kg_003_c_001', name: '亲子一班' },
{ id: 'kg_003_c_002', name: '亲子二班' },
{ id: 'kg_003_c_003', name: '亲子三班' }
]
}
];
const delay = (data, timeout = 200) => new Promise((resolve) => {
setTimeout(() => resolve(data), timeout);
});
const readRegistrations = () => {
try {
return JSON.parse(localStorage.getItem(STORAGE_KEY)) || [];
} catch (error) {
console.warn('读取家庭报名 mock 缓存失败', error);
return [];
}
};
const writeRegistrations = (list) => {
localStorage.setItem(STORAGE_KEY, JSON.stringify(list));
};
export const getMockSchoolList = () => delay({
code: 1,
data: mockSchoolList
});
export const saveMockRegistration = (params) => {
const list = readRegistrations();
const now = Date.now();
const nextItem = {
...params,
id: `family_${now}`,
updated_at: now
};
list.unshift(nextItem);
writeRegistrations(list);
return delay({
code: 1,
msg: '保存成功',
data: nextItem
}, 300);
};
import {
getMockSchoolList,
saveMockRegistration
} from './mock';
const normalizeSchoolList = (list = []) => list.map((school) => ({
text: school.name,
value: school.id,
children: (school.classes || []).map((item) => ({
text: item.name,
value: item.id
}))
}));
export const fetchSchoolOptions = async () => {
const res = await getMockSchoolList();
if (res.code !== 1) {
throw new Error(res.msg || '获取幼儿园信息失败');
}
return normalizeSchoolList(res.data);
};
export const submitRegistration = async (formData) => {
const res = await saveMockRegistration(formData);
if (res.code !== 1) {
throw new Error(res.msg || '保存报名信息失败');
}
return res.data;
};