# 武术评分系统 - UniApp版本 这是一个基于UniApp开发的武术比赛评分系统,支持H5和小程序平台。 ## 项目简介 本项目是一个完整的武术比赛评分管理系统,包含评委打分、裁判长修改评分、多场地管理等功能。 ## 功能特点 - ✅ 支持H5和微信小程序双平台 - ✅ 评委登录与评分功能 - ✅ 裁判长评分修改功能 - ✅ 多场地、多项目切换 - ✅ 扣分项多选功能 - ✅ 精确到0.001分的评分控制 - ✅ 实时评分统计 ## 页面结构 ### 1. 登录页面 (`pages/login/login.vue`) - 输入比赛编码 - 输入评委邀请码 - 验证登录 ### 2. 评分列表页 (`pages/score-list/score-list.vue`) - 显示比赛信息 - 查看选手列表 - 评委评分入口 - 显示我的评分和总分 ### 3. 修改评分页 (`pages/modify-score/modify-score.vue`) - 裁判长专用功能 - 查看所有评委评分 - 修改总分(±0.001分) - 添加修改备注 ### 4. 多场地评分列表页 (`pages/score-list-multi/score-list-multi.vue`) - 场地切换功能 - 项目切换功能 - 裁判长可查看所有场地 - 普通评委仅看自己的场地 ### 5. 评分详情页 (`pages/score-detail/score-detail.vue`) - 评委打分界面 - 分数精确调整(±0.001分) - 扣分项多选 - 添加评分备注 ## 技术栈 - **框架**: UniApp - **前端**: Vue.js 2.x - **样式**: CSS3 (支持rpx单位) - **平台支持**: H5、微信小程序 ## 目录结构 ``` martial-admin-mini/ ├── common/ # 公共资源 │ └── common.css # 全局样式 ├── pages/ # 页面目录 │ ├── login/ # 登录页面 │ ├── score-list/ # 评分列表页 │ ├── modify-score/ # 修改评分页 │ ├── score-list-multi/ # 多场地列表页 │ └── score-detail/ # 评分详情页 ├── image/ # 设计图片 ├── App.vue # 应用配置 ├── manifest.json # 应用配置清单 ├── pages.json # 页面配置 └── package.json # 项目依赖 ``` ## 快速开始(推荐方式) ### 使用HBuilderX运行(最简单) 1. **下载并安装HBuilderX** - 官网下载:https://www.dcloud.io/hbuilderx.html - 建议下载标准版或App开发版 2. **打开项目** - 打开HBuilderX - 点击菜单:文件 -> 打开目录 - 选择本项目的根目录:`martial-admin-mini` 3. **运行到H5** - 在项目管理器中,右键点击项目根目录 - 选择:运行 -> 运行到浏览器 -> Chrome(或其他浏览器) - 浏览器会自动打开并显示项目 4. **运行到微信小程序** - 首先安装并打开微信开发者工具 - 在HBuilderX中,右键点击项目根目录 - 选择:运行 -> 运行到小程序模拟器 -> 微信开发者工具 - 首次运行会提示配置小程序工具路径,按提示配置即可 ### 常见问题解决 #### 问题1:HBuilderX提示"未安装依赖"或"缺少插件" **解决方案:** - 点击HBuilderX顶部菜单:工具 -> 插件安装 - 安装以下插件: - uni-app编译器(必需) - App真机运行(如需真机调试) - 微信小程序支持(如需开发小程序) #### 问题2:运行时报错"Cannot find module" **解决方案:** ```bash # 在项目根目录执行 npm install ``` #### 问题3:小程序无法运行 **解决方案:** 1. 确保已安装微信开发者工具 2. 在HBuilderX中配置微信开发者工具路径: - 工具 -> 设置 -> 运行配置 -> 小程序运行配置 - 配置微信开发者工具的安装路径 3. 在manifest.json中配置小程序appid(或使用测试号) #### 问题4:H5运行时样式异常 **解决方案:** - 清除浏览器缓存后重新运行 - 或使用Ctrl+F5强制刷新 ## 开发指南 ### 环境要求 - HBuilderX 3.0+ (推荐) - 或 Node.js 12+ + Vue CLI - 微信开发者工具 (小程序开发需要) ### 方式一:使用HBuilderX(推荐) 1. 使用HBuilderX打开项目根目录 2. 点击运行 -> 运行到浏览器 (H5开发) 3. 或点击运行 -> 运行到小程序模拟器 -> 微信开发者工具 ### 方式二:使用命令行 #### 安装依赖 ```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 ``` ## 设计还原说明 本项目严格按照提供的5张设计图进行一比一还原: 1. **颜色方案** - 主色调:绿色 (#1B7C5E - #2A9D7E 渐变) - 强调色:红色 (#FF4D6A) - 用于提示信息 - 背景色:浅灰 (#F5F5F5) 2. **字体大小** - 导航标题:36rpx - 页面标题:40rpx - 正文内容:26-32rpx - 提示文字:22-24rpx 3. **间距与圆角** - 卡片圆角:16rpx - 按钮圆角:8-16rpx - 标准间距:30rpx - 内边距:20-40rpx 4. **交互效果** - 按钮点击反馈 - 分数增减控制 - 多选框交互 - 页面跳转动画 ## 功能说明 ### 评分规则 - 分数范围:5.0 - 10.0 分 - 精度:0.001 分 - 评委评分保留3位小数 - 裁判长可修改总分 ±0.005 分 ### 权限区分 - **普通评委**:仅能查看和评分自己负责的场地和项目 - **裁判长**:可查看所有场地和项目,可修改评分 ### 扣分项 - 支持多选 - 每个项目可配置不同的扣分项 - 扣分项选择后自动计入总分 ## 🚀 API对接状态 ### ✅ 前端已完全准备就绪(100%) 本项目已完成API对接准备工作,可以立即开始后端对接: - ✅ **dataAdapter架构** - 支持Mock/API双模式无缝切换 - ✅ **API接口定义** - 9个接口全部定义完成 - ✅ **网络请求封装** - 统一的错误处理和Token管理 - ✅ **Mock数据完整** - 可独立演示所有功能 - ✅ **文档体系完善** - 21个文档,约25,000+行 ### 📋 快速开始API对接 #### 1. 配置后端地址(30秒) 编辑 `config/env.config.js`: ```javascript apiBaseURL: 'http://localhost:8080' // 修改为实际后端地址 ``` #### 2. 切换数据模式 ```javascript // Mock模式(后端未就绪时) dataMode: 'mock' // API模式(后端就绪后) dataMode: 'api' ``` #### 3. 查看文档 - **快速上手**: [API对接快速启动指南.md](doc/API对接快速启动指南.md) - 5分钟快速上手 - **后端开发**: [后端接口开发清单.md](doc/后端接口开发清单.md) - 详细的开发规范 - **前端联调**: [前端API对接指南.md](doc/前端API对接指南.md) - 前端联调指南 - **快速参考**: [快速参考.md](快速参考.md) - 一页纸快速参考 ### ⚠️ 后端待开发接口(5个) | 接口 | 路径 | 优先级 | 工作量 | |------|------|--------|--------| | 登录验证 | `POST /api/mini/login` | 🔴 高 | 2天 | | 普通评委选手列表 | `GET /api/mini/athletes` | 🔴 高 | 1天 | | 裁判长选手列表 | `GET /api/mini/athletes/admin` | 🟡 中 | 1天 | | 评分详情 | `GET /api/mini/score/detail/{id}` | 🟡 中 | 1天 | | 修改评分 | `PUT /api/mini/score/modify` | 🟡 中 | 1天 | **预计总工作量**: 6人天(约1周) 详细规范请查看:[后端接口开发清单.md](doc/后端接口开发清单.md) ### 📊 项目状态 ``` 前端开发: ████████████████████ 100% ✅ 后端开发: ████████░░░░░░░░░░░░ 44% ⚠️ 文档完成: ████████████████████ 100% ✅ ``` 查看实时状态:[项目状态看板.md](项目状态看板.md) ## 注意事项 1. ✅ 本项目已完成API对接准备,支持Mock/API双模式 2. ✅ Mock模式下所有功能可独立演示 3. ✅ API模式下需要后端实现5个专用接口 4. ✅ 页面跳转已配置,可直接运行演示 5. ✅ 适配了主流手机屏幕尺寸 ## 许可证 MIT License ## 联系方式 如有问题或建议,请联系项目负责人。