宅房 7bd197f4ac Mock版本完成 - UI冻结版本
完成内容:
- 5个完整的UI页面(登录、评分列表、评分详情、多场地列表、修改评分)
- 完整的Mock数据展示
- 完整的业务逻辑实现
- 文档体系建立(2000+行文档)

文档包含:
- 项目概述.md
- 页面功能说明.md
- API接口设计.md (17个接口)
- 数据结构设计.md (17个接口定义)
- 功能模块划分.md
- 后端实现对比报告.md
- 数据可行性分析报告.md (95分评估)
- 保护Mock版本的实施方案.md (4层保护机制)
- API对接完成度检查报告.md

此版本为Mock原型版本,所有UI功能完整,数据为硬编码Mock数据。
2025-12-11 13:22:19 +08:00
2025-12-11 13:22:19 +08:00
2025-11-28 11:04:55 +08:00
2025-12-11 13:22:19 +08:00
2025-11-28 11:04:55 +08:00
2025-11-28 11:04:55 +08:00
2025-11-28 11:04:55 +08:00
2025-11-28 11:04:55 +08:00
2025-11-28 11:04:55 +08:00
2025-11-28 11:04:55 +08:00
2025-11-28 11:04:55 +08:00
2025-11-28 11:04:55 +08:00
2025-11-28 11:04:55 +08:00
2025-11-28 11:04:55 +08:00
2025-11-28 11:04:55 +08:00
2025-11-28 11:04:55 +08:00
2025-11-28 11:04:55 +08:00

武术评分系统 - 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

  2. 打开项目

    • 打开HBuilderX
    • 点击菜单:文件 -> 打开目录
    • 选择本项目的根目录:martial-admin-mini
  3. 运行到H5

    • 在项目管理器中,右键点击项目根目录
    • 选择:运行 -> 运行到浏览器 -> Chrome或其他浏览器
    • 浏览器会自动打开并显示项目
  4. 运行到微信小程序

    • 首先安装并打开微信开发者工具
    • 在HBuilderX中右键点击项目根目录
    • 选择:运行 -> 运行到小程序模拟器 -> 微信开发者工具
    • 首次运行会提示配置小程序工具路径,按提示配置即可

常见问题解决

问题1HBuilderX提示"未安装依赖"或"缺少插件"

解决方案:

  • 点击HBuilderX顶部菜单工具 -> 插件安装
  • 安装以下插件:
    • uni-app编译器必需
    • App真机运行如需真机调试
    • 微信小程序支持(如需开发小程序)

问题2运行时报错"Cannot find module"

解决方案:

# 在项目根目录执行
npm install

问题3小程序无法运行

解决方案:

  1. 确保已安装微信开发者工具
  2. 在HBuilderX中配置微信开发者工具路径
    • 工具 -> 设置 -> 运行配置 -> 小程序运行配置
    • 配置微信开发者工具的安装路径
  3. 在manifest.json中配置小程序appid或使用测试号

问题4H5运行时样式异常

解决方案:

  • 清除浏览器缓存后重新运行
  • 或使用Ctrl+F5强制刷新

开发指南

环境要求

  • HBuilderX 3.0+ (推荐)
  • 或 Node.js 12+ + Vue CLI
  • 微信开发者工具 (小程序开发需要)

方式一使用HBuilderX推荐

  1. 使用HBuilderX打开项目根目录
  2. 点击运行 -> 运行到浏览器 (H5开发)
  3. 或点击运行 -> 运行到小程序模拟器 -> 微信开发者工具

方式二:使用命令行

安装依赖

npm install

运行项目

H5开发

npm run dev:h5

微信小程序开发

npm run dev:mp-weixin

构建H5

npm run build:h5

构建微信小程序

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 分

权限区分

  • 普通评委:仅能查看和评分自己负责的场地和项目
  • 裁判长:可查看所有场地和项目,可修改评分

扣分项

  • 支持多选
  • 每个项目可配置不同的扣分项
  • 扣分项选择后自动计入总分

注意事项

  1. 本项目为静态实现,未包含后端接口对接
  2. 所有数据均为静态mock数据
  3. 页面跳转已配置,可直接运行演示
  4. 适配了主流手机屏幕尺寸

后续开发建议

如需接入真实业务,建议进行以下开发:

  1. 接入后端API接口
  2. 实现用户身份验证
  3. 实现实时数据同步
  4. 添加数据持久化存储
  5. 增加网络异常处理
  6. 优化性能和加载速度
  7. 添加数据加密和安全验证

许可证

MIT License

联系方式

如有问题或建议,请联系项目负责人。

Description
No description provided
Readme 1.4 MiB
Languages
Vue 60.5%
JavaScript 31%
HTML 6.4%
SCSS 1.5%
CSS 0.5%