《赛事报名系统小程序》

这是主包夏季课程的作业，主包第一次写小程序，花了10天时间看网课，然后2天时间独立写出的项目。本来是小组作业，但是两周时间室友一直在打瓦罗兰特，白天打瓦晚上打呼，眼看答辩期限临近，主包只能自己完成了。

项目名称：赛事报名系统

编译器：HBuilder X

项目类型：uni-app

文件格式：.vue

功能：输入，保存，回显

原型图

首页

代码

<template><view class="content"><navigation-bar title="赛事报名系统"></navigation-bar><text class="title">赛事名称</text><text class="title">官方小程序</text><image class="logo"" src="/static/logo.png"></image><text class="title">武术套路（精武专场）</text><navigator url="/pages/routine/routine"><button>我要报名</button></navigator><text class="title">武术散打（散打专场）</text><button>我要报名</button></view>
</template>

报名页

核心html

<scroll-view class="content" scroll-y type="list"><text class="title">报名信息</text><form><radio-group name="radio" v-model="teamData.group"><label><radio value="group" :checked="teamData.group === 'group'" />单位</label><label><radio value="person" :checked="teamData.group === 'person'" />仅个人</label></radio-group><view class="row" style="margin:5rpx 0"><view class="item">单位名称 *</view><view><input type="text" v-model="teamData.team_name" placeholder="请输入" /></view></view><view class="row" style="margin:5rpx 0"><view class="item">带队姓名 *</view><view><input type="text" v-model="teamData.lead_name" placeholder="请输入教练/领队" /></view></view><view class="row" style="margin:5rpx 0"><view class="item">带队电话 +86</view><view><input type="text" v-model="teamData.lead_tel" placeholder="请输入" /></view></view><view class="row" style="margin:5rpx 0"><view class="item"> 选择角色</view><view><radio-group name="radio" v-model="teamData.role"><label><radio value="leader" :checked="teamData.role === 'leader'" />领队</label><label><radio value="coach" :checked="teamData.role === 'coach'" />教练</label></radio-group></view></view></form><text class="title">个人套路</text><view v-for="(athlete, index) in athletes" :key="index" class="athlete-form"><view @click="toggleCollapse(index)" style="display:flex;align-items:center;"><span class="icon">{{ athlete.isCollapsed ? '▶' : '▼' }}</span><text class="title">运动员{{ index + 1 }}【{{athlete.name || '未填写'}}】</text><text v-if="athlete.isCollapsed && athlete.name" class="athlete-name">{{ athlete.name }}</text><button @click="deleteAthlete(index)">删除</button></view><view v-show="!athlete.isCollapsed"><div class="row"><div class="item">选手姓名</div><input type="text" class="form-input" placeholder="请输入姓名" v-model="athlete.name"></div><div class="row"><div class="item">证件类型</div><div value="id">身份证</div></div><div class="row"><div class="item">证件号码</div><input type="text" class="form-input" placeholder="请输入证件号码" v-model="athlete.idNumber"></div><div class="row"><div class="item">选手性别</div><select class="form-input" v-model="athlete.gender"><option value="">请选择</option><option value="male">男</option><option value="female">女</option></select></div><div class="row"><div class="item">选手生日</div><input type="date" class="form-input" placeholder="请输入生日" v-model="athlete.birthday"></div><div class="row"><div class="item">年龄/组别 *</div><select class="form-input" v-model="athlete.ageGroup"><option value="">请选择</option><option value="A">少儿A组：8岁～12岁</option><option value="B">少年B组：13岁～17岁</option><option value="C">青壮年C组：18岁～45岁</option><option value="D">中年D组：46岁～55岁</option><option value="E">中老年E组：56岁～65岁</option><option value="F">老年F组：66岁及以上</option></select></div><view class="row" style="margin:5rpx 0"><view class="item">电话 +86</view><view><input type="text" placeholder="请输入" v-model="athlete.phone" /></view></view><text>套路</text><view class="row" style="margin:5rpx 0"><view class="item">套路一 *</view><select class="form-input" v-model="athlete.routine1Type"><option value="">请选择</option><option value="A">自选/竞赛拳</option><option value="B">自选/竞赛器械</option><option value="C">传统拳</option><option value="D">传统器械</option><option value="E">太极拳类</option></select></view><view class="row" style="margin:5rpx 0"><view class="item">套路名称 *</view><view><input type="text" placeholder="请输入" v-model="athlete.routine1Name" /></view></view><view class="row" style="margin:5rpx 0"><view class="item">套路二 *</view><select class="form-input" v-model="athlete.routine2Type"><option value="">请选择</option><option value="A">自选/竞赛拳</option><option value="B">自选/竞赛器械</option><option value="C">传统拳</option><option value="D">传统器械</option><option value="E">太极拳类</option></select></view><view class="row" style="margin:5rpx 0"><view class="item">套路名称 *</view><view><input type="text" placeholder="请输入" v-model="athlete.routine2Name" /></view></view></view></view><button @click="addAthlete">添加运动员</button><button @click="saveForm">保存</button><button @click="loaddata">查看</button></scroll-view>

声明：著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。