# 武术赛事报名系统

基于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