这是主包夏季课程的作业，主包第一次写小程序，花了10天时间看网课，然后2天时间独立写出的项目。本来是小组作业，但是两周时间室友一直在打瓦罗兰特，白天打瓦晚上打呼，眼看答辩期限临近，主包只能自己完成了。
项目名称：赛事报名系统
编译器：HBuilder X
项目类型：uni-app
文件格式：.vue
功能：输入，保存，回显
原型图
首页
代码
html
<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
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>声明：著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。