252 lines
6.4 KiB
Markdown
252 lines
6.4 KiB
Markdown
# 武术赛事报名系统
|
||
|
||
基于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插件
|
||
|
||
### 安装依赖
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
### 运行项目
|
||
|
||
#### H5开发
|
||
```bash
|
||
npm run dev:h5
|
||
```
|
||
|
||
#### 微信小程序开发
|
||
```bash
|
||
npm run dev:mp-weixin
|
||
```
|
||
|
||
### 构建项目
|
||
|
||
#### 构建H5
|
||
```bash
|
||
npm run build:h5
|
||
```
|
||
|
||
#### 构建微信小程序
|
||
```bash
|
||
npm run build:mp-weixin
|
||
```
|
||
|
||
### 检查页面完成度
|
||
```bash
|
||
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
|