Compare commits
41 Commits
73396182f9
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
412069524e | ||
|
|
53cc4600a8 | ||
|
|
3b05e7fc28 | ||
|
|
0ab8312bbb | ||
|
|
13eb311575 | ||
|
|
4eddc5a194 | ||
|
|
c249c9e213 | ||
|
|
5911a55432 | ||
|
|
adbafedb5b | ||
|
|
a56ca34cc3 | ||
|
|
1e053f62c0 | ||
|
|
bb0f620d12 | ||
|
|
ecb9fcba6b | ||
|
|
3baa14a6b6 | ||
|
|
b5a8c811aa | ||
|
|
c6c9f9a5d1 | ||
|
|
d22944e575 | ||
|
|
5a09cceab0 | ||
|
|
541c770f27 | ||
| 9c063a9779 | |||
|
|
d0b39a0319 | ||
| 47fc5544ca | |||
|
|
012f641daa | ||
|
|
641e398aae | ||
| 0ccf8d7c6f | |||
| 1c79d5ea95 | |||
| 78291bb76b | |||
|
|
0222a04dea | ||
|
|
8f0b8d5536 | ||
|
|
cdee00b503 | ||
|
|
59f3b9ff97 | ||
|
|
3ebcb44853 | ||
|
|
5dacd05cbb | ||
|
|
4ccc095b05 | ||
|
|
f2e5fed3b7 | ||
|
|
e9ed4e8e44 | ||
|
|
307653f3af | ||
|
|
198d9edf12 | ||
| 0f3cfee622 | |||
| 686fd16558 | |||
| 0042a0220f |
@@ -19,7 +19,20 @@
|
|||||||
"Bash(\"D:\\Program Files\\mysql-8.0.32-winx64\\bin\\mysql.exe\" -h localhost -P 3306 -u root -p123456 -D martial_db -e \"SHOW TABLES;\")",
|
"Bash(\"D:\\Program Files\\mysql-8.0.32-winx64\\bin\\mysql.exe\" -h localhost -P 3306 -u root -p123456 -D martial_db -e \"SHOW TABLES;\")",
|
||||||
"Bash(\"D:\\Program Files\\mysql-8.0.32-winx64\\bin\\mysql.exe\" -h localhost -P 3306 -u root -p123456 -D martial_db -e \"DESCRIBE athlete;\")",
|
"Bash(\"D:\\Program Files\\mysql-8.0.32-winx64\\bin\\mysql.exe\" -h localhost -P 3306 -u root -p123456 -D martial_db -e \"DESCRIBE athlete;\")",
|
||||||
"Bash(tree:*)",
|
"Bash(tree:*)",
|
||||||
"Bash(find:*)"
|
"Bash(find:*)",
|
||||||
|
"Bash(\"D:\\\\Program Files\\\\mysql-8.0.32-winx64\\\\bin\\\\mysql.exe\" -h localhost -P 3306 -u root -p123456 -D martial_db -e \"SHOW TABLES LIKE ''%attachment%'';\")",
|
||||||
|
"Bash(\"D:\\\\Program Files\\\\mysql-8.0.32-winx64\\\\bin\\\\mysql.exe\" -h localhost -P 3306 -u root -p123456 -D martial_db -e \"DESCRIBE martial_competition_rules_attachment;\")",
|
||||||
|
"Bash(ls -la \"d:\\\\workspace\\\\31.比赛项目\\\\project\\\\martial-mini\\\\src\\\\pages\\\\attachment-view\"\" 2>/dev/null && ls -la \"d:workspace31.比赛项目projectmartial-minisrcpagesevent-photos\"\")",
|
||||||
|
"Bash(npm install:*)",
|
||||||
|
"Bash(npm uninstall:*)",
|
||||||
|
"Bash(\"D:\\\\Program Files\\\\mysql-8.0.32-winx64\\\\bin\\\\mysql.exe\" -h localhost -P 3306 -u root -p123456 -D martial_db -e \"SELECT id, name FROM martial_competition LIMIT 5;\")",
|
||||||
|
"Bash(\"D:\\\\Program Files\\\\mysql-8.0.32-winx64\\\\bin\\\\mysql.exe\" -h localhost -P 3306 -u root -p123456 -D martial_db -e \"DESCRIBE martial_competition;\")",
|
||||||
|
"Bash(\"D:\\\\Program Files\\\\mysql-8.0.32-winx64\\\\bin\\\\mysql.exe\" -h localhost -P 3306 -u root -p123456 -D martial_db -e \"SELECT id, competition_name, total_participants FROM martial_competition WHERE is_deleted = 0 LIMIT 5;\")",
|
||||||
|
"Bash(\"D:\\\\Program Files\\\\mysql-8.0.32-winx64\\\\bin\\\\mysql.exe\" -h localhost -P 3306 -u root -p123456 -D martial_db -e \"DESCRIBE martial_registration_order;\")",
|
||||||
|
"Bash(\"D:\\\\Program Files\\\\mysql-8.0.32-winx64\\\\bin\\\\mysql.exe\":*)",
|
||||||
|
"Bash(\"D:\\\\Program Files\\\\mysql-8.0.32-winx64\\\\bin\\\\mysql.exe\" -h localhost -P 3306 -u root -p123456 -D martial_db -e \"SELECT id, competition_name, total_participants FROM martial_competition WHERE id = 200;\")",
|
||||||
|
"Bash(\"D:\\\\Program Files\\\\mysql-8.0.32-winx64\\\\bin\\\\mysql.exe\" -h localhost -P 3306 -u root -p123456 -D martial_db -e \"SELECT competition_id, COUNT\\(*\\) as order_count, SUM\\(total_participants\\) as total_people, is_deleted FROM martial_registration_order WHERE competition_id = 200 GROUP BY competition_id, is_deleted;\")",
|
||||||
|
"Bash(\"D:\\\\Program Files\\\\mysql-8.0.32-winx64\\\\bin\\\\mysql.exe\" -h localhost -P 3306 -u root -p123456 -D martial_db -e \"SELECT id, competition_name, total_participants, is_deleted FROM martial_competition WHERE id = 200;\")"
|
||||||
],
|
],
|
||||||
"deny": [],
|
"deny": [],
|
||||||
"ask": []
|
"ask": []
|
||||||
|
|||||||
@@ -10,9 +10,12 @@ trigger:
|
|||||||
steps:
|
steps:
|
||||||
- name: build
|
- name: build
|
||||||
image: node:16-alpine
|
image: node:16-alpine
|
||||||
|
environment:
|
||||||
|
NODE_OPTIONS: --max-old-space-size=4096
|
||||||
commands:
|
commands:
|
||||||
- npm install
|
- npm install --legacy-peer-deps
|
||||||
- ./node_modules/.bin/cross-env NODE_ENV=production UNI_PLATFORM=h5 ./node_modules/.bin/vue-cli-service build
|
- npm run build:h5
|
||||||
|
- ls -la dist/dev/h5/
|
||||||
|
|
||||||
- name: deploy
|
- name: deploy
|
||||||
image: appleboy/drone-scp
|
image: appleboy/drone-scp
|
||||||
@@ -21,7 +24,7 @@ steps:
|
|||||||
username: root
|
username: root
|
||||||
key:
|
key:
|
||||||
from_secret: ssh_key
|
from_secret: ssh_key
|
||||||
source: dist/build/h5/*
|
source: dist/dev/h5/*
|
||||||
target: /var/www/martial-mini
|
target: /var/www/martial-mini
|
||||||
strip_components: 3
|
strip_components: 3
|
||||||
|
|
||||||
|
|||||||
24
.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
/dist
|
||||||
|
|
||||||
|
/tests/e2e/videos/
|
||||||
|
/tests/e2e/screenshots/
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# log files
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
|
||||||
|
# editor directories and files
|
||||||
|
.idea
|
||||||
|
.vscode
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw*
|
||||||
11
Dockerfile.fixed
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
FROM node:16-alpine as builder
|
||||||
|
WORKDIR /app
|
||||||
|
COPY package*.json ./
|
||||||
|
RUN npm install
|
||||||
|
COPY . .
|
||||||
|
RUN npm run build:h5
|
||||||
|
|
||||||
|
FROM nginx:alpine
|
||||||
|
COPY --from=builder /app/dist/dev/h5 /usr/share/nginx/html
|
||||||
|
EXPOSE 80
|
||||||
|
CMD ["nginx", "-g", "daemon off;"]
|
||||||
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
|
|
||||||
|
|||||||
@@ -61,5 +61,28 @@ export default {
|
|||||||
*/
|
*/
|
||||||
getCompetitionRules(competitionId) {
|
getCompetitionRules(competitionId) {
|
||||||
return request.get('/martial/competition/rules', { competitionId })
|
return request.get('/martial/competition/rules', { competitionId })
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取赛事附件列表
|
||||||
|
* @param {Object} params { competitionId, type }
|
||||||
|
* type: info-信息发布, rules-赛事规程, schedule-活动日程,
|
||||||
|
* results-成绩, medals-奖牌榜, photos-图片直播
|
||||||
|
* @returns {Promise}
|
||||||
|
*/
|
||||||
|
getAttachments(params = {}) {
|
||||||
|
return request.get('/martial/competition/attachment/getByType', {
|
||||||
|
competitionId: params.competitionId,
|
||||||
|
attachmentType: params.type
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取赛事所有附件
|
||||||
|
* @param {String|Number} competitionId 赛事ID
|
||||||
|
* @returns {Promise}
|
||||||
|
*/
|
||||||
|
getAllAttachments(competitionId) {
|
||||||
|
return request.get('/martial/competition/attachment/getByCompetition', { competitionId })
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
9
babel.config.js
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
module.exports = {
|
||||||
|
presets: [
|
||||||
|
'@vue/cli-plugin-babel/preset'
|
||||||
|
],
|
||||||
|
plugins: [
|
||||||
|
'@babel/plugin-proposal-optional-chaining',
|
||||||
|
'@babel/plugin-proposal-nullish-coalescing-operator'
|
||||||
|
]
|
||||||
|
}
|
||||||
17257
package-lock.json
generated
29
package.json
@@ -4,27 +4,22 @@
|
|||||||
"description": "武术赛事报名系统",
|
"description": "武术赛事报名系统",
|
||||||
"main": "main.js",
|
"main": "main.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev:h5": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service serve",
|
"dev:h5": "vue-cli-service serve",
|
||||||
"build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service build"
|
"build:h5": "vue-cli-service build",
|
||||||
|
"dev:mp-weixin": "uni -p mp-weixin",
|
||||||
|
"build:mp-weixin": "uni build -p mp-weixin"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@dcloudio/uni-app": "^2.0.2-3081220230817001",
|
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
|
||||||
"@dcloudio/uni-cli-i18n": "^2.0.2-3081220230817001",
|
"@babel/plugin-proposal-optional-chaining": "^7.21.0",
|
||||||
"@dcloudio/uni-h5": "^2.0.2-3081220230817001",
|
"@dcloudio/uni-cli-i18n": "^2.0.2-4080720251210002",
|
||||||
"@dcloudio/uni-i18n": "^2.0.2-3081220230817001",
|
"@dcloudio/uni-h5": "^2.0.2-4080720251210002",
|
||||||
"@dcloudio/uni-migration": "^2.0.2-3081220230817001",
|
"@dcloudio/uni-i18n": "^2.0.2-4080720251210002",
|
||||||
"autoprefixer": "^9.8.8",
|
"@dcloudio/uni-migration": "^2.0.2-4080720251210002",
|
||||||
"cache-loader": "^4.1.0",
|
"cache-loader": "^4.1.0",
|
||||||
"copy-webpack-plugin": "^6.4.1",
|
|
||||||
"css-loader": "^3.6.0",
|
|
||||||
"file-loader": "^6.2.0",
|
|
||||||
"html-webpack-plugin": "^4.5.2",
|
"html-webpack-plugin": "^4.5.2",
|
||||||
"postcss-loader": "^3.0.0",
|
"pdfjs-dist": "^2.16.105",
|
||||||
"thread-loader": "^2.1.3",
|
"vue": "^2.6.14"
|
||||||
"url-loader": "^4.1.1",
|
|
||||||
"vue": "^2.6.14",
|
|
||||||
"vue-loader": "^15.11.1",
|
|
||||||
"webpack": "^4.47.0"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@dcloudio/uni-cli-shared": "^2.0.2-3081220230817001",
|
"@dcloudio/uni-cli-shared": "^2.0.2-3081220230817001",
|
||||||
|
|||||||
@@ -94,15 +94,6 @@
|
|||||||
<text class="toast-text">{{ toastMessage }}</text>
|
<text class="toast-text">{{ toastMessage }}</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 提示文字 -->
|
|
||||||
<view class="info-text">
|
|
||||||
<text class="info-hint">默认关闭,可切换开关</text>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="warning-text">
|
|
||||||
<text>联系人用于接收比赛信息,成绩和证书。</text>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 按钮 -->
|
<!-- 按钮 -->
|
||||||
<view class="btn-wrapper">
|
<view class="btn-wrapper">
|
||||||
<view class="btn save-btn disabled" v-if="!isFormValid">保存</view>
|
<view class="btn save-btn disabled" v-if="!isFormValid">保存</view>
|
||||||
@@ -219,7 +210,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.form-label {
|
.form-label {
|
||||||
width: 180rpx;
|
width: 280rpx;
|
||||||
font-size: 30rpx;
|
font-size: 30rpx;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -126,6 +126,8 @@ export default {
|
|||||||
organization: '',
|
organization: '',
|
||||||
phone: ''
|
phone: ''
|
||||||
},
|
},
|
||||||
|
competitionId: '',
|
||||||
|
projectIds: [],
|
||||||
errors: [],
|
errors: [],
|
||||||
showHint: false,
|
showHint: false,
|
||||||
showToast: false,
|
showToast: false,
|
||||||
@@ -133,6 +135,19 @@ export default {
|
|||||||
showIdTypePicker: false
|
showIdTypePicker: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
// 接收赛事ID和项目ID
|
||||||
|
if (options.competitionId) {
|
||||||
|
this.competitionId = options.competitionId
|
||||||
|
}
|
||||||
|
if (options.projectIds) {
|
||||||
|
this.projectIds = options.projectIds.split(',').map(id => parseInt(id))
|
||||||
|
}
|
||||||
|
console.log('新增选手页面接收参数:', {
|
||||||
|
competitionId: this.competitionId,
|
||||||
|
projectIds: this.projectIds
|
||||||
|
})
|
||||||
|
},
|
||||||
computed: {
|
computed: {
|
||||||
isFormValid() {
|
isFormValid() {
|
||||||
return (
|
return (
|
||||||
@@ -252,7 +267,7 @@ export default {
|
|||||||
const info = this.extractInfoFromIdCard(this.formData.idCard)
|
const info = this.extractInfoFromIdCard(this.formData.idCard)
|
||||||
|
|
||||||
// 调用API保存选手信息(使用后端实体类的字段名)
|
// 调用API保存选手信息(使用后端实体类的字段名)
|
||||||
await athleteAPI.submitAthlete({
|
const submitData = {
|
||||||
playerName: this.formData.name,
|
playerName: this.formData.name,
|
||||||
idCard: this.formData.idCard,
|
idCard: this.formData.idCard,
|
||||||
teamName: this.formData.team,
|
teamName: this.formData.team,
|
||||||
@@ -262,7 +277,19 @@ export default {
|
|||||||
gender: info.gender,
|
gender: info.gender,
|
||||||
age: info.age,
|
age: info.age,
|
||||||
birthDate: info.birthDate
|
birthDate: info.birthDate
|
||||||
})
|
}
|
||||||
|
|
||||||
|
// 如果有赛事ID和项目ID,一起提交
|
||||||
|
if (this.competitionId) {
|
||||||
|
submitData.competitionId = parseInt(this.competitionId)
|
||||||
|
}
|
||||||
|
if (this.projectIds && this.projectIds.length > 0) {
|
||||||
|
// 如果有多个项目,取第一个项目ID
|
||||||
|
submitData.projectId = this.projectIds[0]
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('提交选手数据:', submitData)
|
||||||
|
await athleteAPI.submitAthlete(submitData)
|
||||||
|
|
||||||
// 保存成功
|
// 保存成功
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
@@ -415,9 +442,9 @@ export default {
|
|||||||
.btn {
|
.btn {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 30rpx;
|
padding: 24rpx;
|
||||||
border-radius: 12rpx;
|
border-radius: 12rpx;
|
||||||
font-size: 32rpx;
|
font-size: 30rpx;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
880
pages/attachment-view/attachment-view.vue
Normal file
@@ -0,0 +1,880 @@
|
|||||||
|
<template>
|
||||||
|
<view class="attachment-page">
|
||||||
|
<!-- 赛事信息卡片 -->
|
||||||
|
<view class="event-info-card">
|
||||||
|
<view class="event-title">{{ competitionName || '赛事名称' }}</view>
|
||||||
|
<view class="event-time-row">
|
||||||
|
<view class="time-item">
|
||||||
|
<text class="time-label">开始时间</text>
|
||||||
|
<text class="time-value">{{ startTime || '待定' }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="time-divider"></view>
|
||||||
|
<view class="time-item">
|
||||||
|
<text class="time-label">结束时间</text>
|
||||||
|
<text class="time-value">{{ endTime || '待定' }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 加载状态 -->
|
||||||
|
<view class="loading-state" v-if="loading">
|
||||||
|
<view class="loading-spinner"></view>
|
||||||
|
<text class="loading-text">加载中...</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 附件列表 -->
|
||||||
|
<view class="attachments-section" v-if="!loading && attachments.length > 0">
|
||||||
|
<view class="section-header">
|
||||||
|
<text class="section-title">{{ pageTitle }}文件</text>
|
||||||
|
<text class="section-count">共{{ attachments.length }}个文件</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="attachments-list">
|
||||||
|
<view
|
||||||
|
class="attachment-item"
|
||||||
|
v-for="(file, index) in attachments"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<!-- 文件图标 -->
|
||||||
|
<view class="file-icon" :class="'icon-' + file.fileType">
|
||||||
|
<text class="icon-text">{{ getFileIconText(file.fileType) }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 文件信息 -->
|
||||||
|
<view class="file-content">
|
||||||
|
<text class="file-name">{{ file.fileName }}</text>
|
||||||
|
<view class="file-meta">
|
||||||
|
<text class="meta-item">{{ file.fileSize }}</text>
|
||||||
|
<text class="meta-dot" v-if="file.uploadTime">·</text>
|
||||||
|
<text class="meta-item" v-if="file.uploadTime">{{ file.uploadTime }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 操作按钮 -->
|
||||||
|
<view class="file-actions">
|
||||||
|
<view class="action-btn preview-btn" @click="previewFile(file)">
|
||||||
|
<text class="action-text">预览</text>
|
||||||
|
</view>
|
||||||
|
<view class="action-btn download-btn" @click="downloadFile(file)">
|
||||||
|
<text class="action-text">下载</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 空状态 -->
|
||||||
|
<view class="empty-state" v-if="!loading && attachments.length === 0">
|
||||||
|
<image class="empty-image" src="/static/images/empty.png" mode="aspectFit" />
|
||||||
|
<text class="empty-title">暂无{{ pageTitle }}文件</text>
|
||||||
|
<text class="empty-desc">相关文件正在整理中,请稍后查看</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- PDF预览弹窗 (仅H5) -->
|
||||||
|
<!-- #ifdef H5 -->
|
||||||
|
<view class="preview-modal" v-if="showPreview" @click="closePreview">
|
||||||
|
<view class="preview-container" @click.stop>
|
||||||
|
<view class="preview-header">
|
||||||
|
<text class="preview-title">{{ previewFileName }}</text>
|
||||||
|
<view class="preview-close" @click="closePreview">
|
||||||
|
<text class="close-icon">×</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="preview-body">
|
||||||
|
<iframe
|
||||||
|
:src="previewUrl"
|
||||||
|
class="preview-iframe"
|
||||||
|
frameborder="0"
|
||||||
|
></iframe>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- #endif -->
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import competitionAPI from '@/api/competition.js'
|
||||||
|
|
||||||
|
// 页面类型配置
|
||||||
|
const PAGE_CONFIG = {
|
||||||
|
'info': { title: '信息发布', type: 'info' },
|
||||||
|
'rules': { title: '赛事规程', type: 'rules' },
|
||||||
|
'schedule': { title: '活动日程', type: 'schedule' },
|
||||||
|
'score': { title: '成绩公告', type: 'results' },
|
||||||
|
'results': { title: '成绩公告', type: 'results' },
|
||||||
|
'awards': { title: '奖牌榜', type: 'medals' },
|
||||||
|
'medals': { title: '奖牌榜', type: 'medals' },
|
||||||
|
'photos': { title: '图片直播', type: 'photos' }
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading: true,
|
||||||
|
pageType: 'rules',
|
||||||
|
pageTitle: '赛事规程',
|
||||||
|
competitionId: '',
|
||||||
|
competitionName: '',
|
||||||
|
startTime: '',
|
||||||
|
endTime: '',
|
||||||
|
attachments: [],
|
||||||
|
// H5预览相关
|
||||||
|
showPreview: false,
|
||||||
|
previewUrl: '',
|
||||||
|
previewFileName: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
// 获取页面类型
|
||||||
|
if (options.type && PAGE_CONFIG[options.type]) {
|
||||||
|
this.pageType = options.type
|
||||||
|
this.pageTitle = PAGE_CONFIG[options.type].title
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取赛事ID
|
||||||
|
if (options.competitionId || options.eventId) {
|
||||||
|
this.competitionId = options.competitionId || options.eventId
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取赛事名称
|
||||||
|
if (options.name) {
|
||||||
|
this.competitionName = decodeURIComponent(options.name)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取比赛时间
|
||||||
|
if (options.startTime) {
|
||||||
|
this.startTime = decodeURIComponent(options.startTime)
|
||||||
|
}
|
||||||
|
if (options.endTime) {
|
||||||
|
this.endTime = decodeURIComponent(options.endTime)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置导航栏标题
|
||||||
|
uni.setNavigationBarTitle({
|
||||||
|
title: this.pageTitle
|
||||||
|
})
|
||||||
|
|
||||||
|
// 加载数据
|
||||||
|
this.loadData()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 加载数据
|
||||||
|
*/
|
||||||
|
async loadData() {
|
||||||
|
this.loading = true
|
||||||
|
try {
|
||||||
|
// 如果没有赛事信息,先获取赛事详情
|
||||||
|
if (!this.startTime || !this.endTime) {
|
||||||
|
await this.loadCompetitionInfo()
|
||||||
|
}
|
||||||
|
// 加载附件列表
|
||||||
|
await this.loadAttachments()
|
||||||
|
} finally {
|
||||||
|
this.loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 加载赛事信息
|
||||||
|
*/
|
||||||
|
async loadCompetitionInfo() {
|
||||||
|
try {
|
||||||
|
const res = await competitionAPI.getCompetitionDetail(this.competitionId)
|
||||||
|
if (res) {
|
||||||
|
this.competitionName = res.name || res.title || this.competitionName
|
||||||
|
this.startTime = this.formatDate(res.startTime || res.competitionStartTime)
|
||||||
|
this.endTime = this.formatDate(res.endTime || res.competitionEndTime)
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('加载赛事信息失败:', err)
|
||||||
|
// 使用模拟数据
|
||||||
|
this.startTime = '2025.12.12'
|
||||||
|
this.endTime = '2025.12.14'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 加载附件列表
|
||||||
|
*/
|
||||||
|
async loadAttachments() {
|
||||||
|
try {
|
||||||
|
// 使用 PAGE_CONFIG 映射的 type 值
|
||||||
|
const attachmentType = PAGE_CONFIG[this.pageType]?.type || this.pageType
|
||||||
|
console.log('=== 加载附件 ===')
|
||||||
|
console.log('competitionId:', this.competitionId)
|
||||||
|
console.log('pageType:', this.pageType)
|
||||||
|
console.log('attachmentType (发送给后端):', attachmentType)
|
||||||
|
|
||||||
|
const res = await competitionAPI.getAttachments({
|
||||||
|
competitionId: this.competitionId,
|
||||||
|
type: attachmentType
|
||||||
|
})
|
||||||
|
|
||||||
|
console.log('API返回结果:', res)
|
||||||
|
console.log('API返回结果类型:', typeof res)
|
||||||
|
console.log('是否为数组:', Array.isArray(res))
|
||||||
|
|
||||||
|
// 兼容不同的返回格式
|
||||||
|
let attachmentList = []
|
||||||
|
if (Array.isArray(res)) {
|
||||||
|
attachmentList = res
|
||||||
|
} else if (res && res.records && Array.isArray(res.records)) {
|
||||||
|
// 分页格式
|
||||||
|
attachmentList = res.records
|
||||||
|
} else if (res && typeof res === 'object') {
|
||||||
|
// 可能是单个对象,转为数组
|
||||||
|
attachmentList = [res]
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('处理后的附件列表:', attachmentList)
|
||||||
|
|
||||||
|
if (attachmentList.length > 0) {
|
||||||
|
this.attachments = attachmentList.map(file => ({
|
||||||
|
id: file.id,
|
||||||
|
fileName: file.fileName || file.name,
|
||||||
|
fileUrl: file.fileUrl || file.url,
|
||||||
|
fileSize: this.formatFileSize(file.fileSize || file.size),
|
||||||
|
fileType: this.getFileType(file.fileName || file.name),
|
||||||
|
uploadTime: this.formatDate(file.uploadTime || file.createTime)
|
||||||
|
}))
|
||||||
|
console.log('附件加载成功,共', this.attachments.length, '个文件')
|
||||||
|
} else {
|
||||||
|
console.log('没有附件数据,显示空状态')
|
||||||
|
this.attachments = []
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('=== 加载附件失败 ===')
|
||||||
|
console.error('错误详情:', err)
|
||||||
|
console.error('错误消息:', err.message)
|
||||||
|
console.error('错误代码:', err.code)
|
||||||
|
// 显示空状态,不使用模拟数据,方便调试
|
||||||
|
this.attachments = []
|
||||||
|
// 如果需要模拟数据,取消下面的注释
|
||||||
|
// this.loadMockData()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 加载模拟数据
|
||||||
|
*/
|
||||||
|
loadMockData() {
|
||||||
|
const mockDataMap = {
|
||||||
|
'info': [
|
||||||
|
{ id: '1', fileName: '2025年郑州武术大赛通知.pdf', fileUrl: '', fileSize: '1.2 MB', fileType: 'pdf', uploadTime: '2025-12-20' }
|
||||||
|
],
|
||||||
|
'rules': [
|
||||||
|
{ id: '1', fileName: '2025年郑州武术大赛竞赛规程.pdf', fileUrl: '', fileSize: '2.5 MB', fileType: 'pdf', uploadTime: '2025-12-18' },
|
||||||
|
{ id: '2', fileName: '参赛报名表.pdf', fileUrl: '', fileSize: '156 KB', fileType: 'pdf', uploadTime: '2025-12-18' }
|
||||||
|
],
|
||||||
|
'schedule': [
|
||||||
|
{ id: '1', fileName: '比赛日程安排表.pdf', fileUrl: '', fileSize: '890 KB', fileType: 'pdf', uploadTime: '2025-12-19' }
|
||||||
|
],
|
||||||
|
'score': [
|
||||||
|
{ id: '1', fileName: '比赛成绩公告.pdf', fileUrl: '', fileSize: '1.8 MB', fileType: 'pdf', uploadTime: '2025-12-25' }
|
||||||
|
],
|
||||||
|
'results': [
|
||||||
|
{ id: '1', fileName: '比赛成绩公告.pdf', fileUrl: '', fileSize: '1.8 MB', fileType: 'pdf', uploadTime: '2025-12-25' }
|
||||||
|
],
|
||||||
|
'awards': [
|
||||||
|
{ id: '1', fileName: '奖牌榜统计.pdf', fileUrl: '', fileSize: '520 KB', fileType: 'pdf', uploadTime: '2025-12-25' }
|
||||||
|
],
|
||||||
|
'medals': [
|
||||||
|
{ id: '1', fileName: '奖牌榜统计.pdf', fileUrl: '', fileSize: '520 KB', fileType: 'pdf', uploadTime: '2025-12-25' }
|
||||||
|
],
|
||||||
|
'photos': [
|
||||||
|
{ id: '1', fileName: '比赛精彩瞬间.pdf', fileUrl: '', fileSize: '15.6 MB', fileType: 'pdf', uploadTime: '2025-12-25' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
this.attachments = mockDataMap[this.pageType] || []
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 预览文件
|
||||||
|
*/
|
||||||
|
previewFile(file) {
|
||||||
|
if (!file.fileUrl) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '文件暂不可用',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// #ifdef H5
|
||||||
|
// H5端:根据文件类型选择预览方式
|
||||||
|
if (file.fileType === 'pdf') {
|
||||||
|
// 方案1: 直接在新标签页打开PDF(浏览器内置PDF阅读器)
|
||||||
|
window.open(file.fileUrl, '_blank')
|
||||||
|
|
||||||
|
// 方案2: 使用微软 Office Online Viewer(备选,需要公网可访问)
|
||||||
|
// const msViewerUrl = `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(file.fileUrl)}`
|
||||||
|
// window.open(msViewerUrl, '_blank')
|
||||||
|
|
||||||
|
// 方案3: 使用内嵌弹窗(如果服务器支持)
|
||||||
|
// this.previewFileName = file.fileName
|
||||||
|
// this.previewUrl = file.fileUrl
|
||||||
|
// this.showPreview = true
|
||||||
|
} else if (['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(file.fileType)) {
|
||||||
|
// 图片使用弹窗显示
|
||||||
|
this.previewFileName = file.fileName
|
||||||
|
this.previewUrl = file.fileUrl
|
||||||
|
this.showPreview = true
|
||||||
|
} else if (['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'].includes(file.fileType)) {
|
||||||
|
// Office 文档使用微软在线预览
|
||||||
|
const msViewerUrl = `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(file.fileUrl)}`
|
||||||
|
window.open(msViewerUrl, '_blank')
|
||||||
|
} else {
|
||||||
|
// 其他文件类型,在新窗口打开
|
||||||
|
window.open(file.fileUrl, '_blank')
|
||||||
|
}
|
||||||
|
return
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifndef H5
|
||||||
|
// 非H5端使用下载+打开文档的方式
|
||||||
|
uni.showLoading({
|
||||||
|
title: '加载中...'
|
||||||
|
})
|
||||||
|
|
||||||
|
uni.downloadFile({
|
||||||
|
url: file.fileUrl,
|
||||||
|
success: (res) => {
|
||||||
|
uni.hideLoading()
|
||||||
|
if (res.statusCode === 200) {
|
||||||
|
uni.openDocument({
|
||||||
|
filePath: res.tempFilePath,
|
||||||
|
fileType: file.fileType,
|
||||||
|
showMenu: true,
|
||||||
|
success: () => {
|
||||||
|
console.log('打开文档成功')
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
console.error('打开文档失败:', err)
|
||||||
|
uni.showToast({
|
||||||
|
title: '无法预览此文件',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
uni.showToast({
|
||||||
|
title: '文件加载失败',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
uni.hideLoading()
|
||||||
|
console.error('下载失败:', err)
|
||||||
|
uni.showToast({
|
||||||
|
title: '下载失败,请重试',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 关闭预览弹窗
|
||||||
|
*/
|
||||||
|
closePreview() {
|
||||||
|
this.showPreview = false
|
||||||
|
this.previewUrl = ''
|
||||||
|
this.previewFileName = ''
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 下载文件
|
||||||
|
*/
|
||||||
|
downloadFile(file) {
|
||||||
|
if (!file.fileUrl) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '文件暂不可用',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
uni.showLoading({
|
||||||
|
title: '下载中...'
|
||||||
|
})
|
||||||
|
|
||||||
|
uni.downloadFile({
|
||||||
|
url: file.fileUrl,
|
||||||
|
success: (res) => {
|
||||||
|
uni.hideLoading()
|
||||||
|
if (res.statusCode === 200) {
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
// 微信小程序保存文件
|
||||||
|
uni.saveFile({
|
||||||
|
tempFilePath: res.tempFilePath,
|
||||||
|
success: (saveRes) => {
|
||||||
|
uni.showToast({
|
||||||
|
title: '下载成功',
|
||||||
|
icon: 'success'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
fail: () => {
|
||||||
|
// 保存失败则打开文档
|
||||||
|
uni.openDocument({
|
||||||
|
filePath: res.tempFilePath,
|
||||||
|
fileType: file.fileType,
|
||||||
|
showMenu: true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifdef H5
|
||||||
|
// H5端打开新窗口下载
|
||||||
|
window.open(file.fileUrl)
|
||||||
|
uni.showToast({
|
||||||
|
title: '开始下载',
|
||||||
|
icon: 'success'
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
// APP端保存到相册或文件
|
||||||
|
uni.saveFile({
|
||||||
|
tempFilePath: res.tempFilePath,
|
||||||
|
success: (saveRes) => {
|
||||||
|
uni.showToast({
|
||||||
|
title: '下载成功',
|
||||||
|
icon: 'success'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
fail: () => {
|
||||||
|
uni.openDocument({
|
||||||
|
filePath: res.tempFilePath,
|
||||||
|
fileType: file.fileType,
|
||||||
|
showMenu: true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
} else {
|
||||||
|
uni.showToast({
|
||||||
|
title: '下载失败',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
uni.hideLoading()
|
||||||
|
console.error('下载失败:', err)
|
||||||
|
uni.showToast({
|
||||||
|
title: '下载失败,请重试',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取文件类型
|
||||||
|
*/
|
||||||
|
getFileType(fileName) {
|
||||||
|
if (!fileName) return 'pdf'
|
||||||
|
const ext = fileName.split('.').pop().toLowerCase()
|
||||||
|
return ext
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取文件图标文字
|
||||||
|
*/
|
||||||
|
getFileIconText(fileType) {
|
||||||
|
const iconMap = {
|
||||||
|
'pdf': 'PDF',
|
||||||
|
'doc': 'DOC',
|
||||||
|
'docx': 'DOC',
|
||||||
|
'xls': 'XLS',
|
||||||
|
'xlsx': 'XLS',
|
||||||
|
'ppt': 'PPT',
|
||||||
|
'pptx': 'PPT',
|
||||||
|
'txt': 'TXT',
|
||||||
|
'jpg': 'IMG',
|
||||||
|
'jpeg': 'IMG',
|
||||||
|
'png': 'IMG',
|
||||||
|
'zip': 'ZIP',
|
||||||
|
'rar': 'RAR'
|
||||||
|
}
|
||||||
|
return iconMap[fileType] || 'FILE'
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 格式化文件大小
|
||||||
|
*/
|
||||||
|
formatFileSize(bytes) {
|
||||||
|
if (!bytes || bytes === 0) return '0 B'
|
||||||
|
if (typeof bytes === 'string') return bytes
|
||||||
|
|
||||||
|
const k = 1024
|
||||||
|
const sizes = ['B', 'KB', 'MB', 'GB']
|
||||||
|
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||||
|
return (bytes / Math.pow(k, i)).toFixed(1) + ' ' + sizes[i]
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 格式化日期
|
||||||
|
*/
|
||||||
|
formatDate(dateStr) {
|
||||||
|
if (!dateStr) return ''
|
||||||
|
const date = new Date(dateStr)
|
||||||
|
if (isNaN(date.getTime())) return dateStr
|
||||||
|
const year = date.getFullYear()
|
||||||
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||||
|
const day = String(date.getDate()).padStart(2, '0')
|
||||||
|
return `${year}.${month}.${day}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.attachment-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 赛事信息卡片
|
||||||
|
.event-info-card {
|
||||||
|
background: #fff;
|
||||||
|
margin: 20rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-time-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background: #f8f8f8;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-item {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-label {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-value {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-divider {
|
||||||
|
width: 1rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
background: #e0e0e0;
|
||||||
|
margin: 0 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加载状态
|
||||||
|
.loading-state {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 120rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-spinner {
|
||||||
|
width: 60rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
border: 4rpx solid #f0f0f0;
|
||||||
|
border-top-color: #C93639;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: spin 0.8s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
to { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-text {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 附件区域
|
||||||
|
.attachments-section {
|
||||||
|
margin: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
padding: 0 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-count {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.attachments-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 附件项
|
||||||
|
.attachment-item {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 24rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20rpx;
|
||||||
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 文件图标
|
||||||
|
.file-icon {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
background: #C93639;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-icon.icon-pdf {
|
||||||
|
background: #E74C3C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-icon.icon-doc,
|
||||||
|
.file-icon.icon-docx {
|
||||||
|
background: #3498DB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-icon.icon-xls,
|
||||||
|
.file-icon.icon-xlsx {
|
||||||
|
background: #27AE60;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-icon.icon-ppt,
|
||||||
|
.file-icon.icon-pptx {
|
||||||
|
background: #E67E22;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-icon.icon-jpg,
|
||||||
|
.file-icon.icon-jpeg,
|
||||||
|
.file-icon.icon-png {
|
||||||
|
background: #9B59B6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-text {
|
||||||
|
font-size: 22rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 文件内容
|
||||||
|
.file-content {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-name {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-meta {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-item {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-dot {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 操作按钮
|
||||||
|
.file-actions {
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
gap: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-btn {
|
||||||
|
padding: 12rpx 24rpx;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
opacity: 0.8;
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-btn {
|
||||||
|
background: #C93639;
|
||||||
|
|
||||||
|
.action-text {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-btn {
|
||||||
|
background: #fff;
|
||||||
|
border: 1rpx solid #C93639;
|
||||||
|
|
||||||
|
.action-text {
|
||||||
|
color: #C93639;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 空状态
|
||||||
|
.empty-state {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 120rpx 60rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-image {
|
||||||
|
width: 200rpx;
|
||||||
|
height: 200rpx;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-desc {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
// PDF预览弹窗样式
|
||||||
|
.preview-modal {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.7);
|
||||||
|
z-index: 9999;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-container {
|
||||||
|
width: 95%;
|
||||||
|
height: 90%;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 24rpx 30rpx;
|
||||||
|
background: #C93639;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
padding-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-close {
|
||||||
|
width: 60rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
border-radius: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-icon {
|
||||||
|
font-size: 40rpx;
|
||||||
|
color: #fff;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-body {
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-iframe {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -60,6 +60,7 @@
|
|||||||
import CustomTabs from '../../components/custom-tabs/custom-tabs.vue';
|
import CustomTabs from '../../components/custom-tabs/custom-tabs.vue';
|
||||||
import ConfirmModal from '../../components/confirm-modal/confirm-modal.vue';
|
import ConfirmModal from '../../components/confirm-modal/confirm-modal.vue';
|
||||||
import athleteAPI from '@/api/athlete.js';
|
import athleteAPI from '@/api/athlete.js';
|
||||||
|
import { getUserInfo } from '@/utils/auth.js';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
@@ -89,9 +90,21 @@ export default {
|
|||||||
*/
|
*/
|
||||||
async loadPlayerList() {
|
async loadPlayerList() {
|
||||||
try {
|
try {
|
||||||
|
// 获取当前用户信息
|
||||||
|
const userInfo = getUserInfo()
|
||||||
|
if (!userInfo || !userInfo.userId) {
|
||||||
|
console.error('未获取到用户信息')
|
||||||
|
uni.showToast({
|
||||||
|
title: '请先登录',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
const res = await athleteAPI.getAthleteList({
|
const res = await athleteAPI.getAthleteList({
|
||||||
current: 1,
|
current: 1,
|
||||||
size: 100
|
size: 100,
|
||||||
|
createUser: userInfo.userId // 只查询当前用户创建的选手
|
||||||
})
|
})
|
||||||
|
|
||||||
let list = []
|
let list = []
|
||||||
@@ -104,11 +117,11 @@ export default {
|
|||||||
// 数据映射
|
// 数据映射
|
||||||
this.playerList = list.map(item => ({
|
this.playerList = list.map(item => ({
|
||||||
id: item.id,
|
id: item.id,
|
||||||
name: item.name,
|
name: item.name || item.playerName,
|
||||||
idCard: item.idCard || item.idCardNumber,
|
idCard: item.idCard || item.idCardNumber,
|
||||||
gender: item.gender,
|
gender: item.gender,
|
||||||
team: item.team,
|
team: item.team || item.teamName,
|
||||||
phone: item.phone
|
phone: item.phone || item.contactPhone
|
||||||
}))
|
}))
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error('加载选手列表失败:', err)
|
console.error('加载选手列表失败:', err)
|
||||||
|
|||||||
@@ -125,7 +125,7 @@ export default {
|
|||||||
res.registerTime || res.registrationPeriod || '待定',
|
res.registerTime || res.registrationPeriod || '待定',
|
||||||
matchTime: this.formatTimeRange(startTime, endTime) ||
|
matchTime: this.formatTimeRange(startTime, endTime) ||
|
||||||
res.matchTime || res.competitionTime || '待定',
|
res.matchTime || res.competitionTime || '待定',
|
||||||
registerCount: res.registrationCount || res.registerCount || res.signUpCount || '0',
|
registerCount: res.registrationCount || res.registerCount || res.signUpCount || res.totalParticipants || '0',
|
||||||
status: this.getStatus(res.status)
|
status: this.getStatus(res.status)
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -169,16 +169,23 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
handleFunction(type) {
|
handleFunction(type) {
|
||||||
|
// 需要跳转到附件展示页面的类型
|
||||||
|
const attachmentTypes = ['info', 'rules', 'schedule', 'score', 'awards', 'photos']
|
||||||
|
|
||||||
|
if (attachmentTypes.includes(type)) {
|
||||||
|
// 跳转到通用附件展示页面
|
||||||
|
const name = encodeURIComponent(this.eventInfo.title)
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/attachment-view/attachment-view?type=${type}&competitionId=${this.eventId}&name=${name}`
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 其他功能页面的路由映射
|
||||||
const routeMap = {
|
const routeMap = {
|
||||||
'info': '/pages/event-info/event-info',
|
|
||||||
'rules': '/pages/event-rules/event-rules',
|
|
||||||
'schedule': '/pages/event-schedule/event-schedule',
|
|
||||||
'players': '/pages/event-players/event-players',
|
'players': '/pages/event-players/event-players',
|
||||||
'match': '/pages/event-live/event-live',
|
'match': '/pages/event-live/event-live',
|
||||||
'lineup': '/pages/event-lineup/event-lineup',
|
'lineup': '/pages/event-lineup/event-lineup'
|
||||||
'score': '/pages/event-score/event-score',
|
|
||||||
'awards': '/pages/event-medals/event-medals',
|
|
||||||
'photos': '' // 图片直播暂未实现
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const url = routeMap[type];
|
const url = routeMap[type];
|
||||||
|
|||||||
@@ -228,7 +228,7 @@ export default {
|
|||||||
item.registerTime || item.registrationPeriod || '待定',
|
item.registerTime || item.registrationPeriod || '待定',
|
||||||
matchTime: this.formatTimeRange(startTime, endTime) ||
|
matchTime: this.formatTimeRange(startTime, endTime) ||
|
||||||
item.matchTime || item.competitionTime || '待定',
|
item.matchTime || item.competitionTime || '待定',
|
||||||
registerCount: item.registrationCount || item.registerCount || item.signUpCount || '0',
|
registerCount: item.registrationCount || item.registerCount || item.signUpCount || item.totalParticipants || '0',
|
||||||
status: this.getStatus(item.status)
|
status: this.getStatus(item.status)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -171,6 +171,7 @@
|
|||||||
import competitionAPI from '@/api/competition.js'
|
import competitionAPI from '@/api/competition.js'
|
||||||
import athleteAPI from '@/api/athlete.js'
|
import athleteAPI from '@/api/athlete.js'
|
||||||
import registrationAPI from '@/api/registration.js'
|
import registrationAPI from '@/api/registration.js'
|
||||||
|
import { getUserInfo } from '@/utils/auth.js'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
@@ -286,9 +287,21 @@ export default {
|
|||||||
*/
|
*/
|
||||||
async loadPlayerList() {
|
async loadPlayerList() {
|
||||||
try {
|
try {
|
||||||
|
// 获取当前用户信息
|
||||||
|
const userInfo = getUserInfo()
|
||||||
|
if (!userInfo || !userInfo.userId) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请先登录',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 只查询当前用户创建的选手
|
||||||
const res = await athleteAPI.getAthleteList({
|
const res = await athleteAPI.getAthleteList({
|
||||||
current: 1,
|
current: 1,
|
||||||
size: 100
|
size: 100,
|
||||||
|
createUser: userInfo.userId
|
||||||
})
|
})
|
||||||
|
|
||||||
let list = []
|
let list = []
|
||||||
@@ -363,8 +376,10 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
goToAddPlayer() {
|
goToAddPlayer() {
|
||||||
|
// 传递赛事ID和项目ID到新增选手页面
|
||||||
|
const projectIds = this.selectedProjects.map(p => p.id).join(',')
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: '/pages/add-player/add-player'
|
url: `/pages/add-player/add-player?competitionId=${this.eventId}&projectIds=${projectIds}`
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
handleEdit(item) {
|
handleEdit(item) {
|
||||||
|
|||||||
@@ -137,7 +137,7 @@ export default {
|
|||||||
item.registerTime || item.registrationPeriod || '待定',
|
item.registerTime || item.registrationPeriod || '待定',
|
||||||
matchTime: this.formatTimeRange(startTime, endTime) ||
|
matchTime: this.formatTimeRange(startTime, endTime) ||
|
||||||
item.matchTime || item.competitionTime || '待定',
|
item.matchTime || item.competitionTime || '待定',
|
||||||
registerCount: item.registrationCount || item.registerCount || item.signUpCount || '0',
|
registerCount: item.registrationCount || item.registerCount || item.signUpCount || item.totalParticipants || '0',
|
||||||
status: this.getStatus(item.status)
|
status: this.getStatus(item.status)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -65,6 +65,7 @@
|
|||||||
import CustomTabs from '../../components/custom-tabs/custom-tabs.vue';
|
import CustomTabs from '../../components/custom-tabs/custom-tabs.vue';
|
||||||
import registrationAPI from '@/api/registration.js'
|
import registrationAPI from '@/api/registration.js'
|
||||||
import competitionAPI from '@/api/competition.js'
|
import competitionAPI from '@/api/competition.js'
|
||||||
|
import { getUserInfo } from '@/utils/auth.js'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
@@ -119,9 +120,29 @@ export default {
|
|||||||
*/
|
*/
|
||||||
async loadRegistrationList(refresh = false, loadMore = false) {
|
async loadRegistrationList(refresh = false, loadMore = false) {
|
||||||
try {
|
try {
|
||||||
|
// 获取当前用户信息
|
||||||
|
const userInfo = getUserInfo()
|
||||||
|
console.log('=== 用户信息调试 ===')
|
||||||
|
console.log('获取到的用户信息:', userInfo)
|
||||||
|
console.log('用户信息类型:', typeof userInfo)
|
||||||
|
|
||||||
|
if (!userInfo || (!userInfo.userId && !userInfo.user_id)) {
|
||||||
|
console.error('未获取到用户信息或缺少用户ID字段')
|
||||||
|
console.log('原始存储数据:', uni.getStorageSync('userInfo'))
|
||||||
|
uni.showToast({
|
||||||
|
title: '请先登录',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 兼容 userId 和 user_id 两种字段名
|
||||||
|
const userId = userInfo.userId || userInfo.user_id
|
||||||
|
|
||||||
const params = {
|
const params = {
|
||||||
current: this.pageParams.current,
|
current: this.pageParams.current,
|
||||||
size: this.pageParams.size
|
size: this.pageParams.size,
|
||||||
|
createUser: userId // 只查询当前用户创建的报名记录
|
||||||
}
|
}
|
||||||
|
|
||||||
// 添加状态筛选
|
// 添加状态筛选
|
||||||
@@ -222,7 +243,7 @@ export default {
|
|||||||
matchTime: '',
|
matchTime: '',
|
||||||
projects: '',
|
projects: '',
|
||||||
contact: orderItem.contactPhone || '',
|
contact: orderItem.contactPhone || '',
|
||||||
participants: `${orderItem.totalParticipants || 0}人`
|
participants: `${orderItem.registerCount || 0}人`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -66,8 +66,9 @@ export default {
|
|||||||
.type-btn {
|
.type-btn {
|
||||||
background-color: #C93639;
|
background-color: #C93639;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
padding: 20rpx 60rpx;
|
padding: 20rpx 50rpx;
|
||||||
border-radius: 50rpx;
|
border-radius: 50rpx;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -16,7 +16,7 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="status-item">
|
<view class="status-item">
|
||||||
<text class="label">参赛人数:</text>
|
<text class="label">参赛人数:</text>
|
||||||
<text class="value">{{ scheduleData.totalParticipants || 0 }}</text>
|
<text class="value">{{ scheduleData.registerCount || 0 }}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="status-item" v-if="scheduleData.lastAutoScheduleTime">
|
<view class="status-item" v-if="scheduleData.lastAutoScheduleTime">
|
||||||
<text class="label">最后编排时间:</text>
|
<text class="label">最后编排时间:</text>
|
||||||
|
|||||||
13
postcss.config.js
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
const path = require('path')
|
||||||
|
module.exports = {
|
||||||
|
parser: require('postcss-comment'),
|
||||||
|
plugins: [
|
||||||
|
require('autoprefixer')({
|
||||||
|
overrideBrowserslist: [
|
||||||
|
'Android >= 4',
|
||||||
|
'ios >= 8'
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
require('@dcloudio/vue-cli-plugin-uni/packages/postcss')
|
||||||
|
]
|
||||||
|
}
|
||||||
14
public/index.html
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
|
||||||
|
<title>武术赛事报名系统</title>
|
||||||
|
<link rel="stylesheet" href="./static/index.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<!-- built files will be auto injected -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
85
src/api/athlete.js
Normal file
@@ -0,0 +1,85 @@
|
|||||||
|
/**
|
||||||
|
* 选手管理API接口
|
||||||
|
*/
|
||||||
|
|
||||||
|
import request from '@/utils/request.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
/**
|
||||||
|
* 获取选手列表
|
||||||
|
*/
|
||||||
|
getAthleteList(params = {}) {
|
||||||
|
return request.get('/martial/athlete/list', {
|
||||||
|
current: params.current || 1,
|
||||||
|
size: params.size || 100,
|
||||||
|
...params
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取选手详情
|
||||||
|
*/
|
||||||
|
getAthleteDetail(id) {
|
||||||
|
return request.get('/martial/athlete/detail', { id })
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 新增或修改选手
|
||||||
|
*/
|
||||||
|
submitAthlete(data) {
|
||||||
|
return request.post('/martial/athlete/submit', data)
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 删除选手
|
||||||
|
*/
|
||||||
|
removeAthlete(ids) {
|
||||||
|
return request.post('/martial/athlete/remove', {
|
||||||
|
ids: Array.isArray(ids) ? ids.join(',') : ids
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// ========== 集体/团队相关 API ==========
|
||||||
|
|
||||||
|
getTeamList(params = {}) {
|
||||||
|
return request.get('/martial/team/list', {
|
||||||
|
current: params.current || 1,
|
||||||
|
size: params.size || 100,
|
||||||
|
...params
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
getTeamDetail(id) {
|
||||||
|
return request.get('/martial/team/detail', { id })
|
||||||
|
},
|
||||||
|
|
||||||
|
saveTeam(data) {
|
||||||
|
return request.post('/martial/team/submit', data)
|
||||||
|
},
|
||||||
|
|
||||||
|
removeTeam(id) {
|
||||||
|
return request.post('/martial/team/remove?id=' + id, {})
|
||||||
|
},
|
||||||
|
|
||||||
|
// ========== 联系人相关 API ==========
|
||||||
|
|
||||||
|
getContactList(params = {}) {
|
||||||
|
return request.get('/martial/contact/list', {
|
||||||
|
current: params.current || 1,
|
||||||
|
size: params.size || 100,
|
||||||
|
...params
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
getContactDetail(id) {
|
||||||
|
return request.get('/martial/contact/detail', { id })
|
||||||
|
},
|
||||||
|
|
||||||
|
saveContact(data) {
|
||||||
|
return request.post('/martial/contact/submit', data)
|
||||||
|
},
|
||||||
|
|
||||||
|
removeContact(id) {
|
||||||
|
return request.post('/martial/contact/remove?ids=' + id, {})
|
||||||
|
}
|
||||||
|
}
|
||||||
88
src/api/competition.js
Normal file
@@ -0,0 +1,88 @@
|
|||||||
|
/**
|
||||||
|
* 赛事相关API接口
|
||||||
|
*/
|
||||||
|
|
||||||
|
import request from '@/utils/request.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
/**
|
||||||
|
* 获取轮播图列表
|
||||||
|
* @param {Object} params 查询参数
|
||||||
|
* @returns {Promise}
|
||||||
|
*/
|
||||||
|
getBannerList(params = {}) {
|
||||||
|
return request.get('/martial/banner/list', params)
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取赛事列表(分页)
|
||||||
|
* @param {Object} params 查询参数 { current, size, location, status }
|
||||||
|
* @returns {Promise}
|
||||||
|
*/
|
||||||
|
getCompetitionList(params = {}) {
|
||||||
|
return request.get('/martial/competition/list', {
|
||||||
|
current: params.current || 1,
|
||||||
|
size: params.size || 10,
|
||||||
|
...params
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取赛事详情
|
||||||
|
* @param {String|Number} id 赛事ID
|
||||||
|
* @returns {Promise}
|
||||||
|
*/
|
||||||
|
getCompetitionDetail(id) {
|
||||||
|
return request.get('/martial/competition/detail', { id })
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取比赛项目列表
|
||||||
|
* @param {Object} params 查询参数 { competitionId }
|
||||||
|
* @returns {Promise}
|
||||||
|
*/
|
||||||
|
getProjectList(params = {}) {
|
||||||
|
return request.get('/martial/project/list', params)
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取项目详情
|
||||||
|
* @param {String|Number} id 项目ID
|
||||||
|
* @returns {Promise}
|
||||||
|
*/
|
||||||
|
getProjectDetail(id) {
|
||||||
|
return request.get('/martial/project/detail', { id })
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取赛事规程
|
||||||
|
* @param {String|Number} competitionId 赛事ID
|
||||||
|
* @returns {Promise}
|
||||||
|
*/
|
||||||
|
getCompetitionRules(competitionId) {
|
||||||
|
return request.get('/martial/competition/rules', { competitionId })
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取赛事附件列表
|
||||||
|
* @param {Object} params { competitionId, type }
|
||||||
|
* type: info-信息发布, rules-赛事规程, schedule-活动日程,
|
||||||
|
* results-成绩, medals-奖牌榜, photos-图片直播
|
||||||
|
* @returns {Promise}
|
||||||
|
*/
|
||||||
|
getAttachments(params = {}) {
|
||||||
|
return request.get('/martial/competition/attachment/getByType', {
|
||||||
|
competitionId: params.competitionId,
|
||||||
|
attachmentType: params.type
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取赛事所有附件
|
||||||
|
* @param {String|Number} competitionId 赛事ID
|
||||||
|
* @returns {Promise}
|
||||||
|
*/
|
||||||
|
getAllAttachments(competitionId) {
|
||||||
|
return request.get('/martial/competition/attachment/getByCompetition', { competitionId })
|
||||||
|
}
|
||||||
|
}
|
||||||
95
src/api/info.js
Normal file
@@ -0,0 +1,95 @@
|
|||||||
|
/**
|
||||||
|
* 赛事信息API接口
|
||||||
|
*/
|
||||||
|
|
||||||
|
import request from '@/utils/request.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
/**
|
||||||
|
* 获取信息发布列表
|
||||||
|
* @param {Object} params 查询参数 { competitionId, current, size }
|
||||||
|
* @returns {Promise}
|
||||||
|
*/
|
||||||
|
getInfoPublishList(params = {}) {
|
||||||
|
return request.get('/martial/infoPublish/list', {
|
||||||
|
current: params.current || 1,
|
||||||
|
size: params.size || 10,
|
||||||
|
...params
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取信息详情
|
||||||
|
* @param {String|Number} id 信息ID
|
||||||
|
* @returns {Promise}
|
||||||
|
*/
|
||||||
|
getInfoPublishDetail(id) {
|
||||||
|
return request.get('/martial/infoPublish/detail', { id })
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取活动日程列表
|
||||||
|
* @param {Object} params 查询参数 { competitionId, current, size }
|
||||||
|
* @returns {Promise}
|
||||||
|
*/
|
||||||
|
getActivityScheduleList(params = {}) {
|
||||||
|
return request.get('/martial/activitySchedule/list', {
|
||||||
|
current: params.current || 1,
|
||||||
|
size: params.size || 100,
|
||||||
|
...params
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取日程详情
|
||||||
|
* @param {String|Number} id 日程ID
|
||||||
|
* @returns {Promise}
|
||||||
|
*/
|
||||||
|
getActivityScheduleDetail(id) {
|
||||||
|
return request.get('/martial/activitySchedule/detail', { id })
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取赛程安排(出场顺序)列表
|
||||||
|
* @param {Object} params 查询参数 { competitionId, current, size }
|
||||||
|
* @returns {Promise}
|
||||||
|
*/
|
||||||
|
getScheduleList(params = {}) {
|
||||||
|
return request.get('/martial/schedule/list', {
|
||||||
|
current: params.current || 1,
|
||||||
|
size: params.size || 100,
|
||||||
|
...params
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取赛程详情
|
||||||
|
* @param {String|Number} id 赛程ID
|
||||||
|
* @returns {Promise}
|
||||||
|
*/
|
||||||
|
getScheduleDetail(id) {
|
||||||
|
return request.get('/martial/schedule/detail', { id })
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取比赛实况列表
|
||||||
|
* @param {Object} params 查询参数 { competitionId, current, size }
|
||||||
|
* @returns {Promise}
|
||||||
|
*/
|
||||||
|
getLiveUpdateList(params = {}) {
|
||||||
|
return request.get('/martial/liveUpdate/list', {
|
||||||
|
current: params.current || 1,
|
||||||
|
size: params.size || 20,
|
||||||
|
...params
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取实况详情
|
||||||
|
* @param {String|Number} id 实况ID
|
||||||
|
* @returns {Promise}
|
||||||
|
*/
|
||||||
|
getLiveUpdateDetail(id) {
|
||||||
|
return request.get('/martial/liveUpdate/detail', { id })
|
||||||
|
}
|
||||||
|
}
|
||||||
58
src/api/registration.js
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
/**
|
||||||
|
* 报名相关API接口
|
||||||
|
*/
|
||||||
|
|
||||||
|
import request from '@/utils/request.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
/**
|
||||||
|
* 提交报名订单
|
||||||
|
*/
|
||||||
|
submitRegistration(data) {
|
||||||
|
const formattedData = {
|
||||||
|
orderNo: data.orderNo,
|
||||||
|
competitionId: data.competitionId,
|
||||||
|
projectIds: Array.isArray(data.projectIds) ? data.projectIds.join(',') : data.projectIds,
|
||||||
|
athleteIds: Array.isArray(data.athleteIds) ? data.athleteIds.join(',') : (data.athleteIds || ''),
|
||||||
|
teamIds: Array.isArray(data.teamIds) ? data.teamIds.join(',') : (data.teamIds || ''),
|
||||||
|
contactPhone: data.contactPhone,
|
||||||
|
totalAmount: data.totalAmount
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('=== API层转换后的数据 ===')
|
||||||
|
console.log('订单号:', formattedData.orderNo)
|
||||||
|
console.log('projectIds:', formattedData.projectIds)
|
||||||
|
console.log('athleteIds:', formattedData.athleteIds)
|
||||||
|
console.log('teamIds:', formattedData.teamIds)
|
||||||
|
console.log('最终发送到后端的完整数据:', formattedData)
|
||||||
|
|
||||||
|
return request.post('/martial/registrationOrder/submit', formattedData)
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取报名订单列表
|
||||||
|
*/
|
||||||
|
getRegistrationList(params = {}) {
|
||||||
|
return request.get('/martial/registrationOrder/list', {
|
||||||
|
current: params.current || 1,
|
||||||
|
size: params.size || 10,
|
||||||
|
...params
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取报名订单详情
|
||||||
|
*/
|
||||||
|
getRegistrationDetail(id) {
|
||||||
|
return request.get('/martial/registrationOrder/detail', { id })
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 取消报名
|
||||||
|
*/
|
||||||
|
cancelRegistration(ids) {
|
||||||
|
return request.post('/martial/registrationOrder/remove', {
|
||||||
|
ids: Array.isArray(ids) ? ids.join(',') : ids
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
57
src/api/result.js
Normal file
@@ -0,0 +1,57 @@
|
|||||||
|
/**
|
||||||
|
* 成绩相关API接口
|
||||||
|
*/
|
||||||
|
|
||||||
|
import request from '@/utils/request.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
/**
|
||||||
|
* 获取成绩列表
|
||||||
|
* @param {String|Number} eventId 赛事ID
|
||||||
|
* @param {Object} params 查询参数 { projectId, current, size }
|
||||||
|
* @returns {Promise}
|
||||||
|
*/
|
||||||
|
getResultList(eventId, params = {}) {
|
||||||
|
return request.get('/martial/result/list', {
|
||||||
|
competitionId: eventId,
|
||||||
|
current: params.current || 1,
|
||||||
|
size: params.size || 100,
|
||||||
|
...params
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取成绩详情
|
||||||
|
* @param {String|Number} id 成绩ID
|
||||||
|
* @returns {Promise}
|
||||||
|
*/
|
||||||
|
getResultDetail(id) {
|
||||||
|
return request.get('/martial/result/detail', { id })
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取奖牌榜
|
||||||
|
* @param {String|Number} eventId 赛事ID
|
||||||
|
* @param {Object} params 查询参数
|
||||||
|
* @returns {Promise}
|
||||||
|
*/
|
||||||
|
getMedalsList(eventId, params = {}) {
|
||||||
|
return request.get('/martial/medal/list', {
|
||||||
|
competitionId: eventId,
|
||||||
|
...params
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取评分列表
|
||||||
|
* @param {Object} params 查询参数 { resultId, current, size }
|
||||||
|
* @returns {Promise}
|
||||||
|
*/
|
||||||
|
getScoreList(params = {}) {
|
||||||
|
return request.get('/martial/score/list', {
|
||||||
|
current: params.current || 1,
|
||||||
|
size: params.size || 100,
|
||||||
|
...params
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
126
src/api/schedule.js
Normal file
@@ -0,0 +1,126 @@
|
|||||||
|
/**
|
||||||
|
* 赛程编排相关API接口
|
||||||
|
*/
|
||||||
|
|
||||||
|
import request from '@/utils/request.js'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取赛程编排结果
|
||||||
|
* @param {Number} competitionId - 赛事ID
|
||||||
|
*/
|
||||||
|
export function getScheduleResult(competitionId) {
|
||||||
|
return request.get('/martial/schedule/result', {
|
||||||
|
params: { competitionId }
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 触发自动编排
|
||||||
|
* @param {Number} competitionId - 赛事ID
|
||||||
|
*/
|
||||||
|
export function triggerAutoArrange(competitionId) {
|
||||||
|
return request.post('/martial/schedule/auto-arrange', {
|
||||||
|
competitionId
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 保存编排草稿
|
||||||
|
* @param {Object} data - 编排草稿数据
|
||||||
|
* @param {Number} data.competitionId - 赛事ID
|
||||||
|
* @param {Boolean} data.isDraft - 是否为草稿
|
||||||
|
* @param {Array} data.competitionGroups - 竞赛分组数据
|
||||||
|
*/
|
||||||
|
export function saveDraftSchedule(data) {
|
||||||
|
return request.post('/martial/schedule/save-draft', data)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 保存并锁定赛程编排
|
||||||
|
* @param {Number} competitionId - 赛事ID
|
||||||
|
*/
|
||||||
|
export function saveAndLockSchedule(competitionId) {
|
||||||
|
return request.post('/martial/schedule/save-and-lock', {
|
||||||
|
competitionId
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 移动赛程分组到指定场地和时间段
|
||||||
|
* @param {Object} data - 移动请求数据
|
||||||
|
* @param {Number} data.groupId - 分组ID
|
||||||
|
* @param {Number} data.targetVenueId - 目标场地ID
|
||||||
|
* @param {Number} data.targetTimeSlotIndex - 目标时间段索引
|
||||||
|
*/
|
||||||
|
export function moveScheduleGroup(data) {
|
||||||
|
return request.post('/martial/schedule/move-group', data)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取调度数据
|
||||||
|
* @param {Object} params - 查询参数
|
||||||
|
* @param {Number} params.competitionId - 赛事ID
|
||||||
|
* @param {Number} params.venueId - 场地ID
|
||||||
|
* @param {Number} params.timeSlotIndex - 时间段索引
|
||||||
|
*/
|
||||||
|
export function getDispatchData(params) {
|
||||||
|
return request.get('/martial/schedule/dispatch-data', {
|
||||||
|
params
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 调整出场顺序
|
||||||
|
* @param {Object} data - 调整请求数据
|
||||||
|
* @param {Number} data.detailId - 编排明细ID
|
||||||
|
* @param {Number} data.participantId - 参赛者记录ID
|
||||||
|
* @param {String} data.action - 调整动作(move_up/move_down/swap)
|
||||||
|
* @param {Number} data.targetOrder - 目标顺序(交换时使用)
|
||||||
|
*/
|
||||||
|
export function adjustOrder(data) {
|
||||||
|
return request.post('/martial/schedule/adjust-order', data)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 批量保存调度
|
||||||
|
* @param {Object} data - 保存调度数据
|
||||||
|
* @param {Number} data.competitionId - 赛事ID
|
||||||
|
* @param {Array} data.adjustments - 调整列表
|
||||||
|
*/
|
||||||
|
export function saveDispatch(data) {
|
||||||
|
return request.post('/martial/schedule/save-dispatch', data)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取编排状态(小程序用)
|
||||||
|
* @param {Number} competitionId - 赛事ID
|
||||||
|
*/
|
||||||
|
export function getScheduleStatus(competitionId) {
|
||||||
|
return request.get('/mini/schedule/status', {
|
||||||
|
params: { competitionId }
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取出场顺序(小程序用)
|
||||||
|
* @param {Number} competitionId - 赛事ID
|
||||||
|
* @param {Number} projectId - 项目ID (可选)
|
||||||
|
*/
|
||||||
|
export function getLineup(competitionId, projectId) {
|
||||||
|
return request.get('/mini/schedule/lineup', {
|
||||||
|
params: { competitionId, projectId }
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
getScheduleResult,
|
||||||
|
triggerAutoArrange,
|
||||||
|
saveDraftSchedule,
|
||||||
|
saveAndLockSchedule,
|
||||||
|
moveScheduleGroup,
|
||||||
|
getDispatchData,
|
||||||
|
adjustOrder,
|
||||||
|
saveDispatch,
|
||||||
|
getScheduleStatus,
|
||||||
|
getLineup
|
||||||
|
}
|
||||||
119
src/api/user.js
Normal file
@@ -0,0 +1,119 @@
|
|||||||
|
/**
|
||||||
|
* 用户相关API接口
|
||||||
|
*/
|
||||||
|
|
||||||
|
import request from '@/utils/request.js'
|
||||||
|
import md5 from '@/utils/md5.js'
|
||||||
|
import { base64Encode } from '@/utils/base64.js'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 用户登录
|
||||||
|
* 使用password模式(无需验证码)
|
||||||
|
*/
|
||||||
|
export function login(data) {
|
||||||
|
// 构建URL参数
|
||||||
|
const params = {
|
||||||
|
tenantId: '000000',
|
||||||
|
username: data.username,
|
||||||
|
password: md5(data.password),
|
||||||
|
grant_type: 'password', // 使用password模式
|
||||||
|
scope: 'all',
|
||||||
|
type: 'account'
|
||||||
|
}
|
||||||
|
|
||||||
|
// 转换为URL查询字符串
|
||||||
|
const queryString = Object.keys(params)
|
||||||
|
.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
|
||||||
|
.join('&')
|
||||||
|
|
||||||
|
// 使用saber3客户端凭证
|
||||||
|
const basicAuth = 'Basic ' + base64Encode('saber3:saber3_secret')
|
||||||
|
|
||||||
|
return request.post(`/blade-auth/oauth/token?${queryString}`, null, {
|
||||||
|
header: {
|
||||||
|
'Authorization': basicAuth,
|
||||||
|
'Tenant-Id': '000000'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 用户注册
|
||||||
|
*/
|
||||||
|
export function register(data) {
|
||||||
|
return request.post('/blade-system/user/register', {
|
||||||
|
tenantId: '000000',
|
||||||
|
userType: 2, // 2-app
|
||||||
|
account: data.account,
|
||||||
|
password: md5(data.password),
|
||||||
|
phone: data.phone,
|
||||||
|
realName: data.realName,
|
||||||
|
sex: data.sex,
|
||||||
|
code: data.code
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取验证码
|
||||||
|
*/
|
||||||
|
export function getCaptcha(phone) {
|
||||||
|
return request.post('/blade-auth/captcha/send', {
|
||||||
|
phone: phone
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 刷新Token
|
||||||
|
*/
|
||||||
|
export function refreshToken(refreshToken) {
|
||||||
|
return request.post('/blade-auth/oauth/token', {
|
||||||
|
tenantId: '000000',
|
||||||
|
refresh_token: refreshToken,
|
||||||
|
grant_type: 'refresh_token'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 退出登录
|
||||||
|
*/
|
||||||
|
export function logout() {
|
||||||
|
return request.post('/blade-auth/logout')
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
login,
|
||||||
|
register,
|
||||||
|
getCaptcha,
|
||||||
|
refreshToken,
|
||||||
|
logout,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取用户信息
|
||||||
|
* @returns {Promise}
|
||||||
|
*/
|
||||||
|
getUserInfo() {
|
||||||
|
return request.get('/blade-system/user/info')
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 修改密码
|
||||||
|
* @param {Object} data { oldPassword, newPassword, newPassword1 }
|
||||||
|
* @returns {Promise}
|
||||||
|
*/
|
||||||
|
updatePassword(data) {
|
||||||
|
return request.post('/blade-system/user/update-password', {
|
||||||
|
oldPassword: md5(data.oldPassword),
|
||||||
|
newPassword: md5(data.newPassword),
|
||||||
|
newPassword1: md5(data.newPassword1)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 修改用户基本信息
|
||||||
|
* @param {Object} data 用户信息
|
||||||
|
* @returns {Promise}
|
||||||
|
*/
|
||||||
|
updateUserInfo(data) {
|
||||||
|
return request.post('/blade-system/user/update', data)
|
||||||
|
}
|
||||||
|
}
|
||||||
119
src/components/confirm-modal/confirm-modal.vue
Normal file
@@ -0,0 +1,119 @@
|
|||||||
|
<template>
|
||||||
|
<view class="modal-mask" v-if="show" @click="handleMaskClick">
|
||||||
|
<view class="modal-container" @click.stop>
|
||||||
|
<view class="modal-title">{{ title }}</view>
|
||||||
|
<view class="modal-content">{{ content }}</view>
|
||||||
|
<view class="modal-footer">
|
||||||
|
<view class="modal-btn cancel-btn" @click="handleCancel">{{ cancelText }}</view>
|
||||||
|
<view class="modal-btn confirm-btn" @click="handleConfirm">{{ confirmText }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'ConfirmModal',
|
||||||
|
props: {
|
||||||
|
show: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: '提示'
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
cancelText: {
|
||||||
|
type: String,
|
||||||
|
default: '取消'
|
||||||
|
},
|
||||||
|
confirmText: {
|
||||||
|
type: String,
|
||||||
|
default: '确定'
|
||||||
|
},
|
||||||
|
maskClose: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleMaskClick() {
|
||||||
|
if (this.maskClose) {
|
||||||
|
this.$emit('cancel');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleCancel() {
|
||||||
|
this.$emit('cancel');
|
||||||
|
},
|
||||||
|
handleConfirm() {
|
||||||
|
this.$emit('confirm');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.modal-mask {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-container {
|
||||||
|
width: 600rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-title {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
text-align: center;
|
||||||
|
padding: 50rpx 30rpx 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666666;
|
||||||
|
text-align: center;
|
||||||
|
padding: 0 30rpx 50rpx;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-footer {
|
||||||
|
display: flex;
|
||||||
|
border-top: 1rpx solid #eeeeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-btn {
|
||||||
|
flex: 1;
|
||||||
|
height: 100rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-btn {
|
||||||
|
color: #666666;
|
||||||
|
border-right: 1rpx solid #eeeeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-btn {
|
||||||
|
color: #C93639;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
101
src/components/custom-navbar/custom-navbar.vue
Normal file
@@ -0,0 +1,101 @@
|
|||||||
|
<template>
|
||||||
|
<view class="custom-navbar" :style="{ height: navHeight + 'px', paddingTop: statusBarHeight + 'px' }">
|
||||||
|
<view class="navbar-content" :style="{ height: contentHeight + 'px' }">
|
||||||
|
<view class="navbar-left" @click="handleBack" v-if="showBack">
|
||||||
|
<text class="back-icon"></text>
|
||||||
|
</view>
|
||||||
|
<view class="navbar-title">{{ title }}</view>
|
||||||
|
<view class="navbar-right">
|
||||||
|
<slot name="right"></slot>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'CustomNavbar',
|
||||||
|
props: {
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
showBack: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
backgroundColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#C93639'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
statusBarHeight: 0,
|
||||||
|
contentHeight: 44,
|
||||||
|
navHeight: 0
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// 获取状态栏高度
|
||||||
|
const systemInfo = uni.getSystemInfoSync();
|
||||||
|
this.statusBarHeight = systemInfo.statusBarHeight;
|
||||||
|
this.navHeight = this.statusBarHeight + this.contentHeight;
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleBack() {
|
||||||
|
uni.navigateBack({
|
||||||
|
delta: 1
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.custom-navbar {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #C93639;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 30rpx;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-left {
|
||||||
|
width: 60rpx;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-icon {
|
||||||
|
font-size: 44rpx;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-title {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-right {
|
||||||
|
width: 60rpx;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
89
src/components/custom-tabs/custom-tabs.vue
Normal file
@@ -0,0 +1,89 @@
|
|||||||
|
<template>
|
||||||
|
<view class="tabs-container">
|
||||||
|
<view class="tabs-wrapper">
|
||||||
|
<view
|
||||||
|
v-for="(tab, index) in tabs"
|
||||||
|
:key="index"
|
||||||
|
class="tab-item"
|
||||||
|
:class="{ active: currentIndex === index }"
|
||||||
|
@click="handleTabClick(index)"
|
||||||
|
>
|
||||||
|
<text class="tab-text">{{ tab }}</text>
|
||||||
|
<view class="tab-line" v-if="currentIndex === index"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'CustomTabs',
|
||||||
|
props: {
|
||||||
|
tabs: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
current: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentIndex: this.current
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
current(val) {
|
||||||
|
this.currentIndex = val;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleTabClick(index) {
|
||||||
|
this.currentIndex = index;
|
||||||
|
this.$emit('change', index);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.tabs-container {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs-wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-item {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 30rpx 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-text {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #666666;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-item.active .tab-text {
|
||||||
|
color: #333333;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-line {
|
||||||
|
width: 60rpx;
|
||||||
|
height: 6rpx;
|
||||||
|
background-color: #C93639;
|
||||||
|
border-radius: 3rpx;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
508
src/components/pdf-viewer/pdf-viewer.vue
Normal file
@@ -0,0 +1,508 @@
|
|||||||
|
<template>
|
||||||
|
<view class="pdf-viewer-modal" v-if="visible" @click="handleClose">
|
||||||
|
<view class="pdf-container" @click.stop>
|
||||||
|
<!-- 头部 -->
|
||||||
|
<view class="pdf-header">
|
||||||
|
<text class="pdf-title">{{ fileName }}</text>
|
||||||
|
<view class="pdf-actions">
|
||||||
|
<text class="page-info">{{ currentPage }} / {{ totalPages }}</text>
|
||||||
|
<view class="close-btn" @click="handleClose">
|
||||||
|
<text class="close-icon">×</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- PDF 内容区域 -->
|
||||||
|
<view class="pdf-content" ref="pdfContent">
|
||||||
|
<!-- 加载中 -->
|
||||||
|
<view class="loading-wrapper" v-if="loading">
|
||||||
|
<view class="loading-spinner"></view>
|
||||||
|
<text class="loading-text">加载中... {{ loadingProgress }}%</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 错误提示 -->
|
||||||
|
<view class="error-wrapper" v-if="error">
|
||||||
|
<text class="error-text">{{ error }}</text>
|
||||||
|
<view class="retry-btn" @click="loadPdf">
|
||||||
|
<text>重试</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- PDF 画布容器 - 使用原生 div -->
|
||||||
|
<view
|
||||||
|
class="pdf-scroll-wrapper"
|
||||||
|
v-show="!loading && !error"
|
||||||
|
ref="scrollWrapper"
|
||||||
|
>
|
||||||
|
<view class="canvas-container" ref="canvasContainer">
|
||||||
|
<!-- canvas 将通过 JS 动态创建 -->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 底部工具栏 -->
|
||||||
|
<view class="pdf-toolbar">
|
||||||
|
<view class="toolbar-btn" :class="{ disabled: currentPage <= 1 }" @click="prevPage">
|
||||||
|
<text>上一页</text>
|
||||||
|
</view>
|
||||||
|
<view class="toolbar-btn" :class="{ disabled: currentPage >= totalPages }" @click="nextPage">
|
||||||
|
<text>下一页</text>
|
||||||
|
</view>
|
||||||
|
<view class="toolbar-btn" @click="zoomOut">
|
||||||
|
<text>缩小</text>
|
||||||
|
</view>
|
||||||
|
<view class="toolbar-btn" @click="zoomIn">
|
||||||
|
<text>放大</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// #ifdef H5
|
||||||
|
let pdfjsLib = null
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'PdfViewer',
|
||||||
|
props: {
|
||||||
|
visible: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
url: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
fileName: {
|
||||||
|
type: String,
|
||||||
|
default: 'PDF文档'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading: false,
|
||||||
|
loadingProgress: 0,
|
||||||
|
error: '',
|
||||||
|
pdfDoc: null,
|
||||||
|
currentPage: 1,
|
||||||
|
totalPages: 0,
|
||||||
|
scale: 1.2,
|
||||||
|
canvasElements: {},
|
||||||
|
pdfjsLoaded: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
visible(val) {
|
||||||
|
if (val && this.url) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.initPdfjs()
|
||||||
|
})
|
||||||
|
} else if (!val) {
|
||||||
|
this.cleanup()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
url(val) {
|
||||||
|
if (this.visible && val) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.initPdfjs()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async initPdfjs() {
|
||||||
|
// #ifdef H5
|
||||||
|
if (!pdfjsLib) {
|
||||||
|
try {
|
||||||
|
// 动态导入 pdfjs-dist
|
||||||
|
const pdfjs = await import('pdfjs-dist/legacy/build/pdf.js')
|
||||||
|
pdfjsLib = pdfjs
|
||||||
|
|
||||||
|
// 设置 worker
|
||||||
|
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js'
|
||||||
|
|
||||||
|
this.pdfjsLoaded = true
|
||||||
|
console.log('PDF.js 加载成功')
|
||||||
|
} catch (err) {
|
||||||
|
console.error('加载 PDF.js 失败:', err)
|
||||||
|
this.error = '加载 PDF 组件失败'
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.loadPdf()
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
|
||||||
|
async loadPdf() {
|
||||||
|
// #ifdef H5
|
||||||
|
if (!this.url) {
|
||||||
|
this.error = '文件地址无效'
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!pdfjsLib) {
|
||||||
|
this.error = 'PDF组件未加载'
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
this.loading = true
|
||||||
|
this.loadingProgress = 0
|
||||||
|
this.error = ''
|
||||||
|
this.clearCanvases()
|
||||||
|
|
||||||
|
try {
|
||||||
|
console.log('开始加载 PDF:', this.url)
|
||||||
|
|
||||||
|
// 加载 PDF 文档
|
||||||
|
const loadingTask = pdfjsLib.getDocument({
|
||||||
|
url: this.url,
|
||||||
|
withCredentials: false
|
||||||
|
})
|
||||||
|
|
||||||
|
loadingTask.onProgress = (progress) => {
|
||||||
|
if (progress.total > 0) {
|
||||||
|
this.loadingProgress = Math.round((progress.loaded / progress.total) * 100)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.pdfDoc = await loadingTask.promise
|
||||||
|
this.totalPages = this.pdfDoc.numPages
|
||||||
|
this.currentPage = 1
|
||||||
|
|
||||||
|
console.log('PDF 加载成功,总页数:', this.totalPages)
|
||||||
|
|
||||||
|
// 渲染第一页
|
||||||
|
await this.renderPage(1)
|
||||||
|
|
||||||
|
this.loading = false
|
||||||
|
} catch (err) {
|
||||||
|
console.error('PDF加载失败:', err)
|
||||||
|
this.loading = false
|
||||||
|
|
||||||
|
if (err.name === 'MissingPDFException') {
|
||||||
|
this.error = '文件不存在或已被删除'
|
||||||
|
} else if (err.message && err.message.includes('CORS')) {
|
||||||
|
this.error = '跨域访问被拒绝,请联系管理员'
|
||||||
|
} else if (err.message && err.message.includes('Invalid PDF')) {
|
||||||
|
this.error = '无效的PDF文件'
|
||||||
|
} else {
|
||||||
|
this.error = '文件加载失败: ' + (err.message || '未知错误')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifndef H5
|
||||||
|
this.error = '当前平台不支持PDF预览'
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
|
||||||
|
async renderPage(pageNum) {
|
||||||
|
// #ifdef H5
|
||||||
|
if (!this.pdfDoc) {
|
||||||
|
console.error('pdfDoc 不存在')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
console.log('开始渲染页面:', pageNum)
|
||||||
|
|
||||||
|
const page = await this.pdfDoc.getPage(pageNum)
|
||||||
|
const viewport = page.getViewport({ scale: this.scale })
|
||||||
|
|
||||||
|
console.log('页面尺寸:', viewport.width, 'x', viewport.height)
|
||||||
|
|
||||||
|
// 获取或创建 canvas
|
||||||
|
let canvas = this.canvasElements[pageNum]
|
||||||
|
if (!canvas) {
|
||||||
|
canvas = document.createElement('canvas')
|
||||||
|
canvas.id = 'pdf-canvas-' + pageNum
|
||||||
|
canvas.className = 'pdf-canvas-element'
|
||||||
|
canvas.style.display = 'block'
|
||||||
|
canvas.style.margin = '10px auto'
|
||||||
|
canvas.style.backgroundColor = '#fff'
|
||||||
|
canvas.style.boxShadow = '0 2px 10px rgba(0,0,0,0.1)'
|
||||||
|
|
||||||
|
this.canvasElements[pageNum] = canvas
|
||||||
|
|
||||||
|
// 添加到容器
|
||||||
|
const container = this.$refs.canvasContainer?.$el || this.$refs.canvasContainer
|
||||||
|
if (container) {
|
||||||
|
container.appendChild(canvas)
|
||||||
|
console.log('Canvas 已添加到容器')
|
||||||
|
} else {
|
||||||
|
console.error('找不到 canvas 容器')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置 canvas 尺寸
|
||||||
|
canvas.width = viewport.width
|
||||||
|
canvas.height = viewport.height
|
||||||
|
canvas.style.width = viewport.width + 'px'
|
||||||
|
canvas.style.height = viewport.height + 'px'
|
||||||
|
|
||||||
|
const context = canvas.getContext('2d')
|
||||||
|
|
||||||
|
// 清除之前的内容
|
||||||
|
context.clearRect(0, 0, canvas.width, canvas.height)
|
||||||
|
|
||||||
|
// 渲染 PDF 页面到 canvas
|
||||||
|
const renderContext = {
|
||||||
|
canvasContext: context,
|
||||||
|
viewport: viewport
|
||||||
|
}
|
||||||
|
|
||||||
|
await page.render(renderContext).promise
|
||||||
|
console.log('页面渲染完成:', pageNum)
|
||||||
|
|
||||||
|
} catch (err) {
|
||||||
|
console.error('渲染页面失败:', err)
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
|
||||||
|
clearCanvases() {
|
||||||
|
// 清除所有 canvas
|
||||||
|
const container = this.$refs.canvasContainer?.$el || this.$refs.canvasContainer
|
||||||
|
if (container) {
|
||||||
|
container.innerHTML = ''
|
||||||
|
}
|
||||||
|
this.canvasElements = {}
|
||||||
|
},
|
||||||
|
|
||||||
|
async prevPage() {
|
||||||
|
if (this.currentPage > 1) {
|
||||||
|
this.currentPage--
|
||||||
|
this.clearCanvases()
|
||||||
|
await this.renderPage(this.currentPage)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async nextPage() {
|
||||||
|
if (this.currentPage < this.totalPages) {
|
||||||
|
this.currentPage++
|
||||||
|
this.clearCanvases()
|
||||||
|
await this.renderPage(this.currentPage)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async zoomIn() {
|
||||||
|
if (this.scale < 3) {
|
||||||
|
this.scale += 0.2
|
||||||
|
this.clearCanvases()
|
||||||
|
await this.renderPage(this.currentPage)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async zoomOut() {
|
||||||
|
if (this.scale > 0.5) {
|
||||||
|
this.scale -= 0.2
|
||||||
|
this.clearCanvases()
|
||||||
|
await this.renderPage(this.currentPage)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
handleClose() {
|
||||||
|
this.$emit('close')
|
||||||
|
this.$emit('update:visible', false)
|
||||||
|
},
|
||||||
|
|
||||||
|
cleanup() {
|
||||||
|
this.clearCanvases()
|
||||||
|
if (this.pdfDoc) {
|
||||||
|
this.pdfDoc.destroy()
|
||||||
|
this.pdfDoc = null
|
||||||
|
}
|
||||||
|
this.currentPage = 1
|
||||||
|
this.totalPages = 0
|
||||||
|
this.error = ''
|
||||||
|
this.loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
this.cleanup()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.pdf-viewer-modal {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.8);
|
||||||
|
z-index: 9999;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdf-container {
|
||||||
|
width: 95%;
|
||||||
|
height: 90%;
|
||||||
|
max-width: 900px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdf-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 12px 15px;
|
||||||
|
background: #C93639;
|
||||||
|
color: #fff;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdf-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdf-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-info {
|
||||||
|
font-size: 13px;
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-btn {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
border-radius: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-icon {
|
||||||
|
font-size: 20px;
|
||||||
|
color: #fff;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdf-content {
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
background: #e0e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-wrapper,
|
||||||
|
.error-wrapper {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-spinner {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
border: 2px solid #f0f0f0;
|
||||||
|
border-top-color: #C93639;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: spin 0.8s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
to { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-text {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-text {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #999;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.retry-btn {
|
||||||
|
padding: 8px 20px;
|
||||||
|
background: #C93639;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 15px;
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdf-scroll-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.canvas-container {
|
||||||
|
min-height: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdf-toolbar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 10px;
|
||||||
|
background: #fff;
|
||||||
|
border-top: 1px solid #eee;
|
||||||
|
gap: 10px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar-btn {
|
||||||
|
padding: 8px 16px;
|
||||||
|
background: #C93639;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 15px;
|
||||||
|
font-size: 13px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&.disabled {
|
||||||
|
background: #ccc;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 全局样式,确保 canvas 正确显示 */
|
||||||
|
.pdf-canvas-element {
|
||||||
|
display: block !important;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
39
src/config/api.config.js
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
/**
|
||||||
|
* API配置文件
|
||||||
|
* 统一管理不同环境的API地址
|
||||||
|
*/
|
||||||
|
|
||||||
|
// 开发环境配置
|
||||||
|
const development = {
|
||||||
|
// 使用代理路径(vue.config.js会将/api代理到http://localhost:8123)
|
||||||
|
baseURL: '/api',
|
||||||
|
timeout: 30000
|
||||||
|
}
|
||||||
|
|
||||||
|
// 测试环境配置
|
||||||
|
const test = {
|
||||||
|
baseURL: 'https://martial-api.aitisai.com',
|
||||||
|
timeout: 30000
|
||||||
|
}
|
||||||
|
|
||||||
|
// 生产环境配置
|
||||||
|
const production = {
|
||||||
|
baseURL: 'https://martial-api.aitisai.com',
|
||||||
|
timeout: 30000
|
||||||
|
}
|
||||||
|
|
||||||
|
// 根据 process.env.NODE_ENV 自动切换环境
|
||||||
|
// uniapp 编译时会自动注入 NODE_ENV
|
||||||
|
const env = process.env.NODE_ENV || 'development'
|
||||||
|
|
||||||
|
const config = {
|
||||||
|
development,
|
||||||
|
test,
|
||||||
|
production
|
||||||
|
}
|
||||||
|
|
||||||
|
// 导出当前环境的配置
|
||||||
|
export default {
|
||||||
|
...config[env],
|
||||||
|
env
|
||||||
|
}
|
||||||
247
src/pages.json
@@ -1,220 +1,35 @@
|
|||||||
{
|
{
|
||||||
"pages": [
|
"pages": [
|
||||||
{
|
{"path": "pages/login/login", "style": {"navigationBarTitleText": "登录", "navigationStyle": "custom"}},
|
||||||
"path": "pages/login/login",
|
{"path": "pages/register/register", "style": {"navigationBarTitleText": "注册", "navigationStyle": "custom"}},
|
||||||
"style": {
|
{"path": "pages/home/home", "style": {"navigationBarTitleText": "武术赛事通", "navigationBarBackgroundColor": "#C93639", "navigationBarTextStyle": "white"}},
|
||||||
"navigationBarTitleText": "登录",
|
{"path": "pages/profile/profile", "style": {"navigationBarTitleText": "个人中心", "navigationBarBackgroundColor": "#C93639", "navigationBarTextStyle": "white"}},
|
||||||
"navigationStyle": "custom"
|
{"path": "pages/change-password/change-password", "style": {"navigationBarTitleText": "修改密码", "navigationBarBackgroundColor": "#C93639", "navigationBarTextStyle": "white"}},
|
||||||
}
|
{"path": "pages/common-info/common-info", "style": {"navigationBarTitleText": "常用信息", "navigationBarBackgroundColor": "#C93639", "navigationBarTextStyle": "white"}},
|
||||||
},
|
{"path": "pages/add-player/add-player", "style": {"navigationBarTitleText": "新增选手", "navigationBarBackgroundColor": "#C93639", "navigationBarTextStyle": "white"}},
|
||||||
{
|
{"path": "pages/add-team/add-team", "style": {"navigationBarTitleText": "新增集体", "navigationBarBackgroundColor": "#C93639", "navigationBarTextStyle": "white"}},
|
||||||
"path": "pages/register/register",
|
{"path": "pages/edit-team/edit-team", "style": {"navigationBarTitleText": "编辑集体", "navigationBarBackgroundColor": "#C93639", "navigationBarTextStyle": "white"}},
|
||||||
"style": {
|
{"path": "pages/edit-player/edit-player", "style": {"navigationBarTitleText": "编辑选手", "navigationBarBackgroundColor": "#C93639", "navigationBarTextStyle": "white"}},
|
||||||
"navigationBarTitleText": "注册",
|
{"path": "pages/add-contact/add-contact", "style": {"navigationBarTitleText": "新增联系人", "navigationBarBackgroundColor": "#C93639", "navigationBarTextStyle": "white"}},
|
||||||
"navigationStyle": "custom"
|
{"path": "pages/edit-contact/edit-contact", "style": {"navigationBarTitleText": "编辑联系人", "navigationBarBackgroundColor": "#C93639", "navigationBarTextStyle": "white"}},
|
||||||
}
|
{"path": "pages/my-registration/my-registration", "style": {"navigationBarTitleText": "我的报名", "navigationBarBackgroundColor": "#C93639", "navigationBarTextStyle": "white"}},
|
||||||
},
|
{"path": "pages/event-list/event-list", "style": {"navigationBarTitleText": "全部赛事列表", "navigationBarBackgroundColor": "#C93639", "navigationBarTextStyle": "white"}},
|
||||||
{
|
{"path": "pages/event-detail/event-detail", "style": {"navigationBarTitleText": "赛事详情", "navigationBarBackgroundColor": "#C93639", "navigationBarTextStyle": "white"}},
|
||||||
"path": "pages/home/home",
|
{"path": "pages/select-event/select-event", "style": {"navigationBarTitleText": "选择报名项目", "navigationBarBackgroundColor": "#C93639", "navigationBarTextStyle": "white"}},
|
||||||
"style": {
|
{"path": "pages/event-register/event-register", "style": {"navigationBarTitleText": "赛事报名", "navigationBarBackgroundColor": "#C93639", "navigationBarTextStyle": "white"}},
|
||||||
"navigationBarTitleText": "武术赛事通",
|
{"path": "pages/register-type/register-type", "style": {"navigationBarTitleText": "选择报名", "navigationBarBackgroundColor": "#C93639", "navigationBarTextStyle": "white"}},
|
||||||
"navigationBarBackgroundColor": "#C93639",
|
{"path": "pages/event-info/event-info", "style": {"navigationBarTitleText": "信息发布", "navigationBarBackgroundColor": "#C93639", "navigationBarTextStyle": "white"}},
|
||||||
"navigationBarTextStyle": "white"
|
{"path": "pages/event-info-detail/event-info-detail", "style": {"navigationBarTitleText": "信息详情", "navigationBarBackgroundColor": "#C93639", "navigationBarTextStyle": "white"}},
|
||||||
}
|
{"path": "pages/event-rules/event-rules", "style": {"navigationBarTitleText": "赛事规程", "navigationBarBackgroundColor": "#C93639", "navigationBarTextStyle": "white"}},
|
||||||
},
|
{"path": "pages/event-schedule/event-schedule", "style": {"navigationBarTitleText": "活动日程", "navigationBarBackgroundColor": "#C93639", "navigationBarTextStyle": "white"}},
|
||||||
{
|
{"path": "pages/event-players/event-players", "style": {"navigationBarTitleText": "参赛选手", "navigationBarBackgroundColor": "#C93639", "navigationBarTextStyle": "white"}},
|
||||||
"path": "pages/profile/profile",
|
{"path": "pages/event-live/event-live", "style": {"navigationBarTitleText": "比赛实况", "navigationBarBackgroundColor": "#C93639", "navigationBarTextStyle": "white"}},
|
||||||
"style": {
|
{"path": "pages/event-lineup/event-lineup", "style": {"navigationBarTitleText": "出场顺序", "navigationBarBackgroundColor": "#C93639", "navigationBarTextStyle": "white"}},
|
||||||
"navigationBarTitleText": "个人中心",
|
{"path": "pages/event-score/event-score", "style": {"navigationBarTitleText": "成绩", "navigationBarBackgroundColor": "#C93639", "navigationBarTextStyle": "white"}},
|
||||||
"navigationBarBackgroundColor": "#C93639",
|
{"path": "pages/event-medals/event-medals", "style": {"navigationBarTitleText": "奖牌榜", "navigationBarBackgroundColor": "#C93639", "navigationBarTextStyle": "white"}},
|
||||||
"navigationBarTextStyle": "white"
|
{"path": "pages/attachment-view/attachment-view", "style": {"navigationBarTitleText": "附件查看", "navigationBarBackgroundColor": "#C93639", "navigationBarTextStyle": "white"}},
|
||||||
}
|
{"path": "pages/event-photos/event-photos", "style": {"navigationBarTitleText": "图片直播", "navigationBarBackgroundColor": "#C93639", "navigationBarTextStyle": "white"}}
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/change-password/change-password",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "修改密码",
|
|
||||||
"navigationBarBackgroundColor": "#C93639",
|
|
||||||
"navigationBarTextStyle": "white"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/common-info/common-info",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "常用信息",
|
|
||||||
"navigationBarBackgroundColor": "#C93639",
|
|
||||||
"navigationBarTextStyle": "white"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/add-player/add-player",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "新增选手",
|
|
||||||
"navigationBarBackgroundColor": "#C93639",
|
|
||||||
"navigationBarTextStyle": "white"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/edit-player/edit-player",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "编辑选手",
|
|
||||||
"navigationBarBackgroundColor": "#C93639",
|
|
||||||
"navigationBarTextStyle": "white"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/add-contact/add-contact",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "新增联系人",
|
|
||||||
"navigationBarBackgroundColor": "#C93639",
|
|
||||||
"navigationBarTextStyle": "white"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/my-registration/my-registration",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "我的报名",
|
|
||||||
"navigationBarBackgroundColor": "#C93639",
|
|
||||||
"navigationBarTextStyle": "white"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/event-list/event-list",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "全部赛事列表",
|
|
||||||
"navigationBarBackgroundColor": "#C93639",
|
|
||||||
"navigationBarTextStyle": "white"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/event-detail/event-detail",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "赛事详情",
|
|
||||||
"navigationBarBackgroundColor": "#C93639",
|
|
||||||
"navigationBarTextStyle": "white"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/select-event/select-event",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "选择报名项目",
|
|
||||||
"navigationBarBackgroundColor": "#C93639",
|
|
||||||
"navigationBarTextStyle": "white"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/event-register/event-register",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "赛事报名",
|
|
||||||
"navigationBarBackgroundColor": "#C93639",
|
|
||||||
"navigationBarTextStyle": "white"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/register-type/register-type",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "选择报名",
|
|
||||||
"navigationBarBackgroundColor": "#C93639",
|
|
||||||
"navigationBarTextStyle": "white"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/event-info/event-info",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "信息发布",
|
|
||||||
"navigationBarBackgroundColor": "#C93639",
|
|
||||||
"navigationBarTextStyle": "white"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/event-info-detail/event-info-detail",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "信息详情",
|
|
||||||
"navigationBarBackgroundColor": "#C93639",
|
|
||||||
"navigationBarTextStyle": "white"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/event-rules/event-rules",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "赛事规程",
|
|
||||||
"navigationBarBackgroundColor": "#C93639",
|
|
||||||
"navigationBarTextStyle": "white"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/event-schedule/event-schedule",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "活动日程",
|
|
||||||
"navigationBarBackgroundColor": "#C93639",
|
|
||||||
"navigationBarTextStyle": "white"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/event-players/event-players",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "参赛选手",
|
|
||||||
"navigationBarBackgroundColor": "#C93639",
|
|
||||||
"navigationBarTextStyle": "white"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/event-live/event-live",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "比赛实况",
|
|
||||||
"navigationBarBackgroundColor": "#C93639",
|
|
||||||
"navigationBarTextStyle": "white"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/event-lineup/event-lineup",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "出场顺序",
|
|
||||||
"navigationBarBackgroundColor": "#C93639",
|
|
||||||
"navigationBarTextStyle": "white"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/event-score/event-score",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "成绩",
|
|
||||||
"navigationBarBackgroundColor": "#C93639",
|
|
||||||
"navigationBarTextStyle": "white"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/event-medals/event-medals",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "奖牌榜",
|
|
||||||
"navigationBarBackgroundColor": "#C93639",
|
|
||||||
"navigationBarTextStyle": "white"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
],
|
||||||
"globalStyle": {
|
"globalStyle": {"navigationBarTextStyle": "white", "navigationBarTitleText": "武术赛事", "navigationBarBackgroundColor": "#C93639", "backgroundColor": "#F8F8F8"},
|
||||||
"navigationBarTextStyle": "white",
|
"tabBar": {"color": "#999999", "selectedColor": "#C93639", "backgroundColor": "#ffffff", "borderStyle": "black", "list": [{"pagePath": "pages/home/home", "text": "首页", "iconPath": "static/images/首页灰@3x.png", "selectedIconPath": "static/images/首页亮@3x.png"}, {"pagePath": "pages/profile/profile", "text": "个人中心", "iconPath": "static/images/个人中心灰@3x.png", "selectedIconPath": "static/images/个人中心亮@3x.png"}]}
|
||||||
"navigationBarTitleText": "武术赛事",
|
|
||||||
"navigationBarBackgroundColor": "#C93639",
|
|
||||||
"backgroundColor": "#F8F8F8"
|
|
||||||
},
|
|
||||||
"tabBar": {
|
|
||||||
"color": "#999999",
|
|
||||||
"selectedColor": "#C93639",
|
|
||||||
"backgroundColor": "#ffffff",
|
|
||||||
"borderStyle": "black",
|
|
||||||
"list": [
|
|
||||||
{
|
|
||||||
"pagePath": "pages/home/home",
|
|
||||||
"text": "首页",
|
|
||||||
"iconPath": "static/images/首页灰@3x.png",
|
|
||||||
"selectedIconPath": "static/images/首页亮@3x.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"pagePath": "pages/profile/profile",
|
|
||||||
"text": "个人中心",
|
|
||||||
"iconPath": "static/images/个人中心灰@3x.png",
|
|
||||||
"selectedIconPath": "static/images/个人中心亮@3x.png"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
225
src/pages/add-contact/add-contact.vue
Normal file
@@ -0,0 +1,225 @@
|
|||||||
|
<template>
|
||||||
|
<view class="add-contact-page">
|
||||||
|
<!-- 表单 -->
|
||||||
|
<view class="form-container">
|
||||||
|
<view class="form-item" @click="showIdTypePicker = true">
|
||||||
|
<view class="form-label">证件类型</view>
|
||||||
|
<view class="form-value">
|
||||||
|
<text>{{ formData.idType }}</text>
|
||||||
|
<text class="arrow">›</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="form-label">姓名</view>
|
||||||
|
<view class="form-value">
|
||||||
|
<input class="form-input" v-model="formData.name" placeholder="请输入姓名" placeholder-class="placeholder" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="form-label">证件号码</view>
|
||||||
|
<view class="form-value">
|
||||||
|
<input class="form-input" v-model="formData.idCard" placeholder="请输入身份证号码" placeholder-class="placeholder" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="form-label">手机号码</view>
|
||||||
|
<view class="form-value">
|
||||||
|
<input class="form-input" v-model="formData.phone" placeholder="请输入手机号码" placeholder-class="placeholder" type="number" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="form-label">邮箱</view>
|
||||||
|
<view class="form-value">
|
||||||
|
<input class="form-input" v-model="formData.email" placeholder="请输入邮箱" placeholder-class="placeholder" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="form-label">地址</view>
|
||||||
|
<view class="form-value">
|
||||||
|
<input class="form-input" v-model="formData.address" placeholder="请输入地址" placeholder-class="placeholder" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item switch-item">
|
||||||
|
<view class="form-label">设置为默认联系人</view>
|
||||||
|
<view class="form-value">
|
||||||
|
<switch :checked="formData.isDefault" @change="handleSwitchChange" color="#C93639" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- Toast提示 -->
|
||||||
|
<view class="toast-message" v-if="showToast">
|
||||||
|
<text class="toast-text">{{ toastMessage }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 按钮 -->
|
||||||
|
<view class="btn-wrapper">
|
||||||
|
<view class="btn save-btn" :class="{ disabled: !isFormValid || saving }" @click="handleSave">
|
||||||
|
{{ saving ? '保存中...' : '保存' }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import athleteAPI from '@/api/athlete.js';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
formData: {
|
||||||
|
idType: '身份证',
|
||||||
|
name: '',
|
||||||
|
idCard: '',
|
||||||
|
phone: '',
|
||||||
|
email: '',
|
||||||
|
address: '',
|
||||||
|
isDefault: false
|
||||||
|
},
|
||||||
|
showToast: false,
|
||||||
|
toastMessage: '',
|
||||||
|
saving: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
isFormValid() {
|
||||||
|
return this.formData.name && this.formData.idCard && this.formData.phone &&
|
||||||
|
this.validateIdCard(this.formData.idCard) && this.validatePhone(this.formData.phone);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
validateIdCard(idCard) {
|
||||||
|
return /^\d{17}[\dXx]$/.test(idCard);
|
||||||
|
},
|
||||||
|
validatePhone(phone) {
|
||||||
|
return /^1\d{10}$/.test(phone);
|
||||||
|
},
|
||||||
|
handleSwitchChange(e) {
|
||||||
|
this.formData.isDefault = e.detail.value;
|
||||||
|
},
|
||||||
|
showToastMsg(msg) {
|
||||||
|
this.toastMessage = msg;
|
||||||
|
this.showToast = true;
|
||||||
|
setTimeout(() => { this.showToast = false; }, 2000);
|
||||||
|
},
|
||||||
|
async handleSave() {
|
||||||
|
if (!this.isFormValid || this.saving) return;
|
||||||
|
|
||||||
|
if (!this.validatePhone(this.formData.phone)) {
|
||||||
|
this.showToastMsg('手机号码格式不正确');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!this.validateIdCard(this.formData.idCard)) {
|
||||||
|
this.showToastMsg('身份证号码格式不正确');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.saving = true;
|
||||||
|
try {
|
||||||
|
await athleteAPI.saveContact(this.formData);
|
||||||
|
uni.showToast({ title: '保存成功', icon: 'success' });
|
||||||
|
setTimeout(() => { uni.navigateBack(); }, 1500);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('保存联系人失败:', err);
|
||||||
|
this.showToastMsg('保存失败,请重试');
|
||||||
|
} finally {
|
||||||
|
this.saving = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.add-contact-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
padding-bottom: 200rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-container {
|
||||||
|
background-color: #fff;
|
||||||
|
margin: 30rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 35rpx 30rpx;
|
||||||
|
border-bottom: 1rpx solid #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item:last-child { border-bottom: none; }
|
||||||
|
.switch-item { padding: 30rpx; }
|
||||||
|
|
||||||
|
.form-label {
|
||||||
|
width: 180rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-value {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.placeholder { color: #cccccc; }
|
||||||
|
.arrow { font-size: 40rpx; color: #cccccc; margin-left: 10rpx; }
|
||||||
|
|
||||||
|
.toast-message {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
|
color: #fff;
|
||||||
|
padding: 30rpx 50rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-text { font-size: 28rpx; }
|
||||||
|
|
||||||
|
.btn-wrapper {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: 30rpx;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
padding: 30rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-btn {
|
||||||
|
background-color: #C93639;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-btn.disabled {
|
||||||
|
background-color: rgba(201, 54, 57, 0.5);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
400
src/pages/add-player/add-player.vue
Normal file
@@ -0,0 +1,400 @@
|
|||||||
|
<template>
|
||||||
|
<view class="add-player-page">
|
||||||
|
<!-- 表单 -->
|
||||||
|
<view class="form-container">
|
||||||
|
<view class="form-item" @click="showIdTypePicker = true">
|
||||||
|
<view class="form-label">证件类型</view>
|
||||||
|
<view class="form-value">
|
||||||
|
<text :class="{ placeholder: !formData.idType }">{{ formData.idType || '身份证' }}</text>
|
||||||
|
<text class="arrow">›</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="form-label">姓名</view>
|
||||||
|
<view class="form-value">
|
||||||
|
<input
|
||||||
|
class="form-input"
|
||||||
|
v-model="formData.name"
|
||||||
|
placeholder="请输入姓名"
|
||||||
|
placeholder-class="placeholder"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="form-label">证件号码</view>
|
||||||
|
<view class="form-value">
|
||||||
|
<input
|
||||||
|
class="form-input"
|
||||||
|
v-model="formData.idCard"
|
||||||
|
placeholder="请输入身份证号码"
|
||||||
|
placeholder-class="placeholder"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="form-label">队伍</view>
|
||||||
|
<view class="form-value">
|
||||||
|
<input
|
||||||
|
class="form-input"
|
||||||
|
v-model="formData.team"
|
||||||
|
placeholder="请输入队伍名称"
|
||||||
|
placeholder-class="placeholder"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="form-label">所属单位</view>
|
||||||
|
<view class="form-value">
|
||||||
|
<input
|
||||||
|
class="form-input"
|
||||||
|
v-model="formData.organization"
|
||||||
|
placeholder="请输入所属单位"
|
||||||
|
placeholder-class="placeholder"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="form-label">联系电话</view>
|
||||||
|
<view class="form-value">
|
||||||
|
<input
|
||||||
|
class="form-input"
|
||||||
|
v-model="formData.phone"
|
||||||
|
type="number"
|
||||||
|
placeholder="请输入联系电话"
|
||||||
|
placeholder-class="placeholder"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 错误提示 - 只在有具体错误时显示 -->
|
||||||
|
<view class="error-hints" v-if="validationErrors.length > 0">
|
||||||
|
<view class="error-item" v-for="(error, index) in validationErrors" :key="index">
|
||||||
|
<text class="error-text">{{ error }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 按钮 -->
|
||||||
|
<view class="btn-wrapper">
|
||||||
|
<view class="btn save-btn" :class="{ disabled: !isFormValid }" @click="handleSave">保存</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 证件类型选择器 -->
|
||||||
|
<picker-view
|
||||||
|
class="picker-view"
|
||||||
|
v-if="showIdTypePicker"
|
||||||
|
:value="[0]"
|
||||||
|
@change="handleIdTypeChange"
|
||||||
|
@cancel="showIdTypePicker = false"
|
||||||
|
>
|
||||||
|
<picker-view-column>
|
||||||
|
<view class="picker-item">身份证</view>
|
||||||
|
</picker-view-column>
|
||||||
|
</picker-view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import athleteAPI from '@/api/athlete.js'
|
||||||
|
import { getUserInfo, getToken } from '@/utils/auth.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
formData: {
|
||||||
|
idType: '身份证',
|
||||||
|
name: '',
|
||||||
|
idCard: '',
|
||||||
|
team: '',
|
||||||
|
organization: '',
|
||||||
|
phone: ''
|
||||||
|
},
|
||||||
|
competitionId: '',
|
||||||
|
projectIds: [],
|
||||||
|
validationErrors: [],
|
||||||
|
showIdTypePicker: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
if (options.competitionId) {
|
||||||
|
this.competitionId = options.competitionId
|
||||||
|
}
|
||||||
|
if (options.projectIds) {
|
||||||
|
this.projectIds = options.projectIds.split(',')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
isFormValid() {
|
||||||
|
return (
|
||||||
|
this.formData.name &&
|
||||||
|
this.formData.idCard &&
|
||||||
|
this.formData.team &&
|
||||||
|
this.formData.organization &&
|
||||||
|
this.formData.phone &&
|
||||||
|
this.validateIdCard(this.formData.idCard) &&
|
||||||
|
this.validatePhone(this.formData.phone)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
'formData.idCard'(val) {
|
||||||
|
this.updateValidationErrors();
|
||||||
|
},
|
||||||
|
'formData.phone'(val) {
|
||||||
|
this.updateValidationErrors();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
validateIdCard(idCard) {
|
||||||
|
if (!idCard) return false;
|
||||||
|
if (!/^\d{17}[\dXx]$/.test(idCard)) return false;
|
||||||
|
|
||||||
|
const year = parseInt(idCard.substring(6, 10))
|
||||||
|
const month = parseInt(idCard.substring(10, 12))
|
||||||
|
const day = parseInt(idCard.substring(12, 14))
|
||||||
|
|
||||||
|
if (month < 1 || month > 12) return false;
|
||||||
|
if (day < 1 || day > 31) return false;
|
||||||
|
|
||||||
|
const currentYear = new Date().getFullYear()
|
||||||
|
if (year < 1900 || year > currentYear) return false;
|
||||||
|
|
||||||
|
const date = new Date(year, month - 1, day)
|
||||||
|
if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
validatePhone(phone) {
|
||||||
|
return /^1[3-9]\d{9}$/.test(phone);
|
||||||
|
},
|
||||||
|
updateValidationErrors() {
|
||||||
|
this.validationErrors = [];
|
||||||
|
|
||||||
|
if (this.formData.idCard && !this.validateIdCard(this.formData.idCard)) {
|
||||||
|
this.validationErrors.push('身份证号码格式不正确');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.formData.phone && !this.validatePhone(this.formData.phone)) {
|
||||||
|
this.validationErrors.push('手机号格式不正确');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleIdTypeChange(e) {
|
||||||
|
this.formData.idType = '身份证';
|
||||||
|
this.showIdTypePicker = false;
|
||||||
|
},
|
||||||
|
extractInfoFromIdCard(idCard) {
|
||||||
|
if (!idCard || idCard.length !== 18) {
|
||||||
|
return { gender: null, age: null, birthDate: null }
|
||||||
|
}
|
||||||
|
|
||||||
|
const year = idCard.substring(6, 10)
|
||||||
|
const month = idCard.substring(10, 12)
|
||||||
|
const day = idCard.substring(12, 14)
|
||||||
|
const birthDate = `${year}-${month}-${day}`
|
||||||
|
|
||||||
|
const birthYear = parseInt(year)
|
||||||
|
const currentYear = new Date().getFullYear()
|
||||||
|
const age = currentYear - birthYear
|
||||||
|
|
||||||
|
const genderCode = parseInt(idCard.substring(16, 17))
|
||||||
|
const gender = genderCode % 2 === 1 ? 1 : 2
|
||||||
|
|
||||||
|
return { gender, age, birthDate }
|
||||||
|
},
|
||||||
|
|
||||||
|
async handleSave() {
|
||||||
|
if (!this.isFormValid) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请完善信息',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check login status
|
||||||
|
const token = getToken()
|
||||||
|
if (!token) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请先登录',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/login/login'
|
||||||
|
})
|
||||||
|
}, 1500)
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const info = this.extractInfoFromIdCard(this.formData.idCard)
|
||||||
|
|
||||||
|
const userInfo = getUserInfo()
|
||||||
|
const submitData = {
|
||||||
|
playerName: this.formData.name,
|
||||||
|
idCard: this.formData.idCard,
|
||||||
|
teamName: this.formData.team,
|
||||||
|
organization: this.formData.organization,
|
||||||
|
contactPhone: this.formData.phone,
|
||||||
|
idCardType: 1,
|
||||||
|
gender: info.gender,
|
||||||
|
age: info.age,
|
||||||
|
birthDate: info.birthDate,
|
||||||
|
createUser: userInfo ? userInfo.userId : null
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.competitionId) {
|
||||||
|
submitData.competitionId = this.competitionId
|
||||||
|
}
|
||||||
|
if (this.projectIds && this.projectIds.length > 0) {
|
||||||
|
submitData.projectId = this.projectIds[0]
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('提交选手数据:', submitData)
|
||||||
|
await athleteAPI.submitAthlete(submitData)
|
||||||
|
|
||||||
|
uni.showToast({
|
||||||
|
title: '保存成功',
|
||||||
|
icon: 'success'
|
||||||
|
})
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.navigateBack()
|
||||||
|
}, 1500)
|
||||||
|
} catch (err) {
|
||||||
|
console.error('保存选手失败:', err)
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message || '保存失败,请重试',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.add-player-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
padding-bottom: 200rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-container {
|
||||||
|
background-color: #fff;
|
||||||
|
margin: 30rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 35rpx 30rpx;
|
||||||
|
border-bottom: 1rpx solid #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-label {
|
||||||
|
width: 180rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-value {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.placeholder {
|
||||||
|
color: #cccccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
font-size: 40rpx;
|
||||||
|
color: #cccccc;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-hints {
|
||||||
|
margin: 0 30rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
background-color: #fff3f3;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-item {
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-item:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-text {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #C93639;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-wrapper {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: 30rpx;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
padding: 24rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-btn {
|
||||||
|
background-color: #C93639;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-btn.disabled {
|
||||||
|
background-color: rgba(201, 54, 57, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker-view {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 500rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker-item {
|
||||||
|
height: 80rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 30rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
374
src/pages/add-team/add-team.vue
Normal file
@@ -0,0 +1,374 @@
|
|||||||
|
<template>
|
||||||
|
<view class="add-team-page">
|
||||||
|
<view class="form-section">
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="form-label required">集体名称</view>
|
||||||
|
<input
|
||||||
|
class="form-input"
|
||||||
|
type="text"
|
||||||
|
v-model="formData.name"
|
||||||
|
placeholder="请输入集体名称"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="form-label">备注</view>
|
||||||
|
<textarea
|
||||||
|
class="form-textarea"
|
||||||
|
v-model="formData.remark"
|
||||||
|
placeholder="请输入备注信息"
|
||||||
|
></textarea>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 成员列表 -->
|
||||||
|
<view class="member-section">
|
||||||
|
<view class="section-header">
|
||||||
|
<text class="section-title">成员列表</text>
|
||||||
|
<view class="add-member-btn" @click="showMemberPicker = true">
|
||||||
|
<text>+ 添加成员</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="member-list" v-if="formData.members.length > 0">
|
||||||
|
<view class="member-item" v-for="(member, index) in formData.members" :key="index">
|
||||||
|
<view class="member-info">
|
||||||
|
<text class="member-name">{{ member.name }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="remove-btn" @click="removeMember(index)">移除</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="empty-members" v-else>
|
||||||
|
<text>暂无成员,请添加</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 提交按钮 -->
|
||||||
|
<view class="submit-btn-wrapper">
|
||||||
|
<view class="submit-btn" @click="handleSubmit">保存</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 成员选择弹窗 -->
|
||||||
|
<view class="member-picker-mask" v-if="showMemberPicker" @click="showMemberPicker = false">
|
||||||
|
<view class="member-picker" @click.stop>
|
||||||
|
<view class="picker-header">
|
||||||
|
<text class="picker-title">选择成员</text>
|
||||||
|
<text class="picker-close" @click="showMemberPicker = false">×</text>
|
||||||
|
</view>
|
||||||
|
<view class="picker-list">
|
||||||
|
<view
|
||||||
|
class="picker-item"
|
||||||
|
v-for="(player, index) in availablePlayers"
|
||||||
|
:key="index"
|
||||||
|
@click="addMember(player)"
|
||||||
|
>
|
||||||
|
<text>{{ player.name }}</text>
|
||||||
|
<text class="add-icon">+</text>
|
||||||
|
</view>
|
||||||
|
<view class="empty-picker" v-if="availablePlayers.length === 0">
|
||||||
|
<text>暂无可选成员</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import athleteAPI from '@/api/athlete.js';
|
||||||
|
import { getUserInfo } from '@/utils/auth.js';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
formData: {
|
||||||
|
name: '',
|
||||||
|
remark: '',
|
||||||
|
members: []
|
||||||
|
},
|
||||||
|
playerList: [],
|
||||||
|
showMemberPicker: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
availablePlayers() {
|
||||||
|
const memberIds = this.formData.members.map(m => m.id)
|
||||||
|
return this.playerList.filter(p => !memberIds.includes(p.id))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.loadPlayerList()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async loadPlayerList() {
|
||||||
|
try {
|
||||||
|
const userInfo = getUserInfo()
|
||||||
|
if (!userInfo || !userInfo.userId) return
|
||||||
|
|
||||||
|
const res = await athleteAPI.getAthleteList({
|
||||||
|
current: 1,
|
||||||
|
size: 100,
|
||||||
|
createUser: userInfo.userId
|
||||||
|
})
|
||||||
|
|
||||||
|
let list = []
|
||||||
|
if (res.records) {
|
||||||
|
list = res.records
|
||||||
|
} else if (Array.isArray(res)) {
|
||||||
|
list = res
|
||||||
|
}
|
||||||
|
|
||||||
|
this.playerList = list.map(item => ({
|
||||||
|
id: item.id,
|
||||||
|
name: item.name || item.playerName
|
||||||
|
}))
|
||||||
|
} catch (err) {
|
||||||
|
console.error('加载选手列表失败:', err)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
addMember(player) {
|
||||||
|
this.formData.members.push({
|
||||||
|
id: player.id,
|
||||||
|
name: player.name
|
||||||
|
})
|
||||||
|
this.showMemberPicker = false
|
||||||
|
},
|
||||||
|
|
||||||
|
removeMember(index) {
|
||||||
|
this.formData.members.splice(index, 1)
|
||||||
|
},
|
||||||
|
|
||||||
|
async handleSubmit() {
|
||||||
|
if (!this.formData.name) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请输入集体名称',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.formData.members.length === 0) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请添加至少一名成员',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const userInfo = getUserInfo()
|
||||||
|
|
||||||
|
const data = {
|
||||||
|
teamName: this.formData.name,
|
||||||
|
remark: this.formData.remark,
|
||||||
|
memberIds: this.formData.members.map(m => m.id),
|
||||||
|
createUser: userInfo?.userId
|
||||||
|
}
|
||||||
|
|
||||||
|
if (athleteAPI.saveTeam) {
|
||||||
|
await athleteAPI.saveTeam(data)
|
||||||
|
}
|
||||||
|
|
||||||
|
uni.showToast({
|
||||||
|
title: '保存成功',
|
||||||
|
icon: 'success'
|
||||||
|
})
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.navigateBack()
|
||||||
|
}, 1500)
|
||||||
|
} catch (err) {
|
||||||
|
console.error('保存失败:', err)
|
||||||
|
uni.showToast({
|
||||||
|
title: '保存失败',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.add-team-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
padding-bottom: 150rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-section {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 30rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item {
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-label {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-label.required::before {
|
||||||
|
content: '*';
|
||||||
|
color: #C93639;
|
||||||
|
margin-right: 5rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input {
|
||||||
|
width: 100%;
|
||||||
|
height: 80rpx;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-textarea {
|
||||||
|
width: 100%;
|
||||||
|
height: 200rpx;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-section {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-member-btn {
|
||||||
|
color: #C93639;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-list {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20rpx;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-name {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.remove-btn {
|
||||||
|
color: #C93639;
|
||||||
|
font-size: 26rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-members {
|
||||||
|
text-align: center;
|
||||||
|
padding: 50rpx;
|
||||||
|
color: #999;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn-wrapper {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: 30rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn {
|
||||||
|
background-color: #C93639;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
padding: 30rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-picker-mask {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 1000;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-picker {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 20rpx 20rpx 0 0;
|
||||||
|
max-height: 70vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 30rpx;
|
||||||
|
border-bottom: 1rpx solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker-close {
|
||||||
|
font-size: 40rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker-list {
|
||||||
|
max-height: 60vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 30rpx;
|
||||||
|
border-bottom: 1rpx solid #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-icon {
|
||||||
|
color: #C93639;
|
||||||
|
font-size: 36rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-picker {
|
||||||
|
text-align: center;
|
||||||
|
padding: 50rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
903
src/pages/attachment-view/attachment-view.vue
Normal file
@@ -0,0 +1,903 @@
|
|||||||
|
<template>
|
||||||
|
<view class="attachment-page">
|
||||||
|
<!-- 赛事信息卡片 -->
|
||||||
|
<view class="event-info-card">
|
||||||
|
<view class="event-title">{{ competitionName || '赛事名称' }}</view>
|
||||||
|
<view class="event-time-row">
|
||||||
|
<view class="time-item">
|
||||||
|
<text class="time-label">开始时间</text>
|
||||||
|
<text class="time-value">{{ startTime || '待定' }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="time-divider"></view>
|
||||||
|
<view class="time-item">
|
||||||
|
<text class="time-label">结束时间</text>
|
||||||
|
<text class="time-value">{{ endTime || '待定' }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 加载状态 -->
|
||||||
|
<view class="loading-state" v-if="loading">
|
||||||
|
<view class="loading-spinner"></view>
|
||||||
|
<text class="loading-text">加载中...</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 附件列表 -->
|
||||||
|
<view class="attachments-section" v-if="!loading && attachments.length > 0">
|
||||||
|
<view class="section-header">
|
||||||
|
<text class="section-title">{{ pageTitle }}文件</text>
|
||||||
|
<text class="section-count">共{{ attachments.length }}个文件</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="attachments-list">
|
||||||
|
<view
|
||||||
|
class="attachment-item"
|
||||||
|
v-for="(file, index) in attachments"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<!-- 文件图标 -->
|
||||||
|
<view class="file-icon" :class="'icon-' + file.fileType">
|
||||||
|
<text class="icon-text">{{ getFileIconText(file.fileType) }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 文件信息 -->
|
||||||
|
<view class="file-content">
|
||||||
|
<text class="file-name">{{ file.fileName }}</text>
|
||||||
|
<view class="file-meta">
|
||||||
|
<text class="meta-item">{{ file.fileSize }}</text>
|
||||||
|
<text class="meta-dot" v-if="file.uploadTime">·</text>
|
||||||
|
<text class="meta-item" v-if="file.uploadTime">{{ file.uploadTime }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 操作按钮 -->
|
||||||
|
<view class="file-actions">
|
||||||
|
<view class="action-btn preview-btn" @click="previewFile(file)">
|
||||||
|
<text class="action-text">预览</text>
|
||||||
|
</view>
|
||||||
|
<view class="action-btn download-btn" @click="downloadFile(file)">
|
||||||
|
<text class="action-text">下载</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 空状态 -->
|
||||||
|
<view class="empty-state" v-if="!loading && attachments.length === 0">
|
||||||
|
<image class="empty-image" src="/static/images/empty.png" mode="aspectFit" />
|
||||||
|
<text class="empty-title">暂无{{ pageTitle }}文件</text>
|
||||||
|
<text class="empty-desc">相关文件正在整理中,请稍后查看</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- PDF预览组件 (仅H5) -->
|
||||||
|
<!-- #ifdef H5 -->
|
||||||
|
<pdf-viewer
|
||||||
|
:visible="showPdfViewer"
|
||||||
|
:url="pdfUrl"
|
||||||
|
:file-name="pdfFileName"
|
||||||
|
@close="closePdfViewer"
|
||||||
|
/>
|
||||||
|
<!-- #endif -->
|
||||||
|
|
||||||
|
<!-- 图片预览弹窗 (仅H5) -->
|
||||||
|
<!-- #ifdef H5 -->
|
||||||
|
<view class="image-preview-modal" v-if="showImagePreview" @click="closeImagePreview">
|
||||||
|
<view class="image-preview-container" @click.stop>
|
||||||
|
<view class="image-preview-header">
|
||||||
|
<text class="image-preview-title">{{ previewImageName }}</text>
|
||||||
|
<view class="image-preview-close" @click="closeImagePreview">
|
||||||
|
<text class="close-icon">×</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="image-preview-body">
|
||||||
|
<image :src="previewImageUrl" mode="aspectFit" class="preview-image" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- #endif -->
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import competitionAPI from '@/api/competition.js'
|
||||||
|
// #ifdef H5
|
||||||
|
import PdfViewer from '@/components/pdf-viewer/pdf-viewer.vue'
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// 页面类型配置
|
||||||
|
const PAGE_CONFIG = {
|
||||||
|
'info': { title: '信息发布', type: 'info' },
|
||||||
|
'rules': { title: '赛事规程', type: 'rules' },
|
||||||
|
'schedule': { title: '活动日程', type: 'schedule' },
|
||||||
|
'score': { title: '成绩公告', type: 'results' },
|
||||||
|
'results': { title: '成绩公告', type: 'results' },
|
||||||
|
'awards': { title: '奖牌榜', type: 'medals' },
|
||||||
|
'medals': { title: '奖牌榜', type: 'medals' },
|
||||||
|
'photos': { title: '图片直播', type: 'photos' }
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
// #ifdef H5
|
||||||
|
components: {
|
||||||
|
PdfViewer
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading: true,
|
||||||
|
pageType: 'rules',
|
||||||
|
pageTitle: '赛事规程',
|
||||||
|
competitionId: '',
|
||||||
|
competitionName: '',
|
||||||
|
startTime: '',
|
||||||
|
endTime: '',
|
||||||
|
attachments: [],
|
||||||
|
// PDF预览相关
|
||||||
|
showPdfViewer: false,
|
||||||
|
pdfUrl: '',
|
||||||
|
pdfFileName: '',
|
||||||
|
// 图片预览相关
|
||||||
|
showImagePreview: false,
|
||||||
|
previewImageUrl: '',
|
||||||
|
previewImageName: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
// 获取页面类型
|
||||||
|
if (options.type && PAGE_CONFIG[options.type]) {
|
||||||
|
this.pageType = options.type
|
||||||
|
this.pageTitle = PAGE_CONFIG[options.type].title
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取赛事ID
|
||||||
|
if (options.competitionId || options.eventId) {
|
||||||
|
this.competitionId = options.competitionId || options.eventId
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取赛事名称
|
||||||
|
if (options.name) {
|
||||||
|
this.competitionName = decodeURIComponent(options.name)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取比赛时间
|
||||||
|
if (options.startTime) {
|
||||||
|
this.startTime = decodeURIComponent(options.startTime)
|
||||||
|
}
|
||||||
|
if (options.endTime) {
|
||||||
|
this.endTime = decodeURIComponent(options.endTime)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置导航栏标题
|
||||||
|
uni.setNavigationBarTitle({
|
||||||
|
title: this.pageTitle
|
||||||
|
})
|
||||||
|
|
||||||
|
// 加载数据
|
||||||
|
this.loadData()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 加载数据
|
||||||
|
*/
|
||||||
|
async loadData() {
|
||||||
|
this.loading = true
|
||||||
|
try {
|
||||||
|
// 如果没有赛事信息,先获取赛事详情
|
||||||
|
if (!this.startTime || !this.endTime) {
|
||||||
|
await this.loadCompetitionInfo()
|
||||||
|
}
|
||||||
|
// 加载附件列表
|
||||||
|
await this.loadAttachments()
|
||||||
|
} finally {
|
||||||
|
this.loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 加载赛事信息
|
||||||
|
*/
|
||||||
|
async loadCompetitionInfo() {
|
||||||
|
try {
|
||||||
|
const res = await competitionAPI.getCompetitionDetail(this.competitionId)
|
||||||
|
if (res) {
|
||||||
|
this.competitionName = res.name || res.title || this.competitionName
|
||||||
|
this.startTime = this.formatDate(res.startTime || res.competitionStartTime)
|
||||||
|
this.endTime = this.formatDate(res.endTime || res.competitionEndTime)
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('加载赛事信息失败:', err)
|
||||||
|
// 使用模拟数据
|
||||||
|
this.startTime = '2025.12.12'
|
||||||
|
this.endTime = '2025.12.14'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 加载附件列表
|
||||||
|
*/
|
||||||
|
async loadAttachments() {
|
||||||
|
try {
|
||||||
|
// 使用 PAGE_CONFIG 映射的 type 值,而不是直接使用 pageType
|
||||||
|
const attachmentType = PAGE_CONFIG[this.pageType]?.type || this.pageType
|
||||||
|
console.log('=== 加载附件 ===')
|
||||||
|
console.log('competitionId:', this.competitionId)
|
||||||
|
console.log('pageType:', this.pageType)
|
||||||
|
console.log('attachmentType:', attachmentType)
|
||||||
|
|
||||||
|
const res = await competitionAPI.getAttachments({
|
||||||
|
competitionId: this.competitionId,
|
||||||
|
type: attachmentType
|
||||||
|
})
|
||||||
|
|
||||||
|
console.log('API返回结果:', res)
|
||||||
|
|
||||||
|
// 处理返回结果 - res 可能是数组或者 null/undefined
|
||||||
|
if (res && Array.isArray(res) && res.length > 0) {
|
||||||
|
this.attachments = res.map(file => ({
|
||||||
|
id: file.id,
|
||||||
|
fileName: file.fileName || file.name,
|
||||||
|
fileUrl: file.fileUrl || file.url,
|
||||||
|
fileSize: this.formatFileSize(file.fileSize || file.size),
|
||||||
|
fileType: this.getFileType(file.fileName || file.name),
|
||||||
|
uploadTime: this.formatDate(file.uploadTime || file.createTime)
|
||||||
|
}))
|
||||||
|
console.log('附件加载成功,共', this.attachments.length, '个文件')
|
||||||
|
} else {
|
||||||
|
// 空数据,显示空状态
|
||||||
|
console.log('没有附件数据')
|
||||||
|
this.attachments = []
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('=== 加载附件失败 ===')
|
||||||
|
console.error('错误详情:', err)
|
||||||
|
console.error('错误消息:', err.message)
|
||||||
|
console.error('错误代码:', err.code)
|
||||||
|
|
||||||
|
// 只有在开发环境或者网络错误时才使用模拟数据
|
||||||
|
// 生产环境应该显示空状态
|
||||||
|
if (process.env.NODE_ENV === 'development') {
|
||||||
|
console.log('开发环境,使用模拟数据')
|
||||||
|
this.loadMockData()
|
||||||
|
} else {
|
||||||
|
this.attachments = []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 加载模拟数据
|
||||||
|
*/
|
||||||
|
loadMockData() {
|
||||||
|
const mockDataMap = {
|
||||||
|
'info': [
|
||||||
|
{ id: '1', fileName: '2025年郑州武术大赛通知.pdf', fileUrl: '', fileSize: '1.2 MB', fileType: 'pdf', uploadTime: '2025-12-20' }
|
||||||
|
],
|
||||||
|
'rules': [
|
||||||
|
{ id: '1', fileName: '2025年郑州武术大赛竞赛规程.pdf', fileUrl: '', fileSize: '2.5 MB', fileType: 'pdf', uploadTime: '2025-12-18' },
|
||||||
|
{ id: '2', fileName: '参赛报名表.pdf', fileUrl: '', fileSize: '156 KB', fileType: 'pdf', uploadTime: '2025-12-18' }
|
||||||
|
],
|
||||||
|
'schedule': [
|
||||||
|
{ id: '1', fileName: '比赛日程安排表.pdf', fileUrl: '', fileSize: '890 KB', fileType: 'pdf', uploadTime: '2025-12-19' }
|
||||||
|
],
|
||||||
|
'score': [
|
||||||
|
{ id: '1', fileName: '比赛成绩公告.pdf', fileUrl: '', fileSize: '1.8 MB', fileType: 'pdf', uploadTime: '2025-12-25' }
|
||||||
|
],
|
||||||
|
'results': [
|
||||||
|
{ id: '1', fileName: '比赛成绩公告.pdf', fileUrl: '', fileSize: '1.8 MB', fileType: 'pdf', uploadTime: '2025-12-25' }
|
||||||
|
],
|
||||||
|
'awards': [
|
||||||
|
{ id: '1', fileName: '奖牌榜统计.pdf', fileUrl: '', fileSize: '520 KB', fileType: 'pdf', uploadTime: '2025-12-25' }
|
||||||
|
],
|
||||||
|
'medals': [
|
||||||
|
{ id: '1', fileName: '奖牌榜统计.pdf', fileUrl: '', fileSize: '520 KB', fileType: 'pdf', uploadTime: '2025-12-25' }
|
||||||
|
],
|
||||||
|
'photos': [
|
||||||
|
{ id: '1', fileName: '比赛精彩瞬间.pdf', fileUrl: '', fileSize: '15.6 MB', fileType: 'pdf', uploadTime: '2025-12-25' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
this.attachments = mockDataMap[this.pageType] || []
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 预览文件
|
||||||
|
*/
|
||||||
|
previewFile(file) {
|
||||||
|
if (!file.fileUrl) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '文件暂不可用',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// #ifdef H5
|
||||||
|
// H5端:根据文件类型选择预览方式
|
||||||
|
if (file.fileType === 'pdf') {
|
||||||
|
// 使用 PDF.js 组件预览
|
||||||
|
this.pdfUrl = file.fileUrl
|
||||||
|
this.pdfFileName = file.fileName
|
||||||
|
this.showPdfViewer = true
|
||||||
|
} else if (['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(file.fileType)) {
|
||||||
|
// 图片使用弹窗显示
|
||||||
|
this.previewImageUrl = file.fileUrl
|
||||||
|
this.previewImageName = file.fileName
|
||||||
|
this.showImagePreview = true
|
||||||
|
} else if (['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'].includes(file.fileType)) {
|
||||||
|
// Office 文档使用微软在线预览
|
||||||
|
const msViewerUrl = `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(file.fileUrl)}`
|
||||||
|
window.open(msViewerUrl, '_blank')
|
||||||
|
} else {
|
||||||
|
// 其他文件类型,在新窗口打开
|
||||||
|
window.open(file.fileUrl, '_blank')
|
||||||
|
}
|
||||||
|
return
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifndef H5
|
||||||
|
// 非H5端使用下载+打开文档的方式
|
||||||
|
uni.showLoading({
|
||||||
|
title: '加载中...'
|
||||||
|
})
|
||||||
|
|
||||||
|
uni.downloadFile({
|
||||||
|
url: file.fileUrl,
|
||||||
|
success: (res) => {
|
||||||
|
uni.hideLoading()
|
||||||
|
if (res.statusCode === 200) {
|
||||||
|
uni.openDocument({
|
||||||
|
filePath: res.tempFilePath,
|
||||||
|
fileType: file.fileType,
|
||||||
|
showMenu: true,
|
||||||
|
success: () => {
|
||||||
|
console.log('打开文档成功')
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
console.error('打开文档失败:', err)
|
||||||
|
uni.showToast({
|
||||||
|
title: '无法预览此文件',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
uni.showToast({
|
||||||
|
title: '文件加载失败',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
uni.hideLoading()
|
||||||
|
console.error('下载失败:', err)
|
||||||
|
uni.showToast({
|
||||||
|
title: '下载失败,请重试',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 关闭PDF预览
|
||||||
|
*/
|
||||||
|
closePdfViewer() {
|
||||||
|
this.showPdfViewer = false
|
||||||
|
this.pdfUrl = ''
|
||||||
|
this.pdfFileName = ''
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 关闭图片预览
|
||||||
|
*/
|
||||||
|
closeImagePreview() {
|
||||||
|
this.showImagePreview = false
|
||||||
|
this.previewImageUrl = ''
|
||||||
|
this.previewImageName = ''
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 下载文件
|
||||||
|
*/
|
||||||
|
downloadFile(file) {
|
||||||
|
if (!file.fileUrl) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '文件暂不可用',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// #ifdef H5
|
||||||
|
// H5端:创建下载链接
|
||||||
|
const link = document.createElement('a')
|
||||||
|
link.href = file.fileUrl
|
||||||
|
link.download = file.fileName
|
||||||
|
link.target = '_blank'
|
||||||
|
document.body.appendChild(link)
|
||||||
|
link.click()
|
||||||
|
document.body.removeChild(link)
|
||||||
|
uni.showToast({
|
||||||
|
title: '开始下载',
|
||||||
|
icon: 'success'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifndef H5
|
||||||
|
uni.showLoading({
|
||||||
|
title: '下载中...'
|
||||||
|
})
|
||||||
|
|
||||||
|
uni.downloadFile({
|
||||||
|
url: file.fileUrl,
|
||||||
|
success: (res) => {
|
||||||
|
uni.hideLoading()
|
||||||
|
if (res.statusCode === 200) {
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
// 微信小程序保存文件
|
||||||
|
uni.saveFile({
|
||||||
|
tempFilePath: res.tempFilePath,
|
||||||
|
success: (saveRes) => {
|
||||||
|
uni.showToast({
|
||||||
|
title: '下载成功',
|
||||||
|
icon: 'success'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
fail: () => {
|
||||||
|
// 保存失败则打开文档
|
||||||
|
uni.openDocument({
|
||||||
|
filePath: res.tempFilePath,
|
||||||
|
fileType: file.fileType,
|
||||||
|
showMenu: true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
// APP端保存到相册或文件
|
||||||
|
uni.saveFile({
|
||||||
|
tempFilePath: res.tempFilePath,
|
||||||
|
success: (saveRes) => {
|
||||||
|
uni.showToast({
|
||||||
|
title: '下载成功',
|
||||||
|
icon: 'success'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
fail: () => {
|
||||||
|
uni.openDocument({
|
||||||
|
filePath: res.tempFilePath,
|
||||||
|
fileType: file.fileType,
|
||||||
|
showMenu: true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
} else {
|
||||||
|
uni.showToast({
|
||||||
|
title: '下载失败',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
uni.hideLoading()
|
||||||
|
console.error('下载失败:', err)
|
||||||
|
uni.showToast({
|
||||||
|
title: '下载失败,请重试',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取文件类型
|
||||||
|
*/
|
||||||
|
getFileType(fileName) {
|
||||||
|
if (!fileName) return 'pdf'
|
||||||
|
const ext = fileName.split('.').pop().toLowerCase()
|
||||||
|
return ext
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取文件图标文字
|
||||||
|
*/
|
||||||
|
getFileIconText(fileType) {
|
||||||
|
const iconMap = {
|
||||||
|
'pdf': 'PDF',
|
||||||
|
'doc': 'DOC',
|
||||||
|
'docx': 'DOC',
|
||||||
|
'xls': 'XLS',
|
||||||
|
'xlsx': 'XLS',
|
||||||
|
'ppt': 'PPT',
|
||||||
|
'pptx': 'PPT',
|
||||||
|
'txt': 'TXT',
|
||||||
|
'jpg': 'IMG',
|
||||||
|
'jpeg': 'IMG',
|
||||||
|
'png': 'IMG',
|
||||||
|
'zip': 'ZIP',
|
||||||
|
'rar': 'RAR'
|
||||||
|
}
|
||||||
|
return iconMap[fileType] || 'FILE'
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 格式化文件大小
|
||||||
|
*/
|
||||||
|
formatFileSize(bytes) {
|
||||||
|
if (!bytes || bytes === 0) return '0 B'
|
||||||
|
if (typeof bytes === 'string') return bytes
|
||||||
|
|
||||||
|
const k = 1024
|
||||||
|
const sizes = ['B', 'KB', 'MB', 'GB']
|
||||||
|
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||||
|
return (bytes / Math.pow(k, i)).toFixed(1) + ' ' + sizes[i]
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 格式化日期
|
||||||
|
*/
|
||||||
|
formatDate(dateStr) {
|
||||||
|
if (!dateStr) return ''
|
||||||
|
const date = new Date(dateStr)
|
||||||
|
if (isNaN(date.getTime())) return dateStr
|
||||||
|
const year = date.getFullYear()
|
||||||
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||||
|
const day = String(date.getDate()).padStart(2, '0')
|
||||||
|
return `${year}.${month}.${day}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.attachment-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 赛事信息卡片
|
||||||
|
.event-info-card {
|
||||||
|
background: #fff;
|
||||||
|
margin: 20rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-time-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background: #f8f8f8;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-item {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-label {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-value {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-divider {
|
||||||
|
width: 1rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
background: #e0e0e0;
|
||||||
|
margin: 0 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加载状态
|
||||||
|
.loading-state {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 120rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-spinner {
|
||||||
|
width: 60rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
border: 4rpx solid #f0f0f0;
|
||||||
|
border-top-color: #C93639;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: spin 0.8s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
to { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-text {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 附件区域
|
||||||
|
.attachments-section {
|
||||||
|
margin: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
padding: 0 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-count {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.attachments-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 附件项
|
||||||
|
.attachment-item {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 24rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20rpx;
|
||||||
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 文件图标
|
||||||
|
.file-icon {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
background: #C93639;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-icon.icon-pdf {
|
||||||
|
background: #E74C3C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-icon.icon-doc,
|
||||||
|
.file-icon.icon-docx {
|
||||||
|
background: #3498DB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-icon.icon-xls,
|
||||||
|
.file-icon.icon-xlsx {
|
||||||
|
background: #27AE60;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-icon.icon-ppt,
|
||||||
|
.file-icon.icon-pptx {
|
||||||
|
background: #E67E22;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-icon.icon-jpg,
|
||||||
|
.file-icon.icon-jpeg,
|
||||||
|
.file-icon.icon-png {
|
||||||
|
background: #9B59B6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-text {
|
||||||
|
font-size: 22rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 文件内容
|
||||||
|
.file-content {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-name {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-meta {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-item {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-dot {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 操作按钮
|
||||||
|
.file-actions {
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
gap: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-btn {
|
||||||
|
padding: 12rpx 24rpx;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
opacity: 0.8;
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-btn {
|
||||||
|
background: #C93639;
|
||||||
|
|
||||||
|
.action-text {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-btn {
|
||||||
|
background: #fff;
|
||||||
|
border: 1rpx solid #C93639;
|
||||||
|
|
||||||
|
.action-text {
|
||||||
|
color: #C93639;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 空状态
|
||||||
|
.empty-state {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 120rpx 60rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-image {
|
||||||
|
width: 200rpx;
|
||||||
|
height: 200rpx;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-desc {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 图片预览弹窗样式
|
||||||
|
.image-preview-modal {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.8);
|
||||||
|
z-index: 9999;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-preview-container {
|
||||||
|
width: 95%;
|
||||||
|
height: 90%;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-preview-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 24rpx 30rpx;
|
||||||
|
background: #C93639;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-preview-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
padding-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-preview-close {
|
||||||
|
width: 60rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
border-radius: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-icon {
|
||||||
|
font-size: 40rpx;
|
||||||
|
color: #fff;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-preview-body {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: #f5f5f5;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-image {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
250
src/pages/change-password/change-password.vue
Normal file
@@ -0,0 +1,250 @@
|
|||||||
|
<template>
|
||||||
|
<view class="change-password-page">
|
||||||
|
<view class="form-container">
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="label">旧密码</view>
|
||||||
|
<input
|
||||||
|
class="input"
|
||||||
|
type="password"
|
||||||
|
v-model="formData.oldPassword"
|
||||||
|
placeholder="请输入旧密码"
|
||||||
|
maxlength="20"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="label">新密码</view>
|
||||||
|
<input
|
||||||
|
class="input"
|
||||||
|
type="password"
|
||||||
|
v-model="formData.newPassword"
|
||||||
|
placeholder="请输入新密码(6-20位)"
|
||||||
|
maxlength="20"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="label">确认密码</view>
|
||||||
|
<input
|
||||||
|
class="input"
|
||||||
|
type="password"
|
||||||
|
v-model="formData.confirmPassword"
|
||||||
|
placeholder="请再次输入新密码"
|
||||||
|
maxlength="20"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="tips">
|
||||||
|
<text class="tip-item">• 密码长度为6-20位</text>
|
||||||
|
<text class="tip-item">• 建议包含字母、数字、符号</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="btn-wrapper">
|
||||||
|
<view class="submit-btn" @click="handleSubmit">确认修改</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import userAPI from '@/api/user.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
formData: {
|
||||||
|
oldPassword: '',
|
||||||
|
newPassword: '',
|
||||||
|
confirmPassword: ''
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 表单验证
|
||||||
|
*/
|
||||||
|
validateForm() {
|
||||||
|
const { oldPassword, newPassword, confirmPassword } = this.formData
|
||||||
|
|
||||||
|
if (!oldPassword) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请输入旧密码',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!newPassword) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请输入新密码',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
if (newPassword.length < 6 || newPassword.length > 20) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '密码长度为6-20位',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!confirmPassword) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请确认新密码',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
if (newPassword !== confirmPassword) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '两次密码输入不一致',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
if (oldPassword === newPassword) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '新密码不能与旧密码相同',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
return true
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 提交修改
|
||||||
|
*/
|
||||||
|
async handleSubmit() {
|
||||||
|
if (!this.validateForm()) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
uni.showLoading({
|
||||||
|
title: '提交中...'
|
||||||
|
})
|
||||||
|
|
||||||
|
await userAPI.updatePassword({
|
||||||
|
oldPassword: this.formData.oldPassword,
|
||||||
|
newPassword: this.formData.newPassword,
|
||||||
|
newPassword1: this.formData.confirmPassword
|
||||||
|
})
|
||||||
|
|
||||||
|
uni.hideLoading()
|
||||||
|
|
||||||
|
uni.showToast({
|
||||||
|
title: '密码修改成功',
|
||||||
|
icon: 'success',
|
||||||
|
duration: 2000
|
||||||
|
})
|
||||||
|
|
||||||
|
// 延迟返回上一页
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.navigateBack()
|
||||||
|
}, 2000)
|
||||||
|
} catch (err) {
|
||||||
|
uni.hideLoading()
|
||||||
|
console.error('修改密码失败:', err)
|
||||||
|
|
||||||
|
// 根据错误类型显示不同提示
|
||||||
|
let errorMsg = '修改失败,请重试'
|
||||||
|
if (err && err.msg) {
|
||||||
|
errorMsg = err.msg
|
||||||
|
} else if (err && err.message) {
|
||||||
|
if (err.message.includes('旧密码') || err.message.includes('原密码')) {
|
||||||
|
errorMsg = '旧密码错误'
|
||||||
|
} else {
|
||||||
|
errorMsg = err.message
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
uni.showToast({
|
||||||
|
title: errorMsg,
|
||||||
|
icon: 'none',
|
||||||
|
duration: 2000
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.change-password-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
padding: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-container {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 40rpx 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item {
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input {
|
||||||
|
width: 100%;
|
||||||
|
height: 80rpx;
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tips {
|
||||||
|
margin-top: 30rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
background-color: #fff9e6;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
border-left: 4rpx solid #faad14;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tip-item {
|
||||||
|
display: block;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666666;
|
||||||
|
line-height: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-wrapper {
|
||||||
|
margin-top: 60rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn {
|
||||||
|
width: 100%;
|
||||||
|
height: 88rpx;
|
||||||
|
background-color: #C93639;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 88rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn:active {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
425
src/pages/common-info/common-info.vue
Normal file
@@ -0,0 +1,425 @@
|
|||||||
|
<template>
|
||||||
|
<view class="common-info-page">
|
||||||
|
<!-- Tab切换 -->
|
||||||
|
<custom-tabs :tabs="tabs" :current="currentTab" @change="handleTabChange"></custom-tabs>
|
||||||
|
|
||||||
|
<!-- 新增按钮 -->
|
||||||
|
<view class="add-btn-wrapper" @click="handleAdd">
|
||||||
|
<text class="add-icon">⊕</text>
|
||||||
|
<text class="add-text">{{ addButtonText }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 选手列表 (Tab 0) -->
|
||||||
|
<view class="player-list" v-if="currentTab === 0 && playerList.length > 0">
|
||||||
|
<view class="player-item" v-for="(item, index) in playerList" :key="index">
|
||||||
|
<view class="player-info">
|
||||||
|
<view class="player-name">{{ item.name }}</view>
|
||||||
|
<view class="player-id">身份证:{{ item.idCard }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="player-actions">
|
||||||
|
<view class="action-btn edit-btn" @click.stop="handleEdit(item)">
|
||||||
|
<image class="action-icon" src="/static/images/编辑@3x.png" mode="aspectFit"></image>
|
||||||
|
<text>编辑</text>
|
||||||
|
</view>
|
||||||
|
<view class="action-btn delete-btn" @click.stop="handleDelete(item, 'player')">
|
||||||
|
<image class="action-icon" src="/static/images/删除@3x.png" mode="aspectFit"></image>
|
||||||
|
<text>删除</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 选手空状态 -->
|
||||||
|
<view class="empty-state" v-if="currentTab === 0 && playerList.length === 0">
|
||||||
|
<text class="empty-text">暂无选手信息</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 集体列表 (Tab 1) -->
|
||||||
|
<view class="player-list" v-if="currentTab === 1 && teamList.length > 0">
|
||||||
|
<view class="player-item" v-for="(item, index) in teamList" :key="index">
|
||||||
|
<view class="player-info">
|
||||||
|
<view class="player-name">{{ item.name }}</view>
|
||||||
|
<view class="player-id">成员数:{{ item.memberCount || 0 }}人</view>
|
||||||
|
</view>
|
||||||
|
<view class="player-actions">
|
||||||
|
<view class="action-btn edit-btn" @click.stop="handleEditTeam(item)">
|
||||||
|
<image class="action-icon" src="/static/images/编辑@3x.png" mode="aspectFit"></image>
|
||||||
|
<text>编辑</text>
|
||||||
|
</view>
|
||||||
|
<view class="action-btn delete-btn" @click.stop="handleDelete(item, 'team')">
|
||||||
|
<image class="action-icon" src="/static/images/删除@3x.png" mode="aspectFit"></image>
|
||||||
|
<text>删除</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 集体空状态 -->
|
||||||
|
<view class="empty-state" v-if="currentTab === 1 && teamList.length === 0">
|
||||||
|
<text class="empty-text">暂无集体信息</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 联系人列表 (Tab 2) -->
|
||||||
|
<view class="player-list" v-if="currentTab === 2 && contactList.length > 0">
|
||||||
|
<view class="player-item" v-for="(item, index) in contactList" :key="index">
|
||||||
|
<view class="player-info">
|
||||||
|
<view class="player-name">
|
||||||
|
{{ item.name }}
|
||||||
|
<text class="default-tag" v-if="item.isDefault">默认</text>
|
||||||
|
</view>
|
||||||
|
<view class="player-id">手机:{{ item.phone }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="player-actions">
|
||||||
|
<view class="action-btn edit-btn" @click.stop="handleEditContact(item)">
|
||||||
|
<image class="action-icon" src="/static/images/编辑@3x.png" mode="aspectFit"></image>
|
||||||
|
<text>编辑</text>
|
||||||
|
</view>
|
||||||
|
<view class="action-btn delete-btn" @click.stop="handleDelete(item, 'contact')">
|
||||||
|
<image class="action-icon" src="/static/images/删除@3x.png" mode="aspectFit"></image>
|
||||||
|
<text>删除</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 联系人空状态 -->
|
||||||
|
<view class="empty-state" v-if="currentTab === 2 && contactList.length === 0">
|
||||||
|
<text class="empty-text">暂无联系人信息</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 删除确认弹窗 -->
|
||||||
|
<confirm-modal
|
||||||
|
:show="showDeleteModal"
|
||||||
|
:title="deleteModalTitle"
|
||||||
|
:content="deleteModalContent"
|
||||||
|
@cancel="showDeleteModal = false"
|
||||||
|
@confirm="confirmDelete"
|
||||||
|
></confirm-modal>
|
||||||
|
|
||||||
|
<!-- 删除成功提示 -->
|
||||||
|
<view class="delete-success-toast" v-if="showSuccessToast">
|
||||||
|
<text class="toast-icon">✓</text>
|
||||||
|
<text class="toast-text">删除成功</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import CustomTabs from '../../components/custom-tabs/custom-tabs.vue';
|
||||||
|
import ConfirmModal from '../../components/confirm-modal/confirm-modal.vue';
|
||||||
|
import athleteAPI from '@/api/athlete.js';
|
||||||
|
import { getUserInfo } from '@/utils/auth.js';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
CustomTabs,
|
||||||
|
ConfirmModal
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tabs: ['选手', '集体', '联系人'],
|
||||||
|
currentTab: 0,
|
||||||
|
playerList: [],
|
||||||
|
teamList: [],
|
||||||
|
contactList: [],
|
||||||
|
showDeleteModal: false,
|
||||||
|
showSuccessToast: false,
|
||||||
|
currentItem: null,
|
||||||
|
deleteType: 'player'
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
addButtonText() {
|
||||||
|
if (this.currentTab === 0) return '新增选手'
|
||||||
|
if (this.currentTab === 1) return '新增集体'
|
||||||
|
return '新增联系人'
|
||||||
|
},
|
||||||
|
deleteModalTitle() {
|
||||||
|
if (this.deleteType === 'team') return '删除集体'
|
||||||
|
if (this.deleteType === 'contact') return '删除联系人'
|
||||||
|
return '删除选手'
|
||||||
|
},
|
||||||
|
deleteModalContent() {
|
||||||
|
if (this.deleteType === 'team') return '确定要删除该集体吗?'
|
||||||
|
if (this.deleteType === 'contact') return '确定要删除该联系人吗?'
|
||||||
|
return '确定要删除该选手吗?'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.loadPlayerList()
|
||||||
|
this.loadTeamList()
|
||||||
|
this.loadContactList()
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
this.loadPlayerList()
|
||||||
|
this.loadTeamList()
|
||||||
|
this.loadContactList()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async loadPlayerList() {
|
||||||
|
try {
|
||||||
|
const userInfo = getUserInfo()
|
||||||
|
if (!userInfo || !userInfo.userId) return
|
||||||
|
|
||||||
|
const res = await athleteAPI.getAthleteList({
|
||||||
|
current: 1,
|
||||||
|
size: 100,
|
||||||
|
createUser: userInfo.userId
|
||||||
|
})
|
||||||
|
|
||||||
|
let list = res.records || (Array.isArray(res) ? res : [])
|
||||||
|
this.playerList = list.map(item => ({
|
||||||
|
id: item.id,
|
||||||
|
name: item.name || item.playerName,
|
||||||
|
idCard: item.idCard || item.idCardNumber,
|
||||||
|
gender: item.gender,
|
||||||
|
team: item.team || item.teamName,
|
||||||
|
phone: item.phone || item.contactPhone
|
||||||
|
}))
|
||||||
|
} catch (err) {
|
||||||
|
console.error('加载选手列表失败:', err)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async loadTeamList() {
|
||||||
|
try {
|
||||||
|
const userInfo = getUserInfo()
|
||||||
|
if (!userInfo || !userInfo.userId) return
|
||||||
|
|
||||||
|
if (athleteAPI.getTeamList) {
|
||||||
|
const res = await athleteAPI.getTeamList({
|
||||||
|
current: 1,
|
||||||
|
size: 100,
|
||||||
|
createUser: userInfo.userId
|
||||||
|
})
|
||||||
|
|
||||||
|
let list = res.records || (Array.isArray(res) ? res : [])
|
||||||
|
this.teamList = list.map(item => ({
|
||||||
|
id: item.id,
|
||||||
|
name: item.name || item.teamName,
|
||||||
|
memberCount: item.memberCount || item.members?.length || 0
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('加载集体列表失败:', err)
|
||||||
|
this.teamList = []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async loadContactList() {
|
||||||
|
try {
|
||||||
|
const userInfo = getUserInfo()
|
||||||
|
if (!userInfo || !userInfo.userId) return
|
||||||
|
|
||||||
|
if (athleteAPI.getContactList) {
|
||||||
|
const res = await athleteAPI.getContactList({
|
||||||
|
current: 1,
|
||||||
|
size: 100,
|
||||||
|
createUser: userInfo.userId
|
||||||
|
})
|
||||||
|
|
||||||
|
let list = res.records || (Array.isArray(res) ? res : [])
|
||||||
|
this.contactList = list.map(item => ({
|
||||||
|
id: item.id,
|
||||||
|
name: item.name,
|
||||||
|
phone: item.phone,
|
||||||
|
idCard: item.idCard,
|
||||||
|
email: item.email,
|
||||||
|
address: item.address,
|
||||||
|
isDefault: item.isDefault
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('加载联系人列表失败:', err)
|
||||||
|
this.contactList = []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
handleTabChange(index) {
|
||||||
|
this.currentTab = index;
|
||||||
|
},
|
||||||
|
handleAdd() {
|
||||||
|
if (this.currentTab === 0) {
|
||||||
|
uni.navigateTo({ url: '/pages/add-player/add-player' });
|
||||||
|
} else if (this.currentTab === 1) {
|
||||||
|
uni.navigateTo({ url: '/pages/add-team/add-team' });
|
||||||
|
} else if (this.currentTab === 2) {
|
||||||
|
uni.navigateTo({ url: '/pages/add-contact/add-contact' });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleEdit(item) {
|
||||||
|
uni.navigateTo({ url: '/pages/edit-player/edit-player?id=' + item.id });
|
||||||
|
},
|
||||||
|
handleEditTeam(item) {
|
||||||
|
uni.navigateTo({ url: '/pages/edit-team/edit-team?id=' + item.id });
|
||||||
|
},
|
||||||
|
handleEditContact(item) {
|
||||||
|
uni.navigateTo({ url: '/pages/edit-contact/edit-contact?id=' + item.id });
|
||||||
|
},
|
||||||
|
handleDelete(item, type) {
|
||||||
|
this.currentItem = item;
|
||||||
|
this.deleteType = type;
|
||||||
|
this.showDeleteModal = true;
|
||||||
|
},
|
||||||
|
async confirmDelete() {
|
||||||
|
this.showDeleteModal = false;
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (this.deleteType === 'team') {
|
||||||
|
if (athleteAPI.removeTeam) {
|
||||||
|
await athleteAPI.removeTeam(this.currentItem.id)
|
||||||
|
}
|
||||||
|
const index = this.teamList.findIndex(item => item.id === this.currentItem.id);
|
||||||
|
if (index > -1) this.teamList.splice(index, 1);
|
||||||
|
} else if (this.deleteType === 'contact') {
|
||||||
|
if (athleteAPI.removeContact) {
|
||||||
|
await athleteAPI.removeContact(this.currentItem.id)
|
||||||
|
}
|
||||||
|
const index = this.contactList.findIndex(item => item.id === this.currentItem.id);
|
||||||
|
if (index > -1) this.contactList.splice(index, 1);
|
||||||
|
} else {
|
||||||
|
await athleteAPI.removeAthlete(this.currentItem.id)
|
||||||
|
const index = this.playerList.findIndex(item => item.id === this.currentItem.id);
|
||||||
|
if (index > -1) this.playerList.splice(index, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.showSuccessToast = true;
|
||||||
|
setTimeout(() => { this.showSuccessToast = false; }, 2000);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('删除失败:', err)
|
||||||
|
uni.showToast({ title: '删除失败', icon: 'none' })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.common-info-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-btn-wrapper {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 30rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 10rpx;
|
||||||
|
border-bottom: 1rpx solid #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-icon {
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #C93639;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-text {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #C93639;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-list {
|
||||||
|
padding: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-item {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-info {
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-name {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.default-tag {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #fff;
|
||||||
|
background-color: #C93639;
|
||||||
|
padding: 4rpx 12rpx;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-id {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-btn {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 5rpx;
|
||||||
|
padding: 12rpx 30rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
border: 2rpx solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-btn {
|
||||||
|
color: #C93639;
|
||||||
|
border-color: #C93639;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete-btn {
|
||||||
|
color: #C93639;
|
||||||
|
border-color: #C93639;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-icon {
|
||||||
|
width: 28rpx;
|
||||||
|
height: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state {
|
||||||
|
padding: 200rpx 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete-success-toast {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
|
color: #fff;
|
||||||
|
padding: 30rpx 50rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 15rpx;
|
||||||
|
z-index: 10000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-icon {
|
||||||
|
font-size: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
249
src/pages/edit-contact/edit-contact.vue
Normal file
@@ -0,0 +1,249 @@
|
|||||||
|
<template>
|
||||||
|
<view class="add-contact-page">
|
||||||
|
<view class="form-container">
|
||||||
|
<view class="form-item" @click="showIdTypePicker = true">
|
||||||
|
<view class="form-label">证件类型</view>
|
||||||
|
<view class="form-value">
|
||||||
|
<text>{{ formData.idType }}</text>
|
||||||
|
<text class="arrow">›</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="form-label">姓名</view>
|
||||||
|
<view class="form-value">
|
||||||
|
<input class="form-input" v-model="formData.name" placeholder="请输入姓名" placeholder-class="placeholder" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="form-label">证件号码</view>
|
||||||
|
<view class="form-value">
|
||||||
|
<input class="form-input" v-model="formData.idCard" placeholder="请输入身份证号码" placeholder-class="placeholder" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="form-label">手机号码</view>
|
||||||
|
<view class="form-value">
|
||||||
|
<input class="form-input" v-model="formData.phone" placeholder="请输入手机号码" placeholder-class="placeholder" type="number" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="form-label">邮箱</view>
|
||||||
|
<view class="form-value">
|
||||||
|
<input class="form-input" v-model="formData.email" placeholder="请输入邮箱" placeholder-class="placeholder" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="form-label">地址</view>
|
||||||
|
<view class="form-value">
|
||||||
|
<input class="form-input" v-model="formData.address" placeholder="请输入地址" placeholder-class="placeholder" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item switch-item">
|
||||||
|
<view class="form-label">设置为默认联系人</view>
|
||||||
|
<view class="form-value">
|
||||||
|
<switch :checked="formData.isDefault" @change="handleSwitchChange" color="#C93639" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="toast-message" v-if="showToast">
|
||||||
|
<text class="toast-text">{{ toastMessage }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="btn-wrapper">
|
||||||
|
<view class="btn save-btn" :class="{ disabled: !isFormValid || saving }" @click="handleSave">
|
||||||
|
{{ saving ? '保存中...' : '保存' }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import athleteAPI from '@/api/athlete.js';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
contactId: null,
|
||||||
|
formData: {
|
||||||
|
idType: '身份证',
|
||||||
|
name: '',
|
||||||
|
idCard: '',
|
||||||
|
phone: '',
|
||||||
|
email: '',
|
||||||
|
address: '',
|
||||||
|
isDefault: false
|
||||||
|
},
|
||||||
|
showToast: false,
|
||||||
|
toastMessage: '',
|
||||||
|
saving: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
isFormValid() {
|
||||||
|
return this.formData.name && this.formData.idCard && this.formData.phone &&
|
||||||
|
this.validateIdCard(this.formData.idCard) && this.validatePhone(this.formData.phone);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
if (options.id) {
|
||||||
|
this.contactId = options.id;
|
||||||
|
this.loadContactDetail();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
validateIdCard(idCard) {
|
||||||
|
return /^\d{17}[\dXx]$/.test(idCard);
|
||||||
|
},
|
||||||
|
validatePhone(phone) {
|
||||||
|
return /^1\d{10}$/.test(phone);
|
||||||
|
},
|
||||||
|
handleSwitchChange(e) {
|
||||||
|
this.formData.isDefault = e.detail.value;
|
||||||
|
},
|
||||||
|
showToastMsg(msg) {
|
||||||
|
this.toastMessage = msg;
|
||||||
|
this.showToast = true;
|
||||||
|
setTimeout(() => { this.showToast = false; }, 2000);
|
||||||
|
},
|
||||||
|
async loadContactDetail() {
|
||||||
|
try {
|
||||||
|
const res = await athleteAPI.getContactDetail(this.contactId);
|
||||||
|
if (res) {
|
||||||
|
this.formData = {
|
||||||
|
idType: res.idType || '身份证',
|
||||||
|
name: res.name || '',
|
||||||
|
idCard: res.idCard || '',
|
||||||
|
phone: res.phone || '',
|
||||||
|
email: res.email || '',
|
||||||
|
address: res.address || '',
|
||||||
|
isDefault: res.isDefault || false
|
||||||
|
};
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('加载联系人详情失败:', err);
|
||||||
|
this.showToastMsg('加载失败');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async handleSave() {
|
||||||
|
if (!this.isFormValid || this.saving) return;
|
||||||
|
|
||||||
|
if (!this.validatePhone(this.formData.phone)) {
|
||||||
|
this.showToastMsg('手机号码格式不正确');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!this.validateIdCard(this.formData.idCard)) {
|
||||||
|
this.showToastMsg('身份证号码格式不正确');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.saving = true;
|
||||||
|
try {
|
||||||
|
const data = { ...this.formData, id: this.contactId };
|
||||||
|
await athleteAPI.saveContact(data);
|
||||||
|
uni.showToast({ title: '保存成功', icon: 'success' });
|
||||||
|
setTimeout(() => { uni.navigateBack(); }, 1500);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('保存联系人失败:', err);
|
||||||
|
this.showToastMsg('保存失败,请重试');
|
||||||
|
} finally {
|
||||||
|
this.saving = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.add-contact-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
padding-bottom: 200rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-container {
|
||||||
|
background-color: #fff;
|
||||||
|
margin: 30rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 35rpx 30rpx;
|
||||||
|
border-bottom: 1rpx solid #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item:last-child { border-bottom: none; }
|
||||||
|
.switch-item { padding: 30rpx; }
|
||||||
|
|
||||||
|
.form-label {
|
||||||
|
width: 180rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-value {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.placeholder { color: #cccccc; }
|
||||||
|
.arrow { font-size: 40rpx; color: #cccccc; margin-left: 10rpx; }
|
||||||
|
|
||||||
|
.toast-message {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
|
color: #fff;
|
||||||
|
padding: 30rpx 50rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-text { font-size: 28rpx; }
|
||||||
|
|
||||||
|
.btn-wrapper {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: 30rpx;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
padding: 30rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-btn {
|
||||||
|
background-color: #C93639;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-btn.disabled {
|
||||||
|
background-color: rgba(201, 54, 57, 0.5);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
433
src/pages/edit-player/edit-player.vue
Normal file
@@ -0,0 +1,433 @@
|
|||||||
|
<template>
|
||||||
|
<view class="edit-player-page">
|
||||||
|
<!-- 表单 -->
|
||||||
|
<view class="form-container">
|
||||||
|
<view class="form-item" @click="showIdTypePicker = true">
|
||||||
|
<view class="form-label">证件类型</view>
|
||||||
|
<view class="form-value">
|
||||||
|
<text>{{ formData.idType }}</text>
|
||||||
|
<text class="arrow">›</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="form-label">姓名</view>
|
||||||
|
<view class="form-value">
|
||||||
|
<input
|
||||||
|
class="form-input"
|
||||||
|
v-model="formData.name"
|
||||||
|
placeholder="请输入姓名"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="form-label">证件号码</view>
|
||||||
|
<view class="form-value">
|
||||||
|
<input
|
||||||
|
class="form-input"
|
||||||
|
v-model="formData.idCard"
|
||||||
|
placeholder="请输入身份证号码"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="form-label">队伍</view>
|
||||||
|
<view class="form-value">
|
||||||
|
<input
|
||||||
|
class="form-input"
|
||||||
|
v-model="formData.team"
|
||||||
|
placeholder="请输入队伍名称"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="form-label">所属单位</view>
|
||||||
|
<view class="form-value">
|
||||||
|
<input
|
||||||
|
class="form-input"
|
||||||
|
v-model="formData.organization"
|
||||||
|
placeholder="请输入所属单位"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="form-label">联系电话</view>
|
||||||
|
<view class="form-value">
|
||||||
|
<input
|
||||||
|
class="form-input"
|
||||||
|
v-model="formData.phone"
|
||||||
|
type="number"
|
||||||
|
placeholder="请输入联系电话"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 错误提示 -->
|
||||||
|
<view class="error-hints" v-if="errors.length > 0">
|
||||||
|
<view class="error-item" v-for="(error, index) in errors" :key="index">
|
||||||
|
<text class="error-label">{{ error.label }}</text>
|
||||||
|
<text class="error-msg">{{ error.message }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 提示信息 -->
|
||||||
|
<view class="hint-message" v-if="showHint">
|
||||||
|
<text class="hint-icon">ℹ</text>
|
||||||
|
<text class="hint-text">请完善信息</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- Toast提示 -->
|
||||||
|
<view class="toast-message" v-if="showToast">
|
||||||
|
<text class="toast-text">{{ toastMessage }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 按钮 -->
|
||||||
|
<view class="btn-wrapper">
|
||||||
|
<view class="btn save-btn disabled" v-if="!isFormValid">保存</view>
|
||||||
|
<view class="btn save-btn" v-else @click="handleSave">保存</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import athleteAPI from '@/api/athlete.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
playerId: '',
|
||||||
|
formData: {
|
||||||
|
idType: '身份证',
|
||||||
|
name: '',
|
||||||
|
idCard: '',
|
||||||
|
team: '',
|
||||||
|
organization: '',
|
||||||
|
phone: ''
|
||||||
|
},
|
||||||
|
errors: [],
|
||||||
|
showHint: false,
|
||||||
|
showToast: false,
|
||||||
|
toastMessage: '',
|
||||||
|
showIdTypePicker: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
isFormValid() {
|
||||||
|
return (
|
||||||
|
this.formData.name &&
|
||||||
|
this.formData.idCard &&
|
||||||
|
this.formData.team &&
|
||||||
|
this.formData.organization &&
|
||||||
|
this.formData.phone &&
|
||||||
|
this.validateIdCard(this.formData.idCard) &&
|
||||||
|
this.validatePhone(this.formData.phone)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
'formData.name'(val) {
|
||||||
|
this.validateForm();
|
||||||
|
},
|
||||||
|
'formData.idCard'(val) {
|
||||||
|
this.validateForm();
|
||||||
|
},
|
||||||
|
'formData.team'(val) {
|
||||||
|
this.validateForm();
|
||||||
|
},
|
||||||
|
'formData.organization'(val) {
|
||||||
|
this.validateForm();
|
||||||
|
},
|
||||||
|
'formData.phone'(val) {
|
||||||
|
this.validateForm();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
if (options.id) {
|
||||||
|
this.playerId = options.id
|
||||||
|
this.loadPlayerData(options.id);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 加载选手数据
|
||||||
|
*/
|
||||||
|
async loadPlayerData(id) {
|
||||||
|
try {
|
||||||
|
const res = await athleteAPI.getAthleteDetail(id)
|
||||||
|
|
||||||
|
// 回显数据(使用后端实体类的字段名)
|
||||||
|
this.formData = {
|
||||||
|
idType: res.idCardType === 1 ? '身份证' : '其他',
|
||||||
|
name: res.playerName || '',
|
||||||
|
idCard: res.idCard || '',
|
||||||
|
team: res.teamName || '',
|
||||||
|
organization: res.organization || '',
|
||||||
|
phone: res.contactPhone || ''
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('加载选手数据失败:', err)
|
||||||
|
uni.showToast({
|
||||||
|
title: '加载失败',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
validateIdCard(idCard) {
|
||||||
|
// 身份证号验证:18位,最后一位可以是数字或字母X
|
||||||
|
return /^\d{17}[\dXx]$/.test(idCard);
|
||||||
|
},
|
||||||
|
validatePhone(phone) {
|
||||||
|
// 手机号验证:11位数字
|
||||||
|
return /^1[3-9]\d{9}$/.test(phone);
|
||||||
|
},
|
||||||
|
validateForm() {
|
||||||
|
this.errors = [];
|
||||||
|
this.showHint = false;
|
||||||
|
|
||||||
|
if (!this.formData.name || !this.formData.idCard || !this.formData.team || !this.formData.organization || !this.formData.phone) {
|
||||||
|
this.showHint = true;
|
||||||
|
this.errors.push({
|
||||||
|
label: '有空文本时弹出:',
|
||||||
|
message: '按钮置灰'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.formData.idCard && !this.validateIdCard(this.formData.idCard)) {
|
||||||
|
this.errors.push({
|
||||||
|
label: '身份证不足18位:',
|
||||||
|
message: '按钮置灰'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.formData.phone && !this.validatePhone(this.formData.phone)) {
|
||||||
|
this.errors.push({
|
||||||
|
label: '手机号格式不正确:',
|
||||||
|
message: '按钮置灰'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 从身份证号中提取信息
|
||||||
|
*/
|
||||||
|
extractInfoFromIdCard(idCard) {
|
||||||
|
if (!idCard || idCard.length !== 18) {
|
||||||
|
return {
|
||||||
|
gender: null,
|
||||||
|
age: null,
|
||||||
|
birthDate: null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 提取出生日期
|
||||||
|
const year = idCard.substring(6, 10)
|
||||||
|
const month = idCard.substring(10, 12)
|
||||||
|
const day = idCard.substring(12, 14)
|
||||||
|
const birthDate = `${year}-${month}-${day}`
|
||||||
|
|
||||||
|
// 计算年龄
|
||||||
|
const birthYear = parseInt(year)
|
||||||
|
const currentYear = new Date().getFullYear()
|
||||||
|
const age = currentYear - birthYear
|
||||||
|
|
||||||
|
// 提取性别(倒数第二位,奇数为男,偶数为女)
|
||||||
|
const genderCode = parseInt(idCard.substring(16, 17))
|
||||||
|
const gender = genderCode % 2 === 1 ? 1 : 2
|
||||||
|
|
||||||
|
return {
|
||||||
|
gender,
|
||||||
|
age,
|
||||||
|
birthDate
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async handleSave() {
|
||||||
|
if (!this.isFormValid) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 从身份证号中提取信息
|
||||||
|
const info = this.extractInfoFromIdCard(this.formData.idCard)
|
||||||
|
|
||||||
|
// 调用API更新选手信息(使用后端实体类的字段名)
|
||||||
|
await athleteAPI.submitAthlete({
|
||||||
|
id: this.playerId,
|
||||||
|
playerName: this.formData.name,
|
||||||
|
idCard: this.formData.idCard,
|
||||||
|
teamName: this.formData.team,
|
||||||
|
organization: this.formData.organization,
|
||||||
|
contactPhone: this.formData.phone,
|
||||||
|
idCardType: 1, // 身份证类型固定为1
|
||||||
|
gender: info.gender,
|
||||||
|
age: info.age,
|
||||||
|
birthDate: info.birthDate
|
||||||
|
})
|
||||||
|
|
||||||
|
// 保存成功
|
||||||
|
uni.showToast({
|
||||||
|
title: '保存成功',
|
||||||
|
icon: 'success'
|
||||||
|
})
|
||||||
|
|
||||||
|
// 延迟返回上一页
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.navigateBack()
|
||||||
|
}, 1500)
|
||||||
|
} catch (err) {
|
||||||
|
console.error('保存选手失败:', err)
|
||||||
|
// 显示错误提示
|
||||||
|
this.toastMessage = '保存失败,请重试'
|
||||||
|
this.showToast = true
|
||||||
|
setTimeout(() => {
|
||||||
|
this.showToast = false
|
||||||
|
}, 2000)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.edit-player-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
padding-bottom: 200rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-container {
|
||||||
|
background-color: #fff;
|
||||||
|
margin: 30rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 35rpx 30rpx;
|
||||||
|
border-bottom: 1rpx solid #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-label {
|
||||||
|
width: 180rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-value {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
font-size: 40rpx;
|
||||||
|
color: #cccccc;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-hints {
|
||||||
|
margin: 30rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-item {
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-label {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #C93639;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-msg {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #C93639;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hint-message {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
|
color: #fff;
|
||||||
|
padding: 30rpx 50rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 15rpx;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hint-icon {
|
||||||
|
font-size: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hint-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-message {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
|
color: #fff;
|
||||||
|
padding: 30rpx 50rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-wrapper {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: 30rpx;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
padding: 30rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-btn {
|
||||||
|
background-color: #C93639;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-btn.disabled {
|
||||||
|
background-color: rgba(201, 54, 57, 0.5);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
401
src/pages/edit-team/edit-team.vue
Normal file
@@ -0,0 +1,401 @@
|
|||||||
|
<template>
|
||||||
|
<view class="add-team-page">
|
||||||
|
<view class="form-section">
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="form-label required">集体名称</view>
|
||||||
|
<input
|
||||||
|
class="form-input"
|
||||||
|
type="text"
|
||||||
|
v-model="formData.name"
|
||||||
|
placeholder="请输入集体名称"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="form-label">备注</view>
|
||||||
|
<textarea
|
||||||
|
class="form-textarea"
|
||||||
|
v-model="formData.remark"
|
||||||
|
placeholder="请输入备注信息"
|
||||||
|
></textarea>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 成员列表 -->
|
||||||
|
<view class="member-section">
|
||||||
|
<view class="section-header">
|
||||||
|
<text class="section-title">成员列表</text>
|
||||||
|
<view class="add-member-btn" @click="showMemberPicker = true">
|
||||||
|
<text>+ 添加成员</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="member-list" v-if="formData.members.length > 0">
|
||||||
|
<view class="member-item" v-for="(member, index) in formData.members" :key="index">
|
||||||
|
<view class="member-info">
|
||||||
|
<text class="member-name">{{ member.name }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="remove-btn" @click="removeMember(index)">移除</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="empty-members" v-else>
|
||||||
|
<text>暂无成员,请添加</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 提交按钮 -->
|
||||||
|
<view class="submit-btn-wrapper">
|
||||||
|
<view class="submit-btn" @click="handleSubmit">保存</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 成员选择弹窗 -->
|
||||||
|
<view class="member-picker-mask" v-if="showMemberPicker" @click="showMemberPicker = false">
|
||||||
|
<view class="member-picker" @click.stop>
|
||||||
|
<view class="picker-header">
|
||||||
|
<text class="picker-title">选择成员</text>
|
||||||
|
<text class="picker-close" @click="showMemberPicker = false">×</text>
|
||||||
|
</view>
|
||||||
|
<view class="picker-list">
|
||||||
|
<view
|
||||||
|
class="picker-item"
|
||||||
|
v-for="(player, index) in availablePlayers"
|
||||||
|
:key="index"
|
||||||
|
@click="addMember(player)"
|
||||||
|
>
|
||||||
|
<text>{{ player.name }}</text>
|
||||||
|
<text class="add-icon">+</text>
|
||||||
|
</view>
|
||||||
|
<view class="empty-picker" v-if="availablePlayers.length === 0">
|
||||||
|
<text>暂无可选成员</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import athleteAPI from '@/api/athlete.js';
|
||||||
|
import { getUserInfo } from '@/utils/auth.js';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
teamId: null,
|
||||||
|
formData: {
|
||||||
|
name: '',
|
||||||
|
remark: '',
|
||||||
|
members: []
|
||||||
|
},
|
||||||
|
playerList: [],
|
||||||
|
showMemberPicker: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
availablePlayers() {
|
||||||
|
const memberIds = this.formData.members.map(m => m.id)
|
||||||
|
return this.playerList.filter(p => !memberIds.includes(p.id))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
if (options.id) {
|
||||||
|
this.teamId = options.id
|
||||||
|
this.loadTeamDetail()
|
||||||
|
}
|
||||||
|
this.loadPlayerList()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async loadTeamDetail() {
|
||||||
|
try {
|
||||||
|
const res = await athleteAPI.getTeamDetail(this.teamId)
|
||||||
|
if (res) {
|
||||||
|
this.formData.name = res.teamName || res.name || ''
|
||||||
|
this.formData.remark = res.remark || ''
|
||||||
|
if (res.members && Array.isArray(res.members)) {
|
||||||
|
this.formData.members = res.members.map(m => ({
|
||||||
|
id: m.id,
|
||||||
|
name: m.name || m.playerName
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('加载集体详情失败:', err)
|
||||||
|
uni.showToast({
|
||||||
|
title: '加载失败',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async loadPlayerList() {
|
||||||
|
try {
|
||||||
|
const userInfo = getUserInfo()
|
||||||
|
if (!userInfo || !userInfo.userId) return
|
||||||
|
|
||||||
|
const res = await athleteAPI.getAthleteList({
|
||||||
|
current: 1,
|
||||||
|
size: 100,
|
||||||
|
createUser: userInfo.userId
|
||||||
|
})
|
||||||
|
|
||||||
|
let list = []
|
||||||
|
if (res.records) {
|
||||||
|
list = res.records
|
||||||
|
} else if (Array.isArray(res)) {
|
||||||
|
list = res
|
||||||
|
}
|
||||||
|
|
||||||
|
this.playerList = list.map(item => ({
|
||||||
|
id: item.id,
|
||||||
|
name: item.name || item.playerName
|
||||||
|
}))
|
||||||
|
} catch (err) {
|
||||||
|
console.error('加载选手列表失败:', err)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
addMember(player) {
|
||||||
|
this.formData.members.push({
|
||||||
|
id: player.id,
|
||||||
|
name: player.name
|
||||||
|
})
|
||||||
|
this.showMemberPicker = false
|
||||||
|
},
|
||||||
|
|
||||||
|
removeMember(index) {
|
||||||
|
this.formData.members.splice(index, 1)
|
||||||
|
},
|
||||||
|
|
||||||
|
async handleSubmit() {
|
||||||
|
if (!this.formData.name) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请输入集体名称',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.formData.members.length === 0) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请添加至少一名成员',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const userInfo = getUserInfo()
|
||||||
|
|
||||||
|
const data = {
|
||||||
|
teamId: this.teamId ? String(this.teamId) : null,
|
||||||
|
teamName: this.formData.name,
|
||||||
|
remark: this.formData.remark,
|
||||||
|
memberIds: this.formData.members.map(m => String(m.id)),
|
||||||
|
createUser: userInfo?.userId
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('Submitting team data:', JSON.stringify(data))
|
||||||
|
await athleteAPI.saveTeam(data)
|
||||||
|
|
||||||
|
uni.showToast({
|
||||||
|
title: '保存成功',
|
||||||
|
icon: 'success'
|
||||||
|
})
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.navigateBack()
|
||||||
|
}, 1500)
|
||||||
|
} catch (err) {
|
||||||
|
console.error('保存失败:', err)
|
||||||
|
uni.showToast({
|
||||||
|
title: '保存失败',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.add-team-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
padding-bottom: 150rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-section {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 30rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item {
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-label {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-label.required::before {
|
||||||
|
content: '*';
|
||||||
|
color: #C93639;
|
||||||
|
margin-right: 5rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input {
|
||||||
|
width: 100%;
|
||||||
|
height: 80rpx;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-textarea {
|
||||||
|
width: 100%;
|
||||||
|
height: 200rpx;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-section {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-member-btn {
|
||||||
|
color: #C93639;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-list {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20rpx;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-name {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.remove-btn {
|
||||||
|
color: #C93639;
|
||||||
|
font-size: 26rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-members {
|
||||||
|
text-align: center;
|
||||||
|
padding: 50rpx;
|
||||||
|
color: #999;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn-wrapper {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: 30rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn {
|
||||||
|
background-color: #C93639;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
padding: 30rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-picker-mask {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 1000;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-picker {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 20rpx 20rpx 0 0;
|
||||||
|
max-height: 70vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 30rpx;
|
||||||
|
border-bottom: 1rpx solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker-close {
|
||||||
|
font-size: 40rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker-list {
|
||||||
|
max-height: 60vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 30rpx;
|
||||||
|
border-bottom: 1rpx solid #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-icon {
|
||||||
|
color: #C93639;
|
||||||
|
font-size: 36rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-picker {
|
||||||
|
text-align: center;
|
||||||
|
padding: 50rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
316
src/pages/event-detail/event-detail.vue
Normal file
@@ -0,0 +1,316 @@
|
|||||||
|
<template>
|
||||||
|
<view class="event-detail-page">
|
||||||
|
<!-- 赛事标题和信息 -->
|
||||||
|
<view class="event-header">
|
||||||
|
<view class="event-title">{{ eventInfo.title }}</view>
|
||||||
|
<view class="divider"></view>
|
||||||
|
<view class="event-info">
|
||||||
|
<text class="label">地点:</text>
|
||||||
|
<text class="value">{{ eventInfo.location }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="event-info">
|
||||||
|
<text class="label">报名时间:</text>
|
||||||
|
<text class="value">{{ eventInfo.registerTime }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="event-info">
|
||||||
|
<text class="label">比赛时间:</text>
|
||||||
|
<text class="value">{{ eventInfo.matchTime }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="event-info">
|
||||||
|
<text class="label">报名人数:</text>
|
||||||
|
<text class="value">{{ eventInfo.registerCount }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="divider"></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 功能网格 -->
|
||||||
|
<view class="function-grid">
|
||||||
|
<view class="function-item" @click="handleFunction('info')">
|
||||||
|
<image class="function-icon-img" src="/static/images/信息发布@3x.png" mode="aspectFit"></image>
|
||||||
|
<text class="function-text">信息发布</text>
|
||||||
|
</view>
|
||||||
|
<view class="function-item" @click="handleFunction('rules')">
|
||||||
|
<image class="function-icon-img" src="/static/images/赛事规程@3x.png" mode="aspectFit"></image>
|
||||||
|
<text class="function-text">赛事规程</text>
|
||||||
|
</view>
|
||||||
|
<view class="function-item" @click="handleFunction('schedule')">
|
||||||
|
<image class="function-icon-img" src="/static/images/活动日程@3x.png" mode="aspectFit"></image>
|
||||||
|
<text class="function-text">活动日程</text>
|
||||||
|
</view>
|
||||||
|
<view class="function-item" @click="handleFunction('players')">
|
||||||
|
<image class="function-icon-img" src="/static/images/参赛选手@3x.png" mode="aspectFit"></image>
|
||||||
|
<text class="function-text">参赛选手</text>
|
||||||
|
</view>
|
||||||
|
<view class="function-item" @click="handleFunction('match')">
|
||||||
|
<image class="function-icon-img" src="/static/images/比赛实况@3x.png" mode="aspectFit"></image>
|
||||||
|
<text class="function-text">比赛实况</text>
|
||||||
|
</view>
|
||||||
|
<view class="function-item" @click="handleFunction('lineup')">
|
||||||
|
<image class="function-icon-img" src="/static/images/出场顺序@3x.png" mode="aspectFit"></image>
|
||||||
|
<text class="function-text">出场顺序</text>
|
||||||
|
</view>
|
||||||
|
<view class="function-item" @click="handleFunction('score')">
|
||||||
|
<image class="function-icon-img" src="/static/images/成绩@3x.png" mode="aspectFit"></image>
|
||||||
|
<text class="function-text">成绩</text>
|
||||||
|
</view>
|
||||||
|
<view class="function-item" @click="handleFunction('awards')">
|
||||||
|
<image class="function-icon-img" src="/static/images/奖牌榜.png" mode="aspectFit"></image>
|
||||||
|
<text class="function-text">奖牌榜</text>
|
||||||
|
</view>
|
||||||
|
<view class="function-item" @click="handleFunction('photos')">
|
||||||
|
<image class="function-icon-img" src="/static/images/图片直播@3x.png" mode="aspectFit"></image>
|
||||||
|
<text class="function-text">图片直播</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 报名按钮 -->
|
||||||
|
<view class="register-btn-wrapper" v-if="eventInfo.status === 'open'">
|
||||||
|
<view class="register-btn" @click="goToRegister">去报名</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 报名已结束状态 -->
|
||||||
|
<view class="register-btn-wrapper" v-if="eventInfo.status === 'finished'">
|
||||||
|
<view class="register-btn disabled">报名已结束</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import competitionAPI from '@/api/competition.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
eventId: '',
|
||||||
|
eventInfo: {
|
||||||
|
id: '',
|
||||||
|
title: '',
|
||||||
|
location: '',
|
||||||
|
registerTime: '',
|
||||||
|
matchTime: '',
|
||||||
|
registerCount: '0',
|
||||||
|
status: 'open'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
if (options.id) {
|
||||||
|
this.eventId = options.id
|
||||||
|
this.loadEventDetail(options.id)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 加载赛事详情
|
||||||
|
* @param {String|Number} id 赛事ID
|
||||||
|
*/
|
||||||
|
async loadEventDetail(id) {
|
||||||
|
try {
|
||||||
|
const res = await competitionAPI.getCompetitionDetail(id)
|
||||||
|
|
||||||
|
console.log('赛事详情API返回:', res)
|
||||||
|
|
||||||
|
// 尝试多个可能的时间字段
|
||||||
|
const regStartTime = res.registrationStartTime || res.registerStartTime || res.signUpStartTime
|
||||||
|
const regEndTime = res.registrationEndTime || res.registerEndTime || res.signUpEndTime
|
||||||
|
const startTime = res.startTime || res.competitionStartTime || res.beginTime || res.startDate
|
||||||
|
const endTime = res.endTime || res.competitionEndTime || res.finishTime || res.endDate
|
||||||
|
|
||||||
|
// 数据映射
|
||||||
|
this.eventInfo = {
|
||||||
|
id: res.id,
|
||||||
|
title: res.name || res.title || res.competitionName || '未命名赛事',
|
||||||
|
location: res.location || res.address || res.venue || '待定',
|
||||||
|
registerTime: this.formatTimeRange(regStartTime, regEndTime) ||
|
||||||
|
res.registerTime || res.registrationPeriod || '待定',
|
||||||
|
matchTime: this.formatTimeRange(startTime, endTime) ||
|
||||||
|
res.matchTime || res.competitionTime || '待定',
|
||||||
|
registerCount: res.registrationCount || res.registerCount || res.signUpCount || res.totalParticipants || '0',
|
||||||
|
status: this.getStatus(res.status)
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('格式化后的赛事信息:', this.eventInfo)
|
||||||
|
} catch (err) {
|
||||||
|
console.error('加载赛事详情失败:', err)
|
||||||
|
uni.showToast({
|
||||||
|
title: '加载失败,请重试',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 格式化时间范围
|
||||||
|
*/
|
||||||
|
formatTimeRange(startTime, endTime) {
|
||||||
|
if (!startTime || !endTime) return ''
|
||||||
|
|
||||||
|
const formatDate = (dateStr) => {
|
||||||
|
if (!dateStr) return ''
|
||||||
|
const date = new Date(dateStr)
|
||||||
|
const year = date.getFullYear()
|
||||||
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||||
|
const day = String(date.getDate()).padStart(2, '0')
|
||||||
|
return `${year}.${month}.${day}`
|
||||||
|
}
|
||||||
|
|
||||||
|
return `${formatDate(startTime)}-${formatDate(endTime)}`
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取赛事状态
|
||||||
|
*/
|
||||||
|
getStatus(status) {
|
||||||
|
// 1: 报名中, 2: 进行中, 3: 已结束
|
||||||
|
if (status === 3 || status === '3' || status === 'finished') {
|
||||||
|
return 'finished'
|
||||||
|
}
|
||||||
|
return 'open'
|
||||||
|
},
|
||||||
|
|
||||||
|
handleFunction(type) {
|
||||||
|
// 需要跳转到附件展示页面的类型
|
||||||
|
const attachmentTypes = ['info', 'rules', 'schedule', 'score', 'awards', 'photos']
|
||||||
|
|
||||||
|
if (attachmentTypes.includes(type)) {
|
||||||
|
// 跳转到通用附件展示页面
|
||||||
|
const name = encodeURIComponent(this.eventInfo.title)
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/attachment-view/attachment-view?type=${type}&competitionId=${this.eventId}&name=${name}`
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 其他功能页面的路由映射
|
||||||
|
const routeMap = {
|
||||||
|
'players': '/pages/event-players/event-players',
|
||||||
|
'match': '/pages/event-live/event-live',
|
||||||
|
'lineup': '/pages/event-lineup/event-lineup'
|
||||||
|
};
|
||||||
|
|
||||||
|
const url = routeMap[type];
|
||||||
|
if (url) {
|
||||||
|
// 跳转时传递赛事ID
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `${url}?eventId=${this.eventId}`
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
uni.showToast({
|
||||||
|
title: '功能开发中',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
goToRegister() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/register-type/register-type?id=' + this.eventInfo.id
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.event-detail-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
padding-bottom: 180rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-header {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 30rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-title {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 1.5;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
height: 6rpx;
|
||||||
|
background-color: #C93639;
|
||||||
|
width: 120rpx;
|
||||||
|
margin: 30rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-info {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666666;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.function-grid {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 30rpx;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 40rpx 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.function-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.function-icon {
|
||||||
|
width: 120rpx;
|
||||||
|
height: 120rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 60rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.function-icon-img {
|
||||||
|
width: 90rpx;
|
||||||
|
height: 90rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.function-text {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333333;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-btn-wrapper {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: 30rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-btn {
|
||||||
|
background-color: #C93639;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
padding: 20rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-btn.disabled {
|
||||||
|
background-color: #999999;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
233
src/pages/event-info-detail/event-info-detail.vue
Normal file
@@ -0,0 +1,233 @@
|
|||||||
|
<template>
|
||||||
|
<view class="info-detail-page">
|
||||||
|
<!-- 信息标题 -->
|
||||||
|
<view class="detail-header">
|
||||||
|
<view class="info-tag" :class="infoDetail.type">{{ infoDetail.typeText }}</view>
|
||||||
|
<view class="info-title">{{ infoDetail.title }}</view>
|
||||||
|
<view class="info-time">
|
||||||
|
<text class="time-icon">🕐</text>
|
||||||
|
<text>{{ infoDetail.time }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 分割线 -->
|
||||||
|
<view class="divider"></view>
|
||||||
|
|
||||||
|
<!-- 信息内容 -->
|
||||||
|
<view class="detail-content">
|
||||||
|
<text class="content-text">{{ infoDetail.content }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 附件区域(如果有) -->
|
||||||
|
<view class="attachments" v-if="infoDetail.attachments && infoDetail.attachments.length > 0">
|
||||||
|
<view class="attachment-title">附件</view>
|
||||||
|
<view class="attachment-item" v-for="(item, index) in infoDetail.attachments" :key="index">
|
||||||
|
<text class="attachment-icon">📎</text>
|
||||||
|
<text class="attachment-name">{{ item.name }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 底部操作栏 -->
|
||||||
|
<view class="bottom-bar">
|
||||||
|
<view class="bar-item" @click="handleShare">
|
||||||
|
<text class="bar-icon">📤</text>
|
||||||
|
<text class="bar-text">分享</text>
|
||||||
|
</view>
|
||||||
|
<view class="bar-item" @click="handleCollect">
|
||||||
|
<text class="bar-icon">⭐</text>
|
||||||
|
<text class="bar-text">收藏</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
infoId: '',
|
||||||
|
infoDetail: {
|
||||||
|
id: '',
|
||||||
|
type: 'notice',
|
||||||
|
typeText: '通知',
|
||||||
|
title: '',
|
||||||
|
content: '',
|
||||||
|
time: '',
|
||||||
|
attachments: []
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
console.log('详情页接收参数:', options)
|
||||||
|
|
||||||
|
if (options.id) {
|
||||||
|
this.infoId = options.id
|
||||||
|
}
|
||||||
|
|
||||||
|
// 接收从列表页传递的数据
|
||||||
|
if (options.type) {
|
||||||
|
this.infoDetail.type = options.type
|
||||||
|
}
|
||||||
|
if (options.typeText) {
|
||||||
|
this.infoDetail.typeText = decodeURIComponent(options.typeText)
|
||||||
|
}
|
||||||
|
if (options.title) {
|
||||||
|
this.infoDetail.title = decodeURIComponent(options.title)
|
||||||
|
}
|
||||||
|
if (options.content) {
|
||||||
|
this.infoDetail.content = decodeURIComponent(options.content)
|
||||||
|
}
|
||||||
|
if (options.time) {
|
||||||
|
this.infoDetail.time = decodeURIComponent(options.time)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleShare() {
|
||||||
|
uni.showToast({
|
||||||
|
title: '分享功能开发中',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleCollect() {
|
||||||
|
uni.showToast({
|
||||||
|
title: '收藏成功',
|
||||||
|
icon: 'success'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.info-detail-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
padding-bottom: 120rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-header {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 40rpx 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-tag {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 24rpx;
|
||||||
|
padding: 8rpx 20rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
color: #fff;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-tag.notice {
|
||||||
|
background-color: #C93639;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-tag.announcement {
|
||||||
|
background-color: #FF8C00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-tag.important {
|
||||||
|
background-color: #DC143C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-title {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 1.5;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-time {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-icon {
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
height: 20rpx;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-content {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 40rpx 30rpx;
|
||||||
|
min-height: 400rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-text {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 1.8;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.attachments {
|
||||||
|
background-color: #fff;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.attachment-title {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.attachment-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 15rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.attachment-icon {
|
||||||
|
font-size: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.attachment-name {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-bar {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background-color: #fff;
|
||||||
|
display: flex;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar-item {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar-icon {
|
||||||
|
font-size: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar-text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
448
src/pages/event-info/event-info.vue
Normal file
@@ -0,0 +1,448 @@
|
|||||||
|
<template>
|
||||||
|
<view class="event-info-page">
|
||||||
|
<!-- 附件下载区 -->
|
||||||
|
<view class="attachments-section" v-if="attachments.length > 0">
|
||||||
|
<view class="section-title">
|
||||||
|
<text class="title-icon">📎</text>
|
||||||
|
<text class="title-text">相关附件</text>
|
||||||
|
</view>
|
||||||
|
<view class="attachments-list">
|
||||||
|
<view class="attachment-item" v-for="(file, index) in attachments" :key="index" @click="downloadFile(file)">
|
||||||
|
<view class="file-info">
|
||||||
|
<text class="file-icon">{{ getFileIcon(file.fileType) }}</text>
|
||||||
|
<view class="file-details">
|
||||||
|
<text class="file-name">{{ file.fileName }}</text>
|
||||||
|
<text class="file-size">{{ file.fileSize }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="download-btn">
|
||||||
|
<text class="download-icon">⬇</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 信息列表 -->
|
||||||
|
<view class="info-list">
|
||||||
|
<view class="info-item" v-for="(item, index) in infoList" :key="index" @click="handleItemClick(item)">
|
||||||
|
<view class="info-header">
|
||||||
|
<view class="info-tag" :class="item.type">{{ item.typeText }}</view>
|
||||||
|
<view class="info-time">{{ item.time }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="info-title">{{ item.title }}</view>
|
||||||
|
<view class="info-desc">{{ item.desc }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 空状态 -->
|
||||||
|
<view class="empty-state" v-if="infoList.length === 0 && attachments.length === 0">
|
||||||
|
<text class="empty-text">暂无信息发布</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import infoAPI from '@/api/info.js'
|
||||||
|
import competitionAPI from '@/api/competition.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
eventId: '',
|
||||||
|
infoList: [],
|
||||||
|
attachments: []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
if (options.eventId) {
|
||||||
|
this.eventId = options.eventId
|
||||||
|
this.loadInfoList(options.eventId)
|
||||||
|
this.loadAttachments(options.eventId)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 加载附件列表
|
||||||
|
*/
|
||||||
|
async loadAttachments(eventId) {
|
||||||
|
try {
|
||||||
|
const res = await competitionAPI.getAttachments({
|
||||||
|
competitionId: eventId,
|
||||||
|
type: 'info'
|
||||||
|
})
|
||||||
|
|
||||||
|
let list = []
|
||||||
|
if (res && Array.isArray(res)) {
|
||||||
|
list = res
|
||||||
|
} else if (res && res.records) {
|
||||||
|
list = res.records
|
||||||
|
} else if (res && res.data && Array.isArray(res.data)) {
|
||||||
|
list = res.data
|
||||||
|
}
|
||||||
|
|
||||||
|
if (list.length > 0) {
|
||||||
|
this.attachments = list.map(file => ({
|
||||||
|
id: file.id,
|
||||||
|
fileName: file.fileName || file.name,
|
||||||
|
fileUrl: file.fileUrl || file.url,
|
||||||
|
fileSize: this.formatFileSize(file.fileSize || file.size),
|
||||||
|
fileType: file.fileType || this.getFileType(file.fileName || file.name)
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('加载附件失败:', err)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 加载信息发布列表
|
||||||
|
*/
|
||||||
|
async loadInfoList(eventId) {
|
||||||
|
try {
|
||||||
|
const res = await infoAPI.getInfoPublishList({ competitionId: eventId })
|
||||||
|
|
||||||
|
let list = []
|
||||||
|
if (res.records) {
|
||||||
|
list = res.records
|
||||||
|
} else if (Array.isArray(res)) {
|
||||||
|
list = res
|
||||||
|
}
|
||||||
|
|
||||||
|
// 数据映射
|
||||||
|
this.infoList = list.map(item => ({
|
||||||
|
id: item.id,
|
||||||
|
type: this.getInfoType(item.infoType || item.info_type || item.type),
|
||||||
|
typeText: this.getInfoTypeText(item.infoType || item.info_type || item.type),
|
||||||
|
title: item.title || item.infoTitle,
|
||||||
|
desc: item.content || item.description || item.infoContent || '',
|
||||||
|
time: this.formatTime(item.publishTime || item.publish_time || item.createTime)
|
||||||
|
}))
|
||||||
|
} catch (err) {
|
||||||
|
console.error('加载信息列表失败:', err)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 下载文件
|
||||||
|
*/
|
||||||
|
downloadFile(file) {
|
||||||
|
const fileExt = file.fileType || this.getFileType(file.fileName) || 'pdf'
|
||||||
|
|
||||||
|
// #ifdef H5
|
||||||
|
const link = document.createElement('a')
|
||||||
|
link.href = file.fileUrl
|
||||||
|
link.download = file.fileName
|
||||||
|
link.target = '_blank'
|
||||||
|
link.style.display = 'none'
|
||||||
|
document.body.appendChild(link)
|
||||||
|
link.click()
|
||||||
|
document.body.removeChild(link)
|
||||||
|
uni.showToast({
|
||||||
|
title: '开始下载',
|
||||||
|
icon: 'success'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifndef H5
|
||||||
|
uni.showLoading({ title: '准备下载' })
|
||||||
|
uni.downloadFile({
|
||||||
|
url: file.fileUrl,
|
||||||
|
success: (res) => {
|
||||||
|
if (res.statusCode === 200) {
|
||||||
|
uni.openDocument({
|
||||||
|
filePath: res.tempFilePath,
|
||||||
|
fileType: fileExt,
|
||||||
|
success: () => {
|
||||||
|
uni.hideLoading()
|
||||||
|
uni.showToast({ title: '打开成功', icon: 'success' })
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
uni.hideLoading()
|
||||||
|
console.error('打开文件失败:', err)
|
||||||
|
uni.showToast({ title: '打开失败', icon: 'none' })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
uni.hideLoading()
|
||||||
|
console.error('下载失败:', err)
|
||||||
|
uni.showToast({ title: '下载失败', icon: 'none' })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取文件类型
|
||||||
|
*/
|
||||||
|
getFileType(fileName) {
|
||||||
|
if (!fileName) return 'pdf'
|
||||||
|
const ext = fileName.split('.').pop().toLowerCase()
|
||||||
|
return ext
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取文件图标
|
||||||
|
*/
|
||||||
|
getFileIcon(fileType) {
|
||||||
|
const iconMap = {
|
||||||
|
'pdf': '📕',
|
||||||
|
'doc': '📘',
|
||||||
|
'docx': '📘',
|
||||||
|
'xls': '📗',
|
||||||
|
'xlsx': '📗',
|
||||||
|
'ppt': '📙',
|
||||||
|
'pptx': '📙',
|
||||||
|
'txt': '📄',
|
||||||
|
'zip': '📦',
|
||||||
|
'rar': '📦'
|
||||||
|
}
|
||||||
|
return iconMap[fileType] || '📄'
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 格式化文件大小
|
||||||
|
*/
|
||||||
|
formatFileSize(bytes) {
|
||||||
|
if (!bytes || bytes === 0) return '0 B'
|
||||||
|
if (typeof bytes === 'string') return bytes
|
||||||
|
|
||||||
|
const k = 1024
|
||||||
|
const sizes = ['B', 'KB', 'MB', 'GB']
|
||||||
|
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||||
|
return (bytes / Math.pow(k, i)).toFixed(2) + ' ' + sizes[i]
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取信息类型样式类名
|
||||||
|
*/
|
||||||
|
getInfoType(type) {
|
||||||
|
const typeMap = {
|
||||||
|
1: 'notice',
|
||||||
|
2: 'announcement',
|
||||||
|
3: 'important',
|
||||||
|
'notice': 'notice',
|
||||||
|
'announcement': 'announcement',
|
||||||
|
'important': 'important'
|
||||||
|
}
|
||||||
|
return typeMap[type] || 'notice'
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取信息类型文本
|
||||||
|
*/
|
||||||
|
getInfoTypeText(type) {
|
||||||
|
const typeMap = {
|
||||||
|
1: '通知',
|
||||||
|
2: '公告',
|
||||||
|
3: '重要',
|
||||||
|
'notice': '通知',
|
||||||
|
'announcement': '公告',
|
||||||
|
'important': '重要'
|
||||||
|
}
|
||||||
|
return typeMap[type] || '通知'
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 格式化时间
|
||||||
|
*/
|
||||||
|
formatTime(timeStr) {
|
||||||
|
if (!timeStr) return ''
|
||||||
|
|
||||||
|
const date = new Date(timeStr)
|
||||||
|
const year = date.getFullYear()
|
||||||
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||||
|
const day = String(date.getDate()).padStart(2, '0')
|
||||||
|
const hours = String(date.getHours()).padStart(2, '0')
|
||||||
|
const minutes = String(date.getMinutes()).padStart(2, '0')
|
||||||
|
|
||||||
|
return `${year}-${month}-${day} ${hours}:${minutes}`
|
||||||
|
},
|
||||||
|
|
||||||
|
handleItemClick(item) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/event-info-detail/event-info-detail?id=${item.id}&type=${item.type}&typeText=${encodeURIComponent(item.typeText)}&title=${encodeURIComponent(item.title)}&content=${encodeURIComponent(item.desc)}&time=${encodeURIComponent(item.time)}`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.event-info-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 区块标题
|
||||||
|
.section-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
padding: 0 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-icon {
|
||||||
|
font-size: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-text {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 附件下载区
|
||||||
|
.attachments-section {
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.attachments-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.attachment-item {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 25rpx 30rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
transform: scale(0.98);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20rpx;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-icon {
|
||||||
|
font-size: 48rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-details {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8rpx;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-name {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: 500;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-size {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-btn {
|
||||||
|
width: 60rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
background-color: #C93639;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-icon {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-tag {
|
||||||
|
font-size: 24rpx;
|
||||||
|
padding: 8rpx 20rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-tag.notice {
|
||||||
|
background-color: #C93639;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-tag.announcement {
|
||||||
|
background-color: #FF8C00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-tag.important {
|
||||||
|
background-color: #DC143C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-time {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-desc {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666666;
|
||||||
|
line-height: 1.6;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state {
|
||||||
|
padding: 200rpx 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
286
src/pages/event-lineup/event-lineup.vue
Normal file
@@ -0,0 +1,286 @@
|
|||||||
|
<template>
|
||||||
|
<view class="event-lineup-page">
|
||||||
|
<view v-if="loading" class="loading-container">
|
||||||
|
<text>加载中...</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view v-else-if="!isScheduleCompleted" class="not-ready">
|
||||||
|
<view class="not-ready-icon">📋</view>
|
||||||
|
<text class="not-ready-text">赛程编排尚未完成</text>
|
||||||
|
<text class="not-ready-hint">请等待赛事组织方完成编排后查看</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<template v-else>
|
||||||
|
<!-- 组别选择 -->
|
||||||
|
<view class="group-tabs">
|
||||||
|
<view
|
||||||
|
class="group-tab"
|
||||||
|
v-for="(group, index) in groups"
|
||||||
|
:key="index"
|
||||||
|
:class="{ active: currentGroupIndex === index }"
|
||||||
|
@click="currentGroupIndex = index"
|
||||||
|
>
|
||||||
|
{{ group.groupName }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 出场顺序列表 -->
|
||||||
|
<view class="lineup-list" v-if="currentGroup">
|
||||||
|
<view class="group-header">
|
||||||
|
<text class="group-venue">{{ currentGroup.venueName }}</text>
|
||||||
|
<text class="group-time">{{ currentGroup.timeSlot }}</text>
|
||||||
|
<text class="group-table">表号: {{ currentGroup.tableNo }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="lineup-item" v-for="(item, index) in currentGroup.participants" :key="index">
|
||||||
|
<view class="lineup-order">
|
||||||
|
<view class="order-number">{{ item.order }}</view>
|
||||||
|
<text class="order-text">号</text>
|
||||||
|
</view>
|
||||||
|
<view class="lineup-info">
|
||||||
|
<view class="lineup-name">{{ item.playerName }}</view>
|
||||||
|
<view class="lineup-detail">
|
||||||
|
<text class="detail-item">{{ item.organization }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="lineup-status" :class="item.status">
|
||||||
|
{{ getStatusText(item.status) }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view v-if="!currentGroup.participants || currentGroup.participants.length === 0" class="empty-list">
|
||||||
|
<text>暂无参赛者信息</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getScheduleStatus, getLineup } from '@/api/schedule.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
eventId: '',
|
||||||
|
loading: true,
|
||||||
|
isScheduleCompleted: false,
|
||||||
|
currentGroupIndex: 0,
|
||||||
|
groups: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
currentGroup() {
|
||||||
|
return this.groups[this.currentGroupIndex] || null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onLoad(options) {
|
||||||
|
if (options.eventId) {
|
||||||
|
this.eventId = options.eventId
|
||||||
|
this.checkScheduleStatus()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
async checkScheduleStatus() {
|
||||||
|
try {
|
||||||
|
const res = await getScheduleStatus(this.eventId)
|
||||||
|
if (res.data) {
|
||||||
|
this.isScheduleCompleted = res.data.isCompleted
|
||||||
|
if (this.isScheduleCompleted) {
|
||||||
|
await this.loadLineup()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('检查编排状态失败:', error)
|
||||||
|
uni.showToast({ title: '加载失败', icon: 'none' })
|
||||||
|
} finally {
|
||||||
|
this.loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async loadLineup() {
|
||||||
|
try {
|
||||||
|
const res = await getLineup(this.eventId)
|
||||||
|
if (res.data && res.data.groups) {
|
||||||
|
this.groups = res.data.groups
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('加载出场顺序失败:', error)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getStatusText(status) {
|
||||||
|
const map = {
|
||||||
|
'waiting': '待出场',
|
||||||
|
'ongoing': '进行中',
|
||||||
|
'finished': '已完成'
|
||||||
|
}
|
||||||
|
return map[status] || '待出场'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.event-lineup-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 300rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.not-ready {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 100rpx 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.not-ready-icon {
|
||||||
|
font-size: 80rpx;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.not-ready-text {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.not-ready-hint {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-tabs {
|
||||||
|
background-color: #fff;
|
||||||
|
display: flex;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
gap: 15rpx;
|
||||||
|
overflow-x: auto;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-tab {
|
||||||
|
padding: 15rpx 30rpx;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666666;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
white-space: nowrap;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-tab.active {
|
||||||
|
background-color: #C93639;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lineup-list {
|
||||||
|
padding: 0 30rpx 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-header {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-venue, .group-time, .group-table {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lineup-item {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 25rpx 30rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 25rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lineup-order {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
background: linear-gradient(135deg, #C93639 0%, #A02629 100%);
|
||||||
|
border-radius: 16rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-number {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #fff;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-text {
|
||||||
|
font-size: 20rpx;
|
||||||
|
color: rgba(255, 255, 255, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lineup-info {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lineup-name {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lineup-detail {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lineup-status {
|
||||||
|
padding: 8rpx 20rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lineup-status.finished {
|
||||||
|
background-color: #E8F5E9;
|
||||||
|
color: #4CAF50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lineup-status.ongoing {
|
||||||
|
background-color: #FFF3E0;
|
||||||
|
color: #FF9800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lineup-status.waiting {
|
||||||
|
background-color: #F5F5F5;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-list {
|
||||||
|
text-align: center;
|
||||||
|
padding: 60rpx;
|
||||||
|
color: #999;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
471
src/pages/event-list/event-list.vue
Normal file
@@ -0,0 +1,471 @@
|
|||||||
|
<template>
|
||||||
|
<view class="event-list-page">
|
||||||
|
<!-- 搜索栏 -->
|
||||||
|
<view class="search-bar">
|
||||||
|
<view class="search-input-wrapper">
|
||||||
|
<text class="search-icon">🔍</text>
|
||||||
|
<input
|
||||||
|
class="search-input"
|
||||||
|
v-model="searchText"
|
||||||
|
placeholder="请输入赛事关键字"
|
||||||
|
placeholder-class="placeholder"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 筛选栏 -->
|
||||||
|
<view class="filter-bar">
|
||||||
|
<view class="filter-item" @click="showDatePicker = true">
|
||||||
|
<text>{{ selectedDate || '日期' }}</text>
|
||||||
|
<text class="dropdown-icon">▼</text>
|
||||||
|
</view>
|
||||||
|
<view class="filter-item" @click="showAreaPicker = true">
|
||||||
|
<text>{{ selectedArea || '地区' }}</text>
|
||||||
|
<text class="dropdown-icon">▼</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 赛事列表 -->
|
||||||
|
<view class="event-list" v-if="filteredEventList.length > 0">
|
||||||
|
<view
|
||||||
|
class="event-item"
|
||||||
|
v-for="(item, index) in filteredEventList"
|
||||||
|
:key="index"
|
||||||
|
@click="goToEventDetail(item)"
|
||||||
|
>
|
||||||
|
<view class="event-title">{{ item.title }}</view>
|
||||||
|
<view class="event-info">
|
||||||
|
<text class="label">地点:</text>
|
||||||
|
<text class="value">{{ item.location }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="event-info">
|
||||||
|
<text class="label">报名时间:</text>
|
||||||
|
<text class="value">{{ item.registerTime }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="event-info">
|
||||||
|
<text class="label">比赛时间:</text>
|
||||||
|
<text class="value">{{ item.matchTime }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="event-info">
|
||||||
|
<text class="label">报名人数:</text>
|
||||||
|
<text class="value">{{ item.registerCount }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="event-footer">
|
||||||
|
<view class="register-btn" @click.stop="goToRegister(item)">
|
||||||
|
{{ item.status === 'finished' ? '报名已结束' : '立即报名' }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 空状态 -->
|
||||||
|
<view class="empty-state" v-else>
|
||||||
|
<text class="empty-text">没有相关结果</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 日期选择器 -->
|
||||||
|
<view class="picker-mask" v-if="showDatePicker" @click="showDatePicker = false">
|
||||||
|
<view class="picker-content" @click.stop>
|
||||||
|
<view class="picker-header">
|
||||||
|
<text @click="showDatePicker = false">取消</text>
|
||||||
|
<text @click="confirmDatePicker">确定</text>
|
||||||
|
</view>
|
||||||
|
<picker-view :value="datePickerValue" @change="handleDateChange" class="picker-view">
|
||||||
|
<picker-view-column>
|
||||||
|
<view class="picker-item" v-for="(item, index) in dateOptions" :key="index">
|
||||||
|
{{ item }}
|
||||||
|
</view>
|
||||||
|
</picker-view-column>
|
||||||
|
</picker-view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 地区选择器 -->
|
||||||
|
<view class="picker-mask" v-if="showAreaPicker" @click="showAreaPicker = false">
|
||||||
|
<view class="picker-content" @click.stop>
|
||||||
|
<view class="picker-header">
|
||||||
|
<text @click="showAreaPicker = false">取消</text>
|
||||||
|
<text @click="confirmAreaPicker">确定</text>
|
||||||
|
</view>
|
||||||
|
<picker-view :value="areaPickerValue" @change="handleAreaChange" class="picker-view">
|
||||||
|
<picker-view-column>
|
||||||
|
<view class="picker-item" v-for="(item, index) in areaOptions" :key="index">
|
||||||
|
{{ item }}
|
||||||
|
</view>
|
||||||
|
</picker-view-column>
|
||||||
|
</picker-view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import competitionAPI from '@/api/competition.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
searchText: '',
|
||||||
|
selectedDate: '',
|
||||||
|
selectedArea: '',
|
||||||
|
showDatePicker: false,
|
||||||
|
showAreaPicker: false,
|
||||||
|
datePickerValue: [0],
|
||||||
|
areaPickerValue: [0],
|
||||||
|
dateOptions: ['2025-04-09', '2025-04-10', '2025-04-11'],
|
||||||
|
areaOptions: ['乌鲁木齐', '天津市', '北京市'],
|
||||||
|
eventList: [],
|
||||||
|
// 分页参数
|
||||||
|
pageParams: {
|
||||||
|
current: 1,
|
||||||
|
size: 20
|
||||||
|
},
|
||||||
|
hasMore: true
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.loadEventList()
|
||||||
|
},
|
||||||
|
// 下拉刷新
|
||||||
|
onPullDownRefresh() {
|
||||||
|
this.pageParams.current = 1
|
||||||
|
this.loadEventList(true)
|
||||||
|
},
|
||||||
|
// 上拉加载更多
|
||||||
|
onReachBottom() {
|
||||||
|
if (this.hasMore) {
|
||||||
|
this.pageParams.current++
|
||||||
|
this.loadEventList(false, true)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
filteredEventList() {
|
||||||
|
// 前端筛选(作为后备方案)
|
||||||
|
let list = this.eventList
|
||||||
|
|
||||||
|
// 如果有搜索关键字,进行前端筛选
|
||||||
|
if (this.searchText) {
|
||||||
|
list = list.filter(item => item.title && item.title.includes(this.searchText))
|
||||||
|
}
|
||||||
|
|
||||||
|
return list
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 监听搜索关键字变化
|
||||||
|
watch: {
|
||||||
|
searchText(newVal, oldVal) {
|
||||||
|
// 防抖处理
|
||||||
|
clearTimeout(this.searchTimer)
|
||||||
|
this.searchTimer = setTimeout(() => {
|
||||||
|
this.pageParams.current = 1
|
||||||
|
this.loadEventList(true)
|
||||||
|
}, 500)
|
||||||
|
},
|
||||||
|
selectedDate() {
|
||||||
|
this.pageParams.current = 1
|
||||||
|
this.loadEventList(true)
|
||||||
|
},
|
||||||
|
selectedArea() {
|
||||||
|
this.pageParams.current = 1
|
||||||
|
this.loadEventList(true)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 加载赛事列表
|
||||||
|
* @param {Boolean} refresh 是否刷新(重置列表)
|
||||||
|
* @param {Boolean} loadMore 是否加载更多(追加列表)
|
||||||
|
*/
|
||||||
|
async loadEventList(refresh = false, loadMore = false) {
|
||||||
|
try {
|
||||||
|
// 构建查询参数
|
||||||
|
const params = {
|
||||||
|
current: this.pageParams.current,
|
||||||
|
size: this.pageParams.size
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加搜索关键字
|
||||||
|
// 注意:后端接口参数名待确认,可能是 name/keyword/search
|
||||||
|
if (this.searchText) {
|
||||||
|
params.name = this.searchText
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加地区筛选
|
||||||
|
if (this.selectedArea) {
|
||||||
|
params.location = this.selectedArea
|
||||||
|
}
|
||||||
|
|
||||||
|
// 调用API
|
||||||
|
const res = await competitionAPI.getCompetitionList(params)
|
||||||
|
|
||||||
|
console.log('赛事列表API返回:', res)
|
||||||
|
|
||||||
|
let list = []
|
||||||
|
let total = 0
|
||||||
|
|
||||||
|
// 处理分页数据
|
||||||
|
if (res.records) {
|
||||||
|
list = res.records
|
||||||
|
total = res.total || 0
|
||||||
|
} else if (Array.isArray(res)) {
|
||||||
|
list = res
|
||||||
|
total = res.length
|
||||||
|
}
|
||||||
|
|
||||||
|
// 数据映射
|
||||||
|
const mappedList = list.map(item => {
|
||||||
|
// 尝试多个可能的时间字段
|
||||||
|
const regStartTime = item.registrationStartTime || item.registerStartTime || item.signUpStartTime
|
||||||
|
const regEndTime = item.registrationEndTime || item.registerEndTime || item.signUpEndTime
|
||||||
|
const startTime = item.startTime || item.competitionStartTime || item.beginTime
|
||||||
|
const endTime = item.endTime || item.competitionEndTime || item.finishTime
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: item.id,
|
||||||
|
title: item.name || item.title || item.competitionName || '未命名赛事',
|
||||||
|
location: item.location || item.address || item.venue || '待定',
|
||||||
|
registerTime: this.formatTimeRange(regStartTime, regEndTime) ||
|
||||||
|
item.registerTime || item.registrationPeriod || '待定',
|
||||||
|
matchTime: this.formatTimeRange(startTime, endTime) ||
|
||||||
|
item.matchTime || item.competitionTime || '待定',
|
||||||
|
registerCount: item.registrationCount || item.registerCount || item.signUpCount || item.totalParticipants || '0',
|
||||||
|
status: this.getStatus(item.status)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
console.log('格式化后的赛事列表:', mappedList)
|
||||||
|
|
||||||
|
// 刷新或加载更多
|
||||||
|
if (refresh || !loadMore) {
|
||||||
|
this.eventList = mappedList
|
||||||
|
} else {
|
||||||
|
this.eventList = [...this.eventList, ...mappedList]
|
||||||
|
}
|
||||||
|
|
||||||
|
// 判断是否还有更多数据
|
||||||
|
this.hasMore = this.eventList.length < total
|
||||||
|
|
||||||
|
// 停止下拉刷新
|
||||||
|
if (refresh) {
|
||||||
|
uni.stopPullDownRefresh()
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('加载赛事列表失败:', err)
|
||||||
|
uni.stopPullDownRefresh()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 格式化时间范围
|
||||||
|
*/
|
||||||
|
formatTimeRange(startTime, endTime) {
|
||||||
|
if (!startTime || !endTime) return ''
|
||||||
|
|
||||||
|
const formatDate = (dateStr) => {
|
||||||
|
if (!dateStr) return ''
|
||||||
|
const date = new Date(dateStr)
|
||||||
|
const year = date.getFullYear()
|
||||||
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||||
|
const day = String(date.getDate()).padStart(2, '0')
|
||||||
|
return `${year}.${month}.${day}`
|
||||||
|
}
|
||||||
|
|
||||||
|
return `${formatDate(startTime)}-${formatDate(endTime)}`
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取赛事状态
|
||||||
|
*/
|
||||||
|
getStatus(status) {
|
||||||
|
// 1: 报名中, 2: 进行中, 3: 已结束
|
||||||
|
if (status === 3 || status === '3' || status === 'finished') {
|
||||||
|
return 'finished'
|
||||||
|
}
|
||||||
|
return 'open'
|
||||||
|
},
|
||||||
|
|
||||||
|
handleDateChange(e) {
|
||||||
|
this.datePickerValue = e.detail.value;
|
||||||
|
},
|
||||||
|
handleAreaChange(e) {
|
||||||
|
this.areaPickerValue = e.detail.value;
|
||||||
|
},
|
||||||
|
confirmDatePicker() {
|
||||||
|
this.selectedDate = this.dateOptions[this.datePickerValue[0]];
|
||||||
|
this.showDatePicker = false;
|
||||||
|
},
|
||||||
|
confirmAreaPicker() {
|
||||||
|
this.selectedArea = this.areaOptions[this.areaPickerValue[0]];
|
||||||
|
this.showAreaPicker = false;
|
||||||
|
},
|
||||||
|
goToEventDetail(item) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/event-detail/event-detail?id=' + item.id
|
||||||
|
});
|
||||||
|
},
|
||||||
|
goToRegister(item) {
|
||||||
|
if (item.status === 'open') {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/register-type/register-type?id=' + item.id
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.event-list-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-bar {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input-wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-icon {
|
||||||
|
font-size: 32rpx;
|
||||||
|
margin-right: 15rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.placeholder {
|
||||||
|
color: #cccccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-bar {
|
||||||
|
display: flex;
|
||||||
|
gap: 20rpx;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-item {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-icon {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-list {
|
||||||
|
padding: 0 30rpx 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-item {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-info {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666666;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-btn {
|
||||||
|
background-color: #C93639;
|
||||||
|
color: #fff;
|
||||||
|
padding: 16rpx 50rpx;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state {
|
||||||
|
padding: 200rpx 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker-mask {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 9999;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker-content {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 24rpx 24rpx 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 30rpx;
|
||||||
|
border-bottom: 1rpx solid #f5f5f5;
|
||||||
|
font-size: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker-view {
|
||||||
|
height: 400rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker-item {
|
||||||
|
height: 80rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 30rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
228
src/pages/event-live/event-live.vue
Normal file
@@ -0,0 +1,228 @@
|
|||||||
|
<template>
|
||||||
|
<view class="event-live-page">
|
||||||
|
<!-- 实况列表 -->
|
||||||
|
<view class="live-list">
|
||||||
|
<view class="live-item" v-for="(item, index) in liveList" :key="index">
|
||||||
|
<view class="live-time">{{ item.time }}</view>
|
||||||
|
<view class="live-content">
|
||||||
|
<view class="live-type" :class="item.type">{{ item.typeText }}</view>
|
||||||
|
<view class="live-text">{{ item.content }}</view>
|
||||||
|
<view class="live-images" v-if="item.images && item.images.length > 0">
|
||||||
|
<image
|
||||||
|
class="live-image"
|
||||||
|
v-for="(img, idx) in item.images"
|
||||||
|
:key="idx"
|
||||||
|
:src="img"
|
||||||
|
mode="aspectFill"
|
||||||
|
></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 刷新提示 -->
|
||||||
|
<view class="refresh-tip">
|
||||||
|
<text class="tip-icon">🔄</text>
|
||||||
|
<text class="tip-text">下拉刷新获取最新实况</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import infoAPI from '@/api/info.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
eventId: '',
|
||||||
|
liveList: []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
if (options.eventId) {
|
||||||
|
this.eventId = options.eventId
|
||||||
|
this.loadLiveList(options.eventId)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 下拉刷新
|
||||||
|
onPullDownRefresh() {
|
||||||
|
this.loadLiveList(this.eventId, true)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 加载比赛实况列表
|
||||||
|
*/
|
||||||
|
async loadLiveList(eventId, refresh = false) {
|
||||||
|
try {
|
||||||
|
const res = await infoAPI.getLiveUpdateList({ competitionId: eventId })
|
||||||
|
|
||||||
|
let list = []
|
||||||
|
if (res.records) {
|
||||||
|
list = res.records
|
||||||
|
} else if (Array.isArray(res)) {
|
||||||
|
list = res
|
||||||
|
}
|
||||||
|
|
||||||
|
// 数据映射
|
||||||
|
this.liveList = list.map(item => ({
|
||||||
|
time: this.formatTime(item.updateTime || item.time || item.createTime),
|
||||||
|
type: this.getLiveType(item.type || item.updateType),
|
||||||
|
typeText: this.getLiveTypeText(item.type || item.updateType),
|
||||||
|
content: item.content || item.updateContent || '',
|
||||||
|
images: item.images || item.imageList || []
|
||||||
|
}))
|
||||||
|
|
||||||
|
// 停止下拉刷新
|
||||||
|
if (refresh) {
|
||||||
|
uni.stopPullDownRefresh()
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('加载实况列表失败:', err)
|
||||||
|
if (refresh) {
|
||||||
|
uni.stopPullDownRefresh()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取实况类型样式类名
|
||||||
|
*/
|
||||||
|
getLiveType(type) {
|
||||||
|
const typeMap = {
|
||||||
|
1: 'highlight',
|
||||||
|
2: 'score',
|
||||||
|
3: 'news',
|
||||||
|
'highlight': 'highlight',
|
||||||
|
'score': 'score',
|
||||||
|
'news': 'news'
|
||||||
|
}
|
||||||
|
return typeMap[type] || 'news'
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取实况类型文本
|
||||||
|
*/
|
||||||
|
getLiveTypeText(type) {
|
||||||
|
const typeMap = {
|
||||||
|
1: '精彩瞬间',
|
||||||
|
2: '比分',
|
||||||
|
3: '赛况',
|
||||||
|
'highlight': '精彩瞬间',
|
||||||
|
'score': '比分',
|
||||||
|
'news': '赛况'
|
||||||
|
}
|
||||||
|
return typeMap[type] || '赛况'
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 格式化时间(只取时分)
|
||||||
|
*/
|
||||||
|
formatTime(timeStr) {
|
||||||
|
if (!timeStr) return ''
|
||||||
|
|
||||||
|
// 如果已经是 HH:MM 格式
|
||||||
|
if (/^\d{2}:\d{2}$/.test(timeStr)) {
|
||||||
|
return timeStr
|
||||||
|
}
|
||||||
|
|
||||||
|
const date = new Date(timeStr)
|
||||||
|
const hours = String(date.getHours()).padStart(2, '0')
|
||||||
|
const minutes = String(date.getMinutes()).padStart(2, '0')
|
||||||
|
|
||||||
|
return `${hours}:${minutes}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.event-live-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-item {
|
||||||
|
display: flex;
|
||||||
|
gap: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-time {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
flex-shrink: 0;
|
||||||
|
padding-top: 5rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-content {
|
||||||
|
flex: 1;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
padding: 25rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-type {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 22rpx;
|
||||||
|
padding: 6rpx 16rpx;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-type.highlight {
|
||||||
|
background-color: #C93639;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-type.score {
|
||||||
|
background-color: #FF8C00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-type.news {
|
||||||
|
background-color: #4CAF50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-images {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 10rpx;
|
||||||
|
margin-top: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 180rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refresh-tip {
|
||||||
|
text-align: center;
|
||||||
|
padding: 40rpx 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tip-icon {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tip-text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
245
src/pages/event-medals/event-medals.vue
Normal file
@@ -0,0 +1,245 @@
|
|||||||
|
<template>
|
||||||
|
<view class="event-medals-page">
|
||||||
|
<!-- 顶部统计 -->
|
||||||
|
<view class="top-stats">
|
||||||
|
<view class="stat-item">
|
||||||
|
<view class="stat-number">{{ totalTeams }}</view>
|
||||||
|
<view class="stat-label">参赛队伍</view>
|
||||||
|
</view>
|
||||||
|
<view class="stat-item">
|
||||||
|
<view class="stat-number">{{ totalMedals }}</view>
|
||||||
|
<view class="stat-label">奖牌总数</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 奖牌榜列表 -->
|
||||||
|
<view class="medals-list">
|
||||||
|
<view class="medals-header">
|
||||||
|
<view class="header-rank">排名</view>
|
||||||
|
<view class="header-team">代表队</view>
|
||||||
|
<view class="header-medals">
|
||||||
|
<text class="medal-icon gold">🥇</text>
|
||||||
|
<text class="medal-icon silver">🥈</text>
|
||||||
|
<text class="medal-icon bronze">🥉</text>
|
||||||
|
<text class="medal-total">总计</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="medal-item" v-for="(item, index) in medalsList" :key="index">
|
||||||
|
<view class="item-rank" :class="'rank-' + item.rank">{{ item.rank }}</view>
|
||||||
|
<view class="item-team">
|
||||||
|
<view class="team-name">{{ item.team }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="item-medals">
|
||||||
|
<text class="medal-count gold">{{ item.gold }}</text>
|
||||||
|
<text class="medal-count silver">{{ item.silver }}</text>
|
||||||
|
<text class="medal-count bronze">{{ item.bronze }}</text>
|
||||||
|
<text class="medal-count total">{{ item.total }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import resultAPI from '@/api/result.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
eventId: '',
|
||||||
|
medalsList: []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
totalTeams() {
|
||||||
|
return this.medalsList.length;
|
||||||
|
},
|
||||||
|
totalMedals() {
|
||||||
|
return this.medalsList.reduce((sum, item) => sum + item.total, 0);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
if (options.eventId) {
|
||||||
|
this.eventId = options.eventId
|
||||||
|
this.loadMedalsList(options.eventId)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 加载奖牌榜
|
||||||
|
*/
|
||||||
|
async loadMedalsList(eventId) {
|
||||||
|
try {
|
||||||
|
const res = await resultAPI.getMedalsList(eventId)
|
||||||
|
|
||||||
|
let list = []
|
||||||
|
if (res.records) {
|
||||||
|
list = res.records
|
||||||
|
} else if (Array.isArray(res)) {
|
||||||
|
list = res
|
||||||
|
}
|
||||||
|
|
||||||
|
// 数据映射
|
||||||
|
this.medalsList = list.map((item, index) => ({
|
||||||
|
rank: item.rank || item.ranking || (index + 1),
|
||||||
|
team: item.teamName || item.team,
|
||||||
|
gold: item.goldMedals || item.gold || 0,
|
||||||
|
silver: item.silverMedals || item.silver || 0,
|
||||||
|
bronze: item.bronzeMedals || item.bronze || 0,
|
||||||
|
total: item.totalMedals || item.total || 0
|
||||||
|
}))
|
||||||
|
} catch (err) {
|
||||||
|
console.error('加载奖牌榜失败:', err)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.event-medals-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-stats {
|
||||||
|
background: linear-gradient(135deg, #C93639 0%, #A02629 100%);
|
||||||
|
padding: 40rpx 30rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-item {
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-number {
|
||||||
|
font-size: 48rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
font-size: 24rpx;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.medals-list {
|
||||||
|
margin: 0 30rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.medals-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 25rpx 30rpx;
|
||||||
|
background-color: #F8F8F8;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-rank {
|
||||||
|
width: 80rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-team {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-medals {
|
||||||
|
display: flex;
|
||||||
|
gap: 30rpx;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.medal-icon {
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.medal-total {
|
||||||
|
width: 60rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.medal-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 25rpx 30rpx;
|
||||||
|
border-bottom: 1rpx solid #F5F5F5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.medal-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-rank {
|
||||||
|
width: 80rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-rank.rank-1 {
|
||||||
|
color: #FFD700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-rank.rank-2 {
|
||||||
|
color: #C0C0C0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-rank.rank-3 {
|
||||||
|
color: #CD7F32;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-rank:not(.rank-1):not(.rank-2):not(.rank-3) {
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-team {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-name {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-medals {
|
||||||
|
display: flex;
|
||||||
|
gap: 30rpx;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.medal-count {
|
||||||
|
width: 40rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.medal-count.gold {
|
||||||
|
color: #FFD700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.medal-count.silver {
|
||||||
|
color: #C0C0C0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.medal-count.bronze {
|
||||||
|
color: #CD7F32;
|
||||||
|
}
|
||||||
|
|
||||||
|
.medal-count.total {
|
||||||
|
width: 60rpx;
|
||||||
|
color: #C93639;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
43
src/pages/event-photos/event-photos.vue
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
<template>
|
||||||
|
<view class="event-photos-page">
|
||||||
|
<!-- 页面内容由 attachment-view 处理 -->
|
||||||
|
<!-- 此页面作为备用,实际跳转到 attachment-view -->
|
||||||
|
<view class="redirect-notice">
|
||||||
|
<text>正在跳转...</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
eventId: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
// 重定向到通用附件页面
|
||||||
|
if (options.eventId || options.competitionId) {
|
||||||
|
const id = options.eventId || options.competitionId
|
||||||
|
uni.redirectTo({
|
||||||
|
url: `/pages/attachment-view/attachment-view?type=photos&competitionId=${id}`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.event-photos-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.redirect-notice {
|
||||||
|
color: #999;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
431
src/pages/event-players/event-players.vue
Normal file
@@ -0,0 +1,431 @@
|
|||||||
|
<template>
|
||||||
|
<view class="event-players-page">
|
||||||
|
<!-- 搜索框 -->
|
||||||
|
<view class="search-bar">
|
||||||
|
<input
|
||||||
|
class="search-input"
|
||||||
|
placeholder="搜索选手姓名或编号"
|
||||||
|
v-model="searchKey"
|
||||||
|
@confirm="handleSearch"
|
||||||
|
/>
|
||||||
|
<view class="search-icon" @click="handleSearch">🔍</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 分类筛选 -->
|
||||||
|
<view class="category-tabs">
|
||||||
|
<view
|
||||||
|
class="category-tab"
|
||||||
|
v-for="(category, index) in categories"
|
||||||
|
:key="index"
|
||||||
|
:class="{ active: currentCategory === category.value }"
|
||||||
|
@click="handleCategoryChange(category.value)"
|
||||||
|
>
|
||||||
|
{{ category.label }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 统计信息 -->
|
||||||
|
<view class="stats-bar" v-if="totalCount > 0">
|
||||||
|
<text class="stats-text">共 {{ totalCount }} 名选手</text>
|
||||||
|
<text class="stats-text">已确认 {{ confirmedCount }} 人</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 选手列表 -->
|
||||||
|
<view class="players-list" v-if="playersList.length > 0">
|
||||||
|
<view
|
||||||
|
class="player-item"
|
||||||
|
v-for="(player, index) in playersList"
|
||||||
|
:key="player.id"
|
||||||
|
@click="handlePlayerClick(player)"
|
||||||
|
>
|
||||||
|
<view class="player-number">{{ player.playerNo || (index + 1).toString().padStart(3, '0') }}</view>
|
||||||
|
<view class="player-info">
|
||||||
|
<view class="player-name">
|
||||||
|
{{ player.playerName }}
|
||||||
|
<text class="gender-tag" v-if="player.gender">{{ player.gender === 1 ? '男' : '女' }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="player-detail">
|
||||||
|
<text class="detail-text" v-if="player.organization">{{ player.organization }}</text>
|
||||||
|
<text class="detail-divider" v-if="player.organization && player.projectName">|</text>
|
||||||
|
<text class="detail-text" v-if="player.projectName">{{ player.projectName }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="player-extra" v-if="player.category">
|
||||||
|
<text class="extra-text">{{ player.category }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="player-status" :class="getStatusClass(player.registrationStatus)">
|
||||||
|
{{ getStatusText(player.registrationStatus) }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 空状态 -->
|
||||||
|
<view class="empty-state" v-else-if="!loading">
|
||||||
|
<text class="empty-icon">👤</text>
|
||||||
|
<text class="empty-text">暂无参赛选手</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 加载状态 -->
|
||||||
|
<view class="loading-state" v-if="loading">
|
||||||
|
<text class="loading-text">加载中...</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 加载更多 -->
|
||||||
|
<view class="load-more" v-if="hasMore && !loading" @click="loadMore">
|
||||||
|
<text class="load-more-text">加载更多</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import athleteAPI from '@/api/athlete.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
eventId: '',
|
||||||
|
searchKey: '',
|
||||||
|
currentCategory: '',
|
||||||
|
categories: [
|
||||||
|
{ label: '全部', value: '' },
|
||||||
|
{ label: '男子组', value: '1' },
|
||||||
|
{ label: '女子组', value: '2' }
|
||||||
|
],
|
||||||
|
playersList: [],
|
||||||
|
totalCount: 0,
|
||||||
|
confirmedCount: 0,
|
||||||
|
loading: false,
|
||||||
|
page: 1,
|
||||||
|
pageSize: 20,
|
||||||
|
hasMore: true
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
if (options.eventId) {
|
||||||
|
this.eventId = options.eventId
|
||||||
|
this.loadPlayersList()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 加载选手列表
|
||||||
|
*/
|
||||||
|
async loadPlayersList(isLoadMore = false) {
|
||||||
|
if (this.loading) return
|
||||||
|
|
||||||
|
this.loading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const params = {
|
||||||
|
competitionId: this.eventId,
|
||||||
|
current: isLoadMore ? this.page : 1,
|
||||||
|
size: this.pageSize
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加搜索条件
|
||||||
|
if (this.searchKey) {
|
||||||
|
params.playerName = this.searchKey
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加性别筛选
|
||||||
|
if (this.currentCategory) {
|
||||||
|
params.gender = this.currentCategory
|
||||||
|
}
|
||||||
|
|
||||||
|
const res = await athleteAPI.getAthleteList(params)
|
||||||
|
|
||||||
|
console.log('=== 选手列表响应 ===', res)
|
||||||
|
|
||||||
|
// request.js already extracts data.data, so res is the actual data
|
||||||
|
const records = res.records || res || []
|
||||||
|
|
||||||
|
if (isLoadMore) {
|
||||||
|
this.playersList = [...this.playersList, ...records]
|
||||||
|
} else {
|
||||||
|
this.playersList = Array.isArray(records) ? records : []
|
||||||
|
this.page = 1
|
||||||
|
}
|
||||||
|
|
||||||
|
this.totalCount = res.total || this.playersList.length
|
||||||
|
this.hasMore = this.playersList.length < this.totalCount
|
||||||
|
|
||||||
|
// 统计已确认人数
|
||||||
|
this.confirmedCount = this.playersList.filter(p => p.registrationStatus === 1).length
|
||||||
|
} catch (error) {
|
||||||
|
console.error('加载选手列表失败:', error)
|
||||||
|
uni.showToast({
|
||||||
|
title: '加载失败,请重试',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
} finally {
|
||||||
|
this.loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 搜索
|
||||||
|
*/
|
||||||
|
handleSearch() {
|
||||||
|
this.page = 1
|
||||||
|
this.loadPlayersList()
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 切换分类
|
||||||
|
*/
|
||||||
|
handleCategoryChange(value) {
|
||||||
|
this.currentCategory = value
|
||||||
|
this.page = 1
|
||||||
|
this.loadPlayersList()
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 加载更多
|
||||||
|
*/
|
||||||
|
loadMore() {
|
||||||
|
if (this.hasMore && !this.loading) {
|
||||||
|
this.page++
|
||||||
|
this.loadPlayersList(true)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 点击选手
|
||||||
|
*/
|
||||||
|
handlePlayerClick(player) {
|
||||||
|
// 可以跳转到选手详情页
|
||||||
|
uni.showToast({
|
||||||
|
title: `选手:${player.playerName}`,
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取状态样式类
|
||||||
|
*/
|
||||||
|
getStatusClass(status) {
|
||||||
|
const statusMap = {
|
||||||
|
0: 'pending', // 待确认
|
||||||
|
1: 'confirmed', // 已确认
|
||||||
|
2: 'cancelled' // 已取消
|
||||||
|
}
|
||||||
|
return statusMap[status] || 'pending'
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取状态文本
|
||||||
|
*/
|
||||||
|
getStatusText(status) {
|
||||||
|
const statusMap = {
|
||||||
|
0: '待确认',
|
||||||
|
1: '已确认',
|
||||||
|
2: '已取消'
|
||||||
|
}
|
||||||
|
return statusMap[status] || '未知'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.event-players-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-bar {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input {
|
||||||
|
flex: 1;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-icon {
|
||||||
|
font-size: 32rpx;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-tabs {
|
||||||
|
background-color: #fff;
|
||||||
|
display: flex;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
gap: 20rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-tab {
|
||||||
|
padding: 12rpx 30rpx;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666666;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-tab.active {
|
||||||
|
background-color: #C93639;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-bar {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-text {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.players-list {
|
||||||
|
padding: 0 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-item {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20rpx;
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
transform: scale(0.98);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-number {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
background-color: #C93639;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-info {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-name {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gender-tag {
|
||||||
|
font-size: 20rpx;
|
||||||
|
padding: 4rpx 12rpx;
|
||||||
|
border-radius: 4rpx;
|
||||||
|
background-color: #E3F2FD;
|
||||||
|
color: #2196F3;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-detail {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666666;
|
||||||
|
margin-bottom: 6rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-divider {
|
||||||
|
margin: 0 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-extra {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-status {
|
||||||
|
padding: 8rpx 20rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-status.confirmed {
|
||||||
|
background-color: #E8F5E9;
|
||||||
|
color: #4CAF50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-status.pending {
|
||||||
|
background-color: #FFF3E0;
|
||||||
|
color: #FF9800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-status.cancelled {
|
||||||
|
background-color: #FFEBEE;
|
||||||
|
color: #F44336;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 120rpx 0;
|
||||||
|
gap: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-icon {
|
||||||
|
font-size: 120rpx;
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-state {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 40rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.load-more {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 30rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.load-more-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #C93639;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
1169
src/pages/event-register/event-register.vue
Normal file
513
src/pages/event-rules/event-rules.vue
Normal file
@@ -0,0 +1,513 @@
|
|||||||
|
<template>
|
||||||
|
<view class="event-rules-page">
|
||||||
|
<!-- 附件下载区 -->
|
||||||
|
<view class="attachments-section" v-if="attachments.length > 0">
|
||||||
|
<view class="section-title">
|
||||||
|
<text class="title-icon">📎</text>
|
||||||
|
<text class="title-text">规程附件</text>
|
||||||
|
</view>
|
||||||
|
<view class="attachments-list">
|
||||||
|
<view class="attachment-item" v-for="(file, index) in attachments" :key="index" @click="downloadFile(file)">
|
||||||
|
<view class="file-info">
|
||||||
|
<text class="file-icon">{{ getFileIcon(file.fileType) }}</text>
|
||||||
|
<view class="file-details">
|
||||||
|
<text class="file-name">{{ file.fileName }}</text>
|
||||||
|
<text class="file-size">{{ file.fileSize }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="download-btn">
|
||||||
|
<text class="download-icon">⬇</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 规程内容区 -->
|
||||||
|
<view class="content-section" v-if="rulesList.length > 0">
|
||||||
|
<view class="section-title">
|
||||||
|
<text class="title-icon">📄</text>
|
||||||
|
<text class="title-text">规程内容</text>
|
||||||
|
</view>
|
||||||
|
<view class="rules-list">
|
||||||
|
<view class="rules-item" v-for="(item, index) in rulesList" :key="index" @click="toggleSection(index)">
|
||||||
|
<view class="rules-header">
|
||||||
|
<view class="chapter-number">{{ item.chapter }}</view>
|
||||||
|
<view class="chapter-title">{{ item.title }}</view>
|
||||||
|
<view class="arrow" :class="{ expanded: item.expanded }">›</view>
|
||||||
|
</view>
|
||||||
|
<view class="rules-content" v-if="item.expanded">
|
||||||
|
<view class="content-item" v-for="(content, idx) in item.contents" :key="idx">
|
||||||
|
<text class="content-text">{{ content }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 空状态 -->
|
||||||
|
<view class="empty-state" v-if="attachments.length === 0 && rulesList.length === 0">
|
||||||
|
<text class="empty-icon">📋</text>
|
||||||
|
<text class="empty-text">暂无规程信息</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 快捷入口 -->
|
||||||
|
<view class="quick-actions" v-if="eventId">
|
||||||
|
<view class="quick-action-item" @click="goToPlayers">
|
||||||
|
<view class="action-icon">👥</view>
|
||||||
|
<view class="action-text">查看参赛选手</view>
|
||||||
|
</view>
|
||||||
|
<view class="quick-action-item" @click="goToRegister">
|
||||||
|
<view class="action-icon">📝</view>
|
||||||
|
<view class="action-text">我要报名</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import competitionAPI from '@/api/competition.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
eventId: '',
|
||||||
|
attachments: [],
|
||||||
|
rulesList: []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
if (options.eventId) {
|
||||||
|
this.eventId = options.eventId
|
||||||
|
this.loadAttachments(options.eventId)
|
||||||
|
this.loadRulesData(options.eventId)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 加载附件列表
|
||||||
|
*/
|
||||||
|
async loadAttachments(eventId) {
|
||||||
|
try {
|
||||||
|
const res = await competitionAPI.getAttachments({
|
||||||
|
competitionId: eventId,
|
||||||
|
type: 'rules'
|
||||||
|
})
|
||||||
|
|
||||||
|
let list = []
|
||||||
|
if (res && Array.isArray(res)) {
|
||||||
|
list = res
|
||||||
|
} else if (res && res.records) {
|
||||||
|
list = res.records
|
||||||
|
} else if (res && res.data && Array.isArray(res.data)) {
|
||||||
|
list = res.data
|
||||||
|
}
|
||||||
|
|
||||||
|
if (list.length > 0) {
|
||||||
|
this.attachments = list.map(file => ({
|
||||||
|
id: file.id,
|
||||||
|
fileName: file.fileName || file.name,
|
||||||
|
fileUrl: file.fileUrl || file.url,
|
||||||
|
fileSize: this.formatFileSize(file.fileSize || file.size),
|
||||||
|
fileType: file.fileType || this.getFileType(file.fileName || file.name)
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('加载附件失败:', err)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 加载规程数据
|
||||||
|
*/
|
||||||
|
async loadRulesData(eventId) {
|
||||||
|
try {
|
||||||
|
const res = await competitionAPI.getCompetitionRules(eventId)
|
||||||
|
|
||||||
|
// 处理规程内容数据
|
||||||
|
if (res && res.chapters && res.chapters.length > 0) {
|
||||||
|
this.rulesList = res.chapters.map(chapter => ({
|
||||||
|
chapter: chapter.chapterNumber || chapter.number,
|
||||||
|
title: chapter.title || chapter.name,
|
||||||
|
expanded: false,
|
||||||
|
contents: chapter.contents || chapter.items || []
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('加载规程数据失败:', err)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 切换章节展开/收起
|
||||||
|
*/
|
||||||
|
toggleSection(index) {
|
||||||
|
this.rulesList[index].expanded = !this.rulesList[index].expanded
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 下载文件
|
||||||
|
*/
|
||||||
|
downloadFile(file) {
|
||||||
|
const fileExt = file.fileType || this.getFileType(file.fileName) || 'pdf'
|
||||||
|
|
||||||
|
// #ifdef H5
|
||||||
|
const link = document.createElement('a')
|
||||||
|
link.href = file.fileUrl
|
||||||
|
link.download = file.fileName
|
||||||
|
link.target = '_blank'
|
||||||
|
link.style.display = 'none'
|
||||||
|
document.body.appendChild(link)
|
||||||
|
link.click()
|
||||||
|
document.body.removeChild(link)
|
||||||
|
uni.showToast({
|
||||||
|
title: '开始下载',
|
||||||
|
icon: 'success'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifndef H5
|
||||||
|
uni.showLoading({ title: '准备下载' })
|
||||||
|
uni.downloadFile({
|
||||||
|
url: file.fileUrl,
|
||||||
|
success: (res) => {
|
||||||
|
if (res.statusCode === 200) {
|
||||||
|
uni.openDocument({
|
||||||
|
filePath: res.tempFilePath,
|
||||||
|
fileType: fileExt,
|
||||||
|
success: () => {
|
||||||
|
uni.hideLoading()
|
||||||
|
uni.showToast({ title: '打开成功', icon: 'success' })
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
uni.hideLoading()
|
||||||
|
console.error('打开文件失败:', err)
|
||||||
|
uni.showToast({ title: '打开失败', icon: 'none' })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
uni.hideLoading()
|
||||||
|
console.error('下载失败:', err)
|
||||||
|
uni.showToast({ title: '下载失败', icon: 'none' })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取文件类型
|
||||||
|
*/
|
||||||
|
getFileType(fileName) {
|
||||||
|
if (!fileName) return 'pdf'
|
||||||
|
const ext = fileName.split('.').pop().toLowerCase()
|
||||||
|
return ext
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取文件图标
|
||||||
|
*/
|
||||||
|
getFileIcon(fileType) {
|
||||||
|
const iconMap = {
|
||||||
|
'pdf': '📕',
|
||||||
|
'doc': '📘',
|
||||||
|
'docx': '📘',
|
||||||
|
'xls': '📗',
|
||||||
|
'xlsx': '📗',
|
||||||
|
'ppt': '📙',
|
||||||
|
'pptx': '📙',
|
||||||
|
'txt': '📄',
|
||||||
|
'zip': '📦',
|
||||||
|
'rar': '📦'
|
||||||
|
}
|
||||||
|
return iconMap[fileType] || '📄'
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 格式化文件大小
|
||||||
|
*/
|
||||||
|
formatFileSize(bytes) {
|
||||||
|
if (!bytes || bytes === 0) return '0 B'
|
||||||
|
if (typeof bytes === 'string') return bytes
|
||||||
|
|
||||||
|
const k = 1024
|
||||||
|
const sizes = ['B', 'KB', 'MB', 'GB']
|
||||||
|
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||||
|
return (bytes / Math.pow(k, i)).toFixed(2) + ' ' + sizes[i]
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 跳转到参赛选手页面
|
||||||
|
*/
|
||||||
|
goToPlayers() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/event-players/event-players?eventId=${this.eventId}`
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 跳转到报名页面
|
||||||
|
*/
|
||||||
|
goToRegister() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/event-register/event-register?eventId=${this.eventId}`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.event-rules-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 区块标题
|
||||||
|
.section-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
padding: 0 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-icon {
|
||||||
|
font-size: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-text {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 附件下载区
|
||||||
|
.attachments-section {
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.attachments-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.attachment-item {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 25rpx 30rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
transform: scale(0.98);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20rpx;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-icon {
|
||||||
|
font-size: 48rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-details {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8rpx;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-name {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: 500;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-size {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-btn {
|
||||||
|
width: 60rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
background-color: #C93639;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-icon {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 规程内容区
|
||||||
|
.content-section {
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rules-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rules-item {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.rules-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 30rpx;
|
||||||
|
gap: 15rpx;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.chapter-number {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #C93639;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chapter-title {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
font-size: 40rpx;
|
||||||
|
color: #999999;
|
||||||
|
transition: transform 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow.expanded {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.rules-content {
|
||||||
|
padding: 0 30rpx 30rpx;
|
||||||
|
border-top: 1rpx solid #f5f5f5;
|
||||||
|
animation: slideDown 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideDown {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-10rpx);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-item {
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
padding-left: 20rpx;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-item::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 12rpx;
|
||||||
|
width: 8rpx;
|
||||||
|
height: 8rpx;
|
||||||
|
background-color: #C93639;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-text {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666666;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 空状态
|
||||||
|
.empty-state {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 120rpx 0;
|
||||||
|
gap: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-icon {
|
||||||
|
font-size: 120rpx;
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 快捷入口
|
||||||
|
.quick-actions {
|
||||||
|
margin-top: 30rpx;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-action-item {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 15rpx;
|
||||||
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-icon {
|
||||||
|
font-size: 48rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-text {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
586
src/pages/event-schedule/event-schedule.vue
Normal file
@@ -0,0 +1,586 @@
|
|||||||
|
<template>
|
||||||
|
<view class="event-schedule-page">
|
||||||
|
<!-- 附件下载区 -->
|
||||||
|
<view class="attachments-section" v-if="attachments.length > 0">
|
||||||
|
<view class="section-title">
|
||||||
|
<text class="title-icon">📎</text>
|
||||||
|
<text class="title-text">日程附件</text>
|
||||||
|
</view>
|
||||||
|
<view class="attachments-list">
|
||||||
|
<view class="attachment-item" v-for="(file, index) in attachments" :key="index" @click="downloadFile(file)">
|
||||||
|
<view class="file-info">
|
||||||
|
<text class="file-icon">{{ getFileIcon(file.fileType) }}</text>
|
||||||
|
<view class="file-details">
|
||||||
|
<text class="file-name">{{ file.fileName }}</text>
|
||||||
|
<text class="file-size">{{ file.fileSize }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="download-btn">
|
||||||
|
<text class="download-icon">⬇</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 日期选择器 -->
|
||||||
|
<view class="date-tabs" v-if="dates.length > 0">
|
||||||
|
<view
|
||||||
|
class="date-tab"
|
||||||
|
v-for="(date, index) in dates"
|
||||||
|
:key="index"
|
||||||
|
:class="{ active: currentDate === index }"
|
||||||
|
@click="currentDate = index"
|
||||||
|
>
|
||||||
|
<view class="date-day">{{ date.day }}</view>
|
||||||
|
<view class="date-text">{{ date.text }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 日程时间线 -->
|
||||||
|
<view class="schedule-timeline" v-if="currentSchedule.length > 0">
|
||||||
|
<view class="timeline-item" v-for="(item, index) in currentSchedule" :key="index">
|
||||||
|
<view class="time-dot"></view>
|
||||||
|
<view class="time-line" v-if="index < currentSchedule.length - 1"></view>
|
||||||
|
<view class="schedule-card">
|
||||||
|
<view class="schedule-time">{{ item.time }}</view>
|
||||||
|
<view class="schedule-title">{{ item.title }}</view>
|
||||||
|
<view class="schedule-location" v-if="item.location">
|
||||||
|
<text class="location-icon">📍</text>
|
||||||
|
<text>{{ item.location }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 空状态 -->
|
||||||
|
<view class="empty-state" v-if="attachments.length === 0 && dates.length === 0">
|
||||||
|
<text class="empty-icon">📅</text>
|
||||||
|
<text class="empty-text">暂无日程安排</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import infoAPI from '@/api/info.js'
|
||||||
|
import competitionAPI from '@/api/competition.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
eventId: '',
|
||||||
|
currentDate: 0,
|
||||||
|
dates: [],
|
||||||
|
schedules: {},
|
||||||
|
attachments: []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
currentSchedule() {
|
||||||
|
return this.schedules[this.currentDate] || [];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
if (options.eventId) {
|
||||||
|
this.eventId = options.eventId
|
||||||
|
this.loadAttachments(options.eventId)
|
||||||
|
this.loadScheduleDates(options.eventId)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
currentDate(newVal) {
|
||||||
|
if (this.dates[newVal] && this.dates[newVal].date) {
|
||||||
|
this.loadScheduleByDate(this.eventId, this.dates[newVal].date)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 加载附件列表
|
||||||
|
*/
|
||||||
|
async loadAttachments(eventId) {
|
||||||
|
try {
|
||||||
|
const res = await competitionAPI.getAttachments({
|
||||||
|
competitionId: eventId,
|
||||||
|
type: 'schedule'
|
||||||
|
})
|
||||||
|
|
||||||
|
let list = []
|
||||||
|
if (res && Array.isArray(res)) {
|
||||||
|
list = res
|
||||||
|
} else if (res && res.records) {
|
||||||
|
list = res.records
|
||||||
|
} else if (res && res.data && Array.isArray(res.data)) {
|
||||||
|
list = res.data
|
||||||
|
}
|
||||||
|
|
||||||
|
if (list.length > 0) {
|
||||||
|
this.attachments = list.map(file => ({
|
||||||
|
id: file.id,
|
||||||
|
fileName: file.fileName || file.name,
|
||||||
|
fileUrl: file.fileUrl || file.url,
|
||||||
|
fileSize: this.formatFileSize(file.fileSize || file.size),
|
||||||
|
fileType: file.fileType || this.getFileType(file.fileName || file.name)
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('加载附件失败:', err)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 下载文件
|
||||||
|
*/
|
||||||
|
downloadFile(file) {
|
||||||
|
const fileExt = file.fileType || this.getFileType(file.fileName) || 'pdf'
|
||||||
|
|
||||||
|
// #ifdef H5
|
||||||
|
const link = document.createElement('a')
|
||||||
|
link.href = file.fileUrl
|
||||||
|
link.download = file.fileName
|
||||||
|
link.target = '_blank'
|
||||||
|
link.style.display = 'none'
|
||||||
|
document.body.appendChild(link)
|
||||||
|
link.click()
|
||||||
|
document.body.removeChild(link)
|
||||||
|
uni.showToast({
|
||||||
|
title: '开始下载',
|
||||||
|
icon: 'success'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifndef H5
|
||||||
|
uni.showLoading({ title: '准备下载' })
|
||||||
|
uni.downloadFile({
|
||||||
|
url: file.fileUrl,
|
||||||
|
success: (res) => {
|
||||||
|
if (res.statusCode === 200) {
|
||||||
|
uni.openDocument({
|
||||||
|
filePath: res.tempFilePath,
|
||||||
|
fileType: fileExt,
|
||||||
|
success: () => {
|
||||||
|
uni.hideLoading()
|
||||||
|
uni.showToast({ title: '打开成功', icon: 'success' })
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
uni.hideLoading()
|
||||||
|
console.error('打开文件失败:', err)
|
||||||
|
uni.showToast({ title: '打开失败', icon: 'none' })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
uni.hideLoading()
|
||||||
|
console.error('下载失败:', err)
|
||||||
|
uni.showToast({ title: '下载失败', icon: 'none' })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取文件类型
|
||||||
|
*/
|
||||||
|
getFileType(fileName) {
|
||||||
|
if (!fileName) return 'pdf'
|
||||||
|
const ext = fileName.split('.').pop().toLowerCase()
|
||||||
|
return ext
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取文件图标
|
||||||
|
*/
|
||||||
|
getFileIcon(fileType) {
|
||||||
|
const iconMap = {
|
||||||
|
'pdf': '📕',
|
||||||
|
'doc': '📘',
|
||||||
|
'docx': '📘',
|
||||||
|
'xls': '📗',
|
||||||
|
'xlsx': '📗',
|
||||||
|
'ppt': '📙',
|
||||||
|
'pptx': '📙',
|
||||||
|
'txt': '📄',
|
||||||
|
'zip': '📦',
|
||||||
|
'rar': '📦'
|
||||||
|
}
|
||||||
|
return iconMap[fileType] || '📄'
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 格式化文件大小
|
||||||
|
*/
|
||||||
|
formatFileSize(bytes) {
|
||||||
|
if (!bytes || bytes === 0) return '0 B'
|
||||||
|
if (typeof bytes === 'string') return bytes
|
||||||
|
|
||||||
|
const k = 1024
|
||||||
|
const sizes = ['B', 'KB', 'MB', 'GB']
|
||||||
|
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||||
|
return (bytes / Math.pow(k, i)).toFixed(2) + ' ' + sizes[i]
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 加载日程日期列表
|
||||||
|
*/
|
||||||
|
async loadScheduleDates(eventId) {
|
||||||
|
try {
|
||||||
|
const res = await infoAPI.getActivityScheduleList({ competitionId: eventId })
|
||||||
|
|
||||||
|
let list = []
|
||||||
|
if (res.records) {
|
||||||
|
list = res.records
|
||||||
|
} else if (Array.isArray(res)) {
|
||||||
|
list = res
|
||||||
|
}
|
||||||
|
|
||||||
|
if (list.length === 0) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 提取唯一日期
|
||||||
|
const dateSet = new Set()
|
||||||
|
list.forEach(item => {
|
||||||
|
const date = item.scheduleDate || item.schedule_date || item.date
|
||||||
|
if (date) {
|
||||||
|
dateSet.add(date)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 格式化日期选项卡并排序
|
||||||
|
this.dates = Array.from(dateSet)
|
||||||
|
.sort((a, b) => new Date(a) - new Date(b))
|
||||||
|
.map(date => {
|
||||||
|
const d = new Date(date)
|
||||||
|
const month = d.getMonth() + 1
|
||||||
|
const day = d.getDate()
|
||||||
|
const weekDay = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][d.getDay()]
|
||||||
|
|
||||||
|
return {
|
||||||
|
date: date,
|
||||||
|
day: `${month}月${day}日`,
|
||||||
|
text: weekDay
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 按日期分组日程
|
||||||
|
list.forEach(item => {
|
||||||
|
const date = item.scheduleDate || item.schedule_date || item.date
|
||||||
|
const dateIndex = this.dates.findIndex(d => d.date === date)
|
||||||
|
|
||||||
|
if (dateIndex >= 0) {
|
||||||
|
if (!this.schedules[dateIndex]) {
|
||||||
|
this.schedules[dateIndex] = []
|
||||||
|
}
|
||||||
|
|
||||||
|
this.schedules[dateIndex].push({
|
||||||
|
time: this.formatTime(item.scheduleTime || item.schedule_time || item.time),
|
||||||
|
timeRaw: item.scheduleTime || item.schedule_time || item.time,
|
||||||
|
title: item.eventName || item.event_name || item.title || item.activityName || item.scheduleName,
|
||||||
|
location: item.venue || item.location || ''
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 对每个日期内的日程按时间排序
|
||||||
|
Object.keys(this.schedules).forEach(dateIndex => {
|
||||||
|
this.schedules[dateIndex].sort((a, b) => {
|
||||||
|
const timeA = a.timeRaw || a.time
|
||||||
|
const timeB = b.timeRaw || b.time
|
||||||
|
return timeA.localeCompare(timeB)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
// 加载第一天的日程
|
||||||
|
if (this.dates.length > 0 && this.dates[0].date) {
|
||||||
|
this.loadScheduleByDate(eventId, this.dates[0].date)
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('加载日程日期失败:', err)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 加载指定日期的日程
|
||||||
|
*/
|
||||||
|
async loadScheduleByDate(eventId, date) {
|
||||||
|
try {
|
||||||
|
const res = await infoAPI.getScheduleList({ competitionId: eventId, date: date })
|
||||||
|
|
||||||
|
let list = []
|
||||||
|
if (res.records) {
|
||||||
|
list = res.records
|
||||||
|
} else if (Array.isArray(res)) {
|
||||||
|
list = res
|
||||||
|
}
|
||||||
|
|
||||||
|
const dateIndex = this.dates.findIndex(d => d.date === date)
|
||||||
|
if (dateIndex >= 0) {
|
||||||
|
this.schedules[dateIndex] = list
|
||||||
|
.map(item => ({
|
||||||
|
time: this.formatTime(item.scheduleTime || item.schedule_time || item.time),
|
||||||
|
timeRaw: item.scheduleTime || item.schedule_time || item.time,
|
||||||
|
title: item.eventName || item.event_name || item.title || item.activityName || item.scheduleName,
|
||||||
|
location: item.venue || item.location || ''
|
||||||
|
}))
|
||||||
|
.sort((a, b) => {
|
||||||
|
const timeA = a.timeRaw || a.time
|
||||||
|
const timeB = b.timeRaw || b.time
|
||||||
|
return timeA.localeCompare(timeB)
|
||||||
|
})
|
||||||
|
|
||||||
|
this.$forceUpdate()
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('加载日程详情失败:', err)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 格式化时间(只取时分)
|
||||||
|
*/
|
||||||
|
formatTime(timeStr) {
|
||||||
|
if (!timeStr) return ''
|
||||||
|
|
||||||
|
if (/^\d{2}:\d{2}$/.test(timeStr)) {
|
||||||
|
return timeStr
|
||||||
|
}
|
||||||
|
|
||||||
|
if (/^\d{2}:\d{2}:\d{2}$/.test(timeStr)) {
|
||||||
|
return timeStr.substring(0, 5)
|
||||||
|
}
|
||||||
|
|
||||||
|
const date = new Date(timeStr)
|
||||||
|
if (!isNaN(date.getTime())) {
|
||||||
|
const hours = String(date.getHours()).padStart(2, '0')
|
||||||
|
const minutes = String(date.getMinutes()).padStart(2, '0')
|
||||||
|
return `${hours}:${minutes}`
|
||||||
|
}
|
||||||
|
|
||||||
|
return timeStr
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.event-schedule-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 区块标题
|
||||||
|
.section-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
padding: 0 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-icon {
|
||||||
|
font-size: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-text {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 附件下载区
|
||||||
|
.attachments-section {
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.attachments-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.attachment-item {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 25rpx 30rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
transform: scale(0.98);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20rpx;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-icon {
|
||||||
|
font-size: 48rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-details {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8rpx;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-name {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: 500;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-size {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-btn {
|
||||||
|
width: 60rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
background-color: #C93639;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-icon {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-tabs {
|
||||||
|
background-color: #fff;
|
||||||
|
display: flex;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
gap: 20rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-tab {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
padding: 20rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-tab.active {
|
||||||
|
background-color: #C93639;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-day {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 5rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.schedule-timeline {
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-item {
|
||||||
|
display: flex;
|
||||||
|
gap: 20rpx;
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-dot {
|
||||||
|
width: 24rpx;
|
||||||
|
height: 24rpx;
|
||||||
|
background-color: #C93639;
|
||||||
|
border-radius: 50%;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-line {
|
||||||
|
position: absolute;
|
||||||
|
left: 11rpx;
|
||||||
|
top: 34rpx;
|
||||||
|
bottom: -40rpx;
|
||||||
|
width: 2rpx;
|
||||||
|
background-color: #E0E0E0;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.schedule-card {
|
||||||
|
flex: 1;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
padding: 25rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.schedule-time {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #C93639;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.schedule-title {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.schedule-location {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666666;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 5rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.location-icon {
|
||||||
|
font-size: 22rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 空状态
|
||||||
|
.empty-state {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 200rpx 0;
|
||||||
|
gap: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-icon {
|
||||||
|
font-size: 120rpx;
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
252
src/pages/event-score/event-score.vue
Normal file
@@ -0,0 +1,252 @@
|
|||||||
|
<template>
|
||||||
|
<view class="event-score-page">
|
||||||
|
<!-- 项目分类 -->
|
||||||
|
<view class="category-tabs">
|
||||||
|
<view
|
||||||
|
class="category-tab"
|
||||||
|
v-for="(category, index) in categories"
|
||||||
|
:key="index"
|
||||||
|
:class="{ active: currentCategory === index }"
|
||||||
|
@click="currentCategory = index"
|
||||||
|
>
|
||||||
|
{{ category.name }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 成绩列表 -->
|
||||||
|
<view class="score-list">
|
||||||
|
<view class="score-item" v-for="(item, index) in currentScores" :key="index">
|
||||||
|
<view class="rank-badge" :class="'rank-' + item.rank">
|
||||||
|
<text class="rank-number">{{ item.rank }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="player-info">
|
||||||
|
<view class="player-name">{{ item.name }}</view>
|
||||||
|
<view class="player-team">{{ item.team }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="score-info">
|
||||||
|
<view class="score-value">{{ item.score }}</view>
|
||||||
|
<view class="score-label">分</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 空状态 -->
|
||||||
|
<view class="empty-state" v-if="currentScores.length === 0">
|
||||||
|
<text class="empty-text">暂无成绩数据</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import resultAPI from '@/api/result.js'
|
||||||
|
import competitionAPI from '@/api/competition.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
eventId: '',
|
||||||
|
currentCategory: 0,
|
||||||
|
categories: [],
|
||||||
|
scores: {}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
currentScores() {
|
||||||
|
return this.scores[this.currentCategory] || [];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
if (options.eventId) {
|
||||||
|
this.eventId = options.eventId
|
||||||
|
this.loadCategories(options.eventId)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
currentCategory(newVal) {
|
||||||
|
if (this.categories[newVal] && this.categories[newVal].id) {
|
||||||
|
this.loadScoresByCategory(this.eventId, this.categories[newVal].id)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 加载项目分类
|
||||||
|
*/
|
||||||
|
async loadCategories(eventId) {
|
||||||
|
try {
|
||||||
|
const res = await competitionAPI.getProjectList({ competitionId: eventId })
|
||||||
|
|
||||||
|
let list = []
|
||||||
|
if (res.records) {
|
||||||
|
list = res.records
|
||||||
|
} else if (Array.isArray(res)) {
|
||||||
|
list = res
|
||||||
|
}
|
||||||
|
|
||||||
|
// 提取项目分类
|
||||||
|
this.categories = list.map(item => ({
|
||||||
|
id: item.id,
|
||||||
|
name: item.name || item.projectName
|
||||||
|
}))
|
||||||
|
|
||||||
|
// 加载第一个分类的成绩
|
||||||
|
if (this.categories.length > 0) {
|
||||||
|
this.loadScoresByCategory(eventId, this.categories[0].id)
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('加载项目分类失败:', err)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 加载指定分类的成绩
|
||||||
|
*/
|
||||||
|
async loadScoresByCategory(eventId, projectId) {
|
||||||
|
try {
|
||||||
|
const res = await resultAPI.getResultList(eventId, { projectId })
|
||||||
|
|
||||||
|
let list = []
|
||||||
|
if (res.records) {
|
||||||
|
list = res.records
|
||||||
|
} else if (Array.isArray(res)) {
|
||||||
|
list = res
|
||||||
|
}
|
||||||
|
|
||||||
|
const categoryIndex = this.currentCategory
|
||||||
|
this.scores[categoryIndex] = list.map((item, index) => ({
|
||||||
|
rank: item.rank || item.ranking || (index + 1),
|
||||||
|
name: item.athleteName || item.name,
|
||||||
|
team: item.teamName || item.team,
|
||||||
|
score: item.score || item.finalScore || '0.00'
|
||||||
|
}))
|
||||||
|
|
||||||
|
// 触发视图更新
|
||||||
|
this.$forceUpdate()
|
||||||
|
} catch (err) {
|
||||||
|
console.error('加载成绩失败:', err)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.event-score-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-tabs {
|
||||||
|
background-color: #fff;
|
||||||
|
display: flex;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
gap: 15rpx;
|
||||||
|
overflow-x: auto;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-tab {
|
||||||
|
padding: 15rpx 30rpx;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666666;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
white-space: nowrap;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-tab.active {
|
||||||
|
background-color: #C93639;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score-list {
|
||||||
|
padding: 0 30rpx 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score-item {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 25rpx 30rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 25rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rank-badge {
|
||||||
|
width: 70rpx;
|
||||||
|
height: 70rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rank-badge.rank-1 {
|
||||||
|
background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.rank-badge.rank-2 {
|
||||||
|
background: linear-gradient(135deg, #C0C0C0 0%, #A8A8A8 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.rank-badge.rank-3 {
|
||||||
|
background: linear-gradient(135deg, #CD7F32 0%, #B87333 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.rank-badge:not(.rank-1):not(.rank-2):not(.rank-3) {
|
||||||
|
background-color: #E0E0E0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rank-number {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-info {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-name {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-team {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 5rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score-value {
|
||||||
|
font-size: 40rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #C93639;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score-label {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state {
|
||||||
|
padding: 200rpx 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
359
src/pages/home/home.vue
Normal file
@@ -0,0 +1,359 @@
|
|||||||
|
<template>
|
||||||
|
<view class="home-page">
|
||||||
|
<!-- 轮播图 -->
|
||||||
|
<view class="banner-section">
|
||||||
|
<swiper class="banner-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500" circular>
|
||||||
|
<swiper-item v-for="(banner, index) in banners" :key="index">
|
||||||
|
<image class="banner-image" :src="banner" mode="aspectFill"></image>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 精品赛事 -->
|
||||||
|
<view class="section">
|
||||||
|
<view class="section-header">
|
||||||
|
<view class="section-title">
|
||||||
|
<text class="bookmark-icon">📋</text>
|
||||||
|
<text class="title-text">精品赛事</text>
|
||||||
|
</view>
|
||||||
|
<view class="more-btn" @click="goToEventList">
|
||||||
|
<text>更多</text>
|
||||||
|
<text class="arrow">›</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 赛事列表 -->
|
||||||
|
<view class="event-list">
|
||||||
|
<view class="event-item" v-for="(item, index) in eventList" :key="index" @click="goToEventDetail(item)">
|
||||||
|
<view class="event-title">{{ item.title }}</view>
|
||||||
|
<view class="event-info">
|
||||||
|
<text class="info-text">地点:{{ item.location }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="event-info">
|
||||||
|
<text class="info-text">报名时间:{{ item.registerTime }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="event-info">
|
||||||
|
<text class="info-text">比赛时间:{{ item.matchTime }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="event-info">
|
||||||
|
<text class="info-text">报名人数:{{ item.registerCount }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="event-footer">
|
||||||
|
<button class="register-btn" @click.stop="goToRegister(item)">
|
||||||
|
{{ item.status === 'finished' ? '报名已结束' : '立即报名' }}
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
|
<view class="registered-overlay" v-if="item.status === 'finished'">
|
||||||
|
<text class="status-text">报名已结束</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import competitionAPI from '@/api/competition.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
banners: [],
|
||||||
|
eventList: []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.loadBanners()
|
||||||
|
this.loadEvents()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 加载轮播图
|
||||||
|
*/
|
||||||
|
async loadBanners() {
|
||||||
|
try {
|
||||||
|
const res = await competitionAPI.getBannerList({
|
||||||
|
current: 1,
|
||||||
|
size: 5
|
||||||
|
})
|
||||||
|
|
||||||
|
// 如果后端返回的是分页数据
|
||||||
|
if (res.records) {
|
||||||
|
this.banners = res.records.map(item => item.imageUrl || item.image || item.url)
|
||||||
|
} else if (Array.isArray(res)) {
|
||||||
|
this.banners = res.map(item => item.imageUrl || item.image || item.url)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果没有数据,使用默认轮播图
|
||||||
|
if (this.banners.length === 0) {
|
||||||
|
this.banners = [
|
||||||
|
'/static/images/bananer1.png',
|
||||||
|
'/static/images/bananer2.png'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('加载轮播图失败:', err)
|
||||||
|
// 使用默认轮播图
|
||||||
|
this.banners = [
|
||||||
|
'/static/images/bananer1.png',
|
||||||
|
'/static/images/bananer2.png'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 加载精品赛事
|
||||||
|
*/
|
||||||
|
async loadEvents() {
|
||||||
|
try {
|
||||||
|
const res = await competitionAPI.getCompetitionList({
|
||||||
|
current: 1,
|
||||||
|
size: 10
|
||||||
|
})
|
||||||
|
|
||||||
|
console.log('赛事列表API返回:', res)
|
||||||
|
|
||||||
|
// 如果后端返回的是分页数据
|
||||||
|
let list = []
|
||||||
|
if (res.records) {
|
||||||
|
list = res.records
|
||||||
|
} else if (Array.isArray(res)) {
|
||||||
|
list = res
|
||||||
|
}
|
||||||
|
|
||||||
|
// 数据映射:将后端字段转换为前端需要的字段
|
||||||
|
this.eventList = list.map(item => {
|
||||||
|
// 尝试多个可能的时间字段
|
||||||
|
const regStartTime = item.registrationStartTime || item.registerStartTime || item.signUpStartTime
|
||||||
|
const regEndTime = item.registrationEndTime || item.registerEndTime || item.signUpEndTime
|
||||||
|
const startTime = item.startTime || item.competitionStartTime || item.beginTime
|
||||||
|
const endTime = item.endTime || item.competitionEndTime || item.finishTime
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: item.id,
|
||||||
|
title: item.name || item.title || item.competitionName || '未命名赛事',
|
||||||
|
location: item.location || item.address || item.venue || '待定',
|
||||||
|
registerTime: this.formatTimeRange(regStartTime, regEndTime) ||
|
||||||
|
item.registerTime || item.registrationPeriod || '待定',
|
||||||
|
matchTime: this.formatTimeRange(startTime, endTime) ||
|
||||||
|
item.matchTime || item.competitionTime || '待定',
|
||||||
|
registerCount: item.registrationCount || item.registerCount || item.signUpCount || item.totalParticipants || '0',
|
||||||
|
status: this.getStatus(item.status, regEndTime, endTime)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
console.log('格式化后的赛事列表:', this.eventList)
|
||||||
|
} catch (err) {
|
||||||
|
console.error('加载赛事列表失败:', err)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 格式化时间范围
|
||||||
|
* @param {String} startTime 开始时间
|
||||||
|
* @param {String} endTime 结束时间
|
||||||
|
* @returns {String}
|
||||||
|
*/
|
||||||
|
formatTimeRange(startTime, endTime) {
|
||||||
|
if (!startTime || !endTime) return ''
|
||||||
|
|
||||||
|
const formatDate = (dateStr) => {
|
||||||
|
if (!dateStr) return ''
|
||||||
|
const date = new Date(dateStr)
|
||||||
|
const year = date.getFullYear()
|
||||||
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||||
|
const day = String(date.getDate()).padStart(2, '0')
|
||||||
|
return `${year}.${month}.${day}`
|
||||||
|
}
|
||||||
|
|
||||||
|
return `${formatDate(startTime)}-${formatDate(endTime)}`
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取赛事状态
|
||||||
|
* @param {Number|String} status 状态码
|
||||||
|
* @returns {String}
|
||||||
|
*/
|
||||||
|
getStatus(status, regEndTime, competitionEndTime) {
|
||||||
|
// 根据后端状态码映射为前端需要的状态
|
||||||
|
// 1: 报名中, 2: 进行中, 3: 已结束
|
||||||
|
if (status === 3 || status === '3' || status === 'finished') {
|
||||||
|
return 'finished'
|
||||||
|
}
|
||||||
|
// 根据比赛结束时间判断是否已结束
|
||||||
|
if (competitionEndTime) {
|
||||||
|
const compEndDate = new Date(competitionEndTime)
|
||||||
|
const now = new Date()
|
||||||
|
if (now > compEndDate) {
|
||||||
|
return 'finished'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 根据报名结束时间判断是否已结束
|
||||||
|
if (regEndTime) {
|
||||||
|
const endDate = new Date(regEndTime)
|
||||||
|
const now = new Date()
|
||||||
|
if (now > endDate) {
|
||||||
|
return 'finished'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return 'open'
|
||||||
|
},
|
||||||
|
|
||||||
|
goToEventList() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/event-list/event-list'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
goToEventDetail(item) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/event-detail/event-detail?id=' + item.id
|
||||||
|
});
|
||||||
|
},
|
||||||
|
goToRegister(item) {
|
||||||
|
if (item.status === 'open') {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/register-type/register-type?id=' + item.id
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
goToProfile() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/profile/profile'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
goToMyRegistration() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/my-registration/my-registration'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.home-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
padding-bottom: 100rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-section {
|
||||||
|
background: linear-gradient(180deg, #C93639 0%, #f5f5f5 100%);
|
||||||
|
padding: 30rpx 30rpx 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-swiper {
|
||||||
|
width: 100%;
|
||||||
|
height: 340rpx;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
padding: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bookmark-icon {
|
||||||
|
font-size: 36rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-text {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-btn {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
font-size: 36rpx;
|
||||||
|
margin-left: 5rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-item {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-info {
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-text {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-footer {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-btn {
|
||||||
|
background-color: #C93639;
|
||||||
|
color: #fff;
|
||||||
|
padding: 10rpx 30rpx;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.registered-overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(255, 255, 255, 0.9);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-text {
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
501
src/pages/login/login.vue
Normal file
@@ -0,0 +1,501 @@
|
|||||||
|
<template>
|
||||||
|
<view class="login-page">
|
||||||
|
<!-- 背景装饰 -->
|
||||||
|
<view class="bg-decoration">
|
||||||
|
<view class="circle circle-1"></view>
|
||||||
|
<view class="circle circle-2"></view>
|
||||||
|
<view class="circle circle-3"></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 顶部Logo区域 -->
|
||||||
|
<view class="login-header">
|
||||||
|
<view class="logo-container">
|
||||||
|
<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
|
||||||
|
</view>
|
||||||
|
<text class="title">武术赛事管理系统</text>
|
||||||
|
<text class="subtitle">MARTIAL ARTS COMPETITION</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 登录表单 -->
|
||||||
|
<view class="login-form">
|
||||||
|
<view class="form-title">账号登录</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="input-wrapper">
|
||||||
|
<view class="input-icon">📱</view>
|
||||||
|
<input
|
||||||
|
class="form-input"
|
||||||
|
v-model="form.username"
|
||||||
|
placeholder="请输入手机号或用户名"
|
||||||
|
placeholder-class="placeholder"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="input-wrapper">
|
||||||
|
<view class="input-icon">🔒</view>
|
||||||
|
<input
|
||||||
|
class="form-input"
|
||||||
|
v-model="form.password"
|
||||||
|
:password="!showPassword"
|
||||||
|
placeholder="请输入密码"
|
||||||
|
placeholder-class="placeholder"
|
||||||
|
/>
|
||||||
|
<view class="eye-icon" @click="showPassword = !showPassword">
|
||||||
|
<text>{{ showPassword ? '👁️' : '👁️🗨️' }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-options">
|
||||||
|
<label class="checkbox-label" @click="rememberPassword = !rememberPassword">
|
||||||
|
<view :class="['checkbox', rememberPassword ? 'checked' : '']">
|
||||||
|
<text v-if="rememberPassword" class="check-icon">✓</text>
|
||||||
|
</view>
|
||||||
|
<text class="checkbox-text">记住密码</text>
|
||||||
|
</label>
|
||||||
|
<text class="forgot-password" @click="handleForgotPassword">忘记密码?</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<button class="login-btn" @click="handleLogin" :loading="loading" :disabled="loading">
|
||||||
|
<text class="btn-text">{{ loading ? '登录中...' : '立即登录' }}</text>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<view class="register-link">
|
||||||
|
还没有账号?<text class="link-text" @click="goToRegister">立即注册</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 底部装饰 -->
|
||||||
|
<view class="footer-decoration">
|
||||||
|
<view class="wave"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import userAPI from '@/api/user.js'
|
||||||
|
import { setToken, setRefreshToken, setUserInfo } from '@/utils/auth.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
form: {
|
||||||
|
username: '',
|
||||||
|
password: ''
|
||||||
|
},
|
||||||
|
showPassword: false,
|
||||||
|
rememberPassword: false,
|
||||||
|
loading: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
// 读取记住的密码
|
||||||
|
const savedUsername = uni.getStorageSync('saved_username')
|
||||||
|
const savedPassword = uni.getStorageSync('saved_password')
|
||||||
|
if (savedUsername && savedPassword) {
|
||||||
|
this.form.username = savedUsername
|
||||||
|
this.form.password = savedPassword
|
||||||
|
this.rememberPassword = true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async handleLogin() {
|
||||||
|
// 表单验证
|
||||||
|
if (!this.form.username) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请输入手机号或用户名',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this.form.password) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请输入密码',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
this.loading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 调用登录接口
|
||||||
|
const res = await userAPI.login(this.form)
|
||||||
|
|
||||||
|
// 保存Token
|
||||||
|
setToken(res.access_token)
|
||||||
|
setRefreshToken(res.refresh_token)
|
||||||
|
|
||||||
|
// 保存用户信息
|
||||||
|
const userInfo = {
|
||||||
|
userId: res.user_id,
|
||||||
|
account: res.account,
|
||||||
|
userName: res.user_name,
|
||||||
|
avatar: res.avatar,
|
||||||
|
tenantId: res.tenant_id
|
||||||
|
}
|
||||||
|
setUserInfo(userInfo)
|
||||||
|
|
||||||
|
// 记住密码
|
||||||
|
if (this.rememberPassword) {
|
||||||
|
uni.setStorageSync('saved_username', this.form.username)
|
||||||
|
uni.setStorageSync('saved_password', this.form.password)
|
||||||
|
} else {
|
||||||
|
uni.removeStorageSync('saved_username')
|
||||||
|
uni.removeStorageSync('saved_password')
|
||||||
|
}
|
||||||
|
|
||||||
|
uni.showToast({
|
||||||
|
title: '登录成功',
|
||||||
|
icon: 'success'
|
||||||
|
})
|
||||||
|
|
||||||
|
// 跳转到首页
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.switchTab({
|
||||||
|
url: '/pages/home/home'
|
||||||
|
})
|
||||||
|
}, 1500)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('登录失败:', error)
|
||||||
|
uni.showToast({
|
||||||
|
title: error.message || '登录失败',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
} finally {
|
||||||
|
this.loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleForgotPassword() {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请联系管理员重置密码',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
goToRegister() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/register/register'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.login-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: linear-gradient(135deg, #C93639 0%, #A82E31 50%, #8B1F22 100%);
|
||||||
|
padding: 0;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 背景装饰圆圈 */
|
||||||
|
.bg-decoration {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(255, 255, 255, 0.08);
|
||||||
|
animation: float 6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle-1 {
|
||||||
|
width: 300rpx;
|
||||||
|
height: 300rpx;
|
||||||
|
top: -100rpx;
|
||||||
|
right: -50rpx;
|
||||||
|
animation-delay: 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle-2 {
|
||||||
|
width: 200rpx;
|
||||||
|
height: 200rpx;
|
||||||
|
bottom: 100rpx;
|
||||||
|
left: -50rpx;
|
||||||
|
animation-delay: 2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle-3 {
|
||||||
|
width: 150rpx;
|
||||||
|
height: 150rpx;
|
||||||
|
top: 40%;
|
||||||
|
right: 50rpx;
|
||||||
|
animation-delay: 4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% {
|
||||||
|
transform: translateY(0) scale(1);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(-30rpx) scale(1.05);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 顶部Logo区域 */
|
||||||
|
.login-header {
|
||||||
|
text-align: center;
|
||||||
|
padding: 120rpx 60rpx 80rpx;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-container {
|
||||||
|
width: 180rpx;
|
||||||
|
height: 180rpx;
|
||||||
|
margin: 0 auto 40rpx;
|
||||||
|
background: rgba(255, 255, 255, 0.15);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
backdrop-filter: blur(10rpx);
|
||||||
|
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
width: 140rpx;
|
||||||
|
height: 140rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 48rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #fff;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
letter-spacing: 4rpx;
|
||||||
|
text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: rgba(255, 255, 255, 0.85);
|
||||||
|
letter-spacing: 2rpx;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 登录表单 */
|
||||||
|
.login-form {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 40rpx 40rpx 0 0;
|
||||||
|
padding: 60rpx 50rpx 80rpx;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.08);
|
||||||
|
min-height: calc(100vh - 480rpx);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-title {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 50rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item {
|
||||||
|
margin-bottom: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-wrapper {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background: #F7F8FA;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
border: 2rpx solid transparent;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-wrapper:focus-within {
|
||||||
|
background: #fff;
|
||||||
|
border-color: #C93639;
|
||||||
|
box-shadow: 0 4rpx 16rpx rgba(201, 54, 57, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-icon {
|
||||||
|
width: 80rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 36rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input {
|
||||||
|
flex: 1;
|
||||||
|
height: 96rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
padding-right: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.placeholder {
|
||||||
|
color: #999;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eye-icon {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 96rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 36rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eye-icon:active {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 表单选项 */
|
||||||
|
.form-options {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin: 40rpx 0 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-label {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox {
|
||||||
|
width: 36rpx;
|
||||||
|
height: 36rpx;
|
||||||
|
border: 2rpx solid #ddd;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-right: 12rpx;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox.checked {
|
||||||
|
background: #C93639;
|
||||||
|
border-color: #C93639;
|
||||||
|
}
|
||||||
|
|
||||||
|
.check-icon {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-text {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.forgot-password {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #C93639;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.forgot-password:active {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 登录按钮 */
|
||||||
|
.login-btn {
|
||||||
|
width: 100%;
|
||||||
|
height: 96rpx;
|
||||||
|
background: linear-gradient(135deg, #C93639 0%, #A82E31 100%);
|
||||||
|
border-radius: 16rpx;
|
||||||
|
border: none;
|
||||||
|
box-shadow: 0 8rpx 24rpx rgba(201, 54, 57, 0.3);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-btn::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: -100%;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||||
|
transition: left 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-btn:active {
|
||||||
|
transform: scale(0.98);
|
||||||
|
box-shadow: 0 4rpx 16rpx rgba(201, 54, 57, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-btn:active::before {
|
||||||
|
left: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-text {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #fff;
|
||||||
|
letter-spacing: 2rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 注册链接 */
|
||||||
|
.register-link {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 50rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-text {
|
||||||
|
color: #C93639;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-left: 8rpx;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-text:active {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 底部装饰 */
|
||||||
|
.footer-decoration {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100rpx;
|
||||||
|
z-index: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wave {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.05) 100%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
555
src/pages/my-registration/my-registration.vue
Normal file
@@ -0,0 +1,555 @@
|
|||||||
|
<template>
|
||||||
|
<view class="my-registration-page">
|
||||||
|
<!-- Tab切换 -->
|
||||||
|
<custom-tabs :tabs="tabs" :current="currentTab" @change="handleTabChange"></custom-tabs>
|
||||||
|
|
||||||
|
<!-- 赛事列表 -->
|
||||||
|
<view class="event-list">
|
||||||
|
<view
|
||||||
|
class="event-item"
|
||||||
|
v-for="(item, index) in filteredList"
|
||||||
|
:key="index"
|
||||||
|
@click="goToEventDetail(item)"
|
||||||
|
>
|
||||||
|
<view class="status-tag" :class="getStatusClass(item.status)">
|
||||||
|
<text>{{ getStatusText(item.status) }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="event-title">{{ item.title }}</view>
|
||||||
|
|
||||||
|
<view class="event-info">
|
||||||
|
<text class="label">地点:</text>
|
||||||
|
<text class="value location-text">{{ item.location || "暂无" }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="event-info">
|
||||||
|
<text class="label">比赛时间:</text>
|
||||||
|
<text class="value">{{ item.matchTime || "暂无" }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="event-info">
|
||||||
|
<text class="label">报名项目:</text>
|
||||||
|
<text class="value">{{ item.projects || "暂无" }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="event-info">
|
||||||
|
<text class="label">联系人:</text>
|
||||||
|
<text class="value">{{ item.contact || "暂无" }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="event-info">
|
||||||
|
<text class="label">参赛选手:</text>
|
||||||
|
<text class="value participants">{{ item.participants }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="event-footer">
|
||||||
|
<view class="register-note" v-if="item.status === 'ongoing'">
|
||||||
|
<text>点击后进入【赛事详情】页面</text>
|
||||||
|
</view>
|
||||||
|
<view class="view-cert-btn" @click.stop="handleViewCert(item)">
|
||||||
|
<text>查看证件</text>
|
||||||
|
<text class="arrow">›</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 空状态 -->
|
||||||
|
<view class="empty-state" v-if="filteredList.length === 0">
|
||||||
|
<text class="empty-text">暂无报名记录</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 证件弹窗 -->
|
||||||
|
<view class="cert-modal" v-if="showCertModal" @click="closeCertModal">
|
||||||
|
<view class="cert-modal-content" @click.stop>
|
||||||
|
<view class="cert-modal-header">
|
||||||
|
<text class="cert-modal-title">参赛选手证件</text>
|
||||||
|
<text class="cert-close-icon" @click="closeCertModal">✕</text>
|
||||||
|
</view>
|
||||||
|
<scroll-view class="cert-modal-body" scroll-y>
|
||||||
|
<view class="cert-athlete-item" v-for="(athlete, index) in certAthleteList" :key="index">
|
||||||
|
<view class="cert-athlete-name">{{ athlete.playerName }}</view>
|
||||||
|
<view class="cert-athlete-info">性别:{{ athlete.gender === 1 ? '男' : '女' }}</view>
|
||||||
|
<view class="cert-athlete-info">身份证:{{ athlete.idCard || '暂无' }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="cert-empty" v-if="certAthleteList.length === 0">
|
||||||
|
<text>暂无选手信息</text>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import CustomTabs from '../../components/custom-tabs/custom-tabs.vue';
|
||||||
|
import registrationAPI from '@/api/registration.js'
|
||||||
|
import competitionAPI from '@/api/competition.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
CustomTabs
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tabs: ['全部', '待开始', '进行中', '已结束'],
|
||||||
|
currentTab: 0,
|
||||||
|
eventList: [],
|
||||||
|
// 分页参数
|
||||||
|
pageParams: {
|
||||||
|
current: 1,
|
||||||
|
size: 20
|
||||||
|
},
|
||||||
|
hasMore: true,
|
||||||
|
showCertModal: false,
|
||||||
|
certAthleteList: []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.loadRegistrationList()
|
||||||
|
},
|
||||||
|
// 下拉刷新
|
||||||
|
onPullDownRefresh() {
|
||||||
|
this.pageParams.current = 1
|
||||||
|
this.loadRegistrationList(true)
|
||||||
|
},
|
||||||
|
// 上拉加载更多
|
||||||
|
onReachBottom() {
|
||||||
|
if (this.hasMore) {
|
||||||
|
this.pageParams.current++
|
||||||
|
this.loadRegistrationList(false, true)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
filteredList() {
|
||||||
|
if (this.currentTab === 0) {
|
||||||
|
return this.eventList;
|
||||||
|
}
|
||||||
|
const statusMap = {
|
||||||
|
1: 'pending',
|
||||||
|
2: 'ongoing',
|
||||||
|
3: 'finished'
|
||||||
|
};
|
||||||
|
return this.eventList.filter(item => item.status === statusMap[this.currentTab]);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 加载我的报名列表
|
||||||
|
* @param {Boolean} refresh 是否刷新(重置列表)
|
||||||
|
* @param {Boolean} loadMore 是否加载更多(追加列表)
|
||||||
|
*/
|
||||||
|
async loadRegistrationList(refresh = false, loadMore = false) {
|
||||||
|
try {
|
||||||
|
const params = {
|
||||||
|
current: this.pageParams.current,
|
||||||
|
size: this.pageParams.size
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加状态筛选
|
||||||
|
if (this.currentTab > 0) {
|
||||||
|
params.status = this.currentTab
|
||||||
|
}
|
||||||
|
|
||||||
|
const res = await registrationAPI.getRegistrationList(params)
|
||||||
|
|
||||||
|
console.log('=== 我的报名列表 ===', res)
|
||||||
|
|
||||||
|
let list = []
|
||||||
|
let total = 0
|
||||||
|
|
||||||
|
// 处理分页数据
|
||||||
|
if (res.records) {
|
||||||
|
list = res.records
|
||||||
|
total = res.total || 0
|
||||||
|
} else if (Array.isArray(res)) {
|
||||||
|
list = res
|
||||||
|
total = res.length
|
||||||
|
}
|
||||||
|
|
||||||
|
// 优化:先收集所有不重复的赛事ID,批量获取赛事信息(使用缓存)
|
||||||
|
const competitionIds = [...new Set(list.map(item => item.competitionId).filter(Boolean))]
|
||||||
|
const competitionMap = await this.batchGetCompetitionInfo(competitionIds)
|
||||||
|
|
||||||
|
// 映射数据(不再单独请求赛事详情)
|
||||||
|
const mappedList = list.map(item => this.mapRegistrationItem(item, competitionMap))
|
||||||
|
|
||||||
|
// 刷新或加载更多
|
||||||
|
if (refresh || !loadMore) {
|
||||||
|
this.eventList = mappedList
|
||||||
|
} else {
|
||||||
|
this.eventList = [...this.eventList, ...mappedList]
|
||||||
|
}
|
||||||
|
|
||||||
|
// 判断是否还有更多数据
|
||||||
|
this.hasMore = this.eventList.length < total
|
||||||
|
|
||||||
|
// 停止下拉刷新
|
||||||
|
if (refresh) {
|
||||||
|
uni.stopPullDownRefresh()
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('加载报名列表失败:', err)
|
||||||
|
uni.stopPullDownRefresh()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 批量获取赛事信息(带缓存,避免重复请求)
|
||||||
|
* @param {Array} competitionIds 赛事ID数组
|
||||||
|
* @returns {Promise<Object>} 赛事信息Map {id: info}
|
||||||
|
*/
|
||||||
|
async batchGetCompetitionInfo(competitionIds) {
|
||||||
|
const competitionMap = {}
|
||||||
|
|
||||||
|
// 初始化缓存
|
||||||
|
if (!this.competitionCache) {
|
||||||
|
this.competitionCache = {}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 过滤出未缓存的赛事ID
|
||||||
|
const uncachedIds = competitionIds.filter(id => !this.competitionCache[id])
|
||||||
|
|
||||||
|
// 只请求未缓存的赛事(去重后通常只有1-2个)
|
||||||
|
if (uncachedIds.length > 0) {
|
||||||
|
console.log('需要请求的赛事ID(去重后):', uncachedIds)
|
||||||
|
|
||||||
|
// 并行请求所有未缓存的赛事详情
|
||||||
|
const promises = uncachedIds.map(async (id) => {
|
||||||
|
try {
|
||||||
|
const info = await competitionAPI.getCompetitionDetail(id)
|
||||||
|
this.competitionCache[id] = info
|
||||||
|
} catch (err) {
|
||||||
|
console.error('获取赛事详情失败:', id, err)
|
||||||
|
this.competitionCache[id] = null
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
await Promise.all(promises)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 从缓存中获取所有赛事信息
|
||||||
|
competitionIds.forEach(id => {
|
||||||
|
competitionMap[id] = this.competitionCache[id] || null
|
||||||
|
})
|
||||||
|
|
||||||
|
return competitionMap
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 映射单条报名记录(使用已缓存的赛事信息)
|
||||||
|
* @param {Object} item 订单信息
|
||||||
|
* @param {Object} competitionMap 赛事信息Map
|
||||||
|
* @returns {Object} 映射后的数据
|
||||||
|
*/
|
||||||
|
mapRegistrationItem(item, competitionMap) {
|
||||||
|
const competitionInfo = competitionMap[item.competitionId] || {}
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: item.id,
|
||||||
|
competitionId: item.competitionId,
|
||||||
|
status: this.getStatus(item.status),
|
||||||
|
title: competitionInfo.competitionName || competitionInfo.name || item.competitionName || '未知赛事',
|
||||||
|
location: competitionInfo.location || competitionInfo.address || item.location || '',
|
||||||
|
matchTime: this.formatTimeRange(
|
||||||
|
competitionInfo.competitionStartTime || competitionInfo.startTime,
|
||||||
|
competitionInfo.competitionEndTime || competitionInfo.endTime
|
||||||
|
) || '',
|
||||||
|
projects: item.projectNames || this.formatProjects(item.projects) || '',
|
||||||
|
contact: item.contactPhone || item.contactPerson || '',
|
||||||
|
participants: item.athleteNames || `${item.totalParticipants || 0}人`,
|
||||||
|
athleteList: item.athleteList || []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 格式化时间范围
|
||||||
|
*/
|
||||||
|
formatTimeRange(startTime, endTime) {
|
||||||
|
if (!startTime || !endTime) return ''
|
||||||
|
|
||||||
|
const formatDate = (dateStr) => {
|
||||||
|
if (!dateStr) return ''
|
||||||
|
const date = new Date(dateStr)
|
||||||
|
const year = date.getFullYear()
|
||||||
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||||
|
const day = String(date.getDate()).padStart(2, '0')
|
||||||
|
return `${year}.${month}.${day}`
|
||||||
|
}
|
||||||
|
|
||||||
|
return `${formatDate(startTime)}-${formatDate(endTime)}`
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取报名状态
|
||||||
|
*/
|
||||||
|
getStatus(status) {
|
||||||
|
// 1: 待开始, 2: 进行中, 3: 已结束
|
||||||
|
const statusMap = {
|
||||||
|
1: 'pending',
|
||||||
|
2: 'ongoing',
|
||||||
|
3: 'finished',
|
||||||
|
'pending': 'pending',
|
||||||
|
'ongoing': 'ongoing',
|
||||||
|
'finished': 'finished'
|
||||||
|
}
|
||||||
|
return statusMap[status] || 'pending'
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 格式化报名项目
|
||||||
|
*/
|
||||||
|
formatProjects(projects) {
|
||||||
|
if (!projects) return ''
|
||||||
|
if (Array.isArray(projects)) {
|
||||||
|
return projects.map(p => p.name || p.projectName).join('、')
|
||||||
|
}
|
||||||
|
return projects
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 格式化参赛选手
|
||||||
|
*/
|
||||||
|
formatParticipants(athletes) {
|
||||||
|
if (!athletes) return ''
|
||||||
|
if (Array.isArray(athletes)) {
|
||||||
|
return athletes.map(a => a.name || a.athleteName).join('、')
|
||||||
|
}
|
||||||
|
return athletes
|
||||||
|
},
|
||||||
|
|
||||||
|
handleTabChange(index) {
|
||||||
|
this.currentTab = index;
|
||||||
|
// 切换tab时重新加载
|
||||||
|
this.pageParams.current = 1
|
||||||
|
this.loadRegistrationList(true)
|
||||||
|
},
|
||||||
|
getStatusClass(status) {
|
||||||
|
return {
|
||||||
|
'status-ongoing': status === 'ongoing',
|
||||||
|
'status-pending': status === 'pending',
|
||||||
|
'status-finished': status === 'finished'
|
||||||
|
};
|
||||||
|
},
|
||||||
|
getStatusText(status) {
|
||||||
|
const statusMap = {
|
||||||
|
ongoing: '进行中',
|
||||||
|
pending: '待开始',
|
||||||
|
finished: '已结束'
|
||||||
|
};
|
||||||
|
return statusMap[status] || '';
|
||||||
|
},
|
||||||
|
goToEventDetail(item) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/event-detail/event-detail?id=' + item.competitionId
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleViewCert(item) {
|
||||||
|
// Get athlete list from the item
|
||||||
|
if (item.athleteList && item.athleteList.length > 0) {
|
||||||
|
this.certAthleteList = item.athleteList;
|
||||||
|
this.showCertModal = true;
|
||||||
|
} else {
|
||||||
|
uni.showToast({
|
||||||
|
title: '暂无选手证件信息',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
closeCertModal() {
|
||||||
|
this.showCertModal = false;
|
||||||
|
this.certAthleteList = [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.my-registration-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-list {
|
||||||
|
padding: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-item {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-tag {
|
||||||
|
position: absolute;
|
||||||
|
top: 30rpx;
|
||||||
|
left: 30rpx;
|
||||||
|
padding: 8rpx 20rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-ongoing {
|
||||||
|
background-color: #4CAF50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-pending {
|
||||||
|
background-color: #FF9800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-finished {
|
||||||
|
background-color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
margin: 50rpx 0 20rpx;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-info {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666666;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666666;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.location-text {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
display: block;
|
||||||
|
max-width: 480rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.participants {
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-footer {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
padding-top: 20rpx;
|
||||||
|
border-top: 1rpx solid #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-note {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #C93639;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view-cert-btn {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10rpx 20rpx;
|
||||||
|
border: 2rpx solid #C93639;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #C93639;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
font-size: 28rpx;
|
||||||
|
margin-left: 5rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state {
|
||||||
|
padding: 200rpx 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Cert Modal Styles */
|
||||||
|
.cert-modal {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cert-modal-content {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
width: 85%;
|
||||||
|
max-height: 70vh;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cert-modal-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 30rpx;
|
||||||
|
border-bottom: 1rpx solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cert-modal-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cert-close-icon {
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #999;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cert-modal-body {
|
||||||
|
max-height: 50vh;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cert-athlete-item {
|
||||||
|
padding: 20rpx;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cert-athlete-name {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cert-athlete-info {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 6rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cert-empty {
|
||||||
|
text-align: center;
|
||||||
|
padding: 40rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
302
src/pages/profile/profile.vue
Normal file
@@ -0,0 +1,302 @@
|
|||||||
|
<template>
|
||||||
|
<view class="profile-page">
|
||||||
|
<!-- 用户信息区域 -->
|
||||||
|
<view class="user-section">
|
||||||
|
<view class="user-info">
|
||||||
|
<view class="avatar">
|
||||||
|
<view class="avatar-circle"></view>
|
||||||
|
</view>
|
||||||
|
<view class="user-detail">
|
||||||
|
<view class="user-name">{{ userInfo.name || '用户' }}</view>
|
||||||
|
<view class="user-id">ID: {{ userInfo.id }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 我的报名卡片 -->
|
||||||
|
<view class="my-registration-card" @click="goToMyRegistration">
|
||||||
|
<image class="card-icon-img" src="/static/images/我的报名@3x.png" mode="aspectFit"></image>
|
||||||
|
<view class="card-text">我的报名</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 菜单列表 -->
|
||||||
|
<view class="menu-list">
|
||||||
|
<view class="menu-item" @click="goToCommonInfo">
|
||||||
|
<text class="menu-text">常用信息</text>
|
||||||
|
<text class="arrow">›</text>
|
||||||
|
</view>
|
||||||
|
<view class="menu-item" @click="handleChangePassword">
|
||||||
|
<text class="menu-text">修改密码</text>
|
||||||
|
<text class="arrow">›</text>
|
||||||
|
</view>
|
||||||
|
<view class="menu-item" @click="handleContactUs">
|
||||||
|
<text class="menu-text">联系我们</text>
|
||||||
|
<text class="arrow">›</text>
|
||||||
|
</view>
|
||||||
|
<view class="menu-item" @click="handleLogout">
|
||||||
|
<text class="menu-text">退出登录</text>
|
||||||
|
<text class="arrow">›</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 版本号 -->
|
||||||
|
<view class="version">版本号: V 2.0</view>
|
||||||
|
|
||||||
|
<!-- 占位,避免tabbar遮挡 -->
|
||||||
|
<view style="height: 100rpx;"></view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import userAPI from '@/api/user.js'
|
||||||
|
import { getUserInfo as getStoredUserInfo, isLogin, clearAuth } from '@/utils/auth.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
userInfo: {
|
||||||
|
name: '',
|
||||||
|
id: '',
|
||||||
|
phone: '',
|
||||||
|
username: ''
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.checkLoginAndLoadInfo()
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
// 每次显示时刷新用户信息
|
||||||
|
this.checkLoginAndLoadInfo()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 检查登录状态并加载用户信息
|
||||||
|
*/
|
||||||
|
checkLoginAndLoadInfo() {
|
||||||
|
if (!isLogin()) {
|
||||||
|
// 未登录,跳转到登录页
|
||||||
|
uni.reLaunch({
|
||||||
|
url: '/pages/login/login'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 先从本地存储加载用户信息
|
||||||
|
const storedInfo = getStoredUserInfo()
|
||||||
|
if (storedInfo) {
|
||||||
|
this.userInfo = {
|
||||||
|
name: storedInfo.userName || storedInfo.account || '用户',
|
||||||
|
id: storedInfo.userId || '',
|
||||||
|
phone: storedInfo.phone || '',
|
||||||
|
username: storedInfo.account || ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 然后从服务器刷新用户信息
|
||||||
|
this.loadUserInfo()
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 加载用户信息
|
||||||
|
*/
|
||||||
|
async loadUserInfo() {
|
||||||
|
try {
|
||||||
|
const res = await userAPI.getUserInfo()
|
||||||
|
|
||||||
|
this.userInfo = {
|
||||||
|
name: res.name || res.username || res.realName || '用户',
|
||||||
|
id: res.id || res.userId || '',
|
||||||
|
phone: res.phone || res.mobile || '',
|
||||||
|
username: res.username || res.account || ''
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('加载用户信息失败:', err)
|
||||||
|
// 如果是401错误,说明token过期,跳转到登录页
|
||||||
|
if (err.statusCode === 401) {
|
||||||
|
clearAuth()
|
||||||
|
uni.reLaunch({
|
||||||
|
url: '/pages/login/login'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
goToMyRegistration() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/my-registration/my-registration'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
goToCommonInfo() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/common-info/common-info'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleChangePassword() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/change-password/change-password'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleContactUs() {
|
||||||
|
uni.showToast({
|
||||||
|
title: '联系我们',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
async handleLogout() {
|
||||||
|
const confirmRes = await new Promise((resolve) => {
|
||||||
|
uni.showModal({
|
||||||
|
title: '提示',
|
||||||
|
content: '确定要退出登录吗?',
|
||||||
|
success: (res) => resolve(res)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
if (confirmRes.confirm) {
|
||||||
|
try {
|
||||||
|
// 调用退出登录接口
|
||||||
|
await userAPI.logout()
|
||||||
|
} catch (err) {
|
||||||
|
console.error('退出登录接口调用失败:', err)
|
||||||
|
// 即使接口失败也继续清除本地数据
|
||||||
|
}
|
||||||
|
|
||||||
|
// 清除本地认证信息
|
||||||
|
clearAuth()
|
||||||
|
|
||||||
|
uni.showToast({
|
||||||
|
title: '退出成功',
|
||||||
|
icon: 'success'
|
||||||
|
})
|
||||||
|
|
||||||
|
// 延迟跳转到登录页
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.reLaunch({
|
||||||
|
url: '/pages/login/login'
|
||||||
|
})
|
||||||
|
}, 1500)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.profile-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-section {
|
||||||
|
background-color: #C93639;
|
||||||
|
padding: 50rpx 30rpx 80rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 120rpx;
|
||||||
|
height: 120rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: rgba(255, 255, 255, 0.3);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-circle {
|
||||||
|
width: 100rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-detail {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-name {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #fff;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-id {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: rgba(255, 255, 255, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-registration-card {
|
||||||
|
background: linear-gradient(135deg, #FFE8E8 0%, #FFD4D4 100%);
|
||||||
|
margin: -50rpx 30rpx 30rpx;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
padding: 40rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20rpx;
|
||||||
|
box-shadow: 0 8rpx 20rpx rgba(201, 54, 57, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-icon {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
background-color: #C93639;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-icon-img {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-text {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-list {
|
||||||
|
background-color: #fff;
|
||||||
|
margin: 0 30rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 35rpx 30rpx;
|
||||||
|
border-bottom: 1rpx solid #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-text {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
font-size: 40rpx;
|
||||||
|
color: #cccccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.version {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
margin-top: 50rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
74
src/pages/register-type/register-type.vue
Normal file
@@ -0,0 +1,74 @@
|
|||||||
|
<template>
|
||||||
|
<view class="register-type-page">
|
||||||
|
<view class="type-list">
|
||||||
|
<view class="type-item" @click="goToRegister('single')">
|
||||||
|
<view class="type-label">单人赛</view>
|
||||||
|
<view class="type-btn">去报名</view>
|
||||||
|
</view>
|
||||||
|
<view class="type-item" @click="goToRegister('team')">
|
||||||
|
<view class="type-label">集体赛</view>
|
||||||
|
<view class="type-btn">去报名</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
eventId: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
if (options.id) {
|
||||||
|
this.eventId = options.id;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
goToRegister(type) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/select-event/select-event?eventId=${this.eventId}&type=${type}`
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.register-type-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
padding: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.type-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.type-item {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 50rpx 40rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.type-label {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.type-btn {
|
||||||
|
background-color: #C93639;
|
||||||
|
color: #fff;
|
||||||
|
padding: 20rpx 50rpx;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
817
src/pages/register/register.vue
Normal file
@@ -0,0 +1,817 @@
|
|||||||
|
<template>
|
||||||
|
<view class="register-page">
|
||||||
|
<!-- 背景装饰 -->
|
||||||
|
<view class="bg-decoration">
|
||||||
|
<view class="circle circle-1"></view>
|
||||||
|
<view class="circle circle-2"></view>
|
||||||
|
<view class="circle circle-3"></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 顶部Logo区域 -->
|
||||||
|
<view class="register-header">
|
||||||
|
<view class="logo-container">
|
||||||
|
<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
|
||||||
|
</view>
|
||||||
|
<text class="title">用户注册</text>
|
||||||
|
<text class="subtitle">CREATE YOUR ACCOUNT</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 注册表单 -->
|
||||||
|
<view class="register-form">
|
||||||
|
<view class="form-title">创建账号</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="input-wrapper">
|
||||||
|
<view class="input-icon">👤</view>
|
||||||
|
<input
|
||||||
|
class="form-input"
|
||||||
|
v-model="form.account"
|
||||||
|
placeholder="请输入账号(4-20位字母或数字)"
|
||||||
|
placeholder-class="placeholder"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="input-wrapper">
|
||||||
|
<view class="input-icon">📱</view>
|
||||||
|
<input
|
||||||
|
class="form-input"
|
||||||
|
v-model="form.phone"
|
||||||
|
type="number"
|
||||||
|
maxlength="11"
|
||||||
|
placeholder="请输入手机号"
|
||||||
|
placeholder-class="placeholder"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="code-input-wrapper">
|
||||||
|
<view class="input-wrapper code-input">
|
||||||
|
<view class="input-icon">🔢</view>
|
||||||
|
<input
|
||||||
|
class="form-input"
|
||||||
|
v-model="form.code"
|
||||||
|
type="number"
|
||||||
|
maxlength="6"
|
||||||
|
placeholder="请输入验证码"
|
||||||
|
placeholder-class="placeholder"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="get-code-btn"
|
||||||
|
:class="{ disabled: countdown > 0 }"
|
||||||
|
@click="handleGetCode"
|
||||||
|
>
|
||||||
|
{{ countdown > 0 ? `${countdown}s` : '获取验证码' }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="test-tip">💡 测试提示:可使用万能验证码 888888</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="input-wrapper">
|
||||||
|
<view class="input-icon">✏️</view>
|
||||||
|
<input
|
||||||
|
class="form-input"
|
||||||
|
v-model="form.realName"
|
||||||
|
placeholder="请输入真实姓名"
|
||||||
|
placeholder-class="placeholder"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="gender-label">性别</view>
|
||||||
|
<view class="gender-selector">
|
||||||
|
<view
|
||||||
|
class="gender-option"
|
||||||
|
:class="{ active: form.sex === 1 }"
|
||||||
|
@click="form.sex = 1"
|
||||||
|
>
|
||||||
|
<text class="gender-icon">👨</text>
|
||||||
|
<text>男</text>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="gender-option"
|
||||||
|
:class="{ active: form.sex === 2 }"
|
||||||
|
@click="form.sex = 2"
|
||||||
|
>
|
||||||
|
<text class="gender-icon">👩</text>
|
||||||
|
<text>女</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="input-wrapper">
|
||||||
|
<view class="input-icon">🔒</view>
|
||||||
|
<input
|
||||||
|
class="form-input"
|
||||||
|
v-model="form.password"
|
||||||
|
:password="!showPassword"
|
||||||
|
placeholder="请输入密码(6-20位)"
|
||||||
|
placeholder-class="placeholder"
|
||||||
|
/>
|
||||||
|
<view class="eye-icon" @click="showPassword = !showPassword">
|
||||||
|
<text>{{ showPassword ? '👁️' : '👁️🗨️' }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="input-wrapper">
|
||||||
|
<view class="input-icon">🔐</view>
|
||||||
|
<input
|
||||||
|
class="form-input"
|
||||||
|
v-model="form.confirmPassword"
|
||||||
|
:password="!showConfirmPassword"
|
||||||
|
placeholder="请再次输入密码"
|
||||||
|
placeholder-class="placeholder"
|
||||||
|
/>
|
||||||
|
<view class="eye-icon" @click="showConfirmPassword = !showConfirmPassword">
|
||||||
|
<text>{{ showConfirmPassword ? '👁️' : '👁️🗨️' }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="agreement-wrapper">
|
||||||
|
<label class="checkbox-label" @click="agreeTerms = !agreeTerms">
|
||||||
|
<view :class="['checkbox', agreeTerms ? 'checked' : '']">
|
||||||
|
<text v-if="agreeTerms" class="check-icon">✓</text>
|
||||||
|
</view>
|
||||||
|
<text class="agreement-text">
|
||||||
|
我已阅读并同意
|
||||||
|
<text class="link-text" @click.stop="showAgreement">《用户协议》</text>
|
||||||
|
和
|
||||||
|
<text class="link-text" @click.stop="showPrivacy">《隐私政策》</text>
|
||||||
|
</text>
|
||||||
|
</label>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<button class="register-btn" @click="handleRegister" :loading="loading" :disabled="loading">
|
||||||
|
<text class="btn-text">{{ loading ? '注册中...' : '立即注册' }}</text>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<view class="login-link">
|
||||||
|
已有账号?<text class="link-text" @click="goToLogin">立即登录</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 底部装饰 -->
|
||||||
|
<view class="footer-decoration">
|
||||||
|
<view class="wave"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import userAPI from '@/api/user.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
form: {
|
||||||
|
account: '',
|
||||||
|
phone: '',
|
||||||
|
code: '',
|
||||||
|
realName: '',
|
||||||
|
sex: 1,
|
||||||
|
password: '',
|
||||||
|
confirmPassword: ''
|
||||||
|
},
|
||||||
|
showPassword: false,
|
||||||
|
showConfirmPassword: false,
|
||||||
|
agreeTerms: false,
|
||||||
|
loading: false,
|
||||||
|
countdown: 0,
|
||||||
|
timer: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onUnload() {
|
||||||
|
if (this.timer) {
|
||||||
|
clearInterval(this.timer)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 获取验证码
|
||||||
|
*/
|
||||||
|
async handleGetCode() {
|
||||||
|
if (this.countdown > 0) return
|
||||||
|
|
||||||
|
// 验证手机号
|
||||||
|
if (!this.form.phone) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请输入手机号',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!/^1[3-9]\d{9}$/.test(this.form.phone)) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请输入正确的手机号',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await userAPI.getCaptcha(this.form.phone)
|
||||||
|
|
||||||
|
uni.showToast({
|
||||||
|
title: '验证码已发送',
|
||||||
|
icon: 'success'
|
||||||
|
})
|
||||||
|
|
||||||
|
// 开始倒计时
|
||||||
|
this.countdown = 60
|
||||||
|
this.timer = setInterval(() => {
|
||||||
|
this.countdown--
|
||||||
|
if (this.countdown <= 0) {
|
||||||
|
clearInterval(this.timer)
|
||||||
|
this.timer = null
|
||||||
|
}
|
||||||
|
}, 1000)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取验证码失败:', error)
|
||||||
|
uni.showToast({
|
||||||
|
title: error.message || '获取验证码失败',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 表单验证
|
||||||
|
*/
|
||||||
|
validateForm() {
|
||||||
|
if (!this.form.account) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请输入账号',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!/^[a-zA-Z0-9]{4,20}$/.test(this.form.account)) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '账号为4-20位字母或数字',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this.form.phone) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请输入手机号',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!/^1[3-9]\d{9}$/.test(this.form.phone)) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请输入正确的手机号',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this.form.code) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请输入验证码',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
// 测试用万能验证码:888888
|
||||||
|
// 如果不是万能验证码,则需要验证码长度为6位
|
||||||
|
if (this.form.code !== '888888' && this.form.code.length !== 6) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请输入6位验证码',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this.form.realName) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请输入真实姓名',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!/^[\u4e00-\u9fa5]{2,10}$/.test(this.form.realName)) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请输入正确的姓名(2-10个汉字)',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this.form.password) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请输入密码',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.form.password.length < 6 || this.form.password.length > 20) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '密码长度为6-20位',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this.form.confirmPassword) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请确认密码',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.form.password !== this.form.confirmPassword) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '两次密码输入不一致',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this.agreeTerms) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请阅读并同意用户协议',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
return true
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 注册
|
||||||
|
*/
|
||||||
|
async handleRegister() {
|
||||||
|
if (!this.validateForm()) return
|
||||||
|
|
||||||
|
this.loading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
await userAPI.register({
|
||||||
|
account: this.form.account,
|
||||||
|
phone: this.form.phone,
|
||||||
|
code: this.form.code,
|
||||||
|
realName: this.form.realName,
|
||||||
|
sex: this.form.sex,
|
||||||
|
password: this.form.password
|
||||||
|
})
|
||||||
|
|
||||||
|
uni.showToast({
|
||||||
|
title: '注册成功',
|
||||||
|
icon: 'success'
|
||||||
|
})
|
||||||
|
|
||||||
|
// 延迟跳转到登录页
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.navigateBack()
|
||||||
|
}, 1500)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('注册失败:', error)
|
||||||
|
uni.showToast({
|
||||||
|
title: error.message || '注册失败',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
} finally {
|
||||||
|
this.loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 跳转到登录页
|
||||||
|
*/
|
||||||
|
goToLogin() {
|
||||||
|
uni.navigateBack()
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 显示用户协议
|
||||||
|
*/
|
||||||
|
showAgreement() {
|
||||||
|
uni.showToast({
|
||||||
|
title: '用户协议',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
// TODO: 跳转到用户协议页面
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 显示隐私政策
|
||||||
|
*/
|
||||||
|
showPrivacy() {
|
||||||
|
uni.showToast({
|
||||||
|
title: '隐私政策',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
// TODO: 跳转到隐私政策页面
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.register-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: linear-gradient(135deg, #C93639 0%, #A82E31 50%, #8B1F22 100%);
|
||||||
|
padding: 0;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 背景装饰圆圈 */
|
||||||
|
.bg-decoration {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(255, 255, 255, 0.08);
|
||||||
|
animation: float 6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle-1 {
|
||||||
|
width: 300rpx;
|
||||||
|
height: 300rpx;
|
||||||
|
top: -100rpx;
|
||||||
|
right: -50rpx;
|
||||||
|
animation-delay: 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle-2 {
|
||||||
|
width: 200rpx;
|
||||||
|
height: 200rpx;
|
||||||
|
bottom: 100rpx;
|
||||||
|
left: -50rpx;
|
||||||
|
animation-delay: 2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle-3 {
|
||||||
|
width: 150rpx;
|
||||||
|
height: 150rpx;
|
||||||
|
top: 30%;
|
||||||
|
right: 50rpx;
|
||||||
|
animation-delay: 4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% {
|
||||||
|
transform: translateY(0) scale(1);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(-30rpx) scale(1.05);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 顶部Logo区域 */
|
||||||
|
.register-header {
|
||||||
|
text-align: center;
|
||||||
|
padding: 80rpx 60rpx 60rpx;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-container {
|
||||||
|
width: 160rpx;
|
||||||
|
height: 160rpx;
|
||||||
|
margin: 0 auto 30rpx;
|
||||||
|
background: rgba(255, 255, 255, 0.15);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
backdrop-filter: blur(10rpx);
|
||||||
|
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
width: 120rpx;
|
||||||
|
height: 120rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 44rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #fff;
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
letter-spacing: 4rpx;
|
||||||
|
text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: rgba(255, 255, 255, 0.85);
|
||||||
|
letter-spacing: 2rpx;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 注册表单 */
|
||||||
|
.register-form {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 40rpx 40rpx 0 0;
|
||||||
|
padding: 50rpx 40rpx 80rpx;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.08);
|
||||||
|
max-height: calc(100vh - 300rpx);
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item {
|
||||||
|
margin-bottom: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-wrapper {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background: #F7F8FA;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
border: 2rpx solid transparent;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-wrapper:focus-within {
|
||||||
|
background: #fff;
|
||||||
|
border-color: #C93639;
|
||||||
|
box-shadow: 0 4rpx 16rpx rgba(201, 54, 57, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-icon {
|
||||||
|
width: 70rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 32rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input {
|
||||||
|
flex: 1;
|
||||||
|
height: 88rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
padding-right: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.placeholder {
|
||||||
|
color: #999;
|
||||||
|
font-size: 26rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eye-icon {
|
||||||
|
width: 70rpx;
|
||||||
|
height: 88rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 32rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eye-icon:active {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 验证码输入 */
|
||||||
|
.code-input-wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-input {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.get-code-btn {
|
||||||
|
height: 88rpx;
|
||||||
|
padding: 0 24rpx;
|
||||||
|
background: linear-gradient(135deg, #C93639 0%, #A82E31 100%);
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 24rpx;
|
||||||
|
white-space: nowrap;
|
||||||
|
transition: all 0.3s;
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(201, 54, 57, 0.2);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.get-code-btn:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.get-code-btn.disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
background: #999;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.test-tip {
|
||||||
|
margin-top: 10rpx;
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #ff9800;
|
||||||
|
padding-left: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 性别选择 */
|
||||||
|
.gender-label {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
padding-left: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gender-selector {
|
||||||
|
display: flex;
|
||||||
|
gap: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gender-option {
|
||||||
|
flex: 1;
|
||||||
|
height: 88rpx;
|
||||||
|
background: #F7F8FA;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
border: 2rpx solid transparent;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 10rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gender-option.active {
|
||||||
|
background: linear-gradient(135deg, #C93639 0%, #A82E31 100%);
|
||||||
|
color: #fff;
|
||||||
|
border-color: #C93639;
|
||||||
|
box-shadow: 0 4rpx 16rpx rgba(201, 54, 57, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gender-icon {
|
||||||
|
font-size: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 用户协议 */
|
||||||
|
.agreement-wrapper {
|
||||||
|
margin: 30rpx 0 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-label {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox {
|
||||||
|
width: 32rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
border: 2rpx solid #ddd;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
margin-top: 2rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox.checked {
|
||||||
|
background: #C93639;
|
||||||
|
border-color: #C93639;
|
||||||
|
}
|
||||||
|
|
||||||
|
.check-icon {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 20rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.agreement-text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666;
|
||||||
|
flex: 1;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-text {
|
||||||
|
color: #C93639;
|
||||||
|
font-weight: bold;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-text:active {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 注册按钮 */
|
||||||
|
.register-btn {
|
||||||
|
width: 100%;
|
||||||
|
height: 92rpx;
|
||||||
|
background: linear-gradient(135deg, #C93639 0%, #A82E31 100%);
|
||||||
|
border-radius: 16rpx;
|
||||||
|
border: none;
|
||||||
|
box-shadow: 0 8rpx 24rpx rgba(201, 54, 57, 0.3);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-btn::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: -100%;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||||
|
transition: left 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-btn:active {
|
||||||
|
transform: scale(0.98);
|
||||||
|
box-shadow: 0 4rpx 16rpx rgba(201, 54, 57, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-btn:active::before {
|
||||||
|
left: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-text {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #fff;
|
||||||
|
letter-spacing: 2rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 登录链接 */
|
||||||
|
.login-link {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 40rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 底部装饰 */
|
||||||
|
.footer-decoration {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100rpx;
|
||||||
|
z-index: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wave {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.05) 100%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
448
src/pages/schedule/schedule-example.vue
Normal file
@@ -0,0 +1,448 @@
|
|||||||
|
<template>
|
||||||
|
<view class="schedule-page">
|
||||||
|
<view class="header">
|
||||||
|
<text class="title">赛程编排管理</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 状态显示 -->
|
||||||
|
<view class="status-card">
|
||||||
|
<view class="status-item">
|
||||||
|
<text class="label">编排状态:</text>
|
||||||
|
<text :class="['status-text', getStatusClass()]">{{ getStatusText() }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="status-item">
|
||||||
|
<text class="label">分组数:</text>
|
||||||
|
<text class="value">{{ scheduleData.totalGroups || 0 }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="status-item">
|
||||||
|
<text class="label">参赛人数:</text>
|
||||||
|
<text class="value">{{ scheduleData.registerCount || 0 }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="status-item" v-if="scheduleData.lastAutoScheduleTime">
|
||||||
|
<text class="label">最后编排时间:</text>
|
||||||
|
<text class="value">{{ scheduleData.lastAutoScheduleTime }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 操作按钮 -->
|
||||||
|
<view class="action-buttons">
|
||||||
|
<!-- 触发自动编排 -->
|
||||||
|
<button
|
||||||
|
class="btn btn-primary"
|
||||||
|
@click="handleAutoArrange"
|
||||||
|
:disabled="loading || scheduleData.scheduleStatus === 2"
|
||||||
|
>
|
||||||
|
{{ loading ? '编排中...' : '自动编排' }}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- 刷新编排结果 -->
|
||||||
|
<button
|
||||||
|
class="btn btn-default"
|
||||||
|
@click="loadScheduleResult"
|
||||||
|
:disabled="loading"
|
||||||
|
>
|
||||||
|
刷新结果
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- 保存并锁定 -->
|
||||||
|
<button
|
||||||
|
class="btn btn-success"
|
||||||
|
@click="handleSaveAndLock"
|
||||||
|
:disabled="loading || scheduleData.scheduleStatus === 2 || scheduleData.scheduleStatus === 0"
|
||||||
|
>
|
||||||
|
{{ scheduleData.scheduleStatus === 2 ? '已锁定' : '保存并锁定' }}
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 编排结果列表 -->
|
||||||
|
<view class="schedule-list" v-if="scheduleData.scheduleGroups && scheduleData.scheduleGroups.length > 0">
|
||||||
|
<view class="list-title">编排结果</view>
|
||||||
|
<view
|
||||||
|
class="schedule-item"
|
||||||
|
v-for="group in scheduleData.scheduleGroups"
|
||||||
|
:key="group.groupId"
|
||||||
|
>
|
||||||
|
<view class="group-header">
|
||||||
|
<text class="group-name">{{ group.groupName }}</text>
|
||||||
|
<text class="participant-count">{{ group.participants.length }}人</text>
|
||||||
|
</view>
|
||||||
|
<view class="group-info">
|
||||||
|
<text class="info-text">场地:{{ group.venueName }}</text>
|
||||||
|
<text class="info-text">时间:{{ group.scheduleDate }} {{ group.scheduleTime }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 空状态 -->
|
||||||
|
<view class="empty-state" v-else>
|
||||||
|
<text class="empty-text">暂无编排数据</text>
|
||||||
|
<text class="empty-hint">点击"自动编排"开始编排</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import scheduleAPI from '@/api/schedule.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
competitionId: null, // 赛事ID,从页面参数获取
|
||||||
|
loading: false,
|
||||||
|
scheduleData: {
|
||||||
|
scheduleStatus: 0, // 0-未编排, 1-已编排, 2-已锁定
|
||||||
|
totalGroups: 0,
|
||||||
|
totalParticipants: 0,
|
||||||
|
lastAutoScheduleTime: null,
|
||||||
|
scheduleGroups: []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
// 从页面参数获取赛事ID
|
||||||
|
if (options.competitionId) {
|
||||||
|
this.competitionId = parseInt(options.competitionId)
|
||||||
|
this.loadScheduleResult()
|
||||||
|
} else {
|
||||||
|
uni.showToast({
|
||||||
|
title: '缺少赛事ID',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 加载赛程编排结果
|
||||||
|
*/
|
||||||
|
async loadScheduleResult() {
|
||||||
|
if (!this.competitionId) return
|
||||||
|
|
||||||
|
this.loading = true
|
||||||
|
try {
|
||||||
|
const result = await scheduleAPI.getScheduleResult(this.competitionId)
|
||||||
|
this.scheduleData = result
|
||||||
|
console.log('编排结果:', result)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('加载编排结果失败:', error)
|
||||||
|
uni.showToast({
|
||||||
|
title: error.message || '加载失败',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
} finally {
|
||||||
|
this.loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 触发自动编排
|
||||||
|
*/
|
||||||
|
async handleAutoArrange() {
|
||||||
|
if (!this.competitionId) return
|
||||||
|
|
||||||
|
// 确认提示
|
||||||
|
const [err, res] = await uni.showModal({
|
||||||
|
title: '确认编排',
|
||||||
|
content: '确定要执行自动编排吗?',
|
||||||
|
confirmText: '确定',
|
||||||
|
cancelText: '取消'
|
||||||
|
})
|
||||||
|
|
||||||
|
if (err || !res.confirm) return
|
||||||
|
|
||||||
|
this.loading = true
|
||||||
|
uni.showLoading({
|
||||||
|
title: '编排中...',
|
||||||
|
mask: true
|
||||||
|
})
|
||||||
|
|
||||||
|
try {
|
||||||
|
await scheduleAPI.triggerAutoArrange(this.competitionId)
|
||||||
|
|
||||||
|
uni.showToast({
|
||||||
|
title: '编排成功',
|
||||||
|
icon: 'success'
|
||||||
|
})
|
||||||
|
|
||||||
|
// 延迟1秒后刷新结果
|
||||||
|
setTimeout(() => {
|
||||||
|
this.loadScheduleResult()
|
||||||
|
}, 1000)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('自动编排失败:', error)
|
||||||
|
uni.showToast({
|
||||||
|
title: error.message || '编排失败',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
} finally {
|
||||||
|
this.loading = false
|
||||||
|
uni.hideLoading()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 保存并锁定编排
|
||||||
|
*/
|
||||||
|
async handleSaveAndLock() {
|
||||||
|
if (!this.competitionId) return
|
||||||
|
|
||||||
|
// 确认提示
|
||||||
|
const [err, res] = await uni.showModal({
|
||||||
|
title: '确认锁定',
|
||||||
|
content: '锁定后将无法再修改编排,确定要锁定吗?',
|
||||||
|
confirmText: '确定锁定',
|
||||||
|
cancelText: '取消'
|
||||||
|
})
|
||||||
|
|
||||||
|
if (err || !res.confirm) return
|
||||||
|
|
||||||
|
this.loading = true
|
||||||
|
uni.showLoading({
|
||||||
|
title: '保存中...',
|
||||||
|
mask: true
|
||||||
|
})
|
||||||
|
|
||||||
|
try {
|
||||||
|
await scheduleAPI.saveAndLockSchedule(this.competitionId)
|
||||||
|
|
||||||
|
uni.showToast({
|
||||||
|
title: '锁定成功',
|
||||||
|
icon: 'success'
|
||||||
|
})
|
||||||
|
|
||||||
|
// 刷新结果
|
||||||
|
setTimeout(() => {
|
||||||
|
this.loadScheduleResult()
|
||||||
|
}, 1000)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('保存锁定失败:', error)
|
||||||
|
uni.showToast({
|
||||||
|
title: error.message || '锁定失败',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
} finally {
|
||||||
|
this.loading = false
|
||||||
|
uni.hideLoading()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取状态文本
|
||||||
|
*/
|
||||||
|
getStatusText() {
|
||||||
|
const statusMap = {
|
||||||
|
0: '未编排',
|
||||||
|
1: '已编排',
|
||||||
|
2: '已锁定'
|
||||||
|
}
|
||||||
|
return statusMap[this.scheduleData.scheduleStatus] || '未知'
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取状态样式类
|
||||||
|
*/
|
||||||
|
getStatusClass() {
|
||||||
|
const classMap = {
|
||||||
|
0: 'status-pending',
|
||||||
|
1: 'status-draft',
|
||||||
|
2: 'status-locked'
|
||||||
|
}
|
||||||
|
return classMap[this.scheduleData.scheduleStatus] || ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.schedule-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: #f5f5f5;
|
||||||
|
padding: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
background: #fff;
|
||||||
|
padding: 30rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-card {
|
||||||
|
background: #fff;
|
||||||
|
padding: 30rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666;
|
||||||
|
min-width: 180rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 8rpx 20rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
|
||||||
|
&.status-pending {
|
||||||
|
color: #999;
|
||||||
|
background: #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.status-draft {
|
||||||
|
color: #1890ff;
|
||||||
|
background: #e6f7ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.status-locked {
|
||||||
|
color: #52c41a;
|
||||||
|
background: #f6ffed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 20rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
flex: 1;
|
||||||
|
height: 80rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
&.btn-primary {
|
||||||
|
background: #1890ff;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
background: #d9d9d9;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.btn-default {
|
||||||
|
background: #fff;
|
||||||
|
color: #333;
|
||||||
|
border: 2rpx solid #d9d9d9;
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
background: #f5f5f5;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.btn-success {
|
||||||
|
background: #52c41a;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
background: #d9d9d9;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.schedule-list {
|
||||||
|
background: #fff;
|
||||||
|
padding: 30rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.schedule-item {
|
||||||
|
padding: 24rpx;
|
||||||
|
background: #f9f9f9;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-name {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.participant-count {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #1890ff;
|
||||||
|
background: #e6f7ff;
|
||||||
|
padding: 4rpx 12rpx;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-info {
|
||||||
|
display: flex;
|
||||||
|
gap: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-text {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 120rpx 0;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-text {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #999;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-hint {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
193
src/pages/select-event/select-event.vue
Normal file
@@ -0,0 +1,193 @@
|
|||||||
|
<template>
|
||||||
|
<view class="select-event-page">
|
||||||
|
<view class="project-list">
|
||||||
|
<view
|
||||||
|
class="project-item"
|
||||||
|
v-for="(item, index) in projectList"
|
||||||
|
:key="index"
|
||||||
|
@click="toggleProject(item)"
|
||||||
|
>
|
||||||
|
<view class="project-info">
|
||||||
|
<view class="project-name">{{ item.name }}</view>
|
||||||
|
<view class="project-price">¥ {{ item.price }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="checkbox">
|
||||||
|
<text v-if="item.selected" class="checked">✓</text>
|
||||||
|
<text v-else class="unchecked">○</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 立即报名按钮 -->
|
||||||
|
<view class="register-btn-wrapper">
|
||||||
|
<view class="register-btn" @click="handleRegister">立即报名</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import competitionAPI from '@/api/competition.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
eventId: '',
|
||||||
|
type: '',
|
||||||
|
projectList: []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
if (options.eventId) {
|
||||||
|
this.eventId = options.eventId;
|
||||||
|
}
|
||||||
|
if (options.type) {
|
||||||
|
this.type = options.type;
|
||||||
|
}
|
||||||
|
if (this.eventId) {
|
||||||
|
this.loadProjectList(this.eventId)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async loadProjectList(eventId) {
|
||||||
|
try {
|
||||||
|
const params = { competitionId: eventId }
|
||||||
|
|
||||||
|
// Filter by participation type: single=1, team=2
|
||||||
|
if (this.type === 'single') {
|
||||||
|
params.type = 1
|
||||||
|
} else if (this.type === 'team') {
|
||||||
|
params.type = 2
|
||||||
|
}
|
||||||
|
|
||||||
|
const res = await competitionAPI.getProjectList(params)
|
||||||
|
|
||||||
|
let list = []
|
||||||
|
if (res.records) {
|
||||||
|
list = res.records
|
||||||
|
} else if (Array.isArray(res)) {
|
||||||
|
list = res
|
||||||
|
}
|
||||||
|
|
||||||
|
this.projectList = list.map(item => ({
|
||||||
|
id: item.id,
|
||||||
|
name: item.name || item.projectName,
|
||||||
|
price: item.price || item.registrationFee || 0,
|
||||||
|
type: item.type || (this.type === 'team' ? 2 : 1),
|
||||||
|
selected: false
|
||||||
|
}))
|
||||||
|
} catch (err) {
|
||||||
|
console.error('加载项目列表失败:', err)
|
||||||
|
uni.showToast({
|
||||||
|
title: '加载失败',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
toggleProject(item) {
|
||||||
|
item.selected = !item.selected;
|
||||||
|
this.$forceUpdate();
|
||||||
|
},
|
||||||
|
|
||||||
|
handleRegister() {
|
||||||
|
const selectedProjects = this.projectList.filter(item => item.selected);
|
||||||
|
if (selectedProjects.length === 0) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请选择报名项目',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Include type in selected projects data
|
||||||
|
const projectsData = selectedProjects.map(p => ({
|
||||||
|
id: p.id,
|
||||||
|
name: p.name,
|
||||||
|
price: p.price,
|
||||||
|
type: p.type
|
||||||
|
}))
|
||||||
|
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/event-register/event-register?eventId=${this.eventId}&projects=${encodeURIComponent(JSON.stringify(projectsData))}`
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.select-event-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
padding-bottom: 180rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-list {
|
||||||
|
padding: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-item {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 40rpx 30rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-info {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-name {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333333;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-price {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #C93639;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox {
|
||||||
|
width: 50rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-left: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checked {
|
||||||
|
font-size: 40rpx;
|
||||||
|
color: #C93639;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unchecked {
|
||||||
|
font-size: 40rpx;
|
||||||
|
color: #cccccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-btn-wrapper {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: 30rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-btn {
|
||||||
|
background-color: #C93639;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
padding: 30rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
BIN
src/static/images/bananer1.png
Normal file
|
After Width: | Height: | Size: 654 KiB |
BIN
src/static/images/bananer2.png
Normal file
|
After Width: | Height: | Size: 460 KiB |
BIN
src/static/images/logo@3x.png
Normal file
|
After Width: | Height: | Size: 20 KiB |
BIN
src/static/images/个人中心亮@3x.png
Normal file
|
After Width: | Height: | Size: 2.3 KiB |
BIN
src/static/images/个人中心灰@3x.png
Normal file
|
After Width: | Height: | Size: 2.3 KiB |
BIN
src/static/images/信息发布@3x.png
Normal file
|
After Width: | Height: | Size: 2.0 KiB |
BIN
src/static/images/出场顺序@3x.png
Normal file
|
After Width: | Height: | Size: 2.2 KiB |
BIN
src/static/images/分割线@3x.png
Normal file
|
After Width: | Height: | Size: 1.9 KiB |
BIN
src/static/images/删除@3x.png
Normal file
|
After Width: | Height: | Size: 681 B |
BIN
src/static/images/参赛选手@3x.png
Normal file
|
After Width: | Height: | Size: 2.8 KiB |
BIN
src/static/images/图片直播@3x.png
Normal file
|
After Width: | Height: | Size: 2.6 KiB |
BIN
src/static/images/奖牌榜.png
Normal file
|
After Width: | Height: | Size: 3.3 KiB |
BIN
src/static/images/成绩@3x.png
Normal file
|
After Width: | Height: | Size: 2.7 KiB |
BIN
src/static/images/我的报名@3x.png
Normal file
|
After Width: | Height: | Size: 1.9 KiB |
BIN
src/static/images/提交报名成功亮@3x.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
src/static/images/提交报名成功灰@3x.png
Normal file
|
After Width: | Height: | Size: 9.9 KiB |
BIN
src/static/images/新增@3x.png
Normal file
|
After Width: | Height: | Size: 1.4 KiB |
BIN
src/static/images/未选中@3x.png
Normal file
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/static/images/比赛实况@3x.png
Normal file
|
After Width: | Height: | Size: 2.9 KiB |
BIN
src/static/images/活动日程@3x.png
Normal file
|
After Width: | Height: | Size: 2.5 KiB |
BIN
src/static/images/编辑@3x.png
Normal file
|
After Width: | Height: | Size: 670 B |
BIN
src/static/images/订单支付亮@3x.png
Normal file
|
After Width: | Height: | Size: 13 KiB |
BIN
src/static/images/订单支付灰@3x.png
Normal file
|
After Width: | Height: | Size: 8.1 KiB |
BIN
src/static/images/赛事规程@3x.png
Normal file
|
After Width: | Height: | Size: 2.5 KiB |
BIN
src/static/images/轮播图@3x.png
Normal file
|
After Width: | Height: | Size: 462 KiB |
BIN
src/static/images/选中@3x.png
Normal file
|
After Width: | Height: | Size: 1.6 KiB |
BIN
src/static/images/选择选手信息@3x.png
Normal file
|
After Width: | Height: | Size: 14 KiB |
BIN
src/static/images/首页亮@3x.png
Normal file
|
After Width: | Height: | Size: 2.0 KiB |
BIN
src/static/images/首页灰@3x.png
Normal file
|
After Width: | Height: | Size: 1.9 KiB |
80
src/utils/auth.js
Normal file
@@ -0,0 +1,80 @@
|
|||||||
|
/**
|
||||||
|
* Token管理工具
|
||||||
|
*/
|
||||||
|
|
||||||
|
const TOKEN_KEY = 'access_token'
|
||||||
|
const REFRESH_TOKEN_KEY = 'refresh_token'
|
||||||
|
const USER_INFO_KEY = 'userInfo'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取Token
|
||||||
|
*/
|
||||||
|
export function getToken() {
|
||||||
|
return uni.getStorageSync(TOKEN_KEY)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 设置Token
|
||||||
|
*/
|
||||||
|
export function setToken(token) {
|
||||||
|
return uni.setStorageSync(TOKEN_KEY, token)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 移除Token
|
||||||
|
*/
|
||||||
|
export function removeToken() {
|
||||||
|
return uni.removeStorageSync(TOKEN_KEY)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取RefreshToken
|
||||||
|
*/
|
||||||
|
export function getRefreshToken() {
|
||||||
|
return uni.getStorageSync(REFRESH_TOKEN_KEY)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 设置RefreshToken
|
||||||
|
*/
|
||||||
|
export function setRefreshToken(token) {
|
||||||
|
return uni.setStorageSync(REFRESH_TOKEN_KEY, token)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取用户信息
|
||||||
|
*/
|
||||||
|
export function getUserInfo() {
|
||||||
|
const userInfo = uni.getStorageSync(USER_INFO_KEY)
|
||||||
|
return userInfo ? JSON.parse(userInfo) : null
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 设置用户信息
|
||||||
|
*/
|
||||||
|
export function setUserInfo(userInfo) {
|
||||||
|
return uni.setStorageSync(USER_INFO_KEY, JSON.stringify(userInfo))
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 移除用户信息
|
||||||
|
*/
|
||||||
|
export function removeUserInfo() {
|
||||||
|
return uni.removeStorageSync(USER_INFO_KEY)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 检查是否登录
|
||||||
|
*/
|
||||||
|
export function isLogin() {
|
||||||
|
return !!(getToken() && getUserInfo())
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 清除所有认证信息
|
||||||
|
*/
|
||||||
|
export function clearAuth() {
|
||||||
|
removeToken()
|
||||||
|
uni.removeStorageSync(REFRESH_TOKEN_KEY)
|
||||||
|
removeUserInfo()
|
||||||
|
}
|
||||||
40
src/utils/base64.js
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
/**
|
||||||
|
* Base64编码工具
|
||||||
|
*/
|
||||||
|
|
||||||
|
const base64EncodeChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'
|
||||||
|
|
||||||
|
export function base64Encode(str) {
|
||||||
|
let out = ''
|
||||||
|
let i = 0
|
||||||
|
const len = str.length
|
||||||
|
let c1, c2, c3
|
||||||
|
|
||||||
|
while (i < len) {
|
||||||
|
c1 = str.charCodeAt(i++) & 0xff
|
||||||
|
if (i === len) {
|
||||||
|
out += base64EncodeChars.charAt(c1 >> 2)
|
||||||
|
out += base64EncodeChars.charAt((c1 & 0x3) << 4)
|
||||||
|
out += '=='
|
||||||
|
break
|
||||||
|
}
|
||||||
|
c2 = str.charCodeAt(i++)
|
||||||
|
if (i === len) {
|
||||||
|
out += base64EncodeChars.charAt(c1 >> 2)
|
||||||
|
out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4))
|
||||||
|
out += base64EncodeChars.charAt((c2 & 0xF) << 2)
|
||||||
|
out += '='
|
||||||
|
break
|
||||||
|
}
|
||||||
|
c3 = str.charCodeAt(i++)
|
||||||
|
out += base64EncodeChars.charAt(c1 >> 2)
|
||||||
|
out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4))
|
||||||
|
out += base64EncodeChars.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6))
|
||||||
|
out += base64EncodeChars.charAt(c3 & 0x3F)
|
||||||
|
}
|
||||||
|
return out
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
base64Encode
|
||||||
|
}
|
||||||
212
src/utils/md5.js
Normal file
@@ -0,0 +1,212 @@
|
|||||||
|
/**
|
||||||
|
* MD5加密工具
|
||||||
|
* 用于密码加密
|
||||||
|
*/
|
||||||
|
|
||||||
|
function md5(string) {
|
||||||
|
function md5_RotateLeft(lValue, iShiftBits) {
|
||||||
|
return (lValue << iShiftBits) | (lValue >>> (32 - iShiftBits))
|
||||||
|
}
|
||||||
|
|
||||||
|
function md5_AddUnsigned(lX, lY) {
|
||||||
|
let lX4, lY4, lX8, lY8, lResult
|
||||||
|
lX8 = (lX & 0x80000000)
|
||||||
|
lY8 = (lY & 0x80000000)
|
||||||
|
lX4 = (lX & 0x40000000)
|
||||||
|
lY4 = (lY & 0x40000000)
|
||||||
|
lResult = (lX & 0x3FFFFFFF) + (lY & 0x3FFFFFFF)
|
||||||
|
if (lX4 & lY4) {
|
||||||
|
return (lResult ^ 0x80000000 ^ lX8 ^ lY8)
|
||||||
|
}
|
||||||
|
if (lX4 | lY4) {
|
||||||
|
if (lResult & 0x40000000) {
|
||||||
|
return (lResult ^ 0xC0000000 ^ lX8 ^ lY8)
|
||||||
|
} else {
|
||||||
|
return (lResult ^ 0x40000000 ^ lX8 ^ lY8)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return (lResult ^ lX8 ^ lY8)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function md5_F(x, y, z) {
|
||||||
|
return (x & y) | ((~x) & z)
|
||||||
|
}
|
||||||
|
|
||||||
|
function md5_G(x, y, z) {
|
||||||
|
return (x & z) | (y & (~z))
|
||||||
|
}
|
||||||
|
|
||||||
|
function md5_H(x, y, z) {
|
||||||
|
return (x ^ y ^ z)
|
||||||
|
}
|
||||||
|
|
||||||
|
function md5_I(x, y, z) {
|
||||||
|
return (y ^ (x | (~z)))
|
||||||
|
}
|
||||||
|
|
||||||
|
function md5_FF(a, b, c, d, x, s, ac) {
|
||||||
|
a = md5_AddUnsigned(a, md5_AddUnsigned(md5_AddUnsigned(md5_F(b, c, d), x), ac))
|
||||||
|
return md5_AddUnsigned(md5_RotateLeft(a, s), b)
|
||||||
|
}
|
||||||
|
|
||||||
|
function md5_GG(a, b, c, d, x, s, ac) {
|
||||||
|
a = md5_AddUnsigned(a, md5_AddUnsigned(md5_AddUnsigned(md5_G(b, c, d), x), ac))
|
||||||
|
return md5_AddUnsigned(md5_RotateLeft(a, s), b)
|
||||||
|
}
|
||||||
|
|
||||||
|
function md5_HH(a, b, c, d, x, s, ac) {
|
||||||
|
a = md5_AddUnsigned(a, md5_AddUnsigned(md5_AddUnsigned(md5_H(b, c, d), x), ac))
|
||||||
|
return md5_AddUnsigned(md5_RotateLeft(a, s), b)
|
||||||
|
}
|
||||||
|
|
||||||
|
function md5_II(a, b, c, d, x, s, ac) {
|
||||||
|
a = md5_AddUnsigned(a, md5_AddUnsigned(md5_AddUnsigned(md5_I(b, c, d), x), ac))
|
||||||
|
return md5_AddUnsigned(md5_RotateLeft(a, s), b)
|
||||||
|
}
|
||||||
|
|
||||||
|
function md5_ConvertToWordArray(string) {
|
||||||
|
let lWordCount
|
||||||
|
const lMessageLength = string.length
|
||||||
|
const lNumberOfWords_temp1 = lMessageLength + 8
|
||||||
|
const lNumberOfWords_temp2 = (lNumberOfWords_temp1 - (lNumberOfWords_temp1 % 64)) / 64
|
||||||
|
const lNumberOfWords = (lNumberOfWords_temp2 + 1) * 16
|
||||||
|
const lWordArray = Array(lNumberOfWords - 1)
|
||||||
|
let lBytePosition = 0
|
||||||
|
let lByteCount = 0
|
||||||
|
while (lByteCount < lMessageLength) {
|
||||||
|
lWordCount = (lByteCount - (lByteCount % 4)) / 4
|
||||||
|
lBytePosition = (lByteCount % 4) * 8
|
||||||
|
lWordArray[lWordCount] = (lWordArray[lWordCount] | (string.charCodeAt(lByteCount) << lBytePosition))
|
||||||
|
lByteCount++
|
||||||
|
}
|
||||||
|
lWordCount = (lByteCount - (lByteCount % 4)) / 4
|
||||||
|
lBytePosition = (lByteCount % 4) * 8
|
||||||
|
lWordArray[lWordCount] = lWordArray[lWordCount] | (0x80 << lBytePosition)
|
||||||
|
lWordArray[lNumberOfWords - 2] = lMessageLength << 3
|
||||||
|
lWordArray[lNumberOfWords - 1] = lMessageLength >>> 29
|
||||||
|
return lWordArray
|
||||||
|
}
|
||||||
|
|
||||||
|
function md5_WordToHex(lValue) {
|
||||||
|
let WordToHexValue = '', WordToHexValue_temp = '', lByte, lCount
|
||||||
|
for (lCount = 0; lCount <= 3; lCount++) {
|
||||||
|
lByte = (lValue >>> (lCount * 8)) & 255
|
||||||
|
WordToHexValue_temp = '0' + lByte.toString(16)
|
||||||
|
WordToHexValue = WordToHexValue + WordToHexValue_temp.substr(WordToHexValue_temp.length - 2, 2)
|
||||||
|
}
|
||||||
|
return WordToHexValue
|
||||||
|
}
|
||||||
|
|
||||||
|
function md5_Utf8Encode(string) {
|
||||||
|
string = string.replace(/\r\n/g, '\n')
|
||||||
|
let utftext = ''
|
||||||
|
for (let n = 0; n < string.length; n++) {
|
||||||
|
const c = string.charCodeAt(n)
|
||||||
|
if (c < 128) {
|
||||||
|
utftext += String.fromCharCode(c)
|
||||||
|
} else if ((c > 127) && (c < 2048)) {
|
||||||
|
utftext += String.fromCharCode((c >> 6) | 192)
|
||||||
|
utftext += String.fromCharCode((c & 63) | 128)
|
||||||
|
} else {
|
||||||
|
utftext += String.fromCharCode((c >> 12) | 224)
|
||||||
|
utftext += String.fromCharCode(((c >> 6) & 63) | 128)
|
||||||
|
utftext += String.fromCharCode((c & 63) | 128)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return utftext
|
||||||
|
}
|
||||||
|
|
||||||
|
let x = []
|
||||||
|
let k, AA, BB, CC, DD, a, b, c, d
|
||||||
|
const S11 = 7, S12 = 12, S13 = 17, S14 = 22
|
||||||
|
const S21 = 5, S22 = 9, S23 = 14, S24 = 20
|
||||||
|
const S31 = 4, S32 = 11, S33 = 16, S34 = 23
|
||||||
|
const S41 = 6, S42 = 10, S43 = 15, S44 = 21
|
||||||
|
|
||||||
|
string = md5_Utf8Encode(string)
|
||||||
|
x = md5_ConvertToWordArray(string)
|
||||||
|
a = 0x67452301
|
||||||
|
b = 0xEFCDAB89
|
||||||
|
c = 0x98BADCFE
|
||||||
|
d = 0x10325476
|
||||||
|
|
||||||
|
for (k = 0; k < x.length; k += 16) {
|
||||||
|
AA = a
|
||||||
|
BB = b
|
||||||
|
CC = c
|
||||||
|
DD = d
|
||||||
|
a = md5_FF(a, b, c, d, x[k + 0], S11, 0xD76AA478)
|
||||||
|
d = md5_FF(d, a, b, c, x[k + 1], S12, 0xE8C7B756)
|
||||||
|
c = md5_FF(c, d, a, b, x[k + 2], S13, 0x242070DB)
|
||||||
|
b = md5_FF(b, c, d, a, x[k + 3], S14, 0xC1BDCEEE)
|
||||||
|
a = md5_FF(a, b, c, d, x[k + 4], S11, 0xF57C0FAF)
|
||||||
|
d = md5_FF(d, a, b, c, x[k + 5], S12, 0x4787C62A)
|
||||||
|
c = md5_FF(c, d, a, b, x[k + 6], S13, 0xA8304613)
|
||||||
|
b = md5_FF(b, c, d, a, x[k + 7], S14, 0xFD469501)
|
||||||
|
a = md5_FF(a, b, c, d, x[k + 8], S11, 0x698098D8)
|
||||||
|
d = md5_FF(d, a, b, c, x[k + 9], S12, 0x8B44F7AF)
|
||||||
|
c = md5_FF(c, d, a, b, x[k + 10], S13, 0xFFFF5BB1)
|
||||||
|
b = md5_FF(b, c, d, a, x[k + 11], S14, 0x895CD7BE)
|
||||||
|
a = md5_FF(a, b, c, d, x[k + 12], S11, 0x6B901122)
|
||||||
|
d = md5_FF(d, a, b, c, x[k + 13], S12, 0xFD987193)
|
||||||
|
c = md5_FF(c, d, a, b, x[k + 14], S13, 0xA679438E)
|
||||||
|
b = md5_FF(b, c, d, a, x[k + 15], S14, 0x49B40821)
|
||||||
|
a = md5_GG(a, b, c, d, x[k + 1], S21, 0xF61E2562)
|
||||||
|
d = md5_GG(d, a, b, c, x[k + 6], S22, 0xC040B340)
|
||||||
|
c = md5_GG(c, d, a, b, x[k + 11], S23, 0x265E5A51)
|
||||||
|
b = md5_GG(b, c, d, a, x[k + 0], S24, 0xE9B6C7AA)
|
||||||
|
a = md5_GG(a, b, c, d, x[k + 5], S21, 0xD62F105D)
|
||||||
|
d = md5_GG(d, a, b, c, x[k + 10], S22, 0x2441453)
|
||||||
|
c = md5_GG(c, d, a, b, x[k + 15], S23, 0xD8A1E681)
|
||||||
|
b = md5_GG(b, c, d, a, x[k + 4], S24, 0xE7D3FBC8)
|
||||||
|
a = md5_GG(a, b, c, d, x[k + 9], S21, 0x21E1CDE6)
|
||||||
|
d = md5_GG(d, a, b, c, x[k + 14], S22, 0xC33707D6)
|
||||||
|
c = md5_GG(c, d, a, b, x[k + 3], S23, 0xF4D50D87)
|
||||||
|
b = md5_GG(b, c, d, a, x[k + 8], S24, 0x455A14ED)
|
||||||
|
a = md5_GG(a, b, c, d, x[k + 13], S21, 0xA9E3E905)
|
||||||
|
d = md5_GG(d, a, b, c, x[k + 2], S22, 0xFCEFA3F8)
|
||||||
|
c = md5_GG(c, d, a, b, x[k + 7], S23, 0x676F02D9)
|
||||||
|
b = md5_GG(b, c, d, a, x[k + 12], S24, 0x8D2A4C8A)
|
||||||
|
a = md5_HH(a, b, c, d, x[k + 5], S31, 0xFFFA3942)
|
||||||
|
d = md5_HH(d, a, b, c, x[k + 8], S32, 0x8771F681)
|
||||||
|
c = md5_HH(c, d, a, b, x[k + 11], S33, 0x6D9D6122)
|
||||||
|
b = md5_HH(b, c, d, a, x[k + 14], S34, 0xFDE5380C)
|
||||||
|
a = md5_HH(a, b, c, d, x[k + 1], S31, 0xA4BEEA44)
|
||||||
|
d = md5_HH(d, a, b, c, x[k + 4], S32, 0x4BDECFA9)
|
||||||
|
c = md5_HH(c, d, a, b, x[k + 7], S33, 0xF6BB4B60)
|
||||||
|
b = md5_HH(b, c, d, a, x[k + 10], S34, 0xBEBFBC70)
|
||||||
|
a = md5_HH(a, b, c, d, x[k + 13], S31, 0x289B7EC6)
|
||||||
|
d = md5_HH(d, a, b, c, x[k + 0], S32, 0xEAA127FA)
|
||||||
|
c = md5_HH(c, d, a, b, x[k + 3], S33, 0xD4EF3085)
|
||||||
|
b = md5_HH(b, c, d, a, x[k + 6], S34, 0x4881D05)
|
||||||
|
a = md5_HH(a, b, c, d, x[k + 9], S31, 0xD9D4D039)
|
||||||
|
d = md5_HH(d, a, b, c, x[k + 12], S32, 0xE6DB99E5)
|
||||||
|
c = md5_HH(c, d, a, b, x[k + 15], S33, 0x1FA27CF8)
|
||||||
|
b = md5_HH(b, c, d, a, x[k + 2], S34, 0xC4AC5665)
|
||||||
|
a = md5_II(a, b, c, d, x[k + 0], S41, 0xF4292244)
|
||||||
|
d = md5_II(d, a, b, c, x[k + 7], S42, 0x432AFF97)
|
||||||
|
c = md5_II(c, d, a, b, x[k + 14], S43, 0xAB9423A7)
|
||||||
|
b = md5_II(b, c, d, a, x[k + 5], S44, 0xFC93A039)
|
||||||
|
a = md5_II(a, b, c, d, x[k + 12], S41, 0x655B59C3)
|
||||||
|
d = md5_II(d, a, b, c, x[k + 3], S42, 0x8F0CCC92)
|
||||||
|
c = md5_II(c, d, a, b, x[k + 10], S43, 0xFFEFF47D)
|
||||||
|
b = md5_II(b, c, d, a, x[k + 1], S44, 0x85845DD1)
|
||||||
|
a = md5_II(a, b, c, d, x[k + 8], S41, 0x6FA87E4F)
|
||||||
|
d = md5_II(d, a, b, c, x[k + 15], S42, 0xFE2CE6E0)
|
||||||
|
c = md5_II(c, d, a, b, x[k + 6], S43, 0xA3014314)
|
||||||
|
b = md5_II(b, c, d, a, x[k + 13], S44, 0x4E0811A1)
|
||||||
|
a = md5_II(a, b, c, d, x[k + 4], S41, 0xF7537E82)
|
||||||
|
d = md5_II(d, a, b, c, x[k + 11], S42, 0xBD3AF235)
|
||||||
|
c = md5_II(c, d, a, b, x[k + 2], S43, 0x2AD7D2BB)
|
||||||
|
b = md5_II(b, c, d, a, x[k + 9], S44, 0xEB86D391)
|
||||||
|
a = md5_AddUnsigned(a, AA)
|
||||||
|
b = md5_AddUnsigned(b, BB)
|
||||||
|
c = md5_AddUnsigned(c, CC)
|
||||||
|
d = md5_AddUnsigned(d, DD)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (md5_WordToHex(a) + md5_WordToHex(b) + md5_WordToHex(c) + md5_WordToHex(d)).toLowerCase()
|
||||||
|
}
|
||||||
|
|
||||||
|
export default md5
|
||||||
384
src/utils/request.js
Normal file
@@ -0,0 +1,384 @@
|
|||||||
|
/**
|
||||||
|
* HTTP请求封装
|
||||||
|
* 基于uni.request进行二次封装
|
||||||
|
*/
|
||||||
|
|
||||||
|
import config from '@/config/api.config.js'
|
||||||
|
|
||||||
|
class Request {
|
||||||
|
constructor() {
|
||||||
|
this.baseURL = config.baseURL
|
||||||
|
this.timeout = config.timeout
|
||||||
|
this.isRedirecting = false // 防止重复跳转登录页
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 核心请求方法
|
||||||
|
* @param {Object} options 请求配置
|
||||||
|
* @returns {Promise}
|
||||||
|
*/
|
||||||
|
request(options) {
|
||||||
|
// 显示loading
|
||||||
|
if (options.loading !== false) {
|
||||||
|
uni.showLoading({
|
||||||
|
title: options.loadingText || '加载中...',
|
||||||
|
mask: true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 打印请求信息(仅POST请求)
|
||||||
|
if (options.method === 'POST') {
|
||||||
|
console.log('=== HTTP POST 请求 ===')
|
||||||
|
console.log('URL:', this.baseURL + options.url)
|
||||||
|
console.log('Method:', options.method)
|
||||||
|
console.log('请求数据:', options.data)
|
||||||
|
console.log('请求头:', this.getHeaders(options.header))
|
||||||
|
}
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
uni.request({
|
||||||
|
url: this.baseURL + options.url,
|
||||||
|
method: options.method || 'GET',
|
||||||
|
data: options.data || {},
|
||||||
|
header: this.getHeaders(options.header),
|
||||||
|
timeout: options.timeout || this.timeout,
|
||||||
|
success: (res) => {
|
||||||
|
// 隐藏loading
|
||||||
|
if (options.loading !== false) {
|
||||||
|
uni.hideLoading()
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('=== HTTP 响应 ===')
|
||||||
|
console.log('状态码:', res.statusCode)
|
||||||
|
console.log('响应数据:', res.data)
|
||||||
|
|
||||||
|
// 处理响应
|
||||||
|
this.handleResponse(res, resolve, reject)
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
// 隐藏loading
|
||||||
|
if (options.loading !== false) {
|
||||||
|
uni.hideLoading()
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('=== HTTP 请求失败 ===')
|
||||||
|
console.log('错误信息:', err)
|
||||||
|
|
||||||
|
// 处理错误
|
||||||
|
this.handleError(err, reject)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取请求头
|
||||||
|
* @param {Object} customHeader 自定义请求头
|
||||||
|
* @returns {Object}
|
||||||
|
*/
|
||||||
|
getHeaders(customHeader = {}) {
|
||||||
|
// 获取token - 使用access_token作为key
|
||||||
|
const token = uni.getStorageSync('access_token') || ''
|
||||||
|
|
||||||
|
return {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Blade-Auth': token ? `bearer ${token}` : '',
|
||||||
|
'Tenant-Id': '000000',
|
||||||
|
...customHeader
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 处理响应数据
|
||||||
|
* @param {Object} res 响应对象
|
||||||
|
* @param {Function} resolve Promise resolve
|
||||||
|
* @param {Function} reject Promise reject
|
||||||
|
*/
|
||||||
|
handleResponse(res, resolve, reject) {
|
||||||
|
const data = res.data
|
||||||
|
|
||||||
|
// 判断HTTP状态码 - 特别处理401
|
||||||
|
if (res.statusCode === 401) {
|
||||||
|
this.handleTokenExpired()
|
||||||
|
reject({
|
||||||
|
statusCode: 401,
|
||||||
|
code: 401,
|
||||||
|
message: '未登录或登录已过期'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 其他HTTP错误状态码
|
||||||
|
if (res.statusCode < 200 || (res.statusCode >= 300 && res.statusCode !== 304)) {
|
||||||
|
this.showError('网络请求失败')
|
||||||
|
reject({
|
||||||
|
statusCode: res.statusCode,
|
||||||
|
code: res.statusCode,
|
||||||
|
message: '网络请求失败'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 特殊处理:OAuth2 token接口直接返回数据(有access_token字段)
|
||||||
|
if (data.access_token) {
|
||||||
|
resolve(data)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 判断业务状态码
|
||||||
|
if (data.code === 200 || data.success === true) {
|
||||||
|
// 请求成功,返回数据
|
||||||
|
resolve(data.data)
|
||||||
|
} else {
|
||||||
|
// 业务错误处理
|
||||||
|
const errorMsg = data.msg || data.message || data.error_description || '请求失败'
|
||||||
|
|
||||||
|
// 特殊错误码处理
|
||||||
|
if (data.code === 401 || data.code === 403) {
|
||||||
|
// token过期或无权限
|
||||||
|
this.handleTokenExpired()
|
||||||
|
}
|
||||||
|
|
||||||
|
this.showError(errorMsg)
|
||||||
|
reject({
|
||||||
|
statusCode: res.statusCode,
|
||||||
|
code: data.code,
|
||||||
|
message: errorMsg,
|
||||||
|
data: data.data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 处理请求错误
|
||||||
|
* @param {Object} err 错误对象
|
||||||
|
* @param {Function} reject Promise reject
|
||||||
|
*/
|
||||||
|
handleError(err, reject) {
|
||||||
|
console.error('请求失败:', err)
|
||||||
|
console.error('请求URL:', this.baseURL)
|
||||||
|
|
||||||
|
let message = '网络请求失败'
|
||||||
|
|
||||||
|
if (err.errMsg) {
|
||||||
|
if (err.errMsg.includes('timeout')) {
|
||||||
|
message = '请求超时,请检查网络'
|
||||||
|
} else if (err.errMsg.includes('fail')) {
|
||||||
|
message = '网络连接失败,请检查服务器地址'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.showError(message)
|
||||||
|
reject({
|
||||||
|
code: undefined,
|
||||||
|
message: '请求失败',
|
||||||
|
data: undefined,
|
||||||
|
error: err,
|
||||||
|
url: this.baseURL
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 显示错误提示
|
||||||
|
* @param {String} message 错误信息
|
||||||
|
*/
|
||||||
|
showError(message) {
|
||||||
|
uni.showToast({
|
||||||
|
title: message,
|
||||||
|
icon: 'none',
|
||||||
|
duration: 2000
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 处理token过期
|
||||||
|
*/
|
||||||
|
handleTokenExpired() {
|
||||||
|
console.log('=== handleTokenExpired 被调用 ===')
|
||||||
|
console.log('isRedirecting:', this.isRedirecting)
|
||||||
|
|
||||||
|
// 防止重复跳转
|
||||||
|
if (this.isRedirecting) {
|
||||||
|
console.log('已经在跳转中,跳过')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.isRedirecting = true
|
||||||
|
|
||||||
|
console.log('开始清除认证信息')
|
||||||
|
// 清除所有认证信息
|
||||||
|
uni.removeStorageSync('access_token')
|
||||||
|
uni.removeStorageSync('refresh_token')
|
||||||
|
uni.removeStorageSync('userInfo')
|
||||||
|
console.log('认证信息已清除')
|
||||||
|
|
||||||
|
// 提示用户
|
||||||
|
console.log('显示Toast提示')
|
||||||
|
uni.showToast({
|
||||||
|
title: '登录已过期,请重新登录',
|
||||||
|
icon: 'none',
|
||||||
|
duration: 1500
|
||||||
|
})
|
||||||
|
|
||||||
|
// 立即跳转,不等待Toast
|
||||||
|
console.log('准备跳转到登录页')
|
||||||
|
|
||||||
|
// 获取当前页面路径
|
||||||
|
const pages = getCurrentPages()
|
||||||
|
console.log('当前页面栈:', pages)
|
||||||
|
const currentPage = pages[pages.length - 1]
|
||||||
|
const currentRoute = currentPage ? currentPage.route : ''
|
||||||
|
|
||||||
|
console.log('当前页面路由:', currentRoute)
|
||||||
|
|
||||||
|
// 如果当前不在登录页,才跳转
|
||||||
|
if (currentRoute !== 'pages/login/login') {
|
||||||
|
console.log('开始执行跳转...')
|
||||||
|
|
||||||
|
// 使用 setTimeout 确保在下一个事件循环执行
|
||||||
|
setTimeout(() => {
|
||||||
|
this.isRedirecting = false
|
||||||
|
|
||||||
|
uni.reLaunch({
|
||||||
|
url: '/pages/login/login',
|
||||||
|
success: () => {
|
||||||
|
console.log('✅ reLaunch 跳转成功')
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
console.error('❌ reLaunch 失败:', err)
|
||||||
|
// 如果reLaunch失败,尝试使用redirectTo
|
||||||
|
uni.redirectTo({
|
||||||
|
url: '/pages/login/login',
|
||||||
|
success: () => {
|
||||||
|
console.log('✅ redirectTo 跳转成功')
|
||||||
|
},
|
||||||
|
fail: (err2) => {
|
||||||
|
console.error('❌ redirectTo 也失败:', err2)
|
||||||
|
// 最后尝试navigateTo
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/login/login',
|
||||||
|
success: () => {
|
||||||
|
console.log('✅ navigateTo 跳转成功')
|
||||||
|
},
|
||||||
|
fail: (err3) => {
|
||||||
|
console.error('❌ navigateTo 也失败:', err3)
|
||||||
|
console.error('所有跳转方式都失败了!')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}, 100)
|
||||||
|
} else {
|
||||||
|
console.log('当前已在登录页,不需要跳转')
|
||||||
|
this.isRedirecting = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* GET请求
|
||||||
|
* @param {String} url 请求地址
|
||||||
|
* @param {Object} data 请求参数
|
||||||
|
* @param {Object} options 额外配置
|
||||||
|
* @returns {Promise}
|
||||||
|
*/
|
||||||
|
get(url, data = {}, options = {}) {
|
||||||
|
return this.request({
|
||||||
|
url,
|
||||||
|
method: 'GET',
|
||||||
|
data,
|
||||||
|
...options
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* POST请求
|
||||||
|
* @param {String} url 请求地址
|
||||||
|
* @param {Object|String} data 请求参数(可以是对象或字符串)
|
||||||
|
* @param {Object} options 额外配置
|
||||||
|
* @returns {Promise}
|
||||||
|
*/
|
||||||
|
post(url, data = {}, options = {}) {
|
||||||
|
return this.request({
|
||||||
|
url,
|
||||||
|
method: 'POST',
|
||||||
|
data,
|
||||||
|
...options
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* PUT请求
|
||||||
|
* @param {String} url 请求<E8AFB7><E6B182>址
|
||||||
|
* @param {Object} data 请求参数
|
||||||
|
* @param {Object} options 额外配置
|
||||||
|
* @returns {Promise}
|
||||||
|
*/
|
||||||
|
put(url, data = {}, options = {}) {
|
||||||
|
return this.request({
|
||||||
|
url,
|
||||||
|
method: 'PUT',
|
||||||
|
data,
|
||||||
|
...options
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* DELETE请求
|
||||||
|
* @param {String} url 请求地址
|
||||||
|
* @param {Object} data 请求参数
|
||||||
|
* @param {Object} options 额外配置
|
||||||
|
* @returns {Promise}
|
||||||
|
*/
|
||||||
|
delete(url, data = {}, options = {}) {
|
||||||
|
return this.request({
|
||||||
|
url,
|
||||||
|
method: 'DELETE',
|
||||||
|
data,
|
||||||
|
...options
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 文件上传
|
||||||
|
* @param {String} url 上传地址
|
||||||
|
* @param {String} filePath 文件路径
|
||||||
|
* @param {Object} formData 额外数据
|
||||||
|
* @returns {Promise}
|
||||||
|
*/
|
||||||
|
upload(url, filePath, formData = {}) {
|
||||||
|
uni.showLoading({
|
||||||
|
title: '上传中...',
|
||||||
|
mask: true
|
||||||
|
})
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
uni.uploadFile({
|
||||||
|
url: this.baseURL + url,
|
||||||
|
filePath,
|
||||||
|
name: 'file',
|
||||||
|
formData,
|
||||||
|
header: this.getHeaders(),
|
||||||
|
success: (res) => {
|
||||||
|
uni.hideLoading()
|
||||||
|
|
||||||
|
const data = JSON.parse(res.data)
|
||||||
|
if (data.code === 200) {
|
||||||
|
resolve(data.data)
|
||||||
|
} else {
|
||||||
|
this.showError(data.msg || '上传失败')
|
||||||
|
reject(data)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
uni.hideLoading()
|
||||||
|
this.showError('上传失败')
|
||||||
|
reject(err)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 导出实例
|
||||||
|
export default new Request()
|
||||||
@@ -45,8 +45,30 @@ export function setRefreshToken(token) {
|
|||||||
* 获取用户信息
|
* 获取用户信息
|
||||||
*/
|
*/
|
||||||
export function getUserInfo() {
|
export function getUserInfo() {
|
||||||
|
try {
|
||||||
const userInfo = uni.getStorageSync(USER_INFO_KEY)
|
const userInfo = uni.getStorageSync(USER_INFO_KEY)
|
||||||
return userInfo ? JSON.parse(userInfo) : null
|
|
||||||
|
// 如果没有数据,返回 null
|
||||||
|
if (!userInfo) {
|
||||||
|
console.log('本地存储中没有用户信息')
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果已经是对象,直接返回
|
||||||
|
if (typeof userInfo === 'object') {
|
||||||
|
return userInfo
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果是字符串,尝试解析
|
||||||
|
if (typeof userInfo === 'string') {
|
||||||
|
return JSON.parse(userInfo)
|
||||||
|
}
|
||||||
|
|
||||||
|
return null
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取用户信息失败:', error)
|
||||||
|
return null
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -1,27 +1,30 @@
|
|||||||
/**
|
|
||||||
* Vue CLI 配置文件
|
|
||||||
* 用于配置开发服务器代理,解决跨域问题
|
|
||||||
*/
|
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
|
outputDir: 'dist/build/h5',
|
||||||
|
assetsDir: 'static',
|
||||||
|
publicPath: './',
|
||||||
|
productionSourceMap: false,
|
||||||
|
css: {
|
||||||
|
extract: true
|
||||||
|
},
|
||||||
devServer: {
|
devServer: {
|
||||||
|
host: '0.0.0.0',
|
||||||
|
port: 8084,
|
||||||
|
disableHostCheck: true,
|
||||||
proxy: {
|
proxy: {
|
||||||
// 代理所有 /api 开头的请求
|
|
||||||
'/api': {
|
'/api': {
|
||||||
target: 'http://localhost:8123', // 后端服务地址
|
target: 'http://localhost:8123',
|
||||||
changeOrigin: true, // 改变请求源
|
changeOrigin: true,
|
||||||
ws: true, // 支持websocket
|
ws: true,
|
||||||
pathRewrite: {
|
pathRewrite: {
|
||||||
// 将 /api 重写为空,因为后端没有 /api 前缀
|
|
||||||
'^/api': ''
|
'^/api': ''
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// 确保 transpileDependencies 配置正确
|
|
||||||
transpileDependencies: [],
|
transpileDependencies: [],
|
||||||
|
chainWebpack: config => {
|
||||||
// 生产环境配置
|
if (process.env.NODE_ENV === 'production') {
|
||||||
productionSourceMap: false
|
config.performance.hints(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||