武术赛事报名系统

基于uniapp框架开发的武术赛事报名系统，支持H5和微信小程序。

项目概述

本项目是一个完整的武术赛事报名管理系统，实现了从赛事浏览、报名到信息管理的完整流程。

技术栈

• 框架: uniapp
• 平台: H5、微信小程序
• 样式: SCSS、rpx响应式单位
• 版本: 2.0

项目结构

martial-mini/
├── pages/                      # 页面目录
│   ├── home/                   # 首页（武术赛事通）
│   ├── profile/                # 个人中心
│   ├── common-info/            # 常用信息
│   ├── add-player/             # 新增选手
│   ├── edit-player/            # 编辑选手
│   ├── add-contact/            # 新增联系人
│   ├── my-registration/        # 我的报名
│   ├── event-list/             # 全部赛事列表
│   ├── event-detail/           # 赛事详情
│   ├── register-type/          # 选择报名类型
│   ├── select-event/           # 选择报名项目
│   └── event-register/         # 赛事报名流程
├── components/                 # 公共组件目录
│   ├── custom-navbar/          # 自定义导航栏
│   ├── custom-tabs/            # Tab切换组件
│   └── confirm-modal/          # 确认弹窗组件
├── static/                     # 静态资源目录
│   └── images/                 # 图片资源
├── image/                      # 设计稿图片
├── App.vue                     # 应用主组件
├── main.js                     # 应用入口文件
├── pages.json                  # 页面配置
├── manifest.json               # 应用配置
├── uni.scss                    # 全局样式变量
├── index.html                  # H5入口页面
├── package.json                # 项目依赖配置
├── check-pages.js              # 页面完成度检查工具
└── README.md                   # 项目说明文档

功能模块

1. 首页（武术赛事通）

• 轮播图展示
• 精品赛事列表
• 赛事状态显示（报名中/已结束）
• 快速报名入口

2. 个人中心

• 用户信息展示
• 我的报名入口
• 常用信息管理
• 修改密码
• 联系我们
• 退出登录

3. 常用信息管理

• 选手信息管理（新增/编辑/删除）
• 集体信息管理
• 联系人信息管理
• Tab切换界面

4. 选手管理

• 证件类型选择（身份证）
• 姓名输入
• 证件号码输入（18位身份证号验证）
• 队伍名称输入
• 表单验证提示

5. 联系人管理

• 证件信息
• 手机号码（格式验证）
• 邮箱地址
• 联系地址
• 设置默认联系人开关

6. 我的报名

• 全部/待开始/进行中/已结束 Tab切换
• 赛事状态标签
• 赛事详细信息展示
• 参赛选手列表
• 查看证件功能

7. 赛事列表

• 搜索功能
• 日期筛选
• 地区筛选
• 赛事卡片展示
• 报名状态显示

8. 赛事详情

• 赛事基本信息
• 功能网格入口：
  • 信息发布
  • 赛事规程
  • 活动日程
  • 参赛选手
  • 比赛实况
  • 出场顺序
  • 成绩
  • 奖牌榜
  • 图片直播
• 报名按钮

9. 报名流程

• 选择报名类型：单人赛/集体赛
• 选择报名项目：多选项目，显示价格
• 报名三步骤：
  1. 选择选手信息（可新增/编辑/删除选手）
  2. 订单支付（显示赛事信息、联系人、参赛选手、总价）
  3. 报名成功（显示选手编号信息）

设计特点

配色方案

• 主题色：#C93639（中国红）
• 文字色：#333333（深灰）、#666666（中灰）、#999999（浅灰）
• 背景色：#f5f5f5（浅灰背景）、#ffffff（白色）

样式规范

• 使用rpx响应式单位，自适应不同屏幕
• 圆角统一：16rpx（常规）、24rpx（大圆角）
• 间距统一：30rpx（页面内边距）
• 字体大小：
  • 标题：36-38rpx
  • 正文：28-32rpx
  • 辅助文字：24-26rpx

UI组件

• 自定义导航栏（支持返回按钮、标题、右侧操作区）
• Tab切换组件（带下划线指示器）
• 确认弹窗组件（取消/确定）
• 表单输入组件
• 按钮组件（主按钮/禁用按钮）

开发说明

环境要求

• Node.js 12+
• HBuilderX（推荐）或 VSCode + uni-app插件

安装依赖

npm install

运行项目

H5开发

npm run dev:h5

微信小程序开发

npm run dev:mp-weixin

构建项目

构建H5

npm run build:h5

构建微信小程序

npm run build:mp-weixin

检查页面完成度

node check-pages.js

页面列表

1. 首页 - /pages/home/home
2. 个人中心 - /pages/profile/profile
3. 常用信息 - /pages/common-info/common-info
4. 新增选手 - /pages/add-player/add-player
5. 编辑选手 - /pages/edit-player/edit-player
6. 新增联系人 - /pages/add-contact/add-contact
7. 我的报名 - /pages/my-registration/my-registration
8. 全部赛事列表 - /pages/event-list/event-list
9. 赛事详情 - /pages/event-detail/event-detail
10. 选择报名类型 - /pages/register-type/register-type
11. 选择报名项目 - /pages/select-event/select-event
12. 赛事报名流程 - /pages/event-register/event-register

注意事项

1. 所有静态页面已完成，数据为模拟数据
2. 实际开发时需要对接后端API接口
3. 图片资源需要替换为实际的设计图
4. 部分功能（如支付）需要集成第三方SDK
5. 微信小程序需要配置appid和相关权限

后续开发建议

1. 接口对接：

   • 用户登录/注册
   • 赛事列表获取
   • 报名信息提交
   • 支付接口对接

2. 功能完善：

   • 图片上传功能
   • 消息通知
   • 数据缓存优化
   • 错误处理机制

3. 性能优化：

   • 图片懒加载
   • 列表虚拟滚动
   • 页面预加载

4. 用户体验：

   • 加载动画
   • 骨架屏
   • 下拉刷新
   • 上拉加载更多

检查报告

运行 node check-pages.js 可查看详细的页面完成度报告。

当前完成度：100% ✓

• 配置文件：7/7 完成
• 公共组件：3/3 完成
• 页面文件：12/12 完成

版本信息

• 版本号：V 2.0
• 开发时间：2025年1月

许可证

MIT License