docs: 更新README,简化内容并更新域名
This commit is contained in:
284
README.md
284
README.md
@@ -1,251 +1,71 @@
|
|||||||
# 武术赛事报名系统
|
# 武术赛事管理系统 - 用户端
|
||||||
|
|
||||||
基于uniapp框架开发的武术赛事报名系统,支持H5和微信小程序。
|
基于 UniApp 开发的武术赛事报名小程序,支持 H5 和微信小程序。
|
||||||
|
|
||||||
## 项目概述
|
## 在线访问
|
||||||
|
|
||||||
本项目是一个完整的武术赛事报名管理系统,实现了从赛事浏览、报名到信息管理的完整流程。
|
| 服务 | 地址 |
|
||||||
|
|------|------|
|
||||||
|
| 用户端 H5 | https://martial.aitisai.com |
|
||||||
|
| 后端 API | https://martial-api.aitisai.com |
|
||||||
|
|
||||||
### 技术栈
|
## 功能特点
|
||||||
|
|
||||||
- **框架**: uniapp
|
- 赛事浏览与搜索
|
||||||
|
- 在线报名与支付
|
||||||
|
- 选手信息管理
|
||||||
|
- 报名记录查询
|
||||||
|
- 赛事详情查看
|
||||||
|
|
||||||
|
## 技术栈
|
||||||
|
|
||||||
|
- **框架**: UniApp
|
||||||
- **平台**: H5、微信小程序
|
- **平台**: H5、微信小程序
|
||||||
- **样式**: SCSS、rpx响应式单位
|
- **样式**: SCSS
|
||||||
- **版本**: 2.0
|
|
||||||
|
## 快速开始
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 安装依赖
|
||||||
|
npm install
|
||||||
|
|
||||||
|
# H5 开发
|
||||||
|
npm run dev:h5
|
||||||
|
|
||||||
|
# 微信小程序开发
|
||||||
|
npm run dev:mp-weixin
|
||||||
|
|
||||||
|
# 构建 H5
|
||||||
|
npm run build:h5
|
||||||
|
```
|
||||||
|
|
||||||
## 项目结构
|
## 项目结构
|
||||||
|
|
||||||
```
|
```
|
||||||
martial-mini/
|
martial-mini/
|
||||||
├── pages/ # 页面目录
|
├── pages/
|
||||||
│ ├── home/ # 首页(武术赛事通)
|
│ ├── home/ # 首页
|
||||||
│ ├── profile/ # 个人中心
|
│ ├── profile/ # 个人中心
|
||||||
│ ├── common-info/ # 常用信息
|
│ ├── event-list/ # 赛事列表
|
||||||
│ ├── add-player/ # 新增选手
|
|
||||||
│ ├── edit-player/ # 编辑选手
|
|
||||||
│ ├── add-contact/ # 新增联系人
|
|
||||||
│ ├── my-registration/ # 我的报名
|
|
||||||
│ ├── event-list/ # 全部赛事列表
|
|
||||||
│ ├── event-detail/ # 赛事详情
|
│ ├── event-detail/ # 赛事详情
|
||||||
│ ├── register-type/ # 选择报名类型
|
│ ├── event-register/ # 赛事报名
|
||||||
│ ├── select-event/ # 选择报名项目
|
│ ├── my-registration/ # 我的报名
|
||||||
│ └── event-register/ # 赛事报名流程
|
│ ├── add-player/ # 新增选手
|
||||||
├── components/ # 公共组件目录
|
│ └── common-info/ # 常用信息
|
||||||
│ ├── custom-navbar/ # 自定义导航栏
|
├── components/ # 公共组件
|
||||||
│ ├── custom-tabs/ # Tab切换组件
|
├── static/ # 静态资源
|
||||||
│ └── confirm-modal/ # 确认弹窗组件
|
|
||||||
├── static/ # 静态资源目录
|
|
||||||
│ └── images/ # 图片资源
|
|
||||||
├── image/ # 设计稿图片
|
|
||||||
├── App.vue # 应用主组件
|
|
||||||
├── main.js # 应用入口文件
|
|
||||||
├── pages.json # 页面配置
|
├── pages.json # 页面配置
|
||||||
├── manifest.json # 应用配置
|
└── manifest.json # 应用配置
|
||||||
├── uni.scss # 全局样式变量
|
|
||||||
├── index.html # H5入口页面
|
|
||||||
├── package.json # 项目依赖配置
|
|
||||||
├── check-pages.js # 页面完成度检查工具
|
|
||||||
└── README.md # 项目说明文档
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## 功能模块
|
## 相关仓库
|
||||||
|
|
||||||
### 1. 首页(武术赛事通)
|
| 仓库 | 说明 |
|
||||||
- 轮播图展示
|
|------|------|
|
||||||
- 精品赛事列表
|
| [martial-master](https://git.waypeak.work/martial/martial-master) | 后端 API |
|
||||||
- 赛事状态显示(报名中/已结束)
|
| [martial-web](https://git.waypeak.work/martial/martial-web) | 管理后台 |
|
||||||
- 快速报名入口
|
| [martial-admin-mini](https://git.waypeak.work/martial/martial-admin-mini) | 裁判端小程序 |
|
||||||
|
|
||||||
### 2. 个人中心
|
---
|
||||||
- 用户信息展示
|
|
||||||
- 我的报名入口
|
|
||||||
- 常用信息管理
|
|
||||||
- 修改密码
|
|
||||||
- 联系我们
|
|
||||||
- 退出登录
|
|
||||||
|
|
||||||
### 3. 常用信息管理
|
**最后更新**: 2024-12-29
|
||||||
- 选手信息管理(新增/编辑/删除)
|
|
||||||
- 集体信息管理
|
|
||||||
- 联系人信息管理
|
|
||||||
- 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
|
|
||||||
|
|||||||
Reference in New Issue
Block a user