Compare commits
97 Commits
prod
...
1ade861aae
| Author | SHA1 | Date | |
|---|---|---|---|
| 1ade861aae | |||
| 3293356668 | |||
| fefdb3527d | |||
| bededd89fa | |||
| 076769c4d8 | |||
| 7d503c09e0 | |||
| 15a3e4120d | |||
| d38454453b | |||
| 192db06ac5 | |||
| e70ae0add5 | |||
| 162a6820e9 | |||
| fcf346905b | |||
| bf3f3a3afe | |||
| 852b2ce799 | |||
| 5c36af30cd | |||
| 2b14274453 | |||
| df2e8c80bb | |||
| 79088d0902 | |||
| bf72c9c63e | |||
| 33d28c6a45 | |||
| efff88db8e | |||
| 301fc4ee42 | |||
| 9a6ca0700e | |||
| 6596ea977d | |||
| 2c0edb533e | |||
| 245daaff9b | |||
| f272df912b | |||
| 20bf9e1637 | |||
| cbb7bce746 | |||
| 89885a59f4 | |||
| a5c6afe647 | |||
| 1c75c06eaa | |||
| 0b93d99688 | |||
| 34a32b108c | |||
| 3bc2e6c14b | |||
| c168a909db | |||
| ff64fab323 | |||
| 9d45abd693 | |||
| 6db2142cf6 | |||
| 43123df18f | |||
| c3570afeba | |||
| 860b01d5eb | |||
| 4761206a6e | |||
| 9c554a9366 | |||
| c298e258cc | |||
| 6cb5288631 | |||
| 6d434e89ab | |||
| 996472953a | |||
| 8d918b008e | |||
| a66d8a03c6 | |||
| 47fe964c31 | |||
| 2ed1c4a57d | |||
| b168fd54a4 | |||
| da023c60f5 | |||
| 956e82e10c | |||
| cf8d6135ff | |||
| b7fdf97156 | |||
| a79486ad50 | |||
| cb4027418d | |||
| 5e69cd1d47 | |||
| 3f181778a1 | |||
| 96cc69f041 | |||
| b1238eff57 | |||
| c8c2abf3e7 | |||
| 860cdbe332 | |||
| 8b9c862b96 | |||
| ea60371c44 | |||
| 478c0bc2b2 | |||
| 19391808ef | |||
| 9cc6ef4b88 | |||
| 76efe5a207 | |||
| 3bfd8b2328 | |||
| fc14489ab3 | |||
| 3cf2470ffc | |||
| 834841a3d5 | |||
| eaa1950a18 | |||
| aba2da56d7 | |||
| 24314e5ec8 | |||
| 45cb785ba4 | |||
| c4ad44b02a | |||
| df4f8d8fd5 | |||
| 6e62ec4348 | |||
| cf22fe566d | |||
| 31361cff1e | |||
| 235556e703 | |||
| 0a8c6e7477 | |||
| 183a1a8385 | |||
| 0e936b8e20 | |||
| d8a94c8ff6 | |||
| 29c6b174d8 | |||
| 4dcfdeda68 | |||
| 3ea1a6734a | |||
| d1bd036351 | |||
| a6becf67ff | |||
| bb43de3a62 | |||
| d2dc6c51cf | |||
| 8c66ef78c6 |
269
AGENTS.md
Normal file
@@ -0,0 +1,269 @@
|
|||||||
|
# AI Agent 企业级行为策略(Ultimate Edition)
|
||||||
|
|
||||||
|
## 核心目标
|
||||||
|
|
||||||
|
AI 应:
|
||||||
|
|
||||||
|
* 像高级工程师一样思考
|
||||||
|
* 保持智能
|
||||||
|
* 保持上下文理解能力
|
||||||
|
* 保持组件联动能力
|
||||||
|
* 同时避免无意义 token 消耗
|
||||||
|
|
||||||
|
目标不是限制 AI。
|
||||||
|
|
||||||
|
目标是:
|
||||||
|
|
||||||
|
* 智能
|
||||||
|
* 克制
|
||||||
|
* 稳定
|
||||||
|
* 高效
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# AI 工作模式
|
||||||
|
|
||||||
|
默认采用:
|
||||||
|
|
||||||
|
Think First
|
||||||
|
Explore Second
|
||||||
|
Modify Last
|
||||||
|
|
||||||
|
即:
|
||||||
|
|
||||||
|
1. 先理解需求
|
||||||
|
2. 再推理可能相关文件
|
||||||
|
3. 再最小化读取
|
||||||
|
4. 最后修改代码
|
||||||
|
|
||||||
|
禁止:
|
||||||
|
|
||||||
|
* 无脑全项目扫描
|
||||||
|
* 不经思考直接 grep
|
||||||
|
* 无限递归读取
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# 智能按需扫描(核心规则)
|
||||||
|
|
||||||
|
允许 AI 自动:
|
||||||
|
|
||||||
|
* 分析当前任务
|
||||||
|
* 分析 import
|
||||||
|
* 分析组件依赖
|
||||||
|
* 分析 store 依赖
|
||||||
|
* 分析 api 依赖
|
||||||
|
* 分析 types 依赖
|
||||||
|
* 分析 utils 依赖
|
||||||
|
|
||||||
|
允许:
|
||||||
|
|
||||||
|
* 自动读取直接依赖文件
|
||||||
|
* 自动修复 import
|
||||||
|
* 自动修复类型引用
|
||||||
|
* 自动分析运行链路
|
||||||
|
|
||||||
|
但必须:
|
||||||
|
|
||||||
|
* 最小化扫描范围
|
||||||
|
* 最小化 token 消耗
|
||||||
|
* 禁止无限递归探索
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# 扫描深度限制
|
||||||
|
|
||||||
|
默认最大依赖深度:
|
||||||
|
|
||||||
|
2 层
|
||||||
|
|
||||||
|
例如:
|
||||||
|
|
||||||
|
index.vue
|
||||||
|
-> ProductCard.vue
|
||||||
|
-> product.ts
|
||||||
|
|
||||||
|
允许读取:
|
||||||
|
|
||||||
|
* ProductCard.vue
|
||||||
|
* product.ts
|
||||||
|
|
||||||
|
禁止继续无限扫描。
|
||||||
|
|
||||||
|
如果任务复杂:
|
||||||
|
|
||||||
|
必须先输出分析计划,
|
||||||
|
等待确认后再扩大扫描范围。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# AI 自由发挥边界
|
||||||
|
|
||||||
|
允许:
|
||||||
|
|
||||||
|
* 合理重构
|
||||||
|
* 合理组件化
|
||||||
|
* 合理优化结构
|
||||||
|
* 合理优化样式
|
||||||
|
* 合理优化复用
|
||||||
|
* 合理修复低级问题
|
||||||
|
* 合理修复 import
|
||||||
|
* 合理修复类型错误
|
||||||
|
|
||||||
|
禁止:
|
||||||
|
|
||||||
|
* 为了炫技重构项目
|
||||||
|
* 无意义抽象
|
||||||
|
* 过度设计
|
||||||
|
* 无意义拆分
|
||||||
|
* 无意义新增依赖
|
||||||
|
* 自动升级依赖
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Token 经济策略
|
||||||
|
|
||||||
|
Token 应优先用于:
|
||||||
|
|
||||||
|
* 推理
|
||||||
|
* 架构理解
|
||||||
|
* 业务逻辑
|
||||||
|
* UI 结构优化
|
||||||
|
* 类型安全
|
||||||
|
* 组件联动
|
||||||
|
|
||||||
|
禁止浪费在:
|
||||||
|
|
||||||
|
* 全项目 grep
|
||||||
|
* 重复读取
|
||||||
|
* 重复输出
|
||||||
|
* 重复解释
|
||||||
|
* 输出完整项目
|
||||||
|
* 输出未修改代码
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# 页面生成规则(Figma / uni-app)
|
||||||
|
|
||||||
|
允许:
|
||||||
|
|
||||||
|
* 自动组件化
|
||||||
|
* 自动布局优化
|
||||||
|
* 自动结构优化
|
||||||
|
* 自动提取公共组件
|
||||||
|
|
||||||
|
优先:
|
||||||
|
|
||||||
|
* flex 布局
|
||||||
|
* 可维护性
|
||||||
|
* uni-app 最佳实践
|
||||||
|
* 低嵌套结构
|
||||||
|
* 高复用结构
|
||||||
|
|
||||||
|
禁止:
|
||||||
|
|
||||||
|
* div 套 div
|
||||||
|
* 全 absolute 页面
|
||||||
|
* 垃圾 HTML
|
||||||
|
* 无意义嵌套
|
||||||
|
* 内联 style 泛滥
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# uni-app 规则
|
||||||
|
|
||||||
|
必须:
|
||||||
|
|
||||||
|
* 使用 view/text/image
|
||||||
|
* px 转 rpx
|
||||||
|
* 使用 script setup
|
||||||
|
* scoped scss
|
||||||
|
* 兼容:
|
||||||
|
|
||||||
|
* H5
|
||||||
|
* 微信小程序
|
||||||
|
* App
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# 大任务策略
|
||||||
|
|
||||||
|
复杂任务:
|
||||||
|
|
||||||
|
必须:
|
||||||
|
|
||||||
|
1. 先分析
|
||||||
|
2. 先规划
|
||||||
|
3. 先输出方案
|
||||||
|
4. 等待确认
|
||||||
|
|
||||||
|
再:
|
||||||
|
|
||||||
|
5. 编码
|
||||||
|
|
||||||
|
禁止直接进入大规模代码生成。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# 修改策略
|
||||||
|
|
||||||
|
优先:
|
||||||
|
|
||||||
|
* diff 修改
|
||||||
|
* 小范围 patch
|
||||||
|
* 保持现有架构
|
||||||
|
* 保持现有组件体系
|
||||||
|
* 保持现有 API 结构
|
||||||
|
|
||||||
|
允许:
|
||||||
|
|
||||||
|
* 小范围智能优化
|
||||||
|
|
||||||
|
禁止:
|
||||||
|
|
||||||
|
* 全项目重构
|
||||||
|
* 无关文件修改
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# 高级工程师行为模式
|
||||||
|
|
||||||
|
AI 应像高级工程师:
|
||||||
|
|
||||||
|
* 先思考
|
||||||
|
* 再探索
|
||||||
|
* 再修改
|
||||||
|
|
||||||
|
而不是:
|
||||||
|
|
||||||
|
* 无脑扫描器
|
||||||
|
* Token 消耗机器
|
||||||
|
* 低级代码生成器
|
||||||
|
|
||||||
|
AI 应主动:
|
||||||
|
|
||||||
|
* 控制扫描范围
|
||||||
|
* 控制输出长度
|
||||||
|
* 控制修改范围
|
||||||
|
* 控制复杂度
|
||||||
|
|
||||||
|
同时保持:
|
||||||
|
|
||||||
|
* 智能
|
||||||
|
* 联动能力
|
||||||
|
* 架构理解能力
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# 默认输出规则
|
||||||
|
|
||||||
|
默认:
|
||||||
|
|
||||||
|
* 仅输出修改部分
|
||||||
|
* 不重复未修改代码
|
||||||
|
* 少解释
|
||||||
|
* 优先 patch
|
||||||
|
* 优先 diff
|
||||||
|
|
||||||
|
除非用户明确要求:
|
||||||
|
否则不要输出完整项目。
|
||||||
116
doc.md
Normal file
@@ -0,0 +1,116 @@
|
|||||||
|
# 微信小程序多人协作分支管理规范
|
||||||
|
|
||||||
|
## 一、分支结构
|
||||||
|
|
||||||
|
```
|
||||||
|
main (主分支/生产环境)
|
||||||
|
└── test (测试分支)
|
||||||
|
└── feature/xxx (个人开发分支)
|
||||||
|
```
|
||||||
|
|
||||||
|
| 分支 | 用途 | 稳定性 |
|
||||||
|
|------|------|--------|
|
||||||
|
| main | 生产环境代码 | 最高,仅接受测试通过的代码合并 |
|
||||||
|
| test | 测试环境,用于体验版发布 | 中,需验证后合并到 main |
|
||||||
|
| feature/xxx | 个人开发分支 | 低,按需命名,如 `feature/user-center` |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 二、开发流程
|
||||||
|
|
||||||
|
### 1. 开始开发
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 确保本地 main 最新
|
||||||
|
git checkout main
|
||||||
|
git pull origin main
|
||||||
|
|
||||||
|
# 从 main 创建自己的开发分支
|
||||||
|
git checkout -b feature/your-name-work
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. 开发阶段
|
||||||
|
|
||||||
|
- 在个人分支上开发功能
|
||||||
|
- 频繁提交,保持原子性提交
|
||||||
|
- 定期 `git pull origin main` 同步主线变更,避免合并冲突累积
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add .
|
||||||
|
git commit -m "feat: 完成xxx功能"
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. 合并到 test 分支
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 切换到 test
|
||||||
|
git checkout test
|
||||||
|
git pull origin test
|
||||||
|
|
||||||
|
# 合并个人分支
|
||||||
|
git merge feature/your-name-work
|
||||||
|
|
||||||
|
# 推送 test 分支
|
||||||
|
git push origin test
|
||||||
|
```
|
||||||
|
|
||||||
|
### 4. 打包上传体验版
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 执行打包
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
打包完成后:
|
||||||
|
|
||||||
|
1. 打开 **微信开发者工具**
|
||||||
|
2. 导入项目,选择 `dist/build/mp-weixin` 目录
|
||||||
|
3. 在开发者工具中点击 **上传**
|
||||||
|
4. 登录 [微信公众平台](https://mp.weixin.qq.com)
|
||||||
|
5. 进入 **管理->版本管理**
|
||||||
|
6. 找到刚上传的版本,点击 **选为体验版**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 三、合并到 main 分支
|
||||||
|
|
||||||
|
当 test 分支验证通过后,将其合并到 main:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git checkout main
|
||||||
|
git pull origin main
|
||||||
|
|
||||||
|
git merge origin/test
|
||||||
|
|
||||||
|
git push origin main
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 四、冲突处理
|
||||||
|
|
||||||
|
合并时如有冲突,在个人分支解决后再合并:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git checkout feature/your-name-work
|
||||||
|
git merge main
|
||||||
|
# 解决冲突后
|
||||||
|
git add .
|
||||||
|
git commit -m "merge: 解决与main的冲突"
|
||||||
|
git push origin feature/your-name-work
|
||||||
|
|
||||||
|
# 重新合并到 test
|
||||||
|
git checkout test
|
||||||
|
git merge feature/your-name-work
|
||||||
|
git push origin test
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 五、注意事项
|
||||||
|
|
||||||
|
1. **禁止直接向 main 和 test 分支提交代码**,必须通过合并
|
||||||
|
2. **每次合并前先拉取最新代码**,避免覆盖他人改动
|
||||||
|
3. **体验版发布前确认代码已提交**,避免遗漏
|
||||||
|
4. **开发分支命名建议**:`feature/姓名-功能名`,如 `feature/zhangsan-login`
|
||||||
|
5. **删除已合并的开发分支**:`git branch -d feature/your-name-work`
|
||||||
@@ -25,6 +25,7 @@
|
|||||||
"@dcloudio/uni-quickapp-webview": "3.0.0-4060620250520001",
|
"@dcloudio/uni-quickapp-webview": "3.0.0-4060620250520001",
|
||||||
"@dcloudio/uni-ui": "^1.5.11",
|
"@dcloudio/uni-ui": "^1.5.11",
|
||||||
"pinia": "2.0.36",
|
"pinia": "2.0.36",
|
||||||
|
"pinia-plugin-persistedstate": "3.2.1",
|
||||||
"vue": "^3.4.21",
|
"vue": "^3.4.21",
|
||||||
"vue-i18n": "^9.1.9"
|
"vue-i18n": "^9.1.9"
|
||||||
},
|
},
|
||||||
|
|||||||
23
src/App.vue
@@ -21,7 +21,10 @@
|
|||||||
} = storeToRefs(store);
|
} = storeToRefs(store);
|
||||||
const {
|
const {
|
||||||
updateUser,
|
updateUser,
|
||||||
updateOnline
|
updateOnline,
|
||||||
|
updateDevice,
|
||||||
|
updateGame,
|
||||||
|
updateRoomNumber
|
||||||
} = store;
|
} = store;
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
@@ -46,6 +49,22 @@
|
|||||||
updateUser(value);
|
updateUser(value);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function onSessionKickedOut() {
|
||||||
|
uni.removeStorageSync(
|
||||||
|
`${uni.getAccountInfoSync().miniProgram.envVersion}_token`
|
||||||
|
);
|
||||||
|
updateUser();
|
||||||
|
updateDevice("", "");
|
||||||
|
updateOnline(false);
|
||||||
|
updateGame(false, "");
|
||||||
|
updateRoomNumber("");
|
||||||
|
uni.showModal({
|
||||||
|
title: "提示",
|
||||||
|
content: "账号已在其他设备登录",
|
||||||
|
showCancel: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
async function emitUpdateOnline() {
|
async function emitUpdateOnline() {
|
||||||
const data = await getDeviceBatteryAPI();
|
const data = await getDeviceBatteryAPI();
|
||||||
updateOnline(data.online);
|
updateOnline(data.online);
|
||||||
@@ -65,6 +84,7 @@
|
|||||||
onShow(() => {
|
onShow(() => {
|
||||||
uni.$on("update-user", emitUpdateUser);
|
uni.$on("update-user", emitUpdateUser);
|
||||||
uni.$on("update-online", emitUpdateOnline);
|
uni.$on("update-online", emitUpdateOnline);
|
||||||
|
uni.$on("session-kicked-out", onSessionKickedOut);
|
||||||
const token = uni.getStorageSync(
|
const token = uni.getStorageSync(
|
||||||
`${uni.getAccountInfoSync().miniProgram.envVersion}_token`
|
`${uni.getAccountInfoSync().miniProgram.envVersion}_token`
|
||||||
);
|
);
|
||||||
@@ -77,6 +97,7 @@
|
|||||||
onHide(() => {
|
onHide(() => {
|
||||||
uni.$off("update-user", emitUpdateUser);
|
uni.$off("update-user", emitUpdateUser);
|
||||||
uni.$off("update-online", emitUpdateOnline);
|
uni.$off("update-online", emitUpdateOnline);
|
||||||
|
uni.$off("session-kicked-out", onSessionKickedOut);
|
||||||
websocket.closeWebSocket();
|
websocket.closeWebSocket();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
66
src/apis.js
@@ -6,8 +6,8 @@ try {
|
|||||||
|
|
||||||
switch (envVersion) {
|
switch (envVersion) {
|
||||||
case "develop": // 开发版
|
case "develop": // 开发版
|
||||||
BASE_URL = "http://localhost:8000/api/shoot";
|
// BASE_URL = "http://192.168.1.30:8000/api/shoot";
|
||||||
// BASE_URL = "https://apitest.shelingxingqiu.com/api/shoot";
|
BASE_URL = "https://apitest.shelingxingqiu.com/api/shoot";
|
||||||
break;
|
break;
|
||||||
case "trial": // 体验版
|
case "trial": // 体验版
|
||||||
BASE_URL = "https://apitest.shelingxingqiu.com/api/shoot";
|
BASE_URL = "https://apitest.shelingxingqiu.com/api/shoot";
|
||||||
@@ -46,6 +46,8 @@ function request(method, url, data = {}) {
|
|||||||
`${uni.getAccountInfoSync().miniProgram.envVersion}_token`
|
`${uni.getAccountInfoSync().miniProgram.envVersion}_token`
|
||||||
);
|
);
|
||||||
uni.$emit("update-user");
|
uni.$emit("update-user");
|
||||||
|
reject({ type: "AUTH_INVALID", message });
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
if (message === "ROOM_FULL") {
|
if (message === "ROOM_FULL") {
|
||||||
resolve({full: true});
|
resolve({full: true});
|
||||||
@@ -496,3 +498,63 @@ export const kickPlayerAPI = (number, userId) => {
|
|||||||
userId,
|
userId,
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 获取赛季列表
|
||||||
|
export const getSeasonList = () => {
|
||||||
|
return request("GET", "/index/season/list");
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取赛季统计
|
||||||
|
export const getSeasonStats = (seasonId) => {
|
||||||
|
const data = {};
|
||||||
|
if (seasonId !== undefined && seasonId !== null) data.seasonId = seasonId;
|
||||||
|
return request("GET", "/index/season/stats", data);
|
||||||
|
};
|
||||||
|
|
||||||
|
//获取积分榜
|
||||||
|
export const getScoreRankList = (seasonId, page, perPage) => {
|
||||||
|
return request("GET", "/index/score/rank/list", {
|
||||||
|
seasonId,
|
||||||
|
page,
|
||||||
|
perPage
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取10环排行榜
|
||||||
|
export const getTenRingRankList = (seasonId, page, perPage) => {
|
||||||
|
return request("GET", "/index/tenRing/rank/list", {
|
||||||
|
seasonId,
|
||||||
|
page,
|
||||||
|
perPage
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取MVP排行榜
|
||||||
|
export const getMvpRankList = (seasonId, page, perPage) => {
|
||||||
|
return request("GET", "/index/mvp/rank/list", {
|
||||||
|
seasonId,
|
||||||
|
page,
|
||||||
|
perPage
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取我的积分排名
|
||||||
|
export const getMyScoreRank = (seasonId) => {
|
||||||
|
const data = {};
|
||||||
|
if (seasonId !== undefined && seasonId !== null) data.seasonId = seasonId;
|
||||||
|
return request("GET", "/index/myScoreRank", data);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取我的MVP排名
|
||||||
|
export const getMyMvpRank = (seasonId) => {
|
||||||
|
const data = {};
|
||||||
|
if (seasonId !== undefined && seasonId !== null) data.seasonId = seasonId;
|
||||||
|
return request("GET", "/index/myMvpRank", data);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取我的10环排名
|
||||||
|
export const getMyTenRingRank = (seasonId) => {
|
||||||
|
const data = {};
|
||||||
|
if (seasonId !== undefined && seasonId !== null) data.seasonId = seasonId;
|
||||||
|
return request("GET", "/index/myTenRingRank", data);
|
||||||
|
};
|
||||||
|
|||||||
@@ -1,4 +1,6 @@
|
|||||||
export const audioFils = {
|
export const audioFils = {
|
||||||
|
"20CM全环靶": "https://static.shelingxingqiu.com/shootmini/static/audio/20CM%E5%85%A8%E7%8E%AF%E9%9D%B6-%E6%97%A0%E6%95%88.mp3",
|
||||||
|
"40CM全环靶": "https://static.shelingxingqiu.com/shootmini/static/audio/40CM%E5%85%A8%E7%8E%AF%E9%9D%B6-%E6%97%A0%E6%95%88.mp3",
|
||||||
// 激光已校准:
|
// 激光已校准:
|
||||||
// "https://static.shelingxingqiu.com/attachment/2025-10-29/ddupaur1vdkyhzaqdc.mp3",
|
// "https://static.shelingxingqiu.com/attachment/2025-10-29/ddupaur1vdkyhzaqdc.mp3",
|
||||||
胜利: "https://static.shelingxingqiu.com/attachment/2025-09-17/dcuo9yjp0kt5msvmvd.mp3",
|
胜利: "https://static.shelingxingqiu.com/attachment/2025-09-17/dcuo9yjp0kt5msvmvd.mp3",
|
||||||
@@ -36,7 +38,7 @@ export const audioFils = {
|
|||||||
请开始射击:
|
请开始射击:
|
||||||
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcutzdrl5u0iromqhf.mp3",
|
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcutzdrl5u0iromqhf.mp3",
|
||||||
射击无效:
|
射击无效:
|
||||||
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcutya55ufiiw8oo55.mp3",
|
"https://static.shelingxingqiu.com/shootmini/static/audio/%E5%B0%84%E7%AE%AD%E6%97%A0%E6%95%88%E6%A3%80%E6%9F%A5%E8%B7%9D%E7%A6%BB%E5%92%8C%E9%9D%B6%E7%BA%B8.mp3",
|
||||||
未上靶:
|
未上靶:
|
||||||
"https://static.shelingxingqiu.com/attachment/2025-11-12/de6n45o3tsm1v4unam.mp3",
|
"https://static.shelingxingqiu.com/attachment/2025-11-12/de6n45o3tsm1v4unam.mp3",
|
||||||
"1环":
|
"1环":
|
||||||
|
|||||||
@@ -18,31 +18,31 @@ const props = defineProps({
|
|||||||
<image
|
<image
|
||||||
class="bg-image"
|
class="bg-image"
|
||||||
v-if="type === 0"
|
v-if="type === 0"
|
||||||
src="../static/app-bg.png"
|
src="https://static.shelingxingqiu.com/shootmini/static/app-bg.png"
|
||||||
mode="widthFix"
|
mode="widthFix"
|
||||||
/>
|
/>
|
||||||
<image
|
<image
|
||||||
class="bg-image"
|
class="bg-image"
|
||||||
v-if="type === 1"
|
v-if="type === 1"
|
||||||
src="../static/app-bg2.png"
|
src="https://static.shelingxingqiu.com/shootmini/static/app-bg2.png"
|
||||||
mode="widthFix"
|
mode="widthFix"
|
||||||
/>
|
/>
|
||||||
<image
|
<image
|
||||||
class="bg-image"
|
class="bg-image"
|
||||||
v-if="type === 2"
|
v-if="type === 2"
|
||||||
src="../static/app-bg3.png"
|
src="https://static.shelingxingqiu.com/shootmini/static/app-bg3.png"
|
||||||
:style="{ height: capsuleHeight + 50 + 'px' }"
|
:style="{ height: capsuleHeight + 50 + 'px' }"
|
||||||
/>
|
/>
|
||||||
<image
|
<image
|
||||||
class="bg-image"
|
class="bg-image"
|
||||||
v-if="type === 3"
|
v-if="type === 3"
|
||||||
src="../static/app-bg4.png"
|
src="https://static.shelingxingqiu.com/shootmini/static/app-bg4.png"
|
||||||
mode="widthFix"
|
mode="widthFix"
|
||||||
/>
|
/>
|
||||||
<image
|
<image
|
||||||
class="bg-image"
|
class="bg-image"
|
||||||
v-if="type === 4"
|
v-if="type === 4"
|
||||||
src="../static/app-bg5.png"
|
src="https://static.shelingxingqiu.com/shootmini/static/app-bg5.png"
|
||||||
mode="widthFix"
|
mode="widthFix"
|
||||||
/>
|
/>
|
||||||
<image
|
<image
|
||||||
@@ -51,6 +51,12 @@ const props = defineProps({
|
|||||||
src="https://static.shelingxingqiu.com/attachment/2026-01-05/dfgf3b5kp459tfyn0f.png"
|
src="https://static.shelingxingqiu.com/attachment/2026-01-05/dfgf3b5kp459tfyn0f.png"
|
||||||
mode="widthFix"
|
mode="widthFix"
|
||||||
/>
|
/>
|
||||||
|
<image
|
||||||
|
class="bg-image"
|
||||||
|
v-if="type === 6"
|
||||||
|
src="https://static.shelingxingqiu.com/shootmini/static/rank/rank-bg.png"
|
||||||
|
mode="widthFix"
|
||||||
|
/>
|
||||||
<view class="bg-overlay" v-if="type === 0"></view>
|
<view class="bg-overlay" v-if="type === 0"></view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@@ -67,7 +73,7 @@ const props = defineProps({
|
|||||||
|
|
||||||
.bg-image {
|
.bg-image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
/* height: 100%; */
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-overlay {
|
.bg-overlay {
|
||||||
|
|||||||
@@ -19,8 +19,12 @@ const props = defineProps({
|
|||||||
});
|
});
|
||||||
const loading = ref(false);
|
const loading = ref(false);
|
||||||
|
|
||||||
|
/** 统一获取当前环境 token,用于守卫:无有效 token 时不发起接口请求 */
|
||||||
|
const getToken = () =>
|
||||||
|
uni.getStorageSync(`${uni.getAccountInfoSync().miniProgram.envVersion}_token`);
|
||||||
|
|
||||||
onShow(async () => {
|
onShow(async () => {
|
||||||
if (user.value.id) {
|
if (user.value.id && getToken()) {
|
||||||
setTimeout(async () => {
|
setTimeout(async () => {
|
||||||
const state = await getUserGameState();
|
const state = await getUserGameState();
|
||||||
updateGame(state.gaming, state.roomId);
|
updateGame(state.gaming, state.roomId);
|
||||||
@@ -33,7 +37,8 @@ watch(
|
|||||||
async (value) => {
|
async (value) => {
|
||||||
if (!value.id) {
|
if (!value.id) {
|
||||||
updateGame(false, "");
|
updateGame(false, "");
|
||||||
} else {
|
} else if (getToken()) {
|
||||||
|
// 有有效 token 时才查询在局状态,避免 token 失效时反复发起无效请求
|
||||||
const state = await getUserGameState();
|
const state = await getUserGameState();
|
||||||
updateGame(state.gaming, state.roomId);
|
updateGame(state.gaming, state.roomId);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -80,28 +80,35 @@ defineProps({
|
|||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view
|
<!-- 大乱斗玩家列表:scroll-view 作为横向滚动容器 -->
|
||||||
|
<!-- 小程序中 scroll-view 不支持直接 display:flex,需内部 wrapper view 承载 flex 布局 -->
|
||||||
|
<!-- 仅当玩家 >5 人(内容溢出宽度)时才阻止冒泡,防止与外层 swiper 切换 tab 的手势冲突 -->
|
||||||
|
<scroll-view
|
||||||
v-if="players.length"
|
v-if="players.length"
|
||||||
class="players-melee"
|
class="players-melee"
|
||||||
|
scroll-x
|
||||||
|
@touchmove="(e) => players.length > 5 && e.stopPropagation()"
|
||||||
:style="{ paddingTop: showHeader ? '15px' : '0' }"
|
:style="{ paddingTop: showHeader ? '15px' : '0' }"
|
||||||
>
|
>
|
||||||
<view
|
<view class="players-melee-inner">
|
||||||
v-for="(player, index) in players"
|
<view
|
||||||
:key="index"
|
v-for="(player, index) in players"
|
||||||
:style="{
|
:key="index"
|
||||||
backgroundColor: meleeAvatarColors[index],
|
:style="{
|
||||||
width: `${Math.max(100 / players.length, 18)}vw`,
|
backgroundColor: meleeAvatarColors[index],
|
||||||
}"
|
width: `${Math.max(100 / players.length, 18)}vw`,
|
||||||
>
|
}"
|
||||||
<Avatar
|
>
|
||||||
:src="player.avatar"
|
<Avatar
|
||||||
:rankLvl="showRank ? undefined : player.rankLvl"
|
:src="player.avatar"
|
||||||
:size="40"
|
:rankLvl="showRank ? undefined : player.rankLvl"
|
||||||
:rank="showRank ? index + 1 : 0"
|
:size="40"
|
||||||
/>
|
:rank="showRank ? index + 1 : 0"
|
||||||
<text class="player-name">{{ player.name }}</text>
|
/>
|
||||||
|
<text class="player-name">{{ player.name }}</text>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -144,17 +151,21 @@ defineProps({
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
.players-melee {
|
.players-melee {
|
||||||
display: flex;
|
|
||||||
height: 80px;
|
height: 80px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow-x: auto;
|
|
||||||
}
|
}
|
||||||
.players-melee::-webkit-scrollbar {
|
.players-melee::-webkit-scrollbar {
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
color: transparent;
|
color: transparent;
|
||||||
}
|
}
|
||||||
.players-melee > view {
|
/* 小程序 scroll-view 不支持直接 flex,通过内层 wrapper 承载横向排列 */
|
||||||
|
.players-melee-inner {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
}
|
||||||
|
.players-melee-inner > view {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
@@ -17,12 +17,19 @@ const props = defineProps({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const battleMode = ref(1);
|
/** 对战模式:0=未选 1=1v1 2=乱斗 3=2v2 4=3v3 */
|
||||||
const targetMode = ref(1);
|
const battleMode = ref(0);
|
||||||
|
/** 靶纸尺寸:0=未选 1=20cm 2=40cm */
|
||||||
|
const targetMode = ref(0);
|
||||||
const loading = ref(false);
|
const loading = ref(false);
|
||||||
const roomNumber = ref("");
|
const roomNumber = ref("");
|
||||||
|
|
||||||
const createRoom = debounce(async () => {
|
const createRoom = debounce(async () => {
|
||||||
|
// 校验必填项:对战模式与靶纸均必须选择
|
||||||
|
if (!battleMode.value || !targetMode.value) {
|
||||||
|
uni.showToast({ title: '请完善创建信息', icon: 'none' });
|
||||||
|
return;
|
||||||
|
}
|
||||||
if (game.value.inBattle) {
|
if (game.value.inBattle) {
|
||||||
uni.$showHint(1);
|
uni.$showHint(1);
|
||||||
return;
|
return;
|
||||||
|
|||||||
@@ -9,12 +9,12 @@ defineProps({
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
<image class="shooter2" src="../static/shooter2.png" mode="widthFix" />
|
<image class="shooter2" src="https://static.shelingxingqiu.com/shootmini/static/shooter2.png" mode="widthFix" />
|
||||||
<view class="bg-box">
|
<view class="bg-box">
|
||||||
<image
|
<image
|
||||||
class="bg"
|
class="bg"
|
||||||
v-if="!noBg"
|
v-if="!noBg"
|
||||||
src="../static/long-bubble-border.png"
|
src="https://static.shelingxingqiu.com/shootmini/static/long-bubble-border.png"
|
||||||
mode="widthFix"
|
mode="widthFix"
|
||||||
/>
|
/>
|
||||||
<slot />
|
<slot />
|
||||||
@@ -26,20 +26,21 @@ defineProps({
|
|||||||
.container {
|
.container {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0 15px;
|
padding: 0 26rpx 0 28rpx;
|
||||||
margin-bottom: 14rpx;
|
margin-bottom: 14rpx;
|
||||||
width: clac(100% - 30px);
|
width: clac(100% - 54rpx);
|
||||||
}
|
}
|
||||||
.container .shooter2 {
|
.container .shooter2 {
|
||||||
width: 150rpx;
|
display: block;
|
||||||
height: 162rpx;
|
width: 133rpx;
|
||||||
|
height: 144rpx;
|
||||||
}
|
}
|
||||||
.container .bg-box {
|
.container .bg-box {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
position: relative;
|
position: relative;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-height: 55px;
|
height: 128rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ import Avatar from "@/components/Avatar.vue";
|
|||||||
import useStore from "@/store";
|
import useStore from "@/store";
|
||||||
import { storeToRefs } from "pinia";
|
import { storeToRefs } from "pinia";
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
const { user } = storeToRefs(store);
|
const { user, game } = storeToRefs(store);
|
||||||
|
|
||||||
const currentPage = computed(() => {
|
const currentPage = computed(() => {
|
||||||
const pages = getCurrentPages();
|
const pages = getCurrentPages();
|
||||||
@@ -57,10 +57,9 @@ const signin = () => {
|
|||||||
|
|
||||||
const loading = ref(false);
|
const loading = ref(false);
|
||||||
const pointBook = ref(null);
|
const pointBook = ref(null);
|
||||||
const showProgress = ref(false);
|
|
||||||
const heat = ref(0);
|
const heat = ref(0);
|
||||||
/** 当前对战房间的房号,由 battle-room 页面通过 uni.$emit 传入 */
|
/** 房间号按钮动态定位样式(position: fixed,根据胶囊真实位置计算,脱离 flex 流避免挤压标题) */
|
||||||
const battleRoomNumber = ref("");
|
const battleRoomBtnStyle = ref({});
|
||||||
|
|
||||||
const updateLoading = (value) => {
|
const updateLoading = (value) => {
|
||||||
loading.value = value;
|
loading.value = value;
|
||||||
@@ -70,14 +69,6 @@ const updateHot = (value) => {
|
|||||||
heat.value = value;
|
heat.value = value;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
|
||||||
* 接收 battle-room 页面发出的房间信息,更新房号展示
|
|
||||||
* @param {{ roomNumber: string }} info
|
|
||||||
*/
|
|
||||||
const updateBattleRoomInfo = (info) => {
|
|
||||||
battleRoomNumber.value = info.roomNumber || "";
|
|
||||||
};
|
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
const pages = getCurrentPages();
|
const pages = getCurrentPages();
|
||||||
const currentPage = pages[pages.length - 1];
|
const currentPage = pages[pages.length - 1];
|
||||||
@@ -90,15 +81,27 @@ onMounted(() => {
|
|||||||
pointBook.value = uni.getStorageSync("last-point-book");
|
pointBook.value = uni.getStorageSync("last-point-book");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (currentPage.route === "pages/team-battle") {
|
// 仅在对战房间页获取胶囊位置,按钮用 fixed 定位精确贴靠胶囊左侧(脱离 flex 流,不挤压标题)
|
||||||
showProgress.value = true;
|
if (currentPage.route === "pages/battle-room") {
|
||||||
|
try {
|
||||||
|
const menuButtonRect = uni.getMenuButtonBoundingClientRect();
|
||||||
|
const { windowWidth } = uni.getSystemInfoSync();
|
||||||
|
battleRoomBtnStyle.value = {
|
||||||
|
// 按钮右边缘距视口右侧 = 屏幕宽 - 胶囊左边缘 + 4px 安全间隙
|
||||||
|
right: (windowWidth - menuButtonRect.left + 4) + "px",
|
||||||
|
// 垂直位置与胶囊顶部对齐
|
||||||
|
top: menuButtonRect.top + "px",
|
||||||
|
// 高度与胶囊一致,视觉融合
|
||||||
|
height: menuButtonRect.height + "px",
|
||||||
|
};
|
||||||
|
} catch (e) {
|
||||||
|
// 获取失败时使用 CSS 兜底定位(28vw + 4px 作为 right,8px 作为 top)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
uni.$on("update-hot", updateHot);
|
uni.$on("update-hot", updateHot);
|
||||||
uni.$on("battle-room-info", updateBattleRoomInfo);
|
|
||||||
});
|
});
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
uni.$off("update-hot", updateHot);
|
uni.$off("update-hot", updateHot);
|
||||||
uni.$off("battle-room-info", updateBattleRoomInfo);
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -182,17 +185,18 @@ onBeforeUnmount(() => {
|
|||||||
}}</text
|
}}</text
|
||||||
>
|
>
|
||||||
</view>
|
</view>
|
||||||
<view v-if="showProgress" class="battle-progress">
|
<view v-if="currentPage === 'pages/team-battle'" class="battle-progress">
|
||||||
<HeaderProgress />
|
<HeaderProgress />
|
||||||
</view>
|
</view>
|
||||||
<!-- 对战房间:整个胶囊为分享按钮,点击任意区域均可触发分享 -->
|
<!-- 对战房间:整个胶囊为分享按钮,房号从 Store 读取;fixed 定位紧靠系统胶囊左侧 -->
|
||||||
<button
|
<button
|
||||||
v-if="currentPage === 'pages/battle-room' && battleRoomNumber"
|
v-if="currentPage === 'pages/battle-room' && game.roomNumber"
|
||||||
open-type="share"
|
open-type="share"
|
||||||
hover-class="none"
|
hover-class="none"
|
||||||
class="battle-room-number"
|
class="battle-room-number"
|
||||||
|
:style="battleRoomBtnStyle"
|
||||||
>
|
>
|
||||||
<text class="battle-room-number__text">房号: {{ battleRoomNumber }}</text>
|
<text class="battle-room-number__text">房号: {{ game.roomNumber }}</text>
|
||||||
<image src="../static/share2.png" mode="widthFix" class="battle-room-number__icon" />
|
<image src="../static/share2.png" mode="widthFix" class="battle-room-number__icon" />
|
||||||
</button>
|
</button>
|
||||||
</view>
|
</view>
|
||||||
@@ -282,10 +286,12 @@ onBeforeUnmount(() => {
|
|||||||
margin: 0 20rpx;
|
margin: 0 20rpx;
|
||||||
max-width: 300rpx;
|
max-width: 300rpx;
|
||||||
}
|
}
|
||||||
/* 对战房间:整个胶囊作为分享按钮,靠右对齐 */
|
/* 对战房间:整个胶囊作为分享按钮,fixed 定位脱离 flex 流,紧贴系统胶囊左侧 */
|
||||||
.battle-room-number {
|
.battle-room-number {
|
||||||
margin-left: auto;
|
position: fixed;
|
||||||
margin-right: 10rpx;
|
/* 兜底定位(JS 获取胶囊位置失败时生效):约 28vw 对应胶囊区域左边缘 */
|
||||||
|
right: calc(28vw + 4px);
|
||||||
|
top: 8px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -294,9 +300,7 @@ onBeforeUnmount(() => {
|
|||||||
background: rgba(0, 0, 0, 0.15);
|
background: rgba(0, 0, 0, 0.15);
|
||||||
border-radius: 96rpx;
|
border-radius: 96rpx;
|
||||||
border: 1rpx solid #5b5758;
|
border: 1rpx solid #5b5758;
|
||||||
flex-shrink: 0;
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
line-height: normal;
|
|
||||||
}
|
}
|
||||||
/* 重置 button 默认边框 */
|
/* 重置 button 默认边框 */
|
||||||
.battle-room-number::after {
|
.battle-room-number::after {
|
||||||
|
|||||||
@@ -33,8 +33,8 @@ watch(
|
|||||||
newVal.includes("你")
|
newVal.includes("你")
|
||||||
? "轮到你了"
|
? "轮到你了"
|
||||||
: newVal.includes("红队")
|
: newVal.includes("红队")
|
||||||
? "请红方射箭"
|
? "请红方射箭"
|
||||||
: "请蓝方射箭"
|
: "请蓝方射箭"
|
||||||
);
|
);
|
||||||
audioManager.play(key, false);
|
audioManager.play(key, false);
|
||||||
currentRoundEnded.value = false;
|
currentRoundEnded.value = false;
|
||||||
@@ -52,14 +52,16 @@ async function onReceiveMessage(message) {
|
|||||||
const { type, mode, current, shootData } = message;
|
const { type, mode, current, shootData } = message;
|
||||||
if (type === MESSAGETYPESV2.BattleStart) {
|
if (type === MESSAGETYPESV2.BattleStart) {
|
||||||
melee.value = Boolean(mode > 3);
|
melee.value = Boolean(mode > 3);
|
||||||
totalShot.value = mode === 1 ? 3 : 2;
|
// 优先使用后端返回的 shootNumber,降级则根据 mode 推算
|
||||||
|
totalShot.value = message.shootNumber ?? (mode === 1 ? 3 : 2);
|
||||||
currentRoundEnded.value = true;
|
currentRoundEnded.value = true;
|
||||||
audioManager.play("比赛开始");
|
audioManager.play("比赛开始");
|
||||||
} else if (type === MESSAGETYPESV2.BattleEnd) {
|
} else if (type === MESSAGETYPESV2.BattleEnd) {
|
||||||
audioManager.play("比赛结束", false);
|
audioManager.play("比赛结束", false);
|
||||||
} else if (type === MESSAGETYPESV2.ShootResult) {
|
} else if (type === MESSAGETYPESV2.ShootResult) {
|
||||||
if (melee.value && current.playerId !== user.value.id) return;
|
if (melee.value && current.playerId !== user.value.id) return;
|
||||||
if (current.playerId === user.value.id) currentShot.value++;
|
// 从 indexMap 按当前用户 id 取已射箭数,由后端维护准确值,不在前端自增
|
||||||
|
if (current.playerId === user.value.id) currentShot.value = current.indexMap?.[user.value.id] ?? currentShot.value;
|
||||||
if (message.shootData) {
|
if (message.shootData) {
|
||||||
let key = [];
|
let key = [];
|
||||||
key.push(
|
key.push(
|
||||||
@@ -92,22 +94,35 @@ const onUpdateTips = (newVal) => {
|
|||||||
tips.value = newVal;
|
tips.value = newVal;
|
||||||
};
|
};
|
||||||
|
|
||||||
const onUpdateTotalShot = (newVal) => {
|
// 监听 Pinia store 中 totalShot 变化,用于比赛恢复时同步箭数(替代 uni.$emit 避免时序问题)
|
||||||
currentShot.value = newVal.currentShot;
|
// 使用 immediate: true 确保组件创建时立即读取 store 当前值(解决重入时 totalShot 值不变 watch 不触发的问题)
|
||||||
totalShot.value = newVal.totalShot;
|
watch(() => store.game.totalShot, (newVal) => {
|
||||||
};
|
if (newVal > 0) {
|
||||||
|
totalShot.value = newVal;
|
||||||
|
currentShot.value = store.game.currentShot;
|
||||||
|
}
|
||||||
|
}, { immediate: true });
|
||||||
|
|
||||||
|
// 监听 Pinia store 中 tips 变化,用于比赛恢复时同步提示文案(替代 uni.$emit 避免时序问题)
|
||||||
|
// 使用 immediate: true 确保组件创建时立即读取 store 当前值(解决 onShow 早于 onMounted 导致 uni.$emit 事件丢失的问题)
|
||||||
|
// 注意:使用 != null 而非 if(newVal),确保空字符串 "" 也能触发清空(避免重新开赛时旧文案残留)
|
||||||
|
watch(() => store.game.tips, (newVal) => {
|
||||||
|
if (newVal != null) {
|
||||||
|
tips.value = newVal;
|
||||||
|
}
|
||||||
|
}, { immediate: true });
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
uni.$on("update-shot", onUpdateTotalShot);
|
|
||||||
uni.$on("update-tips", onUpdateTips);
|
uni.$on("update-tips", onUpdateTips);
|
||||||
uni.$on("socket-inbox", onReceiveMessage);
|
uni.$on("socket-inbox", onReceiveMessage);
|
||||||
uni.$on("play-sound", playSound);
|
uni.$on("play-sound", playSound);
|
||||||
});
|
});
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
uni.$off("update-shot", onUpdateTotalShot);
|
|
||||||
uni.$off("socket-inbox", onReceiveMessage);
|
uni.$off("socket-inbox", onReceiveMessage);
|
||||||
uni.$off("play-sound", playSound);
|
uni.$off("play-sound", playSound);
|
||||||
|
// 补充取消 update-tips 监听,防止页面重建时监听器叠加
|
||||||
|
uni.$off("update-tips", onUpdateTips);
|
||||||
if (timer.value) clearInterval(timer.value);
|
if (timer.value) clearInterval(timer.value);
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
@@ -117,10 +132,7 @@ onBeforeUnmount(() => {
|
|||||||
<text>{{ (tips || "").replace(/你/g, "").replace(/重回/g, "") }}</text>
|
<text>{{ (tips || "").replace(/你/g, "").replace(/重回/g, "") }}</text>
|
||||||
<text v-if="totalShot > 0"> ({{ currentShot }}/{{ totalShot }}) </text>
|
<text v-if="totalShot > 0"> ({{ currentShot }}/{{ totalShot }}) </text>
|
||||||
<button v-if="!!tips" hover-class="none" @click="updateSound">
|
<button v-if="!!tips" hover-class="none" @click="updateSound">
|
||||||
<image
|
<image :src="`../static/sound${sound ? '' : '-off'}-yellow.png`" mode="widthFix" />
|
||||||
:src="`../static/sound${sound ? '' : '-off'}-yellow.png`"
|
|
||||||
mode="widthFix"
|
|
||||||
/>
|
|
||||||
</button>
|
</button>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@@ -134,11 +146,13 @@ onBeforeUnmount(() => {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
.container > button:last-child {
|
|
||||||
|
.container>button:last-child {
|
||||||
width: 36px;
|
width: 36px;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
}
|
}
|
||||||
.container > button:last-child > image {
|
|
||||||
|
.container>button:last-child>image {
|
||||||
width: 36px;
|
width: 36px;
|
||||||
min-height: 36px;
|
min-height: 36px;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -43,7 +43,7 @@ const rowCount = new Array(6).fill(0);
|
|||||||
<view>
|
<view>
|
||||||
<view v-for="(_, index) in rowCount" :key="index">
|
<view v-for="(_, index) in rowCount" :key="index">
|
||||||
<text>{{
|
<text>{{
|
||||||
scores[1] && scores[1][index] ? `${scores[0][index].ring}环` : "-"
|
scores[1] && scores[1][index] ? `${scores[1][index].ring}环` : "-"
|
||||||
}}</text>
|
}}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -14,6 +14,11 @@ const props = defineProps({
|
|||||||
type: Function,
|
type: Function,
|
||||||
default: () => {},
|
default: () => {},
|
||||||
},
|
},
|
||||||
|
/** 当前用户是否为房主;仅房主可见踢人按钮 */
|
||||||
|
isOwner: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
});
|
});
|
||||||
const seats = new Array(props.total).fill(1);
|
const seats = new Array(props.total).fill(1);
|
||||||
</script>
|
</script>
|
||||||
@@ -45,8 +50,9 @@ const seats = new Array(props.total).fill(1);
|
|||||||
mode="widthFix"
|
mode="widthFix"
|
||||||
class="player-bg"
|
class="player-bg"
|
||||||
/> -->
|
/> -->
|
||||||
|
<!-- 仅房主(isOwner=true)且非空座位时展示踢人按钮 -->
|
||||||
<button
|
<button
|
||||||
v-if="index > 0 && players[index]"
|
v-if="index > 0 && players[index] && isOwner"
|
||||||
hover-class="none"
|
hover-class="none"
|
||||||
class="remove-player"
|
class="remove-player"
|
||||||
@click="() => removePlayer(players[index])"
|
@click="() => removePlayer(players[index])"
|
||||||
|
|||||||
@@ -139,7 +139,7 @@ async function onReceiveMessage(msg) {
|
|||||||
halfTime.value = false;
|
halfTime.value = false;
|
||||||
audioManager.play("比赛开始");
|
audioManager.play("比赛开始");
|
||||||
} else if (msg.type === MESSAGETYPESV2.BattleEnd) {
|
} else if (msg.type === MESSAGETYPESV2.BattleEnd) {
|
||||||
audioManager.play("比赛结束");
|
audioManager.play("比赛结束", false);
|
||||||
} else if (msg.type === MESSAGETYPESV2.ShootResult) {
|
} else if (msg.type === MESSAGETYPESV2.ShootResult) {
|
||||||
let arrow = {};
|
let arrow = {};
|
||||||
if (msg.details && Array.isArray(msg.details)) {
|
if (msg.details && Array.isArray(msg.details)) {
|
||||||
|
|||||||
@@ -29,6 +29,33 @@ const updateRemain = (value) => {
|
|||||||
if (timer.value) clearInterval(timer.value);
|
if (timer.value) clearInterval(timer.value);
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
// zeroThenReset:ToSomeoneShoot 到达时,若进度条仍在倒计时则先瞬间清零(约 150ms 停留)再显示下一玩家满值
|
||||||
|
// 若进度条已到 0(loading 状态),直接切换满值
|
||||||
|
if (value.zeroThenReset) {
|
||||||
|
if (timer.value) clearInterval(timer.value);
|
||||||
|
const wasNonZero = remain.value > 0;
|
||||||
|
// 更新下一玩家颜色和方向(在清零和满值时均生效)
|
||||||
|
currentTeam.value = value.team;
|
||||||
|
if (value.team === 'red') barColor.value = "linear-gradient( 180deg, #FFA0A0 0%, #FF6060 100%)";
|
||||||
|
if (value.team === 'blue') barColor.value = "linear-gradient( 180deg, #9AB3FF 0%, #4288FF 100%)";
|
||||||
|
transitionStyle.value = "none";
|
||||||
|
if (wasNonZero) {
|
||||||
|
// 瞬间清零,停留约 150ms 后切换为满值
|
||||||
|
remain.value = 0;
|
||||||
|
loading.value = true;
|
||||||
|
setTimeout(() => {
|
||||||
|
remain.value = value.value;
|
||||||
|
loading.value = false;
|
||||||
|
setTimeout(() => { transitionStyle.value = "all 1s linear"; }, 50);
|
||||||
|
}, 150);
|
||||||
|
} else {
|
||||||
|
// 已在底部,直接切换满值
|
||||||
|
remain.value = value.value;
|
||||||
|
loading.value = false;
|
||||||
|
setTimeout(() => { transitionStyle.value = "all 1s linear"; }, 50);
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
loading.value = false;
|
loading.value = false;
|
||||||
currentTeam.value = value.team
|
currentTeam.value = value.team
|
||||||
if (value.team === 'red')
|
if (value.team === 'red')
|
||||||
@@ -36,7 +63,14 @@ const updateRemain = (value) => {
|
|||||||
if (value.team === 'blue')
|
if (value.team === 'blue')
|
||||||
barColor.value = "linear-gradient( 180deg, #9AB3FF 0%, #4288FF 100%)";
|
barColor.value = "linear-gradient( 180deg, #9AB3FF 0%, #4288FF 100%)";
|
||||||
if (value.reset) {
|
if (value.reset) {
|
||||||
|
// 重置前先清除旧计时器,防止超时未射箭时旧 interval 残留,导致进度条震荡
|
||||||
|
if (timer.value) clearInterval(timer.value);
|
||||||
|
// 重置时瞬间跳满格,禁用 CSS 过渡避免从旧值「涨到满」的动画
|
||||||
|
transitionStyle.value = "none";
|
||||||
remain.value = value.value;
|
remain.value = value.value;
|
||||||
|
setTimeout(() => {
|
||||||
|
transitionStyle.value = "all 1s linear";
|
||||||
|
}, 50);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const newVal = Math.round(value.value);
|
const newVal = Math.round(value.value);
|
||||||
@@ -51,6 +85,8 @@ const updateRemain = (value) => {
|
|||||||
remain.value = newVal;
|
remain.value = newVal;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 启动前先清除旧计时器,防止多次 {stop:false} 事件叠加多个 interval
|
||||||
|
if (timer.value) clearInterval(timer.value);
|
||||||
timer.value = setInterval(() => {
|
timer.value = setInterval(() => {
|
||||||
loading.value = remain.value === 0;
|
loading.value = remain.value === 0;
|
||||||
if (remain.value > 0) remain.value--;
|
if (remain.value > 0) remain.value--;
|
||||||
|
|||||||
@@ -1,10 +1,12 @@
|
|||||||
import { createSSRApp } from 'vue'
|
import { createSSRApp } from 'vue'
|
||||||
import { createPinia } from 'pinia'
|
import { createPinia } from 'pinia'
|
||||||
|
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
|
|
||||||
export function createApp() {
|
export function createApp() {
|
||||||
const app = createSSRApp(App)
|
const app = createSSRApp(App)
|
||||||
const pinia = createPinia()
|
const pinia = createPinia()
|
||||||
|
pinia.use(piniaPluginPersistedstate)
|
||||||
app.use(pinia)
|
app.use(pinia)
|
||||||
return {
|
return {
|
||||||
app
|
app
|
||||||
|
|||||||
@@ -39,6 +39,9 @@
|
|||||||
{
|
{
|
||||||
"path": "pages/battle-result"
|
"path": "pages/battle-result"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/friend-battle-result"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/point-book-edit"
|
"path": "pages/point-book-edit"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -117,7 +117,7 @@ const checkBowData = () => {
|
|||||||
}deg)`,
|
}deg)`,
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<view v-if="data.mvp && data.mvp[0].totalRings">
|
<view v-if="data.mvp && data.mvp.totalRings">
|
||||||
<image src="../static/title-mvp.png" mode="widthFix" />
|
<image src="../static/title-mvp.png" mode="widthFix" />
|
||||||
<text
|
<text
|
||||||
>斩获<text
|
>斩获<text
|
||||||
@@ -127,7 +127,7 @@ const checkBowData = () => {
|
|||||||
margin: '0 3px',
|
margin: '0 3px',
|
||||||
fontWeight: '600',
|
fontWeight: '600',
|
||||||
}"
|
}"
|
||||||
>{{ data.mvp[0].totalRings }}</text
|
>{{ data.mvp.totalRings }}</text
|
||||||
>环</text
|
>环</text
|
||||||
>
|
>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -9,9 +9,7 @@ import Avatar from "@/components/Avatar.vue";
|
|||||||
import ScreenHint from "@/components/ScreenHint.vue";
|
import ScreenHint from "@/components/ScreenHint.vue";
|
||||||
import {
|
import {
|
||||||
getRoomAPI,
|
getRoomAPI,
|
||||||
destroyRoomAPI,
|
|
||||||
exitRoomAPI,
|
exitRoomAPI,
|
||||||
startRoomAPI,
|
|
||||||
chooseTeamAPI,
|
chooseTeamAPI,
|
||||||
getReadyAPI,
|
getReadyAPI,
|
||||||
kickPlayerAPI,
|
kickPlayerAPI,
|
||||||
@@ -19,6 +17,7 @@ import {
|
|||||||
import { MESSAGETYPES, MESSAGETYPESV2 } from "@/constants";
|
import { MESSAGETYPES, MESSAGETYPESV2 } from "@/constants";
|
||||||
import useStore from "@/store";
|
import useStore from "@/store";
|
||||||
import { storeToRefs } from "pinia";
|
import { storeToRefs } from "pinia";
|
||||||
|
import audioManager from "@/audioManager";
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
const { user } = storeToRefs(store);
|
const { user } = storeToRefs(store);
|
||||||
|
|
||||||
@@ -42,16 +41,42 @@ const battleTitle = computed(() => {
|
|||||||
return `${half}v${half}对抗赛`;
|
return `${half}v${half}对抗赛`;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/** 靶纸尺寸(cm),由 URL 参数或 API 返回的 targetType 字段填充 */
|
||||||
|
const targetSize = ref(0);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 根据 targetSize 动态生成靶纸尺寸文本,如"40cm"
|
||||||
|
* 数据未就绪时显示 "--";数据来源:创建者取 URL 参数 target,加入者取 API 返回的 targetType
|
||||||
|
*/
|
||||||
|
const targetSizeLabel = computed(() =>
|
||||||
|
targetSize.value ? `${targetSize.value}cm` : '--'
|
||||||
|
);
|
||||||
|
|
||||||
const ready = ref(false);
|
const ready = ref(false);
|
||||||
const allReady = ref(false);
|
const allReady = ref(false);
|
||||||
const timer = ref(null);
|
const timer = ref(null);
|
||||||
const goBattle = ref(false);
|
const goBattle = ref(false);
|
||||||
|
/** 从结算页返回时为 true,跳过进场靶纸语音 */
|
||||||
|
const skipTargetAudio = ref(false);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 从服务端刷新当前房间数据,更新成员列表、准备状态等信息
|
||||||
|
* 仅在 roomNumber 有效且房间未开始时执行
|
||||||
|
*/
|
||||||
async function refreshRoomData() {
|
async function refreshRoomData() {
|
||||||
if (!roomNumber.value) return;
|
if (!roomNumber.value) return;
|
||||||
const result = await getRoomAPI(roomNumber.value);
|
const result = await getRoomAPI(roomNumber.value);
|
||||||
if (result.started) return;
|
if (result.started) return;
|
||||||
room.value = result;
|
room.value = result;
|
||||||
|
// 加入者通过 API 返回的 targetType 字段同步靶纸尺寸,并持久化到本地缓存
|
||||||
|
if (result.targetType) {
|
||||||
|
targetSize.value = result.targetType;
|
||||||
|
uni.setStorageSync(`targetSize_${roomNumber.value}`, result.targetType);
|
||||||
|
} else if (targetSize.value === 0) {
|
||||||
|
// API 无该字段时,从本地缓存兜底(如"返回房间"场景)
|
||||||
|
const stored = uni.getStorageSync(`targetSize_${roomNumber.value}`);
|
||||||
|
if (stored) targetSize.value = stored;
|
||||||
|
}
|
||||||
owner.value = {};
|
owner.value = {};
|
||||||
opponent.value = {};
|
opponent.value = {};
|
||||||
const members = result.members || [];
|
const members = result.members || [];
|
||||||
@@ -109,15 +134,8 @@ async function refreshRoomData() {
|
|||||||
}
|
}
|
||||||
if (timer.value) clearInterval(timer.value);
|
if (timer.value) clearInterval(timer.value);
|
||||||
// timer.value = setTimeout(refreshRoomData, 2000);
|
// timer.value = setTimeout(refreshRoomData, 2000);
|
||||||
|
|
||||||
// 通知 Header 组件更新房号展示
|
|
||||||
uni.$emit("battle-room-info", { roomNumber: roomNumber.value });
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const startGame = async () => {
|
|
||||||
const result = await startRoomAPI(room.value.number);
|
|
||||||
};
|
|
||||||
|
|
||||||
const getReady = async () => {
|
const getReady = async () => {
|
||||||
await getReadyAPI(roomNumber.value);
|
await getReadyAPI(roomNumber.value);
|
||||||
};
|
};
|
||||||
@@ -192,14 +210,6 @@ const chooseTeam = async (team) => {
|
|||||||
refreshMembers(result.members);
|
refreshMembers(result.members);
|
||||||
};
|
};
|
||||||
|
|
||||||
const destroyRoom = async () => {
|
|
||||||
if (roomNumber.value) await destroyRoomAPI(roomNumber.value);
|
|
||||||
};
|
|
||||||
|
|
||||||
const exitRoom = async () => {
|
|
||||||
uni.navigateBack();
|
|
||||||
};
|
|
||||||
|
|
||||||
/** 待确认踢出的玩家信息 */
|
/** 待确认踢出的玩家信息 */
|
||||||
const playerToKick = ref(null);
|
const playerToKick = ref(null);
|
||||||
/** 控制踢出确认弹窗的显示状态 */
|
/** 控制踢出确认弹窗的显示状态 */
|
||||||
@@ -240,32 +250,93 @@ const canClick = computed(() => {
|
|||||||
return true;
|
return true;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 根据对战类型和人数动态生成分享文案
|
||||||
|
* 1v1 / 默认 → "星球论箭,来一决高下敢否?"
|
||||||
|
* 2v2 → "2v2对抗赛,是兄弟来助我一把!"
|
||||||
|
* 3v3 → "3v3对抗赛,来了马上发车!"
|
||||||
|
* 乱斗 → "热血乱斗赛,敢来争锋?"
|
||||||
|
*/
|
||||||
|
const shareTitle = computed(() => {
|
||||||
|
const { battleType, count } = room.value;
|
||||||
|
if (battleType === 2) return '热血乱斗赛,敢来争锋?';
|
||||||
|
if (battleType === 1 && count === 4) return '2v2对抗赛,是兄弟来助我一把!';
|
||||||
|
if (battleType === 1 && count === 6) return '3v3对抗赛,来了马上发车!';
|
||||||
|
return '星球论箭,来一决高下敢否?';
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 根据对战类型和靶纸尺寸动态返回分享封面图路径,共 4 张图:
|
||||||
|
* contest_share_20.png — 约战/对抗赛 + 20cm 靶
|
||||||
|
* contest_share_40.png — 约战/对抗赛 + 40cm 靶
|
||||||
|
* melee_share_20.png — 多人乱斗 + 20cm 靶
|
||||||
|
* melee_share_40.png — 多人乱斗 + 40cm 靶
|
||||||
|
*
|
||||||
|
* 当 targetSize 未知时默认取 20cm 图。
|
||||||
|
*/
|
||||||
|
const shareImage = computed(() => {
|
||||||
|
const type = room.value.battleType === 2 ? 'melee' : 'contest';
|
||||||
|
const size = targetSize.value === 40 ? '40' : '20';
|
||||||
|
return `https://static.shelingxingqiu.com/shootmini/static/share/${type}_share_${size}.png`;
|
||||||
|
});
|
||||||
|
|
||||||
onShareAppMessage(() => {
|
onShareAppMessage(() => {
|
||||||
return {
|
return {
|
||||||
title: "邀请您进入房间对战",
|
title: shareTitle.value,
|
||||||
path: "/pages/friend-battle?roomID=" + roomNumber.value,
|
path: "/pages/friend-battle?roomID=" + roomNumber.value,
|
||||||
imageUrl: "",
|
imageUrl: shareImage.value,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* onShow 生命周期:页面显示时刷新房间数据
|
||||||
|
* 注:uni-app 中 onShow 可能早于 onLoad 执行,此时 roomNumber 尚未赋值,
|
||||||
|
* refreshRoomData 会提前 return。
|
||||||
|
*/
|
||||||
onShow(() => {
|
onShow(() => {
|
||||||
goBattle.value = false;
|
goBattle.value = false;
|
||||||
refreshRoomData();
|
refreshRoomData();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 页面加载时解析路由参数,初始化房间号
|
||||||
|
* - 存入本地 ref(供页面内部逻辑使用)
|
||||||
|
* - 同步到 Pinia Store(供 Header 组件展示房号胶囊)
|
||||||
|
*/
|
||||||
onLoad(async (options) => {
|
onLoad(async (options) => {
|
||||||
|
// 从结算页跳回时携带 fromResult=1,标记跳过进场语音
|
||||||
|
if (options.fromResult) skipTargetAudio.value = true;
|
||||||
if (options.roomNumber) {
|
if (options.roomNumber) {
|
||||||
roomNumber.value = options.roomNumber;
|
roomNumber.value = options.roomNumber;
|
||||||
// 立即通知 Header 显示房号,无需等待异步 API 返回
|
store.updateRoomNumber(options.roomNumber);
|
||||||
uni.$emit("battle-room-info", { roomNumber: options.roomNumber });
|
}
|
||||||
|
// 创建者通过 URL 参数 target(1→20cm,2→40cm)初始化靶纸尺寸,并持久化到本地缓存
|
||||||
|
if (options.target) {
|
||||||
|
targetSize.value = parseInt(options.target) * 20;
|
||||||
|
uni.setStorageSync(`targetSize_${roomNumber.value}`, targetSize.value);
|
||||||
|
} else if (roomNumber.value) {
|
||||||
|
// "返回房间"等无 target 参数的场景:从本地缓存恢复(待 refreshRoomData 进一步覆盖)
|
||||||
|
const stored = uni.getStorageSync(`targetSize_${roomNumber.value}`);
|
||||||
|
if (stored) targetSize.value = stored;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 组件挂载后:保持屏幕常亮、注册 WebSocket 消息监听
|
||||||
|
* 房间号已通过 onLoad 同步到 Store,Header 从 Store 直接读取,无需额外通知
|
||||||
|
*/
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
uni.setKeepScreenOn({
|
uni.setKeepScreenOn({
|
||||||
keepScreenOn: true,
|
keepScreenOn: true,
|
||||||
});
|
});
|
||||||
uni.$on("socket-inbox", onReceiveMessage);
|
uni.$on("socket-inbox", onReceiveMessage);
|
||||||
|
// 页面加载完成 1 秒后根据靶纸尺寸播报对应语音;从结算页返回时跳过
|
||||||
|
setTimeout(() => {
|
||||||
|
if (!skipTargetAudio.value) {
|
||||||
|
const key = targetSize.value === 40 ? '40CM全环靶' : '20CM全环靶';
|
||||||
|
audioManager.play(key);
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
});
|
});
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
@@ -285,11 +356,8 @@ onBeforeUnmount(() => {
|
|||||||
<GuideTwo>
|
<GuideTwo>
|
||||||
<view class="battle-guide">
|
<view class="battle-guide">
|
||||||
<view class="guide-tips">
|
<view class="guide-tips">
|
||||||
<text>弓箭手们,人都到齐了吗?</text>
|
<text class="guide-tips__target">请使用{{ targetSizeLabel }}全环靶</text>
|
||||||
<text v-if="room.battleType === 1">{{
|
<text class="guide-tips__warn">如果实际靶纸与选择靶纸不同,将导致射箭无效</text>
|
||||||
`${room.count / 2}v${room.count / 2}比赛即将开始!`
|
|
||||||
}}</text>
|
|
||||||
<text v-if="room.battleType === 2">大乱斗即将开始! </text>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</GuideTwo>
|
</GuideTwo>
|
||||||
@@ -330,7 +398,8 @@ onBeforeUnmount(() => {
|
|||||||
<view v-for="(item, index) in players" :key="index">
|
<view v-for="(item, index) in players" :key="index">
|
||||||
<Avatar v-if="item.id" :src="item.avatar" :size="36" />
|
<Avatar v-if="item.id" :src="item.avatar" :size="36" />
|
||||||
<text v-if="owner.id === item.id">管理员</text>
|
<text v-if="owner.id === item.id">管理员</text>
|
||||||
<button v-if="owner.id !== item.id && item.id" hover-class="none" class="remove-player"
|
<!-- 仅房主可见踢人按钮,且不能踢自己 -->
|
||||||
|
<button v-if="owner.id !== item.id && item.id && owner.id === user.id" hover-class="none" class="remove-player"
|
||||||
@click="() => removePlayer(item)" :style="{ top: '-10rpx', right: '-10rpx' }">
|
@click="() => removePlayer(item)" :style="{ top: '-10rpx', right: '-10rpx' }">
|
||||||
<image src="../static/close-white.png" mode="widthFix" />
|
<image src="../static/close-white.png" mode="widthFix" />
|
||||||
</button>
|
</button>
|
||||||
@@ -370,8 +439,9 @@ onBeforeUnmount(() => {
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</block>
|
</block>
|
||||||
|
<!-- isOwner:当前用户是房主时才展示踢人按钮 -->
|
||||||
<PlayerSeats v-if="room.battleType === 2" :total="room.count || 10" :players="players"
|
<PlayerSeats v-if="room.battleType === 2" :total="room.count || 10" :players="players"
|
||||||
:removePlayer="removePlayer" />
|
:removePlayer="removePlayer" :isOwner="owner.id === user.id" />
|
||||||
<view>
|
<view>
|
||||||
<SButton :disabled="!canClick" :onClick="getReady">
|
<SButton :disabled="!canClick" :onClick="getReady">
|
||||||
{{
|
{{
|
||||||
@@ -804,4 +874,23 @@ onBeforeUnmount(() => {
|
|||||||
border: 1rpx solid #a3793f66;
|
border: 1rpx solid #a3793f66;
|
||||||
color: #fed847;
|
color: #fed847;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.guide-tips__target {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: rgba(255, 217, 71, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.guide-tips__warn {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
margin-top: 6rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guide-tips {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding-left: 20rpx;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -33,7 +33,7 @@ const onScrollView = (e) => {
|
|||||||
>
|
>
|
||||||
<image
|
<image
|
||||||
:style="{ opacity: addBg ? 1 : 0 }"
|
:style="{ opacity: addBg ? 1 : 0 }"
|
||||||
src="../static/app-bg.png"
|
src="https://static.shelingxingqiu.com/shootmini/static/app-bg.png"
|
||||||
mode="widthFix"
|
mode="widthFix"
|
||||||
/>
|
/>
|
||||||
<navigator open-type="navigateBack">
|
<navigator open-type="navigateBack">
|
||||||
|
|||||||
1103
src/pages/friend-battle-result.vue
Normal file
@@ -162,7 +162,8 @@ onLoad(async (options) => {
|
|||||||
<view v-if="warnning" class="warnning">
|
<view v-if="warnning" class="warnning">
|
||||||
{{ warnning }}
|
{{ warnning }}
|
||||||
</view>
|
</view>
|
||||||
<CreateRoom v-if="!warnning" :onConfirm="() => (showModal = false)" />
|
<!-- showModal 关闭时立即销毁组件,重开时重建,确保选项重置为 0 -->
|
||||||
|
<CreateRoom v-if="!warnning && showModal" :onConfirm="() => (showModal = false)" />
|
||||||
</SModal>
|
</SModal>
|
||||||
<Signin :show="showSignin" :onClose="onSignin" />
|
<Signin :show="showSignin" :onClose="onSignin" />
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ import {
|
|||||||
getDeviceBatteryAPI,
|
getDeviceBatteryAPI,
|
||||||
getHomeData,
|
getHomeData,
|
||||||
getMyDevicesAPI,
|
getMyDevicesAPI,
|
||||||
getRankListAPI,
|
getScoreRankList,
|
||||||
silentLoginAPI,
|
silentLoginAPI,
|
||||||
} from "@/apis";
|
} from "@/apis";
|
||||||
import {topThreeColors} from "@/constants";
|
import {topThreeColors} from "@/constants";
|
||||||
@@ -26,15 +26,23 @@ const {
|
|||||||
updateConfig,
|
updateConfig,
|
||||||
updateUser,
|
updateUser,
|
||||||
updateDevice,
|
updateDevice,
|
||||||
updateRank,
|
|
||||||
getLvlName,
|
getLvlName,
|
||||||
getLvlNameByScore,
|
getLvlNameByScore,
|
||||||
updateOnline,
|
updateOnline,
|
||||||
} = store;
|
} = store;
|
||||||
const {user, device, rankData, online, game} = storeToRefs(store);
|
const {user, device, online, game} = storeToRefs(store);
|
||||||
|
|
||||||
const showModal = ref(false);
|
const showModal = ref(false);
|
||||||
const showGuide = ref(false);
|
const showGuide = ref(false);
|
||||||
|
const scoreRankList = ref([]);
|
||||||
|
|
||||||
|
// 提取积分榜接口返回的榜单数组,兼容数组和对象两种返回格式。
|
||||||
|
const getScoreRankData = (result) => {
|
||||||
|
if (Array.isArray(result)) return result;
|
||||||
|
if (Array.isArray(result?.list)) return result.list;
|
||||||
|
if (Array.isArray(result?.items)) return result.items;
|
||||||
|
return [];
|
||||||
|
};
|
||||||
|
|
||||||
const toPage = async (path) => {
|
const toPage = async (path) => {
|
||||||
if (!user.value.id) {
|
if (!user.value.id) {
|
||||||
@@ -60,39 +68,40 @@ onShow(async () => {
|
|||||||
const token = uni.getStorageSync(`${env}_token`);
|
const token = uni.getStorageSync(`${env}_token`);
|
||||||
|
|
||||||
if (!user.value.id && !token) {
|
if (!user.value.id && !token) {
|
||||||
try {
|
// showModal.value = true;
|
||||||
const wxResult = await uni.login({provider: "weixin"});
|
// try {
|
||||||
const bindResult = await checkUserBindAPI(wxResult.code);
|
// const wxResult = await uni.login({provider: "weixin"});
|
||||||
if (bindResult.binded) {
|
// const bindResult = await checkUserBindAPI(wxResult.code);
|
||||||
const newResult = await uni.login({provider: "weixin"});
|
// if (bindResult.binded) {
|
||||||
const silentResult = await silentLoginAPI(newResult.code);
|
// const newResult = await uni.login({provider: "weixin"});
|
||||||
if (silentResult.user) updateUser(silentResult.user);
|
// const silentResult = await silentLoginAPI(newResult.code);
|
||||||
const devices = await getMyDevicesAPI();
|
// if (silentResult.user) updateUser(silentResult.user);
|
||||||
if (devices.bindings && devices.bindings.length) {
|
// const devices = await getMyDevicesAPI();
|
||||||
updateDevice(
|
// if (devices.bindings && devices.bindings.length) {
|
||||||
devices.bindings[0].deviceId,
|
// updateDevice(
|
||||||
devices.bindings[0].deviceName
|
// devices.bindings[0].deviceId,
|
||||||
);
|
// devices.bindings[0].deviceName
|
||||||
const data = await getDeviceBatteryAPI();
|
// );
|
||||||
updateOnline(data.online);
|
// const data = await getDeviceBatteryAPI();
|
||||||
}
|
// updateOnline(data.online);
|
||||||
} else {
|
// }
|
||||||
showModal.value = true;
|
// } else {
|
||||||
}
|
// showModal.value = true;
|
||||||
} catch (e) {
|
// }
|
||||||
console.log("检查绑定状态失败", e);
|
// } catch (e) {
|
||||||
}
|
// console.log("检查绑定状态失败", e);
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
const promises = [getRankListAPI()];
|
const promises = [getScoreRankList(undefined, 1, 10)];
|
||||||
if (token || user.value.id) {
|
if (token || user.value.id) {
|
||||||
promises.push(getHomeData());
|
promises.push(getHomeData());
|
||||||
}
|
}
|
||||||
|
|
||||||
const [rankList, homeData] = await Promise.all(promises);
|
const [rankList, homeData] = await Promise.all(promises);
|
||||||
|
|
||||||
console.log("排行数据", rankList);
|
console.log("积分榜数据", rankList);
|
||||||
updateRank(rankList);
|
scoreRankList.value = getScoreRankData(rankList).slice(0, 10);
|
||||||
|
|
||||||
if (homeData) {
|
if (homeData) {
|
||||||
console.log("首页数据:", homeData);
|
console.log("首页数据:", homeData);
|
||||||
@@ -216,7 +225,7 @@ onShareTimeline(() => {
|
|||||||
class="player-avatar"
|
class="player-avatar"
|
||||||
:style="{
|
:style="{
|
||||||
zIndex: 8 - i,
|
zIndex: 8 - i,
|
||||||
borderColor: rankData.rank[i - 1]
|
borderColor: scoreRankList[i - 1]
|
||||||
? topThreeColors[i - 1] || '#000'
|
? topThreeColors[i - 1] || '#000'
|
||||||
: '#000',
|
: '#000',
|
||||||
}"
|
}"
|
||||||
@@ -227,15 +236,15 @@ onShareTimeline(() => {
|
|||||||
<view v-if="i > 3">{{ i }}</view>
|
<view v-if="i > 3">{{ i }}</view>
|
||||||
<image
|
<image
|
||||||
:src="
|
:src="
|
||||||
rankData.rank[i - 1]
|
scoreRankList[i - 1]
|
||||||
? rankData.rank[i - 1].avatar
|
? (scoreRankList[i - 1].avatar || '../static/user-icon.png')
|
||||||
: '../static/user-icon-dark.png'
|
: '../static/user-icon-dark.png'
|
||||||
"
|
"
|
||||||
mode="aspectFill"
|
mode="aspectFill"
|
||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
<view class="more-players">
|
<view class="more-players">
|
||||||
<text>{{ rankData.rank.length }}</text>
|
<text>{{ scoreRankList.length }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -467,7 +476,7 @@ onShareTimeline(() => {
|
|||||||
|
|
||||||
.top-theme {
|
.top-theme {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: flex;
|
display: none;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
@@ -20,25 +20,47 @@ onLoad(async (options) => {
|
|||||||
const result = await getBattleAPI(battleId.value);
|
const result = await getBattleAPI(battleId.value);
|
||||||
data.value = result;
|
data.value = result;
|
||||||
if (result.mode > 3) {
|
if (result.mode > 3) {
|
||||||
players.value = result.resultList.map((item, index) => {
|
const plist = result.teams[0] ? result.teams[0].players : [];
|
||||||
const plist = result.teams[0] ? result.teams[0].players : [];
|
// 以 id 为 key 建立 teams 玩家快速查找表
|
||||||
const p = plist.find((p) => p.id === item.userId);
|
const teamPlayerMap = {};
|
||||||
|
plist.forEach((p) => { teamPlayerMap[p.id] = p; });
|
||||||
|
|
||||||
|
// 处理有成绩的玩家(resultList 顺序即排名顺序)
|
||||||
|
const rankedPlayers = (result.resultList || []).map((item, index) => {
|
||||||
|
const playerId = item.userId || item.id;
|
||||||
|
const p = teamPlayerMap[playerId] || item;
|
||||||
const arrows = new Array(12);
|
const arrows = new Array(12);
|
||||||
result.rounds.forEach((r, index) => {
|
result.rounds.forEach((r, rIndex) => {
|
||||||
if (r.shoots[item.userId]) {
|
if (r.shoots[playerId]) {
|
||||||
r.shoots[item.userId].forEach((s, index2) => {
|
r.shoots[playerId].forEach((s, sIndex) => {
|
||||||
arrows[index2 + index * 6] = s;
|
arrows[sIndex + rIndex * 6] = s;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
return {
|
return {
|
||||||
...item,
|
...item,
|
||||||
|
id: playerId,
|
||||||
rank: index + 1,
|
rank: index + 1,
|
||||||
name: p.name,
|
name: (p && p.name) || item.name,
|
||||||
avatar: p.avatar || "",
|
avatar: (p && p.avatar) || item.avatar || "",
|
||||||
arrows,
|
arrows,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 追加未出现在 resultList 中的玩家(未射箭),rank=0 隐藏角标
|
||||||
|
const rankedIds = new Set(rankedPlayers.map((p) => p.id));
|
||||||
|
const unrankedPlayers = plist
|
||||||
|
.filter((p) => !rankedIds.has(p.id))
|
||||||
|
.map((p) => ({
|
||||||
|
id: p.id,
|
||||||
|
name: p.name,
|
||||||
|
avatar: p.avatar || "",
|
||||||
|
arrows: [],
|
||||||
|
totalScore: 0,
|
||||||
|
rank: 0,
|
||||||
|
}));
|
||||||
|
|
||||||
|
players.value = [...rankedPlayers, ...unrankedPlayers];
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -59,13 +81,14 @@ const checkBowData = (selected) => {
|
|||||||
<Container title="详情">
|
<Container title="详情">
|
||||||
<view class="container">
|
<view class="container">
|
||||||
<BattleHeader
|
<BattleHeader
|
||||||
|
v-if="data.mode <= 3"
|
||||||
:winner="data.winTeam"
|
:winner="data.winTeam"
|
||||||
:blueTeam="data.teams[1] ? data.teams[1].players : []"
|
:blueTeam="data.teams[1] ? data.teams[1].players : []"
|
||||||
:redTeam="data.teams[2] ? data.teams[2].players : []"
|
:redTeam="data.teams[2] ? data.teams[2].players : []"
|
||||||
:players="players"
|
:players="players"
|
||||||
/>
|
/>
|
||||||
<view
|
<view
|
||||||
v-if="data.mode >= 3"
|
v-if="data.mode > 3"
|
||||||
class="score-header"
|
class="score-header"
|
||||||
:style="{ border: 'none', padding: '5px 15px' }"
|
:style="{ border: 'none', padding: '5px 15px' }"
|
||||||
>
|
>
|
||||||
@@ -76,14 +99,14 @@ const checkBowData = (selected) => {
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<PlayerScore2
|
<PlayerScore2
|
||||||
v-if="data.mode >= 3"
|
v-if="data.mode > 3"
|
||||||
v-for="(player, index) in players"
|
v-for="(player, index) in players"
|
||||||
:key="index"
|
:key="index"
|
||||||
:name="player.name"
|
:name="player.name"
|
||||||
:avatar="player.avatar"
|
:avatar="player.avatar"
|
||||||
:arrows="player.arrows"
|
:arrows="player.arrows"
|
||||||
:totalScore="player.totalScore"
|
:totalScore="player.totalScore"
|
||||||
:rank="index + 1"
|
:rank="player.rank"
|
||||||
/>
|
/>
|
||||||
<view
|
<view
|
||||||
v-if="data.mode <= 3"
|
v-if="data.mode <= 3"
|
||||||
|
|||||||
@@ -3,22 +3,90 @@ import { ref, onMounted, onBeforeUnmount } from "vue";
|
|||||||
import { onLoad, onShow, onHide } from "@dcloudio/uni-app";
|
import { onLoad, onShow, onHide } from "@dcloudio/uni-app";
|
||||||
import Container from "@/components/Container.vue";
|
import Container from "@/components/Container.vue";
|
||||||
import Matching from "@/components/Matching.vue";
|
import Matching from "@/components/Matching.vue";
|
||||||
import { matchGameAPI } from "@/apis";
|
import { matchGameAPI, getBattleAPI } from "@/apis";
|
||||||
import { MESSAGETYPESV2 } from "@/constants";
|
import { MESSAGETYPESV2 } from "@/constants";
|
||||||
|
|
||||||
const gameType = ref(0);
|
const gameType = ref(0);
|
||||||
const teamSize = ref(0);
|
const teamSize = ref(0);
|
||||||
const onComplete = ref(null);
|
const onComplete = ref(null);
|
||||||
|
|
||||||
|
/** 匹配超时计时器,用于检测 WS 消息丢失或真正超时 */
|
||||||
|
const matchTimeoutTimer = ref(null);
|
||||||
|
|
||||||
|
/** 匹配超时阈值(ms),后端设置 15s 匹配,前端预留 5s 冗余 */
|
||||||
|
const MATCH_TIMEOUT_MS = 20 * 1000;
|
||||||
|
|
||||||
|
/** 清除超时计时器 */
|
||||||
|
const clearMatchTimeout = () => {
|
||||||
|
if (matchTimeoutTimer.value) {
|
||||||
|
clearTimeout(matchTimeoutTimer.value);
|
||||||
|
matchTimeoutTimer.value = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 超时处理:查询后端是否已分配对局
|
||||||
|
* - 有对局 → WS 消息丢失场景,自动跳入
|
||||||
|
* - 无对局 → 真正超时,提示用户并返回大厅
|
||||||
|
*/
|
||||||
|
const handleMatchTimeout = async () => {
|
||||||
|
try {
|
||||||
|
const battle = await getBattleAPI();
|
||||||
|
if (battle && battle.matchId) {
|
||||||
|
uni.showToast({ title: "匹配成功,正在进入...", icon: "none" });
|
||||||
|
if (battle.mode <= 3) {
|
||||||
|
uni.redirectTo({ url: `/pages/team-battle?battleId=${battle.matchId}` });
|
||||||
|
} else {
|
||||||
|
uni.redirectTo({ url: `/pages/melee-battle?battleId=${battle.matchId}` });
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
uni.showToast({ title: "匹配超时,请重试", icon: "none" });
|
||||||
|
try {
|
||||||
|
if (gameType.value && teamSize.value) {
|
||||||
|
await matchGameAPI(false, gameType.value, teamSize.value);
|
||||||
|
}
|
||||||
|
} catch (_) { /* 取消失败忽略 */ }
|
||||||
|
uni.navigateBack();
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
uni.showToast({ title: "匹配超时,请重试", icon: "none" });
|
||||||
|
uni.navigateBack();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
async function stopMatch() {
|
async function stopMatch() {
|
||||||
uni.$showHint(3);
|
uni.$showHint(3);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 取消匹配,带容错处理:
|
||||||
|
* - 取消成功 → 返回大厅
|
||||||
|
* - 取消失败(后端已分配对局但 WS 未到达)→ 查询并跳入当前对局
|
||||||
|
*/
|
||||||
async function cancelMatch() {
|
async function cancelMatch() {
|
||||||
if (gameType.value && teamSize.value) {
|
clearMatchTimeout();
|
||||||
await matchGameAPI(false, gameType.value, teamSize.value);
|
try {
|
||||||
|
if (gameType.value && teamSize.value) {
|
||||||
|
await matchGameAPI(false, gameType.value, teamSize.value);
|
||||||
|
}
|
||||||
|
uni.navigateBack();
|
||||||
|
} catch (e) {
|
||||||
|
// 取消匹配接口失败,尝试查询是否已被分配对局
|
||||||
|
try {
|
||||||
|
const battle = await getBattleAPI();
|
||||||
|
if (battle && battle.matchId) {
|
||||||
|
if (battle.mode <= 3) {
|
||||||
|
uni.redirectTo({ url: `/pages/team-battle?battleId=${battle.matchId}` });
|
||||||
|
} else {
|
||||||
|
uni.redirectTo({ url: `/pages/melee-battle?battleId=${battle.matchId}` });
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
uni.navigateBack();
|
||||||
|
}
|
||||||
|
} catch (_) {
|
||||||
|
uni.navigateBack();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
uni.navigateBack()
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function onReceiveMessage(msg) {
|
async function onReceiveMessage(msg) {
|
||||||
@@ -26,13 +94,17 @@ async function onReceiveMessage(msg) {
|
|||||||
onComplete.value = () => {}
|
onComplete.value = () => {}
|
||||||
}
|
}
|
||||||
if (msg.type === MESSAGETYPESV2.AboutToStart) {
|
if (msg.type === MESSAGETYPESV2.AboutToStart) {
|
||||||
if (gameType.value == 1) {
|
// 收到开始消息,清除超时计时器
|
||||||
|
clearMatchTimeout();
|
||||||
|
// 使用后端下发的 mode 字段判断跳转目标,与好友约战(battle-room.vue)保持一致
|
||||||
|
// mode <= 3 为团队对抗,mode > 3 为大乱斗,覆盖全部 gameType(1~5),不再遗漏
|
||||||
|
if (msg.mode <= 3) {
|
||||||
uni.redirectTo({
|
uni.redirectTo({
|
||||||
url: `/pages/team-battle?battleId=${msg.id}&gameMode=2`,
|
url: `/pages/team-battle?battleId=${msg.id}`,
|
||||||
});
|
});
|
||||||
} else if (gameType.value == 2) {
|
} else {
|
||||||
uni.redirectTo({
|
uni.redirectTo({
|
||||||
url: `/pages/melee-battle?battleId=${msg.id}&gameMode=2`,
|
url: `/pages/melee-battle?battleId=${msg.id}`,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -54,6 +126,7 @@ onMounted(() => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
|
clearMatchTimeout();
|
||||||
uni.setKeepScreenOn({
|
uni.setKeepScreenOn({
|
||||||
keepScreenOn: false,
|
keepScreenOn: false,
|
||||||
});
|
});
|
||||||
@@ -64,6 +137,9 @@ onBeforeUnmount(() => {
|
|||||||
onShow(async () => {
|
onShow(async () => {
|
||||||
if (gameType.value && teamSize.value) {
|
if (gameType.value && teamSize.value) {
|
||||||
matchGameAPI(true, gameType.value, teamSize.value);
|
matchGameAPI(true, gameType.value, teamSize.value);
|
||||||
|
// 启动超时计时器,防止 WS 消息丢失或长时间无对手导致用户卡死
|
||||||
|
clearMatchTimeout();
|
||||||
|
matchTimeoutTimer.value = setTimeout(handleMatchTimeout, MATCH_TIMEOUT_MS);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted, onBeforeUnmount } from "vue";
|
import { ref, onMounted, onBeforeUnmount, watch } from "vue";
|
||||||
import { onLoad, onShow, onHide } from "@dcloudio/uni-app";
|
import { onLoad, onShow, onHide } from "@dcloudio/uni-app";
|
||||||
import Container from "@/components/Container.vue";
|
import Container from "@/components/Container.vue";
|
||||||
import BowTarget from "@/components/BowTarget.vue";
|
import BowTarget from "@/components/BowTarget.vue";
|
||||||
@@ -10,16 +10,19 @@ import SButton from "@/components/SButton.vue";
|
|||||||
import Avatar from "@/components/Avatar.vue";
|
import Avatar from "@/components/Avatar.vue";
|
||||||
import ScreenHint from "@/components/ScreenHint.vue";
|
import ScreenHint from "@/components/ScreenHint.vue";
|
||||||
import TestDistance from "@/components/TestDistance.vue";
|
import TestDistance from "@/components/TestDistance.vue";
|
||||||
|
import SModal from "@/components/SModal.vue";
|
||||||
import audioManager from "@/audioManager";
|
import audioManager from "@/audioManager";
|
||||||
import { getBattleAPI, laserCloseAPI } from "@/apis";
|
import { getBattleAPI, laserCloseAPI } from "@/apis";
|
||||||
import { MESSAGETYPESV2 } from "@/constants";
|
import { MESSAGETYPESV2 } from "@/constants";
|
||||||
import useStore from "@/store";
|
import useStore from "@/store";
|
||||||
import { storeToRefs } from "pinia";
|
import { storeToRefs } from "pinia";
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
const { user } = storeToRefs(store);
|
const { user, online } = storeToRefs(store);
|
||||||
const title = ref("");
|
const title = ref("");
|
||||||
const start = ref(null);
|
const start = ref(null);
|
||||||
const battleId = ref("");
|
const battleId = ref("");
|
||||||
|
/** 对战模式:1=好友约战 2=排位赛,用于结算页跳转判断 */
|
||||||
|
const way = ref(0);
|
||||||
const currentRound = ref(1);
|
const currentRound = ref(1);
|
||||||
const tips = ref("即将开始...");
|
const tips = ref("即将开始...");
|
||||||
const players = ref([]);
|
const players = ref([]);
|
||||||
@@ -27,16 +30,25 @@ const playersSorted = ref([]);
|
|||||||
const playersScores = ref([]);
|
const playersScores = ref([]);
|
||||||
const halfTimeTip = ref(false);
|
const halfTimeTip = ref(false);
|
||||||
const halfRest = ref(false);
|
const halfRest = ref(false);
|
||||||
|
/** 控制设备离线提示弹窗的显示状态 */
|
||||||
|
const showOfflineModal = ref(false);
|
||||||
|
|
||||||
const navigateToResult = () => {
|
/**
|
||||||
uni.redirectTo({ url: `/pages/battle-result?battleId=${battleId.value}` });
|
* 监听设备在线状态,大乱斗比赛进行中设备离线时弹窗提示用户
|
||||||
};
|
*/
|
||||||
|
watch(online, (newVal, oldVal) => {
|
||||||
|
if (!newVal && oldVal && start.value === true) {
|
||||||
|
showOfflineModal.value = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
function recoverData(battleInfo, { force = false } = {}) {
|
function recoverData(battleInfo, { force = false } = {}) {
|
||||||
if (!battleInfo) return;
|
if (!battleInfo) return;
|
||||||
try {
|
try {
|
||||||
if (battleInfo.way === 1) title.value = "好友约战 - 大乱斗";
|
if (battleInfo.way === 1) title.value = "好友约战 - 大乱斗";
|
||||||
if (battleInfo.way === 2) title.value = "排位赛 - 大乱斗";
|
if (battleInfo.way === 2) title.value = "排位赛 - 大乱斗";
|
||||||
|
// 保存 way 供结算跳转时使用
|
||||||
|
way.value = battleInfo.way ?? 0;
|
||||||
|
|
||||||
// 优先使用接口数据,否则使用缓存
|
// 优先使用接口数据,否则使用缓存
|
||||||
if (battleInfo.teams?.[0]?.players) {
|
if (battleInfo.teams?.[0]?.players) {
|
||||||
@@ -122,8 +134,9 @@ async function onReceiveMessage(msg) {
|
|||||||
tips.value = "准备下半场";
|
tips.value = "准备下半场";
|
||||||
} else if (msg.type === MESSAGETYPESV2.BattleEnd) {
|
} else if (msg.type === MESSAGETYPESV2.BattleEnd) {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
|
// 全部跳转到新结算页
|
||||||
uni.redirectTo({
|
uni.redirectTo({
|
||||||
url: "/pages/battle-result?battleId=" + msg.matchId,
|
url: "/pages/friend-battle-result?battleId=" + msg.matchId,
|
||||||
});
|
});
|
||||||
}, 1000);
|
}, 1000);
|
||||||
}
|
}
|
||||||
@@ -200,13 +213,25 @@ onShow(async () => {
|
|||||||
<ScreenHint
|
<ScreenHint
|
||||||
:show="halfTimeTip"
|
:show="halfTimeTip"
|
||||||
mode="small"
|
mode="small"
|
||||||
:onClose="() => (halfTimeTip = false)"
|
|
||||||
>
|
>
|
||||||
<view class="half-time-tip">
|
<view class="half-time-tip">
|
||||||
<text>上半场结束,休息一下吧:)</text>
|
<text>上半场结束,休息一下吧:)</text>
|
||||||
<text>20秒后开始下半场</text>
|
<text>20秒后开始下半场</text>
|
||||||
</view>
|
</view>
|
||||||
</ScreenHint>
|
</ScreenHint>
|
||||||
|
<!-- 设备离线提示弹窗 -->
|
||||||
|
<SModal
|
||||||
|
:show="showOfflineModal"
|
||||||
|
:noBg="true"
|
||||||
|
height="360rpx"
|
||||||
|
:onClose="() => (showOfflineModal = false)"
|
||||||
|
>
|
||||||
|
<view class="offline-modal">
|
||||||
|
<text class="offline-title">设备已离线</text>
|
||||||
|
<text class="offline-desc">检测到设备已断开连接,请检查设备后继续比赛</text>
|
||||||
|
<SButton @click="showOfflineModal = false">我知道了</SButton>
|
||||||
|
</view>
|
||||||
|
</SModal>
|
||||||
</view>
|
</view>
|
||||||
</Container>
|
</Container>
|
||||||
</template>
|
</template>
|
||||||
@@ -216,4 +241,25 @@ onShow(async () => {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.offline-modal {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 60rpx 40rpx 40rpx;
|
||||||
|
gap: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.offline-title {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #FED847;
|
||||||
|
}
|
||||||
|
|
||||||
|
.offline-desc {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #CCCCCC;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -55,7 +55,14 @@ const onPractiseLoading = async (page) => {
|
|||||||
};
|
};
|
||||||
const getName = (battle) => {
|
const getName = (battle) => {
|
||||||
if (battle.mode <= 3) return `${battle.mode}V${battle.mode}`;
|
if (battle.mode <= 3) return `${battle.mode}V${battle.mode}`;
|
||||||
return battle.mode + "人大乱斗";
|
// 排位赛大乱斗:mode 数字与实际人数不一致,使用固定映射
|
||||||
|
if (battle.way === 2) {
|
||||||
|
if (battle.mode === 4) return "5人大乱斗";
|
||||||
|
if (battle.mode === 5) return "10人大乱斗";
|
||||||
|
}
|
||||||
|
// 好友约战大乱斗:从 teams[0].players 取实际参与人数动态展示
|
||||||
|
const count = battle.teams?.[0]?.players?.length;
|
||||||
|
return count ? `${count}人大乱斗` : "大乱斗";
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -108,7 +115,7 @@ onLoad((options) => {
|
|||||||
:blueTeam="item.teams[1] ? item.teams[1].players : []"
|
:blueTeam="item.teams[1] ? item.teams[1].players : []"
|
||||||
:redTeam="item.teams[2] ? item.teams[2].players : []"
|
:redTeam="item.teams[2] ? item.teams[2].players : []"
|
||||||
:winner="item.winTeam"
|
:winner="item.winTeam"
|
||||||
:showRank="item.teams[0]"
|
:showRank="!!item.teams[0]"
|
||||||
:showHeader="false"
|
:showHeader="false"
|
||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
@@ -131,7 +138,7 @@ onLoad((options) => {
|
|||||||
:blueTeam="item.teams[1] ? item.teams[1].players : []"
|
:blueTeam="item.teams[1] ? item.teams[1].players : []"
|
||||||
:redTeam="item.teams[2] ? item.teams[2].players : []"
|
:redTeam="item.teams[2] ? item.teams[2].players : []"
|
||||||
:winner="item.winTeam"
|
:winner="item.winTeam"
|
||||||
:showRank="item.teams[0]"
|
:showRank="!!item.teams[0]"
|
||||||
:showHeader="false"
|
:showHeader="false"
|
||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -107,7 +107,7 @@ const targetTypeName = computed(() => {
|
|||||||
<template>
|
<template>
|
||||||
<view class="container" :style="{ paddingTop: paddingTop + 'px' }">
|
<view class="container" :style="{ paddingTop: paddingTop + 'px' }">
|
||||||
<image
|
<image
|
||||||
src="../static/app-bg5.png"
|
src="https://static.shelingxingqiu.com/shootmini/static/app-bg5.png"
|
||||||
class="bg-image"
|
class="bg-image"
|
||||||
mode="aspectFill"
|
mode="aspectFill"
|
||||||
:style="{ height: paddingTop + 60 + 'px' }"
|
:style="{ height: paddingTop + 60 + 'px' }"
|
||||||
|
|||||||
@@ -59,7 +59,7 @@ async function onReceiveMessage(msg) {
|
|||||||
if (msg.type === MESSAGETYPESV2.ShootResult) {
|
if (msg.type === MESSAGETYPESV2.ShootResult) {
|
||||||
scores.value = msg.details;
|
scores.value = msg.details;
|
||||||
} else if (msg.type === MESSAGETYPESV2.BattleEnd) {
|
} else if (msg.type === MESSAGETYPESV2.BattleEnd) {
|
||||||
setTimeout(onOver, 1500);
|
// setTimeout(onOver, 1500);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -84,6 +84,12 @@ const onClickShare = debounce(async () => {
|
|||||||
await wxShare("shareCanvas");
|
await wxShare("shareCanvas");
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function onAudioEnded(s) {
|
||||||
|
if (s.indexOf("比赛结束") >= 0) {
|
||||||
|
onOver()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
// audioManager.play("第一轮");
|
// audioManager.play("第一轮");
|
||||||
uni.setKeepScreenOn({
|
uni.setKeepScreenOn({
|
||||||
@@ -91,6 +97,7 @@ onMounted(async () => {
|
|||||||
});
|
});
|
||||||
uni.$on("socket-inbox", onReceiveMessage);
|
uni.$on("socket-inbox", onReceiveMessage);
|
||||||
uni.$on("share-image", onClickShare);
|
uni.$on("share-image", onClickShare);
|
||||||
|
uni.$on("audioEnded", onAudioEnded);
|
||||||
const result = await createPractiseAPI(total, 120, targetType.value);
|
const result = await createPractiseAPI(total, 120, targetType.value);
|
||||||
if (result) practiseId.value = result.id;
|
if (result) practiseId.value = result.id;
|
||||||
});
|
});
|
||||||
@@ -101,6 +108,7 @@ onBeforeUnmount(() => {
|
|||||||
});
|
});
|
||||||
uni.$off("socket-inbox", onReceiveMessage);
|
uni.$off("socket-inbox", onReceiveMessage);
|
||||||
uni.$off("share-image", onClickShare);
|
uni.$off("share-image", onClickShare);
|
||||||
|
uni.$off("audioEnded", onAudioEnded);
|
||||||
audioManager.stopAll();
|
audioManager.stopAll();
|
||||||
endPractiseAPI();
|
endPractiseAPI();
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -89,7 +89,7 @@ async function onComplete() {
|
|||||||
practiseResult.value = {};
|
practiseResult.value = {};
|
||||||
start.value = false;
|
start.value = false;
|
||||||
scores.value = [];
|
scores.value = [];
|
||||||
const result = await createPractiseAPI(total, 360);
|
const result = await createPractiseAPI(total, 3600);
|
||||||
if (result) practiseId.value = result.id;
|
if (result) practiseId.value = result.id;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -105,7 +105,7 @@ onMounted(async () => {
|
|||||||
});
|
});
|
||||||
uni.$on("socket-inbox", onReceiveMessage);
|
uni.$on("socket-inbox", onReceiveMessage);
|
||||||
uni.$on("share-image", onClickShare);
|
uni.$on("share-image", onClickShare);
|
||||||
const result = await createPractiseAPI(total, 360, targetType.value);
|
const result = await createPractiseAPI(total, 3600, targetType.value);
|
||||||
if (result) practiseId.value = result.id;
|
if (result) practiseId.value = result.id;
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -132,7 +132,7 @@ onBeforeUnmount(() => {
|
|||||||
<ShootProgress
|
<ShootProgress
|
||||||
:tips="`请连续射${total}支箭`"
|
:tips="`请连续射${total}支箭`"
|
||||||
:start="start"
|
:start="start"
|
||||||
:total="360"
|
:total="3600"
|
||||||
:onStop="onOver"
|
:onStop="onOver"
|
||||||
/>
|
/>
|
||||||
<view class="user-row">
|
<view class="user-row">
|
||||||
|
|||||||
@@ -1,58 +1,333 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted } from "vue";
|
import { computed, nextTick, onMounted, ref } from "vue";
|
||||||
|
import { onLoad } from "@dcloudio/uni-app";
|
||||||
import Avatar from "@/components/Avatar.vue";
|
import Avatar from "@/components/Avatar.vue";
|
||||||
|
import {
|
||||||
|
getMvpRankList,
|
||||||
|
getMyMvpRank,
|
||||||
|
getMyScoreRank,
|
||||||
|
getMyTenRingRank,
|
||||||
|
getScoreRankList,
|
||||||
|
getTenRingRankList,
|
||||||
|
} from "@/apis";
|
||||||
import { capsuleHeight } from "@/util";
|
import { capsuleHeight } from "@/util";
|
||||||
import useStore from "@/store";
|
import useStore from "@/store";
|
||||||
import { storeToRefs } from "pinia";
|
import { storeToRefs } from "pinia";
|
||||||
|
|
||||||
|
const PAGE_SIZE = 10;
|
||||||
|
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
const { user, rankData } = storeToRefs(store);
|
const { user } = storeToRefs(store);
|
||||||
const { getLvlName } = store;
|
const { getLvlName } = store;
|
||||||
|
|
||||||
const selectedIndex = ref(0);
|
const createRankState = () => ({
|
||||||
const currentList = ref([]);
|
list: [],
|
||||||
const myData = ref({});
|
page: 0,
|
||||||
const addBg = ref(false);
|
pageSize: PAGE_SIZE,
|
||||||
|
loading: false,
|
||||||
onMounted(async () => {
|
noMore: false,
|
||||||
handleSelect(0);
|
loaded: false,
|
||||||
|
scrollTop: 0,
|
||||||
|
myData: null,
|
||||||
|
myDataLoaded: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
const handleSelect = (index) => {
|
const rankTabs = [
|
||||||
selectedIndex.value = index;
|
{
|
||||||
myData.value = {};
|
key: "score",
|
||||||
currentList.value = [];
|
title: "积分榜",
|
||||||
if (index === 0) {
|
subTitle: "排位赛积分",
|
||||||
currentList.value = rankData.value.rank;
|
listApi: getScoreRankList,
|
||||||
} else if (index === 1) {
|
myApi: getMyScoreRank,
|
||||||
currentList.value = rankData.value.mvpRank;
|
},
|
||||||
} else if (index === 2) {
|
{
|
||||||
currentList.value = rankData.value.ringRank;
|
key: "mvp",
|
||||||
|
title: "MVP榜",
|
||||||
|
subTitle: "MVP次数",
|
||||||
|
listApi: getMvpRankList,
|
||||||
|
myApi: getMyMvpRank,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "tenRing",
|
||||||
|
title: "十环榜",
|
||||||
|
subTitle: "十环次数",
|
||||||
|
listApi: getTenRingRankList,
|
||||||
|
myApi: getMyTenRingRank,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// 解析 ranking 页面传入的榜单参数,进入页面时默认选中对应 tab。
|
||||||
|
const getTabIndexByRouteParam = (tab) => {
|
||||||
|
if (tab === "mvp") return 1;
|
||||||
|
if (tab === "tenRing") return 2;
|
||||||
|
return 0;
|
||||||
|
};
|
||||||
|
|
||||||
|
const rankStates = ref({
|
||||||
|
score: createRankState(),
|
||||||
|
mvp: createRankState(),
|
||||||
|
tenRing: createRankState(),
|
||||||
|
});
|
||||||
|
|
||||||
|
const selectedIndex = ref(0);
|
||||||
|
const initialTabIndex = ref(0);
|
||||||
|
const pageMounted = ref(false);
|
||||||
|
const initializedFromRoute = ref(false);
|
||||||
|
const addBg = ref(false);
|
||||||
|
const currentScrollTop = ref(0);
|
||||||
|
const restoreScrollTop = ref(0);
|
||||||
|
const tabSwitchAnimating = ref(false);
|
||||||
|
const suppressScrollSync = ref(false);
|
||||||
|
const suppressLoadMore = ref(false);
|
||||||
|
const stickyTabsTop = capsuleHeight + 50;
|
||||||
|
const stickyTabsActive = ref(false);
|
||||||
|
const tabsStickyThreshold = ref(0);
|
||||||
|
const tabsStickyReady = ref(false);
|
||||||
|
const tabsHeight = ref(0);
|
||||||
|
|
||||||
|
const getTabConfig = (index = selectedIndex.value) => rankTabs[index];
|
||||||
|
const getTabKey = (index = selectedIndex.value) => getTabConfig(index).key;
|
||||||
|
|
||||||
|
// 统一提取榜单接口返回的列表数据,兼容数组和对象两种返回格式。
|
||||||
|
const getRankListFromResponse = (result) => {
|
||||||
|
if (Array.isArray(result)) return result;
|
||||||
|
if (Array.isArray(result?.list)) return result.list;
|
||||||
|
if (Array.isArray(result?.items)) return result.items;
|
||||||
|
return [];
|
||||||
|
};
|
||||||
|
|
||||||
|
// 为当前登录用户构造默认的个人榜单信息,避免接口未返回时底部区域缺数据。
|
||||||
|
const buildDefaultMyData = () => ({
|
||||||
|
rank: null,
|
||||||
|
userId: user.value.id,
|
||||||
|
name: user.value.nickName,
|
||||||
|
avatar: user.value.avatar,
|
||||||
|
totalScore: 0,
|
||||||
|
mvpCount: 0,
|
||||||
|
tenRings: 0,
|
||||||
|
totalGames: 0,
|
||||||
|
totalCount: 0,
|
||||||
|
rankName: user.value.lvlName,
|
||||||
|
rankLvl: user.value.rankLvl,
|
||||||
|
});
|
||||||
|
|
||||||
|
const currentTabKey = computed(() => getTabKey(selectedIndex.value));
|
||||||
|
const currentState = computed(() => rankStates.value[currentTabKey.value]);
|
||||||
|
const currentList = computed(() => currentState.value.list);
|
||||||
|
const currentSubTitle = computed(() => getTabConfig(selectedIndex.value).subTitle);
|
||||||
|
const currentMyData = computed(() => {
|
||||||
|
if (!user.value.id) return null;
|
||||||
|
return currentState.value.myData || buildDefaultMyData();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 统一格式化段位和场次文案,兼容不同接口的字段命名。
|
||||||
|
const formatLevelText = (item = {}) => {
|
||||||
|
const levelName = item.rankName || getLvlName(item.rankLvl) || "暂无段位";
|
||||||
|
const totalGames = item.totalGames ?? item.TotalGames ?? 0;
|
||||||
|
return `${levelName},${totalGames}场`;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 统一读取榜单项的排名字段,没有后端 rank 时回退到前端序号。
|
||||||
|
const getDisplayRank = (item = {}, index = 0) => {
|
||||||
|
return item.rank ?? index + 1;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 底部个人排名在未上榜时展示占位符,而不是空白。
|
||||||
|
const getDisplayMyRank = (item = {}) => {
|
||||||
|
return item.rank ?? "-";
|
||||||
|
};
|
||||||
|
|
||||||
|
const getScoreValue = (item = {}) => item.totalScore ?? 0;
|
||||||
|
const getMvpValue = (item = {}) => item.mvpCount ?? item.totalScore ?? 0;
|
||||||
|
const getTenRingValue = (item = {}) =>
|
||||||
|
item.tenRings ?? item.TenRings ?? item.totalScore ?? 0;
|
||||||
|
|
||||||
|
// 根据当前选中的榜单类型,读取对应的展示值。
|
||||||
|
const getRankValue = (item = {}, index = selectedIndex.value) => {
|
||||||
|
if (index === 0) return getScoreValue(item);
|
||||||
|
if (index === 1) return getMvpValue(item);
|
||||||
|
return getTenRingValue(item);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getRankUnit = (index = selectedIndex.value) => {
|
||||||
|
if (index === 0) return "分";
|
||||||
|
return "次";
|
||||||
|
};
|
||||||
|
|
||||||
|
// 统一设置页面当前的视觉滚动状态,避免吸顶和顶部背景不同步。
|
||||||
|
const syncScrollVisualState = (scrollTop = 0) => {
|
||||||
|
currentScrollTop.value = scrollTop;
|
||||||
|
addBg.value = scrollTop > 100;
|
||||||
|
if (!tabsStickyReady.value) {
|
||||||
|
stickyTabsActive.value = false;
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
if (user.value.id) {
|
stickyTabsActive.value = scrollTop >= tabsStickyThreshold.value;
|
||||||
currentList.value.some((item) => {
|
};
|
||||||
if (item.userId === user.value.id) {
|
|
||||||
myData.value = item;
|
// 只保留一条滚动恢复链路:从当前滚动位置平滑滚到目标位置,避免多套控制同时生效造成闪烁。
|
||||||
return true;
|
const applyScrollPosition = async (
|
||||||
}
|
fromScrollTop = currentScrollTop.value,
|
||||||
return false;
|
toScrollTop = 0,
|
||||||
});
|
withAnimation = false
|
||||||
if (!myData.value.userId) {
|
) => {
|
||||||
myData.value = {
|
tabSwitchAnimating.value = withAnimation;
|
||||||
userId: user.value.id,
|
restoreScrollTop.value = fromScrollTop;
|
||||||
TotalGames: 0,
|
await nextTick();
|
||||||
totalScore: 0,
|
restoreScrollTop.value = toScrollTop;
|
||||||
mvpCount: 0,
|
syncScrollVisualState(toScrollTop);
|
||||||
TenRings: 0,
|
};
|
||||||
};
|
|
||||||
|
// 请求指定榜单的某一页数据,只有当前榜单会追加分页,不影响其他榜单的浏览状态。
|
||||||
|
const loadRankPage = async (tabKey, { reset = false } = {}) => {
|
||||||
|
const state = rankStates.value[tabKey];
|
||||||
|
const config = rankTabs.find((item) => item.key === tabKey);
|
||||||
|
if (!config || state.loading) return;
|
||||||
|
if (!reset && state.noMore) return;
|
||||||
|
|
||||||
|
const nextPage = reset ? 1 : state.page + 1;
|
||||||
|
state.loading = true;
|
||||||
|
if (reset) state.noMore = false;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await config.listApi(undefined, nextPage, PAGE_SIZE);
|
||||||
|
const list = getRankListFromResponse(result);
|
||||||
|
state.list = reset ? list : state.list.concat(list);
|
||||||
|
state.page = nextPage;
|
||||||
|
state.loaded = true;
|
||||||
|
state.noMore = list.length < PAGE_SIZE;
|
||||||
|
} catch (error) {
|
||||||
|
if (reset) {
|
||||||
|
state.list = [];
|
||||||
|
state.page = 0;
|
||||||
|
state.loaded = false;
|
||||||
|
state.noMore = false;
|
||||||
}
|
}
|
||||||
|
uni.showToast({
|
||||||
|
title: "排行榜加载失败",
|
||||||
|
icon: "none",
|
||||||
|
});
|
||||||
|
console.error("load rank page error", error);
|
||||||
|
} finally {
|
||||||
|
state.loading = false;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const onScrollView = (e) => {
|
// 每个榜单独立请求一次个人排名信息,切回该榜单时直接复用,避免打断浏览上下文。
|
||||||
addBg.value = e.detail.scrollTop > 100;
|
const loadMyRankData = async (tabKey) => {
|
||||||
|
if (!user.value.id) return;
|
||||||
|
|
||||||
|
const state = rankStates.value[tabKey];
|
||||||
|
const config = rankTabs.find((item) => item.key === tabKey);
|
||||||
|
if (!config || state.myDataLoaded) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await config.myApi();
|
||||||
|
state.myData = {
|
||||||
|
...buildDefaultMyData(),
|
||||||
|
...(result || {}),
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
state.myData = buildDefaultMyData();
|
||||||
|
console.error("load my rank data error", error);
|
||||||
|
} finally {
|
||||||
|
state.myDataLoaded = true;
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
|
// 首次进入或切换到未加载过的榜单时,初始化它的分页数据和个人横条数据。
|
||||||
|
const ensureTabReady = async (index = selectedIndex.value) => {
|
||||||
|
const tabKey = getTabKey(index);
|
||||||
|
const state = rankStates.value[tabKey];
|
||||||
|
|
||||||
|
if (!state.loaded) {
|
||||||
|
await loadRankPage(tabKey, { reset: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (user.value.id && !state.myDataLoaded) {
|
||||||
|
await loadMyRankData(tabKey);
|
||||||
|
}
|
||||||
|
|
||||||
|
await nextTick();
|
||||||
|
return state.scrollTop || 0;
|
||||||
|
};
|
||||||
|
|
||||||
|
onLoad((options = {}) => {
|
||||||
|
initialTabIndex.value = getTabIndexByRouteParam(options.tab);
|
||||||
|
selectedIndex.value = initialTabIndex.value;
|
||||||
|
if (pageMounted.value && !initializedFromRoute.value) {
|
||||||
|
initializePage();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 页面初始化同时兼容 onLoad 和 onMounted 的先后顺序,确保首屏一定落到路由指定的榜单。
|
||||||
|
const initializePage = async () => {
|
||||||
|
if (initializedFromRoute.value) return;
|
||||||
|
initializedFromRoute.value = true;
|
||||||
|
const nextScrollTop = await ensureTabReady(selectedIndex.value);
|
||||||
|
await applyScrollPosition(0, nextScrollTop, false);
|
||||||
|
setTimeout(() => {
|
||||||
|
measureTabsMetrics();
|
||||||
|
}, 0);
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
pageMounted.value = true;
|
||||||
|
await initializePage();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 切换榜单时保留原榜单的列表和滚动位置,切回来后继续从之前的位置浏览。
|
||||||
|
const handleSelect = async (index) => {
|
||||||
|
if (index === selectedIndex.value) return;
|
||||||
|
|
||||||
|
const previousTabKey = currentTabKey.value;
|
||||||
|
rankStates.value[previousTabKey].scrollTop = currentScrollTop.value;
|
||||||
|
const previousScrollTop = currentScrollTop.value;
|
||||||
|
|
||||||
|
suppressScrollSync.value = true;
|
||||||
|
suppressLoadMore.value = true;
|
||||||
|
selectedIndex.value = index;
|
||||||
|
const nextScrollTop = await ensureTabReady(index);
|
||||||
|
await applyScrollPosition(previousScrollTop, nextScrollTop, false);
|
||||||
|
setTimeout(() => {
|
||||||
|
tabSwitchAnimating.value = false;
|
||||||
|
suppressScrollSync.value = false;
|
||||||
|
suppressLoadMore.value = false;
|
||||||
|
}, 220);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 触底后只加载当前榜单的下一页数据,其他榜单的数据和页码保持不变。
|
||||||
|
const loadMore = async () => {
|
||||||
|
if (suppressLoadMore.value) return;
|
||||||
|
await loadRankPage(currentTabKey.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 实时记录当前榜单的滚动位置,切换回来时恢复到上一次浏览位置。
|
||||||
|
const onScrollView = (e) => {
|
||||||
|
const scrollTop = e.detail.scrollTop || 0;
|
||||||
|
if (suppressScrollSync.value) return;
|
||||||
|
syncScrollVisualState(scrollTop);
|
||||||
|
rankStates.value[currentTabKey.value].scrollTop = scrollTop;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 计算 tab 在滚动内容中的真实位置和高度,作为吸顶切换的唯一依据。
|
||||||
|
const measureTabsMetrics = () => {
|
||||||
|
const query = uni.createSelectorQuery();
|
||||||
|
query
|
||||||
|
.select("#rank-list-content-start")
|
||||||
|
.boundingClientRect()
|
||||||
|
.select(".rank-tabs-anchor")
|
||||||
|
.boundingClientRect()
|
||||||
|
.exec((res = []) => {
|
||||||
|
const [startRect, rect] = res;
|
||||||
|
if (!startRect || !rect) return;
|
||||||
|
const tabOffset = rect.top - startRect.top;
|
||||||
|
tabsStickyThreshold.value = Math.max(0, tabOffset - 92);
|
||||||
|
tabsHeight.value = rect.height || 0;
|
||||||
|
tabsStickyReady.value = true;
|
||||||
|
syncScrollVisualState(currentScrollTop.value);
|
||||||
|
});
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -65,7 +340,7 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
|
|||||||
>
|
>
|
||||||
<image
|
<image
|
||||||
:style="{ opacity: addBg ? 1 : 0 }"
|
:style="{ opacity: addBg ? 1 : 0 }"
|
||||||
src="../static/app-bg.png"
|
src="https://static.shelingxingqiu.com/shootmini/static/app-bg.png"
|
||||||
mode="widthFix"
|
mode="widthFix"
|
||||||
/>
|
/>
|
||||||
<navigator open-type="navigateBack">
|
<navigator open-type="navigateBack">
|
||||||
@@ -75,18 +350,32 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
|
|||||||
</view>
|
</view>
|
||||||
<scroll-view
|
<scroll-view
|
||||||
scroll-y
|
scroll-y
|
||||||
|
:scroll-with-animation="tabSwitchAnimating"
|
||||||
|
:scroll-top="restoreScrollTop"
|
||||||
@scroll="onScrollView"
|
@scroll="onScrollView"
|
||||||
:style="{ height: myData.userId ? '90vh' : '100vh' }"
|
@scrolltolower="loadMore"
|
||||||
|
:style="{ height: user.id ? '90vh' : '100vh' }"
|
||||||
>
|
>
|
||||||
|
<view id="rank-list-content-start" class="content-start-anchor"></view>
|
||||||
<image
|
<image
|
||||||
src="https://static.shelingxingqiu.com/attachment/2025-09-25/dd1p9b3wcrwnlnghiq.png"
|
src="https://static.shelingxingqiu.com/attachment/2025-09-25/dd1p9b3wcrwnlnghiq.png"
|
||||||
mode="widthFix"
|
mode="widthFix"
|
||||||
class="header-bg"
|
class="header-bg"
|
||||||
|
@load="measureTabsMetrics"
|
||||||
/>
|
/>
|
||||||
<view class="rank-tabs">
|
<view
|
||||||
|
v-if="stickyTabsActive"
|
||||||
|
class="rank-tabs-placeholder"
|
||||||
|
:style="{ height: `${tabsHeight}px` }"
|
||||||
|
/>
|
||||||
|
<view
|
||||||
|
class="rank-tabs rank-tabs-anchor"
|
||||||
|
:class="{ 'rank-tabs-anchor-fixed': stickyTabsActive }"
|
||||||
|
:style="stickyTabsActive ? { top: `${stickyTabsTop}px` } : {}"
|
||||||
|
>
|
||||||
<view
|
<view
|
||||||
v-for="(rankType, index) in ['积分榜', 'MVP榜', '十环榜']"
|
v-for="(rankType, index) in rankTabs"
|
||||||
:key="index"
|
:key="rankType.key"
|
||||||
:style="{
|
:style="{
|
||||||
fontSize: index === selectedIndex ? '16px' : '14px',
|
fontSize: index === selectedIndex ? '16px' : '14px',
|
||||||
color: index === selectedIndex ? '#000' : '#fff',
|
color: index === selectedIndex ? '#000' : '#fff',
|
||||||
@@ -94,18 +383,18 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
|
|||||||
}"
|
}"
|
||||||
@tap="handleSelect(index)"
|
@tap="handleSelect(index)"
|
||||||
>
|
>
|
||||||
{{ rankType }}
|
{{ rankType.title }}
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="rank-list">
|
<view class="rank-list">
|
||||||
<view class="rank-list-header">
|
<view class="rank-list-header">
|
||||||
<text>排名</text>
|
<text>排名</text>
|
||||||
<text>用户ID</text>
|
<text>用户ID</text>
|
||||||
<text>{{ subTitles[selectedIndex] }}</text>
|
<text>{{ currentSubTitle }}</text>
|
||||||
</view>
|
</view>
|
||||||
<view
|
<view
|
||||||
v-for="(item, index) in currentList"
|
v-for="(item, index) in currentList"
|
||||||
:key="index"
|
:key="`${currentTabKey}-${index}-${item.userId || item.name}`"
|
||||||
class="rank-list-item"
|
class="rank-list-item"
|
||||||
:style="{
|
:style="{
|
||||||
backgroundColor: index % 2 === 0 ? '#9898981f' : 'transparent',
|
backgroundColor: index % 2 === 0 ? '#9898981f' : 'transparent',
|
||||||
@@ -147,65 +436,60 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
|
|||||||
src="../static/champ3.png"
|
src="../static/champ3.png"
|
||||||
mode="widthFix"
|
mode="widthFix"
|
||||||
/>
|
/>
|
||||||
<view v-if="index > 2" class="view-crown">{{ index + 1 }}</view>
|
<view v-if="index > 2" class="view-crown">
|
||||||
|
{{ getDisplayRank(item, index) }}
|
||||||
|
</view>
|
||||||
<Avatar :src="item.avatar" />
|
<Avatar :src="item.avatar" />
|
||||||
<view class="rank-item-content">
|
<view class="rank-item-content">
|
||||||
<text class="truncate">{{ item.name }}</text>
|
<text class="truncate">{{ item.name }}</text>
|
||||||
<text>{{ getLvlName(item.rankLvl) }},{{ item.TotalGames }}场</text>
|
<text>{{ formatLevelText(item) }}</text>
|
||||||
</view>
|
</view>
|
||||||
<text class="rank-item-integral" v-if="selectedIndex === 0">
|
<text class="rank-item-integral">
|
||||||
<text
|
<text
|
||||||
:style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
|
:style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
|
||||||
>{{ item.totalScore }} </text
|
>
|
||||||
>分
|
{{ getRankValue(item) }}
|
||||||
</text>
|
</text>
|
||||||
<text class="rank-item-integral" v-if="selectedIndex === 1">
|
{{ getRankUnit() }}
|
||||||
<text
|
|
||||||
:style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
|
|
||||||
>{{ item.mvpCount }} </text
|
|
||||||
>次
|
|
||||||
</text>
|
|
||||||
<text class="rank-item-integral" v-if="selectedIndex === 2">
|
|
||||||
<text
|
|
||||||
:style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
|
|
||||||
>{{ item.TenRings }} </text
|
|
||||||
>次
|
|
||||||
</text>
|
</text>
|
||||||
</view>
|
</view>
|
||||||
<view v-if="!currentList.length" class="no-data">
|
<view
|
||||||
<text>筹备中...</text>
|
v-if="currentState.loading && !currentList.length"
|
||||||
|
class="no-data"
|
||||||
|
>
|
||||||
|
<text>加载中...</text>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
v-else-if="!currentState.loading && !currentList.length"
|
||||||
|
class="no-data"
|
||||||
|
>
|
||||||
|
<text>暂无数据</text>
|
||||||
|
</view>
|
||||||
|
<view v-else class="list-tip">
|
||||||
|
<text v-if="currentState.loading">加载中...</text>
|
||||||
|
<text v-else-if="currentState.noMore">没有更多了</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
<view class="my-rank-data" v-if="myData.userId">
|
<view class="my-rank-data" v-if="currentMyData">
|
||||||
<image
|
<image
|
||||||
src="https://static.shelingxingqiu.com/attachment/2025-08-05/dbuaf19pf7qd8ps0uh.png"
|
src="https://static.shelingxingqiu.com/attachment/2025-08-05/dbuaf19pf7qd8ps0uh.png"
|
||||||
mode="widthFix"
|
mode="widthFix"
|
||||||
/>
|
/>
|
||||||
<text>{{ myData.rank }}</text>
|
<text>{{ getDisplayMyRank(currentMyData) }}</text>
|
||||||
<Avatar :src="user.avatar" />
|
<Avatar :src="currentMyData.avatar || user.avatar" />
|
||||||
<view class="rank-item-content">
|
<view class="rank-item-content">
|
||||||
<text class="truncate">{{ user.nickName }}</text>
|
<text class="truncate">{{ currentMyData.name || user.nickName }}</text>
|
||||||
<text>{{ user.lvlName }},{{ myData.TotalGames }}场</text>
|
<text>{{ formatLevelText(currentMyData) }}</text>
|
||||||
</view>
|
</view>
|
||||||
<text class="rank-item-integral" v-if="selectedIndex === 0">
|
<text class="rank-item-integral">
|
||||||
<text
|
<text
|
||||||
:style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
|
:style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
|
||||||
>{{ myData.totalScore || 0 }}</text
|
>
|
||||||
>分</text
|
{{ getRankValue(currentMyData) }}
|
||||||
>
|
</text>
|
||||||
<text class="rank-item-integral" v-if="selectedIndex === 1">
|
{{ getRankUnit() }}
|
||||||
<text
|
</text>
|
||||||
:style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
|
|
||||||
>{{ myData.mvpCount || 0 }}</text
|
|
||||||
>次</text
|
|
||||||
>
|
|
||||||
<text class="rank-item-integral" v-if="selectedIndex === 2">
|
|
||||||
<text
|
|
||||||
:style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
|
|
||||||
>{{ myData.TenRings || 0 }}</text
|
|
||||||
>次</text
|
|
||||||
>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@@ -214,9 +498,16 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
|
|||||||
.container {
|
.container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.content-start-anchor {
|
||||||
|
width: 100%;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.header-bg {
|
.header-bg {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
@@ -227,6 +518,7 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
|
|||||||
z-index: 10;
|
z-index: 10;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-back {
|
.header-back {
|
||||||
width: 22px;
|
width: 22px;
|
||||||
height: 22px;
|
height: 22px;
|
||||||
@@ -234,6 +526,7 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
|
|||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header > image:first-child {
|
.header > image:first-child {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
@@ -242,25 +535,40 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
|
|||||||
left: 0;
|
left: 0;
|
||||||
transition: all 0.5s ease;
|
transition: all 0.5s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header > text {
|
.header > text {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
transition: all 0.5s ease;
|
transition: all 0.5s ease;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rank-tabs {
|
.rank-tabs {
|
||||||
width: calc(100% - 20px);
|
width: calc(100% - 20px);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
padding: 0 10px;
|
padding: 20rpx 10px;
|
||||||
margin-top: -15px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.rank-tabs > view {
|
.rank-tabs > view {
|
||||||
width: 25%;
|
width: 25%;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.rank-tabs-placeholder {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rank-tabs-anchor-fixed {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
z-index: 11;
|
||||||
|
background: #000000;
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
}
|
||||||
|
|
||||||
.rank-list {
|
.rank-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -268,11 +576,12 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
|
|||||||
width: calc(100% - 20px);
|
width: calc(100% - 20px);
|
||||||
color: #fff9;
|
color: #fff9;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
margin: 10px;
|
margin: 0 10px 10px 10px;
|
||||||
border: 1px solid rgb(255 217 71 / 0.2);
|
border: 1px solid rgb(255 217 71 / 0.2);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
background-color: #313131;
|
background-color: #313131;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rank-list > view {
|
.rank-list > view {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -281,20 +590,25 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rank-list-header {
|
.rank-list-header {
|
||||||
width: calc(100% - 20px) !important;
|
width: calc(100% - 20px) !important;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rank-list-header > text:nth-child(2) {
|
.rank-list-header > text:nth-child(2) {
|
||||||
width: 14%;
|
width: 14%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rank-list-header > text:last-child {
|
.rank-list-header > text:last-child {
|
||||||
width: 30%;
|
width: 30%;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rank-list-item {
|
.rank-list-item {
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.player-bg {
|
.player-bg {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -302,12 +616,14 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
|
|||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.player-crown {
|
.player-crown {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 27px;
|
width: 27px;
|
||||||
height: 27px;
|
height: 27px;
|
||||||
margin: 0 15px;
|
margin: 0 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.view-crown {
|
.view-crown {
|
||||||
width: 27px;
|
width: 27px;
|
||||||
height: 27px;
|
height: 27px;
|
||||||
@@ -319,6 +635,7 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
|
|||||||
background-color: #676767;
|
background-color: #676767;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rank-item-content {
|
.rank-item-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -328,17 +645,20 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
|
|||||||
position: relative;
|
position: relative;
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rank-item-content > text:first-child {
|
.rank-item-content > text:first-child {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
margin-bottom: 3px;
|
margin-bottom: 3px;
|
||||||
width: 120px;
|
width: 120px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rank-list-item > text:last-child {
|
.rank-list-item > text:last-child {
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
width: 56px;
|
width: 56px;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-rank-data {
|
.my-rank-data {
|
||||||
width: calc(100% - 30px);
|
width: calc(100% - 30px);
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
@@ -352,12 +672,14 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-rank-data > image:first-child {
|
.my-rank-data > image:first-child {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: -5px;
|
top: -5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-rank-data > text:nth-child(2) {
|
.my-rank-data > text:nth-child(2) {
|
||||||
background-color: #c1a434;
|
background-color: #c1a434;
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -369,20 +691,24 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
|
|||||||
min-width: 15px;
|
min-width: 15px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-rank-data > text:last-child {
|
.my-rank-data > text:last-child {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
width: 65px;
|
width: 65px;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-rank-data > .rank-item-content > text:first-child {
|
.my-rank-data > .rank-item-content > text:first-child {
|
||||||
color: #fed847;
|
color: #fed847;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-rank-data > .rank-item-integral {
|
.my-rank-data > .rank-item-integral {
|
||||||
color: #fff9;
|
color: #fff9;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
margin-right: 0 !important;
|
margin-right: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-data {
|
.no-data {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 400px;
|
height: 400px;
|
||||||
@@ -392,4 +718,11 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
|
|||||||
color: #fff9;
|
color: #fff9;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.list-tip {
|
||||||
|
justify-content: center !important;
|
||||||
|
color: #fff9;
|
||||||
|
font-size: 12px;
|
||||||
|
min-height: 60rpx;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import {ref, onMounted, onBeforeUnmount, nextTick} from "vue";
|
import {ref, onMounted, onBeforeUnmount, nextTick, watch} from "vue";
|
||||||
import {onLoad, onShow, onHide} from "@dcloudio/uni-app";
|
import {onLoad, onShow, onHide} from "@dcloudio/uni-app";
|
||||||
import Container from "@/components/Container.vue";
|
import Container from "@/components/Container.vue";
|
||||||
import BattleHeader from "@/components/BattleHeader.vue";
|
import BattleHeader from "@/components/BattleHeader.vue";
|
||||||
@@ -11,6 +11,7 @@ import RoundEndTip from "@/components/RoundEndTip.vue";
|
|||||||
import TestDistance from "@/components/TestDistance.vue";
|
import TestDistance from "@/components/TestDistance.vue";
|
||||||
import TeamAvatars from "@/components/TeamAvatars.vue";
|
import TeamAvatars from "@/components/TeamAvatars.vue";
|
||||||
import ShootProgress2 from "@/components/ShootProgress2.vue";
|
import ShootProgress2 from "@/components/ShootProgress2.vue";
|
||||||
|
import SModal from "@/components/SModal.vue";
|
||||||
import {laserCloseAPI, getBattleAPI} from "@/apis";
|
import {laserCloseAPI, getBattleAPI} from "@/apis";
|
||||||
import {MESSAGETYPESV2} from "@/constants";
|
import {MESSAGETYPESV2} from "@/constants";
|
||||||
import audioManager from "@/audioManager";
|
import audioManager from "@/audioManager";
|
||||||
@@ -18,11 +19,13 @@ import useStore from "@/store";
|
|||||||
import {storeToRefs} from "pinia";
|
import {storeToRefs} from "pinia";
|
||||||
|
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
const {user} = storeToRefs(store);
|
const {user, online} = storeToRefs(store);
|
||||||
const start = ref(null);
|
const start = ref(null);
|
||||||
const tips = ref("");
|
const tips = ref("");
|
||||||
const battleId = ref("");
|
const battleId = ref("");
|
||||||
const currentRound = ref(0);
|
const currentRound = ref(0);
|
||||||
|
/** 专用于 RoundEndTip 展示的轮次,与进度条的 currentRound 解耦,避免 ToSomeoneShoot 提前更新 currentRound 导致 Tip 显示错误轮次 */
|
||||||
|
const roundTipRound = ref(0);
|
||||||
const goldenRound = ref(0);
|
const goldenRound = ref(0);
|
||||||
const currentRedPoint = ref(0);
|
const currentRedPoint = ref(0);
|
||||||
const currentBluePoint = ref(0);
|
const currentBluePoint = ref(0);
|
||||||
@@ -38,10 +41,29 @@ const showRoundTip = ref(false);
|
|||||||
const isFinalShoot = ref(false);
|
const isFinalShoot = ref(false);
|
||||||
const matchStatus = ref(undefined);
|
const matchStatus = ref(undefined);
|
||||||
const updateRemainSecond = ref(0);
|
const updateRemainSecond = ref(0);
|
||||||
|
/** 当前对局每人射击时间(秒),从后端 shootTime 字段动态读取,默认 15 */
|
||||||
|
const shootTimeTotal = ref(15);
|
||||||
|
/** 对战来源类型(1=好友约战,2=匹配对战),用于结算页分流 */
|
||||||
|
const battleWay = ref(0);
|
||||||
|
/** 上一次处理的 ToSomeoneShoot 关键字段,用于去重过滤重复消息 */
|
||||||
|
const lastToSomeoneShootKey = ref("");
|
||||||
|
/** 控制设备离线提示弹窗的显示状态 */
|
||||||
|
const showOfflineModal = ref(false);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 监听设备在线状态,比赛进行中设备离线时弹窗提示用户
|
||||||
|
*/
|
||||||
|
watch(online, (newVal, oldVal) => {
|
||||||
|
if (!newVal && oldVal && start.value === true) {
|
||||||
|
showOfflineModal.value = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
const recoverData = (battleInfo, {force = false, arrowOnly = false} = {}) => {
|
const recoverData = (battleInfo, {force = false, arrowOnly = false} = {}) => {
|
||||||
try {
|
try {
|
||||||
battleId.value = battleInfo.matchId;
|
battleId.value = battleInfo.matchId;
|
||||||
|
// 存储对战来源,供结算跳转分流使用
|
||||||
|
if (battleInfo.way !== undefined) battleWay.value = battleInfo.way;
|
||||||
|
|
||||||
// 优先使用接口返回的队伍数据,如果没有则尝试从缓存读取(应对匹配刚完成接口未就绪的情况)
|
// 优先使用接口返回的队伍数据,如果没有则尝试从缓存读取(应对匹配刚完成接口未就绪的情况)
|
||||||
const t1 = battleInfo.teams?.[1] || {};
|
const t1 = battleInfo.teams?.[1] || {};
|
||||||
@@ -71,6 +93,8 @@ const recoverData = (battleInfo, {force = false, arrowOnly = false} = {}) => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (!arrowOnly) {
|
if (!arrowOnly) {
|
||||||
|
// 在 ToSomeoneShoot 时同步更新当前轮次,使进度条轮次图片及时切换
|
||||||
|
currentRound.value = battleInfo.current.round || 1;
|
||||||
currentShooterId.value = battleInfo.current.playerId;
|
currentShooterId.value = battleInfo.current.playerId;
|
||||||
const redPlayer = battleInfo.teams[2].players.find(
|
const redPlayer = battleInfo.teams[2].players.find(
|
||||||
(item) => item.id === battleInfo.current.playerId
|
(item) => item.id === battleInfo.current.playerId
|
||||||
@@ -83,17 +107,50 @@ const recoverData = (battleInfo, {force = false, arrowOnly = false} = {}) => {
|
|||||||
) {
|
) {
|
||||||
nextTips += "你";
|
nextTips += "你";
|
||||||
}
|
}
|
||||||
|
// 同队连续出手时 tips 值不变,HeaderProgress watch 不触发音频
|
||||||
|
// 需在赋值前比较旧值,手动播放音频确保始终触发 onAudioEnded 启动计时器
|
||||||
|
// 注意:使用 interrupt=false 避免打断上一支箭的环数播报音频
|
||||||
|
if (tips.value === nextTips && !nextTips.includes("重回")) {
|
||||||
|
const audioKey = redPlayer ? "请红方射箭" : "请蓝方射箭";
|
||||||
|
audioManager.play(audioKey, false);
|
||||||
|
}
|
||||||
tips.value = nextTips;
|
tips.value = nextTips;
|
||||||
uni.$emit("update-tips", nextTips);
|
// 同步写入 Pinia store,供 HeaderProgress 通过 immediate watch 在 onMounted 时立即读取
|
||||||
uni.$emit("update-remain", {reset: true, value: 15, team: redTeam?'red':'blue'});
|
// 规避 WeChat 小程序 onShow 在组件 onMounted 之前触发导致 uni.$emit 事件丢失的时序问题
|
||||||
|
store.updateTips(nextTips);
|
||||||
|
// force 模式下改为在 nextTick 内发送 update-tips,规避 WeChat 小程序
|
||||||
|
// onShow 与 onMounted 时序问题导致 HeaderProgress 监听器尚未注册的边界情况
|
||||||
|
if (!force) {
|
||||||
|
uni.$emit("update-tips", nextTips);
|
||||||
|
}
|
||||||
|
// redPlayer 已在上方 find() 确认:不为 null 则当前射手在红队
|
||||||
|
const targetTeam = redPlayer ? 'red' : 'blue';
|
||||||
|
// 从后端消息读取本局射击时间,动态设置进度条满值与倒计时秒数(降级兜底 15s)
|
||||||
|
shootTimeTotal.value = battleInfo.shootTime ?? 15;
|
||||||
if (force) {
|
if (force) {
|
||||||
const remain = (Date.now() - battleInfo.current.startTime) / 1000;
|
// force 模式下 start.value 刚由 null 变 true,Vue 异步调度渲染,
|
||||||
console.log(`当前轮已进行${remain}秒`);
|
// ShootProgress2(v-if="start")尚未挂载,update-remain 事件会被丢弃。
|
||||||
if (remain > 0 && remain < 15) {
|
// 同时 HeaderProgress 对含"重回"的 tips 拦截音频,倒计时无法依赖
|
||||||
updateRemainSecond.value = 15 - remain - 0.2
|
// onAudioEnded 驱动,需在 nextTick 后直接启动。
|
||||||
|
const elapsed = (Date.now() - battleInfo.current.startTime) / 1000;
|
||||||
|
console.log(`当前轮已进行${elapsed}秒`);
|
||||||
|
if (elapsed > 0 && elapsed < shootTimeTotal.value) {
|
||||||
|
updateRemainSecond.value = shootTimeTotal.value - elapsed - 0.2;
|
||||||
}
|
}
|
||||||
|
const actualRemain = updateRemainSecond.value;
|
||||||
|
nextTick(() => {
|
||||||
|
// 在 nextTick 内统一发送,确保 ShootProgress2 和 HeaderProgress 均已挂载
|
||||||
|
uni.$emit("update-tips", nextTips);
|
||||||
|
uni.$emit("update-remain", {reset: true, value: shootTimeTotal.value, team: targetTeam});
|
||||||
|
// 重置动画完成后,直接启动倒计时(无需依赖音频结束回调)
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.$emit("update-remain", {stop: false, value: actualRemain, team: targetTeam});
|
||||||
|
}, 100);
|
||||||
|
});
|
||||||
} else {
|
} else {
|
||||||
updateRemainSecond.value = battleInfo.readyTime
|
// ToSomeoneShoot 到达时:若进度条仍在倒计时则瞬间清零再切换满值,确保视觉连贯
|
||||||
|
uni.$emit("update-remain", {zeroThenReset: true, value: shootTimeTotal.value, team: targetTeam});
|
||||||
|
updateRemainSecond.value = shootTimeTotal.value;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
currentRound.value = battleInfo.current.round || 1;
|
currentRound.value = battleInfo.current.round || 1;
|
||||||
@@ -113,27 +170,44 @@ const recoverData = (battleInfo, {force = false, arrowOnly = false} = {}) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
function onAudioEnded(s) {
|
function onAudioEnded(s) {
|
||||||
if (s.indexOf('请红方射箭') >= 0 || s.indexOf('请蓝方射箭') >= 0) {
|
// "请红方射箭"/"请蓝方射箭":队友或对手轮次;"轮到你了":用户本人轮次(HeaderProgress特殊分支)
|
||||||
let team = s.indexOf('请红方射箭') >= 0 ? 'red' : 'blue';
|
// 三者音频结束后均需启动倒计时进度条
|
||||||
|
if (s.indexOf('请红方射箭') >= 0 || s.indexOf('请蓝方射箭') >= 0 || s.indexOf('轮到你了') >= 0) {
|
||||||
|
let team;
|
||||||
|
if (s.indexOf('请红方射箭') >= 0) team = 'red';
|
||||||
|
else if (s.indexOf('请蓝方射箭') >= 0) team = 'blue';
|
||||||
|
else team = tips.value.includes('红队') ? 'red' : 'blue'; // 轮到你了:从当前tips判断用户所在队伍
|
||||||
uni.$emit("update-remain", {stop: false, value: updateRemainSecond.value, team: team});
|
uni.$emit("update-remain", {stop: false, value: updateRemainSecond.value, team: team});
|
||||||
}
|
}
|
||||||
if (s.indexOf("比赛结束") >= 0) {
|
if (s.indexOf("比赛结束") >= 0) {
|
||||||
|
console.log("比赛结束");
|
||||||
onBattleEnd()
|
onBattleEnd()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function onBattleEnd() {
|
function onBattleEnd() {
|
||||||
if (matchStatus.value === 2) {
|
if (matchStatus.value === 2) {
|
||||||
|
// 全部跳转到新结算页
|
||||||
uni.redirectTo({
|
uni.redirectTo({
|
||||||
url: `/pages/battle-result?battleId=${battleId.value}`,
|
url: `/pages/friend-battle-result?battleId=${battleId.value}`,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function onNewRound(msg) {
|
/**
|
||||||
|
* @param {object} msg - NewRound 消息
|
||||||
|
* @param {number} prevRound - 在 NewRound 消息到达时即时捕获的旧轮次,用于 Tip 展示,避免异步延迟内 currentRound 已被更新
|
||||||
|
*/
|
||||||
|
function onNewRound(msg, prevRound) {
|
||||||
showRoundTip.value = true;
|
showRoundTip.value = true;
|
||||||
isFinalShoot.value = msg.current.goldRound;
|
isFinalShoot.value = msg.current.goldRound;
|
||||||
const latestRound = msg.rounds[currentRound.value - 1];
|
// 决金轮箭数不确定(平局后可能再加一箭),清零 totalShot 隐藏箭数显示
|
||||||
|
if (msg.current.goldRound) {
|
||||||
|
store.updateShotInfo(0, 0);
|
||||||
|
}
|
||||||
|
// 用传入的 prevRound(捕获时刻的旧轮次)展示结算 Tip,与进度条 currentRound 解耦
|
||||||
|
roundTipRound.value = prevRound;
|
||||||
|
const latestRound = msg.rounds[prevRound - 1];
|
||||||
if (latestRound) {
|
if (latestRound) {
|
||||||
if (isFinalShoot.value) {
|
if (isFinalShoot.value) {
|
||||||
currentBluePoint.value = msg.teams[1].score;
|
currentBluePoint.value = msg.teams[1].score;
|
||||||
@@ -150,14 +224,20 @@ async function onReceiveMessage(msg) {
|
|||||||
if (msg.type === MESSAGETYPESV2.BattleStart) {
|
if (msg.type === MESSAGETYPESV2.BattleStart) {
|
||||||
start.value = true;
|
start.value = true;
|
||||||
} else if (msg.type === MESSAGETYPESV2.ToSomeoneShoot) {
|
} else if (msg.type === MESSAGETYPESV2.ToSomeoneShoot) {
|
||||||
|
// 去重防护:如果 playerId + round 与上一次处理完全相同,则忽略重复推送的消息
|
||||||
|
// (防止 onBeforeUnmount 未及时 off 和页面重创建导致同一事件被处理多次)
|
||||||
|
const key = `${msg?.current?.playerId}-${msg?.current?.round}`;
|
||||||
|
if (key === lastToSomeoneShootKey.value) return;
|
||||||
|
lastToSomeoneShootKey.value = key;
|
||||||
recoverData(msg);
|
recoverData(msg);
|
||||||
} else if (msg.type === MESSAGETYPESV2.ShootResult) {
|
} else if (msg.type === MESSAGETYPESV2.ShootResult) {
|
||||||
uni.$emit("update-remain", {stop: true})
|
|
||||||
showRoundTip.value = false;
|
showRoundTip.value = false;
|
||||||
recoverData(msg, {arrowOnly: true});
|
recoverData(msg, {arrowOnly: true});
|
||||||
} else if (msg.type === MESSAGETYPESV2.NewRound) {
|
} else if (msg.type === MESSAGETYPESV2.NewRound) {
|
||||||
|
// 在进入延迟前先捕获当前轮次,供 onNewRound 使用,防止 800ms 内 ToSomeoneShoot 提前更新 currentRound 造成 Tip 展示错轮
|
||||||
|
const prevRound = currentRound.value;
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
onNewRound(msg)
|
onNewRound(msg, prevRound)
|
||||||
}, 800)
|
}, 800)
|
||||||
} else if (msg.type === MESSAGETYPESV2.BattleEnd) {
|
} else if (msg.type === MESSAGETYPESV2.BattleEnd) {
|
||||||
matchStatus.value = msg.status;
|
matchStatus.value = msg.status;
|
||||||
@@ -174,6 +254,9 @@ async function onReceiveMessage(msg) {
|
|||||||
|
|
||||||
onLoad(async (options) => {
|
onLoad(async (options) => {
|
||||||
if (options.battleId) battleId.value = options.battleId;
|
if (options.battleId) battleId.value = options.battleId;
|
||||||
|
// 重置箭数和提示文案,防止因 Pinia 保留上一场比赛的旧值而错误展示
|
||||||
|
store.updateShotInfo(0, 0);
|
||||||
|
store.updateTips("");
|
||||||
// uni.enableAlertBeforeUnload({
|
// uni.enableAlertBeforeUnload({
|
||||||
// message: "离开比赛可能导致比赛失败,是否继续?",
|
// message: "离开比赛可能导致比赛失败,是否继续?",
|
||||||
// success: (res) => {
|
// success: (res) => {
|
||||||
@@ -193,6 +276,8 @@ onBeforeUnmount(() => {
|
|||||||
uni.setKeepScreenOn({
|
uni.setKeepScreenOn({
|
||||||
keepScreenOn: false,
|
keepScreenOn: false,
|
||||||
});
|
});
|
||||||
|
// 注销所有第三方事件盓听,防止页面重创建时监听叠加导致消息重复处理
|
||||||
|
uni.$off("socket-inbox", onReceiveMessage);
|
||||||
uni.$off("audioEnded", onAudioEnded);
|
uni.$off("audioEnded", onAudioEnded);
|
||||||
audioManager.stopAll();
|
audioManager.stopAll();
|
||||||
});
|
});
|
||||||
@@ -202,14 +287,24 @@ onShow(async () => {
|
|||||||
const result = await getBattleAPI(battleId.value);
|
const result = await getBattleAPI(battleId.value);
|
||||||
if (!result) return;
|
if (!result) return;
|
||||||
if (result.status === 2) {
|
if (result.status === 2) {
|
||||||
uni.showToast({
|
// 比赛已结束(如切后台再回来):跳新结算页
|
||||||
title: "比赛已结束",
|
uni.redirectTo({
|
||||||
icon: "none",
|
url: `/pages/friend-battle-result?battleId=${result.matchId}`,
|
||||||
});
|
|
||||||
uni.navigateBack({
|
|
||||||
delta: 2,
|
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
|
if (result.status !== 0) {
|
||||||
|
// 比赛进行中,从后端恢复箭数(测距阶段不展示)
|
||||||
|
// 决金轮不展示箭数;其余轮次从 indexMap 按用户 id 取已射箭数
|
||||||
|
if (result.shootNumber && !result.current?.goldRound) {
|
||||||
|
store.updateShotInfo(result.current?.indexMap?.[user.value.id] ?? 0, result.shootNumber);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 测距阶段重置箭数和提示文案,防止 ImmediateWatcher 读取 Pinia 保留的旧值
|
||||||
|
store.updateShotInfo(0, 0);
|
||||||
|
// 同步清空 Pinia tips 与本地 tips,避免重新开赛时 HeaderProgress 展示上一场旧文案
|
||||||
|
store.updateTips("");
|
||||||
|
tips.value = "";
|
||||||
|
}
|
||||||
recoverData(result, {force: true});
|
recoverData(result, {force: true});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -219,10 +314,12 @@ onShow(async () => {
|
|||||||
<template>
|
<template>
|
||||||
<Container :bgType="start ? 3 : 1">
|
<Container :bgType="start ? 3 : 1">
|
||||||
<view class="container">
|
<view class="container">
|
||||||
|
<!-- winner=0 表示对局尚未开始,不显示胜者徽章 -->
|
||||||
<BattleHeader
|
<BattleHeader
|
||||||
v-if="start === false"
|
v-if="start === false"
|
||||||
:redTeam="redTeam"
|
:redTeam="redTeam"
|
||||||
:blueTeam="blueTeam"
|
:blueTeam="blueTeam"
|
||||||
|
:winner="0"
|
||||||
/>
|
/>
|
||||||
<TestDistance v-if="start === false" :guide="false" :isBattle="true"/>
|
<TestDistance v-if="start === false" :guide="false" :isBattle="true"/>
|
||||||
<view v-if="start" class="players-row">
|
<view v-if="start" class="players-row">
|
||||||
@@ -233,6 +330,7 @@ onShow(async () => {
|
|||||||
/>
|
/>
|
||||||
<ShootProgress2
|
<ShootProgress2
|
||||||
:tips="tips"
|
:tips="tips"
|
||||||
|
:total="shootTimeTotal"
|
||||||
:currentRound="
|
:currentRound="
|
||||||
goldenRound > 0 ? 'gold' + goldenRound : 'round' + currentRound
|
goldenRound > 0 ? 'gold' + goldenRound : 'round' + currentRound
|
||||||
"
|
"
|
||||||
@@ -254,21 +352,33 @@ onShow(async () => {
|
|||||||
/>
|
/>
|
||||||
<ScreenHint
|
<ScreenHint
|
||||||
:show="showRoundTip"
|
:show="showRoundTip"
|
||||||
:onClose="() => (showRoundTip = false)"
|
|
||||||
:mode="isFinalShoot ? 'tall' : 'normal'"
|
:mode="isFinalShoot ? 'tall' : 'normal'"
|
||||||
>
|
>
|
||||||
<RoundEndTip
|
<RoundEndTip
|
||||||
v-if="showRoundTip"
|
v-if="showRoundTip"
|
||||||
:isFinal="isFinalShoot"
|
:isFinal="isFinalShoot"
|
||||||
:round="currentRound"
|
:round="roundTipRound"
|
||||||
:bluePoint="currentBluePoint"
|
:bluePoint="currentBluePoint"
|
||||||
:redPoint="currentRedPoint"
|
:redPoint="currentRedPoint"
|
||||||
:roundData="
|
:roundData="
|
||||||
roundResults[currentRound - 1] ? roundResults[currentRound - 1] : []
|
roundResults[roundTipRound - 1] ? roundResults[roundTipRound - 1] : []
|
||||||
"
|
"
|
||||||
:onAutoClose="()=>{ showRoundTip = false}"
|
:onAutoClose="()=>{ showRoundTip = false}"
|
||||||
/>
|
/>
|
||||||
</ScreenHint>
|
</ScreenHint>
|
||||||
|
<!-- 设备离线提示弹窗 -->
|
||||||
|
<SModal
|
||||||
|
:show="showOfflineModal"
|
||||||
|
:noBg="true"
|
||||||
|
height="360rpx"
|
||||||
|
:onClose="() => (showOfflineModal = false)"
|
||||||
|
>
|
||||||
|
<view class="offline-modal">
|
||||||
|
<text class="offline-title">设备已离线</text>
|
||||||
|
<text class="offline-desc">检测到设备已断开连接,请检查设备后继续比赛</text>
|
||||||
|
<SButton @click="showOfflineModal = false">我知道了</SButton>
|
||||||
|
</view>
|
||||||
|
</SModal>
|
||||||
</view>
|
</view>
|
||||||
</Container>
|
</Container>
|
||||||
</template>
|
</template>
|
||||||
@@ -286,4 +396,25 @@ onShow(async () => {
|
|||||||
margin-top: -2%;
|
margin-top: -2%;
|
||||||
margin-bottom: 6%;
|
margin-bottom: 6%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.offline-modal {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 60rpx 40rpx 40rpx;
|
||||||
|
gap: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.offline-title {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #FED847;
|
||||||
|
}
|
||||||
|
|
||||||
|
.offline-desc {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #CCCCCC;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -69,6 +69,10 @@ onMounted(() => {
|
|||||||
const envVersion = accountInfo.miniProgram.envVersion;
|
const envVersion = accountInfo.miniProgram.envVersion;
|
||||||
if (envVersion !== "release") showLogout.value = true;
|
if (envVersion !== "release") showLogout.value = true;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/* global __BUILD_TIME__ */
|
||||||
|
/** 构建时刻,由 vite.config.js define 在打包时自动注入;仅开发/体验版展示 */
|
||||||
|
const buildVersion = typeof __BUILD_TIME__ !== 'undefined' ? __BUILD_TIME__ : '';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -140,6 +144,10 @@ onMounted(() => {
|
|||||||
:onClick="toAudioTestPage"
|
:onClick="toAudioTestPage"
|
||||||
v-if="showLogout"
|
v-if="showLogout"
|
||||||
/>
|
/>
|
||||||
|
<UserItem
|
||||||
|
title="版本信息(仅用于测试)"
|
||||||
|
v-if="showLogout"
|
||||||
|
>{{ buildVersion }}</UserItem>
|
||||||
<UserItem
|
<UserItem
|
||||||
title="退出登录(仅用于测试)"
|
title="退出登录(仅用于测试)"
|
||||||
:onClick="logout"
|
:onClick="logout"
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 69 KiB |
|
Before Width: | Height: | Size: 81 KiB |
|
Before Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 176 KiB |
|
Before Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 7.8 KiB |
|
Before Width: | Height: | Size: 6.1 KiB |
|
Before Width: | Height: | Size: 5.6 KiB |
|
Before Width: | Height: | Size: 4.1 KiB |
|
Before Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 6.3 KiB |
11
src/static/friend-battle-result/rank-one.svg
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
<svg width="156" height="58" viewBox="0 0 156 58" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g id="编组 5">
|
||||||
|
<rect id="矩形备份" width="156" height="58" fill="url(#paint0_linear_1394_738459)"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="paint0_linear_1394_738459" x1="0" y1="87" x2="156" y2="87" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#7E3627"/>
|
||||||
|
<stop offset="1" stop-color="#292826" stop-opacity="0.01"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 540 B |
11
src/static/friend-battle-result/rank-three.svg
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
<svg width="156" height="58" viewBox="0 0 156 58" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g id="编组 12">
|
||||||
|
<rect id="矩形备份" width="156" height="58" fill="url(#paint0_linear_1394_738487)"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="paint0_linear_1394_738487" x1="0" y1="87" x2="156" y2="87" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#573E25"/>
|
||||||
|
<stop offset="1" stop-color="#292826" stop-opacity="0.01"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 541 B |
11
src/static/friend-battle-result/rank-two.svg
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
<svg width="156" height="58" viewBox="0 0 156 58" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g id="编组 9">
|
||||||
|
<rect id="矩形备份" width="156" height="58" fill="url(#paint0_linear_1394_738473)"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="paint0_linear_1394_738473" x1="0.251953" y1="86.9532" x2="156" y2="86.9532" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#25476F"/>
|
||||||
|
<stop offset="1" stop-color="#292826" stop-opacity="0.01"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 557 B |
|
Before Width: | Height: | Size: 6.2 KiB |
BIN
src/static/mvp-blue.png
Normal file
|
After Width: | Height: | Size: 13 KiB |
BIN
src/static/mvp-red.png
Normal file
|
After Width: | Height: | Size: 11 KiB |
BIN
src/static/mvp-tip.png
Normal file
|
After Width: | Height: | Size: 11 KiB |
BIN
src/static/rank/battle-choose.png
Normal file
|
After Width: | Height: | Size: 8.8 KiB |
38
src/static/rank/battle10.svg
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="110px" height="54px" viewBox="0 0 110 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<title>编组 5</title>
|
||||||
|
<defs>
|
||||||
|
<linearGradient x1="50%" y1="1.43983214%" x2="50%" y2="100%" id="linearGradient-1">
|
||||||
|
<stop stop-color="#FF7EAF" offset="0%"></stop>
|
||||||
|
<stop stop-color="#C36AFF" offset="100%"></stop>
|
||||||
|
</linearGradient>
|
||||||
|
<rect id="path-2" x="0" y="0" width="110" height="54" rx="8"></rect>
|
||||||
|
<radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="50%" id="radialGradient-4">
|
||||||
|
<stop stop-color="#FFFFFF" offset="0%"></stop>
|
||||||
|
<stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
|
||||||
|
</radialGradient>
|
||||||
|
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-5">
|
||||||
|
<stop stop-color="#FFFFFF" offset="0%"></stop>
|
||||||
|
<stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<g id="训练功能改版" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="排位赛" transform="translate(-251.000000, -155.000000)">
|
||||||
|
<g id="编组-9" transform="translate(3.000000, 93.000000)">
|
||||||
|
<g id="编组-5" transform="translate(248.000000, 62.000000)">
|
||||||
|
<g id="编组-4">
|
||||||
|
<mask id="mask-3" fill="white">
|
||||||
|
<use xlink:href="#path-2"></use>
|
||||||
|
</mask>
|
||||||
|
<use id="矩形" fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
|
||||||
|
<circle id="椭圆形" fill="url(#radialGradient-4)" mask="url(#mask-3)" cx="52" cy="64.5" r="64"></circle>
|
||||||
|
<rect id="矩形" fill="url(#linearGradient-5)" opacity="0.100000001" mask="url(#mask-3)" transform="translate(85.406727, 10.201587) rotate(51.000000) translate(-85.406727, -10.201587) " x="78.4067275" y="-14.2984126" width="14" height="49" rx="7"></rect>
|
||||||
|
</g>
|
||||||
|
<text id="10人大乱斗" font-family="DOUYINSANSBOLD-GB, Douyin Sans" font-size="16" font-weight="bold" fill="#FFFFFF">
|
||||||
|
<tspan x="15" y="32">10人大乱斗</tspan>
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.3 KiB |
40
src/static/rank/battle1v1.svg
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="111px" height="54px" viewBox="0 0 111 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<title>编组 5@2x</title>
|
||||||
|
<defs>
|
||||||
|
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
|
||||||
|
<stop stop-color="#896CFF" offset="0%"></stop>
|
||||||
|
<stop stop-color="#9754FF" offset="100%"></stop>
|
||||||
|
</linearGradient>
|
||||||
|
<rect id="path-2" x="0" y="0" width="110" height="54" rx="8"></rect>
|
||||||
|
<radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="50%" id="radialGradient-4">
|
||||||
|
<stop stop-color="#FFFFFF" offset="0%"></stop>
|
||||||
|
<stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
|
||||||
|
</radialGradient>
|
||||||
|
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-5">
|
||||||
|
<stop stop-color="#FFFFFF" offset="0%"></stop>
|
||||||
|
<stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<g id="训练功能改版" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="排位赛" transform="translate(-132.000000, -93.000000)">
|
||||||
|
<g id="编组-9" transform="translate(3.000000, 93.000000)">
|
||||||
|
<g id="编组-5" transform="translate(129.500000, 0.000000)">
|
||||||
|
<g id="编组-4">
|
||||||
|
<mask id="mask-3" fill="white">
|
||||||
|
<use xlink:href="#path-2"></use>
|
||||||
|
</mask>
|
||||||
|
<use id="矩形" fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
|
||||||
|
<circle id="椭圆形" fill="url(#radialGradient-4)" mask="url(#mask-3)" cx="55" cy="64.5" r="64"></circle>
|
||||||
|
<rect id="矩形" fill="url(#linearGradient-5)" opacity="0.100000001" mask="url(#mask-3)" transform="translate(89.406727, 10.201587) rotate(51.000000) translate(-89.406727, -10.201587) " x="82.4067275" y="-14.2984126" width="14" height="49" rx="7"></rect>
|
||||||
|
</g>
|
||||||
|
<g id="1v1备份" transform="translate(43.000000, 21.000000)" fill="#FFFFFF" fill-rule="nonzero">
|
||||||
|
<polygon id="路径" points="0 1.625 0 3.64722222 2.69090909 2.22083333 2.69090909 13 5 13 5 0 3.07272727 0"></polygon>
|
||||||
|
<polygon id="路径" points="17 3 14.4705882 3 12.0196078 10.5384615 9.60784314 3 7 3 10.5490196 13 13.2941176 13"></polygon>
|
||||||
|
<polygon id="路径" points="19 1.625 19 3.64722222 21.6909091 2.22083333 21.6909091 13 24 13 24 0 22.0727273 0"></polygon>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.7 KiB |
38
src/static/rank/battle2v2.svg
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="110px" height="54px" viewBox="0 0 110 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<title>编组 5@2x</title>
|
||||||
|
<defs>
|
||||||
|
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
|
||||||
|
<stop stop-color="#4A8CFF" offset="0%"></stop>
|
||||||
|
<stop stop-color="#669DFF" offset="100%"></stop>
|
||||||
|
</linearGradient>
|
||||||
|
<rect id="path-2" x="0" y="0" width="110" height="54" rx="8"></rect>
|
||||||
|
<radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="50%" id="radialGradient-4">
|
||||||
|
<stop stop-color="#FFFFFF" offset="0%"></stop>
|
||||||
|
<stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
|
||||||
|
</radialGradient>
|
||||||
|
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-5">
|
||||||
|
<stop stop-color="#FFFFFF" offset="0%"></stop>
|
||||||
|
<stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<g id="训练功能改版" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="排位赛" transform="translate(-251.000000, -93.000000)">
|
||||||
|
<g id="编组-9" transform="translate(3.000000, 93.000000)">
|
||||||
|
<g id="编组-5" transform="translate(248.000000, 0.000000)">
|
||||||
|
<g id="编组-4">
|
||||||
|
<mask id="mask-3" fill="white">
|
||||||
|
<use xlink:href="#path-2"></use>
|
||||||
|
</mask>
|
||||||
|
<use id="矩形" fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
|
||||||
|
<circle id="椭圆形" fill="url(#radialGradient-4)" mask="url(#mask-3)" cx="56" cy="64.5" r="64"></circle>
|
||||||
|
<rect id="矩形" fill="url(#linearGradient-5)" opacity="0.100000001" mask="url(#mask-3)" transform="translate(85.406727, 10.201587) rotate(51.000000) translate(-85.406727, -10.201587) " x="78.4067275" y="-14.2984126" width="14" height="49" rx="7"></rect>
|
||||||
|
</g>
|
||||||
|
<text id="2v2" font-family="DOUYINSANSBOLD-GB, Douyin Sans" font-size="18" font-weight="bold" fill="#FFFFFF">
|
||||||
|
<tspan x="40.408" y="33">2v2</tspan>
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.3 KiB |
38
src/static/rank/battle3v3.svg
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="110px" height="54px" viewBox="0 0 110 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<title>编组 5@2x</title>
|
||||||
|
<defs>
|
||||||
|
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
|
||||||
|
<stop stop-color="#FF8787" offset="0%"></stop>
|
||||||
|
<stop stop-color="#FF9696" offset="100%"></stop>
|
||||||
|
</linearGradient>
|
||||||
|
<rect id="path-2" x="0" y="0" width="110" height="54" rx="8"></rect>
|
||||||
|
<radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="50%" id="radialGradient-4">
|
||||||
|
<stop stop-color="#FFFFFF" offset="0%"></stop>
|
||||||
|
<stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
|
||||||
|
</radialGradient>
|
||||||
|
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-5">
|
||||||
|
<stop stop-color="#FFFFFF" offset="0%"></stop>
|
||||||
|
<stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<g id="训练功能改版" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="排位赛" transform="translate(-14.000000, -155.000000)">
|
||||||
|
<g id="编组-9" transform="translate(3.000000, 93.000000)">
|
||||||
|
<g id="编组-5" transform="translate(11.000000, 62.000000)">
|
||||||
|
<g id="编组-4">
|
||||||
|
<mask id="mask-3" fill="white">
|
||||||
|
<use xlink:href="#path-2"></use>
|
||||||
|
</mask>
|
||||||
|
<use id="矩形" fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
|
||||||
|
<circle id="椭圆形" fill="url(#radialGradient-4)" mask="url(#mask-3)" cx="56" cy="64.5" r="64"></circle>
|
||||||
|
<rect id="矩形" fill="url(#linearGradient-5)" opacity="0.100000001" mask="url(#mask-3)" transform="translate(85.406727, 10.201587) rotate(51.000000) translate(-85.406727, -10.201587) " x="78.4067275" y="-14.2984126" width="14" height="49" rx="7"></rect>
|
||||||
|
</g>
|
||||||
|
<text id="3v3" font-family="DOUYINSANSBOLD-GB, Douyin Sans" font-size="18" font-weight="bold" fill="#FFFFFF">
|
||||||
|
<tspan x="40.408" y="33">3v3</tspan>
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.3 KiB |
38
src/static/rank/battle5.svg
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="111px" height="54px" viewBox="0 0 111 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<title>编组 5</title>
|
||||||
|
<defs>
|
||||||
|
<linearGradient x1="50%" y1="3.4527039%" x2="50%" y2="99.6818489%" id="linearGradient-1">
|
||||||
|
<stop stop-color="#FFA052" offset="0%"></stop>
|
||||||
|
<stop stop-color="#FFBC4E" offset="100%"></stop>
|
||||||
|
</linearGradient>
|
||||||
|
<rect id="path-2" x="0" y="0" width="110" height="54" rx="8"></rect>
|
||||||
|
<radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="50%" id="radialGradient-4">
|
||||||
|
<stop stop-color="#FFFFFF" offset="0%"></stop>
|
||||||
|
<stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
|
||||||
|
</radialGradient>
|
||||||
|
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-5">
|
||||||
|
<stop stop-color="#FFFFFF" offset="0%"></stop>
|
||||||
|
<stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<g id="训练功能改版" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="排位赛" transform="translate(-132.000000, -155.000000)">
|
||||||
|
<g id="编组-9" transform="translate(3.000000, 93.000000)">
|
||||||
|
<g id="编组-5" transform="translate(129.500000, 62.000000)">
|
||||||
|
<g id="编组-4">
|
||||||
|
<mask id="mask-3" fill="white">
|
||||||
|
<use xlink:href="#path-2"></use>
|
||||||
|
</mask>
|
||||||
|
<use id="矩形" fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
|
||||||
|
<circle id="椭圆形" fill="url(#radialGradient-4)" mask="url(#mask-3)" cx="56" cy="64.5" r="64"></circle>
|
||||||
|
<rect id="矩形" fill="url(#linearGradient-5)" opacity="0.100000001" mask="url(#mask-3)" transform="translate(85.406727, 10.201587) rotate(51.000000) translate(-85.406727, -10.201587) " x="78.4067275" y="-14.2984126" width="14" height="49" rx="7"></rect>
|
||||||
|
</g>
|
||||||
|
<text id="5人大乱斗" font-family="DOUYINSANSBOLD-GB, Douyin Sans" font-size="16" font-weight="bold" fill="#FFFFFF">
|
||||||
|
<tspan x="18.976" y="32">5人大乱斗</tspan>
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.4 KiB |
BIN
src/static/rank/bubble-tip.png
Normal file
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/static/rank/star.png
Normal file
|
After Width: | Height: | Size: 4.8 KiB |
BIN
src/static/rank/triangle.png
Normal file
|
After Width: | Height: | Size: 208 B |
|
Before Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 37 KiB |
|
Before Width: | Height: | Size: 52 KiB |
33
src/store.js
@@ -79,6 +79,10 @@ export default defineStore("store", {
|
|||||||
game: {
|
game: {
|
||||||
roomID: "",
|
roomID: "",
|
||||||
inBattle: false,
|
inBattle: false,
|
||||||
|
roomNumber: "", // 当前房间号,供 Header 展示房号胶囊
|
||||||
|
currentShot: 0, // 当前已射箭数(用于 HeaderProgress 恢复状态)
|
||||||
|
totalShot: 0, // 轮次总箭数(用于 HeaderProgress 恢复状态)
|
||||||
|
tips: "", // 当前提示文案(用于 HeaderProgress 恢复状态,替代 uni.$emit 避免时序问题)
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
|
|
||||||
@@ -135,16 +139,29 @@ export default defineStore("store", {
|
|||||||
this.game.roomID = roomID;
|
this.game.roomID = roomID;
|
||||||
this.game.inBattle = inBattle;
|
this.game.inBattle = inBattle;
|
||||||
},
|
},
|
||||||
|
/** 更新当前射箭进度(用于 HeaderProgress 恢复状态,替代 uni.$emit 避免时序问题) */
|
||||||
|
updateShotInfo(currentShot = 0, totalShot = 0) {
|
||||||
|
this.game.currentShot = currentShot;
|
||||||
|
this.game.totalShot = totalShot;
|
||||||
|
},
|
||||||
|
/** 更新当前提示文案(用于 HeaderProgress 恢复状态,替代 uni.$emit 避免时序问题) */
|
||||||
|
updateTips(tips = "") {
|
||||||
|
this.game.tips = tips;
|
||||||
|
},
|
||||||
|
/** 更新当前房间号,供 Header 组件展示房号胶囊 */
|
||||||
|
updateRoomNumber(number) {
|
||||||
|
this.game.roomNumber = number;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
// 开启数据持久化
|
// 数据持久化(via pinia-plugin-persistedstate)
|
||||||
|
// 仅持久化 user 和 device:身份凭证需在冷启动时恢复(如从分享链接进入)
|
||||||
|
// config、game 等运行时状态不持久化,每次联网后重新拉取
|
||||||
persist: {
|
persist: {
|
||||||
enabled: true,
|
storage: {
|
||||||
strategies: [
|
getItem: (key) => uni.getStorageSync(key),
|
||||||
{
|
setItem: (key, value) => uni.setStorageSync(key, value),
|
||||||
storage: uni.getStorageSync,
|
},
|
||||||
paths: ["user", "device", "config"], // 只持久化用户信息
|
paths: ['user', 'device'],
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
162
src/websocket.js
@@ -1,12 +1,22 @@
|
|||||||
import { MESSAGETYPES, getMessageTypeName } from "@/constants";
|
import { MESSAGETYPES, getMessageTypeName } from "@/constants";
|
||||||
|
import { getUserGameState } from "@/apis";
|
||||||
|
|
||||||
let socket = null;
|
let socket = null;
|
||||||
let heartbeatInterval = null;
|
let heartbeatInterval = null;
|
||||||
let reconnectTimer = null;
|
let reconnectTimer = null;
|
||||||
|
let manualClose = false;
|
||||||
|
let checkingSession = false;
|
||||||
|
let kickedOut = false;
|
||||||
|
let isConnecting = false;
|
||||||
|
|
||||||
/**
|
|
||||||
* 建立 WebSocket 连接
|
|
||||||
*/
|
|
||||||
function createWebSocket(token, onMessage) {
|
function createWebSocket(token, onMessage) {
|
||||||
|
if (!token) return;
|
||||||
|
if (kickedOut) kickedOut = false;
|
||||||
|
if (socket || isConnecting) return;
|
||||||
|
|
||||||
|
manualClose = false;
|
||||||
|
isConnecting = true;
|
||||||
|
|
||||||
let url = "wss://api.shelingxingqiu.com/socket";
|
let url = "wss://api.shelingxingqiu.com/socket";
|
||||||
try {
|
try {
|
||||||
const accountInfo = uni.getAccountInfoSync();
|
const accountInfo = uni.getAccountInfoSync();
|
||||||
@@ -14,48 +24,71 @@ function createWebSocket(token, onMessage) {
|
|||||||
|
|
||||||
switch (envVersion) {
|
switch (envVersion) {
|
||||||
case "develop": // 开发版
|
case "develop": // 开发版
|
||||||
url = "ws://localhost:8000/socket";
|
// url = "ws://192.168.1.30:8000/socket";
|
||||||
// url = "wss://apitest.shelingxingqiu.com/socket";
|
url = "wss://apitest.shelingxingqiu.com/socket";
|
||||||
break;
|
break;
|
||||||
case "trial": // 体验版
|
case "trial": // 体验版
|
||||||
url = "wss://apitest.shelingxingqiu.com/socket";
|
url = "wss://apitest.shelingxingqiu.com/socket";
|
||||||
break;
|
break;
|
||||||
case "release": // 正式版
|
case "trial":
|
||||||
|
url = "wss://apitest.shelingxingqiu.com/socket";
|
||||||
|
break;
|
||||||
|
case "release":
|
||||||
url = "wss://api.shelingxingqiu.com/socket";
|
url = "wss://api.shelingxingqiu.com/socket";
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
// 保持默认值
|
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error("获取环境信息失败,使用默认正式环境", e);
|
console.error("获取 WebSocket 环境信息失败,使用默认正式环境", e);
|
||||||
}
|
}
|
||||||
|
|
||||||
url += `?authorization=${token}`;
|
url += `?authorization=${token}`;
|
||||||
socket = uni.connectSocket({
|
const socketTask = uni.connectSocket({
|
||||||
url,
|
url,
|
||||||
success: () => {
|
success: () => {
|
||||||
console.log("websocket 连接成功");
|
console.log("WebSocket 已发起连接");
|
||||||
// 启动心跳
|
|
||||||
startHeartbeat(onMessage);
|
|
||||||
},
|
},
|
||||||
fail: () => {
|
fail: (err) => {
|
||||||
|
if (socket !== socketTask) return;
|
||||||
|
console.error("WebSocket 连接失败", err);
|
||||||
|
socket = null;
|
||||||
|
isConnecting = false;
|
||||||
reconnect(onMessage);
|
reconnect(onMessage);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// 接收消息
|
socket = socketTask;
|
||||||
uni.onSocketMessage((res) => {
|
|
||||||
|
socketTask.onOpen(() => {
|
||||||
|
if (socket !== socketTask) return;
|
||||||
|
console.log("WebSocket 连接成功");
|
||||||
|
isConnecting = false;
|
||||||
|
startHeartbeat(onMessage);
|
||||||
|
});
|
||||||
|
|
||||||
|
socketTask.onMessage((res) => {
|
||||||
|
if (socket !== socketTask) return;
|
||||||
|
|
||||||
const { data, event } = JSON.parse(res.data);
|
const { data, event } = JSON.parse(res.data);
|
||||||
if (event === "pong") return;
|
if (event === "pong") return;
|
||||||
if (data.type) {
|
if (data.type) {
|
||||||
console.log("收到消息:", getMessageTypeName(data.type), data.data);
|
console.log(
|
||||||
|
"收到 WebSocket 消息",
|
||||||
|
getMessageTypeName(data.type),
|
||||||
|
data.data
|
||||||
|
);
|
||||||
if (onMessage) onMessage({ ...(data.data || {}), type: data.type });
|
if (onMessage) onMessage({ ...(data.data || {}), type: data.type });
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (onMessage && data.updates) onMessage(data.updates);
|
if (onMessage && data.updates) onMessage(data.updates);
|
||||||
const msg = data.updates[0];
|
const msg = data.updates[0];
|
||||||
if (msg) {
|
if (msg) {
|
||||||
console.log("收到消息:", getMessageTypeName(msg.constructor), msg);
|
console.log(
|
||||||
|
"收到 WebSocket 更新",
|
||||||
|
getMessageTypeName(msg.constructor),
|
||||||
|
msg
|
||||||
|
);
|
||||||
if (msg.constructor === MESSAGETYPES.RankUpdate) {
|
if (msg.constructor === MESSAGETYPES.RankUpdate) {
|
||||||
uni.setStorageSync("latestRank", msg.lvl);
|
uni.setStorageSync("latestRank", msg.lvl);
|
||||||
} else if (msg.constructor === MESSAGETYPES.LvlUpdate) {
|
} else if (msg.constructor === MESSAGETYPES.LvlUpdate) {
|
||||||
@@ -68,84 +101,109 @@ function createWebSocket(token, onMessage) {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// 错误处理
|
socketTask.onError((err) => {
|
||||||
uni.onSocketError((err) => {
|
if (socket !== socketTask) return;
|
||||||
console.error("WebSocket 错误", err);
|
console.error("WebSocket 错误", err);
|
||||||
reconnect(onMessage);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
uni.onSocketClose((result) => {
|
socketTask.onClose(async (result) => {
|
||||||
|
if (socket !== socketTask) return;
|
||||||
console.log("WebSocket 已关闭", result);
|
console.log("WebSocket 已关闭", result);
|
||||||
stopHeartbeat();
|
stopHeartbeat();
|
||||||
reconnect(onMessage);
|
socket = null;
|
||||||
|
isConnecting = false;
|
||||||
|
|
||||||
|
if (manualClose || kickedOut) return;
|
||||||
|
await handleUnexpectedClose(onMessage);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
async function handleUnexpectedClose(onMessage) {
|
||||||
* 重连机制
|
if (checkingSession || manualClose || kickedOut) return;
|
||||||
*/
|
|
||||||
function reconnect(onMessage) {
|
|
||||||
reconnectTimer && clearTimeout(reconnectTimer);
|
|
||||||
closeWebSocket(); // 确保关闭旧连接
|
|
||||||
|
|
||||||
const token = uni.getStorageSync(
|
const token = uni.getStorageSync(
|
||||||
`${uni.getAccountInfoSync().miniProgram.envVersion}_token`
|
`${uni.getAccountInfoSync().miniProgram.envVersion}_token`
|
||||||
);
|
);
|
||||||
if (!token) return;
|
if (!token) return;
|
||||||
|
|
||||||
|
checkingSession = true;
|
||||||
|
try {
|
||||||
|
await getUserGameState();
|
||||||
|
if (!manualClose && !kickedOut) reconnect(onMessage);
|
||||||
|
} catch (err) {
|
||||||
|
if (err?.type === "AUTH_INVALID") {
|
||||||
|
kickedOut = true;
|
||||||
|
manualClose = true;
|
||||||
|
reconnectTimer && clearTimeout(reconnectTimer);
|
||||||
|
uni.$emit("session-kicked-out");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!manualClose && !kickedOut) reconnect(onMessage);
|
||||||
|
} finally {
|
||||||
|
checkingSession = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function reconnect(onMessage) {
|
||||||
|
reconnectTimer && clearTimeout(reconnectTimer);
|
||||||
|
|
||||||
|
const token = uni.getStorageSync(
|
||||||
|
`${uni.getAccountInfoSync().miniProgram.envVersion}_token`
|
||||||
|
);
|
||||||
|
if (!token || manualClose || kickedOut || socket || isConnecting) return;
|
||||||
|
|
||||||
reconnectTimer = setTimeout(() => {
|
reconnectTimer = setTimeout(() => {
|
||||||
console.log("reconnecting...");
|
if (manualClose || kickedOut || socket || isConnecting) return;
|
||||||
|
console.log("WebSocket 正在重连...");
|
||||||
createWebSocket(token, onMessage);
|
createWebSocket(token, onMessage);
|
||||||
}, 1000);
|
}, 1000);
|
||||||
}
|
}
|
||||||
|
|
||||||
function closeWebSocket() {
|
function closeWebSocket(isManual = true) {
|
||||||
|
manualClose = isManual;
|
||||||
|
reconnectTimer && clearTimeout(reconnectTimer);
|
||||||
|
stopHeartbeat();
|
||||||
|
isConnecting = false;
|
||||||
|
|
||||||
if (socket) {
|
if (socket) {
|
||||||
reconnectTimer && clearTimeout(reconnectTimer);
|
const currentSocket = socket;
|
||||||
stopHeartbeat();
|
socket = null;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
socket.close();
|
currentSocket.close();
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error("关闭WebSocket连接失败", err);
|
console.error("关闭 WebSocket 失败", err);
|
||||||
}
|
}
|
||||||
|
|
||||||
socket = null; // 清除socket引用
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function sendHeartbeat(onMessage) {
|
function sendHeartbeat(onMessage) {
|
||||||
uni.sendSocketMessage({
|
if (!socket) return;
|
||||||
|
|
||||||
|
const currentSocket = socket;
|
||||||
|
currentSocket.send({
|
||||||
data: JSON.stringify({ event: "ping", data: {} }),
|
data: JSON.stringify({ event: "ping", data: {} }),
|
||||||
success: () => {
|
success: () => {},
|
||||||
// console.log("发送心跳成功");
|
|
||||||
},
|
|
||||||
fail: (err) => {
|
fail: (err) => {
|
||||||
console.error("发送心跳失败", err);
|
if (socket !== currentSocket) return;
|
||||||
|
console.error("心跳发送失败", err);
|
||||||
stopHeartbeat();
|
stopHeartbeat();
|
||||||
closeWebSocket(); // 关闭失效的连接
|
closeWebSocket(false);
|
||||||
reconnect(onMessage); // 触发重连
|
reconnect(onMessage);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* 启动心跳
|
|
||||||
*/
|
|
||||||
function startHeartbeat(onMessage) {
|
function startHeartbeat(onMessage) {
|
||||||
stopHeartbeat(); // 防止重复启动
|
stopHeartbeat();
|
||||||
|
|
||||||
heartbeatInterval = setInterval(() => {
|
heartbeatInterval = setInterval(() => {
|
||||||
if (socket && socket.readyState === 1) {
|
if (socket) {
|
||||||
// 检查连接状态
|
|
||||||
sendHeartbeat(onMessage);
|
sendHeartbeat(onMessage);
|
||||||
}
|
}
|
||||||
}, 10000);
|
}, 10000);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* 停止心跳
|
|
||||||
*/
|
|
||||||
function stopHeartbeat() {
|
function stopHeartbeat() {
|
||||||
if (heartbeatInterval) {
|
if (heartbeatInterval) {
|
||||||
clearInterval(heartbeatInterval);
|
clearInterval(heartbeatInterval);
|
||||||
|
|||||||
@@ -12,6 +12,14 @@ export default defineConfig({
|
|||||||
plugins: [
|
plugins: [
|
||||||
uni(),
|
uni(),
|
||||||
],
|
],
|
||||||
|
/** 构建时常量注入:__BUILD_TIME__ 在源码中展开为精确的打包时刻字符串 */
|
||||||
|
define: (() => {
|
||||||
|
const d = new Date();
|
||||||
|
const pad = (n) => String(n).padStart(2, '0');
|
||||||
|
// 格式:YYYY.MMDD.HHmm,如 2026.0514.1530
|
||||||
|
const version = `${d.getFullYear()}.${pad(d.getMonth() + 1)}${pad(d.getDate())}.${pad(d.getHours())}${pad(d.getMinutes())}`;
|
||||||
|
return { __BUILD_TIME__: JSON.stringify(version) };
|
||||||
|
})(),
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -3468,6 +3468,11 @@ pify@^2.3.0:
|
|||||||
resolved "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz"
|
resolved "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz"
|
||||||
integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
|
integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
|
||||||
|
|
||||||
|
pinia-plugin-persistedstate@3.2.1:
|
||||||
|
version "3.2.1"
|
||||||
|
resolved "https://registry.npmmirror.com/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-3.2.1.tgz#66780602aecd6c7b152dd7e3ddc249a1f7a13fe5"
|
||||||
|
integrity sha512-MK++8LRUsGF7r45PjBFES82ISnPzyO6IZx3CH5vyPseFLZCk1g2kgx6l/nW8pEBKxxd4do0P6bJw+mUSZIEZUQ==
|
||||||
|
|
||||||
pinia@2.0.36:
|
pinia@2.0.36:
|
||||||
version "2.0.36"
|
version "2.0.36"
|
||||||
resolved "https://registry.npmjs.org/pinia/-/pinia-2.0.36.tgz"
|
resolved "https://registry.npmjs.org/pinia/-/pinia-2.0.36.tgz"
|
||||||
|
|||||||