9 Commits
Author SHA1 Message Date
kron 08e91a8c18 补全代码 2025-11-10 14:14:40 +08:00
kron 00a52f60b5 UI更新 2025-11-10 14:02:09 +08:00
kron b853d52a26 计分详情里添加注释功能 2025-10-27 16:56:11 +08:00
kron ea0c54b767 添加重置密码页面 2025-10-27 16:26:15 +08:00
kron 2bbe9f1aab 添加修改用户信息UI 2025-10-27 15:36:02 +08:00
kron 3af68d968c 添加编辑头像弹窗 2025-10-27 14:40:17 +08:00
kron 63c002ed56 页面翻译 2025-10-27 14:21:31 +08:00
kron 14f43e929f 完成ios首页改造 2025-10-27 13:56:27 +08:00
kron a9168201b3 添加ios首页和注册登录页 2025-10-24 15:16:44 +08:00
347 changed files with 8754 additions and 49017 deletions
-6
View File
@@ -8,12 +8,6 @@ pnpm-debug.log*
lerna-debug.log*
node_modules
.history
.github
.claude
openspec
CLAUDE.md
docs
.DS_Store
dist
*.local
-9
View File
@@ -1,9 +0,0 @@
{
"i18n-ally.localesPaths": [],
"files.watcherExclude": {
"**/dist/**": true
},
"search.exclude": {
"**/dist/**": true
}
}
-270
View File
@@ -1,270 +0,0 @@
# 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
* 写好中文注释
除非用户明确要求:
否则不要输出完整项目。
-246
View File
@@ -1,246 +0,0 @@
# 微信小程序多人协作分支管理规范
## 一、分支结构
```
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`
---
## 六、比赛服 Proto 更新流程
### 1. 新开发人员快速接手
首次拉取项目后,先安装依赖并确认当前协议与运行时解码器一致:
```bash
npm install
npm run proto:check
npm run build
```
如果 `proto:check` 提示协议不同步,先执行 `npm run proto:generate`,不要直接修改生成区块。
### 2. 相关文件职责
| 文件 | 职责 | 修改规则 |
|------|------|----------|
| `src/utils/match.min.js` | 后端比赛服协议描述,是生成字段表的输入文件 | 后端协议更新时整体替换;禁止在小程序运行时代码中导入 |
| `scripts/generate-match-schema.mjs` | 解析协议、校验字段并生成运行时字段表 | 只有新增通用协议能力时才修改 |
| `src/utils/matchProtocol.js` | 小程序实际使用的 protobuf 编解码器 | `<match-schema-generated>` 标记区间内禁止手动修改 |
| `src/matchWebsocket.js` | 服务端消息路由、ACK 和业务事件分发 | 新增消息业务行为时人工接入 |
| `src/utils/matchAdapter.js` | 将解码结果从 snake_case 统一转换为 camelCase | 页面继续使用适配后的字段名 |
`match.min.js` 不是小程序运行时解码器。运行时仍使用 `protobufjs/minimal.js``Reader/Writer``int64` 字段统一保留为字符串,避免大整数精度丢失。
### 3. 日常协议更新步骤
```text
替换 src/utils/match.min.js
执行 npm run proto:update
检查生成差异和业务接入范围
执行 git diff --check
微信开发者工具检查包体并上传
```
具体操作:
1. 从后端获取最新的 `match.min.js`,整体覆盖 `src/utils/match.min.js`
2. 执行推荐命令:
```bash
npm run proto:update
```
3. 该命令会依次完成:
- 解析 `match.min.js`
- 更新 `matchProtocol.js` 内的生成区块
- 校验生成区块与协议源文件一致
- 执行微信小程序正式构建
4. 检查 Git 差异。普通字段更新通常只应涉及:
- `src/utils/match.min.js`
- `src/utils/matchProtocol.js` 的生成区块
5. 如果新增了消息业务行为,再单独检查 `src/matchWebsocket.js`、页面或组件的接入改动。
6. 执行空白和换行检查:
```bash
git diff --check
```
7. 打开微信开发者工具,导入 `dist/build/mp-weixin`,检查代码依赖分析和主包体积后再上传。
### 4. Proto 命令说明
| 命令 | 用途 | 是否修改文件 |
|------|------|--------------|
| `npm run proto:generate` | 根据 `match.min.js` 更新生成区块 | 是 |
| `npm run proto:check` | 检查生成区块是否与协议同步 | 否 |
| `npm run proto:update` | 执行生成,然后运行正式构建 | 是,日常更新推荐使用 |
| `npm run dev` | 启动开发构建,启动前自动执行 `proto:check` | 协议不同步时直接中止 |
| `npm run build` | 执行正式构建,构建前自动执行 `proto:check` | 协议不同步时直接中止 |
`npm run dev``npm run build` 只负责检查,不会自动改写协议;发现不同步时应执行 `npm run proto:generate``npm run proto:update`
### 5. 自动生成与人工接入边界
以下内容由生成器自动处理:
- 服务端和客户端消息枚举
- 普通 scalar 字段
- 嵌套 message
- repeated message
- 当前解码器支持的 map
- snake_case 字段名和 oneof 兼容信息
以下情况仍需人工处理:
- **新增服务端消息类型**:枚举会自动生成,但 `matchWebsocket.js` 的路由、ACK、音频或页面事件仍需接入。
- **新增客户端指令**:枚举会自动生成,但发送函数、字段编码和业务调用入口仍需接入。
- **修改既有字段编号或类型**:属于协议兼容性变更,必须先与后端确认,不能只看构建是否通过。
- **新增解码器不支持的类型**:生成器会直接报错,需要同时扩展生成器和 `matchProtocol.js` 的通用解码能力。
当前生成器会拒绝不支持的 scalar、map key、字段规则以及 packed scalar repeated,避免继续构建后静默丢字段。
### 6. 常见报错处理
| 报错或现象 | 原因 | 处理方式 |
|------------|------|----------|
| 生成区块与 `match.min.js` 不同步 | 替换协议后没有重新生成 | 执行 `npm run proto:update` |
| 找不到 `Root.create(...)` | 后端提供的文件格式发生变化或文件不完整 | 停止更新,确认协议文件来源和生成格式 |
| 使用了不支持的类型、规则或 map key | 新协议超出当前通用解码器能力 | 不要手补生成区块,先扩展生成器和解码器并补充验证 |
| packed scalar repeated 不支持 | protobuf 默认可能使用 packed 编码,当前通用解码器未覆盖 | 增加 packed 解码能力后再重新生成 |
| `matchProtocol.js` 缺少生成区块标记 | 标记被误删或生成区块被手改 | 恢复 `<match-schema-generated>` 标记,重新执行生成 |
| 协议生成成功但构建失败 | 问题位于项目构建或业务代码,不是字段表同步 | 保留生成结果,按构建错误继续定位 |
### 7. 禁止事项与验收清单
禁止:
- 禁止在运行时代码中导入 `match.min.js`
- 禁止手动修改 `<match-schema-generated>``</match-schema-generated>` 之间的内容。
- 禁止绕过 `proto:check` 后直接上传。
- 禁止把 `int64` 字段直接转换为普通 `Number`
- 禁止把“枚举已经生成”等同于“业务消息已经完成接入”。
每次协议更新至少确认:
1. `npm run proto:check` 通过。
2. `npm run build` 通过,或直接确认 `npm run proto:update` 已完整通过。
3. `git diff --check` 通过。
4. 生成区块之外没有意外改动。
5. 新消息已完成必要的 WebSocket 路由和页面验证。
6. 微信开发者工具中的主包、分包体积符合上传限制。
+1 -2
View File
@@ -12,6 +12,5 @@
},
"vueCompilerOptions": {
"plugins": ["@uni-helper/uni-types/volar-plugin"]
},
"exclude": ["node_modules", "dist"]
}
}
-11160
View File
File diff suppressed because it is too large Load Diff
-8
View File
@@ -3,12 +3,7 @@
"version": "0.1.0",
"private": true,
"scripts": {
"proto:generate": "node scripts/generate-match-schema.mjs",
"proto:check": "node scripts/generate-match-schema.mjs --check",
"proto:update": "npm run proto:generate && npm run build",
"predev": "npm run proto:check",
"dev": "uni -p mp-weixin",
"prebuild": "npm run proto:check",
"build": "uni build -p mp-weixin"
},
"dependencies": {
@@ -28,10 +23,7 @@
"@dcloudio/uni-mp-weixin": "3.0.0-4060620250520001",
"@dcloudio/uni-mp-xhs": "3.0.0-4060620250520001",
"@dcloudio/uni-quickapp-webview": "3.0.0-4060620250520001",
"@dcloudio/uni-ui": "^1.5.11",
"pinia": "2.0.36",
"pinia-plugin-persistedstate": "3.2.1",
"protobufjs": "^8.7.0",
"vue": "^3.4.21",
"vue-i18n": "^9.1.9"
},
+1 -242
View File
@@ -3,248 +3,7 @@
"compileType": "miniprogram",
"libVersion": "3.7.7",
"packOptions": {
"ignore": [
{
"type": "file",
"value": "static/common/dialog-light.png"
},
{
"type": "file",
"value": "static/common/dialog-bg.png"
},
{
"type": "file",
"value": "static/common/dialog-icon.png"
},
{
"type": "file",
"value": "static/prompt-bg-square.png"
},
{
"type": "file",
"value": "static/coach-comment.png"
},
{
"type": "file",
"value": "static/screen-hint-bg.png"
},
{
"type": "file",
"value": "static/red-team-win.png"
},
{
"type": "file",
"value": "static/blue-team-win.png"
},
{
"type": "file",
"value": "static/my-grow.png"
},
{
"type": "file",
"value": "static/gold-shining.png"
},
{
"type": "file",
"value": "static/bow-target.png"
},
{
"type": "file",
"value": "static/matching-bg.png"
},
{
"type": "file",
"value": "static/versus.png"
},
{
"type": "file",
"value": "static/point-champion.png"
},
{
"type": "file",
"value": "static/my-practise.png"
},
{
"type": "file",
"value": "static/shining-bg.png"
},
{
"type": "file",
"value": "static/donate.png"
},
{
"type": "file",
"value": "static/friend-battle.png"
},
{
"type": "file",
"value": "static/user-upgrade.png"
},
{
"type": "file",
"value": "static/finish-frame.png"
},
{
"type": "file",
"value": "static/vip/svip-jian.png"
},
{
"type": "file",
"value": "static/battle-header.png"
},
{
"type": "file",
"value": "static/battle-header-melee.png"
},
{
"type": "file",
"value": "static/player-bg.png"
},
{
"type": "file",
"value": "static/mvp-blue.png"
},
{
"type": "file",
"value": "static/finish-tip.png"
},
{
"type": "file",
"value": "static/2unfinish-tip.png"
},
{
"type": "file",
"value": "static/have-no-device.png"
},
{
"type": "file",
"value": "static/device-icon.png"
},
{
"type": "file",
"value": "static/unfinish-tip.png"
},
{
"type": "file",
"value": "static/test-tip.png"
},
{
"type": "file",
"value": "static/mvp-red.png"
},
{
"type": "file",
"value": "static/vip/svip-lie.png"
},
{
"type": "file",
"value": "static/mvp-tip.png"
},
{
"type": "file",
"value": "static/rank/battle-choose.png"
},
{
"type": "file",
"value": "static/back-to-game-bg.png"
},
{
"type": "file",
"value": "static/complete-light1.png"
},
{
"type": "file",
"value": "static/complete-light2.png"
},
{
"type": "file",
"value": "static/title-2v2.png"
},
{
"type": "file",
"value": "static/tab-bg.png"
},
{
"type": "file",
"value": "static/scan.png"
},
{
"type": "file",
"value": "static/choose-battle-mode.png"
},
{
"type": "file",
"value": "static/shooter.png"
},
{
"type": "file",
"value": "static/my-growth.png"
},
{
"type": "file",
"value": "static/juezhanbang.png"
},
{
"type": "file",
"value": "static/title-3v3.png"
},
{
"type": "file",
"value": "static/point-book-tip-bg.png"
},
{
"type": "file",
"value": "static/reward-us.png"
},
{
"type": "file",
"value": "static/rank/star.png"
},
{
"type": "file",
"value": "static/tab-point-book.png"
},
{
"type": "file",
"value": "static/pk-icon.png"
},
{
"type": "file",
"value": "static/first-try.png"
},
{
"type": "file",
"value": "static/row-yellow-bg.png"
},
{
"type": "file",
"value": "static/room-notfound-title.png"
},
{
"type": "file",
"value": "static/title-mvp.png"
},
{
"type": "file",
"value": "static/long-bubble-tall.png"
},
{
"type": "file",
"value": "static/battle-result.png"
},
{
"type": "file",
"value": "static/tab-mall.png"
},
{
"type": "folder",
"value": "static/training-home"
},
{
"type": "folder",
"value": "static/training-difficulty-design"
}
],
"ignore": [],
"include": []
},
"setting": {
-441
View File
@@ -1,441 +0,0 @@
import { createHash } from "node:crypto";
import { readFileSync, writeFileSync } from "node:fs";
import { dirname, resolve } from "node:path";
import { fileURLToPath } from "node:url";
import vm from "node:vm";
const scriptDirectory = dirname(fileURLToPath(import.meta.url));
const projectRoot = resolve(scriptDirectory, "..");
const sourcePath = resolve(projectRoot, "src/utils/match.min.js");
const runtimePath = resolve(projectRoot, "src/utils/matchProtocol.js");
const generatedStartMarker = "// <match-schema-generated>";
const generatedEndMarker = "// </match-schema-generated>";
const supportedScalarKinds = new Set([
"int32",
"int64",
"float",
"double",
"bool",
"string",
"bytes",
]);
const supportedMapKeyKinds = new Set(["int32", "int64", "bool", "string"]);
// 新版描述文件未携带旧协议的 oneof 元数据,保留现有解码结果中的 payload 标识。
const compatibilityOneofs = {
ServerMessage: {
match_info: "payload",
shoot_data: "payload",
practice_info: "payload",
},
};
function isRecord(value) {
return value !== null && typeof value === "object" && !Array.isArray(value);
}
function extractRootCreateArgument(source) {
const match = /(?:\$protobuf\.)?Root\.create\s*\(/.exec(source);
if (!match) {
throw new Error("match.min.js 中未找到 Root.create(...) 协议描述");
}
const openIndex = source.indexOf("(", match.index);
let depth = 0;
let quote = "";
let escaped = false;
let lineComment = false;
let blockComment = false;
for (let index = openIndex; index < source.length; index += 1) {
const char = source[index];
const next = source[index + 1];
if (lineComment) {
if (char === "\n") lineComment = false;
continue;
}
if (blockComment) {
if (char === "*" && next === "/") {
blockComment = false;
index += 1;
}
continue;
}
if (quote) {
if (escaped) {
escaped = false;
} else if (char === "\\") {
escaped = true;
} else if (char === quote) {
quote = "";
}
continue;
}
if (char === '"' || char === "'" || char === "`") {
quote = char;
continue;
}
if (char === "/" && next === "/") {
lineComment = true;
index += 1;
continue;
}
if (char === "/" && next === "*") {
blockComment = true;
index += 1;
continue;
}
if (char === "(") {
depth += 1;
continue;
}
if (char === ")") {
depth -= 1;
if (depth === 0) {
return source.slice(openIndex + 1, index).trim();
}
}
}
throw new Error("match.min.js 中的 Root.create(...) 括号不完整");
}
function stripQuotedText(source) {
let output = "";
let quote = "";
let escaped = false;
for (const char of source) {
if (quote) {
output += " ";
if (escaped) {
escaped = false;
} else if (char === "\\") {
escaped = true;
} else if (char === quote) {
quote = "";
}
continue;
}
if (char === '"' || char === "'") {
quote = char;
output += " ";
} else {
output += char;
}
}
return output;
}
function parseDescriptor(argumentSource) {
if (!argumentSource.startsWith("{") || !argumentSource.endsWith("}")) {
throw new Error("Root.create(...) 参数不是静态对象字面量");
}
try {
return JSON.parse(argumentSource);
} catch {
// 兼容旧版 pbjs 生成的未加引号对象键;只允许静态对象语法。
const syntaxOnly = stripQuotedText(argumentSource);
if (/[();`=]/.test(syntaxOnly)) {
throw new Error("旧版协议描述包含非静态表达式,已拒绝执行");
}
const descriptor = vm.runInNewContext(
`(${argumentSource})`,
Object.create(null),
{ timeout: 1000 }
);
return JSON.parse(JSON.stringify(descriptor));
}
}
function findProtocolNamespace(node, path = []) {
if (!isRecord(node)) return null;
const entries = isRecord(node.nested) ? node.nested : node;
if (isRecord(entries.ServerMessage?.fields) && isRecord(entries.ClientMessage?.fields)) {
return { entries, path };
}
for (const [name, child] of Object.entries(entries)) {
if (!isRecord(child) || isRecord(child.fields)) continue;
const found = findProtocolNamespace(child, [...path, name]);
if (found) return found;
}
return null;
}
function getEnumValues(definition) {
if (!isRecord(definition)) return null;
const candidate = isRecord(definition.values) ? definition.values : definition;
const entries = Object.entries(candidate);
if (entries.length === 0 || entries.some(([, value]) => !Number.isInteger(value))) {
return null;
}
return Object.fromEntries(entries.sort((left, right) => left[1] - right[1]));
}
function normalizeTypeName(type) {
return String(type || "")
.replace(/^\./, "")
.split(".")
.pop();
}
function getOneofByField(definition) {
const result = new Map();
if (!isRecord(definition.oneofs)) return result;
for (const [groupName, groupDefinition] of Object.entries(definition.oneofs)) {
const fieldNames = Array.isArray(groupDefinition)
? groupDefinition
: groupDefinition?.oneof;
if (!Array.isArray(fieldNames)) continue;
for (const fieldName of fieldNames) result.set(fieldName, groupName);
}
return result;
}
function buildSchema({ messageName, definition, messages, enumNames }) {
const schema = {};
const usedIds = new Set();
const oneofByField = getOneofByField(definition);
for (const [fieldKey, fieldDefinition] of Object.entries(definition.fields)) {
const id = Number(fieldDefinition.id);
if (!Number.isInteger(id) || id <= 0) {
throw new Error(`${messageName}.${fieldKey} 的字段编号无效`);
}
if (usedIds.has(id)) {
throw new Error(`${messageName} 存在重复字段编号 ${id}`);
}
usedIds.add(id);
const rule = fieldDefinition.rule;
if (rule && !["optional", "required", "repeated", "map"].includes(rule)) {
throw new Error(`${messageName}.${fieldKey} 使用了不支持的规则 ${rule}`);
}
const fieldName = fieldDefinition.protoName || fieldKey;
const typeName = normalizeTypeName(fieldDefinition.type);
const keyTypeName = normalizeTypeName(
fieldDefinition.keyType ?? fieldDefinition.keytype
);
const isMap = rule === "map" || Boolean(keyTypeName);
if (isMap) {
if (!supportedMapKeyKinds.has(keyTypeName)) {
throw new Error(
`${messageName}.${fieldKey} 使用了不支持的 map key 类型 ${keyTypeName}`
);
}
const valueIsMessage = messages.has(typeName);
const valueKind = enumNames.has(typeName) ? "int32" : typeName;
if (!valueIsMessage && !supportedScalarKinds.has(valueKind)) {
throw new Error(
`${messageName}.${fieldKey} 使用了不支持的 map value 类型 ${typeName}`
);
}
schema[id] = valueIsMessage
? {
name: fieldName,
kind: "map",
keyKind: keyTypeName,
valueKind: "message",
valueType: typeName,
}
: {
name: fieldName,
kind: "map",
keyKind: keyTypeName,
valueKind,
};
continue;
}
const isMessage = messages.has(typeName);
const kind = enumNames.has(typeName) ? "int32" : typeName;
if (!isMessage && !supportedScalarKinds.has(kind)) {
throw new Error(`${messageName}.${fieldKey} 使用了不支持的类型 ${typeName}`);
}
const repeated = rule === "repeated";
if (repeated && !isMessage && !["string", "bytes"].includes(kind)) {
throw new Error(
`${messageName}.${fieldKey} 是 packed scalar repeated,当前通用解码器尚不支持`
);
}
const field = isMessage
? { name: fieldName, kind: "message", type: typeName }
: { name: fieldName, kind };
if (repeated) field.repeated = true;
const oneof =
fieldDefinition.oneof ||
oneofByField.get(fieldKey) ||
compatibilityOneofs[messageName]?.[fieldName];
if (oneof) field.oneof = oneof;
schema[id] = field;
}
return schema;
}
function formatPropertyKey(key) {
return /^(?:[A-Za-z_$][\w$]*|\d+)$/.test(key) ? key : JSON.stringify(key);
}
function formatJsValue(value, depth = 0) {
if (!isRecord(value)) return JSON.stringify(value);
const entries = Object.entries(value);
if (entries.length === 0) return "{}";
const indent = " ".repeat(depth);
const primitiveEntries = entries.every(([, child]) => !isRecord(child));
if (primitiveEntries && value.kind !== "map") {
const singleLine = `{ ${entries
.map(([key, child]) => `${formatPropertyKey(key)}: ${JSON.stringify(child)}`)
.join(", ")} }`;
if (indent.length + singleLine.length <= 100) return singleLine;
}
const childIndent = " ".repeat(depth + 1);
const lines = entries.map(
([key, child]) =>
`${childIndent}${formatPropertyKey(key)}: ${formatJsValue(child, depth + 1)},`
);
return `{\n${lines.join("\n")}\n${indent}}`;
}
function createGeneratedSource(source) {
const descriptor = parseDescriptor(extractRootCreateArgument(source));
const namespace = findProtocolNamespace(descriptor);
if (!namespace) {
throw new Error("协议描述中未找到 ServerMessage 和 ClientMessage");
}
const messages = new Map();
const enums = new Map();
for (const [name, definition] of Object.entries(namespace.entries)) {
if (isRecord(definition?.fields)) {
messages.set(name, definition);
continue;
}
const values = getEnumValues(definition);
if (values) enums.set(name, values);
}
const serverMessageType = enums.get("ServerMessageType");
const clientMessageType = enums.get("ClientMessageType");
if (!serverMessageType || !clientMessageType) {
throw new Error("协议描述缺少 ServerMessageType 或 ClientMessageType");
}
const enumNames = new Set(enums.keys());
const schemaByName = new Map();
for (const [messageName, definition] of messages) {
schemaByName.set(
messageName,
buildSchema({ messageName, definition, messages, enumNames })
);
}
const reachable = new Set();
function collectReachable(messageName) {
if (reachable.has(messageName)) return;
const schema = schemaByName.get(messageName);
if (!schema) throw new Error(`找不到消息定义 ${messageName}`);
reachable.add(messageName);
for (const field of Object.values(schema)) {
if (field.kind === "message") collectReachable(field.type);
if (field.kind === "map" && field.valueKind === "message") {
collectReachable(field.valueType);
}
}
}
collectReachable("ServerMessage");
const schemas = {};
for (const messageName of messages.keys()) {
if (reachable.has(messageName)) schemas[messageName] = schemaByName.get(messageName);
}
const sourceHash = createHash("sha256").update(source).digest("hex").slice(0, 16);
const namespaceName = namespace.path.join(".") || "root";
const fieldCount = Object.values(schemas).reduce(
(total, schema) => total + Object.keys(schema).length,
0
);
const generatedBlock = [
generatedStartMarker,
"// 此区块由 scripts/generate-match-schema.mjs 自动生成,请勿手动修改。",
`// 来源:src/utils/match.min.jssha256: ${sourceHash}`,
`// 协议命名空间:${namespaceName};消息数:${Object.keys(schemas).length};字段数:${fieldCount}`,
"",
`export const ServerMessageType = ${formatJsValue(serverMessageType)};`,
"",
`export const ClientMessageType = ${formatJsValue(clientMessageType)};`,
"",
`const SCHEMAS = ${formatJsValue(schemas)};`,
generatedEndMarker,
].join("\n");
return {
generatedBlock,
messageCount: Object.keys(schemas).length,
fieldCount,
};
}
function main() {
const args = process.argv.slice(2);
const unknownArgs = args.filter((arg) => arg !== "--check");
if (unknownArgs.length > 0) {
throw new Error(`未知参数:${unknownArgs.join(", ")}`);
}
// 统一换行符,避免 Windows 的 CRLF 让未变更的协议产生不同哈希。
const source = readFileSync(sourcePath, "utf8").replace(/\r\n?/g, "\n");
const { generatedBlock, messageCount, fieldCount } = createGeneratedSource(source);
const runtimeSource = readFileSync(runtimePath, "utf8");
const startIndex = runtimeSource.indexOf(generatedStartMarker);
const endMarkerIndex = runtimeSource.indexOf(generatedEndMarker);
if (startIndex < 0 || endMarkerIndex < startIndex) {
throw new Error("matchProtocol.js 缺少协议生成区块标记");
}
const endIndex = endMarkerIndex + generatedEndMarker.length;
const currentBlock = runtimeSource.slice(startIndex, endIndex);
if (args.includes("--check")) {
if (currentBlock !== generatedBlock) {
throw new Error(
"matchProtocol.js 的生成区块与 match.min.js 不同步,请运行 npm run proto:generate"
);
}
console.log(`[match-schema] 同步校验通过:${messageCount} 个消息,${fieldCount} 个字段`);
return;
}
if (currentBlock === generatedBlock) {
console.log(`[match-schema] 无需更新:${messageCount} 个消息,${fieldCount} 个字段`);
return;
}
const nextRuntimeSource =
runtimeSource.slice(0, startIndex) + generatedBlock + runtimeSource.slice(endIndex);
writeFileSync(runtimePath, nextRuntimeSource, "utf8");
console.log(`[match-schema] 已生成:${messageCount} 个消息,${fieldCount} 个字段`);
}
try {
main();
} catch (error) {
console.error(`[match-schema] ${error.message}`);
process.exitCode = 1;
}
+205 -402
View File
@@ -1,428 +1,231 @@
<script setup>
import {
watch
} from "vue";
import {
onShow,
onHide
} from "@dcloudio/uni-app";
import websocket from "@/websocket";
import matchWebsocket from "@/matchWebsocket";
import {
getDeviceBatteryAPI
} from "@/apis";
import {
MESSAGETYPES
} from "@/constants";
import useStore from "@/store";
import {
storeToRefs
} from "pinia";
import audioManager from "./audioManager";
const store = useStore();
const {
user,
device,
online
} = storeToRefs(store);
const {
updateUser,
updateOnline,
clearSessionState,
clearDevice
} = store;
import { watch } from "vue";
import { onShow, onHide } from "@dcloudio/uni-app";
import websocket from "@/websocket";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
const { updateUser } = store;
watch(
() => user.value.id,
(newVal) => {
const token = uni.getStorageSync(
`${uni.getAccountInfoSync().miniProgram.envVersion}_token`
);
if (newVal && token) {
websocket.createWebSocket(token, onShootWsMsg);
}
if (!newVal) {
matchWebsocket.closeMatchWebSocket({
reason: "logout"
});
websocket.closeWebSocket();
}
}, {
deep: false, // 如果 user 是一个对象或数组,建议开启
immediate: false, // 若想在初始化时立即执行一次回调,可开启。
}
);
watch(
() => user.value.id,
(newVal) => {
const token = uni.getStorageSync(
`${uni.getAccountInfoSync().miniProgram.envVersion}_token`
);
if (newVal && token) {
websocket.createWebSocket(token, (content) => {
uni.$emit("socket-inbox", content);
});
}
if (!newVal) {
websocket.closeWebSocket();
}
},
{
deep: false, // 如果 user 是一个对象或数组,建议开启
immediate: false, // 若想在初始化时立即执行一次回调,可开启。
}
);
function emitUpdateUser(value) {
updateUser(value);
}
onShow(() => {
const token = uni.getStorageSync(
`${uni.getAccountInfoSync().miniProgram.envVersion}_token`
);
if (user.value.id && token) {
console.log("回到前台,重新连接 websocket");
websocket.createWebSocket(token, (content) => {
uni.$emit("socket-inbox", content);
});
}
});
function onSessionKickedOut() {
const env = uni.getAccountInfoSync().miniProgram.envVersion;
uni.removeStorageSync(`${env}_token`);
clearSessionState();
uni.showModal({
title: "提示",
content: "账号已在其他设备登录",
showCancel: false,
});
}
async function emitUpdateOnline() {
const data = await getDeviceBatteryAPI();
const wasOnline = Boolean(online.value);
const nextOnline = Boolean(data.online);
updateOnline(nextOnline);
if (!device.value.deviceId || wasOnline === nextOnline) return;
audioManager.play(nextOnline ? "设备已连接" : "设备连接已断开");
}
function onDeviceBindInvalid() {
clearDevice();
uni.setStorageSync("calibration", false);
}
function onDeviceShoot() {
// audioManager.play("射箭声音")
}
function onNetworkStatusChange(status) {
matchWebsocket.handleMatchNetworkStatusChange(status);
}
function connectMatchServerFromMessage(content) {
const messages = Array.isArray(content) ? content : [content];
messages.forEach((message) => {
if (
message?.constructor ===
MESSAGETYPES.ShootSyncBattleCreateMatchLinkID
) {
matchWebsocket.connectMatchWebSocketFromNotice(
message,
user.value.id
);
}
});
}
function onShootWsMsg(content) {
if(content.type === 'shoot-trigger'){
onDeviceShoot()
}
connectMatchServerFromMessage(content);
uni.$emit("socket-inbox", content);
}
onShow(() => {
void audioManager.warmButton();
uni.$on("update-user", emitUpdateUser);
uni.$on("update-online", emitUpdateOnline);
uni.$on("session-kicked-out", onSessionKickedOut);
uni.$on("device-bind-invalid", onDeviceBindInvalid);
if (typeof uni.offNetworkStatusChange === "function") {
uni.offNetworkStatusChange(onNetworkStatusChange);
}
if (typeof uni.onNetworkStatusChange === "function") {
uni.onNetworkStatusChange(onNetworkStatusChange);
}
if (typeof uni.getNetworkType === "function") {
uni.getNetworkType({
success: onNetworkStatusChange
});
}
const token = uni.getStorageSync(
`${uni.getAccountInfoSync().miniProgram.envVersion}_token`
);
if (user.value.id && token) {
console.log("回到前台,重新连接 websocket");
websocket.createWebSocket(token, onShootWsMsg);
}
});
onHide(() => {
uni.$off("update-user", emitUpdateUser);
uni.$off("update-online", emitUpdateOnline);
uni.$off("session-kicked-out", onSessionKickedOut);
uni.$off("device-bind-invalid", onDeviceBindInvalid);
if (typeof uni.offNetworkStatusChange === "function") {
uni.offNetworkStatusChange(onNetworkStatusChange);
}
matchWebsocket.closeMatchWebSocket({
reason: "app-hide"
});
websocket.closeWebSocket();
});
onHide(() => {
websocket.closeWebSocket();
});
</script>
<style>
page {
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
background-color: #000;
}
page {
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
background-color: #000;
}
button {
margin: 0;
padding: 0;
border: none;
background: none;
line-height: 1;
outline: none;
box-sizing: border-box;
}
button {
margin: 0;
padding: 0;
border: none;
background: none;
line-height: 1;
outline: none;
box-sizing: border-box;
}
view::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
view::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
button::after {
border: none;
}
button::after {
border: none;
}
.guide-tips {
display: flex;
flex-direction: column;
font-size: 28rpx;
}
.guide-tips {
display: flex;
flex-direction: column;
}
.guide-tips > text:first-child {
color: #fed847;
}
.guide-tips>text:first-child {
color: #fed847;
}
@keyframes fadeInOut {
0% {
transform: translateY(20px);
opacity: 0;
}
30% {
transform: translateY(0);
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.guide-tips>text:nth-child(2) {
font-size: 24rpx;
}
.fade-in-out {
animation: fadeInOut 1.2s ease forwards;
}
@keyframes fadeInOut {
0% {
transform: translateY(20px);
opacity: 0;
}
@keyframes fadeOut {
from {
transform: translateY(0);
opacity: 1;
}
to {
transform: translateY(20px);
opacity: 0;
}
}
30% {
transform: translateY(0);
opacity: 1;
}
.fade-out {
animation: fadeOut 0.3s ease forwards;
}
80% {
opacity: 1;
}
@keyframes scaleIn {
from {
transform: scale(0);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
100% {
opacity: 0;
}
}
.scale-in {
animation: scaleIn 0.3s ease-out forwards;
transform-origin: center center;
}
.fade-in-out {
animation: fadeInOut 1.2s ease forwards;
}
@keyframes scaleOut {
from {
transform: scale(1);
opacity: 1;
}
to {
transform: scale(0);
opacity: 0;
}
}
@keyframes fadeOut {
from {
transform: translateY(0);
opacity: 1;
}
.scale-out {
animation: scaleOut 0.3s ease-out forwards;
transform-origin: center center;
}
to {
transform: translateY(20px);
opacity: 0;
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.fade-out {
animation: fadeOut 0.3s ease forwards;
}
@keyframes pumpIn {
from {
transform: scale(2);
}
to {
transform: scale(1);
}
}
@keyframes scaleIn {
from {
transform: scale(0);
opacity: 0;
}
.pump-in {
animation: pumpIn 0.3s ease-out forwards;
transform-origin: center center;
}
to {
transform: scale(1);
opacity: 1;
}
}
.share-canvas {
width: 300px;
height: 534px;
position: absolute;
top: -1000px;
left: 0;
}
.scale-in {
animation: scaleIn 0.3s ease-out forwards;
transform-origin: center center;
}
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@keyframes scaleOut {
from {
transform: scale(1);
opacity: 1;
}
to {
transform: scale(0);
opacity: 0;
}
}
.scale-out {
animation: scaleOut 0.3s ease-out forwards;
transform-origin: center center;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes pumpIn {
from {
transform: scale(2);
}
to {
transform: scale(1);
}
}
.pump-in {
animation: pumpIn 0.3s ease-out forwards;
transform-origin: center center;
}
.share-canvas {
width: 300px;
height: 530px;
position: absolute;
top: -1000px;
left: 0;
}
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.member-nickname {
position: relative;
display: inline-flex;
max-width: 100%;
overflow: hidden;
}
.member-nickname__text,
.member-nickname__shine {
display: block;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.member-nickname--vip .member-nickname__text {
color: #E7BA80;
}
.member-nickname--svip .member-nickname__text {
background: linear-gradient(90deg, #ffb86c, #ff4fd8, #7c5cff, #35d6ff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.member-nickname__shine {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(
110deg,
transparent 0%,
transparent 38%,
rgba(255, 255, 255, 0.15) 45%,
rgba(255, 255, 255, 1) 50%,
rgba(255, 255, 255, 0.15) 55%,
transparent 62%,
transparent 100%
);
background-size: 220% 100%;
background-position: 120% 0;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
pointer-events: none;
animation: memberNicknameShine 3.5s infinite ease-in-out;
}
@keyframes memberNicknameShine {
0%,
50% {
background-position: 120% 0;
}
100% {
background-position: -200% 0;
}
}
.modal {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.user-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 15px;
padding-top: 7px;
position: relative;
}
.half-time-tip {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.half-time-tip>text:last-child {
margin-top: 20px;
color: #fff9;
}
.see-more {
display: flex;
align-items: center;
justify-content: center;
margin-top: 20rpx;
}
.see-more>text {
color: #39a8ff;
font-size: 13px;
}
.see-more>image {
width: 15px;
}
@font-face {
font-family: "DINCondensed";
src: url("https://static.shelingxingqiu.com/font/DIN-Condensed-Bold-2.ttf") format("truetype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
.modal {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.user-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 15px;
padding-top: 7px;
position: relative;
}
.half-time-tip {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.half-time-tip > text:last-child {
margin-top: 20px;
color: #fff9;
}
.see-more {
display: flex;
align-items: center;
justify-content: center;
margin-top: 5px;
}
.see-more > text {
color: #39a8ff;
margin-top: 2px;
font-size: 13px;
}
.see-more > image {
width: 15px;
margin-top: 2px;
}
</style>
+368 -496
View File
File diff suppressed because it is too large Load Diff
+129 -883
View File
File diff suppressed because it is too large Load Diff
-1037
View File
File diff suppressed because it is too large Load Diff
+13 -51
View File
@@ -1,6 +1,5 @@
<script setup>
import { capsuleHeight } from "@/util";
import { ref, onMounted } from "vue";
const props = defineProps({
type: {
type: Number,
@@ -11,6 +10,11 @@ const props = defineProps({
default: "#050b19",
},
});
const capsuleHeight = ref(0);
onMounted(() => {
const menuBtnInfo = uni.getMenuButtonBoundingClientRect();
capsuleHeight.value = menuBtnInfo.top + 50 - 9;
});
</script>
<template>
@@ -18,75 +22,33 @@ const props = defineProps({
<image
class="bg-image"
v-if="type === 0"
src="https://static.shelingxingqiu.com/shootmini/static/app-bg.png"
src="../static/app-bg.png"
mode="widthFix"
/>
<image
class="bg-image"
v-if="type === 1"
src="https://static.shelingxingqiu.com/shootmini/static/app-bg2.png"
src="../static/app-bg2.png"
mode="widthFix"
/>
<image
class="bg-image"
v-if="type === 2"
src="https://static.shelingxingqiu.com/shootmini/static/app-bg3.png"
:style="{ height: capsuleHeight + 50 + 'px' }"
src="../static/app-bg3.png"
:style="{ height: capsuleHeight + 'px' }"
/>
<image
class="bg-image"
v-if="type === 3"
src="https://static.shelingxingqiu.com/shootmini/static/app-bg4.png"
src="../static/app-bg4.png"
mode="widthFix"
/>
<image
class="bg-image"
v-if="type === 4"
src="https://static.shelingxingqiu.com/shootmini/static/app-bg5.png"
src="../static/app-bg5.png"
mode="widthFix"
/>
<image
class="bg-image"
v-if="type === 5"
src="https://static.shelingxingqiu.com/attachment/2026-01-05/dfgf3b5kp459tfyn0f.png"
mode="widthFix"
/>
<image
class="bg-image"
v-if="type === 6"
src="https://static.shelingxingqiu.com/shootmini/static/rank/rank-bg.png"
mode="widthFix"
/>
<image
class="bg-image"
v-if="type === 7"
src="https://static.shelingxingqiu.com/shootmini/static/app-bg6.png"
mode="widthFix"
/>
<image
class="bg-image"
v-if="type === 8"
src="https://static.shelingxingqiu.com/shootmini/static/app-bg7.png"
mode="widthFix"
/>
<image
class="bg-image"
v-if="type === 9"
src="https://static.shelingxingqiu.com/shootmini/static/app-bg8.png"
mode="widthFix"
/>
<image
class="bg-image"
v-if="type === 11"
src="https://static.shelingxingqiu.com/shootmini/static/app-bg9.png"
mode="widthFix"
/>
<image
class="bg-image"
v-if="type === 10"
src="https://static.shelingxingqiu.com/shootmini/static/vip/vip-bg.png"
mode="widthFix"
/>
<view class="bg-overlay" v-if="type === 0"></view>
</view>
</template>
@@ -103,7 +65,7 @@ const props = defineProps({
.bg-image {
width: 100%;
/* height: 100%; */
height: 100%;
}
.bg-overlay {
+12 -14
View File
@@ -1,14 +1,15 @@
<script setup>
const tabs = [
{ image: "../static/tab-vip.png" },
{ image: "https://static.shelingxingqiu.com/shootmini/static/tab-point-book.png" },
{ image: "https://static.shelingxingqiu.com/shootmini/static/tab-mall.png" },
{ image: "../static/tab-point-book.png" },
{ image: "../static/tab-mall.png" },
];
function handleTabClick(index) {
if (index === 0) {
uni.navigateTo({
url: "/pages/member/be-vip",
url: "/pages/be-vip",
});
}
if (index === 1) {
@@ -26,14 +27,14 @@ function handleTabClick(index) {
<template>
<view class="footer">
<image class="footer-bg" src="https://static.shelingxingqiu.com/shootmini/static/tab-bg.png" mode="widthFix" />
<image class="footer-bg" src="../static/tab-bg.png" mode="widthFix" />
<view
v-for="(tab, index) in tabs"
:key="index"
class="tab-item"
@click="$clickSound(() => handleTabClick(index))"
@click="handleTabClick(index)"
:style="{
width: index === 1 ? '36%' : '20%',
width: index === 1 ? '36%' : '10%',
}"
>
<image :src="tab.image" mode="widthFix" />
@@ -43,13 +44,13 @@ function handleTabClick(index) {
<style scoped>
.footer {
height: 120px;
height: 117px;
width: 100vw;
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
overflow: hidden;
overflow-x: hidden;
}
.footer-bg {
width: 100%;
@@ -63,13 +64,10 @@ function handleTabClick(index) {
justify-content: center;
}
.tab-item > image {
width: 65rpx;
}
.tab-item:last-child > image {
width: 85rpx;
width: 86%;
}
.tab-item:nth-child(2) {
transform: translate(10%, 40%);
transform: translate(25%, 30%);
}
.tab-item:nth-child(3) {
margin-bottom: 25rpx;
@@ -78,6 +76,6 @@ function handleTabClick(index) {
width: 140rpx;
}
.tab-item:nth-child(4) {
transform: translate(-10%, 44%);
transform: translate(-25%, 30%);
}
</style>
+12 -25
View File
@@ -1,5 +1,5 @@
<script setup>
import { computed, ref, watch } from "vue";
import { ref, onMounted, watch } from "vue";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
@@ -26,33 +26,12 @@ const props = defineProps({
type: Number,
default: 45,
},
sizeUnit: {
type: String,
default: "px",
},
imageMode: {
type: String,
default: "widthFix",
},
borderColor: {
type: String,
default: "",
},
});
const avatarFrame = ref("");
const sizeValue = computed(() => `${Number(props.size)}${props.sizeUnit}`);
const frameSizeValue = computed(() => `${Number(props.size) + 10}${props.sizeUnit}`);
const avatarImageStyle = computed(() => ({
width: sizeValue.value,
height: sizeValue.value,
minHeight: sizeValue.value,
borderColor: props.borderColor || "#fff",
}));
const avatarFrameStyle = computed(() => ({
width: frameSizeValue.value,
height: frameSizeValue.value,
}));
watch(
() => [config.value, props.rankLvl],
() => {
@@ -72,7 +51,10 @@ watch(
v-if="avatarFrame"
:src="avatarFrame"
mode="widthFix"
:style="avatarFrameStyle"
:style="{
width: Number(size) + 10 + 'px',
height: Number(size) + 10 + 'px',
}"
class="avatar-frame"
/>
<image
@@ -96,8 +78,13 @@ watch(
<view v-if="rank > 3" class="rank-view">{{ rank }}</view>
<image
:src="src || '../static/user-icon.png'"
:mode="imageMode"
:style="avatarImageStyle"
mode="widthFix"
:style="{
width: size + 'px',
height: size + 'px',
minHeight: size + 'px',
borderColor: borderColor || '#fff',
}"
class="avatar-image"
/>
</view>
+26 -73
View File
@@ -1,86 +1,50 @@
<script setup>
import { ref, watch, onMounted, onBeforeUnmount } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { getBattleAPI, getUserGameState } from "@/apis";
import { isGamingAPI, getCurrentGameAPI } from "@/apis";
import { debounce } from "@/util";
import { returnToBattle } from "@/utils/matchReturn";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user, game } = storeToRefs(store);
const { updateGame } = store;
const { user } = storeToRefs(store);
const props = defineProps({
signin: {
type: Function,
default: () => {},
},
});
const loading = ref(false);
const navigating = ref(false);
/** 统一获取当前环境 token,用于守卫:无有效 token 时不发起接口请求 */
const getToken = () =>
uni.getStorageSync(`${uni.getAccountInfoSync().miniProgram.envVersion}_token`);
const show = ref(false);
onShow(async () => {
navigating.value = false;
if (user.value.id && getToken()) {
setTimeout(async () => {
const state = await getUserGameState();
updateGame(state.gaming, state.roomId);
}, 1000);
if (user.value.id) {
const isGaming = await isGamingAPI();
show.value = isGaming;
}
});
watch(
() => user.value,
async (value) => {
if (!value.id) {
updateGame(false, "");
} else if (getToken()) {
// 有有效 token 时才查询在局状态,避免 token 失效时反复发起无效请求
const state = await getUserGameState();
updateGame(state.gaming, state.roomId);
show.value = false;
} else {
const isGaming = await isGamingAPI();
show.value = isGaming;
}
}
);
const navigateOnce = (url) =>
new Promise((resolve, reject) => {
navigating.value = true;
uni.navigateTo({
url,
success: resolve,
fail: (error) => {
navigating.value = false;
reject(error);
},
});
});
const onClick = debounce(async () => {
if (loading.value || navigating.value) return;
try {
loading.value = true;
const result = await getBattleAPI();
if (result && result.matchId) {
await returnToBattle(result, navigateOnce);
return;
}
if (game.value.roomID) {
await navigateOnce("/pages/battle-room?roomNumber=" + game.value.roomID);
} else {
updateGame(false, "");
}
} finally {
loading.value = false;
const isGaming = await isGamingAPI();
show.value = isGaming;
if (isGaming) {
const result = await getCurrentGameAPI();
} else {
uni.showToast({
title: "比赛已结束",
icon: "none",
});
}
});
const gameOver = () => {
updateGame(false, "");
show.value = false;
};
onMounted(() => {
uni.$on("game-over", gameOver);
@@ -91,19 +55,10 @@ onBeforeUnmount(() => {
</script>
<template>
<view
v-if="game.inBattle || game.roomID"
class="back-to-game"
@click="onClick"
>
<image src="https://static.shelingxingqiu.com/shootmini/static/back-to-game-bg.png" mode="widthFix" />
<block v-if="game.inBattle">
<image src="https://static.shelingxingqiu.com/shootmini/static/pk-icon.png" mode="widthFix" />
<text>返回进行中的对局</text>
</block>
<block v-else-if="game.roomID">
<text>返回房间</text>
</block>
<view v-if="show" class="back-to-game" @click="onClick">
<image src="../static/back-to-game-bg.png" mode="widthFix" />
<image src="../static/pk-icon.png" mode="widthFix" />
<text>返回进行中的对局</text>
<image src="../static/back.png" mode="widthFix" />
</view>
</template>
@@ -123,18 +78,16 @@ onBeforeUnmount(() => {
.back-to-game > image:first-child {
position: absolute;
width: 100%;
height: 100rpx;
}
.back-to-game > image:nth-child(2) {
position: relative;
width: 60px;
height: 60px;
}
.back-to-game > text {
.back-to-game > text:nth-child(3) {
position: relative;
font-size: 14px;
}
.back-to-game > image:last-child {
.back-to-game > image:nth-child(4) {
position: relative;
width: 15px;
margin-left: 5px;
+34 -30
View File
@@ -1,9 +1,8 @@
=
<script setup>
import { computed } from "vue";
import BowPower from "@/components/BowPower.vue";
import { RoundImages } from "@/constants";
const props = defineProps({
defineProps({
roundResults: {
type: Array,
default: () => [],
@@ -16,42 +15,47 @@ const props = defineProps({
type: Number,
default: 0,
},
power: {
type: Number,
default: 0,
},
goldenRound: {
type: Number,
default: 0,
},
});
const normalRounds = computed(() => {
const count = props.roundResults.findIndex((item) => !!item.ifGold);
return count > 0 ? count : props.roundResults.length;
});
</script>
<template>
<view class="container">
<view class="guide-row">
<image src="https://static.shelingxingqiu.com/shootmini/static/shooter.png" mode="widthFix" />
<image src="../static/shooter.png" mode="widthFix" />
<view
:style="{
marginBottom: '10px',
transform: 'scale(0.8) translateX(10px)',
}"
>
<BowPower />
<BowPower :power="power" />
</view>
</view>
<view>
<image src="https://static.shelingxingqiu.com/shootmini/static/battle-header-melee.png" mode="widthFix" />
<image src="../static/battle-header-melee.png" mode="widthFix" />
<text>蓝队({{ bluePoints }})</text>
<text>红队({{ redPoints }})</text>
</view>
<view class="players">
<view>
<view v-for="(result, index) in roundResults" :key="index">
<block v-if="index + 1 > normalRounds">
<block
v-if="goldenRound > 0 && index >= roundResults.length - goldenRound"
>
<image
:src="RoundImages[`gold${index + 1 - normalRounds}`]"
:src="
RoundImages[
`gold${index + 1 - (roundResults.length - goldenRound)}`
]
"
mode="widthFix"
/>
</block>
@@ -60,8 +64,8 @@ const normalRounds = computed(() => {
</block>
<view>
<text>{{
result.shoots[1] && result.shoots[1].length
? result.shoots[1]
result.blueArrows.length
? result.blueArrows
.map((item) => item.ring)
.reduce((last, next) => last + next, 0)
: ""
@@ -84,9 +88,15 @@ const normalRounds = computed(() => {
</view>
<view>
<view v-for="(result, index) in roundResults" :key="index">
<block v-if="index + 1 > normalRounds">
<block
v-if="goldenRound > 0 && index >= roundResults.length - goldenRound"
>
<image
:src="RoundImages[`gold${index + 1 - normalRounds}`]"
:src="
RoundImages[
`gold${index + 1 - (roundResults.length - goldenRound)}`
]
"
mode="widthFix"
/>
</block>
@@ -95,8 +105,8 @@ const normalRounds = computed(() => {
</block>
<view>
<text>{{
result.shoots[2] && result.shoots[2].length
? result.shoots[2]
result.redArrows.length
? result.redArrows
.map((item) => item.ring)
.reduce((last, next) => last + next, 0)
: ""
@@ -125,7 +135,7 @@ const normalRounds = computed(() => {
.container {
width: 100%;
overflow: hidden;
margin-top: -100rpx;
margin-top: -40px;
}
.container > view:nth-child(2) {
position: relative;
@@ -142,11 +152,6 @@ const normalRounds = computed(() => {
.container > view:nth-child(2) > text {
z-index: 1;
margin-top: 2px;
color: #8a323e;
font-weight: 500;
}
.container > view:nth-child(2) > text:nth-child(2) {
color: #004ac1;
}
.players {
display: flex;
@@ -161,13 +166,13 @@ const normalRounds = computed(() => {
padding-top: 5px;
}
.players > view:first-child > view {
background: linear-gradient(270deg, #172a86 0%, #0000 100%);
background: linear-gradient(270deg, #172a86 0%, #0006 100%);
}
.players > view:last-child > view {
background: linear-gradient(270deg, #0000 0%, #6a1212 100%);
background: linear-gradient(270deg, #0006 0%, #6a1212 100%);
}
.players > view > view {
min-height: 52rpx;
min-height: 25px;
width: calc(100% - 40px);
padding: 2px 20px;
margin-bottom: 5px;
@@ -176,7 +181,7 @@ const normalRounds = computed(() => {
align-items: center;
}
.players > view > view > image:first-child {
width: 135rpx;
width: 72px;
height: 20px;
}
.players > view > view > view:last-child {
@@ -186,7 +191,6 @@ const normalRounds = computed(() => {
font-size: 16px;
color: #fed847;
margin-right: 5px;
font-weight: 500;
}
.guide-row {
display: flex;
@@ -198,6 +202,6 @@ const normalRounds = computed(() => {
position: relative;
}
.guide-row > image {
width: 140rpx;
width: 18%;
}
</style>
+32 -85
View File
@@ -27,27 +27,19 @@ defineProps({
default: true,
},
});
const getMemberNicknameClass = (player = {}) => [
"member-nickname",
player.vip === true && player.sVip !== true ? "member-nickname--vip" : "",
player.sVip === true ? "member-nickname--svip" : "",
];
const isMember = (player = {}) => player.vip === true || player.sVip === true;
</script>
<template>
<view class="container">
<view class="container" :style="{ paddingTop: showHeader ? '5px' : '0' }">
<image
v-if="showHeader"
:src="`https://static.shelingxingqiu.com/shootmini/static/battle-header${players.length ? '-melee' : ''}.png`"
:src="`../static/battle-header${players.length ? '-melee' : ''}.png`"
mode="widthFix"
/>
<view
v-if="!players.length && blueTeam.length && redTeam.length"
class="players"
:style="{ paddingTop: showHeader ? '48rpx' : '0' }"
:style="{ paddingTop: showHeader ? '15px' : '0' }"
>
<view>
<view
@@ -59,16 +51,7 @@ const isMember = (player = {}) => player.vip === true || player.sVip === true;
}"
>
<Avatar :src="player.avatar" :rankLvl="player.rankLvl" :size="40" />
<view
v-if="isMember(player)"
:class="['player-name', ...getMemberNicknameClass(player)]"
>
<text class="member-nickname__text">{{ player.name }}</text>
<text v-if="player.sVip === true" class="member-nickname__shine">
{{ player.name }}
</text>
</view>
<text v-else class="player-name">{{ player.name }}</text>
<text class="player-name">{{ player.name }}</text>
</view>
<image
v-if="winner === 1"
@@ -87,64 +70,38 @@ const isMember = (player = {}) => player.vip === true || player.sVip === true;
}"
>
<Avatar :src="player.avatar" :rankLvl="player.rankLvl" :size="40" />
<view
v-if="isMember(player)"
:class="['player-name', ...getMemberNicknameClass(player)]"
>
<text class="member-nickname__text">{{ player.name }}</text>
<text v-if="player.sVip === true" class="member-nickname__shine">
{{ player.name }}
</text>
</view>
<text v-else class="player-name">{{ player.name }}</text>
<text class="player-name">{{ player.name }}</text>
</view>
<image
v-if="winner === 2"
v-if="winner === 0"
src="../static/winner-badge.png"
mode="widthFix"
class="right-winner-badge"
/>
</view>
</view>
<!-- 大乱斗玩家列表scroll-view 作为横向滚动容器 -->
<!-- 小程序中 scroll-view 不支持直接 display:flex需内部 wrapper view 承载 flex 布局 -->
<!-- 仅当玩家 >5 内容溢出宽度时才阻止冒泡防止与外层 swiper 切换 tab 的手势冲突 -->
<scroll-view
<view
v-if="players.length"
class="players-melee"
scroll-x
:show-scrollbar="false"
@touchmove="(e) => players.length > 5 && e.stopPropagation()"
:style="{ paddingTop: showHeader ? '15px' : '0' }"
>
<view class="players-melee-inner">
<view
v-for="(player, index) in players"
:key="index"
:style="{
backgroundColor: meleeAvatarColors[index],
width: `${Math.max(100 / players.length, 18)}vw`,
}"
>
<Avatar
:src="player.avatar"
:rankLvl="showRank ? undefined : player.rankLvl"
:size="40"
:rank="showRank ? index + 1 : 0"
/>
<view
v-if="isMember(player)"
:class="['player-name', ...getMemberNicknameClass(player)]"
>
<text class="member-nickname__text">{{ player.name }}</text>
<text v-if="player.sVip === true" class="member-nickname__shine">
{{ player.name }}
</text>
</view>
<text v-else class="player-name">{{ player.name }}</text>
</view>
<view
v-for="(player, index) in players"
:key="index"
:style="{
backgroundColor: meleeAvatarColors[index],
width: `${Math.max(100 / players.length, 18)}vw`,
}"
>
<Avatar
:src="player.avatar"
:rankLvl="showRank ? undefined : player.rankLvl"
:size="40"
:rank="showRank ? index + 1 : 0"
/>
<text class="player-name">{{ player.name }}</text>
</view>
</scroll-view>
</view>
</view>
</template>
@@ -152,15 +109,13 @@ const isMember = (player = {}) => player.vip === true || player.sVip === true;
.container {
width: 100%;
position: relative;
z-index: 999;
margin-bottom: 10px;
}
.container > image:first-child {
position: absolute;
width: 100%;
/* top: -5px; */
top: -5px;
z-index: 1;
pointer-events: none;
}
.players {
display: flex;
@@ -189,25 +144,24 @@ const isMember = (player = {}) => player.vip === true || player.sVip === true;
justify-content: center;
}
.players-melee {
display: flex;
height: 80px;
width: 100%;
white-space: nowrap;
overflow-x: auto;
}
/* 小程序 scroll-view 不支持直接 flex,通过内层 wrapper 承载横向排列 */
.players-melee-inner {
display: inline-flex;
min-width: 100%;
height: 100%;
flex-wrap: nowrap;
.players-melee::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.players-melee-inner > view {
.players-melee > view {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff9;
font-size: 12px;
/* padding-top: 7px; */
padding-top: 7px;
flex: 0 0 auto;
}
.player-name {
@@ -218,13 +172,6 @@ const isMember = (player = {}) => player.vip === true || player.sVip === true;
text-overflow: ellipsis;
text-align: center;
}
view.player-name {
justify-content: center;
}
.player-name .member-nickname__text,
.player-name .member-nickname__shine {
font-size: 12px;
}
.left-winner-badge {
position: absolute;
width: 50px;
+8 -37
View File
@@ -1,5 +1,4 @@
<script setup>
import { computed } from "vue";
import AppBackground from "@/components/AppBackground.vue";
import Avatar from "@/components/Avatar.vue";
import BowTarget from "@/components/BowTarget.vue";
@@ -9,9 +8,6 @@ import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
const isSVip = computed(() => user.value.sVip === true);
const isVip = computed(() => user.value.vip === true && user.value.sVip !== true);
const props = defineProps({
show: {
type: Boolean,
@@ -25,10 +21,6 @@ const props = defineProps({
type: Array,
default: () => [],
},
total: {
type: Number,
default: 0,
},
});
</script>
@@ -39,21 +31,7 @@ const props = defineProps({
<view>
<Avatar :src="user.avatar" :rankLvl="user.rankLvl" :size="45" />
<view>
<view
v-if="isVip || isSVip"
:class="[
'bow-data-user-name',
'member-nickname',
isVip ? 'member-nickname--vip' : '',
isSVip ? 'member-nickname--svip' : '',
]"
>
<text class="member-nickname__text">{{ user.nickName }}</text>
<text v-if="isSVip" class="member-nickname__shine">
{{ user.nickName }}
</text>
</view>
<text v-else>{{ user.nickName }}</text>
<text>{{ user.nickName }}</text>
<text>{{ user.lvlName }}</text>
</view>
</view>
@@ -62,21 +40,21 @@ const props = defineProps({
</view>
</view>
<view :style="{ width: '100%', marginBottom: '20px' }">
<BowTarget :scores="arrows" :isSvip="isSVip" />
<BowTarget :scores="arrows" />
</view>
<view class="desc">
<text>{{ arrows.length }}</text>
<text>支箭</text>
<text>{{ arrows.reduce((a, b) => a + (b.ring || 0), 0) }}</text>
<text>{{ arrows.reduce((a, b) => a + b.ring, 0) }}</text>
<text></text>
</view>
<ScorePanel
:completeEffect="false"
:rowCount="total === 12 ? 6 : 9"
:total="total"
:arrows="arrows"
:margin="total === 12 ? 4 : 1"
:fontSize="total === 12 ? 25 : 22"
:rowCount="arrows.length === 12 ? 6 : 9"
:total="arrows.length"
:scores="arrows.map((a) => a.ring)"
:margin="arrows.length === 12 ? 4 : 1"
:fontSize="arrows.length === 12 ? 25 : 22"
/>
</view>
</template>
@@ -113,13 +91,6 @@ const props = defineProps({
margin-left: 10px;
color: #fff;
}
.bow-data-user-name {
max-width: 300rpx;
}
.bow-data-user-name .member-nickname__text,
.bow-data-user-name .member-nickname__shine {
max-width: 300rpx;
}
.header > view:first-child > view:last-child > text:last-child {
font-size: 10px;
background-color: #5f51ff;
+7 -19
View File
@@ -1,28 +1,16 @@
<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import { getDeviceBatteryAPI } from "@/apis";
const power = ref(0);
const timer = ref(null);
onMounted(async () => {
const data = await getDeviceBatteryAPI();
power.value = data.battery;
timer.value = setInterval(async () => {
const data = await getDeviceBatteryAPI();
power.value = data.battery;
}, 1000 * 10);
});
onBeforeUnmount(() => {
clearInterval(timer.value);
defineProps({
power: {
type: Number,
default: 0,
},
});
</script>
<template>
<view class="container">
<view class="container" :style="{ opacity: power > 0 ? 1 : 0 }">
<image src="../static/b-power.png" mode="widthFix" />
<view>电量{{ power || 1 }}%</view>
<view>电量{{ power }}%</view>
</view>
</template>
-442
View File
@@ -1,442 +0,0 @@
<script setup>
import { computed, onBeforeUnmount, ref, watch } from "vue";
const props = defineProps({
shot: {
type: Object,
default: null,
},
playKey: {
type: [String, Number],
default: "",
},
targetRadius: {
type: Number,
default: 20,
},
targetWidth: {
type: Number,
default: 0,
},
targetHeight: {
type: Number,
default: 0,
},
targetLeft: {
type: Number,
default: 0,
},
targetTop: {
type: Number,
default: 0,
},
hitOffsetPx: {
type: Number,
default: 0,
},
});
const emit = defineEmits(["complete", "impact"]);
const phase = ref("idle");
const activePlayKey = ref("");
const animationKey = ref("");
const impactEmitted = ref(false);
const activeShot = ref(null);
let timers = [];
const isActive = computed(() => phase.value !== "idle");
const ARROW_IMPACT_MS = 340;
const COMPLETE_FALLBACK_MS = 980;
// 箭头尖端统一从屏幕中下区域出发,箭身自然延伸到屏幕底部之外。
const SHOT_START_VIEWPORT_Y_RATIO = 0.82;
const safeTargetRadius = computed(() => {
const radius = Number(props.targetRadius);
return Number.isFinite(radius) && radius > 0 ? radius : 20;
});
const safeTargetSize = computed(() => {
const width = Number(props.targetWidth);
const height = Number(props.targetHeight);
const left = Number(props.targetLeft);
const top = Number(props.targetTop);
return {
width: Number.isFinite(width) && width > 0 ? width : 0,
height: Number.isFinite(height) && height > 0 ? height : 0,
left: Number.isFinite(left) ? left : 0,
top: Number.isFinite(top) ? top : 0,
};
});
function getWindowSize() {
try {
const info =
typeof uni.getWindowInfo === "function"
? uni.getWindowInfo()
: uni.getSystemInfoSync();
const width = Number(info?.windowWidth);
const height = Number(info?.windowHeight);
return {
width: Number.isFinite(width) && width > 0 ? width : 0,
height: Number.isFinite(height) && height > 0 ? height : 0,
};
} catch {
return { width: 0, height: 0 };
}
}
function hasShotPoint(shot) {
const x = Number(shot?.x);
const y = Number(shot?.y);
return Number.isFinite(x) && Number.isFinite(y);
}
const effectiveShot = computed(() => activeShot.value || props.shot);
const shotPoint = computed(() => {
const x = Number(effectiveShot.value?.x);
const y = Number(effectiveShot.value?.y);
return {
x: Number.isFinite(x) ? x : 0,
y: Number.isFinite(y) ? y : 0,
};
});
const pointDirection = computed(() => {
const point = shotPoint.value;
const distance = Math.sqrt(point.x * point.x + point.y * point.y);
if (distance === 0) return null;
return {
x: point.x / distance,
y: point.y / distance,
};
});
const hitOffset = computed(() => {
const offset = Number(props.hitOffsetPx);
const safeOffset = Number.isFinite(offset) && offset > 0 ? offset : 0;
const direction = pointDirection.value;
return {
x: direction ? direction.x * safeOffset : 0,
y: direction ? -direction.y * safeOffset : 0,
};
});
const hitPercent = computed(() => {
const point = shotPoint.value;
const radius = safeTargetRadius.value;
const diameter = radius * 2;
return {
left: ((point.x + radius) / diameter) * 100,
top: ((radius - point.y) / diameter) * 100,
};
});
const flightPath = computed(() => {
const size = safeTargetSize.value;
const windowSize = getWindowSize();
const hasScreenCoordinates =
size.width > 0 &&
size.height > 0 &&
windowSize.width > 0 &&
windowSize.height > 0;
const startX = hasScreenCoordinates
? windowSize.width * 0.5 - size.left
: size.width * 0.5;
const startY = hasScreenCoordinates
? windowSize.height * SHOT_START_VIEWPORT_Y_RATIO - size.top
: size.height * 1.14;
const endX =
size.width * (hitPercent.value.left / 100) + hitOffset.value.x;
const endY =
size.height * (hitPercent.value.top / 100) + hitOffset.value.y;
const dx = endX - startX;
const dy = endY - startY;
return {
startX,
startY,
translateX: dx,
translateY: dy,
angle: Math.atan2(dx, -dy) * (180 / Math.PI),
};
});
function formatPxOffset(value) {
if (!value) return "";
const operator = value > 0 ? "+" : "-";
return ` ${operator} ${Math.abs(value)}px`;
}
function formatTargetPosition(percent, offset) {
const pxOffset = formatPxOffset(offset);
return pxOffset ? `calc(${percent}%${pxOffset})` : `${percent}%`;
}
const crackStyle = computed(() => ({
left: formatTargetPosition(hitPercent.value.left, hitOffset.value.x),
top: formatTargetPosition(hitPercent.value.top, hitOffset.value.y),
}));
function getTargetTranslate(percent) {
const absPercent = Math.abs(percent);
const operator = percent >= 0 ? "-" : "+";
return `calc(${percent}vw ${operator} ${absPercent * 0.5}px)`;
}
const arrowMoveStyle = computed(() => {
const size = safeTargetSize.value;
const path = flightPath.value;
let x = getTargetTranslate(hitPercent.value.left - 50);
let y = getTargetTranslate(hitPercent.value.top - 114);
if (size.width && size.height) {
x = `${path.translateX}px`;
y = `${path.translateY}px`;
}
return {
"--shot-start-x": size.width ? `${path.startX}px` : "50%",
"--shot-start-y": size.height ? `${path.startY}px` : "114%",
"--shot-tx": x,
"--shot-ty": y,
"--shot-angle": `${path.angle}deg`,
};
});
function clearTimers() {
timers.forEach((timer) => clearTimeout(timer));
timers = [];
}
function queueTimer(callback, delay) {
const timer = setTimeout(callback, delay);
timers.push(timer);
}
function emitImpactOnce(playKey) {
if (phase.value === "idle" || activePlayKey.value !== playKey || impactEmitted.value) return;
impactEmitted.value = true;
emit("impact");
}
function finish(playKey) {
if (phase.value === "idle" || activePlayKey.value !== playKey) return;
clearTimers();
phase.value = "idle";
activePlayKey.value = "";
activeShot.value = null;
emit("complete", playKey);
}
function play() {
if (!props.playKey || !props.shot || !props.shot.ring || !hasShotPoint(props.shot)) {
return;
}
clearTimers();
activePlayKey.value = props.playKey;
animationKey.value = `${props.playKey}`;
impactEmitted.value = false;
activeShot.value = { ...props.shot };
phase.value = "playing";
queueTimer(() => {
emitImpactOnce(activePlayKey.value);
}, ARROW_IMPACT_MS);
queueTimer(() => {
finish(activePlayKey.value);
}, COMPLETE_FALLBACK_MS);
}
function handleArrowAnimationEnd() {
emitImpactOnce(activePlayKey.value);
}
function handleCrackAnimationEnd() {
finish(activePlayKey.value);
}
watch(
() => props.playKey,
() => {
play();
},
{ immediate: true }
);
onBeforeUnmount(() => {
clearTimers();
});
</script>
<template>
<view
v-show="isActive"
:class="['shot-effect', `shot-effect--${phase}`]"
:style="arrowMoveStyle"
>
<view
:key="`arrow-${animationKey}`"
class="shot-arrow-track"
@animationend="handleArrowAnimationEnd"
>
<image
class="shot-arrow"
src="https://static.shelingxingqiu.com/shootmini/static/vip/svip-jian.png"
mode="heightFix"
/>
</view>
<view
:key="`flash-${animationKey}`"
class="shot-flash"
:style="crackStyle"
></view>
<view
:key="`crack-anchor-${animationKey}`"
class="shot-crack-anchor"
:style="crackStyle"
>
<image
:key="`crack-${animationKey}`"
class="shot-crack"
src="https://static.shelingxingqiu.com/shootmini/static/vip/svip-lie.png"
mode="aspectFit"
@animationend="handleCrackAnimationEnd"
/>
</view>
</view>
</template>
<style scoped lang="scss">
.shot-effect {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
pointer-events: none;
overflow: visible;
transform: translateZ(0);
}
.shot-arrow-track {
position: absolute;
left: var(--shot-start-x);
top: var(--shot-start-y);
width: 0;
height: 0;
opacity: 0;
transform: translate3d(0, 0, 0);
animation: none;
backface-visibility: hidden;
will-change: transform, opacity;
}
.shot-arrow {
position: absolute;
width: 248rpx;
height: 1186rpx;
left: 0;
top: 0;
opacity: 1;
transform-origin: 44.35% 3.04%;
transform: translate(-44.35%, -3.04%) rotate(var(--shot-angle));
backface-visibility: hidden;
will-change: transform;
}
.shot-effect--playing .shot-arrow-track {
animation: shot-arrow-fly 0.38s cubic-bezier(0.68, 0, 0.9, 0.62) forwards;
}
.shot-flash,
.shot-crack-anchor {
position: absolute;
transform: translate(-50%, -50%);
backface-visibility: hidden;
will-change: transform, opacity;
}
.shot-flash {
width: 86rpx;
height: 86rpx;
border-radius: 50%;
border: 3rpx solid rgba(255, 236, 166, 0.9);
opacity: 0;
animation: none;
}
.shot-crack-anchor {
width: 750rpx;
height: 750rpx;
}
.shot-crack {
width: 100%;
height: 100%;
opacity: 0;
transform-origin: center center;
animation: none;
will-change: transform, opacity;
}
.shot-effect--playing .shot-flash {
animation: shot-flash 0.42s ease-out 0.32s forwards;
}
.shot-effect--playing .shot-crack {
animation: shot-crack-hit 0.52s ease-out 0.34s forwards;
}
@keyframes shot-arrow-fly {
0% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
86% {
opacity: 1;
transform: translate3d(var(--shot-tx), var(--shot-ty), 0);
}
100% {
opacity: 0;
transform: translate3d(var(--shot-tx), var(--shot-ty), 0);
}
}
@keyframes shot-flash {
0% {
opacity: 0.95;
transform: translate(-50%, -50%) scale(0.2);
}
100% {
opacity: 0;
transform: translate(-50%, -50%) scale(1.9);
}
}
@keyframes shot-crack-hit {
0% {
opacity: 0;
transform: scale(0.55);
}
28% {
opacity: 1;
transform: scale(1.08);
}
56% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.18);
}
}
</style>
+115 -632
View File
@@ -1,18 +1,8 @@
<script setup>
import {
ref,
watch,
onMounted,
onBeforeUnmount,
computed,
nextTick,
getCurrentInstance,
} from "vue";
import PointSwitcher from "@/components/PointSwitcher.vue";
import BowShotEffect from "@/components/BowShotEffect.vue";
import { MESSAGETYPES, MESSAGETYPESV2 } from "@/constants";
import { simulShootAPI, laserAimAPI, laserCloseAPI } from "@/apis";
import { ref, watch, onMounted } from "vue";
import BowPower from "@/components/BowPower.vue";
import StartCountdown from "@/components/StartCountdown.vue";
import { simulShootAPI } from "@/apis";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
@@ -27,6 +17,14 @@ const props = defineProps({
type: Number,
default: 0,
},
avatar: {
type: String,
default: "",
},
power: {
type: Number,
default: 0,
},
scores: {
type: Array,
default: () => [],
@@ -35,517 +33,163 @@ const props = defineProps({
type: Array,
default: () => [],
},
isSvip: {
type: Boolean,
default: false,
},
mode: {
type: String,
default: "solo", // solo 单排,team 双排
},
missAsZero: {
type: Boolean,
default: false,
},
// start: {
// type: Boolean,
// default: false,
// },
stop: {
type: Boolean,
default: false,
},
targetRadius: {
type: Number,
default: 20,
},
hitRadiusPx: {
type: Number,
default: 2,
},
zoomHitRadiusPx: {
type: Number,
default: 5,
},
});
const pMode = ref(true);
const showsimul = ref(false);
const latestOne = ref(null);
const bluelatestOne = ref(null);
const prevScores = ref([]);
const prevBlueScores = ref([]);
const timer = ref(null);
const dirTimer = ref(null);
const angle = ref(null);
const circleColor = ref("");
const shotEffect = ref(null);
const hiddenRedLatestKey = ref("");
const hiddenBlueLatestKey = ref("");
const targetShaking = ref(false);
const targetRect = ref({ left: 0, top: 0, width: 0, height: 0 });
const shakeTimer = ref(null);
const instance = getCurrentInstance();
const ROUND_TIP_OFFSET_Y = -32;
const EXPERIENCE_TIP_OFFSET_Y = -68;
function getRoundText(shot) {
if (shot?.ringX) return "X环";
if (shot?.ring) return `${shot.ring}`;
return props.missAsZero ? "0环" : "未上靶";
}
function buildShotEffectKey(team, shot, index) {
return [
team,
index,
shot?.playerId ?? "",
shot?.x ?? "",
shot?.y ?? "",
shot?.ring ?? "",
shot?.ringX ? 1 : 0,
].join("-");
}
function hasShotPoint(shot) {
const x = Number(shot?.x);
const y = Number(shot?.y);
return Number.isFinite(x) && Number.isFinite(y);
}
function shouldPlayShotEffect(shot) {
return props.isSvip && !!shot && Number(shot.ring) > 0 && hasShotPoint(shot);
}
function clearTipTimer() {
if (timer.value) {
clearTimeout(timer.value);
timer.value = null;
}
}
function showShotTip(team, shot) {
clearTipTimer();
if (team === "red") {
latestOne.value = shot;
timer.value = setTimeout(() => {
latestOne.value = null;
timer.value = null;
}, 1000);
return;
}
bluelatestOne.value = shot;
timer.value = setTimeout(() => {
bluelatestOne.value = null;
timer.value = null;
}, 1000);
}
function triggerShotEffect(team, shot, index) {
const key = buildShotEffectKey(team, shot, index);
if (shotEffect.value?.team === "red") hiddenRedLatestKey.value = "";
if (shotEffect.value?.team === "blue") hiddenBlueLatestKey.value = "";
if (team === "red") {
latestOne.value = null;
hiddenRedLatestKey.value = key;
} else {
bluelatestOne.value = null;
hiddenBlueLatestKey.value = key;
}
shotEffect.value = { key, team, shot };
}
function completeShotEffect(key) {
if (!shotEffect.value || shotEffect.value.key !== key) return;
const { team, shot } = shotEffect.value;
if (team === "red") hiddenRedLatestKey.value = "";
if (team === "blue") hiddenBlueLatestKey.value = "";
shotEffect.value = null;
showShotTip(team, shot);
}
function shakeTarget() {
targetShaking.value = false;
if (shakeTimer.value) {
clearTimeout(shakeTimer.value);
shakeTimer.value = null;
}
nextTick(() => {
targetShaking.value = true;
shakeTimer.value = setTimeout(() => {
targetShaking.value = false;
shakeTimer.value = null;
}, 260);
});
}
function updateTargetRect() {
nextTick(() => {
const query = instance?.proxy
? uni.createSelectorQuery().in(instance.proxy)
: uni.createSelectorQuery();
query
.select(".target")
.boundingClientRect((rect) => {
const left = Number(rect?.left);
const top = Number(rect?.top);
const width = Number(rect?.width);
const height = Number(rect?.height);
if (
!Number.isFinite(left) ||
!Number.isFinite(top) ||
!Number.isFinite(width) ||
!Number.isFinite(height)
) {
return;
}
if (width <= 0 || height <= 0) return;
targetRect.value = { left, top, width, height };
})
.exec();
});
}
function handleWindowResize() {
updateTargetRect();
}
function shouldHideRedHit(index) {
return !!hiddenRedLatestKey.value && index === props.scores.length - 1;
}
function shouldHideBlueHit(index) {
return !!hiddenBlueLatestKey.value && index === props.blueScores.length - 1;
}
watch(
() => props.scores.length,
(newLen, oldLen) => {
if (newLen === oldLen + 1) {
const latestShot = props.scores[newLen - 1];
if (shouldPlayShotEffect(latestShot)) {
triggerShotEffect("red", latestShot, newLen - 1);
} else {
showShotTip("red", latestShot);
}
return;
}
if (newLen < oldLen) {
latestOne.value = null;
hiddenRedLatestKey.value = "";
if (shotEffect.value?.team === "red") shotEffect.value = null;
() => props.scores,
(newVal) => {
if (newVal.length - prevScores.value.length === 1) {
latestOne.value = newVal[newVal.length - 1];
if (timer.value) clearTimeout(timer.value);
timer.value = setTimeout(() => {
latestOne.value = null;
}, 1000);
}
prevScores.value = [...newVal];
},
{
deep: true,
}
);
watch(
() => props.blueScores.length,
(newLen, oldLen) => {
if (newLen === oldLen + 1) {
const latestShot = props.blueScores[newLen - 1];
if (shouldPlayShotEffect(latestShot)) {
triggerShotEffect("blue", latestShot, newLen - 1);
} else {
showShotTip("blue", latestShot);
}
return;
}
if (newLen < oldLen) {
bluelatestOne.value = null;
hiddenBlueLatestKey.value = "";
if (shotEffect.value?.team === "blue") shotEffect.value = null;
() => props.blueScores,
(newVal) => {
if (newVal.length - prevBlueScores.value.length === 1) {
bluelatestOne.value = newVal[newVal.length - 1];
if (timer.value) clearTimeout(timer.value);
timer.value = setTimeout(() => {
bluelatestOne.value = null;
}, 1000);
}
prevBlueScores.value = [...newVal];
},
{
deep: true,
}
);
const safeTargetRadius = computed(() => {
const radius = Number(props.targetRadius);
return Number.isFinite(radius) && radius > 0 ? radius : 20;
});
const currentHitRadiusPx = computed(() => {
const radius = Number(
pMode.value ? props.zoomHitRadiusPx : props.hitRadiusPx
);
return Number.isFinite(radius) && radius >= 0 ? radius : 0;
});
function getShotPoint(shot, fallbackCenter = false) {
const x = Number(shot?.x);
const y = Number(shot?.y);
if (Number.isFinite(x) && Number.isFinite(y)) return { x, y };
return fallbackCenter ? { x: 0, y: 0 } : null;
function calcRealX(num, offset = 3.4) {
const len = 20.4 + num;
return `calc(${(len / 40.8) * 100 - offset / 2}%)`;
}
function getPointDirection(point) {
if (!point) return null;
const distance = Math.sqrt(point.x * point.x + point.y * point.y);
if (distance === 0) return null;
return {
x: point.x / distance,
y: point.y / distance,
};
}
function formatPxOffset(value) {
if (!value) return "";
const operator = value > 0 ? "+" : "-";
return ` ${operator} ${Math.abs(value)}px`;
}
function formatTargetPosition(percent, offset) {
const pxOffset = formatPxOffset(offset);
return pxOffset ? `calc(${percent}%${pxOffset})` : `${percent}%`;
}
function getTargetPositionStyle(point, offsetPx = 0, extraOffset = {}) {
if (!point) return { display: "none" };
const radius = safeTargetRadius.value;
const diameter = radius * 2;
const direction = getPointDirection(point);
const xOffset = (direction ? direction.x * offsetPx : 0) + (extraOffset.x || 0);
const yOffset = (direction ? -direction.y * offsetPx : 0) + (extraOffset.y || 0);
const leftPercent = ((point.x + radius) / diameter) * 100;
const topPercent = ((radius - point.y) / diameter) * 100;
return {
left: formatTargetPosition(leftPercent, xOffset),
top: formatTargetPosition(topPercent, yOffset),
transform: "translate(-50%, -50%)",
};
}
function getHitStyle(shot) {
const radius = currentHitRadiusPx.value;
const point = getShotPoint(shot);
return {
...getTargetPositionStyle(point, radius),
width: `${radius * 2}px`,
height: `${radius * 2}px`,
};
}
function getSvipHitBgStyle(shot) {
const radius = currentHitRadiusPx.value;
const point = getShotPoint(shot);
return {
...getTargetPositionStyle(point, radius),
};
}
function getRoundTipStyle(shot) {
const point = getShotPoint(shot, true);
return getTargetPositionStyle(
point,
shot?.ring ? currentHitRadiusPx.value : 0,
{ y: ROUND_TIP_OFFSET_Y }
);
}
function getExperienceTipStyle(shot) {
const point = getShotPoint(shot, true);
return getTargetPositionStyle(
point,
shot?.ring ? currentHitRadiusPx.value : 0,
{ y: EXPERIENCE_TIP_OFFSET_Y }
);
function calcRealY(num, offset = 3.4) {
const len = num < 0 ? Math.abs(num) + 20.4 : 20.4 - num;
return `calc(${(len / 40.8) * 100 - offset / 2}%)`;
}
const simulShoot = async () => {
if (device.value.deviceId) await simulShootAPI(device.value.deviceId);
};
const simulShoot2 = async () => {
if (device.value.deviceId) {
const r1 = Math.random() > 0.5 ? 0.01 : 0.02;
await simulShootAPI(device.value.deviceId, r1, r1);
}
if (device.value.deviceId) await simulShootAPI(device.value.deviceId, 1, 1);
};
const openAim = async () => {
await laserAimAPI();
};
const closeAim = async () => {
await laserCloseAPI();
};
const env = computed(() => {
const accountInfo = uni.getAccountInfoSync();
return accountInfo.miniProgram.envVersion;
});
const arrowStyle = computed(() => {
return {
transform: `rotateX(180deg) translate(-50%, -50%) rotate(${
360 - angle.value
}deg) translateY(105%)`,
};
});
async function onReceiveMessage(message) {
if (Array.isArray(message)) return;
if (message.type === MESSAGETYPESV2.ShootResult && message.shootData) {
if (
message.shootData.playerId === user.value.id &&
!message.shootData.ring &&
message.shootData.angle >= 0
) {
angle.value = null;
setTimeout(() => {
if (props.scores[0]) {
circleColor.value =
message.shootData.playerId === props.scores[0].playerId
? "#ff4444"
: "#1840FF";
}
angle.value = message.shootData.angle;
}, 200);
}
}
}
onMounted(() => {
uni.$on("socket-inbox", onReceiveMessage);
updateTargetRect();
if (uni.onWindowResize) uni.onWindowResize(handleWindowResize);
});
onBeforeUnmount(() => {
if (timer.value) {
clearTimeout(timer.value);
timer.value = null;
}
if (dirTimer.value) {
clearTimeout(dirTimer.value);
dirTimer.value = null;
}
if (shakeTimer.value) {
clearTimeout(shakeTimer.value);
shakeTimer.value = null;
}
uni.$off("socket-inbox", onReceiveMessage);
if (uni.offWindowResize) uni.offWindowResize(handleWindowResize);
const accountInfo = uni.getAccountInfoSync();
const envVersion = accountInfo.miniProgram.envVersion;
if (envVersion !== "release") showsimul.value = true;
});
</script>
<template>
<view :class="['container', { 'container--effecting': shotEffect }]">
<view class="header" v-if="totalRound > 0">
<view class="container">
<view class="header" v-if="totalRound > 0 || power">
<text v-if="totalRound > 0" class="round-count">{{
(currentRound > totalRound ? totalRound : currentRound) +
"/" +
totalRound
}}</text>
<BowPower :power="power" />
</view>
<view :class="['target', { 'target--shake': targetShaking }]">
<view v-if="angle !== null" class="arrow-dir" :style="arrowStyle">
<view :style="{ background: circleColor }">
<image src="../static/dot-circle.png" mode="widthFix" />
</view>
</view>
<view class="target">
<view v-if="stop" class="stop-sign">中场休息</view>
<view
v-if="latestOne && latestOne.ring && user.id === latestOne.playerId"
v-if="latestOne && user.id === latestOne.playerId"
class="e-value fade-in-out"
:style="getExperienceTipStyle(latestOne)"
:style="{
left: calcRealX(latestOne.ring ? latestOne.x : 0, 20),
top: calcRealY(latestOne.ring ? latestOne.y : 0, 40),
}"
>
经验 +1
</view>
<view
v-if="latestOne"
class="round-tip fade-in-out"
:style="getRoundTipStyle(latestOne)"
>{{ getRoundText(latestOne) }}
</view>
<view
v-if="
bluelatestOne &&
bluelatestOne.ring &&
user.id === bluelatestOne.playerId
"
class="e-value fade-in-out"
:style="getExperienceTipStyle(bluelatestOne)"
>
经验 +1
</view>
<view
v-if="bluelatestOne"
class="round-tip fade-in-out"
:style="getRoundTipStyle(bluelatestOne)"
>{{ getRoundText(bluelatestOne) }}</view
:style="{
left: calcRealX(latestOne.ring ? latestOne.x : 0, 28),
top: calcRealY(latestOne.ring ? latestOne.y : 0, 28),
}"
>{{ latestOne.ring || "未上靶"
}}<text v-if="latestOne.ring"></text></view
>
<block v-for="(bow, index) in scores" :key="index">
<image
v-if="pMode && isSvip && bow.ring > 0 && !shouldHideRedHit(index)"
class="svip-hit-bg"
src="../static/vip/svip-xuan.png"
:style="getSvipHitBgStyle(bow)"
mode="aspectFit"
/>
<view
v-if="bow.ring > 0 && !shouldHideRedHit(index)"
:class="`hit ${pMode ? 'b' : 's'}-point ${
v-if="bow.ring > 0"
:class="`hit ${
index === scores.length - 1 && latestOne ? 'pump-in' : ''
}`"
:style="{
...getHitStyle(bow),
backgroundColor: mode === 'solo' ? '#00bf04' : '#FF0000',
left: calcRealX(bow.x),
top: calcRealY(bow.y),
backgroundColor:
index === scores.length - 1 &&
!blueScores.length &&
latestOne &&
mode !== 'team'
? 'green'
: '#ff4444',
}"
><text v-if="pMode">{{ index + 1 }}</text></view
><text>{{ index + 1 }}</text></view
>
</block>
<block v-for="(bow, index) in blueScores" :key="index">
<image
v-if="pMode && isSvip && bow.ring > 0 && !shouldHideBlueHit(index)"
class="svip-hit-bg"
src="../static/vip/svip-xuan.png"
:style="getSvipHitBgStyle(bow)"
mode="aspectFit"
/>
<view
v-if="bow.ring > 0 && !shouldHideBlueHit(index)"
:class="`hit ${pMode ? 'b' : 's'}-point ${
v-if="bow.ring > 0"
:class="`hit ${
index === blueScores.length - 1 && bluelatestOne ? 'pump-in' : ''
}`"
:style="{
...getHitStyle(bow),
backgroundColor: '#1840FF',
left: calcRealX(bow.x),
top: calcRealY(bow.y),
backgroundColor: 'blue',
}"
>
<text v-if="pMode">{{ index + 1 }}</text>
<text>{{ index + 1 }}</text>
</view>
</block>
<BowShotEffect
:shot="shotEffect && shotEffect.shot"
:playKey="shotEffect ? shotEffect.key : ''"
:targetRadius="safeTargetRadius"
:targetLeft="targetRect.left"
:targetTop="targetRect.top"
:targetWidth="targetRect.width"
:targetHeight="targetRect.height"
:hitOffsetPx="currentHitRadiusPx"
@impact="shakeTarget"
@complete="completeShotEffect"
/>
<image src="https://static.shelingxingqiu.com/shootmini/static/bow-target.png" mode="widthFix" />
<image src="../static/bow-target.png" mode="widthFix" />
</view>
<view class="footer">
<PointSwitcher
:onChange="(val) => (pMode = val)"
:style="{ zIndex: 999 }"
/>
<view v-if="avatar" class="footer">
<image :src="avatar" mode="widthFix" />
</view>
<view class="simul" v-if="env !== 'release'">
<view class="simul" v-if="showsimul">
<button @click="simulShoot">模拟</button>
<button @click="simulShoot2">射箭</button>
<button @click="openAim">开瞄</button>
<button @click="closeAim">关瞄</button>
</view>
<!-- <text :style="{ color: '#fff', wordBreak: 'break-all' }">{{
scores.length ? scores[scores.length - 1] : ""
}}</text> -->
<!-- <StartCountdown :start="startCount" /> -->
</view>
</template>
@@ -555,25 +199,17 @@ onBeforeUnmount(() => {
height: calc(100vw - 30px);
padding: 0px 15px;
position: relative;
z-index: 3;
}
.container--effecting {
z-index: 10000;
}
.target {
position: relative;
margin: 10px;
width: calc(100% - 20px);
height: calc(100% - 20px);
z-index: 1;
pointer-events: none;
transform-origin: center center;
}
.target--shake {
animation: target-shake 0.26s ease-out;
}
.e-value {
position: absolute;
/* top: 30%;
left: 60%; */
background-color: #0006;
color: #fff;
font-size: 12px;
@@ -585,6 +221,8 @@ onBeforeUnmount(() => {
}
.round-tip {
position: absolute;
/* top: 38%; */
/* left: 60%; */
color: #fff;
font-size: 30px;
font-weight: bold;
@@ -596,119 +234,34 @@ onBeforeUnmount(() => {
font-size: 24px;
margin-left: 5px;
}
@keyframes target-tip-fade-in-out {
0% {
transform: translate(-50%, -50%) translateY(20px);
opacity: 0;
}
30% {
transform: translate(-50%, -50%);
opacity: 1;
}
80% {
transform: translate(-50%, -50%);
opacity: 1;
}
100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
.round-tip.fade-in-out,
.e-value.fade-in-out {
animation: target-tip-fade-in-out 1.2s ease forwards;
}
.target > image:last-child {
width: 100%;
height: 100%;
}
.svip-hit-bg {
position: absolute;
width: 48rpx;
height: 48rpx;
z-index: 1;
pointer-events: none;
transform-origin: center center;
animation: svip-hit-xuan 1.2s linear infinite;
}
.hit {
position: absolute;
width: 3.4%;
height: 3.4%;
min-width: 3.4%;
min-height: 3.4%;
border-radius: 50%;
z-index: 2;
color: #fff;
transition: transform 0.2s ease, opacity 0.2s ease;
box-sizing: border-box;
}
.b-point {
border: 1px solid #fff;
z-index: 2;
z-index: 1;
color: #fff;
font-size: 2.1vw;
box-sizing: border-box;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
display: flex;
justify-content: center;
align-items: center;
/* transform: translate(-50%, -50%); */
}
.b-point > text {
font-size: 16rpx;
color: #fff;
font-family: "DINCondensed";
/* text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);*/
margin-top: 2rpx;
}
@keyframes svip-hit-xuan {
0% {
opacity: 0.9;
transform: translate(-50%, -50%) rotate(0deg) scale(0.92);
}
50% {
opacity: 1;
transform: translate(-50%, -50%) rotate(180deg) scale(1.08);
}
100% {
opacity: 0.9;
transform: translate(-50%, -50%) rotate(360deg) scale(0.92);
}
}
@keyframes target-pump-in {
from {
transform: translate(-50%, -50%) scale(2);
}
to {
transform: translate(-50%, -50%) scale(1);
}
}
@keyframes target-shake {
0% {
transform: translate(0, 0);
}
14% {
transform: translate(-20rpx, 8rpx);
}
28% {
transform: translate(16rpx, -8rpx);
}
44% {
transform: translate(-12rpx, 6rpx);
}
64% {
transform: translate(8rpx, -4rpx);
}
82% {
transform: translate(-4rpx, 2rpx);
}
100% {
transform: translate(0, 0);
}
}
.hit.pump-in {
animation: target-pump-in 0.3s ease-out forwards;
transform-origin: center center;
.hit > text {
transform: scaleX(0.7) translateY(-0.5px);
display: block;
font-weight: bold;
width: 100%;
text-align: center;
}
.header {
width: 100%;
@@ -732,7 +285,6 @@ onBeforeUnmount(() => {
padding: 0 10px;
display: flex;
margin-top: -40px;
justify-content: flex-end;
}
.footer > image {
width: 40px;
@@ -743,10 +295,9 @@ onBeforeUnmount(() => {
}
.simul {
position: absolute;
top: 0;
bottom: 40px;
right: 20px;
margin-left: 20px;
z-index: 999;
}
.simul > button {
color: #fff;
@@ -763,72 +314,4 @@ onBeforeUnmount(() => {
z-index: 99;
font-weight: bold;
}
.arrow-dir {
position: absolute;
width: 100%;
height: 52%;
left: 50%;
bottom: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.arrow-dir > view {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
}
.arrow-dir > view > image {
width: 100rpx;
height: 100rpx;
transform: translate(-30%, -30%);
}
@keyframes spring-in {
0% {
transform: scale(2);
opacity: 0.4;
}
15% {
transform: scale(3);
opacity: 1;
}
30% {
transform: scale(2);
opacity: 0.4;
}
45% {
transform: scale(3);
opacity: 1;
}
60% {
transform: scale(2);
opacity: 0.4;
}
75% {
transform: scale(3);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0;
}
}
@keyframes disappear {
0% {
opacity: 1;
}
75% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.arrow-dir > view {
animation: disappear 3s ease forwards;
}
.arrow-dir > view > image {
animation: spring-in 3s ease forwards;
width: 100%;
}
</style>
-111
View File
@@ -1,111 +0,0 @@
<script setup>
import { ref, computed } from "vue";
const props = defineProps({
diameter: {
type: Number,
default: 90,
},
});
const side = computed(() => {
return props.diameter / 10;
});
const rings = ["X", "10", "9", "8", "7", "6"];
</script>
<template>
<view
class="container circle"
:style="{
width: diameter + 'vw',
height: diameter + 'vw',
background: '#00BAE9',
}"
>
<view
class="circle"
:style="{
background: '#FF5665',
width: side * 8 + 'vw',
height: side * 8 + 'vw',
}"
>
<view class="rings" :style="{ transform: `translateX(-${side}vw)` }">
<text
v-for="(ring, index) in rings"
:key="ring"
:style="{
width: side + 'vw',
transform: `translateX(${
index === 0 ? side / 2 : index === 1 ? side / 4.5 : 0
}vw)`,
}"
>{{ ring }}</text
>
</view>
<view
class="circle"
:style="{
background: '#FF5665',
width: side * 6 + 'vw',
height: side * 6 + 'vw',
}"
>
<view
class="circle"
:style="{
background: '#FDDC61',
width: side * 4 + 'vw',
height: side * 4 + 'vw',
}"
>
<view
class="circle"
:style="{
background: '#FDDC61',
width: side * 2 + 'vw',
height: side * 2 + 'vw',
}"
>
<view
class="circle"
:style="{
background: '#FDDC61',
width: side + 'vw',
height: side + 'vw',
}"
>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<style scoped>
.container {
position: relative;
}
.rings {
position: absolute;
display: flex;
align-items: center;
left: 50%;
}
.rings > text {
font-size: 24rpx;
color: #333;
text-align: center;
}
.circle {
border: 1rpx solid #3e3e3e66;
box-sizing: border-box;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
</style>
+63 -147
View File
@@ -1,6 +1,6 @@
<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import { getElementRect, calcRing, capsuleHeight } from "@/util";
import { ref, onMounted } from "vue";
import { getElementRect, calcRing } from "@/util";
const props = defineProps({
id: {
@@ -19,15 +19,18 @@ const props = defineProps({
type: Function,
default: null,
},
editMode: {
type: Boolean,
default: true,
},
});
const rect = ref({});
const arrow = ref(null);
const isDragging = ref(false);
const dragStartPos = ref({ x: 0, y: 0 });
const capsuleHeight = ref(0);
const scale = ref(1);
const scrollTop = ref(0);
const selected = ref(null);
let lastMoveTime = 0;
// 点击靶纸创建新的点
@@ -40,33 +43,19 @@ const onClick = async (e) => {
return;
}
if (props.id === 7 || props.id === 9) {
if (
e.detail.x < rect.value.width * 0.2 ||
e.detail.x > rect.value.width * 0.8
)
return;
// 放大并通过滚动将点击位置置于视窗中心
scale.value = 1.4;
const viewportH = rect.value.width; // 容器高度等于宽度(100vw
const contentH = scale.value * rect.value.width; // 内容高度
const clickYInContainer = e.detail.y - rect.value.top;
let target = clickYInContainer * scale.value - viewportH / 2;
target = Math.max(0, Math.min(contentH - viewportH, target));
setTimeout(() => {
scrollTop.value = target > 180 ? target + 10 : target;
}, 200);
scale.value = 1.5;
}
const newArrow = {
x: (e.detail.x - 6) * scale.value,
y: (e.detail.y - rect.value.top - capsuleHeight - 6) * scale.value,
y: (e.detail.y - rect.value.top - capsuleHeight.value - 6) * scale.value,
};
const side = rect.value.width;
newArrow.ring = calcRing(
props.id,
newArrow.x / scale.value - side * 0.05,
newArrow.y / scale.value - side * 0.05,
side * 0.9
newArrow.x / scale.value - rect.value.width * 0.05,
newArrow.y / scale.value - rect.value.width * 0.05,
rect.value.width * 0.9
);
arrow.value = {
...newArrow,
@@ -86,14 +75,12 @@ const confirmAdd = () => {
}
arrow.value = null;
scale.value = 1;
scrollTop.value = 0;
};
// 删除箭矢
const deleteArrow = () => {
arrow.value = null;
scale.value = 1;
scrollTop.value = 0;
};
// 开始拖拽 - 同样修复坐标获取
@@ -128,9 +115,9 @@ const onDrag = async (e) => {
);
arrow.value.ring = calcRing(
props.id,
arrow.value.x / scale.value - side * 0.05,
arrow.value.y / scale.value - side * 0.05,
side * 0.9
arrow.value.x / scale.value - rect.value.width * 0.05,
arrow.value.y / scale.value - rect.value.width * 0.05,
rect.value.width * 0.9
);
arrow.value.x = arrow.value.x / side;
@@ -147,63 +134,27 @@ const endDrag = (e) => {
const getNewPos = () => {
if (props.id === 7 || props.id === 9) {
if (arrow.value.y >= 1.33)
if (arrow.value.y > 1.4)
return { left: "-12px", bottom: "calc(50% - 12px)" };
} else {
if (arrow.value.y > 0.88) {
if (arrow.value.x < 0.05) {
return { left: "calc(100% - 12px)", bottom: "calc(100% - 12px)" };
}
return { left: "-12px", bottom: "calc(50% - 12px)" };
}
}
return { left: "calc(50% - 12px)", bottom: "-12px" };
};
const setEditArrow = (data) => {
selected.value = data;
// if (data === null) {
// arrow.value = null;
// scale.value = 1;
// scrollTop.value = 0;
// return;
// }
// if (props.id === 7 || props.id === 9) {
// scale.value = 1.4;
// const viewportH = rect.value.width; // 容器高度等于宽度(100vw)
// const contentH = scale.value * rect.value.width; // 内容高度
// const clickYInContainer = contentH * data.y - rect.value.top;
// let target = clickYInContainer * scale.value - viewportH / 2;
// target = Math.max(0, Math.min(contentH - viewportH, target));
// setTimeout(() => {
// scrollTop.value = target > 180 ? target + 10 : target;
// }, 200);
// }
// arrow.value = {
// ...data,
// x: data.x * scale.value,
// y: data.y * scale.value,
// };
};
onMounted(async () => {
const menuBtnInfo = uni.getMenuButtonBoundingClientRect();
capsuleHeight.value = menuBtnInfo.top - 9;
const result = await getElementRect(".container");
rect.value = result;
uni.$on("set-edit-arrow", setEditArrow);
});
onBeforeUnmount(() => {
uni.$off("set-edit-arrow", setEditArrow);
});
</script>
<template>
<scroll-view
:scroll-y="scale > 1"
scroll-with-animation
:scroll-top="scrollTop"
:show-scrollbar="false"
:enhanced="true"
<view
:style="{ overflowY: editMode ? 'auto' : 'hidden' }"
class="container"
@tap="onClick"
@touchmove="onDrag"
@@ -214,16 +165,16 @@ onBeforeUnmount(() => {
:style="{
width: scale * 100 + 'vw',
height: scale * 100 + 'vw',
transform: `translateX(${(100 - scale * 100) / 2}vw)`,
transform: `translate(${(100 - scale * 100) / 2}vw,${
(100 - scale * 100) / 2
}vw) translateY(${scale > 1 ? 16.7 : 0}%)`,
}"
>
<image :src="src" mode="widthFix" />
<view
v-for="(arrow, index) in arrows"
:key="index"
:class="`arrow-point ${
selected !== null && index === selected ? 'selected-arrow-point' : ''
}`"
class="arrow-point"
:style="{
left: (arrow.x !== undefined ? arrow.x : 0) * 100 + '%',
top: (arrow.y !== undefined ? arrow.y : 0) * 100 + '%',
@@ -232,6 +183,9 @@ onBeforeUnmount(() => {
<view
v-if="arrow.x !== undefined && arrow.y !== undefined"
class="point"
:style="{
transform: props.id === 7 || props.id === 9 ? 'scale(0.7)' : '',
}"
>
<text>{{ index + 1 }}</text>
</view>
@@ -245,44 +199,36 @@ onBeforeUnmount(() => {
:x="arrow ? rect.width * arrow.x : 0"
:y="arrow ? rect.width * arrow.y : 0"
>
<view
class="point"
:style="{ minWidth: 10 * scale + 'px', minHeight: 10 * scale + 'px' }"
>
<view v-if="arrow" class="edit-buttons" @touchstart.stop>
<view class="edit-btn-text">
<text>{{ arrow.ring === 0 ? "M" : arrow.ring }}</text>
<text
v-if="arrow.ring > 0"
:style="{
fontSize: '16px',
marginLeft: '2px',
}"
>环</text
>
</view>
<view
class="edit-btn confirm-btn"
@touchstart.stop="confirmAdd"
:style="{ ...getNewPos() }"
<view class="point"> </view>
<view v-if="arrow" class="edit-buttons" @touchstart.stop>
<view class="edit-btn-text">
<text>{{ arrow.ring === 0 ? "M" : arrow.ring }}</text>
<text
v-if="arrow.ring > 0"
:style="{
fontSize: '16px',
marginLeft: '2px',
}"
>points</text
>
<image src="../static/arrow-edit-save.png" mode="widthFix" />
</view>
<view class="edit-btn delete-btn" @touchstart.stop="deleteArrow">
<image src="../static/arrow-edit-delete.png" mode="widthFix" />
</view>
<view
class="edit-btn drag-btn"
@touchstart.stop="startDrag($event)"
>
<image src="../static/arrow-edit-move.png" mode="widthFix" />
</view>
</view>
<view
class="edit-btn confirm-btn"
@touchstart.stop="confirmAdd"
:style="{ ...getNewPos() }"
>
<image src="../static/arrow-edit-save.png" mode="widthFix" />
</view>
<view class="edit-btn delete-btn" @touchstart.stop="deleteArrow">
<image src="../static/arrow-edit-delete.png" mode="widthFix" />
</view>
<view class="edit-btn drag-btn" @touchstart.stop="startDrag($event)">
<image src="../static/arrow-edit-move.png" mode="widthFix" />
</view>
</view>
</movable-view>
<!-- <view class="test-view"></view> -->
</movable-area>
</scroll-view>
</view>
</template>
<style scoped>
@@ -322,35 +268,31 @@ onBeforeUnmount(() => {
.arrow-point {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.point {
min-width: 10px;
min-height: 10px;
min-width: 12px;
min-height: 12px;
border-radius: 50%;
border: 1px solid #fff;
color: #fff;
font-size: 8px;
text-align: center;
line-height: 10px;
box-sizing: border-box;
background-color: #00bf04;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
background-color: #ff4444;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
transition: all 0.1s linear;
position: relative;
transform: translate(-50%, -50%);
}
.point > text {
transform: scaleX(0.7);
display: block;
font-size: 16rpx;
line-height: 10px;
position: absolute;
top: 50%;
left: 50%;
font-family: "DINCondensed", "PingFang SC", "Helvetica Neue", Arial,
sans-serif;
transform: translate(-50%, -50%);
margin-top: 1px;
font-weight: bold;
}
.edit-buttons {
@@ -369,6 +311,7 @@ onBeforeUnmount(() => {
width: 100%;
display: flex;
justify-content: center;
/* margin-left: 10px; */
}
.edit-btn-text > text {
@@ -406,31 +349,4 @@ onBeforeUnmount(() => {
right: -12px;
bottom: -12px;
}
.test-view {
position: absolute;
top: 29px;
left: 138px;
width: 115px;
height: 115px;
background-color: #ff000055;
}
.selected-arrow-point .point {
background: linear-gradient(180deg, #ffdaa6 0%, #e9a333 100%) !important;
box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.18);
animation: duang 0.35s ease-out;
}
@keyframes duang {
0% {
transform: translate(-50%, -50%) scale(0.7);
}
45% {
transform: translate(-50%, -50%) scale(1.4);
}
70% {
transform: translate(-50%, -50%) scale(0.9);
}
100% {
transform: translate(-50%, -50%) scale(1);
}
}
</style>
+4 -4
View File
@@ -26,14 +26,14 @@ const props = defineProps({
background-size: contain;
background-repeat: no-repeat;
background-position: center;
font-size: 24rpx;
font-size: 13px;
}
.normal {
background-image: url("../static/bubble-tip.png");
width: 157rpx;
width: 190rpx;
height: 105rpx;
padding-top: 10px;
padding-left: 30rpx;
padding-top: 5px;
padding-left: 49rpx;
}
.normal2 {
background-image: url("../static/bubble-tip4.png");
+63 -162
View File
@@ -1,13 +1,12 @@
<script setup>
import { ref } from "vue";
import { ref, onMounted } from "vue";
import { onShow } from "@dcloudio/uni-app";
import AppBackground from "@/components/AppBackground.vue";
import Header from "@/components/Header.vue";
import ScreenHint from "@/components/ScreenHint.vue";
import BackToGame from "@/components/BackToGame.vue";
import {laserAimAPI, getBattleAPI, matchGameAPI} from "@/apis";
import { capsuleHeight, debounce } from "@/util";
import { returnToBattle } from "@/utils/matchReturn";
import { getCurrentGameAPI } from "@/apis";
import { debounce } from "@/util";
const props = defineProps({
title: {
type: String,
@@ -21,13 +20,9 @@ const props = defineProps({
type: Function,
default: null,
},
scroll: {
type: Boolean,
default: true,
},
usePageScroll: {
type: Boolean,
default: false,
overflow: {
type: String,
default: "auto",
},
isHome: {
type: Boolean,
@@ -45,30 +40,10 @@ const props = defineProps({
type: Boolean,
default: true,
},
headerClass: {
type: String,
default: "",
},
titleStyle: {
type: [String, Object, Array],
default: () => ({}),
},
showBottom: {
type: Boolean,
default: true,
},
loading: {
type: Boolean,
default: false,
},
loadingText: {
type: String,
default: "",
},
});
const isIOS = uni.getDeviceInfo().osName === "ios";
const showHint = ref(false);
const hintType = ref(0);
const capsuleHeight = ref(0);
const isLoading = ref(false);
const showGlobalHint = (type) => {
@@ -80,32 +55,53 @@ const hideGlobalHint = () => {
showHint.value = false;
};
onMounted(() => {
const menuBtnInfo = uni.getMenuButtonBoundingClientRect();
capsuleHeight.value = menuBtnInfo.top - 9;
});
onShow(() => {
uni.$showHint = showGlobalHint;
uni.$hideHint = hideGlobalHint;
showHint.value = false;
});
const navigateTo = (url) =>
new Promise((resolve, reject) => {
uni.navigateTo({
url,
success: resolve,
fail: reject,
});
});
const backToGame = debounce(async () => {
if (isLoading.value) return; // 防止重复点击
try {
isLoading.value = true;
const result = await getBattleAPI();
if (result && result.matchId) {
await returnToBattle(result, navigateTo);
// 设置请求超时
const timeoutPromise = new Promise((_, reject) => {
setTimeout(() => reject(new Error('请求超时')), 10000); // 10秒超时
});
const result = await Promise.race([
getCurrentGameAPI(),
timeoutPromise
]);
// 处理返回结果
if (result && result.gameId) {
// 跳转到游戏页面
uni.navigateTo({
url: `/pages/battle-room?gameId=${result.gameId}`
});
} else {
uni.showToast({
title: '没有进行中的对局',
icon: 'none'
});
}
showHint.value = false;
} catch (error) {
console.error("获取当前游戏失败:", error);
console.error('获取当前游戏失败:', error);
uni.showToast({
title: error.message || '网络请求失败,请重试',
icon: 'none'
});
} finally {
isLoading.value = false;
}
@@ -114,17 +110,6 @@ const backToGame = debounce(async () => {
const goBack = () => {
uni.navigateBack();
};
const cancelMatching = async () => {
uni.$emit("cancelMatching");
}
const goCalibration = async () => {
await laserAimAPI();
uni.navigateTo({
url: "/pages/calibration",
});
};
</script>
<template>
@@ -132,45 +117,19 @@ const goCalibration = async () => {
<AppBackground :type="bgType" :bgColor="bgColor" />
<Header
v-if="!isHome"
:class="headerClass"
:title="title"
:onBack="onBack"
:whiteBackArrow="whiteBackArrow"
:titleStyle="titleStyle"
:style="
usePageScroll
? {
position: 'sticky',
top: capsuleHeight + 'px',
zIndex: 10,
}
: undefined
"
/>
<BackToGame v-if="showBackToGame" />
<view v-if="usePageScroll">
<slot></slot>
</view>
<scroll-view
v-else
:scroll-y="scroll"
:enhanced="true"
:bounces="false"
:show-scrollbar="false"
<view
class="content"
:style="{
height: `calc(100vh - ${capsuleHeight + (isHome ? 0 : 50)}px - ${
$slots.bottom && showBottom ? (isIOS ? '75px' : '65px') : '0px'
})`,
height: `calc(100vh - ${capsuleHeight + (isHome ? 0 : 50)}px)`,
overflow,
}"
>
<slot></slot>
</scroll-view>
<view
class="bottom-part"
v-if="$slots.bottom && showBottom"
:style="{ height: isIOS ? '65px' : '55px', paddingTop: '10px' }"
>
<slot name="bottom"></slot>
</view>
<ScreenHint :show="showHint">
<view v-if="hintType === 1" class="tip-content">
@@ -180,8 +139,12 @@ const goCalibration = async () => {
<button hover-class="none" @click="() => (showHint = false)">
不进入
</button>
<button hover-class="none" @click="backToGame" :disabled="isLoading">
{{ isLoading ? "加载中..." : "进入" }}
<button
hover-class="none"
@click="backToGame"
:disabled="isLoading"
>
{{ isLoading ? '加载中...' : '进入' }}
</button>
</view>
</view>
@@ -201,35 +164,24 @@ const goCalibration = async () => {
<button hover-class="none" @click="() => (showHint = false)">
取消
</button>
<button hover-class="none" @click="$clickSound(cancelMatching)">确认</button>
</view>
</view>
<view v-if="hintType === 4" class="tip-content">
<text>完成智能弓校准即可解锁全部功能</text>
<view>
<button hover-class="none" @click="() => (showHint = false)">
取消
</button>
<button hover-class="none" @click="goCalibration">去校准</button>
<button hover-class="none" @click="goBack">确认</button>
</view>
</view>
</ScreenHint>
<view v-if="loading" class="audio-progress">
<image
src="https://static.shelingxingqiu.com/attachment/2025-11-26/deihtj15xjwcz3c1tx.png"
mode="widthFix"
/>
<view>
<view :style="{ width: '100%' }"></view>
</view>
<view>
<text>{{ loadingText || "加载中..." }}</text>
</view>
</view>
</view>
</template>
<style scoped>
.content {
width: 100vw;
height: 100vh;
overflow-x: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
overflow-x: hidden;
}
.tip-content {
flex-direction: column;
display: flex;
@@ -267,55 +219,4 @@ const goCalibration = async () => {
color: #666;
opacity: 0.6;
}
.audio-progress {
z-index: 999;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background: rgb(0 0 0 / 0.8);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.audio-progress > image:nth-child(1) {
width: 140rpx;
height: 150rpx;
margin-bottom: 20rpx;
}
.audio-progress > view:nth-child(2) {
width: 380rpx;
height: 6rpx;
background: #595959;
border-radius: 4rpx;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}
.audio-progress > view:nth-child(2) > view {
width: 100%;
min-height: 6rpx;
background: #ffe431;
border-radius: 4rpx;
}
.audio-progress > view:nth-child(3) {
display: flex;
align-items: center;
justify-content: center;
}
.audio-progress > view:nth-child(3) > text {
font-size: 22rpx;
color: #a2a2a2;
text-align: center;
line-height: 32rpx;
}
</style>
+92 -117
View File
@@ -1,14 +1,7 @@
<script setup>
import { ref } from "vue";
import SButton from "@/components/SButton.vue";
import { joinRoomAPI, createRoomAPI } from "@/apis";
import { debounce } from "@/util";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user, game } = storeToRefs(store);
import { joinRoomAPI, createRoomAPI, isGamingAPI } from "@/apis";
const props = defineProps({
onConfirm: {
@@ -17,107 +10,96 @@ const props = defineProps({
},
});
/** 对战模式:0=未选 1=1v1 2=乱斗 3=2v2 4=3v3 */
const battleMode = ref(0);
/** 靶纸尺寸:0=未选 1=20cm 2=40cm */
const targetMode = ref(0);
const battleMode = ref(1);
const step = ref(1);
const loading = ref(false);
const roomNumber = ref("");
const createRoom = debounce(async () => {
// 校验必填项:对战模式与靶纸均必须选择
if (!battleMode.value || !targetMode.value) {
uni.showToast({ title: '请完善创建信息', icon: 'none' });
return;
}
if (game.value.inBattle) {
const createRoom = async () => {
const isGaming = await isGamingAPI();
if (isGaming) {
uni.$showHint(1);
return;
}
if (loading.value === true) return;
loading.value = true;
let keepLoading = false;
let size = 2;
if (battleMode.value === 2) size = 10;
if (battleMode.value === 3) size = 4;
if (battleMode.value === 4) size = 6;
try {
const result = await createRoomAPI(
battleMode.value === 2 ? 2 : 1,
battleMode.value === 2 ? 10 : size,
targetMode.value*20,
);
if (result.number) {
props.onConfirm();
await joinRoomAPI(result.number);
keepLoading = true;
uni.navigateTo({
url: "/pages/battle-room?roomNumber=" + result.number + "&target=" + targetMode.value,
fail: () => {
loading.value = false;
},
});
}
} catch (error) {
console.log(error);
} finally {
if (!keepLoading) loading.value = false;
}
});
const result = await createRoomAPI(
battleMode.value === 2 ? 2 : 1,
battleMode.value === 2 ? 10 : size
);
if (result.number) roomNumber.value = result.number;
step.value = 2;
loading.value = false;
};
const enterRoom = async () => {
step.value = 1;
props.onConfirm();
await joinRoomAPI(roomNumber.value);
uni.navigateTo({
url: `/pages/battle-room?roomNumber=${roomNumber.value}`,
});
};
const setClipboardData = () => {
uni.setClipboardData({
data: roomNumber.value,
success() {
uni.showToast({ title: "复制成功" });
},
});
};
</script>
<template>
<view class="container">
<view class="target-options-header">
<view class="target-options-header-line-left"></view>
<image class="target-options-header-title-img" src="https://static.shelingxingqiu.com/shootmini/static/choose-battle-mode.png" mode="widthFix" />
<view class="target-options-header-line-right"></view>
</view>
<view class="create-options">
<image
v-if="step === 1"
src="../static/choose-battle-mode.png"
mode="widthFix"
/>
<view v-if="step === 1" class="create-options">
<view
:class="{ 'battle-btn': true, 'battle-choosen': battleMode === 1 }"
@click="() => (battleMode = 1)"
>
<text>对抗模式1V1</text>
</view>
<view
:class="{ 'battle-btn': true, 'battle-choosen': battleMode === 2 }"
@click="() => (battleMode = 2)"
>
<text>乱斗模式3-10</text>
</view>
<view
:class="{ 'battle-btn': true, 'battle-choosen': battleMode === 3 }"
@click="() => (battleMode = 3)"
>
<text>对抗模式2V2</text>
<!-- <text>敬请期待</text> -->
</view>
<view
:class="{ 'battle-btn': true, 'battle-choosen': battleMode === 4 }"
@click="() => (battleMode = 4)"
>
<text>对抗模式3V3</text>
</view>
<view
:class="{ 'battle-btn': true, 'battle-choosen': battleMode === 2 }"
@click="() => (battleMode = 2)"
>
<text>乱斗模式3-10</text>
<!-- <text>敬请期待</text> -->
</view>
</view>
<view class="target-options-header">
<view class="target-options-header-line-left"></view>
<view class="target-options-header-title">选择靶纸</view>
<view class="target-options-header-line-right"></view>
</view>
<view class="target-options">
<view
:class="{ 'battle-btn': true, 'battle-choosen': targetMode === 1 }"
@click="() => (targetMode = 1)"
>
<text>20厘米全环靶</text>
<SButton v-if="step === 1" :onClick="createRoom">下一步</SButton>
<view v-if="step === 2" class="room-info">
<view>
<text>房间号</text>
<text>{{ roomNumber }}</text>
</view>
<view
:class="{ 'battle-btn': true, 'battle-choosen': targetMode === 2 }"
@click="() => (targetMode = 2)"
<view class="copy-room-number" @click="setClipboardData"
>复制房间信息邀请朋友进入</view
>
<text>40厘米全环靶</text>
</view>
<SButton width="70vw" :onClick="enterRoom">进入房间</SButton>
<text>30分钟无人进入则房间无效</text>
</view>
<SButton :disabled="loading" :onClick="() => { $clickSound(); return createRoom(); }">创建房间</SButton>
</view>
</template>
@@ -128,7 +110,6 @@ const createRoom = debounce(async () => {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 44rpx;
}
.container > image:first-child {
width: 45%;
@@ -143,50 +124,6 @@ const createRoom = debounce(async () => {
justify-content: center;
margin-bottom: 15px;
}
.target-options-header{
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24rpx;
}
.target-options-header-title-img{
width: 196rpx;
height: 40rpx;
}
.target-options-header-title{
width: 112rpx;
height: 40rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
text-align: center;
font-style: normal;
text-transform: none;
color: #FFEFBA;
margin: 0 18rpx;
}
.target-options-header-line-left{
width: 214rpx;
height: 0rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
border: 1rpx solid;
border-image: linear-gradient(90deg, rgba(133, 119, 96, 0), rgba(133, 119, 96, 1)) 1 1;
}
.target-options-header-line-right{
width: 214rpx;
height: 0rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
border: 1rpx solid;
border-image: linear-gradient(90deg, rgba(133, 119, 96, 1), rgba(133, 119, 96, 0)) 1 1;
}
.target-options {
width: 100%;
padding: 0 10px;
display: flex;
gap: 12px;
justify-content: center;
margin-bottom: 15px;
}
.battle-btn {
width: 45%;
height: 55px;
@@ -205,4 +142,42 @@ const createRoom = debounce(async () => {
border: 4rpx solid #fff3;
border-color: #fed847;
}
/* .battle-close {
background-color: #8889;
color: #b3b3b3;
}
.battle-close > text:last-child {
font-size: 12px;
} */
.room-info {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
padding-top: 40px;
}
.room-info > view:first-child {
font-size: 22px;
color: #fff;
margin-bottom: 20px;
}
.room-info > text {
color: #888686;
font-size: 14px;
margin: 10px 0;
}
.room-info > view:last-child {
color: #287fff;
margin: 20px 0;
font-size: 14px;
}
.copy-room-number {
width: calc(70vw - 20px);
color: #fed847;
border: 1px solid #fed847;
padding: 10px;
text-align: center;
border-radius: 10px;
margin-bottom: 20px;
}
</style>
+17 -19
View File
@@ -27,7 +27,7 @@ const props = defineProps({
default: "",
},
});
const itemTexts = ["选择弓种", "选择练习距离", "选择靶纸", "选择组/箭数"];
const itemTexts = ["Select Bow", "Select Distance", "Select Target", "Select Sets/Arrows"];
const distances = [5, 8, 10, 18, 25, 30, 50, 60, 70];
const groupArrows = [3, 6, 12, 18];
@@ -73,7 +73,7 @@ const onMeterChange = (e) => {
};
const onSetsChange = (e) => {
if (!e.detail.value) return;
sets.value = Math.min(30, Math.max(1, Number(e.detail.value)));
sets.value = Math.min(30, Number(e.detail.value));
if (!sets.value) return;
if (secondSelectIndex.value !== -1) {
props.onSelect(
@@ -88,7 +88,7 @@ const onSetsChange = (e) => {
};
const onArrowAmountChange = (e) => {
if (!e.detail.value) return;
arrowAmount.value = Math.min(60, Math.max(1, Number(e.detail.value)));
arrowAmount.value = Math.min(60, Number(e.detail.value));
if (!arrowAmount.value) return;
if (selectedIndex.value !== -1) {
props.onSelect(
@@ -153,15 +153,13 @@ const loadConfig = () => {
const formatSetAndAmount = computed(() => {
if (selectedIndex.value === -1 || secondSelectIndex.value === -1)
return itemTexts[props.itemIndex];
if (selectedIndex.value === 99 && !sets.value)
return itemTexts[props.itemIndex];
if (secondSelectIndex.value === 99 && !arrowAmount.value)
return itemTexts[props.itemIndex];
return `${selectedIndex.value === 99 ? sets.value : selectedIndex.value}组/${
if (selectedIndex.value === 99 && !sets.value) return itemTexts[props.itemIndex];
if (secondSelectIndex.value === 99 && !arrowAmount.value) return itemTexts[props.itemIndex];
return `${selectedIndex.value === 99 ? sets.value : selectedIndex.value} sets/${
secondSelectIndex.value === 99
? arrowAmount.value
: groupArrows[secondSelectIndex.value]
}`;
} arrows`;
});
onMounted(async () => {
const config = uni.getStorageSync("point-book-config");
@@ -187,13 +185,13 @@ onMounted(async () => {
<view></view>
<block>
<text v-if="expand" :style="{ color: '#999', fontWeight: 'normal' }">{{
itemIndex !== 3 ? itemTexts[itemIndex] : "选择组"
itemIndex !== 3 ? itemTexts[itemIndex] : "Select Sets"
}}</text>
<text v-if="!expand && itemIndex === 0">{{
value || itemTexts[itemIndex]
}}</text>
<text v-if="!expand && itemIndex === 1">{{
value && value > 0 ? value + "" : itemTexts[itemIndex]
value && value > 0 ? value + " m" : itemTexts[itemIndex]
}}</text>
<text v-if="!expand && itemIndex === 2">{{
value || itemTexts[itemIndex]
@@ -232,7 +230,7 @@ onMounted(async () => {
@click="onSelectItem(index)"
>
<text>{{ item }}</text>
<text></text>
<text>m</text>
</view>
<view
:style="{
@@ -242,12 +240,12 @@ onMounted(async () => {
<input
v-model="meter"
type="number"
placeholder="自定义"
placeholder="Custom"
placeholder-style="color: #DDDDDD"
@focus="() => (selectedIndex = 9)"
@blur="onMeterChange"
/>
<text></text>
<text>m</text>
</view>
</view>
<view v-if="itemIndex === 2" class="bowtarget-items">
@@ -274,7 +272,7 @@ onMounted(async () => {
@click="onSelectItem(i)"
>
<text>{{ i }}</text>
<text></text>
<text>sets</text>
</view>
<view
:style="{
@@ -289,7 +287,7 @@ onMounted(async () => {
@focus="() => (selectedIndex = 99)"
@blur="onSetsChange"
/>
<text></text>
<text>sets</text>
</view>
</view>
<view
@@ -299,7 +297,7 @@ onMounted(async () => {
color: '#999999',
textAlign: 'center',
}"
>选择每组的箭数</view
>Select arrows per set</view
>
<view class="amount-items">
<view
@@ -311,7 +309,7 @@ onMounted(async () => {
@click="onSelectSecondItem(index)"
>
<text>{{ item }}</text>
<text></text>
<text>arrows</text>
</view>
<view
:style="{
@@ -327,7 +325,7 @@ onMounted(async () => {
@focus="() => (secondSelectIndex = 99)"
@blur="onArrowAmountChange"
/>
<text></text>
<text>arrows</text>
</view>
</view>
</view>
+4 -4
View File
@@ -12,18 +12,18 @@ defineProps({
const bubbleTypes = [
"../static/long-bubble.png",
"../static/long-bubble-middle.png",
"https://static.shelingxingqiu.com/shootmini/static/long-bubble-tall.png",
"../static/long-bubble-tall.png",
];
</script>
<template>
<view class="container">
<image src="https://static.shelingxingqiu.com/shootmini/static/shooter.png" mode="widthFix" />
<image src="../static/shooter.png" mode="widthFix" />
<view>
<image
v-if="!noBg"
:src="bubbleTypes[type]"
:style="{ top: type === 2 ? '-6%' : '-13%' }"
:style="{ top: type === 2 ? '-6%' : '-12%' }"
mode="widthFix"
/>
<slot />
@@ -55,6 +55,6 @@ const bubbleTypes = [
}
.container > view {
color: #fff;
font-size: 28rpx;
font-size: 14px;
}
</style>
-55
View File
@@ -1,55 +0,0 @@
<script setup>
defineProps({
noBg: {
type: Boolean,
default: false,
}
});
</script>
<template>
<view class="container">
<image class="shooter2" src="https://static.shelingxingqiu.com/shootmini/static/shooter2.png" mode="widthFix" />
<view class="bg-box">
<image
class="bg"
v-if="!noBg"
src="https://static.shelingxingqiu.com/shootmini/static/long-bubble-border.png"
mode="widthFix"
/>
<slot />
</view>
</view>
</template>
<style scoped>
.container {
display: flex;
align-items: center;
padding: 0 26rpx 0 28rpx;
margin-bottom: 14rpx;
width: clac(100% - 54rpx);
}
.container .shooter2 {
display: block;
width: 133rpx;
height: 144rpx;
}
.container .bg-box {
color: #fff;
font-size: 28rpx;
position: relative;
flex: 1;
height: 128rpx;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.container .bg-box .bg {
position: absolute;
left: 0;
right: 0;
width: 100%;
}
</style>
+40 -112
View File
@@ -6,7 +6,7 @@ import Avatar from "@/components/Avatar.vue";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user, game } = storeToRefs(store);
const { user } = storeToRefs(store);
const currentPage = computed(() => {
const pages = getCurrentPages();
@@ -26,10 +26,6 @@ const props = defineProps({
type: Boolean,
default: true,
},
titleStyle: {
type: [String, Object, Array],
default: () => ({}),
},
});
const onClick = () => {
@@ -55,19 +51,17 @@ const toUserPage = () => {
const signin = () => {
if (!user.value.id) {
uni.$emit("point-book-signin");
uni.navigateTo({
url: "/pages/sign-in",
});
}
};
const isSVip = computed(() => user.value.sVip === true);
const isVip = computed(() => user.value.vip === true && user.value.sVip !== true);
const loading = ref(false);
const showLoader = ref(false);
const pointBook = ref(null);
const showProgress = ref(false);
const heat = ref(0);
/** 房间号按钮动态定位样式(position: fixed,根据胶囊真实位置计算,脱离 flex 流避免挤压标题) */
const battleRoomBtnStyle = ref({});
const updateLoading = (value) => {
loading.value = value;
};
@@ -79,35 +73,23 @@ const updateHot = (value) => {
onMounted(() => {
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1];
if (
currentPage.route === "pages/point-book-edit" ||
currentPage.route === "pages/point-book-detail"
) {
if (currentPage.route === "pages/point-book-edit") {
pointBook.value = uni.getStorageSync("point-book");
if (!pointBook.value) {
pointBook.value = uni.getStorageSync("last-point-book");
}
}
// 仅在对战房间页获取胶囊位置,按钮用 fixed 定位精确贴靠胶囊左侧(脱离 flex 流,不挤压标题)
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 作为 right8px 作为 top
}
if (
currentPage.route === "pages/team-battle" ||
currentPage.route === "pages/melee-match"
) {
showLoader.value = true;
}
if (currentPage.route === "pages/team-battle") {
showProgress.value = true;
}
uni.$on("update-header-loading", updateLoading);
uni.$on("update-hot", updateHot);
});
onBeforeUnmount(() => {
uni.$off("update-header-loading", updateLoading);
uni.$off("update-hot", updateHot);
});
</script>
@@ -122,9 +104,7 @@ onBeforeUnmount(() => {
mode="widthFix"
/>
</view>
<view
:style="[{ color: whiteBackArrow ? '#fff' : '#000' }, titleStyle]"
>
<view :style="{ color: whiteBackArrow ? '#fff' : '#000' }">
<view
v-if="currentPage === 'pages/point-book'"
class="user-header"
@@ -137,21 +117,7 @@ onBeforeUnmount(() => {
:size="40"
borderColor="#333"
/>
<view
v-if="isVip || isSVip"
:class="[
'point-book-user-name',
'member-nickname',
isVip ? 'member-nickname--vip' : '',
isSVip ? 'member-nickname--svip' : '',
]"
>
<text class="member-nickname__text">{{ user.nickName }}</text>
<text v-if="isSVip" class="member-nickname__shine">
{{ user.nickName }}
</text>
</view>
<text v-else class="truncate">{{ user.nickName }}</text>
<text class="truncate">{{ user.nickName }}</text>
<image
v-if="heat"
:src="`../static/hot${heat}.png`"
@@ -165,8 +131,8 @@ onBeforeUnmount(() => {
</view>
<block
v-if="
'-箭前准备-感知距离-小试牛刀'.indexOf(title) === -1 ||
'-箭前准备-感知距离-小试牛刀'.indexOf(title) === 11
'-凹造型-感知距离-小试牛刀'.indexOf(title) === -1 ||
'-凹造型-感知距离-小试牛刀'.indexOf(title) === 10
"
>
<text>{{ title }}</text>
@@ -174,12 +140,12 @@ onBeforeUnmount(() => {
<block
v-if="
title &&
'-箭前准备-感知距离-小试牛刀'.indexOf(title) !== -1 &&
'-箭前准备-感知距离-小试牛刀'.indexOf(title) !== 11
'-凹造型-感知距离-小试牛刀'.indexOf(title) !== -1 &&
'-凹造型-感知距离-小试牛刀'.indexOf(title) !== 10
"
>
<view class="first-try-steps">
<text :class="title === '-箭前准备' ? 'current-step' : ''">箭前准备</text>
<text :class="title === '-凹造型' ? 'current-step' : ''">凹造型</text>
<text>-</text>
<text :class="title === '-感知距离' ? 'current-step' : ''"
>感知距离</text
@@ -191,6 +157,12 @@ onBeforeUnmount(() => {
</view>
</block>
</view>
<image
:style="{ opacity: showLoader && loading ? 1 : 0 }"
src="../static/btn-loading.png"
mode="widthFix"
class="loading"
/>
<view v-if="pointBook" class="point-book-info">
<text>{{ pointBook.bowType.name }}</text>
<text>{{ pointBook.distance }} 米</text>
@@ -208,26 +180,9 @@ onBeforeUnmount(() => {
}}</text
>
</view>
<view
v-if="
currentPage === 'pages/team-battle' ||
currentPage === 'pages/team-battle/index'
"
class="battle-progress"
>
<view v-if="showProgress" class="battle-progress">
<HeaderProgress />
</view>
<!-- 对战房间:整个胶囊为分享按钮,房号从 Store 读取;fixed 定位紧靠系统胶囊左侧 -->
<button
v-if="currentPage === 'pages/battle-room' && game.roomNumber"
open-type="share"
hover-class="none"
class="battle-room-number"
:style="battleRoomBtnStyle"
>
<text class="battle-room-number__text">房号: {{ game.roomNumber }}</text>
<image src="../static/share2.png" mode="widthFix" class="battle-room-number__icon" />
</button>
</view>
</template>
@@ -271,6 +226,14 @@ onBeforeUnmount(() => {
font-size: 16px;
color: #fff;
}
.loading {
width: 20px;
height: 20px;
margin-left: 10px;
transition: all 0.3s ease;
background-blend-mode: darken;
animation: rotate 2s linear infinite;
}
.point-book-info {
color: #333;
position: fixed;
@@ -306,47 +269,12 @@ onBeforeUnmount(() => {
}
.user-header > image:last-child {
width: 36rpx;
height: 36rpx;
}
.user-header > text:nth-child(2),
.user-header > .point-book-user-name {
.user-header > text:nth-child(2) {
font-weight: 500;
font-size: 30rpx;
color: #333333;
margin: 0 20rpx;
max-width: 300rpx;
}
/* 对战房间:整个胶囊作为分享按钮,fixed 定位脱离 flex 流,紧贴系统胶囊左侧 */
.battle-room-number {
position: fixed;
/* 兜底定位(JS 获取胶囊位置失败时生效):约 28vw 对应胶囊区域左边缘 */
right: calc(28vw + 4px);
top: 8px;
display: flex;
align-items: center;
justify-content: center;
width: 240rpx;
height: 64rpx;
background: rgba(0, 0, 0, 0.15);
border-radius: 96rpx;
border: 1rpx solid #5b5758;
padding: 0;
}
/* 重置 button 默认边框 */
.battle-room-number::after {
border: none;
}
.battle-room-number__text {
width: 156rpx;
height: 28rpx;
font-weight: 400;
font-size: 24rpx;
color: #ffffff;
text-align: center;
line-height: 28rpx;
}
.battle-room-number__icon {
width: 25rpx;
height: 26rpx;
}
</style>
+90 -88
View File
@@ -1,9 +1,7 @@
<script setup>
import { ref, watch, onMounted, onBeforeUnmount } from "vue";
import audioManager from "@/audioManager";
import { MESSAGETYPESV2 } from "@/constants";
import { getDirectionText } from "@/util";
import { MESSAGETYPES } from "@/constants";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
@@ -13,89 +11,107 @@ const tips = ref("");
const melee = ref(false);
const timer = ref(null);
const sound = ref(true);
const currentSound = ref("");
const currentRound = ref(0);
const currentRoundEnded = ref(false);
const ended = ref(false);
const halfTime = ref(false);
const currentShot = ref(0);
const totalShot = ref(0);
/** 标记组件是否已完成挂载,防止 immediate watcher 在挂载前用旧 store 值触发意外播音 */
const isMounted = ref(false);
const yourTurn = ref(false);
watch(
() => tips.value,
(newVal) => {
// 挂载完成前不播音(避免 immediate store watcher 用旧值触发多余播报)
if (!isMounted.value) return;
// 空字符串或含"重回"的 tips 均不播音
if (!newVal || newVal.includes("重回")) return;
let key = [];
let key = "";
if (newVal.includes("红队")) key = "请红方射箭";
if (newVal.includes("蓝队")) key = "请蓝方射箭";
if (!sound.value) return;
if (currentRoundEnded.value) {
currentRound.value += 1;
// 播放当前轮次语音
key.push(`${["一", "二", "三", "四", "五"][currentRound.value]}`);
audioManager.play(
`${["一", "二", "三", "四", "五"][currentRound.value - 1]}`
);
}
key.push(
newVal.includes("你")
? "轮到你了"
: newVal.includes("红队")
? "请红方射箭"
: "请蓝方射箭"
// 延迟播放队伍提示音
setTimeout(
() => {
if (key && !yourTurn.value) audioManager.play(key);
currentRoundEnded.value = false;
yourTurn.value = false;
},
currentRoundEnded.value ? 1000 : 0
);
audioManager.play(key, false);
currentRoundEnded.value = false;
}
);
const updateSound = () => {
sound.value = !sound.value;
audioManager.setMuted(!sound.value);
if (!sound.value) audioManager.stop(currentSound.value);
};
async function onReceiveMessage(message) {
if (ended.value) return;
if (Array.isArray(message)) return;
const { type, mode, current, shootData } = message;
if (type === MESSAGETYPESV2.BattleStart) {
melee.value = Boolean(mode > 3);
// 优先使用后端返回的 shootNumber,降级则根据 mode 推算
totalShot.value = message.shootNumber ?? (mode === 1 ? 3 : 2);
currentRoundEnded.value = true;
audioManager.play("比赛开始");
} else if (type === MESSAGETYPESV2.BattleEnd) {
audioManager.play("比赛结束", false);
} else if (type === MESSAGETYPESV2.ShootResult) {
if (melee.value && current.playerId !== user.value.id) return;
// 从 indexMap 按当前用户 id 取已射箭数,由后端维护准确值,不在前端自增。
// 注意:后端在 ShootResult 中会将 playerId 重置为 0(无当前射手),
// 因此不能依赖 playerId === user.id 判断,改为直接读取 indexMap[user.id]。
// indexMap[user.id] 只在本人射箭后才增加,队友射箭时该值不变,逻辑等价且更准确。
const myShot = current.indexMap?.[user.value.id];
if (myShot !== undefined) currentShot.value = myShot;
if (message.shootData) {
let key = [];
key.push(
shootData.ring
? `${shootData.ringX ? "X" : shootData.ring}`
: "未上靶"
);
if (shootData.angle !== null)
key.push(`${getDirectionText(shootData.angle)}调整`);
audioManager.play(key, false);
async function onReceiveMessage(messages = []) {
if (!sound.value || ended.value) return;
messages.forEach((msg) => {
if (msg.constructor === MESSAGETYPES.ShootResult) {
if (melee.value && msg.userId !== user.value.id) return;
if (msg.userId === user.value.id) currentShot.value++;
if (!halfTime.value && msg.target) {
currentSound.value = msg.target.ring
? `${msg.target.ring}`
: "未上靶";
audioManager.play(currentSound.value);
}
} else if (msg.constructor === MESSAGETYPES.ToSomeoneShoot) {
yourTurn.value = user.value.id === msg.userId;
} else if (msg.constructor === MESSAGETYPES.InvalidShot) {
if (msg.userId === user.value.id) {
uni.showToast({
title: "距离不足,无效",
icon: "none",
});
audioManager.play("射击无效");
}
} else if (msg.constructor === MESSAGETYPES.AllReady) {
const { config } = msg.groupUserStatus;
if (config && config.mode === 1) {
totalShot.value = config.teamSize === 2 ? 3 : 2;
}
currentRoundEnded.value = true;
audioManager.play("比赛开始");
} else if (msg.constructor === MESSAGETYPES.MeleeAllReady) {
melee.value = true;
halfTime.value = false;
audioManager.play("比赛开始");
} else if (msg.constructor === MESSAGETYPES.CurrentRoundEnded) {
currentShot.value = 0;
if (msg.preRoundResult && msg.preRoundResult.currentRound) {
currentRound.value = msg.preRoundResult.currentRound;
currentRoundEnded.value = true;
}
} else if (msg.constructor === MESSAGETYPES.HalfTimeOver) {
halfTime.value = true;
audioManager.play("中场休息");
} else if (msg.constructor === MESSAGETYPES.MatchOver) {
audioManager.play("比赛结束");
} else if (msg.constructor === MESSAGETYPES.FinalShoot) {
totalShot.value = 0;
audioManager.play("决金箭轮");
tips.value = "即将开始...";
currentRoundEnded.value = false;
} else if (msg.constructor === MESSAGETYPES.MatchOver) {
ended.value = true;
} else if (msg.constructor === MESSAGETYPES.BackToGame) {
if (msg.battleInfo) {
melee.value = msg.battleInfo.config.mode === 2;
}
}
} else if (type === MESSAGETYPESV2.NewRound) {
currentShot.value = 0;
currentRound.value = current.round;
currentRoundEnded.value = true;
} else if (type === MESSAGETYPESV2.InvalidShot) {
uni.showToast({
title: "距离不足,无效",
icon: "none",
});
audioManager.play("射击无效");
}
});
}
const playSound = (key) => {
currentSound.value = key;
audioManager.play(key);
};
@@ -103,46 +119,35 @@ const onUpdateTips = (newVal) => {
tips.value = newVal;
};
// 监听 Pinia store 中 totalShot 变化,用于比赛恢复时同步箭数(替代 uni.$emit 避免时序问题)
// 使用 immediate: true 确保组件创建时立即读取 store 当前值(解决重入时 totalShot 值不变 watch 不触发的问题)
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 });
const onUpdateTotalShot = (newVal) => {
currentShot.value = newVal.currentShot;
totalShot.value = newVal.totalShot;
};
onMounted(() => {
isMounted.value = true;
uni.$on("update-shot", onUpdateTotalShot);
uni.$on("update-tips", onUpdateTips);
uni.$on("socket-inbox", onReceiveMessage);
uni.$on("play-sound", playSound);
});
onBeforeUnmount(() => {
uni.$off("update-shot", onUpdateTotalShot);
uni.$off("socket-inbox", onReceiveMessage);
uni.$off("play-sound", playSound);
// 补充取消 update-tips 监听,防止页面重建时监听器叠加
uni.$off("update-tips", onUpdateTips);
if (timer.value) clearInterval(timer.value);
});
</script>
<template>
<view class="container">
<text>{{ (tips || "").replace(/你/g, "").replace(/重回/g, "") }}</text>
<text>{{ tips }}</text>
<text v-if="totalShot > 0"> ({{ currentShot }}/{{ totalShot }}) </text>
<button v-if="!!tips" hover-class="none" @click="updateSound">
<image :src="`../static/sound${sound ? '' : '-off'}-yellow.png`" mode="widthFix" />
<image
:src="`../static/sound${sound ? '' : '-off'}-yellow.png`"
mode="widthFix"
/>
</button>
</view>
</template>
@@ -154,15 +159,12 @@ onBeforeUnmount(() => {
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
}
.container>button:last-child {
.container > button:last-child {
width: 36px;
height: 36px;
}
.container>button:last-child>image {
.container > button:last-child > image {
width: 36px;
min-height: 36px;
}
+84
View File
@@ -0,0 +1,84 @@
<script setup>
import { ref } from "vue";
const props = defineProps({
type: {
type: String,
default: "text",
},
btnType: {
type: String,
default: "",
},
onChange: {
type: Function,
default: null,
},
placeholder: {
type: String,
default: "",
},
width: {
type: String,
default: "90vw",
},
});
const hide = ref(true);
</script>
<template>
<view class="container" :style="{ width }">
<input
:type="type"
@change="onChange"
:placeholder="placeholder"
placeholder-style="color: #999;"
/>
<button v-if="btnType === 'code'" hover-class="none" class="get-code">
get verification code
</button>
<button
v-if="type === 'password'"
hover-class="none"
class="eye-btn"
@click="hide = !hide"
>
<image
:src="`../static/${hide ? 'eye-close' : 'eye-open'}.png`"
mode="widthFix"
/>
</button>
</view>
</template>
<style scoped>
.container {
height: 100rpx;
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
border-radius: 30rpx;
padding: 0 30rpx;
margin: 15rpx 0;
box-sizing: border-box;
}
.container > input {
width: 100%;
color: #333;
font-size: 26rpx;
}
.get-code {
color: #287fff;
font-size: 26rpx;
width: 80%;
}
.eye-btn {
padding: 20rpx;
}
.eye-btn > image {
width: 50rpx;
height: 32rpx;
}
</style>
+90 -75
View File
@@ -11,119 +11,133 @@ const props = defineProps({
},
});
const playerNames = [
"乐正青山",
"宇文玉兰",
"岑思宇",
"邬梓瑜",
"范子衿",
"彭妮·希利",
"埃琳娜·奥西波娃",
"凯西·考夫霍尔德",
"旗鼓相当的对手",
"乐子睿",
"时春晓",
"柏孤鸿",
"东宫锦瑟",
"段干流云",
];
const textStyles = [
{
color: "#fff9",
fontSize: "18px",
},
{
color: "#fff",
fontSize: "22px",
},
{
color: "#fed847",
fontSize: "30px",
},
"马乌罗·内斯波利",
"埃琳娜·奥西波娃",
"凯西·考夫霍尔德",
];
const rowHeight = 100 / 7;
const totalHeight = (playerNames.length / 7) * 100 + 7;
const currentTop = ref(-totalHeight + rowHeight * 0);
const totalTop = ref(0);
const timer = ref(null);
const textStyles = ref([]);
const getTextStyle = (top, index) => {
const count = Math.floor(
((totalHeight + (top + rowHeight / 3)) / rowHeight).toFixed(1)
);
if (index === 12 - count) return textStyles[0];
else if (index === 13 - count) return textStyles[1];
else if (index === 14 - count) return textStyles[2];
else if (index === 15 - count) return textStyles[1];
else if (index === 16 - count) return textStyles[0];
return {
const getTextStyle = (top) => {
const styles = [
{
color: "#fff9",
fontSize: "20px",
},
{
color: "#fff",
fontSize: "24px",
},
{
color: "#fed847",
fontSize: "30px",
},
];
const data = new Array(14).fill({
color: "#fff6",
fontSize: "14px",
};
fontSize: "16px",
});
const unitHeight = 100 / 7;
let style = {};
if (top >= 100 - unitHeight / 2) {
for (let j = 0; j < 5; j++) {
data[j + 1] = styles[j > 2 ? 4 - j : j];
}
} else {
new Array(7).fill(1).some((_, i) => {
if (
top >= unitHeight * i - unitHeight / 2 &&
top < unitHeight * (i + 1) - unitHeight / 2
) {
for (let j = 0; j < 5; j++) {
data[7 + j + 1 - i] = styles[j > 2 ? 4 - j : j];
}
return true;
}
return false;
});
}
return data;
};
watch(
() => props.onComplete,
(newVal) => {
if (timer.value) {
clearInterval(timer.value);
timer.value = null;
(newVal, oldVal) => {
if (newVal && !oldVal) {
if (timer.value) clearInterval(timer.value);
timer.value = setInterval(() => {
if (totalTop.value === 100) {
clearInterval(timer.value);
setTimeout(() => {
newVal();
}, 1500);
} else {
totalTop.value += 0.5;
}
textStyles.value = getTextStyle(totalTop.value);
}, 10);
}
timer.value = setInterval(() => {
const count = Math.round(
(
(totalHeight + (currentTop.value + rowHeight / 3)) /
rowHeight
).toFixed(1)
);
if (count === 10) {
clearInterval(timer.value);
timer.value = null;
setTimeout(newVal, 1500);
return;
}
// 这里不重置,如果运行超13秒,就不会循环了
if (currentTop.value >= -4) {
currentTop.value = -totalHeight;
} else {
currentTop.value += 2;
}
}, 40);
}
);
onMounted(() => {
timer.value = setInterval(() => {
if (currentTop.value >= -4) {
currentTop.value = -totalHeight;
if (totalTop.value === 100) {
totalTop.value = 0;
} else {
currentTop.value += 2;
totalTop.value += 2;
}
textStyles.value = getTextStyle(totalTop.value);
}, 40);
});
onBeforeUnmount(() => {
if (timer.value) clearInterval(timer.value);
timer.value = null;
});
</script>
<template>
<view class="matching">
<image
src="https://static.shelingxingqiu.com/shootmini/static/matching-bg.png"
src="../static/matching-bg.png"
mode="widthFix"
class="matching-bg"
/>
<view>
<view class="player-names" :style="{ top: `${currentTop}%` }">
<view
class="player-names"
:style="{
top: `${totalTop - 100}%`,
}"
>
<text
v-for="(name, index) in [...playerNames, ...playerNames]"
v-for="(name, index) in playerNames"
:key="index"
:style="{
lineHeight: `${rowHeight}vw`,
...getTextStyle(currentTop, index),
lineHeight: `${95 / 7}vw`,
...(textStyles[index] || {}),
}"
>
{{ name }}
</text>
</view>
<view class="player-names" :style="{ top: `${totalTop}%` }">
<text
v-for="(name, index) in playerNames"
:key="index"
:style="{
lineHeight: `${95 / 7}vw`,
...(textStyles[index + 7] || {}),
}"
>
{{ name }}
</text>
</view>
</view>
<button hover-class="none" @click="$clickSound(stopMatch)">取消匹配</button>
<button hover-class="none" @click="stopMatch">取消匹配</button>
</view>
</template>
@@ -142,7 +156,7 @@ onBeforeUnmount(() => {
height: 95vw;
overflow: hidden;
position: absolute;
top: 30vw;
top: 30.5vw;
}
.matching-bg {
position: absolute;
@@ -162,6 +176,7 @@ onBeforeUnmount(() => {
}
.player-names {
width: 100%;
height: 95vw;
display: flex;
flex-direction: column;
position: absolute;
+209
View File
@@ -0,0 +1,209 @@
<script setup>
import { ref, watch } from "vue";
import BowTarget from "@/components/BowTarget.vue";
import Avatar from "@/components/Avatar.vue";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
const scores = ref([]);
const currentUser = ref({});
const props = defineProps({
show: {
type: Boolean,
default: false,
},
onClose: {
type: Function,
default: () => {},
},
data: {
type: Object,
default: () => ({}),
},
});
watch(
() => props.data,
(value) => {
const mine = value.players.find((p) => p.playerId === user.value.id);
currentUser.value = mine;
if (mine && mine.arrowHistory) {
scores.value = mine.arrowHistory;
}
},
{ deep: true, immediate: true }
);
const onSelect = (userId) => {
const user = props.data.players.find((p) => p.playerId === userId);
currentUser.value = user;
if (user && user.arrowHistory) {
scores.value = user.arrowHistory;
}
};
</script>
<template>
<view class="container" :style="{ display: show ? 'flex' : 'none' }">
<view>
<text>5人大乱斗</text>
<view @click="onClose">
<image src="../static/close-white.png" mode="widthFix" />
</view>
</view>
<view class="rank-rows">
<view
v-for="(player, index) in data.players"
:key="index"
@click="() => onSelect(player.playerId)"
>
<image v-if="index === 0" src="../static/champ1.png" mode="widthFix" />
<image v-if="index === 1" src="../static/champ2.png" mode="widthFix" />
<image v-if="index === 2" src="../static/champ3.png" mode="widthFix" />
<view v-if="index > 2" class="rank-view">{{ index + 1 }}</view>
<Avatar :src="player.avatar" :size="24" />
<text
>积分
{{
player.totalScore > 0 ? "+" + player.totalScore : player.totalScore
}}</text
>
<text>{{ player.totalRings }}</text>
<text v-for="(arrow, index2) in player.arrowHistory" :key="index2">
{{ arrow.ring }}
</text>
</view>
</view>
<view :style="{ width: '95%' }">
<BowTarget
:scores="scores"
:avatar="currentUser ? currentUser.avatar : ''"
/>
</view>
<view class="score-text"
><text :style="{ color: '#fed847' }">{{ scores.length }}</text
>支箭<text :style="{ color: '#fed847' }">{{
scores.reduce((last, next) => last + next.ring, 0)
}}</text
></view
>
<view class="score-row">
<view
v-for="(score, index) in scores"
:key="index"
class="score-item"
:style="{ width: '13vw', height: '13vw' }"
>
{{ score.ring }}
</view>
</view>
</view>
</template>
<style scoped>
.container {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background-color: #232323;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 10;
}
.container > view:first-child {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 20px 0;
color: #fff;
position: relative;
font-size: 20px;
}
.container > view:first-child > view:last-child {
position: absolute;
left: 5px;
top: 25px;
}
.container > view:first-child > view:last-child > image {
width: 40px;
}
.score-text {
width: 100%;
color: #fff;
text-align: center;
font-size: 16px;
margin-bottom: 6px;
}
.score-row {
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.score-item {
background-image: url("../static/score-bg.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
color: #fed847;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
margin: 3px;
}
.rank-rows {
display: flex;
flex-direction: column;
width: 100%;
border-top: 1px solid #fff3;
}
.rank-rows > view {
width: clac(100% - 20px);
color: #fff9;
border-bottom: 1px solid #fff3;
padding: 7px 10px;
display: flex;
align-items: center;
font-size: 14px;
overflow-x: auto;
}
.rank-rows > view::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.rank-rows > view > image:first-child,
.rank-rows > view > view:first-child {
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
font-size: 12px;
margin-right: 10px;
flex: 0 0 auto;
}
.rank-rows > view > view:first-child {
background-color: #6d6d6d;
border-radius: 50%;
}
.rank-rows > view > text {
margin-left: 10px;
flex: 0 0 auto;
display: block;
width: 25px;
}
.rank-rows > view > text:nth-child(3) {
width: 80px;
}
.rank-rows > view > text:nth-child(4) {
color: #fed847;
padding-right: 10px;
border-right: 1px solid #fff3;
width: 32px;
}
</style>
-234
View File
@@ -1,234 +0,0 @@
<script setup>
const props = defineProps({
show: {
type: Boolean,
default: false,
},
title: {
type: String,
default: "",
},
content: {
type: String,
default: "",
},
cancelText: {
type: String,
default: "取消",
},
confirmText: {
type: String,
default: "确定",
},
showCancel: {
type: Boolean,
default: true,
},
showConfirm: {
type: Boolean,
default: true,
},
onCancel: {
type: Function,
default: null,
},
onConfirm: {
type: Function,
default: null,
},
});
const handleCancel = () => {
props.onCancel?.();
};
const handleConfirm = () => {
props.onConfirm?.();
};
</script>
<template>
<view class="modal-mask" :style="{ display: show ? 'flex' : 'none' }">
<view class="modal-wrap scale-in">
<image
class="dialog-light"
src="https://static.shelingxingqiu.com/shootmini/static/common/dialog-light.png"
mode="widthFix"
/>
<image
class="dialog-icon"
src="https://static.shelingxingqiu.com/shootmini/static/common/dialog-icon.png"
mode="widthFix"
/>
<view class="dialog-panel">
<image
class="dialog-bg"
src="https://static.shelingxingqiu.com/shootmini/static/common/dialog-bg.png"
mode="scaleToFill"
/>
<view class="dialog-content">
<slot>
<text v-if="title" class="dialog-title">{{ title }}</text>
<text v-if="content" class="dialog-text">{{ content }}</text>
</slot>
</view>
<view
v-if="showCancel || showConfirm"
class="dialog-actions"
:class="{ single: !(showCancel && showConfirm) }"
>
<view
v-if="showCancel"
class="dialog-button cancel"
@click="handleCancel"
>
<text>{{ cancelText }}</text>
</view>
<view
v-if="showConfirm"
class="dialog-button confirm"
@click="handleConfirm"
>
<text>{{ confirmText }}</text>
</view>
</view>
</view>
</view>
</view>
</template>
<style scoped lang="scss">
.modal-mask {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.62);
justify-content: center;
align-items: center;
z-index: 999;
}
.modal-wrap {
position: relative;
display: flex;
width: 549rpx;
min-height: 318rpx;;
padding-top: 168rpx;
justify-content: flex-start;
align-items: center;
}
.dialog-light {
position: absolute;
top: 0;
left: 50%;
width: 520rpx;
z-index: 1;
transform-origin: center center;
animation: rotateLight 8s linear infinite;
}
.dialog-icon {
position: absolute;
top: 70rpx;
left: 50%;
width: 250rpx;
z-index: 5;
transform: translateX(-50%);
}
.dialog-panel {
position: relative;
width: 100%;
min-height: 318rpx;
padding: 98rpx 36rpx 40rpx 36rpx;
box-sizing: border-box;
z-index: 3;
border-radius: 24rpx;
border: 2rpx solid rgba(249, 213, 161, 0.5);
overflow: hidden;
}
.dialog-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 24rpx;
}
.dialog-content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
color: #fff;
text-align: center;
}
.dialog-title {
font-size: 28rpx;
font-weight: 700;
line-height: 40rpx;
}
.dialog-text {
margin-top: 10rpx;
font-size: 26rpx;
line-height: 36rpx;
white-space: pre-wrap;
}
.dialog-actions {
position: relative;
z-index: 1;
display: flex;
margin-top: 50rpx;
justify-content: space-between;
align-items: center;
gap: 20rpx;
}
.dialog-actions.single {
justify-content: center;
}
.dialog-button {
display: flex;
width: 232rpx;
height: 70rpx;
line-height: 70rpx;
border-radius: 44rpx;
justify-content: center;
align-items: center;
font-size: 26rpx;
font-weight: 500;
}
.dialog-button.cancel {
color: #fff;
background-color: rgba(255,255,255,0.2);
}
.dialog-button.confirm {
color: #000000;
background-color: #ffda3f;
}
@keyframes rotateLight {
from {
transform: translateX(-50%) rotate(0deg);
}
to {
transform: translateX(-50%) rotate(360deg);
}
}
</style>
-429
View File
@@ -1,429 +0,0 @@
<script setup>
import { computed } from "vue";
import { getDeviceBatteryAPI } from "@/apis";
const OTA_MIN_BATTERY = 50;
const OTA_LOW_BATTERY_TEXT = "电量不足 50%,暂不支持 OTA 升级";
const OTA_OFFLINE_TEXT = "请先开启智能弓";
const props = defineProps({
visible: {
type: Boolean,
default: false,
},
state: {
type: String,
default: "new_version", // new_version | update_progress | update_success | update_failure
},
version: {
type: String,
default: "",
},
progress: {
type: Number,
default: 40,
},
// 副标题:如“新版本将优化智能弓体验”
description: {
type: String,
default: "",
},
// 详细说明:如“升级前请确保:...”
changelog: {
type: String,
default: "",
},
forceUpdate: {
type: Boolean,
default: false,
},
});
const emit = defineEmits(["update", "skip", "close", "done", "retry"]);
const isNewVersion = computed(() => props.state === "new_version");
const isProgress = computed(() => props.state === "update_progress");
const isSuccess = computed(() => props.state === "update_success");
const isFailure = computed(() => props.state === "update_failure");
// Clamp progress to keep the progress bar width within its container.
const progressValue = computed(() => Math.min(100, Math.max(0, Number(props.progress) || 0)));
// 点击立即更新前先校验设备在线状态,再校验设备电量。
const handleUpdateClick = async () => {
try {
const deviceStatus = await getDeviceBatteryAPI();
if (deviceStatus?.online !== true) {
uni.showToast({
title: OTA_OFFLINE_TEXT,
icon: "none",
});
return;
}
if (Number(deviceStatus?.battery) <= OTA_MIN_BATTERY) {
uni.showToast({
title: OTA_LOW_BATTERY_TEXT,
icon: "none",
});
return;
}
} catch (err) {
emit("update");
return;
}
emit("update");
};
</script>
<template>
<view v-if="visible" class="ota-mask">
<!-- 图标 + 弹窗卡片 容器 -->
<view
class="ota-outer"
:class="isNewVersion ? 'outer-new' : 'outer-result'"
>
<!-- 悬浮图标溢出卡片顶部 -->
<image
v-if="isNewVersion"
src="https://static.shelingxingqiu.com/shootmini/static/ota/ota-mascot.png"
mode="aspectFit"
class="float-icon float-mascot"
/>
<image
v-else-if="isSuccess"
src="https://static.shelingxingqiu.com/shootmini/static/ota/check-char.png"
mode="aspectFit"
class="float-icon float-check"
/>
<image
v-else-if="isFailure"
src="https://static.shelingxingqiu.com/shootmini/static/ota/close-char.png"
mode="aspectFit"
class="float-icon float-close"
/>
<image
v-else-if="isProgress"
src="https://static.shelingxingqiu.com/shootmini/static/ota/target-char.png"
mode="aspectFit"
class="float-icon float-target"
/>
<!-- 弹窗卡片overflow:visible 允许按钮溢出底部背景图通过 ota-bg-clip 独立裁剪保持圆角 -->
<view class="ota-dialog">
<view class="ota-bg-clip">
<image src="https://static.shelingxingqiu.com/shootmini/static/ota/ota-bg.png" mode="aspectFill" class="ota-bg" />
</view>
<view
class="ota-content"
:class="{ 'content-new': isNewVersion, 'content-result': isProgress || isSuccess || isFailure }"
>
<!-- 发现新版本new-ver.png 已包含标题图不再重复文字版本号使用 ota-ver.png 胶囊背景 -->
<block v-if="isNewVersion">
<image src="https://static.shelingxingqiu.com/shootmini/static/ota/new-ver.png" mode="aspectFit" class="new-ver-img" />
<view v-if="version" class="version-tag-wrap">
<image src="https://static.shelingxingqiu.com/shootmini/static/ota/ota-ver.png" mode="aspectFit" class="version-tag-bg-img" />
<text class="version-tag">{{ version }}</text>
</view>
<!-- 副标题新版本将优化智能弓体验离下方详情 12rpx -->
<text v-if="description" class="desc-text">{{ description }}</text>
<!-- 详细说明升级前请确保... -->
<text v-if="changelog" class="changelog-text">{{ changelog }}</text>
<view class="btn-group">
<view class="primary-btn" @click="handleUpdateClick">
<text class="primary-btn-text">立即更新</text>
</view>
<text v-if="!forceUpdate" class="skip-text" @click="emit('skip')">暂不更新</text>
</view>
</block>
<!-- 更新成功图片左边距 34rpx文案左边距 44rpx按钮浮动底部居中 -->
<block v-else-if="isSuccess">
<image src="https://static.shelingxingqiu.com/shootmini/static/ota/update-ok.png" mode="aspectFit" class="result-title-img" style="width: 220rpx; height: 62rpx;" />
<text class="dialog-desc">请关机并重启智能弓</text>
<view class="btn-group-result">
<view class="primary-btn" @click="emit('done')">
<text class="primary-btn-text">完成</text>
</view>
</view>
</block>
<!-- 更新中复用成功标题图正文区域展示进度条无底部按钮 -->
<block v-else-if="isProgress">
<image src="https://static.shelingxingqiu.com/shootmini/static/ota/update_progress.png" mode="aspectFit" class="result-title-img" style="width: 220rpx; height: 62rpx;" />
<view class="progress-wrap">
<view class="progress-track">
<view class="progress-fill" :style="{ width: `${progressValue}%` }"></view>
</view>
</view>
</block>
<!-- 更新失败图片左边距 34rpx文案左对齐 44rpx按钮浮动底部居中 -->
<block v-else-if="isFailure">
<image src="https://static.shelingxingqiu.com/shootmini/static/ota/update-fail.png" mode="aspectFit" class="result-title-img" style="width: 222rpx; height: 62rpx;" />
<text class="dialog-desc">请确保</text>
<text class="dialog-desc">1智能弓已开启</text>
<text class="dialog-desc">2网路连接稳定</text>
<view class="btn-group-result">
<view class="primary-btn" @click="emit('retry')">
<text class="primary-btn-text">重试</text>
</view>
</view>
</block>
</view>
</view>
</view>
<!-- 关闭按钮仅新版本状态非强制更新时位于弹窗下方 -->
<view
v-if="(isNewVersion || isFailure) && !forceUpdate"
class="ota-close-below"
@click="emit('close')"
>
<image src="../static/sicon/close.png" mode="aspectFit" style="width: 56rpx; height: 56rpx;" />
</view>
</view>
</template>
<style scoped>
.ota-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 1000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* 外层容器:相对定位,为浮动图标创造溢出空间 */
.ota-outer {
position: relative;
overflow: visible;
}
/* 设计图:吉祥物向上突出弹窗顶部 40px(375px基准)× 2 = 80rpx */
.outer-new {
padding-top: 80rpx;
}
.outer-result {
padding-top: 80rpx;
padding-bottom: 66rpx;
}
/* 浮动图标(绝对定位,位于卡片顶部上方) */
.float-icon {
position: absolute;
z-index: 2;
}
/* 吉祥物尺寸:设计图 149×109px375px基准)× 2 = 298×218rpx */
.float-mascot {
width: 298rpx;
height: 218rpx;
top: -5px;
right: -74rpx;
}
.float-check {
width: 194rpx;
height: 166rpx;
top: 20px;
right: 30rpx;
}
.float-close {
width: 194rpx;
height: 164rpx;
top: 20px;
right: 30rpx;
}
.float-target {
width: 194rpx;
height: 166rpx;
top: 20px;
right: 30rpx;
}
/* 弹窗卡片:overflow:visible 允许按钮溢出底部,背景通过 ota-bg-clip 独立裁剪 */
.ota-dialog {
position: relative;
width: 482rpx;
border-radius: 24rpx;
border: 2rpx solid #F9D5A1;
overflow: visible;
background-color: #392F1D;
}
/* 背景图裁剪层:独立 overflow:hidden + border-radius 保持圆角效果 */
.ota-bg-clip {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 24rpx;
overflow: hidden;
z-index: 0;
}
.ota-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ota-content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
/* 按钮以外内容均左对齐 */
align-items: flex-start;
}
.content-new {
padding: 30rpx 0 40rpx 0;
}
.content-result {
padding: 30rpx 0 66rpx 0;
}
/* 发现新版本内容 */
.new-ver-img {
width: 274rpx;
height: 62rpx;
/* 左边距 34rpx,去掉 margin-bottom */
margin-left: 34rpx;
}
/* 版本号胶囊容器:相对定位,使 ota-ver.png 作为背景衬底 */
.version-tag-wrap {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 116rpx;
height: 44rpx;
/* 离标题图 -10rpx,左边距 50rpx,离下方副标题 22rpx */
margin-top: -10rpx;
margin-left: 50rpx;
margin-bottom: 22rpx;
}
/* ota-ver.png 胶囊背景图 */
.version-tag-bg-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* 版本号文字:浮于背景图之上 */
.version-tag {
position: relative;
z-index: 1;
color: rgba(254, 222, 100, 1);
font-size: 24rpx;
padding: 8rpx 22rpx 4rpx 24rpx;
}
/* 副标题(如"新版本将优化智能弓体验"):左边距 44rpx,离下方文案 12rpx */
.desc-text {
font-weight: 500;
font-size: 26rpx;
color: #FFFFFF;
line-height: 36rpx;
text-align: left;
margin-left: 44rpx;
margin-bottom: 12rpx;
}
/* 详细说明文案(如“升级前请确保:...”):左边距 44rpx */
.changelog-text {
font-weight: 400;
font-size: 26rpx;
color: #FFFFFF;
line-height: 40rpx;
text-align: left;
margin-left: 44rpx;
margin-bottom: 0;
}
/* 按钮组(新版本状态):离上方文案 30rpx,内部按钮间距 24rpx */
.btn-group {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 30rpx;
gap: 24rpx;
}
/* 按钮组(结果状态):绝对定位,溢出卡片底边 -35rpx 悬浮在底边中间 */
.btn-group-result {
position: absolute;
bottom: -35rpx;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* 主按钮:按照设计规范 width: 232rpx, height: 70rpx */
.primary-btn {
width: 232rpx;
height: 70rpx;
background-color: #FED847;
border-radius: 44rpx;
display: flex;
align-items: center;
justify-content: center;
}
.primary-btn-text {
font-weight: 500;
font-size: 26rpx;
color: #000000;
line-height: 36rpx;
}
/* 暂不更新:设计规范颜色 #5FADFF 蓝色 */
.skip-text {
font-weight: 400;
font-size: 26rpx;
color: #5FADFF;
line-height: 36rpx;
}
/* 更新结果内容:图片左边距 34rpx,下边距 16rpx */
.result-title-img {
margin-left: 34rpx;
margin-bottom: 16rpx;
}
/* 结果页文案:左对齐,左边距 44rpx,与 new_version 保持一致 */
.dialog-desc {
font-weight: 400;
font-size: 26rpx;
color: #FFFFFF;
line-height: 40rpx;
text-align: left;
margin-left: 44rpx;
}
.progress-wrap {
width: 394rpx;
margin-top: 40rpx;
margin-left: 44rpx;
}
.progress-track {
width: 100%;
height: 18rpx;
background-color: rgba(255, 255, 255, 0.28);
border-radius: 999rpx;
overflow: hidden;
}
.progress-fill {
height: 100%;
background-color: #FED847;
border-radius: 999rpx;
}
/* 关闭按钮(位于弹窗下方) */
.ota-close-below {
margin-top: 40rpx;
display: flex;
justify-content: center;
}
</style>
+17 -54
View File
@@ -1,76 +1,47 @@
<script setup>
import useStore from "@/store";
import { storeToRefs } from "pinia";
const { user } = storeToRefs(useStore());
const props = defineProps({
player: {
type: Object,
default: () => ({}),
defineProps({
avatar: {
type: String,
default: "",
},
name: {
type: String,
default: "",
},
scores: {
type: Array,
default: () => [],
},
});
const rowCount = new Array(6).fill(0);
const getRingText = (arrow) => {
if (!arrow) return "-";
if (arrow.ringX && arrow.ring) return "X环";
return `${Number(arrow.ring) || 0}`;
};
const isMember = (player = {}) => player.vip === true || player.sVip === true;
const getMemberNicknameClass = (player = {}) => [
"member-nickname",
player.vip === true && player.sVip !== true ? "member-nickname--vip" : "",
player.sVip === true ? "member-nickname--svip" : "",
];
</script>
<template>
<view
class="container"
:style="{ borderColor: player.id === user.id ? '#FED847' : '#fff3' }"
>
<view class="container">
<image
:style="{
opacity:
(scores[0] || []).length + (scores[1] || []).length === 12 ? 1 : 0,
}"
:style="{ opacity: scores.length === 12 ? 1 : 0 }"
src="../static/checked-green.png"
mode="widthFix"
/>
<image :src="player.avatar || '../static/user-icon.png'" mode="widthFix" />
<view
v-if="isMember(player)"
:class="['player-score-name', ...getMemberNicknameClass(player)]"
>
<text class="member-nickname__text">{{ player.name }}</text>
<text v-if="player.sVip === true" class="member-nickname__shine">
{{ player.name }}
</text>
</view>
<text v-else>{{ player.name }}</text>
<image :src="avatar || '../static/user-icon.png'" mode="widthFix" />
<text>{{ name }}</text>
<view>
<view>
<view v-for="(_, index) in rowCount" :key="index">
<text>{{ getRingText(scores[0]?.[index]) }}</text>
<text>{{ scores[index] ? `${scores[index].ring}` : "-" }}</text>
</view>
</view>
<view>
<view v-for="(_, index) in rowCount" :key="index">
<text>{{ getRingText(scores[1]?.[index]) }}</text>
<text>{{
scores[index + 6] ? `${scores[index + 6].ring}` : "-"
}}</text>
</view>
</view>
</view>
<text
>{{
scores
.map((s) => (s || []).reduce((last, next) => last + next.ring, 0))
.reduce((last, next) => last + next, 0)
scores.map((s) => s.ring).reduce((last, next) => last + next, 0)
}}</text
>
</view>
@@ -114,13 +85,6 @@ const getMemberNicknameClass = (player = {}) => [
text-overflow: ellipsis;
width: 20%;
}
.player-score-name {
width: 20%;
}
.player-score-name .member-nickname__text,
.player-score-name .member-nickname__shine {
font-size: 14px;
}
.container > view:nth-child(4) {
display: flex;
flex-direction: column;
@@ -140,6 +104,5 @@ const getMemberNicknameClass = (player = {}) => [
.container > text:nth-child(5) {
width: 40px;
text-align: right;
word-break: keep-all;
}
</style>
+8 -4
View File
@@ -9,7 +9,7 @@ defineProps({
type: String,
default: "",
},
arrows: {
scores: {
type: Array,
default: () => [],
},
@@ -21,6 +21,10 @@ defineProps({
type: Number,
default: 0,
},
totalRing: {
type: Number,
default: 0,
},
});
const rowCount = new Array(6).fill(0);
</script>
@@ -56,19 +60,19 @@ const rowCount = new Array(6).fill(0);
<view>
<view>
<view v-for="(_, index) in rowCount" :key="index">
<text>{{ arrows[index] ? `${arrows[index].ring}` : "-" }}</text>
<text>{{ scores[index] ? `${scores[index].ring}` : "-" }}</text>
</view>
</view>
<view>
<view v-for="(_, index) in rowCount" :key="index">
<text>{{
arrows[index + 6] ? `${arrows[index + 6].ring}` : "-"
scores[index + 6] ? `${scores[index + 6].ring}` : "-"
}}</text>
</view>
</view>
</view>
<view>
<text>{{ arrows.reduce((last, next) => last + next.ring, 0) }}</text>
<text>{{ totalRing }}</text>
<text>积分{{ totalScore }}</text>
</view>
</view>
+35 -116
View File
@@ -1,6 +1,4 @@
<script setup>
import Avatar from "@/components/Avatar.vue";
const props = defineProps({
total: {
type: Number,
@@ -10,131 +8,70 @@ const props = defineProps({
type: Array,
default: () => [],
},
removePlayer: {
type: Function,
default: () => {},
},
/** 当前用户是否为房主;仅房主可见踢人按钮 */
isOwner: {
type: Boolean,
default: false,
},
});
const isMember = (player = {}) => player.vip === true || player.sVip === true;
const getMemberNicknameClass = (player = {}) => [
"member-nickname",
player.vip === true && player.sVip !== true ? "member-nickname--vip" : "",
player.sVip === true ? "member-nickname--svip" : "",
];
const seats = new Array(props.total).fill(1);
</script>
<template>
<view class="players">
<view v-for="(_, index) in seats" :key="index">
<image src="https://static.shelingxingqiu.com/shootmini/static/player-bg.png" mode="widthFix" />
<view v-if="players[index] && players[index].name" class="avatar">
<Avatar
:src="players[index].avatar || '../static/user-icon.png'"
:size="40"
/>
<text
:style="{ opacity: players[index] && !!players[index].state ? 1 : 0 }"
>已准备</text
>
</view>
<image src="../static/player-bg.png" mode="widthFix" />
<image
v-if="players[index] && players[index].name"
:src="players[index].avatar || '../static/user-icon.png'"
mode="widthFix"
/>
<view v-else class="player-unknow">
<image src="../static/question-mark.png" mode="widthFix" />
</view>
<view
v-if="players[index] && players[index].name && isMember(players[index])"
:class="['player-seat-name', ...getMemberNicknameClass(players[index])]"
>
<text class="member-nickname__text">{{ players[index].name }}</text>
<text
v-if="players[index].sVip === true"
class="member-nickname__shine"
>
{{ players[index].name }}
</text>
</view>
<text
v-else-if="players[index] && players[index].name"
class="player-seat-name"
>
{{ players[index].name }}
</text>
<text v-else class="player-seat-name" :style="{ color: '#fff9' }">
虚位以待
</text>
<view v-if="index === 0" class="founder">管理员</view>
<!-- <image
<text v-if="players[index] && players[index].name">{{
players[index].name
}}</text>
<text v-else :style="{ color: '#fff9' }">虚位以待</text>
<view v-if="index === 0" class="founder">创建者</view>
<image
:src="`../static/player-${index + 1}.png`"
mode="widthFix"
class="player-bg"
/> -->
<!-- 仅房主isOwner=true且非空座位时展示踢人按钮 -->
<button
v-if="index > 0 && players[index] && isOwner"
hover-class="none"
class="remove-player"
@click="() => removePlayer(players[index])"
>
<image src="../static/close-white.png" mode="widthFix" />
</button>
/>
</view>
</view>
</template>
<style scoped>
.players {
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 20rpx;
column-gap: 25rpx;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
-moz-column-gap: 20px;
column-gap: 14px;
margin-bottom: 20px;
font-size: 14px;
padding: 0 14px;
}
.players > view {
width: calc(50% - 7px);
display: flex;
align-items: center;
position: relative;
color: #fff;
height: 176rpx;
height: 100px;
overflow: hidden;
}
.players > view > image:first-child {
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
top: 0;
}
.avatar {
display: flex;
flex-direction: column;
align-items: center;
padding: 0 24rpx;
margin-top: 16rpx;
.players > view > image:nth-child(2) {
width: 40px;
height: 40px;
min-height: 40px;
margin: 0 10px;
border: 1px solid #fff;
border-radius: 50%;
}
.avatar > text {
background-color: #2c261fb3;
border: 1rpx solid #a3793f66;
color: #fed847;
font-size: 16rpx;
border-radius: 20rpx;
width: 70rpx;
text-align: center;
margin-top: -16rpx;
position: relative;
height: 28rpx;
line-height: 28rpx;
}
.player-seat-name {
.players > view > text:nth-child(3) {
width: 20vw;
white-space: nowrap;
overflow: hidden;
@@ -143,48 +80,30 @@ const seats = new Array(props.total).fill(1);
.founder {
position: absolute;
background-color: #fed847;
top: 0;
left: 0;
top: 6px;
color: #000;
font-size: 10px;
padding: 2px 5px;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
}
/* .player-bg {
.player-bg {
position: absolute;
width: 52px;
right: 0;
} */
}
.player-unknow {
width: 84rpx;
height: 84rpx;
margin: 0 24rpx;
border: 1rpx solid #fff3;
width: 40px;
height: 40px;
margin: 0 10px;
border: 1px solid #fff3;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: #69686866;
box-sizing: border-box;
}
.player-unknow > image {
width: 40%;
}
.remove-player {
width: 48rpx;
height: 48rpx;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 10rpx;
right: 0;
}
.remove-player > image {
width: 100%;
height: 100%;
opacity: 0.6;
}
</style>
+137
View File
@@ -0,0 +1,137 @@
<script setup>
defineProps({
avatar: {
type: String,
default: "",
},
blueTeam: {
type: Array,
default: () => [],
},
redTeam: {
type: Array,
default: () => [],
},
currentShooterId: {
type: Number,
default: 0,
},
});
</script>
<template>
<view class="container">
<image v-if="avatar" class="avatar" :src="avatar" mode="widthFix" />
<view
v-if="blueTeam.length && redTeam.length"
:style="{ height: 20 + blueTeam.length * 20 + 'px' }"
>
<view
v-for="(player, index) in blueTeam"
:key="index"
:style="{
top: index * 20 + 'px',
zIndex: blueTeam.length - index,
left: 0,
}"
>
<image
class="avatar"
:src="player.avatar || '../static/user-icon.png'"
mode="widthFix"
:style="{
borderColor: currentShooterId === player.id ? '#5fadff' : '#fff',
}"
/>
<text
:style="{
color: currentShooterId === player.id ? '#5fadff' : '#fff',
fontSize: currentShooterId === player.id ? 16 : 12 + 'px',
}"
>
{{ player.name }}
</text>
</view>
</view>
<view
v-if="!avatar"
:style="{
height: 20 + redTeam.length * 20 + 'px',
}"
>
<view
v-for="(player, index) in redTeam"
:key="index"
:style="{
top: index * 20 + 'px',
zIndex: redTeam.length - index,
right: 0,
}"
>
<text
:style="{
color: currentShooterId === player.id ? '#ff6060' : '#fff',
fontSize: currentShooterId === player.id ? 16 : 12 + 'px',
textAlign: 'right',
}"
>
{{ player.name }}
</text>
<image
class="avatar"
:src="player.avatar || '../static/user-icon.png'"
mode="widthFix"
:style="{
borderColor: currentShooterId === player.id ? '#ff6060' : '#fff',
}"
/>
</view>
</view>
</view>
</template>
<style scoped>
.container {
width: calc(100% - 30px);
margin: 0 15px;
margin-top: 5px;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.container > view {
width: 50%;
position: relative;
}
.container > view > view {
position: absolute;
top: -20px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s linear;
}
.container > view > view > text {
margin: 0 10px;
overflow: hidden;
width: 120px;
transition: all 0.3s linear;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.avatar {
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
border: 1px solid #fff;
border-radius: 50%;
}
.red-avatar {
border: 1px solid #ff6060;
}
.blue-avatar {
border: 1px solid #5fadff;
}
</style>
-182
View File
@@ -1,182 +0,0 @@
<script setup>
import { ref, watch } from "vue";
import Avatar from "@/components/Avatar.vue";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const { user, device, online } = storeToRefs(useStore());
import { clickLikeAPI } from "@/apis";
const props = defineProps({
data: {
type: Object,
default: () => {},
},
borderWidth: {
type: Number,
default: 1,
},
});
const like = ref(props.data.ifLike);
const likeCount = ref(props.data.likeTotal || 0);
const isMember = (data = {}) => data.vip === true || data.sVip === true;
const getMemberNicknameClass = (data = {}) => [
"point-rank-name",
"member-nickname",
data.vip === true && data.sVip !== true ? "member-nickname--vip" : "",
data.sVip === true ? "member-nickname--svip" : "",
];
watch(
() => props.data,
(newVal) => {
like.value = newVal.ifLike;
likeCount.value = newVal.likeTotal || 0;
}
);
const onClick = async () => {
if (!user.value.id) return;
if (user.value.id === props.data.id) {
return uni.navigateTo({
url: "/pages/my-like-list",
});
}
like.value = !like.value;
await clickLikeAPI(props.data.id, like.value);
if (like.value) likeCount.value++;
else likeCount.value--;
};
</script>
<template>
<view class="rank-item" :style="{ borderWidth: borderWidth + 'rpx' }">
<image v-if="data.rank === 1" src="../static/point-no1.png" />
<image v-else-if="data.rank === 2" src="../static/point-no2.png" />
<image v-else-if="data.rank === 3" src="../static/point-no3.png" />
<text v-else>{{ data.rank || "" }}</text>
<view>
<Avatar :src="data.avatar || '../static/user-icon.png'" :size="36" />
<view>
<view v-if="isMember(data)" :class="getMemberNicknameClass(data)">
<text class="member-nickname__text">{{ data.name }}</text>
<text v-if="data.sVip === true" class="member-nickname__shine">
{{ data.name }}
</text>
</view>
<text v-else class="truncate">{{ data.name }}</text>
<view>
<text>{{ data.totalDay }}</text>
<view />
<text>平均{{ Number(data.averageRing.toFixed(1)) }}</text>
</view>
</view>
</view>
<view class="item-info">
<text>{{ data.weekArrow }}</text>
<text></text>
</view>
<view class="item-info">
<text>{{ Math.round(data.weekArrow * 1.6) }}</text>
<text>千卡</text>
</view>
<button hover-class="none" @click="onClick">
<text>{{ likeCount }}</text>
<image
:src="`../static/like-${like ? 'on' : 'off'}.png`"
mode="widthFix"
/>
</button>
</view>
</template>
<style scoped lang="scss">
.rank-item {
margin: 0 20rpx;
border-bottom: $uni-border;
display: flex;
align-items: center;
background: $uni-white;
height: 120rpx;
}
.rank-item > text:nth-child(1) {
width: 52rpx;
font-size: 28rpx;
color: #333333;
text-align: center;
}
.rank-item > image:nth-child(1) {
width: 52rpx;
height: 56rpx;
}
.rank-item > view:nth-child(2) {
flex: 1;
display: flex;
align-items: center;
margin-left: 20rpx;
}
.rank-item > view:nth-child(2) > view:last-child {
flex: 1;
display: flex;
flex-direction: column;
font-size: 22rpx;
color: #aaaaaa;
margin-left: 20rpx;
}
.rank-item > view:nth-child(2) > view:last-child > text:first-child {
width: 200rpx;
font-size: 28rpx;
color: #333333;
margin-bottom: 5rpx;
}
.rank-item > view:nth-child(2) > view:last-child > .point-rank-name {
width: 200rpx;
margin-bottom: 5rpx;
}
.point-rank-name .member-nickname__text,
.point-rank-name .member-nickname__shine {
font-size: 28rpx;
}
.rank-item > view:nth-child(2) > view:last-child > view {
display: flex;
align-items: center;
}
.rank-item > view:nth-child(2) > view:last-child > view > view {
height: 20rpx;
width: 1rpx;
margin: 0 10rpx;
background-color: #b3b3b3;
}
.item-info {
display: flex;
align-items: center;
justify-content: flex-end;
font-size: 20rpx;
color: #777777;
width: 20%;
}
.item-info > text:first-child {
font-size: 28rpx;
color: #333333;
margin-right: 5rpx;
}
.rank-item > button:nth-child(5) {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 22rpx;
color: #777777;
padding-left: 20rpx;
padding-right: 10rpx;
}
.rank-item > button:nth-child(5) > image {
width: 24rpx;
height: 22rpx;
margin-top: 10rpx;
}
</style>
+27 -38
View File
@@ -1,5 +1,5 @@
<script setup>
import { ref, onMounted, computed } from "vue";
import { ref, onMounted } from "vue";
const props = defineProps({
data: {
@@ -11,19 +11,6 @@ const bowOptions = ref({});
const targetOptions = ref({});
const toDetailPage = () => {
const config = uni.getStorageSync("point-book-config");
const bowType = config.bowOption.find(
(item) => item.id === props.data.bowType
);
const bowtargetType = config.targetOption.find(
(item) => item.id === props.data.targetType
);
uni.setStorageSync("point-book", {
bowType,
bowtargetType,
distance: props.data.distance,
amountGroup: props.data.groups,
});
uni.navigateTo({
url: `/pages/point-book-detail?id=${props.data.id}`,
});
@@ -42,7 +29,7 @@ onMounted(() => {
<template>
<view class="container" @click="toDetailPage">
<view class="left-part">
<view>
<view class="labels">
<view></view>
<text>{{
@@ -64,12 +51,12 @@ onMounted(() => {
<text>平均{{ data.averageRing }}</text>
</view>
</view>
<view class="right-part">
<image src="https://static.shelingxingqiu.com/shootmini/static/bow-target.png" mode="widthFix" />
<view>
<image src="../static/bow-target.png" mode="widthFix" />
<view class="arrow-amount">
<text>{{ data.actualTotalRing }}</text>
<text>/</text>
<text>{{ data.totalRing }}</text>
<text></text>
<text>{{ data.arrows * data.groups }}</text>
<text></text>
</view>
</view>
</view>
@@ -83,13 +70,12 @@ onMounted(() => {
border-radius: 25rpx;
height: 200rpx;
border: 2rpx solid #fed848;
padding-left: 30rpx;
padding-right: 10rpx;
}
.container > view {
position: relative;
margin-left: 15px;
}
.left-part {
.container > view:first-child {
flex: 1;
display: flex;
flex-direction: column;
@@ -97,24 +83,20 @@ onMounted(() => {
height: calc(100% - 50rpx);
color: #333333;
}
.left-part > view {
.container > view:first-child > view {
width: 100%;
display: flex;
position: relative;
}
.left-part > view:nth-child(3) {
.container > view:first-child > view:nth-child(3) {
display: flex;
align-items: center;
font-size: 20rpx;
color: #666;
}
.left-part > view:nth-child(3) > text {
.container > view:first-child > view:nth-child(3) > text {
margin-right: 10rpx;
}
.right-part > image {
width: 180rpx;
height: 180rpx;
}
.labels {
align-items: flex-end !important;
}
@@ -132,21 +114,28 @@ onMounted(() => {
position: relative;
color: #333;
}
.container > view:last-child {
margin-right: 1vw;
}
.container > view:last-child > image {
width: 24vw;
}
.arrow-amount {
position: absolute;
background-color: #0009;
border-radius: 12px;
border-radius: 10px;
color: #fffc;
font-size: 24rpx;
line-height: 26px;
width: 64px;
font-size: 12px;
line-height: 22px;
width: 60px;
display: flex;
justify-content: center;
top: calc(50% - 15px);
left: calc(50% - 32px);
top: calc(50% - 13px);
left: calc(50% - 30px);
}
.arrow-amount > text:nth-child(1) {
font-size: 30rpx;
.arrow-amount > text:nth-child(2) {
color: #fff;
font-size: 14px;
margin: 0 3px;
}
</style>
-71
View File
@@ -1,71 +0,0 @@
<script setup>
import { ref } from "vue";
const props = defineProps({
onChange: {
type: Function,
default: () => {},
},
});
const mode = ref(true);
const onClick = () => {
mode.value = !mode.value;
props.onChange(mode.value);
};
</script>
<template>
<view
class="point-switcher"
:style="{ borderColor: mode ? '#D8D8D8' : '#53EF56' }"
>
<view
@click="onClick"
:style="{ transform: 'translateX(' + (mode ? '-58' : '4') + 'rpx)' }"
>
<text>放大</text>
<view :style="{ background: mode ? '#D8D8D8' : '#53EF56' }"></view>
<text>真实</text>
</view>
</view>
</template>
<style scoped>
.point-switcher {
width: 100rpx;
height: 40rpx;
border-radius: 22rpx;
border: 2rpx solid;
display: flex;
overflow: hidden;
}
.point-switcher > view {
position: relative;
display: flex;
align-items: center;
line-height: 40rpx;
color: #ffffff;
font-weight: 500;
font-size: 20rpx;
word-break: keep-all;
padding: 0 12rpx;
transition: all 0.3s ease;
transform: translateX(-58rpx);
}
.point-switcher > view > text:first-child {
color: #53ef56;
}
.point-switcher > view > view {
width: 36rpx;
height: 36rpx;
flex: 0 0 auto;
border-radius: 50%;
margin: 0 10rpx;
transition: all 0.3s ease;
}
.point-switcher > view > text:last-child {
color: #d8d8d8;
}
</style>
+2 -2
View File
@@ -93,7 +93,7 @@ onMounted(async () => {
<template>
<view class="container">
<image src="https://static.shelingxingqiu.com/shootmini/static/donate.png" mode="widthFix" />
<image src="../static/donate.png" mode="widthFix" />
<text>感谢您对我们公益项目的支持</text>
<view class="amounts">
<button
@@ -148,7 +148,7 @@ onMounted(async () => {
.container > image:first-child {
width: 200rpx;
position: absolute;
top: -112rpx;
top: -114rpx;
}
.container > text:nth-child(2) {
font-weight: 500;
+13 -19
View File
@@ -1,10 +1,14 @@
<script setup>
import { ref, computed, onMounted } from "vue";
import { ref, computed } from "vue";
const props = defineProps({
data: {
type: Object,
default: () => ({}),
default: Array,
},
total: {
type: Number,
default: 0,
},
});
@@ -40,12 +44,12 @@ const ringText = (ring) => {
<view>
<view v-for="(b, index) in bars" :key="index">
<text v-if="b && b.rate">
{{ `${Number((b.rate * 100).toFixed(1))}%` }}
{{ total === 0 ? `${Number((b.rate * 100).toFixed(1))}%` : b.rate }}
</text>
<view
:style="{
background: barColor(b.rate),
height: (b.rate === 1 ? 150 : b.rate * 240) + 'rpx',
background: barColor(total === 0 ? b.rate : b.rate / total),
height: (total === 0 ? b.rate : b.rate / total) * 300 + 'rpx',
}"
>
</view>
@@ -56,27 +60,18 @@ const ringText = (ring) => {
{{ b && b.ring !== undefined ? b.ring : "" }}
</text>
</view>
<text>环值</text>
</view>
</template>
<style scoped>
.container {
min-height: 150rpx;
display: flex;
flex-direction: column;
justify-content: flex-end;
position: relative;
}
.container > text {
position: absolute;
bottom: 2rpx;
left: 0;
font-size: 18rpx;
color: #999999;
}
.container > view {
padding-left: 40rpx;
padding-right: 10rpx;
padding: 0 10rpx;
}
.container > view:first-child {
display: flex;
@@ -97,15 +92,14 @@ const ringText = (ring) => {
transition: all 0.3s ease;
height: 0;
}
.container > view:nth-child(2) {
.container > view:last-child {
display: grid;
grid-template-columns: repeat(12, 1fr);
border-top: 1rpx solid #333;
font-size: 22rpx;
color: #333333;
padding-top: 2rpx;
}
.container > view:nth-child(2) > text {
.container > view:last-child > text {
text-align: center;
}
</style>
+7 -8
View File
@@ -52,14 +52,14 @@ onBeforeUnmount(() => {
<view class="point-view1" v-if="bluePoint !== 0 || redPoint !== 0">
<text>本轮蓝队</text>
<text>{{
(roundData.shoots[1] || []).reduce(
(roundData.blueArrows || []).reduce(
(last, next) => last + next.ring,
0
)
}}</text>
<text>红队</text>
<text>{{
(roundData.shoots[2] || []).reduce(
(roundData.redArrows || []).reduce(
(last, next) => last + next.ring,
0
)
@@ -117,10 +117,10 @@ onBeforeUnmount(() => {
display: flex;
flex-direction: column;
align-items: center;
font-size: 32rpx;
font-size: 16px;
}
.round-end-tip > text:first-child {
font-size: 36rpx;
font-size: 18px;
color: #fff;
}
.point-view1 {
@@ -137,7 +137,7 @@ onBeforeUnmount(() => {
}
.point-view2 {
margin: 12px 0;
font-size: 48rpx;
font-size: 24px;
display: flex;
align-items: center;
justify-content: center;
@@ -155,8 +155,7 @@ onBeforeUnmount(() => {
align-items: center;
justify-content: center;
margin-top: 10px;
font-size: 28rpx;
word-break: keep-all;
font-size: 14px;
}
.final-shoot > text:nth-child(1) {
width: 20px;
@@ -164,7 +163,7 @@ onBeforeUnmount(() => {
}
.final-shoot > text:nth-child(1),
.final-shoot > text:nth-child(3) {
font-size: 32rpx;
font-size: 18px;
color: #fed847;
margin-left: 10px;
margin-right: 5px;
+4 -4
View File
@@ -8,7 +8,7 @@ const props = defineProps({
},
rounded: {
type: Number,
default: 10,
default: 45,
},
onClick: {
type: Function,
@@ -58,7 +58,7 @@ const onBtnClick = debounce(async () => {
hover-class="none"
:style="{
width: width,
borderRadius: rounded + 'px',
borderRadius: rounded + 'rpx',
backgroundColor: disabled ? disabledColor : backgroundColor,
color,
}"
@@ -77,10 +77,10 @@ const onBtnClick = debounce(async () => {
<style scoped>
.sbtn {
margin: 0 auto;
height: 44px;
height: 88rpx;
line-height: 44px;
font-weight: bold;
font-size: 15px;
font-size: 42rpx;
display: flex;
text-align: center;
justify-content: center;
+3 -4
View File
@@ -7,7 +7,7 @@ const props = defineProps({
},
height: {
type: String,
default: "650rpx",
default: "260px",
},
onClose: {
type: Function,
@@ -56,7 +56,7 @@ watch(
>
<image
v-if="!noBg"
src="https://static.shelingxingqiu.com/attachment/2025-12-04/dep11770wzxg6o2alo.png"
src="https://static.shelingxingqiu.com/attachment/2025-08-05/dbuaf19pf7qd8ps0uh.png"
mode="widthFix"
/>
<view class="close-btn" @click="onClose" v-if="!noBg">
@@ -81,14 +81,13 @@ watch(
align-items: center;
opacity: 0;
transition: all 0.3s ease;
z-index: 999;
z-index: 99;
}
.modal-content {
width: 100%;
transform: translateY(100%);
transition: all 0.3s ease;
position: relative;
background-color: #372E1D;
}
.modal-content > image:first-child {
width: 100%;
+6 -8
View File
@@ -9,7 +9,7 @@ const props = defineProps({
type: Number,
default: 0,
},
arrows: {
scores: {
type: Array,
default: () => [],
},
@@ -26,8 +26,8 @@ const items = ref(new Array(props.total).fill(9));
const width = ref(92);
const itemWidth = ref(0);
const bgImages = [
"https://static.shelingxingqiu.com/shootmini/static/complete-light1.png",
"https://static.shelingxingqiu.com/shootmini/static/complete-light2.png",
"../static/complete-light1.png",
"../static/complete-light2.png",
];
const bgIndex = ref(0);
watch(
@@ -51,7 +51,7 @@ onBeforeUnmount(() => {
<template>
<view class="container">
<image
v-if="total > 0 && arrows.length === total && completeEffect"
v-if="total > 0 && scores.length === total && completeEffect"
:src="bgImages[bgIndex]"
class="complete-light"
:style="{
@@ -79,10 +79,8 @@ onBeforeUnmount(() => {
>
<image src="../static/score-bg.png" mode="widthFix" />
<text
:style="{ fontWeight: arrows[index] !== undefined ? 'bold' : 'normal' }"
>{{
!arrows[index] ? "-" : arrows[index].ringX ? "X" : arrows[index].ring
}}</text
:style="{ fontWeight: scores[index] !== undefined ? 'bold' : 'normal' }"
>{{ scores[index] !== undefined ? scores[index] : "-" }}</text
>
</view>
</view>
+18 -21
View File
@@ -1,49 +1,46 @@
<script setup>
const props = defineProps({
arrows: {
scores: {
type: Array,
default: () => [],
},
});
const getSum = (...arrows) => {
const recordedArrows = arrows.filter(Boolean);
if (!recordedArrows.length) return "-";
const sum = recordedArrows.reduce(
(total, arrow) => total + (Number(arrow.ring) || 0),
0
);
return `${sum}`;
const getSum = (a, b, c) => {
const sum = (Number(a) || 0) + (Number(b) || 0) + (Number(c) || 0);
return sum > 0 ? sum + "环" : "-";
};
const roundsName = ["第一轮", "第二轮", "第三轮", "第四轮"];
const getShowText = (arrow) => {
if (!arrow) return "-";
return arrow.ringX ? "X" : `${Number(arrow.ring) || 0}`;
};
</script>
<template>
<view class="container">
<view>
<text :style="{ transform: 'translateX(-10%)' }">总成绩</text>
<text>{{ arrows.reduce((last, next) => last + next.ring, 0) }}</text>
<text>{{ scores.reduce((last, next) => last + next, 0) }}</text>
</view>
<view
v-for="(_, index) in new Array(
Math.min(
Math.ceil(arrows.length / 3) + (arrows.length % 3 === 0 ? 1 : 0),
Math.ceil(scores.length / 3) + (scores.length % 3 === 0 ? 1 : 0),
4
)
).fill(1)"
:key="index"
>
<text>{{ roundsName[index] }}</text>
<text>{{ getShowText(arrows[index * 3 + 0]) }}</text>
<text>{{ getShowText(arrows[index * 3 + 1]) }}</text>
<text>{{ getShowText(arrows[index * 3 + 2]) }}</text>
<text>{{
scores[index * 3 + 0] ? scores[index * 3 + 0] + "环" : "-"
}}</text>
<text>{{
scores[index * 3 + 1] ? scores[index * 3 + 1] + "环" : "-"
}}</text>
<text>{{
scores[index * 3 + 2] ? scores[index * 3 + 2] + "环" : "-"
}}</text>
<text :style="{ width: '40%', transform: 'translateX(20%)' }">{{
getSum(
arrows[index * 3 + 0],
arrows[index * 3 + 1],
arrows[index * 3 + 2]
scores[index * 3 + 0],
scores[index * 3 + 1],
scores[index * 3 + 2]
)
}}</text>
</view>
+42 -75
View File
@@ -1,10 +1,11 @@
<script setup>
import { ref, onMounted, computed } from "vue";
import { ref, onMounted } from "vue";
import IconButton from "@/components/IconButton.vue";
import SButton from "@/components/SButton.vue";
import ScreenHint from "@/components/ScreenHint.vue";
import BowData from "@/components/BowData.vue";
import UserUpgrade from "@/components/UserUpgrade.vue";
import { wxShare } from "@/util";
import { directionAdjusts } from "@/constants";
import useStore from "@/store";
import { storeToRefs } from "pinia";
@@ -36,6 +37,7 @@ const showPanel = ref(true);
const showComment = ref(false);
const showBowData = ref(false);
const showUpgrade = ref(false);
const finished = ref(false);
const totalRing = ref(0);
const closePanel = () => {
showPanel.value = false;
@@ -43,51 +45,32 @@ const closePanel = () => {
props.onClose();
}, 300);
};
function onClickShare() {
uni.$emit("share-image");
}
onMounted(() => {
if (props.result.lvl > user.value.lvl) {
showUpgrade.value = true;
}
totalRing.value = (props.result.details || []).reduce(
(last, next) => last + next.ring,
0
);
if (props.result.arrows) {
totalRing.value = props.result.arrows.reduce(
(last, next) => last + next.ring,
0
);
}
finished.value =
props.result.arrows && props.result.arrows.length === props.total;
});
const getRing = (arrow) => {
if (!arrow) return "-";
if (arrow.ringX) return "X";
return Number(arrow.ring) || 0;
};
const arrows = computed(() => {
const data = new Array(props.total).fill(null);
(props.result.details || []).forEach((arrow, index) => {
data[index] = arrow;
});
return data;
});
const validArrows = computed(
() => arrows.value.filter((a) => Number(a?.ring) > 0).length
);
const isMember = computed(() => user.value.vip === true || user.value.sVip === true);
const openCoachComment = () => {
if (!isMember.value) return;
showComment.value = true;
};
// setTimeout(() => {
// showPanel.value = true;
// }, 300);
</script>
<template>
<view class="container">
<view :class="['container-header', showPanel ? 'scale-in' : 'scale-out']">
<image :src="tipSrc" mode="widthFix" />
<image src="https://static.shelingxingqiu.com/shootmini/static/finish-frame.png" mode="widthFix" />
<image src="../static/finish-frame.png" mode="widthFix" />
<text
>完成<text class="gold-text">{{ validArrows }}</text
>获得<text class="gold-text">{{ validArrows }}</text
>完成<text class="gold-text">{{ result.arrows.length }}</text
>获得<text class="gold-text">{{ result.arrows.length }}</text
>点经验</text
>
</view>
@@ -108,29 +91,28 @@ const openCoachComment = () => {
</view>
<view :style="{ gridTemplateColumns: `repeat(${rowCount}, 1fr)` }">
<view v-for="(_, index) in new Array(total).fill(0)" :key="index">
{{ getRing(arrows[index])
}}<text v-if="getRing(arrows[index]) !== '-'"></text>
{{ result.arrows[index] ? result.arrows[index].ring : 0
}}<text></text>
</view>
</view>
<view>
<block v-if="validArrows === total">
<block v-if="finished">
<IconButton
name="分享"
src="../static/share.png"
:onClick="onClickShare"
:onClick="wxShare"
/>
<IconButton
v-if="isMember"
name="教练点评"
src="../static/review.png"
:onClick="openCoachComment"
:onClick="() => (showComment = true)"
/>
</block>
<SButton
:width="validArrows === total ? '70vw' : 'calc(100vw - 20px)'"
:width="finished ? '70vw' : 'calc(100vw - 20px)'"
:rounded="30"
:onClick="closePanel"
>{{ validArrows === total ? "完成" : "返回" }}</SButton
>{{ finished ? "完成" : "重新挑战" }}</SButton
>
</view>
</view>
@@ -146,35 +128,28 @@ const openCoachComment = () => {
}}</text
>环的成绩所有箭支上靶后的平均点间距为<text
:style="{ color: '#fed847' }"
>{{ Number((result?.interpretation?.spreadStability || 0).toFixed(2)) }}</text
>{{ Number(result.average_distance.toFixed(2)) }}</text
>{{
result.spreadEvaluation === "Dispersed"
? "还需要持续改进哦~"
? "还需要持续改进"
: "成绩优秀。"
}}
</text>
<view>
<image
src="https://static.shelingxingqiu.com/attachment/2025-11-26/deihtj15xjwcz3c1tx.png"
mode="widthFix"
/>
<text :style="{ marginTop: '12px' }"
>针对您本次的练习{{
result.spreadEvaluation === "Dispersed"
? "我们建议您充分练习推弓、靠位以及撒放动作一致性。"
: totalRing >= 100
? "我们建议您继续保持即可。"
: `我们建议您将设备的瞄准器${
directionAdjusts[result.adjustmentHint]
}调整。`
}}</text
>
</view>
<text :style="{ marginTop: '12px' }"
>针对您本次的练习{{
result.spreadEvaluation === "Dispersed"
? "我们建议您充分练习推弓、靠位以及撒放动作一致性,以持续提高成绩。"
: totalRing >= 100
? "我们建议您继续保持即可。"
: `我们建议您将设备的瞄准器${
directionAdjusts[result.adjustmentHint]
}调整。`
}}</text
>
</view>
</ScreenHint>
<BowData
:total="arrows.length"
:arrows="result.details"
:arrows="result.arrows"
:show="showBowData"
:onClose="() => (showBowData = false)"
/>
@@ -194,7 +169,7 @@ const openCoachComment = () => {
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 999;
z-index: 5;
}
.container-header {
margin-top: 20vh;
@@ -251,12 +226,11 @@ const openCoachComment = () => {
text-align: center;
line-height: 27px;
color: #333333;
font-size: 28rpx;
}
.container-content > view:nth-child(2) > view > text {
font-size: 20rpx;
font-size: 12px;
color: #666666;
margin-left: 5rpx;
margin-left: 3px;
}
.container-content > view:nth-child(3) {
width: 100%;
@@ -272,13 +246,6 @@ const openCoachComment = () => {
display: flex;
flex-direction: column;
font-size: 14px;
}
.coach-comment > view {
display: flex;
}
.coach-comment > view > image {
width: 420rpx;
height: 420rpx;
margin-right: 20rpx;
margin-top: -20px;
}
</style>
+4 -4
View File
@@ -27,22 +27,22 @@ const getContentHeight = () => {
<view class="scale-in" :style="{ height: getContentHeight() }">
<image
v-if="mode === 'normal'"
src="https://static.shelingxingqiu.com/shootmini/static/screen-hint-bg.png"
src="../static/screen-hint-bg.png"
mode="widthFix"
/>
<image
v-if="mode === 'tall'"
src="https://static.shelingxingqiu.com/shootmini/static/coach-comment.png"
src="../static/coach-comment.png"
mode="widthFix"
/>
<image
v-if="mode === 'square'"
src="https://static.shelingxingqiu.com/shootmini/static/prompt-bg-square.png"
src="../static/prompt-bg-square.png"
mode="widthFix"
/>
<image
v-if="mode === 'small'"
src="https://static.shelingxingqiu.com/shootmini/static/finish-frame.png"
src="../static/finish-frame.png"
mode="widthFix"
/>
<slot />
+1 -1
View File
@@ -20,7 +20,7 @@ const props = defineProps({
<template>
<view class="container" :style="{ display: show ? 'flex' : 'none' }">
<view class="scale-in">
<image src="https://static.shelingxingqiu.com/shootmini/static/point-book-tip-bg.png" mode="widthFix" />
<image src="../static/point-book-tip-bg.png" mode="widthFix" />
<slot />
</view>
<IconButton
+5 -6
View File
@@ -59,8 +59,9 @@ onShow(async () => {
<scroll-view
class="scroll-list"
scroll-y
enable-flex="true"
:show-scrollbar="false"
:enhanced="true"
enhanced="true"
:bounces="false"
refresher-default-style="white"
:refresher-enabled="true"
@@ -73,8 +74,8 @@ onShow(async () => {
>
<slot></slot>
<view class="tips">
<text v-if="loading">加载中...</text>
<text v-if="noMore">{{ count === 0 ? "暂无数据" : "没有更多了" }}</text>
<text v-if="loading">Loading...</text>
<text v-if="noMore">{{ count === 0 ? "No data" : "Thats all" }}</text>
</view>
</scroll-view>
</template>
@@ -83,9 +84,7 @@ onShow(async () => {
.scroll-list {
width: 100%;
height: 100%;
}
.tips {
height: 50rpx;
flex-direction: column;
}
.tips > text {
color: #d0d0d0;
+83 -97
View File
@@ -1,14 +1,11 @@
<script setup>
import { ref, watch, onMounted, onBeforeUnmount, computed } from "vue";
import { ref, watch, onMounted, onBeforeUnmount } from "vue";
import audioManager from "@/audioManager";
import { MESSAGETYPESV2 } from "@/constants";
import { getDirectionText } from "@/util";
import { MESSAGETYPES } from "@/constants";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
const props = defineProps({
show: {
type: Boolean,
@@ -38,30 +35,17 @@ const props = defineProps({
type: Boolean,
default: false,
},
halfRest: {
type: Boolean,
default: false,
},
onStop: {
type: Function,
default: () => {},
},
endAudioKey: {
type: String,
default: "比赛结束",
},
});
const barColor = ref("#fed847");
const remain = ref(props.total);
const timer = ref(null);
const sound = ref(true);
const currentSound = ref("");
const currentRound = ref(props.currentRound);
const currentRoundEnded = ref(false);
const ended = ref(false);
const halfTime = ref(false);
const wait = ref(0);
const transitionStyle = ref("all 1s linear");
watch(
() => props.tips,
@@ -69,7 +53,7 @@ watch(
let key = "";
if (newVal.includes("红队")) key = "请红方射箭";
if (newVal.includes("蓝队")) key = "请蓝方射箭";
if (key) {
if (key && sound.value) {
if (currentRoundEnded.value) {
currentRound.value += 1;
currentRoundEnded.value = false;
@@ -88,40 +72,17 @@ watch(
}
);
const resetTimer = (count) => {
if (timer.value) clearInterval(timer.value);
const newVal = Math.round(count);
// 如果剩余时间增加(如重置),瞬间变化无动画
if (newVal >= remain.value) {
transitionStyle.value = "none";
remain.value = newVal;
setTimeout(() => {
transitionStyle.value = "all 1s linear";
}, 50);
} else {
remain.value = newVal;
}
if (remain.value > 0) {
timer.value = setInterval(() => {
if (remain.value === 0) {
clearInterval(timer.value);
props.onStop();
}
if (remain.value > 0) remain.value--;
}, 1000);
}
};
watch(
() => props.start,
() => props.tips,
(newVal) => {
if (newVal) {
resetTimer(props.total);
} else {
remain.value = 0;
clearInterval(timer.value);
if (newVal.includes("红队")) barColor.value = "#FF6060";
if (newVal.includes("蓝队")) barColor.value = "#5FADFF";
if (newVal.includes("红队") || newVal.includes("蓝队")) {
if (timer.value) clearInterval(timer.value);
remain.value = props.total;
timer.value = setInterval(() => {
if (remain.value > 0) remain.value--;
}, 1000);
}
},
{
@@ -129,67 +90,92 @@ watch(
}
);
const tipContent = computed(() => {
if (halfTime.value) {
return props.battleId ? "中场休息" : `中场休息(${wait.value}秒)`;
watch(
() => props.start,
(newVal) => {
if (timer.value) clearInterval(timer.value);
if (newVal) {
remain.value = props.total;
timer.value = setInterval(() => {
if (remain.value > 0) remain.value--;
}, 1000);
}
},
{
immediate: true,
}
return props.start && remain.value === 0 ? "时间到!" : props.tips;
});
);
const updateRemain = (value) => {
if (timer.value) clearInterval(timer.value);
remain.value = Math.round(value);
if (remain.value > 0) {
timer.value = setInterval(() => {
if (remain.value > 0) remain.value--;
}, 1000);
}
};
const updateSound = () => {
sound.value = !sound.value;
audioManager.setMuted(!sound.value);
if (!sound.value) audioManager.stop(currentSound.value);
};
async function onReceiveMessage(msg) {
if (Array.isArray(msg)) return;
if (msg.type === MESSAGETYPESV2.BattleStart) {
const audioKey = props.melee && (halfTime.value || props.halfRest) ? "下半场开始" : "比赛开始";
halfTime.value = false;
audioManager.play(audioKey);
} else if (msg.type === MESSAGETYPESV2.BattleEnd) {
audioManager.play(props.endAudioKey, false);
} else if (msg.type === MESSAGETYPESV2.ShootResult) {
let arrow = {};
if (msg.details && Array.isArray(msg.details)) {
arrow = msg.details[msg.details.length - 1];
} else {
if (!msg.shootData || String(msg.shootData.playerId) !== String(user.value.id)) return;
if (msg.shootData) arrow = msg.shootData;
async function onReceiveMessage(messages = []) {
if (!sound.value || ended.value) return;
messages.forEach((msg) => {
if (
(props.battleId && msg.constructor === MESSAGETYPES.ShootResult) ||
(!props.battleId && msg.constructor === MESSAGETYPES.ShootSyncMeArrowID)
) {
if (props.melee && msg.userId !== user.value.id) return;
if (!halfTime.value && msg.target) {
currentSound.value = msg.target.ring
? `${msg.target.ring}`
: "未上靶";
audioManager.play(currentSound.value);
}
} else if (msg.constructor === MESSAGETYPES.InvalidShot) {
if (msg.userId === user.value.id) {
uni.showToast({
title: "距离不足,无效",
icon: "none",
});
audioManager.play("射击无效");
}
} else if (msg.constructor === MESSAGETYPES.AllReady) {
audioManager.play("比赛开始");
} else if (msg.constructor === MESSAGETYPES.MeleeAllReady) {
halfTime.value = false;
audioManager.play("比赛开始");
} else if (msg.constructor === MESSAGETYPES.CurrentRoundEnded) {
currentRoundEnded.value = true;
} else if (msg.constructor === MESSAGETYPES.HalfTimeOver) {
halfTime.value = true;
audioManager.play("中场休息");
} else if (msg.constructor === MESSAGETYPES.MatchOver) {
audioManager.play("比赛结束");
} else if (msg.constructor === MESSAGETYPES.FinalShoot) {
audioManager.play("决金箭轮");
} else if (msg.constructor === MESSAGETYPES.MatchOver) {
ended.value = true;
}
let key = [];
key.push(arrow.ring ? `${arrow.ringX ? "X" : arrow.ring}` : "未上靶");
if (arrow.angle)
key.push(`${getDirectionText(arrow.angle)}调整`);
const shouldPlayTententen =
arrow.threeConsecutive10Rings === true ||
msg.shootData?.threeConsecutive10Rings === true;
if (!props.melee && shouldPlayTententen) key.push("tententen");
audioManager.play(key, false);
} else if (msg.type === MESSAGETYPESV2.HalfRest) {
halfTime.value = true;
audioManager.play("中场休息");
} else if (msg.type === MESSAGETYPESV2.InvalidShot) {
uni.showToast({
title: "距离不足,无效",
icon: "none",
});
audioManager.play("射击无效");
}
});
}
const playSound = (key) => {
currentSound.value = key;
audioManager.play(key);
};
onMounted(() => {
uni.$on("update-remain", resetTimer);
uni.$on("update-ramain", updateRemain);
uni.$on("socket-inbox", onReceiveMessage);
uni.$on("play-sound", playSound);
});
onBeforeUnmount(() => {
uni.$off("update-remain", resetTimer);
uni.$off("update-ramain", updateRemain);
uni.$off("socket-inbox", onReceiveMessage);
uni.$off("play-sound", playSound);
if (timer.value) clearInterval(timer.value);
@@ -199,8 +185,8 @@ onBeforeUnmount(() => {
<template>
<view class="container" :style="{ display: show ? 'block' : 'none' }">
<view>
<image src="https://static.shelingxingqiu.com/shootmini/static/shooter.png" mode="widthFix" />
<text>{{ tipContent }}</text>
<image src="../static/shooter.png" mode="widthFix" />
<text>{{ start && remain === 0 ? "时间到!" : tips }}</text>
<button hover-class="none" @click="updateSound">
<image
:src="`../static/sound${sound ? '' : '-off'}-yellow.png`"
@@ -214,7 +200,6 @@ onBeforeUnmount(() => {
width: `${(remain / total) * 100}%`,
backgroundColor: barColor,
right: tips.includes('红队') ? 0 : 'unset',
transition: transitionStyle,
}"
/>
<text>剩余{{ remain }}</text>
@@ -269,6 +254,7 @@ onBeforeUnmount(() => {
height: 15px;
border-radius: 15px;
z-index: -1;
transition: all 1s linear;
}
.container > view:last-child > text {
font-size: 10px;
+45 -110
View File
@@ -1,7 +1,6 @@
<script setup>
import {ref, watch, onMounted, onBeforeUnmount} from "vue";
import {RoundGoldImages} from "@/constants";
import { ref, watch, onMounted, onBeforeUnmount } from "vue";
import { RoundGoldImages } from "@/constants";
const props = defineProps({
tips: {
type: String,
@@ -20,117 +19,57 @@ const props = defineProps({
const barColor = ref("");
const remain = ref(15);
const timer = ref(null);
const loading = ref(false);
const transitionStyle = ref("all 1s linear");
const currentTeam = ref(null);
watch(
() => props.tips,
(newVal) => {
if (newVal.includes("红队"))
barColor.value = "linear-gradient( 180deg, #FFA0A0 0%, #FF6060 100%)";
if (newVal.includes("蓝队"))
barColor.value = "linear-gradient( 180deg, #9AB3FF 0%, #4288FF 100%)";
if (newVal.includes("红队") || newVal.includes("蓝队")) {
if (timer.value) clearInterval(timer.value);
remain.value = props.total;
timer.value = setInterval(() => {
if (remain.value > 0) remain.value--;
}, 1000);
}
},
{
immediate: true,
}
);
const updateRemain = (value) => {
if (value.stop) {
if (timer.value) clearInterval(timer.value);
return
}
// zeroThenResetToSomeoneShoot 到达时,若进度条仍在倒计时则先瞬间清零(约 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;
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%)";
if (value.reset) {
// 重置前先清除旧计时器,防止超时未射箭时旧 interval 残留,导致进度条震荡
if (timer.value) clearInterval(timer.value);
// 重置时瞬间跳满格,禁用 CSS 过渡避免从旧值「涨到满」的动画
transitionStyle.value = "none";
remain.value = value.value;
setTimeout(() => {
transitionStyle.value = "all 1s linear";
}, 50);
return;
}
const newVal = Math.round(value.value);
// 如果剩余时间增加(如轮次切换重置),瞬间变化无动画;否则保持动画
if (newVal >= remain.value) {
transitionStyle.value = "none";
remain.value = newVal;
setTimeout(() => {
transitionStyle.value = "all 1s linear";
}, 50);
} else {
remain.value = newVal;
}
// 启动前先清除旧计时器,防止多次 {stop:false} 事件叠加多个 interval
if (timer.value) clearInterval(timer.value);
remain.value = Math.round(value);
timer.value = setInterval(() => {
loading.value = remain.value === 0;
if (remain.value > 0) remain.value--;
}, 1000);
};
watch(
() => props.tips,
(newVal) => {
},
{
immediate: true,
}
);
onMounted(() => {
uni.$on("update-remain", updateRemain);
uni.$on("update-ramain", updateRemain);
});
onBeforeUnmount(() => {
uni.$off("update-remain", updateRemain);
uni.$off("update-ramain", updateRemain);
if (timer.value) clearInterval(timer.value);
});
</script>
<template>
<view class="container">
<image :src="RoundGoldImages[props.currentRound]" mode="widthFix"/>
<view
:style="{
justifyContent: currentTeam==='red' ? 'flex-end' : 'flex-start',
}"
>
<image :src="RoundGoldImages[props.currentRound]" mode="widthFix" />
<view>
<view
:style="{
:style="{
width: `${(remain / total) * 100}%`,
background: barColor,
right: currentTeam==='red' ? 0 : 'unset',
transition: transitionStyle,
right: tips.includes('红队') ? 0 : 'unset',
}"
/>
<text v-if="!loading">剩余{{ remain }}</text>
<text v-else>···</text>
<text>剩余{{ remain }}</text>
</view>
</view>
</template>
@@ -141,37 +80,33 @@ onBeforeUnmount(() => {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 12vw;
}
.container > image {
width: 380rpx;
height: 80rpx;
transform: translateY(18rpx);
width: 100%;
transform: translateY(7px);
}
.container > view:last-child {
width: 100%;
text-align: center;
background-color: #444444;
border-radius: 20px;
height: 24rpx;
font-size: 12px;
height: 15px;
line-height: 15px;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
}
.container > view:last-child > view {
height: 24rpx;
border-radius: 15px;
}
.container > view:last-child > text {
font-size: 18rpx;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 15px;
border-radius: 15px;
transition: all 1s linear;
}
.container > view:last-child > text {
font-size: 10px;
line-height: 15px;
color: #fff;
position: relative;
}
</style>
+96 -169
View File
@@ -1,29 +1,13 @@
<script setup>
import { ref, watch } from "vue";
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import SModal from "@/components/SModal.vue";
import Avatar from "@/components/Avatar.vue";
import SButton from "@/components/SButton.vue";
import { wxLogin } from "@/util";
import {
getMyDevicesAPI,
loginAPI,
getHomeData,
getPhoneNumberAPI,
getPhoneNumberAPIv2,
getDeviceBatteryAPI,
} from "@/apis";
import { getMyDevicesAPI, loginAPI, getHomeData } from "@/apis";
import useStore from "@/store";
const store = useStore();
const { updateUser, updateDevice, updateOnline, clearDevice } = store;
const { updateUser, updateDevice } = store;
const props = defineProps({
show: {
type: Boolean,
default: false,
},
noBg: {
type: Boolean,
default: false,
@@ -34,7 +18,6 @@ const props = defineProps({
},
});
const agree = ref(false);
const phone = ref("");
const avatarUrl = ref("");
const nickName = ref("");
const loading = ref(false);
@@ -42,17 +25,6 @@ const handleAgree = () => {
agree.value = !agree.value;
};
async function getphonenumber(e) {
if (e.detail.code) {
// const wxResult = await wxLogin();
const result = await getPhoneNumberAPIv2({
// ...e.detail,
code: e.detail.code,
});
if (result.purePhoneNumber) phone.value = result.purePhoneNumber;
}
}
function onChooseAvatar(e) {
avatarUrl.value = e.detail.avatarUrl;
}
@@ -61,29 +33,8 @@ function onNicknameChange(e) {
nickName.value = e.detail.value;
}
const resetForm = () => {
loading.value = false;
agree.value = false;
phone.value = "";
avatarUrl.value = "";
nickName.value = "";
};
watch(
() => props.show,
(show) => {
if (show) resetForm();
}
);
const handleLogin = async () => {
const handleLogin = () => {
if (loading.value) return;
if (!phone.value) {
return uni.showToast({
title: "请获取手机号",
icon: "none",
});
}
if (!avatarUrl.value) {
return uni.showToast({
title: "请选择头像",
@@ -102,36 +53,35 @@ const handleLogin = async () => {
icon: "none",
});
}
await doLogin();
};
async function doLogin() {
loading.value = true;
try {
const wxResult = await wxLogin();
const fileManager = uni.getFileSystemManager();
const avatarBase64 = fileManager.readFileSync(avatarUrl.value, "base64");
const base64Url = `data:image/png;base64,${avatarBase64}`;
await loginAPI(phone.value, nickName.value, base64Url, wxResult.code);
const data = await getHomeData();
if (data.user) updateUser(data.user);
const devices = await getMyDevicesAPI();
if (devices.bindings && devices.bindings.length) {
updateDevice(
devices.bindings[0].deviceId,
devices.bindings[0].deviceName
);
const data = await getDeviceBatteryAPI();
updateOnline(data.online);
} else {
clearDevice();
}
props.onClose();
} catch (error) {
console.log("login error", error);
} finally {
loading.value = false;
}
uni.login({
provider: "weixin",
success: async (loginRes) => {
const { code } = loginRes;
const fileManager = uni.getFileSystemManager();
const avatarBase64 = fileManager.readFileSync(avatarUrl.value, "base64");
const base64Url = `data:image/png;base64,${avatarBase64}`;
const result = await loginAPI(nickName.value, base64Url, code);
const data = await getHomeData();
if (data.user) updateUser(data.user);
const devices = await getMyDevicesAPI();
if (devices.bindings && devices.bindings.length) {
updateDevice(
devices.bindings[0].deviceId,
devices.bindings[0].deviceName
);
}
props.onClose();
},
fail: (err) => {
loading.value = false;
uni.showToast({
title: "登录失败",
icon: "none",
});
console.error("登录失败:", err);
},
});
};
const openServiceLink = () => {
@@ -155,96 +105,73 @@ const openPrivacyLink = () => {
};
onShow(() => {
resetForm();
loading.value = false;
});
</script>
<template>
<SModal :show="show" :onClose="onClose" :noBg="noBg">
<view class="container" :style="{ background: noBg ? '#fff' : 'none' }">
<view class="avatar" :style="{ borderColor: noBg ? '#E3E3E3' : '#fff3' }">
<text :style="{ color: noBg ? '#666' : '#fff' }">手机:</text>
<button
:open-type="!phone ? 'getPhoneNumber' : ''"
@getphonenumber="getphonenumber"
class="login-btn"
hover-class="none"
>
<text v-if="phone" :style="{ color: noBg ? '#333' : '#fff' }">{{
phone
}}</text>
<text v-else :style="{ color: noBg ? '#666' : '#fff9' }"
>点击获取</text
>
<image src="../static/enter.png" mode="widthFix" />
</button>
</view>
<view class="avatar" :style="{ borderColor: noBg ? '#E3E3E3' : '#fff3' }">
<text :style="{ color: noBg ? '#666' : '#fff' }">头像:</text>
<button
open-type="chooseAvatar"
@chooseavatar="onChooseAvatar"
class="login-btn"
hover-class="none"
>
<Avatar v-if="avatarUrl" :src="avatarUrl" :size="30" />
<text v-else :style="{ color: noBg ? '#666' : '#fff9' }"
>点击获取</text
>
<image src="../static/enter.png" mode="widthFix" />
</button>
</view>
<view
class="nickname"
:style="{ borderColor: noBg ? '#E3E3E3' : '#fff3' }"
<view class="container" :style="{ background: noBg ? '#fff' : 'none' }">
<view class="avatar" :style="{ borderColor: noBg ? '#E3E3E3' : '#fff' }">
<text :style="{ color: noBg ? '#666' : '#fff' }">头像:</text>
<button
open-type="chooseAvatar"
@chooseavatar="onChooseAvatar"
class="login-btn"
hover-class="none"
>
<text :style="{ color: noBg ? '#666' : '#fff' }">昵称:</text>
<input
type="nickname"
:value="nickName"
placeholder="请输入昵称"
:placeholder-style="`color: ${noBg ? '#666' : '#fff9'} `"
@input="onNicknameChange"
@change="onNicknameChange"
:style="{ color: noBg ? '#333' : '#fff' }"
<Avatar v-if="avatarUrl" :src="avatarUrl" :size="30" />
<text v-else :style="{ color: noBg ? '#666' : '#fff9' }">点击获取</text>
<image src="../static/enter.png" mode="widthFix" />
</button>
</view>
<view class="nickname" :style="{ borderColor: noBg ? '#E3E3E3' : '#fff' }">
<text :style="{ color: noBg ? '#666' : '#fff' }">昵称:</text>
<input
type="nickname"
placeholder="请输入昵称"
:placeholder-style="{ color: noBg ? '#666' : '#fff9' }"
@change="onNicknameChange"
@blur="onNicknameBlur"
:style="{ color: noBg ? '#333' : '#fff' }"
/>
</view>
<SButton :rounded="20" width="80vw" :onClick="handleLogin">
<block v-if="!loading">
<image
src="../static/wechat-icon.png"
mode="widthFix"
class="wechat-icon"
/>
</view>
<SButton :rounded="20" width="80vw" :onClick="handleLogin">
<block v-if="!loading">
<text :style="{ color: '#000' }">手机号快捷登录</text>
</block>
<block v-else>
<image
src="../static/btn-loading.png"
mode="widthFix"
class="loading"
/>
</block>
</SButton>
<view class="protocol" @click="handleAgree">
<text :style="{ color: '#000' }">登录/注册</text>
</block>
<block v-else>
<image
src="../static/btn-loading.png"
mode="widthFix"
class="loading"
/>
</block>
</SButton>
<view class="protocol" @click="handleAgree">
<view v-if="!agree" :style="{ borderColor: noBg ? '#E3E3E3' : '#fff' }" />
<image v-if="agree" src="../static/checked.png" mode="widthFix" />
<view>
<text>已同意并阅读</text>
<view
v-if="!agree"
:style="{ borderColor: noBg ? '#E3E3E3' : '#fff' }"
/>
<image v-if="agree" src="../static/checked.png" mode="widthFix" />
<view>
<text>已同意并阅读</text>
<view
@click.stop="openServiceLink"
:style="{ color: noBg ? '#333' : '#ffffff99' }"
>用户协议</view
>
<text></text>
<view
@click.stop="openPrivacyLink"
:style="{ color: noBg ? '#333' : '#ffffff99' }"
>隐私协议</view
>
<text>内容</text>
</view>
@click.stop="openServiceLink"
:style="{ color: noBg ? '#333' : '#fff' }"
>用户协议</view
>
<text></text>
<view
@click.stop="openPrivacyLink"
:style="{ color: noBg ? '#333' : '#fff' }"
>隐私协议</view
>
<text>内容</text>
</view>
</view>
</SModal>
</view>
</template>
<style scoped>
@@ -264,7 +191,7 @@ onShow(() => {
display: flex;
align-items: center;
margin-bottom: 20px;
border-bottom: 1rpx solid #ffffff1a;
border-bottom: 1rpx solid #fff3;
}
.avatar {
margin: 0;
@@ -273,7 +200,7 @@ onShow(() => {
.nickname > text {
width: 20%;
font-size: 14px;
line-height: 120rpx;
line-height: 55px;
}
.avatar > button > text {
color: #fff9;
@@ -282,7 +209,7 @@ onShow(() => {
.nickname > input {
flex: 1;
font-size: 14px;
line-height: 120rpx;
line-height: 55px;
}
.wechat-icon {
width: 24px;
@@ -293,8 +220,8 @@ onShow(() => {
display: flex;
justify-content: center;
align-items: center;
font-size: 22rpx;
margin: 30rpx 0;
font-size: 13px;
margin-top: 15px;
color: #8a8a8a;
}
.protocol > image {
@@ -307,7 +234,7 @@ onShow(() => {
height: 14px;
border-radius: 50%;
margin-right: 10px;
border: 1px solid #fff;
border: 1rpx solid #fff;
}
.protocol > view:last-child {
display: flex;
+60
View File
@@ -0,0 +1,60 @@
<script setup>
import { ref, watch, onMounted, onBeforeUnmount } from "vue";
const props = defineProps({
start: {
type: Boolean,
default: false,
},
});
const count = ref(4);
const timer = ref(null);
const isIos = ref(true);
watch(
() => props.start,
(newVal) => {
if (newVal) {
if (timer.value) clearInterval(timer.value);
count.value = 4;
timer.value = setInterval(() => {
if (count.value <= 1) {
clearInterval(timer.value);
}
count.value -= 1;
}, 1000);
}
},
{
immediate: true,
}
);
onMounted(() => {
const deviceInfo = uni.getDeviceInfo();
isIos.value = deviceInfo.osName === "ios";
});
onBeforeUnmount(() => {
if (timer.value) clearInterval(timer.value);
});
</script>
<template>
<view class="container" :style="{ top: `calc(50% - ${isIos ? 56 : 64}px)` }">
<view class="number pump-in" v-if="count === 3">3</view>
<view class="number pump-in" v-if="count === 2">2</view>
<view class="number pump-in" v-if="count === 1">1</view>
</view>
</template>
<style scoped>
.container {
position: absolute;
top: calc(50% - 64px);
left: calc(50% - 30px);
}
.number {
color: #fff9;
font-size: 88px;
width: 60px;
text-align: center;
}
</style>
+4 -15
View File
@@ -1,5 +1,5 @@
<script setup>
import { ref, watch } from "vue";
import { ref } from "vue";
const props = defineProps({
interval: {
@@ -14,24 +14,13 @@ const props = defineProps({
type: Array,
default: () => [],
},
current: {
type: Number,
default: 0,
},
onChange: {
type: Function,
default: (index) => {},
},
});
const currentIndex = ref(props.current);
watch(
() => props.current,
(index) => {
currentIndex.value = index;
}
);
const currentIndex = ref(0);
const handleChange = (e) => {
currentIndex.value = e.detail.current;
@@ -86,7 +75,7 @@ const handleChange = (e) => {
.dots {
position: absolute;
bottom: 2%;
bottom: 15%;
left: 50%;
transform: translateX(-50%);
display: flex;
@@ -101,6 +90,6 @@ const handleChange = (e) => {
}
.dot.active {
background-color: #fed847;
background-color: #000;
}
</style>
-531
View File
@@ -1,531 +0,0 @@
<script setup>
import { computed, getCurrentInstance, nextTick, onMounted, ref, watch } from "vue";
const defaultCanvasSize = 300;
const defaultRingCount = 10;
const props = defineProps({
// canvas 唯一标识;不传时组件内部自动生成,避免多个靶面 canvas-id 冲突。
canvasId: {
type: String,
default: "",
},
// 业务坐标半径,例如 20 表示命中点坐标范围为 -20 到 20。
// 当前组件主要用它参与重绘判断,外层命中点定位也应使用同一半径。
coordinateRadius: {
type: Number,
default: 20,
},
// 是否显示靶心十字辅助线。
showCrosshair: {
type: Boolean,
default: false,
},
// 是否显示环数文字。
showRingLabels: {
type: Boolean,
default: true,
},
// 从正上方开始顺时针等分的区域数量。
sectorCount: {
type: Number,
default: 0,
},
// 当前高亮区域,范围为 1 到 sectorCount。
activeSector: {
type: Number,
default: 0,
},
// 指定环数,1 到 10;无效值表示高亮整个区域。
activeRing: {
type: Number,
default: 0,
},
showSectorLabels: {
type: Boolean,
default: false,
},
// 只绘制透明高亮层,不绘制完整靶纸;用于叠加在靶纸图片上。
highlightOnly: {
type: Boolean,
default: false,
},
// 外部指定 canvas 绘制尺寸;用于让高亮层跟随靶图真实显示区域。
canvasWidth: {
type: Number,
default: 0,
},
canvasHeight: {
type: Number,
default: 0,
},
// 靶纸样式覆盖配置,例如环数、环色、环线颜色、环数字体等。
targetStyleConfig: {
type: Object,
default: () => ({}),
},
// 十字辅助线样式覆盖配置。
crosshairStyle: {
type: Object,
default: () => ({}),
},
// 区域分割线样式覆盖配置。
sectorStyle: {
type: Object,
default: () => ({}),
},
// 区域数字样式覆盖配置。
sectorLabelStyle: {
type: Object,
default: () => ({}),
},
// 高亮样式覆盖配置。
highlightStyle: {
type: Object,
default: () => ({}),
},
});
const instance = getCurrentInstance();
const localCanvasId = `target-canvas-${Math.random().toString(36).slice(2, 10)}`;
const currentCanvasId = computed(() => props.canvasId || localCanvasId);
const lastDrawKey = ref("");
const canvasSize = ref({
width: defaultCanvasSize,
height: defaultCanvasSize,
});
// 完整靶纸默认样式,调用方可以通过 targetStyleConfig 局部覆盖。
const defaultTargetStyleConfig = {
ringCount: defaultRingCount,
ringColors: {
1: "#f8f8f3",
2: "#f8f8f3",
3: "#595959",
4: "#595959",
5: "#24aee0",
6: "#24aee0",
7: "#ff1f35",
8: "#ff1f35",
9: "#f7d34a",
10: "#f7d34a",
},
ringLineColor: "rgba(150, 150, 150, 0.55)",
ringLineWidthRatio: 0.0022,
centerDotColor: "#ffffff",
centerDotRadiusRatio: 0.0048,
ringLabelFontRatio: 0.032,
ringLabelDarkColor: "#111111",
ringLabelLightColor: "#ffffff",
};
// 十字辅助线默认样式。
const defaultCrosshairStyle = {
color: "rgba(20, 20, 20, 0.38)",
lineWidthRatio: 0.0025,
};
// 顺时针等分线默认样式。
const defaultSectorStyle = {
color: "rgba(255, 255, 255, 0.82)",
lineWidthRatio: 0.004,
};
// 区域数字默认样式。
const defaultSectorLabelStyle = {
color: "#ffffff",
backgroundColor: "rgba(0, 0, 0, 0.62)",
fontSizeRatio: 0.075,
radiusRatio: 0.76,
badgeRadiusRatio: 0.07,
};
// 高亮区域默认样式。
const defaultHighlightStyle = {
color: "rgba(255, 228, 0, 0.6)",
strokeColor: "rgba(254, 216, 71, 0.82)",
lineWidthRatio: 0.003,
};
// 合并默认靶纸样式和外部传入样式,ringColors 单独深合并。
const mergeTargetStyleConfig = () => ({
...defaultTargetStyleConfig,
...props.targetStyleConfig,
ringColors: {
...defaultTargetStyleConfig.ringColors,
...(props.targetStyleConfig?.ringColors || {}),
},
});
// 统一把外部传入值转成有效数字,非法值使用 fallback。
const getNumber = (value, fallback = 0) => {
const numberValue = Number(value);
return Number.isFinite(numberValue) ? numberValue : fallback;
};
// 获取指定环数的填充色,兼容数字 key 和字符串 key。
const getRingColor = (ring, config) => {
return config.ringColors?.[ring] || config.ringColors?.[String(ring)] || "#ffffff";
};
const getPositiveInteger = (value) => {
const numberValue = Number(value);
return Number.isInteger(numberValue) && numberValue > 0 ? numberValue : 0;
};
// 正上方作为第一区起始边界,Canvas 角度递增方向即为顺时针。
const getSectorAngles = (sector, sectorCount) => {
const count = getPositiveInteger(sectorCount);
const index = getPositiveInteger(sector);
if (!count || !index || index > count) return null;
const step = (Math.PI * 2) / count;
const startAngle = -Math.PI / 2 + (index - 1) * step;
return {
startAngle,
endAngle: startAngle + step,
middleAngle: startAngle + step / 2,
};
};
// 绘制实心圆,靶纸环区和中心点都会用到。
const drawCircle = (ctx, centerX, centerY, radius, fillColor) => {
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
ctx.setFillStyle(fillColor);
ctx.fill();
};
// 绘制环形扇区,用于按象限高亮指定环数。
const drawAnnularSector = (
ctx,
centerX,
centerY,
innerRadius,
outerRadius,
startAngle,
endAngle,
fillColor,
strokeColor = "",
lineWidth = 0
) => {
ctx.beginPath();
ctx.arc(centerX, centerY, outerRadius, startAngle, endAngle);
if (innerRadius > 0) {
ctx.arc(centerX, centerY, innerRadius, endAngle, startAngle, true);
} else {
ctx.lineTo(centerX, centerY);
}
ctx.closePath();
ctx.setFillStyle(fillColor);
ctx.fill();
if (strokeColor && lineWidth > 0) {
ctx.setStrokeStyle(strokeColor);
ctx.setLineWidth(lineWidth);
ctx.stroke();
}
};
// 从外到内绘制完整靶纸色环。
const drawTargetRings = (ctx, centerX, centerY, targetRadius, config) => {
for (let ring = 1; ring <= config.ringCount; ring += 1) {
const radius = targetRadius * ((config.ringCount + 1 - ring) / config.ringCount);
drawCircle(ctx, centerX, centerY, radius, getRingColor(ring, config));
}
};
// 高亮后端指定区域;activeRing 有效时只高亮该区域内的单个环。
const drawSectorHighlight = (ctx, centerX, centerY, targetRadius, config) => {
const angles = getSectorAngles(props.activeSector, props.sectorCount);
if (!angles) return;
const ring = getPositiveInteger(props.activeRing);
const hasActiveRing = ring >= 1 && ring <= config.ringCount;
const innerRadius = hasActiveRing
? targetRadius * ((config.ringCount - ring) / config.ringCount)
: 0;
const outerRadius = hasActiveRing
? targetRadius * ((config.ringCount + 1 - ring) / config.ringCount)
: targetRadius;
const style = {
...defaultHighlightStyle,
...props.highlightStyle,
};
drawAnnularSector(
ctx,
centerX,
centerY,
innerRadius,
outerRadius,
angles.startAngle,
angles.endAngle,
style.color,
style.strokeColor,
Math.max(1, targetRadius * style.lineWidthRatio)
);
};
// 从正上方开始顺时针绘制所有区域边界。
const drawSectorLines = (ctx, centerX, centerY, targetRadius) => {
const count = getPositiveInteger(props.sectorCount);
if (!count) return;
const style = {
...defaultSectorStyle,
...props.sectorStyle,
};
const step = (Math.PI * 2) / count;
ctx.beginPath();
for (let index = 0; index < count; index += 1) {
const angle = -Math.PI / 2 + index * step;
ctx.moveTo(centerX, centerY);
ctx.lineTo(
centerX + Math.cos(angle) * targetRadius,
centerY + Math.sin(angle) * targetRadius
);
}
ctx.setStrokeStyle(style.color);
ctx.setLineWidth(Math.max(1, targetRadius * style.lineWidthRatio));
ctx.stroke();
};
// 绘制各环之间的分割线。
const drawRingLines = (ctx, centerX, centerY, targetRadius, config) => {
const lineWidth = Math.max(1, targetRadius * config.ringLineWidthRatio);
ctx.setStrokeStyle(config.ringLineColor);
ctx.setLineWidth(lineWidth);
for (let index = 1; index <= config.ringCount; index += 1) {
const radius = targetRadius * (index / config.ringCount);
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
ctx.stroke();
}
};
// 绘制靶心十字辅助线。
const drawCrosshair = (ctx, centerX, centerY, targetRadius) => {
if (!props.showCrosshair) {
return;
}
const style = {
...defaultCrosshairStyle,
...props.crosshairStyle,
};
ctx.beginPath();
ctx.moveTo(centerX - targetRadius, centerY);
ctx.lineTo(centerX + targetRadius, centerY);
ctx.moveTo(centerX, centerY - targetRadius);
ctx.lineTo(centerX, centerY + targetRadius);
ctx.setStrokeStyle(style.color);
ctx.setLineWidth(Math.max(1, targetRadius * style.lineWidthRatio));
ctx.stroke();
};
// 绘制环数文字。
const drawRingLabels = (ctx, centerX, centerY, targetRadius, config) => {
if (!props.showRingLabels) {
return;
}
const ringWidth = targetRadius / config.ringCount;
const fontSize = Math.max(10, targetRadius * config.ringLabelFontRatio);
ctx.setFontSize(fontSize);
ctx.setTextAlign("center");
ctx.setTextBaseline("middle");
for (let ring = config.ringCount; ring >= 1; ring -= 1) {
const y = centerY + (config.ringCount - ring + 0.45) * ringWidth;
const color = ring <= 2 ? config.ringLabelDarkColor : config.ringLabelLightColor;
ctx.setFillStyle(color);
ctx.fillText(String(ring), centerX, y);
}
};
// 在每个区域中线位置绘制编号,编号层始终位于高亮和分割线之上。
const drawSectorLabels = (ctx, centerX, centerY, targetRadius) => {
const count = getPositiveInteger(props.sectorCount);
if (!props.showSectorLabels || !count) return;
const style = {
...defaultSectorLabelStyle,
...props.sectorLabelStyle,
};
const labelRadius = targetRadius * style.radiusRatio;
const badgeRadius = Math.max(10, targetRadius * style.badgeRadiusRatio);
ctx.setFontSize(Math.max(11, targetRadius * style.fontSizeRatio));
ctx.setTextAlign("center");
ctx.setTextBaseline("middle");
for (let sector = 1; sector <= count; sector += 1) {
const angles = getSectorAngles(sector, count);
const x = centerX + Math.cos(angles.middleAngle) * labelRadius;
const y = centerY + Math.sin(angles.middleAngle) * labelRadius;
drawCircle(ctx, x, y, badgeRadius, style.backgroundColor);
ctx.setFillStyle(style.color);
ctx.fillText(String(sector), x, y);
}
};
// 生成本次绘制状态的唯一 key,用于避免相同内容重复 draw。
const getDrawKey = (width, height) => {
return JSON.stringify({
width,
height,
coordinateRadius: props.coordinateRadius,
showCrosshair: props.showCrosshair,
showRingLabels: props.showRingLabels,
sectorCount: props.sectorCount,
activeSector: props.activeSector,
activeRing: props.activeRing,
showSectorLabels: props.showSectorLabels,
targetStyleConfig: props.targetStyleConfig,
crosshairStyle: props.crosshairStyle,
sectorStyle: props.sectorStyle,
sectorLabelStyle: props.sectorLabelStyle,
highlightStyle: props.highlightStyle,
highlightOnly: props.highlightOnly,
});
};
// 主绘制入口:根据 highlightOnly 决定画完整靶纸,还是只画透明高亮层。
const drawTarget = () => {
const width = Math.max(getNumber(canvasSize.value.width, defaultCanvasSize), 1);
const height = Math.max(getNumber(canvasSize.value.height, defaultCanvasSize), 1);
const drawKey = getDrawKey(width, height);
if (drawKey === lastDrawKey.value) {
return;
}
const size = Math.min(width, height);
const centerX = width / 2;
const centerY = height / 2;
const targetRadius = size / 2;
const config = mergeTargetStyleConfig();
const ctx = uni.createCanvasContext(currentCanvasId.value, instance?.proxy);
ctx.clearRect(0, 0, width, height);
if (!props.highlightOnly) {
drawTargetRings(ctx, centerX, centerY, targetRadius, config);
}
drawSectorHighlight(ctx, centerX, centerY, targetRadius, config);
if (!props.highlightOnly) {
drawRingLines(ctx, centerX, centerY, targetRadius, config);
drawCircle(
ctx,
centerX,
centerY,
Math.max(1, targetRadius * config.centerDotRadiusRatio),
config.centerDotColor
);
drawCrosshair(ctx, centerX, centerY, targetRadius);
drawRingLabels(ctx, centerX, centerY, targetRadius, config);
}
// 高亮先画,等分线和编号后画,避免高亮覆盖区域边界。
drawSectorLines(ctx, centerX, centerY, targetRadius);
drawSectorLabels(ctx, centerX, centerY, targetRadius);
ctx.draw();
lastDrawKey.value = drawKey;
};
const setCanvasSizeAndDraw = async (width, height) => {
canvasSize.value = {
width: width > 0 ? width : defaultCanvasSize,
height: height > 0 ? height : width || defaultCanvasSize,
};
await nextTick();
drawTarget();
};
// 读取 canvas 实际渲染尺寸后再绘制,保证小程序真机尺寸和坐标一致。
const measureAndDraw = () => {
const propWidth = Math.round(getNumber(props.canvasWidth, 0));
const propHeight = Math.round(getNumber(props.canvasHeight, 0));
if (propWidth > 0 && propHeight > 0) {
setCanvasSizeAndDraw(propWidth, propHeight);
return;
}
const query = uni.createSelectorQuery().in(instance?.proxy);
query
.select(`#${currentCanvasId.value}`)
.boundingClientRect(async (rect) => {
const width = Math.round(getNumber(rect?.width, defaultCanvasSize));
const height = Math.round(getNumber(rect?.height, width || defaultCanvasSize));
await setCanvasSizeAndDraw(width, height);
})
.exec();
};
// 等待 Vue 完成 DOM 更新后重新测量和绘制。
const scheduleDraw = async () => {
await nextTick();
measureAndDraw();
};
watch(
() => [
props.coordinateRadius,
props.showCrosshair,
props.showRingLabels,
props.sectorCount,
props.activeSector,
props.activeRing,
props.showSectorLabels,
props.highlightOnly,
props.canvasWidth,
props.canvasHeight,
props.targetStyleConfig,
props.crosshairStyle,
props.sectorStyle,
props.sectorLabelStyle,
props.highlightStyle,
],
scheduleDraw,
{
deep: true,
}
);
onMounted(() => {
setTimeout(measureAndDraw, 30);
});
</script>
<template>
<canvas
:id="currentCanvasId"
class="target-canvas"
:canvas-id="currentCanvasId"
:width="canvasSize.width"
:height="canvasSize.height"
/>
</template>
<style scoped>
.target-canvas {
display: block;
width: 100%;
height: 100%;
}
</style>
-214
View File
@@ -1,214 +0,0 @@
<script setup>
import { ref, watch } from "vue";
import SButton from "@/components/SButton.vue";
import audioManager from "@/audioManager";
const props = defineProps({
show: {
type: Boolean,
default: false,
},
clickSound: {
type: Boolean,
default: false,
},
onClose: {
type: Function,
default: () => {},
},
onConfirm: {
type: Function,
default: () => {},
},
});
const selectedTarget = ref(2);
const showContainer = ref(false);
const showContent = ref(false);
watch(
() => props.show,
(newValue) => {
if (newValue) {
showContainer.value = true;
setTimeout(() => {
showContent.value = true;
}, 100);
} else {
showContent.value = false;
setTimeout(() => {
showContainer.value = false;
}, 100);
}
},
{}
);
const playClickSound = () => {
if (props.clickSound) {
audioManager.play("点击按钮");
}
};
const handleSelectTarget = (target) => {
playClickSound();
selectedTarget.value = target;
};
const handleConfirm = () => {
playClickSound();
props.onConfirm(selectedTarget.value);
props.onClose();
};
</script>
<template>
<view
class="container"
v-if="showContainer"
:class="{ 'container-show': showContent }"
@click="onClose"
>
<view
class="modal-content"
:class="{ 'modal-show': showContent }"
@click.stop=""
>
<view class="header">
<view class="header-title">
<view class="header-title-line-left"></view>
<text>选择靶型</text>
<view class="header-title-line-right"></view>
</view>
<view class="close-btn" @click="onClose">
<image src="../static/close-yellow.png" mode="widthFix" />
</view>
</view>
<view class="target-options">
<view
:class="{ 'target-btn': true, 'target-choosen': selectedTarget === 1 }"
@click="handleSelectTarget(1)"
>
<text>20厘米全环靶</text>
</view>
<view style="width: 30rpx"></view>
<view
:class="{ 'target-btn': true, 'target-choosen': selectedTarget === 2 }"
@click="handleSelectTarget(2)"
>
<text>40厘米全环靶</text>
</view>
</view>
<SButton width="694rpx" :onClick="handleConfirm">确定</SButton>
</view>
</view>
</template>
<style scoped>
.container {
position: fixed;
top: 0;
left: 0;
background-color: #00000099;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
opacity: 0;
transition: all 0.3s ease;
z-index: 999;
}
.container-show {
opacity: 1;
}
.modal-content {
width: 100%;
transform: translateY(100%);
transition: all 0.3s ease;
background: url("https://static.shelingxingqiu.com/attachment/2025-12-04/dep11770wzxg6o2alo.png")
no-repeat center top;
background-size: 100% auto;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
padding-bottom: 68rpx;
padding-top: 44rpx;
}
.modal-show {
transform: translateY(0%);
}
.header {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
margin-bottom: 44rpx;
}
.header-title{
display: flex;
align-items: center;
justify-content: center;
}
.header-title text{
width: 196rpx;
height: 40rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
text-align: center;
font-style: normal;
text-transform: none;
color: #FFEFBA;
}
.header-title-line-left{
width: 214rpx;
height: 0rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
border: 1rpx solid;
border-image: linear-gradient(90deg, rgba(133, 119, 96, 1), rgba(133, 119, 96, 0)) 1 1;
}
.header-title-line-right{
width: 214rpx;
height: 0rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
border: 1rpx solid;
border-image: linear-gradient(90deg, rgba(133, 119, 96, 1), rgba(133, 119, 96, 0)) 1 1;
}
.close-btn {
position: absolute;
right: 0;
top: -10px;
}
.close-btn > image {
width: 40px;
height: 40px;
}
.target-options {
width: 750rpx;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 38rpx;
}
.target-btn {
width: 332rpx;
height: 92rpx;
text-align: center;
border-radius: 10px;
border: 2rpx solid #fff3;
box-sizing: border-box;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.target-choosen {
color: #fed847;
border: 4rpx solid #fed847;
}
</style>
+54 -65
View File
@@ -1,5 +1,5 @@
<script setup>
import { ref, watch } from "vue";
import { ref, watch, onMounted } from "vue";
const props = defineProps({
isRed: {
type: Boolean,
@@ -10,55 +10,43 @@ const props = defineProps({
default: () => [],
},
currentShooterId: {
type: [Number, String],
type: Number,
default: "",
},
youTurn: {
type: Boolean,
default: false,
},
});
const players = ref({});
const currentTeam = ref(false);
const youTurn = ref(false);
const firstName = ref("");
// 抽出判断:当前队伍且该玩家排序为 0(队伍首位)
const isFirst = (id) =>
currentTeam.value && ((players.value[id] || {}).sort || 0) === 0;
const getPos = (id) => {
const sort = (players.value[id] || {}).sort || 0;
if (currentTeam.value) {
return 30 * (sort + Math.ceil(sort / 2));
}
return sort * 40;
};
const syncPlayers = () => {
const nextPlayers = {};
const shooterId = props.currentShooterId;
const shooterIndex = props.team.findIndex(
(p) => String(p?.id) === String(shooterId)
);
const nextTeam = [...props.team];
currentTeam.value = !!shooterId && shooterIndex >= 0;
firstName.value = "";
if (currentTeam.value) {
const target = nextTeam.splice(shooterIndex, 1)[0];
if (target) {
nextTeam.unshift(target);
firstName.value = target.name || "";
}
}
nextTeam.forEach((p, index) => {
if (p?.id) nextPlayers[p.id] = { sort: index, ...p };
onMounted(() => {
props.team.forEach((p, index) => {
players.value[p.id] = { sort: index, ...p };
});
players.value = nextPlayers;
};
});
watch(
[() => props.team, () => props.currentShooterId],
syncPlayers,
{ immediate: true, deep: true }
() => props.currentShooterId,
(newVal) => {
if (!newVal) return;
const index = props.team.findIndex((p) => p.id === newVal);
youTurn.value = index >= 0;
if (index >= 0) {
const newPlayers = [...props.team];
const target = newPlayers.splice(index, 1)[0];
if (target) {
newPlayers.unshift(target);
firstName.value = target.name;
newPlayers.forEach((p, index) => {
players.value[p.id] = { sort: index, ...p };
});
}
}
},
{ immediate: true }
);
</script>
@@ -67,38 +55,39 @@ watch(
<image
:src="isRed ? '../static/flag-red.png' : '../static/flag-blue.png'"
class="flag"
:style="{
[isRed ? 'left' : 'right']: '10rpx',
top: currentTeam ? '-36rpx' : '-24rpx',
}"
:style="{ [isRed ? 'left' : 'right']: '10rpx' }"
/>
<view
v-for="(item, index) in team"
:key="item.id || index"
:key="index"
class="player"
:style="{
width: (isFirst(item.id) ? 80 : 60) + 'rpx',
height: (isFirst(item.id) ? 80 : 60) + 'rpx',
zIndex: team.length - ((players[item.id] || {}).sort || 0),
border: isFirst(item.id) ? '3.5rpx solid' : '2rpx solid',
width:
(youTurn ? 40 - ((players[item.id] || {}).sort || 0) * 5 : 35) + 'px',
height:
(youTurn ? 40 - ((players[item.id] || {}).sort || 0) * 5 : 35) + 'px',
borderColor: isRed ? '#ff6060' : '#5fadff',
top: isFirst(item.id) ? '0rpx' : '12rpx',
[isRed ? 'left' : 'right']: getPos(item.id) + 'rpx',
zIndex: team.length - ((players[item.id] || {}).sort || 0),
top: youTurn ? ((players[item.id] || {}).sort || 0) * 2 + 'px' : '6px',
left:
(isRed
? ((players[item.id] || {}).sort || 0) * 20
: 40 - ((players[item.id] || {}).sort || 0) * 20) + 'px',
}"
>
<image :src="item.avatar || '../static/user-icon.png'" mode="widthFix" />
<text
v-if="isFirst(item.id)"
v-if="youTurn && ((players[item.id] || {}).sort || 0) === 0"
:style="{ backgroundColor: isRed ? '#ff6060' : '#5fadff' }"
>{{ isRed ? "红队" : "蓝队" }}</text
>
</view>
<text
v-if="currentTeam"
v-if="youTurn"
class="truncate"
:style="{
color: isRed ? '#ff6060' : '#5fadff',
[isRed ? 'left' : 'right']: '-4rpx',
[isRed ? 'left' : 'right']: 0,
}"
>{{ firstName }}</text
>
@@ -111,22 +100,22 @@ watch(
align-items: center;
position: relative;
width: 20vw;
height: 10rpx;
height: 45px;
margin: 0 20rpx;
}
.container > text {
position: absolute;
font-size: 20rpx;
font-size: 10px;
text-align: center;
width: 80rpx;
bottom: -100rpx;
width: 40px;
bottom: -12px;
}
.player {
transition: all 0.3s ease;
position: absolute;
border-radius: 50%;
overflow: hidden;
box-sizing: border-box;
border: 1px solid;
}
.player > image {
width: 100%;
@@ -134,17 +123,17 @@ watch(
}
.player > text {
position: absolute;
font-size: 15rpx;
font-size: 8px;
text-align: center;
width: 76rpx;
left: 0;
bottom: 0;
width: 40px;
left: 0px;
bottom: 0px;
color: #fff;
}
.flag {
position: absolute;
width: 45rpx;
height: 45rpx;
transition: all 0.3s ease;
top: -30rpx;
}
</style>
+214
View File
@@ -0,0 +1,214 @@
<script setup>
import { ref, watch } from "vue";
import BowTarget from "@/components/BowTarget.vue";
import Avatar from "@/components/Avatar.vue";
import { roundsName } from "@/constants";
const props = defineProps({
show: {
type: Boolean,
default: false,
},
onClose: {
type: Function,
default: () => {},
},
data: {
type: Object,
default: () => ({}),
},
});
const selected = ref(0);
const redScores = ref([]);
const blueScores = ref([]);
const tabs = ref(["所有轮次"]);
const players = ref([]);
const allRoundsScore = ref({});
const onClickTab = (index) => {
selected.value = index;
redScores.value = [];
blueScores.value = [];
const { bluePlayers, redPlayers, roundsData } = props.data;
if (index === 0) {
Object.keys(bluePlayers).forEach((p) => {
allRoundsScore.value[p] = [];
Object.values(roundsData).forEach((round) => {
allRoundsScore.value[p].push(
round[p].reduce((last, next) => last + next.ring, 0)
);
round[p].forEach((arrow) => {
blueScores.value.push(arrow);
});
});
});
Object.keys(redPlayers).forEach((p) => {
allRoundsScore.value[p] = [];
Object.values(roundsData).forEach((round) => {
allRoundsScore.value[p].push(
round[p].reduce((last, next) => last + next.ring, 0)
);
round[p].forEach((arrow) => {
redScores.value.push(arrow);
});
});
});
} else {
Object.keys(bluePlayers).forEach((p) => {
roundsData[index][p].forEach((arrow) => {
blueScores.value.push(arrow);
});
});
Object.keys(redPlayers).forEach((p) => {
roundsData[index][p].forEach((arrow) => {
redScores.value.push(arrow);
});
});
}
};
watch(
() => props.data,
(value) => {
if (value.winner === 0) {
players.value = [
...Object.values(value.redPlayers),
...Object.values(value.bluePlayers),
];
} else if (value.winner === 1) {
players.value = [
...Object.values(value.bluePlayers),
...Object.values(value.redPlayers),
];
}
Object.keys(value.roundsData).forEach((key) => {
tabs.value.push(`${roundsName[key]}`);
});
onClickTab(0);
},
{ deep: true, immediate: true }
);
</script>
<template>
<view class="container" :style="{ display: show ? 'flex' : 'none' }">
<view>
<text>1v1排位赛</text>
<view @click="onClose">
<image src="../static/close-white.png" mode="widthFix" />
</view>
</view>
<view>
<view
v-for="(tab, index) in tabs"
:key="index"
@click="() => onClickTab(index)"
:class="selected === index ? 'selected-tab' : ''"
>
{{ tab }}
</view>
</view>
<view :style="{ width: '95%' }">
<BowTarget :scores="redScores" :blueScores="blueScores" />
</view>
<view class="score-row" v-for="(player, index) in players" :key="index">
<Avatar
:src="player.avatar"
:borderColor="data.bluePlayers[player.playerId] ? 1 : 2"
/>
<view
v-if="selected === 0"
v-for="(ring, index) in allRoundsScore[player.playerId]"
:key="index"
class="score-item"
:style="{ width: '13vw', height: '13vw' }"
>
{{ ring }}
</view>
<view
v-if="selected > 0"
v-for="(score, index) in data.roundsData[selected][player.playerId]"
:key="index"
class="score-item"
:style="{ width: '13vw', height: '13vw' }"
>
{{ score.ring }}
</view>
</view>
</view>
</template>
<style scoped>
.container {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background-color: #232323;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 10;
}
.container > view:first-child {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 0;
color: #fff;
position: relative;
font-size: 20px;
}
.container > view:first-child > view:last-child {
position: absolute;
right: 5px;
top: 32px;
}
.container > view:first-child > view:last-child > image {
width: 40px;
}
.container > view:nth-child(2) {
display: flex;
align-items: center;
justify-content: flex-start;
width: calc(100% - 20px);
color: #fff9;
padding: 0 10px;
overflow-x: auto;
}
.container > view:nth-child(2)::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.container > view:nth-child(2) > view {
border: 1px solid #fff9;
border-radius: 20px;
padding: 7px 10px;
margin: 0 5px;
font-size: 14px;
flex: 0 0 auto;
}
.selected-tab {
background-color: #fed847;
border-color: #fed847 !important;
color: #000;
}
.score-row {
margin: 10px;
display: flex;
align-items: center;
justify-content: flex-start;
}
.score-item {
background-image: url("../static/score-bg.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
color: #fed847;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
margin-left: 10px;
}
</style>
+38 -31
View File
@@ -5,7 +5,8 @@ import BowPower from "@/components/BowPower.vue";
import Avatar from "@/components/Avatar.vue";
import audioManager from "@/audioManager";
import { simulShootAPI } from "@/apis";
import { MESSAGETYPESV2 } from "@/constants";
import { checkConnection } from "@/util";
import { MESSAGETYPES } from "@/constants";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
@@ -19,15 +20,13 @@ const props = defineProps({
type: Boolean,
default: false,
},
count: {
type: Number,
default: 15,
},
});
const arrow = ref({});
const power = ref(0);
const distance = ref(0);
const debugInfo = ref("");
const showsimul = ref(false);
const count = ref(props.count);
const count = ref(15);
const timer = ref(null);
const updateTimer = (value) => {
@@ -35,12 +34,10 @@ const updateTimer = (value) => {
};
onMounted(() => {
audioManager.play("请射箭测试距离");
if (props.isBattle) {
timer.value = setInterval(() => {
count.value -= 1;
if (count.value < 0) clearInterval(timer.value);
}, 1000);
}
timer.value = setInterval(() => {
if (count.value > 0) count.value -= 1;
else clearInterval(timer.value);
}, 1000);
uni.$on("update-timer", updateTimer);
});
onBeforeUnmount(() => {
@@ -48,18 +45,19 @@ onBeforeUnmount(() => {
uni.$off("update-timer", updateTimer);
});
async function onReceiveMessage(msg) {
if (Array.isArray(msg)) return;
if (msg.type === MESSAGETYPESV2.TestDistance) {
const rawDistance = Number(msg.shootData?.distance);
distance.value = Number.isFinite(rawDistance)
? Number((rawDistance / 100).toFixed(2))
: 0;
if (rawDistance === 0) {
audioManager.play("未发现靶纸,请瞄准靶纸射箭");
} else if (distance.value >= 5) audioManager.play("距离合格");
else audioManager.play("距离不足");
}
async function onReceiveMessage(messages = []) {
messages.forEach((msg) => {
if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
arrow.value = msg.target;
power.value = msg.target.battery;
distance.value = Number((msg.target.dst / 100).toFixed(2));
debugInfo.value = msg.target;
audioManager.play("距离合格");
} else if (msg.constructor === MESSAGETYPES.InvalidShot) {
distance.value = Number((msg.target.dst / 100).toFixed(2));
audioManager.play("距离不足");
}
});
}
const simulShoot = async () => {
@@ -67,6 +65,7 @@ const simulShoot = async () => {
};
onMounted(() => {
checkConnection();
uni.$on("socket-inbox", onReceiveMessage);
const accountInfo = uni.getAccountInfoSync();
const envVersion = accountInfo.miniProgram.envVersion;
@@ -81,9 +80,18 @@ onBeforeUnmount(() => {
<template>
<view class="container">
<Guide v-show="guide">
<view class="guide-tips">
<text>请确保站距达到5米</text>
<text>低于5米的射箭无效</text>
<view
:style="{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
paddingRight: '10px',
}"
>
<view :style="{ display: 'flex', flexDirection: 'column' }">
<text :style="{ color: '#fed847' }">请确保站距达到5米</text>
<text>低于5米的射箭无效</text>
</view>
</view>
</Guide>
<view class="test-area">
@@ -112,17 +120,16 @@ onBeforeUnmount(() => {
</view>
<view class="user-row">
<Avatar :src="user.avatar" :size="35" />
<BowPower />
<BowPower :power="power" />
</view>
</view>
<view v-if="isBattle" class="ready-timer">
<image src="https://static.shelingxingqiu.com/shootmini/static/test-tip.png" mode="widthFix" />
<view v-if="count >= 0">
<image src="../static/test-tip.png" mode="widthFix" />
<view>
<text>具体正式比赛还有</text>
<text>{{ count }}</text>
<text></text>
</view>
<view v-else> 进入中... </view>
</view>
</view>
</template>
+28 -44
View File
@@ -19,8 +19,6 @@ const nextLvlPoints = ref(0);
const containerWidth = computed(() =>
props.showRank ? "72%" : "calc(100% - 15px)"
);
const isSVip = computed(() => user.value.sVip === true);
const isVip = computed(() => user.value.vip === true && !isSVip.value);
const toUserPage = () => {
// 获取当前页面路径
const pages = getCurrentPages();
@@ -38,7 +36,6 @@ const toRankListPage = () => {
url: "/pages/rank-list",
});
};
watch(
() => [config.value, user.value],
([n_config, n_user]) => {
@@ -69,20 +66,9 @@ watch(
:onClick="toUserPage"
:size="42"
/>
<view class="user-details" @click="toUserPage">
<view class="user-details" :onClick="toUserPage">
<view class="user-name">
<view
:class="[
'member-nickname',
isVip ? 'member-nickname--vip' : '',
isSVip ? 'member-nickname--svip' : '',
]"
>
<text class="member-nickname__text">{{ user.nickName }}</text>
<text v-if="isSVip" class="member-nickname__shine">{{
user.nickName
}}</text>
</view>
<text>{{ user.nickName }}</text>
<image
class="user-name-image"
src="../static/vip1.png"
@@ -91,6 +77,7 @@ watch(
</view>
<view class="user-stats">
<text class="level-tag level-tag-first">段位积分</text>
<!-- <text class="level-tag level-tag-second">LV{{ user.lvl }}</text> -->
<view class="rank-tag">
<view
class="rank-tag-progress"
@@ -125,12 +112,12 @@ watch(
</view>
</block>
<block v-else>
<view class="signin" @click="onSignin">
<view class="signin">
<image src="../static/user-icon.png" mode="widthFix" />
<view>
<view @click="() => (showModal = true)">
<text>新来的弓箭手你好呀~</text>
<view>
<text>登录</text>
<view @click="onSignin">
<text>微信登录</text>
<image src="../static/enter-arrow-blue.png" mode="widthFix" />
</view>
</view>
@@ -161,19 +148,17 @@ watch(
margin-bottom: 5px;
}
.user-name .member-nickname {
max-width: 180rpx;
}
.user-name .member-nickname__text,
.user-name .member-nickname__shine {
.user-name > text:first-child {
font-size: 13px;
max-width: 180rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-name-image {
margin-left: 5px;
width: 40rpx;
height: 40rpx;
width: 20px;
}
.user-stats {
@@ -187,9 +172,13 @@ watch(
}
.level-tag-first {
padding: 0 10rpx;
width: 50px;
background: #5f51ff;
word-break: keep-all;
}
.level-tag-second {
width: 60rpx;
background: #09c504;
}
.level-tag,
@@ -201,17 +190,14 @@ watch(
.rank-tag {
position: relative;
background-color: #00000038;
width: 140rpx;
width: 150rpx;
overflow: hidden;
word-break: keep-all;
}
.rank-tag-progress {
background: #ffa711;
height: 100%;
border-radius: 12px;
width: 0;
transition: width 0.3s ease;
}
.rank-tag-text {
@@ -224,26 +210,24 @@ watch(
}
.rank-info {
width: 95px;
height: 50px;
font-size: 24rpx;
width: 70px;
text-align: left;
font-size: 12px;
position: relative;
color: #b3b3b3;
padding-left: 12px;
padding-left: 8px;
margin-left: 15rpx;
display: flex;
flex-direction: column;
justify-content: center;
}
.rank-info-image {
position: absolute;
top: 0;
left: 0;
width: 95px;
top: -6px;
left: -9px;
width: 90px;
}
.rank-info > text {
text-align: center;
word-break: keep-all;
width: 83px;
}
.rank-number {
display: block;
+5 -5
View File
@@ -54,23 +54,23 @@ onBeforeUnmount(() => {
<view v-if="showRank" class="up-rank">
<image :src="user.avatar || '../static/user-icon.png'" mode="widthFix" />
<image :src="nextRankImage" mode="widthFix" />
<image class="bg-effect" src="https://static.shelingxingqiu.com/shootmini/static/shining-bg.png" mode="widthFix" />
<image class="bg-effect" src="../static/shining-bg.png" mode="widthFix" />
<image
class="bg-effect"
src="https://static.shelingxingqiu.com/shootmini/static/gold-shining.png"
src="../static/gold-shining.png"
mode="widthFix"
/>
</view>
<view v-if="showGrade" class="up-grade">
<image
class="scale-in"
src="https://static.shelingxingqiu.com/shootmini/static/user-upgrade.png"
src="../static/user-upgrade.png"
mode="widthFix"
/>
<image class="bg-effect" src="https://static.shelingxingqiu.com/shootmini/static/shining-bg.png" mode="widthFix" />
<image class="bg-effect" src="../static/shining-bg.png" mode="widthFix" />
<image
class="bg-effect"
src="https://static.shelingxingqiu.com/shootmini/static/gold-shining.png"
src="../static/gold-shining.png"
mode="widthFix"
/>
</view>
+8 -27
View File
@@ -1,7 +1,6 @@
export const MESSAGETYPES = {
ShootSyncMeArrowID: parseInt("0x789b6b0d"), // 2023451405
ShootSyncMePracticeID: parseInt("0xD88AE05E"), // 3632980062
ShootSyncBattleCreateMatchLinkID: parseInt("0xF86FF466"), // 2538869862
WaitForAllReady: parseInt("0x615C13BE"), // 1633424318
AllReady: parseInt("0x1CCB49FD"), // 483084797
MeleeAllReady: parseInt("0x37132BD5"), // 924003285
@@ -25,35 +24,17 @@ export const MESSAGETYPES = {
LvlUpdate: 3958625354,
TeamUpdate: 4168086616,
InvalidShot: 4168086617,
Calibration: 4168086625,
DeviceOnline: 4168086626,
DeviceOffline: 4168086627,
SomeoneIsReady: 4168086628,
};
export const MESSAGETYPESV2 = {
AboutToStart: 1,
BattleStart: 2,
ToSomeoneShoot: 3,
ShootResult: 4,
NewRound: 5,
BattleEnd: 6,
HalfRest: 7,
TestDistance: 8,
MatchSuccess: 9,
InvalidShot: 10,
};
export const topThreeColors = ["#FFD947", "#D2D2D2", "#FFA515"];
export const getMessageTypeName = (id) => {
for (let key in MESSAGETYPES) {
if (MESSAGETYPES[key] === id) return key;
if (MESSAGETYPES[key] === id) {
return key;
}
}
for (let key in MESSAGETYPESV2) {
if (MESSAGETYPESV2[key] === id) return key;
}
return id;
return null;
};
export const roundsName = {
@@ -119,7 +100,7 @@ export const getBattleResultTips = (
) => {
const getRandomIndex = (len) => Math.floor(Math.random() * len);
if (gameMode === 1) {
if (mode <= 3) {
if (mode === 1) {
if (win) {
const tests = [
"https://static.shelingxingqiu.com/attachment/2025-08-01/dbqq1fglywucyoh9zn.png",
@@ -141,7 +122,7 @@ export const getBattleResultTips = (
];
return tests[getRandomIndex(3)];
}
} else {
} else if (mode === 2) {
if (rank <= 3) {
const tests = [
"好成绩!全国排位赛等着你!",
@@ -153,7 +134,7 @@ export const getBattleResultTips = (
}
}
} else if (gameMode === 2) {
if (mode <= 3) {
if (mode === 1) {
if (win) {
const tests = [
"https://static.shelingxingqiu.com/attachment/2025-08-01/dbqq1fgtb29jbdus4g.png",
@@ -175,7 +156,7 @@ export const getBattleResultTips = (
];
return tests[getRandomIndex(3)];
}
} else {
} else if (mode === 2) {
if (score > 0) {
const tests = [
"王者一定属于你!",
-15
View File
@@ -1,26 +1,11 @@
import { createSSRApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import App from './App.vue'
import audioManager from './audioManager'
export function createApp() {
const app = createSSRApp(App)
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
app.use(pinia)
/**
* 全局点击音效工具函数,用于在任意按钮/元素点击时自动播放音效。
* 用法:@click="$clickSound(handler)" 或 @click="$clickSound(() => doSomething())"
* @param {Function} handler - 原始点击回调函数(可选,点击时直接调用)
* @param {string} [soundKey='点击按钮'] - audioManager 中的音效 key
*/
app.config.globalProperties.$clickSound = (handler, soundKey = '点击按钮') => {
audioManager.play(soundKey);
if (typeof handler === 'function') handler();
};
return {
app
}
+64 -317
View File
@@ -1,321 +1,68 @@
{
"name" : "shoot-miniprograms",
"appid" : "__UNI__B03E251",
"description" : "",
"versionName" : "1.0.0",
"versionCode" : "100",
"transformPx" : false,
"uniStatistics" : {
"enable" : false
"name": "shoot-miniprograms",
"appid": "",
"description": "",
"versionName": "1.0.0",
"versionCode": "100",
"transformPx": false,
"uniStatistics": {
"enable": false
},
"app-plus": {
"bounce": "none",
"usingComponents": true,
"nvueStyleCompiler": "uni-app",
"compilerVersion": 3,
"splashscreen": {
"alwaysShowBeforeRender": true,
"waiting": true,
"autoclose": true,
"delay": 0
},
"app-plus" : {
"bounce" : "none",
"usingComponents" : true,
"nvueStyleCompiler" : "uni-app",
"compilerVersion" : 3,
"splashscreen" : {
"alwaysShowBeforeRender" : true,
"waiting" : true,
"autoclose" : true,
"delay" : 0
},
"modules" : {},
"distribute" : {
"android" : {
"permissions" : [
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
]
},
"ios" : {
"dSYMs" : false
},
"sdkConfigs" : {}
}
},
"h5" : {
"darkmode" : true,
"themeLocation" : "theme.json"
},
"quickapp" : {},
"mp-weixin" : {
"appid" : "wxa8f5989dcd45cc23",
"packOptions" : {
"ignore" : [
{
"type" : "file",
"value" : "static/common/dialog-light.png"
},
{
"type" : "file",
"value" : "static/common/dialog-bg.png"
},
{
"type" : "file",
"value" : "static/common/dialog-icon.png"
},
{
"type" : "file",
"value" : "static/prompt-bg-square.png"
},
{
"type" : "file",
"value" : "static/coach-comment.png"
},
{
"type" : "file",
"value" : "static/screen-hint-bg.png"
},
{
"type" : "file",
"value" : "static/red-team-win.png"
},
{
"type" : "file",
"value" : "static/blue-team-win.png"
},
{
"type" : "file",
"value" : "static/my-grow.png"
},
{
"type" : "file",
"value" : "static/gold-shining.png"
},
{
"type" : "file",
"value" : "static/bow-target.png"
},
{
"type" : "file",
"value" : "static/matching-bg.png"
},
{
"type" : "file",
"value" : "static/versus.png"
},
{
"type" : "file",
"value" : "static/point-champion.png"
},
{
"type" : "file",
"value" : "static/my-practise.png"
},
{
"type" : "file",
"value" : "static/shining-bg.png"
},
{
"type" : "file",
"value" : "static/donate.png"
},
{
"type" : "file",
"value" : "static/friend-battle.png"
},
{
"type" : "file",
"value" : "static/user-upgrade.png"
},
{
"type" : "file",
"value" : "static/finish-frame.png"
},
{
"type" : "file",
"value" : "static/vip/svip-jian.png"
},
{
"type" : "file",
"value" : "static/battle-header.png"
},
{
"type" : "file",
"value" : "static/battle-header-melee.png"
},
{
"type" : "file",
"value" : "static/player-bg.png"
},
{
"type" : "file",
"value" : "static/mvp-blue.png"
},
{
"type" : "file",
"value" : "static/finish-tip.png"
},
{
"type" : "file",
"value" : "static/2unfinish-tip.png"
},
{
"type" : "file",
"value" : "static/have-no-device.png"
},
{
"type" : "file",
"value" : "static/device-icon.png"
},
{
"type" : "file",
"value" : "static/unfinish-tip.png"
},
{
"type" : "file",
"value" : "static/test-tip.png"
},
{
"type" : "file",
"value" : "static/mvp-red.png"
},
{
"type" : "file",
"value" : "static/vip/svip-lie.png"
},
{
"type" : "file",
"value" : "static/mvp-tip.png"
},
{
"type" : "file",
"value" : "static/rank/battle-choose.png"
},
{
"type" : "file",
"value" : "static/back-to-game-bg.png"
},
{
"type" : "file",
"value" : "static/complete-light1.png"
},
{
"type" : "file",
"value" : "static/complete-light2.png"
},
{
"type" : "file",
"value" : "static/title-2v2.png"
},
{
"type" : "file",
"value" : "static/tab-bg.png"
},
{
"type" : "file",
"value" : "static/scan.png"
},
{
"type" : "file",
"value" : "static/choose-battle-mode.png"
},
{
"type" : "file",
"value" : "static/shooter.png"
},
{
"type" : "file",
"value" : "static/my-growth.png"
},
{
"type" : "file",
"value" : "static/juezhanbang.png"
},
{
"type" : "file",
"value" : "static/title-3v3.png"
},
{
"type" : "file",
"value" : "static/point-book-tip-bg.png"
},
{
"type" : "file",
"value" : "static/reward-us.png"
},
{
"type" : "file",
"value" : "static/rank/star.png"
},
{
"type" : "file",
"value" : "static/tab-point-book.png"
},
{
"type" : "file",
"value" : "static/pk-icon.png"
},
{
"type" : "file",
"value" : "static/first-try.png"
},
{
"type" : "file",
"value" : "static/row-yellow-bg.png"
},
{
"type" : "file",
"value" : "static/room-notfound-title.png"
},
{
"type" : "file",
"value" : "static/title-mvp.png"
},
{
"type" : "file",
"value" : "static/long-bubble-tall.png"
},
{
"type" : "file",
"value" : "static/battle-result.png"
},
{
"type" : "file",
"value" : "static/tab-mall.png"
},
{
"type" : "folder",
"value" : "static/training-home"
},
{
"type" : "folder",
"value" : "static/training-difficulty-design"
}
]
},
"optimization" : {
"subPackages" : true
},
"setting" : {
"urlCheck" : false,
"minified" : true,
"uglifyFileName" : true,
"useCompilerModule" : true,
"useIsolateContext" : true
},
"lazyCodeLoading" : "requiredComponents",
"usingComponents" : true,
"darkmode" : true,
"themeLocation" : "theme.json",
"permission" : {
"scope.userLocation": {
"desc": "用于扫描附近 WiFi,完成设备 OTA 升级网络连接"
}
},
"requiredPrivateInfos" : [ "getLocation", "chooseLocation" ]
"modules": {},
"distribute": {
"android": {
"permissions": [
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
]
},
"ios": {},
"sdkConfigs": {}
}
},
"h5": {
"darkmode": true,
"themeLocation": "theme.json"
},
"quickapp": {},
"mp-weixin": {
"appid": "wxa8f5989dcd45cc23",
"setting": {
"urlCheck": false,
"minified": true,
"uglifyFileName": true,
"useCompilerModule": true,
"useIsolateContext": true
},
"lazyCodeLoading": "requiredComponents",
"usingComponents": true,
"darkmode": true,
"themeLocation": "theme.json",
"permission": {},
"requiredPrivateInfos": ["getLocation", "chooseLocation"]
}
}
File diff suppressed because it is too large Load Diff
-104
View File
@@ -1,104 +0,0 @@
// 首页一周打卡展示数据,直接对应顶部 7 个日期卡片。
export const trainingHomeWeekSchedule = [
{
key: "mon",
label: "周一",
status: "done",
icon: "https://static.shelingxingqiu.com/shootmini/static/training-home/done.png",
},
{
key: "tue",
label: "周二",
status: "done",
icon: "https://static.shelingxingqiu.com/shootmini/static/training-home/done.png",
},
{
key: "wed",
label: "周三",
status: "missed",
icon: "https://static.shelingxingqiu.com/shootmini/static/training-home/missed.png",
},
{
key: "thu",
label: "周四",
status: "missed",
icon: "https://static.shelingxingqiu.com/shootmini/static/training-home/missed.png",
},
{
key: "fri",
label: "周五",
status: "done",
icon: "https://static.shelingxingqiu.com/shootmini/static/training-home/done.png",
},
{
key: "sat",
label: "周六",
status: "done",
icon: "https://static.shelingxingqiu.com/shootmini/static/training-home/done.png",
},
{
key: "sun",
label: "周日",
status: "missed",
icon: "https://static.shelingxingqiu.com/shootmini/static/training-home/missed.png",
},
];
// 首页统计卡数据,按设计稿从左到右展示。
export const trainingHomeStats = [
{ key: "days", value: "12", unit: "天", label: "共训练" },
{ key: "shots", value: "112", unit: "支", label: "累计射箭" },
{ key: "hitRate", value: "30", unit: "%", label: "命中率" },
{ key: "endurance", value: "6", unit: "支/分钟", label: "耐力射击" },
{ key: "calories", value: "31W", unit: "卡路里", label: "共消耗" },
];
// 雷达图区文案与数值配置。
export const trainingHomeRadar = {
labels: ["基础", "精准", "力量", "节奏", "耐力"],
values: [5.5, 6.3, 10, 4.5, 6],
maxValue: 10,
surpassValue: '80%'
};
// 首页主推荐训练卡数据。
export const trainingHomeFeatured = {
title: "基础训练",
progressText: "当前进度 LV7 >",
};
// 首页四个训练入口卡片数据。
export const trainingHomeModes = [
{
key: "endurance",
title: "耐力训练",
progressText: "当前进度 LV5 >",
icon: "https://static.shelingxingqiu.com/shootmini/static/training-home/img_3.png",
recommended: true,
disabled: false,
},
{
key: "precision",
title: "精准训练",
progressText: "当前进度 LV3 >",
icon: "https://static.shelingxingqiu.com/shootmini/static/training-home/img_4.png",
recommended: false,
disabled: false,
},
{
key: "rhythm",
title: "节奏训练",
progressText: "当前进度 LV6 >",
icon: "https://static.shelingxingqiu.com/shootmini/static/training-home/img_5.png",
recommended: false,
disabled: false,
},
{
key: "power",
title: "力量训练",
progressText: "Coming! LV10",
icon: "https://static.shelingxingqiu.com/shootmini/static/training-home/img_6.png",
recommended: false,
disabled: true,
},
];
-113
View File
@@ -1,113 +0,0 @@
// 难度页当前用于保存“开始训练前上下文”的本地存储 key。
export const trainingDifficultyStorageKey = "training-selection";
// 当前是页面联调用的模拟数据:
// 1. 总难度 20 级
// 2. 已解锁到 Lv3
// 3. 前三关展示不同完成进度
const totalDifficultyLevel = 20;
const mockedUnlockedDifficultyId = "lv3";
const mockedDifficultyProgressMap = {
lv1: 100,
lv2: 90,
lv3: 70,
};
const modeList = [
{
key: "endurance",
title: "耐力训练",
},
{
key: "precision",
title: "精准训练",
},
{
key: "rhythm",
title: "节奏训练",
},
{
key: "basic",
title: "基础训练",
},
{
key: "power",
title: "力量训练",
},
{
key: "focus",
title: "专注训练",
},
];
const createDifficultyId = (level) => `lv${level}`;
const createDifficultyLabel = (level) => `Lv${level}`;
// 根据等级生成模拟文案,方便一次性扩展到更多关卡。
const createDifficultySummary = (level) => {
return [
`箭靶划分为${Math.min(1 + Math.floor((level - 1) / 5), 4)}个区域`,
`${4 + level}次命中目标`,
`${100 + Math.floor((level - 1) / 2) * 10}秒内完成所有射击`,
"需使用20CM全环靶",
];
};
// 难度页的节点位置已经在页面内统一计算,
// 这里保留最核心的 id / label 即可,不再维护无效的 left / top / style 字段。
const createDifficultyNode = (level) => {
return {
id: createDifficultyId(level),
label: createDifficultyLabel(level),
};
};
const createDifficultyDetail = (level) => {
const id = createDifficultyId(level);
const label = createDifficultyLabel(level);
return {
id,
label,
title: `${label}难度`,
summary: createDifficultySummary(level),
startText: "开始",
targetPaperType: "20CM全环靶",
};
};
// 所有训练模式当前共用同一套难度定义。
const sharedDifficultyNodes = Array.from(
{ length: totalDifficultyLevel },
(_, index) => createDifficultyNode(index + 1)
);
const sharedDifficultyDetails = Object.fromEntries(
Array.from({ length: totalDifficultyLevel }, (_, index) => {
const detail = createDifficultyDetail(index + 1);
return [detail.id, detail];
})
);
const createModeConfig = ({ key, title, reward = null }) => {
return {
key,
title,
nodes: sharedDifficultyNodes,
details: sharedDifficultyDetails,
activeDifficultyId: mockedUnlockedDifficultyId,
progressMap: mockedDifficultyProgressMap,
reward,
};
};
// 难度页数据源入口:
// 页面通过 getTrainingDifficultyModeConfig(modeKey) 获取当前模式完整配置。
export const trainingDifficultyModeMap = Object.fromEntries(
modeList.map((mode) => [mode.key, createModeConfig(mode)])
);
export const getTrainingDifficultyModeConfig = (modeKey) => {
return trainingDifficultyModeMap[modeKey] || trainingDifficultyModeMap.precision;
};
+34 -74
View File
@@ -4,22 +4,19 @@
"path": "pages/index"
},
{
"path": "pages/friend-battle"
"path": "pages/reset-password"
},
{
"path": "pages/point-book"
},
{
"path": "pages/point-book-rank"
"path": "pages/edit-profile"
},
{
"path": "pages/my-like-list"
"path": "pages/sign-in"
},
{
"path": "pages/audio-test"
},
{
"path": "pages/calibration"
"path": "pages/sign-up"
},
{
"path": "pages/about-us"
@@ -30,14 +27,11 @@
"navigationBarTitleText": ""
}
},
{
"path": "pages/melee-battle"
},
{
"path": "pages/battle-result"
},
{
"path": "pages/friend-battle-result"
"path": "pages/team-battle"
},
{
"path": "pages/point-book-edit"
@@ -52,10 +46,10 @@
"path": "pages/point-book-detail"
},
{
"path": "pages/point-book-detail-share"
"path": "pages/match-page"
},
{
"path": "pages/match-page"
"path": "pages/image-share"
},
{
"path": "pages/my-device"
@@ -66,6 +60,15 @@
{
"path": "pages/user"
},
{
"path": "pages/orders"
},
{
"path": "pages/order-detail"
},
{
"path": "pages/be-vip"
},
{
"path": "pages/grade-intro"
},
@@ -88,7 +91,13 @@
"path": "pages/practise-two"
},
{
"path": "pages/battle-room"
"path": "pages/friend-battle"
},
{
"path": "pages/battle-room",
"style": {
"disableSwipeBack": true
}
},
{
"path": "pages/ranking"
@@ -96,24 +105,27 @@
{
"path": "pages/rank-list"
},
{
"path": "pages/team-match"
},
{
"path": "pages/melee-match"
},
{
"path": "pages/match-detail"
},
{
"path": "pages/team-bow-data"
},
{
"path": "pages/melee-bow-data"
},
{
"path": "pages/mine-bow-data"
},
{
"path": "pages/ota-wifi",
"style": {
"navigationStyle": "custom"
}
}
],
"globalStyle": {
"backgroundColor": "@bgColor",
"backgroundColor": "#fff",
"backgroundColorBottom": "@bgColorBottom",
"backgroundColorTop": "@bgColorTop",
"backgroundTextStyle": "@bgTxtStyle",
@@ -123,57 +135,5 @@
"navigationStyle": "custom",
"enablePullDownRefresh": false
},
"easycom": {
"autoscan": true,
"custom": {
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
}
},
"subPackages": [
{
"root": "pages/member",
"pages": [
{
"path": "orders"
},
{
"path": "order-detail"
},
{
"path": "be-vip"
},
{
"path": "vip-intro"
},
{
"path": "agreement"
}
]
},
{
"root": "pages/team-battle",
"pages": [
{
"path": "index"
},
{
"path": "team-bow-data"
}
]
},
{
"root": "pages/training",
"pages": [
{
"path": "index"
},
{
"path": "difficulty"
},
{
"path": "practise-one"
}
]
}
]
"subPackages": []
}
+21 -3
View File
@@ -1,7 +1,24 @@
<script setup>
import { ref, onMounted } from "vue";
import Container from "@/components/Container.vue";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
const isIOS = uni.getDeviceInfo().osName === "ios";
const isIos = ref(false);
const openLink = () => {
// uni.navigateTo({
// url:
// "/pages/webview?url=" +
// encodeURIComponent("https://beian.miit.gov.cn/"),
// });
};
onMounted(() => {
const deviceInfo = uni.getDeviceInfo();
isIos.value = deviceInfo.osName === "ios";
});
</script>
<template>
@@ -17,7 +34,8 @@ const isIOS = uni.getDeviceInfo().osName === "ios";
<view
class="copyright"
:style="{ paddingBottom: isIOS ? '40rpx' : '20rpx' }"
:style="{ paddingBottom: isIos ? '30rpx' : '20rpx' }"
@click="openLink"
>
<text>粤ICP备2025421150号-2X</text>
</view>
@@ -28,7 +46,7 @@ const isIOS = uni.getDeviceInfo().osName === "ios";
<style scoped>
.container {
width: calc(100% - 50rpx);
height: calc(100% - 50rpx);
height: 100%;
padding: 25rpx;
background-color: #ffffff;
position: relative;
-68
View File
@@ -1,68 +0,0 @@
<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import Container from "@/components/Container.vue";
import audioManager, { audioFils } from "@/audioManager";
const loaded = ref({});
const playAudio = (key) => {
audioManager.play(key);
};
onMounted(() => {
const loadedAudioKeys = uni.getStorageSync("loadedAudioKeys") || {};
loaded.value = loadedAudioKeys;
uni.$on("audioLoaded", (key) => {
loaded.value[key] = true;
});
});
onBeforeUnmount(() => {
uni.$off("audioLoaded");
});
</script>
<template>
<Container title="音频测试">
<view class="container">
<view>
<text>连续播放1</text>
<button hover-class="none" @click="playAudio(['第一轮', '请蓝方射箭'])">
播放
</button>
</view>
<view>
<text>连续播放2</text>
<button hover-class="none" @click="playAudio(['第二轮', '请红方射箭'])">
播放
</button>
</view>
<view v-for="key in Object.keys(audioFils)" :key="key">
<text>{{ key }}</text>
<text v-if="!loaded[key]">未加载</text>
<button v-else hover-class="none" @click="playAudio(key)">播放</button>
</view>
</view>
</Container>
</template>
<style scoped>
.container {
display: flex;
flex-direction: column;
width: 100%;
}
.container > view {
width: calc(100% - 50rpx);
display: flex;
align-items: center;
justify-content: space-between;
padding: 25rpx;
color: #fff;
border-bottom: 1rpx solid #fff9;
}
.container > view > button {
color: #fff;
}
</style>
+111 -88
View File
@@ -1,9 +1,9 @@
<script setup>
import { ref, computed, onMounted } from "vue";
import { ref, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import Avatar from "@/components/Avatar.vue";
import UserUpgrade from "@/components/UserUpgrade.vue";
import { getBattleAPI } from "@/apis";
import { getGameAPI } from "@/apis";
import { topThreeColors, getBattleResultTips } from "@/constants";
import audioManager from "@/audioManager";
import useStore from "@/store";
@@ -16,109 +16,135 @@ const ifWin = ref(false);
const data = ref({});
const totalPoints = ref(0);
const rank = ref(0);
const players = ref([]);
function exit() {
if (data.value.roomId) {
uni.redirectTo({
url: `/pages/battle-room?roomNumber=${data.value.roomId}`,
});
} else {
uni.navigateBack();
}
uni.navigateBack();
}
onLoad(async (options) => {
if (!options.battleId) return;
const myId = user.value.id;
const result = await getBattleAPI(options.battleId || "60049406950510592");
data.value = result;
if (result.winTeam) {
ifWin.value = result.teams[result.winTeam].players.some(
(p) => p.id === myId
if (options.battleId) {
const result = await getGameAPI(
options.battleId || "BATTLE-1758270367040321900-868"
);
}
if (result.mode <= 3) {
audioManager.play(ifWin.value ? "胜利" : "失败");
} else {
players.value = result.resultList.map((item, index) => {
const plist = result.teams[0] ? result.teams[0].players : [];
const p = plist.find((p) => p.id === item.userId);
if (p.id === user.value.id) {
totalPoints.value = p.score;
rank.value = index + 1;
data.value = {
...result,
battleMode: result.gameMode,
};
if (result.mode === 1) {
data.value.redPlayers = Object.values(result.redPlayers);
data.value.bluePlayers = Object.values(result.bluePlayers);
if (result.redPlayers[myId]) {
totalPoints.value = result.redPlayers[myId].totalScore;
data.value.myTeam = result.redPlayers[myId].team;
ifWin.value = result.winner === 0;
}
return {
...item,
rank: index + 1,
name: p.name,
avatar: p.avatar || "",
};
if (result.bluePlayers[myId]) {
totalPoints.value = result.bluePlayers[myId].totalScore;
data.value.myTeam = result.bluePlayers[myId].team;
ifWin.value = result.winner === 1;
}
}
if (result.mode === 2) {
data.value.playerStats = result.players.map((p) => ({
...p,
id: p.playerId,
}));
const mine = result.players.find((p) => p.playerId === myId);
if (mine) totalPoints.value = mine.totalScore;
rank.value = result.players.findIndex((p) => p.playerId === myId) + 1;
}
} else {
const battleInfo = uni.getStorageSync("last-battle");
if (!battleInfo) return;
data.value = {
mvps: [],
...battleInfo,
};
if (battleInfo.mode === 1) {
battleInfo.playerStats.forEach((p) => {
if (p.team === 1) data.value.bluePlayers = [p];
if (p.team === 0) data.value.redPlayers = [p];
if (p.mvp) data.value.mvps.push(p);
});
data.value.mvps.sort((a, b) => b.totalRings - a.totalRings);
}
rank.value = 0;
const mine = battleInfo.playerStats.find((p, index) => {
rank.value = index + 1;
return p.id === myId;
});
if (rank.value <= players.value * 0.3) {
audioManager.play("胜利");
} else {
audioManager.play("胜利");
if (mine) {
data.value.myTeam = mine.team;
totalPoints.value = mine.totalScore;
if (battleInfo.mode === 1) {
ifWin.value = mine.team === battleInfo.winner;
}
}
}
if (data.value.mode === 1) {
audioManager.play(ifWin.value ? "胜利" : "失败");
} else if (data.value.mode === 2) {
if (data.value.battleMode === 1) {
if (rank.value <= data.value.playerStats.length * 0.3) {
audioManager.play("胜利");
}
} else if (data.value.battleMode === 2) {
if (totalPoints.value > 0) {
audioManager.play("胜利");
} else if (totalPoints.value < 0) {
audioManager.play("失败");
}
}
}
});
const myTeam = computed(() => {
const teams = data.value.teams;
if (teams && teams.length) {
if (teams[1].players.some((p) => p.id === user.value.id)) return 1;
}
return 2;
});
const checkBowData = () => {
uni.navigateTo({
url: `/pages/match-detail?battleId=${data.value.matchId}`,
url: `/pages/match-detail?id=${data.value.id}`,
});
};
</script>
<template>
<view class="container">
<block v-if="data.mode <= 3">
<block v-if="data.mode === 1">
<view class="header-team" :style="{ marginTop: '25%' }">
<image src="https://static.shelingxingqiu.com/shootmini/static/battle-result.png" mode="widthFix" />
<view class="header-solo" v-if="data.mode === 1">
<image src="../static/battle-result.png" mode="widthFix" />
<view class="header-solo" v-if="data.teamSize === 2">
<text
:style="{
background:
data.winTeam === 1
data.winner === 1
? 'linear-gradient(270deg, #3597ff 0%, rgba(0,0,0,0) 100%);'
: 'linear-gradient(270deg, #fd4444 0%, rgba(0, 0, 0, 0) 100%)',
}"
>{{ data.winTeam === 1 ? "蓝队" : "红队" }}获胜</text
>{{ data.winner === 1 ? "蓝队" : "红队" }}获胜</text
>
<Avatar
:size="32"
:src="
data.winTeam === 1
? data.teams[1].players[0].avatar
: data.teams[2].players[0].avatar
data.winner === 1
? data.bluePlayers[0].avatar
: data.redPlayers[0].avatar
"
:borderColor="data.winTeam === 1 ? '#5FADFF' : '#FF5656'"
:borderColor="data.winner === 1 ? '#5FADFF' : '#FF5656'"
mode="widthFix"
/>
</view>
</view>
<view class="header-mvp" v-if="data.mode === 2 || data.mode === 3">
<view class="header-mvp" v-if="data.teamSize !== 2">
<image
:src="`https://static.shelingxingqiu.com/shootmini/static/${data.winTeam === 1 ? 'blue' : 'red'}-team-win.png`"
:src="`../static/${data.winner === 1 ? 'blue' : 'red'}-team-win.png`"
mode="widthFix"
/>
<view
:style="{
transform: `translateY(50px) rotate(-${
5 + (data.mvp || []).length
}deg)`,
transform: `translateY(50px) rotate(-${5 + data.mvps.length}deg)`,
}"
>
<view v-if="data.mvp && data.mvp.player_match_result.total_ring">
<image src="https://static.shelingxingqiu.com/shootmini/static/title-mvp.png" mode="widthFix" />
<view v-if="data.mvps && data.mvps[0].totalRings">
<image src="../static/title-mvp.png" mode="widthFix" />
<text
>斩获<text
:style="{
@@ -127,22 +153,22 @@ const checkBowData = () => {
margin: '0 3px',
fontWeight: '600',
}"
>{{ data.mvp.player_match_result.total_ring }}</text
>{{ data.mvps[0].totalRings }}</text
></text
>
</view>
<view v-if="data.mvp && data.mvp.length">
<view v-for="(player, index) in data.mvp" :key="index">
<view v-if="data.mvps && data.mvps.length">
<view v-for="(player, index) in data.mvps" :key="index">
<view class="team-avatar">
<Avatar
:src="player.avatar"
:size="40"
:borderColor="myTeam === 1 ? '#5fadff' : '#ff6060'"
:borderColor="data.myTeam === 1 ? '#5fadff' : '#ff6060'"
/>
<text
v-if="player.id === user.id"
:style="{
backgroundColor: myTeam === 1 ? '#5fadff' : '#ff6060',
backgroundColor: data.myTeam === 1 ? '#5fadff' : '#ff6060',
}"
>自己</text
>
@@ -153,7 +179,7 @@ const checkBowData = () => {
</view>
</view>
<view class="battle-winner">
<image src="https://static.shelingxingqiu.com/shootmini/static/shining-bg.png" mode="widthFix" />
<image src="../static/shining-bg.png" mode="widthFix" />
<image
:src="ifWin ? '../static/you-win.png' : '../static/you-lost.png'"
mode="widthFix"
@@ -161,7 +187,7 @@ const checkBowData = () => {
/>
<image
:src="
getBattleResultTips(data.way, data.mode, {
getBattleResultTips(data.battleMode, data.mode, {
win: ifWin,
})
"
@@ -170,20 +196,20 @@ const checkBowData = () => {
/>
</view>
</block>
<block v-else>
<block v-if="data.mode === 2">
<view class="header-melee">
<view />
<image src="https://static.shelingxingqiu.com/shootmini/static/battle-result.png" mode="widthFix" />
<image src="../static/battle-result.png" mode="widthFix" />
<view />
</view>
<view
class="players"
:style="{
height: `${Math.max(players.length > 5 ? '330' : '300')}px`,
height: `${Math.max(data.playerStats.length > 5 ? '330' : '300')}px`,
}"
>
<view
v-for="(player, index) in players"
v-for="(player, index) in data.playerStats"
:key="index"
:style="{
border: player.id === user.id ? '1px solid #B04630' : 'none',
@@ -225,9 +251,7 @@ const checkBowData = () => {
src="../static/champ3.png"
mode="widthFix"
/>
<view v-if="player.rank > 3" class="view-crown">{{
player.rank
}}</view>
<view v-if="index > 2" class="view-crown">{{ index + 1 }}</view>
<Avatar
:src="player.avatar"
:size="36"
@@ -235,10 +259,10 @@ const checkBowData = () => {
/>
<view class="player-title">
<text class="truncate">{{ player.name }}</text>
<text>{{ getLvlName(player.rank_lvl) }}</text>
<text>{{ getLvlName(player.totalScore) }}</text>
</view>
<text
><text :style="{ color: '#fff' }">{{ player.totalRing }}</text>
><text :style="{ color: '#fff' }">{{ player.totalRings }}</text>
</text
>
</view>
@@ -246,36 +270,36 @@ const checkBowData = () => {
</block>
<view
class="battle-e"
:style="{ marginTop: data.mode > 3 ? '20px' : '20vw' }"
:style="{ marginTop: data.mode === 2 ? '20px' : '20vw' }"
>
<image src="https://static.shelingxingqiu.com/shootmini/static/row-yellow-bg.png" mode="widthFix" />
<image src="../static/row-yellow-bg.png" mode="widthFix" />
<view class="team-avatar">
<Avatar
:src="user.avatar"
:size="40"
:borderColor="myTeam === 1 ? '#5fadff' : '#ff6060'"
:borderColor="data.myTeam === 1 ? '#5fadff' : '#ff6060'"
/>
<text
:style="{ backgroundColor: '#5fadff' }"
v-if="data.mode <= 3 && myTeam === 1"
v-if="data.mode === 1 && data.myTeam === 1"
>蓝队</text
>
<text
:style="{ backgroundColor: '#ff6060' }"
v-if="data.mode <= 3 && myTeam === 2"
v-if="data.mode === 1 && data.myTeam === 0"
>红队</text
>
</view>
<text v-if="data.way === 1">
<text v-if="data.battleMode === 1">
你的经验 {{ totalPoints > 0 ? "+" + totalPoints : totalPoints }}
</text>
<text v-if="data.way === 2">
<text v-if="data.battleMode === 2">
你的积分 {{ totalPoints > 0 ? "+" + totalPoints : totalPoints }}
</text>
</view>
<text v-if="data.mode > 3" class="description">
<text v-if="data.mode === 2" class="description">
{{
getBattleResultTips(data.way, data.mode, {
getBattleResultTips(data.battleMode, data.mode, {
win: ifWin,
score: totalPoints,
rank,
@@ -284,7 +308,7 @@ const checkBowData = () => {
</text>
<view class="op-btn">
<view @click="checkBowData">查看成绩</view>
<view @click="exit">返回</view>
<view @click="exit">退出</view>
</view>
<UserUpgrade />
</view>
@@ -394,7 +418,6 @@ const checkBowData = () => {
border-radius: 20px;
padding: 10px 0;
text-align: center;
color: #000;
}
.op-btn > view:last-child {
color: #fff;
+324 -809
View File
File diff suppressed because it is too large Load Diff
+273
View File
@@ -0,0 +1,273 @@
<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import Container from "@/components/Container.vue";
import Avatar from "@/components/Avatar.vue";
import SButton from "@/components/SButton.vue";
import SModal from "@/components/SModal.vue";
import Signin from "@/components/Signin.vue";
import UserHeader from "@/components/UserHeader.vue";
import { createOrderAPI, getHomeData, getVIPDescAPI } from "@/apis";
import { formatTimestamp } from "@/util";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user, config } = storeToRefs(store);
const { updateUser } = store;
const selectedVIP = ref(0);
const showModal = ref(false);
const lastDate = ref(user.value.expiredAt);
const refreshing = ref(false);
const timer = ref(null);
const richContent = ref("");
const onPay = async () => {
if (!user.value.id) {
showModal.value = true;
} else if (config.value.vipMenus[selectedVIP.value]) {
if (config.value.vipMenus[selectedVIP.value].id) {
const result = await createOrderAPI(
config.value.vipMenus[selectedVIP.value].id
);
if (!result.pay) return;
const params = result.pay.order.jsApi.params;
if (params) {
wx.requestPayment({
timeStamp: params.timeStamp, // 时间戳
nonceStr: params.nonceStr, // 随机字符串
package: params.package, // 统一下单接口返回的 prepay_id 参数值,格式:prepay_id=***
paySign: params.paySign, // 签名
signType: "RSA", // 签名类型,默认为RSA
async success(res) {
uni.showToast({
title: "支付成功",
icon: "none",
});
timer.value = setInterval(async () => {
refreshing.value = true;
const result = await getHomeData();
if (result.user.expiredAt > lastDate.value) {
refreshing.value = false;
if (result.user) updateUser(result.user);
clearInterval(timer.value);
}
}, 1000);
},
fail(res) {
console.log("pay error", res);
},
});
}
}
}
};
onMounted(async () => {
const result = await getVIPDescAPI();
richContent.value = result.describe;
});
const toOrderPage = () => {
uni.navigateTo({
url: "/pages/orders",
});
};
onBeforeUnmount(() => {
if (timer.value) clearInterval(timer.value);
});
</script>
<template>
<Container title="会员说明">
<view :style="{ width: '100%', height: '100%' }">
<view v-if="user.id" class="header">
<view>
<Avatar :src="user.avatar" :size="35" />
<text class="truncate">{{ user.nickName }}</text>
<image
class="user-name-image"
src="../static/vip1.png"
mode="widthFix"
/>
</view>
<block v-if="refreshing">
<image
src="../static/btn-loading.png"
mode="widthFix"
class="loading"
/>
</block>
<block v-else>
<text v-if="user.expiredAt">
{{ formatTimestamp(user.expiredAt) }} 到期
</text>
</block>
</view>
<view
class="container"
:style="{ height: !user.id ? '100%' : 'calc(100% - 62px)' }"
>
<view class="content vip-content">
<view class="title-bar">
<view />
<text>VIP 介绍</text>
</view>
<view :style="{ marginTop: '10rpx' }">
<rich-text :nodes="richContent" />
<!-- <text
>射灵星球VIP服务为全球弓箭手提供约战段位评级实时排位赛智能教练点评等专属特权会员可在酷帅的真实射箭运动中同步享受在线竞技的乐趣还能找到志同道合的伙伴并获得新鲜的功能体验和持续升级的系统
</text>
<text
>所有新注册用户我们都会默认赠送6个月超长会员到期之后可续费单月10元年度VIP100元我们鼓励每一位弓箭手长期坚持练习这项运动在对战的世界中尽情驰骋不断挑战自我创造属于自己的辉煌战绩
</text>
<text
>VIP会员还将获得专属客服支持当您在游戏中遇到任何问题无论是技术故障规则疑问还是其他需要帮助的情况都可联系我们的VIP专属客服团队他们将提供全年不间断的优质服务确保您的对战体验不受影响
</text>
<text>期待您的加入</text> -->
</view>
</view>
<view class="content">
<view class="title-bar">
<view />
<text>会员续费</text>
</view>
<view class="vip-items">
<view
v-for="(item, index) in config.vipMenus || []"
:key="index"
:style="{
color: selectedVIP === index ? '#fff' : '#333333',
borderColor: selectedVIP === index ? '#FF7D57' : '#eee',
background:
selectedVIP === index
? '#FF7D57'
: 'linear-gradient(180deg, #fbfbfb 0%, #f5f5f5 100%)',
}"
@click="() => (selectedVIP = index)"
>
{{ item.name }}
</view>
</view>
</view>
<SButton :onClick="onPay">支付</SButton>
<SModal :show="showModal" :onClose="() => (showModal = false)">
<Signin :onClose="() => (showModal = false)" />
</SModal>
<view class="my-orders" v-if="user.id">
<view @click="toOrderPage">
<text>我的订单</text>
<image src="../static/enter-arrow-blue.png" mode="widthFix" />
</view>
</view>
</view>
</view>
</Container>
</template>
<style scoped>
.header {
width: calc(100% - 30px);
display: flex;
align-items: center;
justify-content: space-between;
color: #fff;
padding: 15px;
padding-top: 0;
font-size: 14px;
}
.header > view {
display: flex;
align-items: center;
}
.header > view > text {
margin-left: 10px;
max-width: 120px;
text-align: left;
}
.header > view > image {
margin-left: 5px;
width: 20px;
}
.header > text:nth-child(2) {
color: #fed847;
}
.container {
width: 100%;
background-color: #f5f5f5;
padding-top: 10px;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
padding: 15px;
margin-bottom: 10px;
}
.title-bar {
width: 100%;
display: flex;
align-items: center;
color: #000;
}
.title-bar > view:first-child {
width: 5px;
height: 15px;
border-radius: 10px;
background-color: #fed847;
margin-right: 10px;
}
.content > view:nth-child(2) {
font-size: 14px;
color: #333;
}
.vip-items {
width: 100%;
display: grid;
grid-template-columns: repeat(4, 23.5%);
padding: 10px;
row-gap: 5%;
column-gap: 2%;
}
.vip-items > view {
border: 1px solid #eee;
padding: 12px 0;
border-radius: 10px;
text-align: center;
font-size: 27rpx;
}
.vip-content {
max-height: 62%;
}
.vip-content > view:nth-child(2) {
overflow: auto;
}
.vip-content > view:nth-child(2)::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.my-orders {
display: flex;
justify-content: center;
color: #39a8ff;
margin-top: 10px;
font-size: 13px;
}
.my-orders > view {
display: flex;
align-items: center;
}
.my-orders > view > image {
width: 15px;
}
.loading {
width: 20px;
height: 20px;
margin-left: 10px;
transition: all 0.3s ease;
background-blend-mode: darken;
animation: rotate 2s linear infinite;
}
</style>
-116
View File
@@ -1,116 +0,0 @@
<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import Container from "@/components/Container.vue";
import SButton from "@/components/SButton.vue";
import { laserAimAPI, laserCloseAPI } from "@/apis";
import { MESSAGETYPES } from "@/constants";
// import audioManager from "@/audioManager";
const guides = [
{
title: "箭头面向靶子",
src: "https://static.shelingxingqiu.com/attachment/2025-10-30/ddv9p5fk5wscg7hrfo.png",
},
{
title: "摆出拉弓姿势",
src: "https://static.shelingxingqiu.com/attachment/2025-10-30/ddv9p5fk5b7ljrhx3o.png",
},
{
title: "调整瞄准器",
src: "https://static.shelingxingqiu.com/attachment/2025-10-29/dduexjgrcxf9wjaiv4.png",
},
];
const done = ref(true);
const onComplete = async () => {
await laserCloseAPI();
uni.navigateBack();
};
function onReceiveMessage(messages = []) {
messages.forEach((msg) => {
if (msg.constructor === MESSAGETYPES.Calibration) {
done.value = true;
uni.setStorageSync("calibration", true);
// audioManager.play("激光已校准");
}
});
}
onMounted(async () => {
uni.$on("socket-inbox", onReceiveMessage);
await laserAimAPI();
});
onBeforeUnmount(async () => {
uni.$off("socket-inbox", onReceiveMessage);
await laserCloseAPI();
});
</script>
<template>
<Container title="校准智能弓">
<view class="container">
<view v-for="(guide, index) in guides" :key="guide.title" class="guide">
<view>
<text>{{ index + 1 }}</text>
<text>{{ guide.title }}</text>
</view>
<image :src="guide.src" mode="widthFix" />
</view>
<text>请完成以上步骤校准智能弓</text>
<SButton
:onClick="onComplete"
width="60vw"
:rounded="40"
:disabled="!done"
>
我已校准
</SButton>
</view>
</Container>
</template>
<style scoped>
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.guide {
display: flex;
flex-direction: column;
align-items: center;
font-size: 26rpx;
color: #ffffff;
margin-bottom: 15rpx;
}
.guide > view {
width: 100%;
margin: 25rpx 0;
display: flex;
align-items: center;
}
.guide > view > text:first-child {
font-size: 24rpx;
background: #e89024;
border-radius: 50%;
width: 32rpx;
height: 32rpx;
line-height: 32rpx;
display: block;
text-align: center;
margin-right: 15rpx;
}
.guide > image {
width: 630rpx;
height: 250rpx;
}
.container > text {
font-size: 24rpx;
color: #fff9;
margin: 30rpx;
}
</style>
+22 -29
View File
@@ -2,21 +2,24 @@
import { ref, onMounted } from "vue";
import SButton from "@/components/SButton.vue";
import { capsuleHeight } from "@/util";
const images = [
"https://static.shelingxingqiu.com/mall/images/mall_01.jpg",
"https://static.shelingxingqiu.com/mall/images/mall_02.jpg",
"https://static.shelingxingqiu.com/mall/images/mall_03.jpg",
"https://static.shelingxingqiu.com/mall/images/mall_04.jpg",
"https://static.shelingxingqiu.com/mall/images/mall_05.jpg",
"https://static.shelingxingqiu.com/mall/images/mall_06.jpg",
"https://static.shelingxingqiu.com/mall/images/mall_07.jpg",
"https://static.shelingxingqiu.com/mall/images/mall_08.jpg",
"https://static.shelingxingqiu.com/mall/images/mall_09.jpg",
"https://static.shelingxingqiu.com/attachment/2025-09-04/dcjmxsmf6yitekatwe.jpg",
"https://static.shelingxingqiu.com/attachment/2025-09-04/dcjmxsmi475gqdtrvx.jpg",
"https://static.shelingxingqiu.com/attachment/2025-09-04/dcjmxsmgy8ej5wuap5.jpg",
"https://static.shelingxingqiu.com/attachment/2025-09-04/dcjmxsmg6y7nveaadv.jpg",
"https://static.shelingxingqiu.com/attachment/2025-09-04/dcjmxsmfhqew0xhy6i.jpg",
"https://static.shelingxingqiu.com/attachment/2025-09-04/dcjmxsmhs38abrqfyp.jpg",
"https://static.shelingxingqiu.com/attachment/2025-09-04/dcjmxsmgnj4rttovk3.jpg",
"https://static.shelingxingqiu.com/attachment/2025-09-04/dcjmxsmg68a8mezgzx.jpg",
"https://static.shelingxingqiu.com/attachment/2025-10-14/ddht51a3hiyw7ueli4.jpg",
];
const addBg = ref(false);
const addBg = ref("");
const capsuleHeight = ref(0);
onMounted(async () => {
const menuBtnInfo = uni.getMenuButtonBoundingClientRect();
capsuleHeight.value = menuBtnInfo.top - 9;
});
const onScrollView = (e) => {
addBg.value = e.detail.scrollTop > 100;
@@ -32,8 +35,9 @@ const onScrollView = (e) => {
}"
>
<image
:style="{ opacity: addBg ? 1 : 0 }"
src="https://static.shelingxingqiu.com/shootmini/static/app-bg.png"
v-if="addBg"
class="bg-image"
src="../static/app-bg.png"
mode="widthFix"
/>
<navigator open-type="navigateBack">
@@ -42,17 +46,12 @@ const onScrollView = (e) => {
<text
:style="{ opacity: addBg ? 1 : 0, color: '#fff', fontWeight: 'bold' }"
>
本赛季排行榜
</text>
</view>
<scroll-view scroll-y @scroll="onScrollView" :style="{ height: '100vh' }">
<view class="images">
<image
v-for="src in images"
:key="src"
:src="src"
mode="widthFix"
show-menu-by-longpress
/>
<image v-for="src in images" :key="src" :src="src" mode="widthFix" show-menu-by-longpress />
</view>
</scroll-view>
</view>
@@ -72,6 +71,7 @@ const onScrollView = (e) => {
align-items: center;
position: fixed;
top: 0;
transition: all 0.3s ease;
z-index: 10;
overflow: hidden;
}
@@ -82,19 +82,12 @@ const onScrollView = (e) => {
margin-top: 5px;
position: relative;
}
.header > image:first-child {
.bg-image {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
transition: all 0.5s ease;
}
.header > text {
color: #fff;
font-weight: bold;
transition: all 0.5s ease;
position: relative;
}
.images {
display: flex;
+102
View File
@@ -0,0 +1,102 @@
<script setup>
import { ref, onMounted, reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
const type = ref("");
const formData = reactive({
name: "",
email: "",
code: "",
password: "",
confirmPassword: "",
});
onLoad((options) => {
type.value = options.type;
});
</script>
<template>
<Container
:bgType="2"
bgColor="#F5F5F5"
:whiteBackArrow="false"
:title="`Edit ${type}`"
>
<view v-if="type === 'Name'" class="input-view input-row">
<input
v-model="formData.name"
placeholder="name"
placeholder-style="color:#999;"
/>
<text>{{ formData.name.length }}/30</text>
</view>
<view v-else-if="type === 'Email'" class="input-view">
<view class="input-row">
<input
v-model="formData.email"
placeholder="email"
placeholder-style="color:#999;"
/>
</view>
<view class="input-row">
<input
v-model="formData.code"
placeholder="verification code"
placeholder-style="color:#999;"
/>
<button hover-class="none">get verification code</button>
</view>
</view>
<view v-else-if="type === 'Password'" class="input-view">
<view class="input-row">
<input
v-model="formData.password"
placeholder="password"
placeholder-style="color:#999;"
/>
</view>
<view class="input-row">
<input
v-model="formData.confirmPassword"
placeholder="Confirm your password"
placeholder-style="color:#999;"
/>
</view>
</view>
</Container>
</template>
<style scoped lang="scss">
.container {
width: 100%;
display: flex;
flex-direction: column;
}
.input-view {
padding: 0 30rpx;
border-radius: 25rpx;
color: $uni-text-color-grey;
background: $uni-bg-color;
margin-top: 25rpx;
width: calc(100% - 100rpx);
}
.input-view > view:not(:first-child) {
border-top: 1rpx solid #e3e3e3;
}
.input-row {
display: flex;
align-items: center;
font-size: 26rpx;
}
.input-row > input {
padding: 30rpx 0;
flex: 1;
}
.input-row > button {
color: $uni-link-color;
font-size: 26rpx;
line-height: 36rpx;
}
</style>
+114 -311
View File
@@ -1,5 +1,5 @@
<script setup>
import { computed, ref, onMounted, onBeforeUnmount } from "vue";
import { ref, onMounted, onBeforeUnmount } from "vue";
import Guide from "@/components/Guide.vue";
import SButton from "@/components/SButton.vue";
import Swiper from "@/components/Swiper.vue";
@@ -12,30 +12,19 @@ import Avatar from "@/components/Avatar.vue";
import BowPower from "@/components/BowPower.vue";
import TestDistance from "@/components/TestDistance.vue";
import BubbleTip from "@/components/BubbleTip.vue";
import audioManager from "@/audioManager";
import {
createPractiseAPI,
getPractiseAPI,
startPractiseAPI,
laserAimAPI,
laserCloseAPI,
} from "@/apis";
import { connectMatchWebSocket, closeMatchWebSocket } from "@/matchWebsocket";
import { sharePractiseData } from "@/canvas";
import { wxShare, debounce } from "@/util";
import { MESSAGETYPESV2 } from "@/constants";
import { createPractiseAPI } from "@/apis";
import { generateCanvasImage } from "@/util";
import { MESSAGETYPES } from "@/constants";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user, device } = storeToRefs(store);
const { user } = storeToRefs(store);
const scores = ref([]);
const isSvip = ref(false);
const step = ref(0);
const total = 12;
const stepButtonTexts = [
"开始",
"进入下一个任务",
"我已校准",
"进入下一个任务",
"我准备好了,开始",
"",
@@ -44,302 +33,172 @@ const stepButtonTexts = [
const title = ref("新手试炼场");
const start = ref(false);
const practiseResult = ref({});
const power = ref(0);
const btnDisabled = ref(false);
const practiseId = ref("");
const showGuide = ref(false);
const laserActive = ref(false);
const guideSwiperIndex = ref(0);
const sharing = ref(false);
const RESULT_TIP_CDN = "https://static.shelingxingqiu.com/shootmini/static";
const guideImages = [
"https://static.shelingxingqiu.com/shootmini/static/target.png",
"https://static.shelingxingqiu.com/attachment/2026-02-08/dg9ev0wwdpgwt9e6du.png",
"https://static.shelingxingqiu.com/attachment/2026-02-08/dg9ev0wvv9sw4zioqk.png",
"https://static.shelingxingqiu.com/attachment/2026-02-08/dg9ev0ww3khaycallu.png",
"https://static.shelingxingqiu.com/attachment/2026-02-08/dg9ev0wtkcvaxxv0s8.png",
"https://static.shelingxingqiu.com/attachment/2026-02-08/dg9ev0wry5tw7ltmxr.png",
"https://static.shelingxingqiu.com/attachment/2026-02-08/dg9ev0wu3kcdrwzwpd.png",
"https://static.shelingxingqiu.com/attachment/2026-02-08/dg9ev0wwr6hfjhyfn5.png",
];
const calibrationGuides = [
{
title: "箭头面向靶子",
src: "https://static.shelingxingqiu.com/attachment/2025-10-30/ddv9p5fk5wscg7hrfo.png",
},
{
title: "摆出拉弓姿势",
src: "https://static.shelingxingqiu.com/attachment/2025-10-30/ddv9p5fk5b7ljrhx3o.png",
},
{
title: "调整瞄准器",
src: "https://static.shelingxingqiu.com/attachment/2025-10-29/dduexjgrcxf9wjaiv4.png",
},
"https://static.shelingxingqiu.com/attachment/2025-07-09/db77x68bs7z5elwvw7.png",
"https://static.shelingxingqiu.com/attachment/2025-07-09/db77x68qmi7grgreen.png",
"https://static.shelingxingqiu.com/attachment/2025-07-09/db77x68hgrw1ip4wae.png",
"https://static.shelingxingqiu.com/attachment/2025-07-09/db77x684x8zmfrmbla.png",
"https://static.shelingxingqiu.com/attachment/2025-07-09/db77x67sding7fodnk.png",
"https://static.shelingxingqiu.com/attachment/2025-07-09/db77x68mpug7cac4yt.png",
"https://static.shelingxingqiu.com/attachment/2025-07-09/db77x68my783mlmgxv.png",
"https://static.shelingxingqiu.com/attachment/2025-07-09/db77x68p48ylzirtb0.png",
];
const onSwiperIndexChange = (index) => {
guideSwiperIndex.value = index;
showGuide.value = index + 1 === guideImages.length;
};
const isGuideLastImage = computed(
() => guideSwiperIndex.value + 1 === guideImages.length
);
const currentStepButtonText = computed(() => {
if (step.value === 1 && isGuideLastImage.value) return "去校准智能弓";
return stepButtonTexts[step.value];
});
const openCalibrationLaser = async () => {
if (laserActive.value) return;
await laserAimAPI();
laserActive.value = true;
};
const closeCalibrationLaser = async () => {
if (!laserActive.value) return;
await laserCloseAPI();
laserActive.value = false;
if (index + 1 === guideImages.length) {
showGuide.value = true;
}
};
const createPractise = async (arrows) => {
closeMatchWebSocket({ reason: "practice-recreate" });
const result = await createPractiseAPI(
arrows,
120,
1,
device.value.deviceId
);
const result = await createPractiseAPI(arrows);
if (result) practiseId.value = result.id;
if (!result?.serverAddr) {
uni.showToast({
title: "练习连接信息异常,请重试",
icon: "none",
});
return null;
}
connectMatchWebSocket({
serverAddr: result.serverAddr,
matchId: result.id,
userId: user.value.id,
});
return result;
};
const onOver = async (message) => {
practiseResult.value = Array.isArray(message?.details)
? message
: await getPractiseAPI(practiseId.value);
start.value = false;
};
const beginPractise = async () => {
if (!practiseId.value) {
uni.showToast({
title: "练习未创建,请重试",
icon: "none",
});
return false;
}
await startPractiseAPI(practiseId.value);
return true;
};
async function onReceiveMessage(msg) {
if (msg.type === MESSAGETYPESV2.ShootResult) {
isSvip.value = msg.sVip === true;
scores.value = Array.isArray(msg.details) ? msg.details : scores.value;
} else if (msg.type === MESSAGETYPESV2.BattleEnd) {
setTimeout(() => onOver(msg), 1500);
} else if (msg.type === MESSAGETYPESV2.TestDistance && step.value === 3) {
const rawDistance = Number(msg.shootData?.distance);
if (rawDistance === 0) {
audioManager.play("未发现靶纸,请瞄准靶纸射箭");
} else if (rawDistance / 100 >= 5) {
audioManager.play("距离合格");
async function onReceiveMessage(messages = []) {
messages.forEach((msg) => {
if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
if (scores.value.length < total) {
scores.value.push(msg.target);
}
power.value = msg.target.battery;
// if (step.value === 2 && msg.target.dst / 100 >= 5) {
btnDisabled.value = false;
showGuide.value = true;
} else audioManager.play("距离不足");
}
// messages.forEach((msg) => {
// if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
// if (step.value === 2 && msg.target.dst / 100 >= 5) {
// btnDisabled.value = false;
// showGuide.value = true;
// } else if (scores.value.length < total) {
// scores.value.push(msg.target);
// }
// if (scores.value.length === total) {
// setTimeout(onOver, 1500);
// }
// }
// });
// }
}
if (msg.constructor === MESSAGETYPES.ShootSyncMePracticeID) {
if (practiseId.value && practiseId.value === msg.practice.id) {
setTimeout(() => {
start.value = false;
practiseResult.value = {
...msg.practice,
arrows: JSON.parse(msg.practice.arrows),
lvl: msg.lvl,
};
generateCanvasImage(
"shareCanvas",
1,
user.value,
practiseResult.value
);
}, 1500);
}
}
});
}
const onClickShare = debounce(async () => {
if (sharing.value) return;
sharing.value = true;
try {
await sharePractiseData("shareCanvas", 1, user.value, practiseResult.value);
await wxShare("shareCanvas");
} catch (e) {
uni.showToast({
title: "海报生成失败,请稍后重试",
icon: "none",
});
} finally {
sharing.value = false;
}
});
onMounted(() => {
void audioManager.warmAll();
uni.setKeepScreenOn({
keepScreenOn: true,
});
uni.$on("socket-inbox", onReceiveMessage);
uni.$on("share-image", onClickShare);
});
onBeforeUnmount(async () => {
onBeforeUnmount(() => {
uni.setKeepScreenOn({
keepScreenOn: false,
});
uni.$off("socket-inbox", onReceiveMessage);
uni.$off("share-image", onClickShare);
await closeCalibrationLaser();
audioManager.stopAll();
closeMatchWebSocket({ reason: "practice-leave" });
});
const nextStep = async () => {
if (step.value === 0) {
step.value = 1;
title.value = "-箭前准备";
title.value = "-凹造型";
} else if (step.value === 1) {
if (!isGuideLastImage.value) {
guideSwiperIndex.value += 1;
showGuide.value = guideSwiperIndex.value + 1 === guideImages.length;
return;
}
showGuide.value = false;
step.value = 2;
// title.value = "-校准智能弓";
await openCalibrationLaser();
} else if (step.value === 2) {
await closeCalibrationLaser();
showGuide.value = false;
btnDisabled.value = true;
step.value = 3;
step.value = 2;
title.value = "-感知距离";
const result = await createPractise(total);
if (!result) {
btnDisabled.value = false;
step.value = 2;
return;
}
} else if (step.value === 3) {
} else if (step.value === 2) {
showGuide.value = false;
step.value = 4;
step.value = 3;
title.value = "-小试牛刀";
} else if (step.value === 4) {
} else if (step.value === 3) {
title.value = "小试牛刀";
const result = await beginPractise();
if (!result) return;
await createPractise(total);
scores.value = [];
isSvip.value = false;
step.value = 5;
step.value = 4;
start.value = true;
setTimeout(() => {
uni.$emit("play-sound", "请开始射击");
}, 300);
} else if (step.value === 6) {
} else if (step.value === 5) {
uni.navigateBack({
delta: 1,
});
}
};
const onClose = async () => {
const validArrows = (practiseResult.value.details || []).filter(
(a) => a.x !== -30 && a.y !== -30
);
if (validArrows.length === total) {
const onClose = () => {
if (
practiseResult.value.arrows &&
practiseResult.value.arrows.length === total
) {
setTimeout(() => {
practiseResult.value = {};
showGuide.value = false;
step.value = 6;
step.value = 5;
}, 500);
} else {
practiseResult.value = {};
start.value = false;
scores.value = [];
isSvip.value = false;
step.value = 4;
await createPractise(total);
step.value = 3;
}
};
const getResultTipSrc = (result = {}) => {
const validCount = (result.details || []).filter(
(arrow) => arrow.x !== -30 && arrow.y !== -30
).length;
return `${RESULT_TIP_CDN}/${validCount < total ? "un" : ""}finish-tip.png`;
};
</script>
<template>
<Container :bgType="1" :title="title" :showBottom="step !== 5">
<Container :bgType="1" :title="title">
<view class="container">
<Guide
v-if="step !== 5"
v-if="step !== 4"
:type="
step === 3
step === 2
? 2
: step === 6 || (step === 0 && user.nickName.length > 6)
: step === 5 || (step === 0 && user.nickName.length > 6)
? 1
: 0
"
>
<text
v-if="step === 0"
:style="{
fontSize: '28rpx',
marginTop: user.nickName.length > 6 ? '-10rpx' : '0',
}"
>
<text v-if="step === 0">
hi<text :style="{ color: '#fed847' }">{{ user.nickName }}</text>
这是新人必刷小任务0基础小白也能快速掌握弓箭技巧和游戏规则哦~
</text>
<text v-if="step === 1" :style="{ fontSize: '28rpx' }"
>位就是人帅技高的高教练接下来请跟随教练指引做好射箭前期准备</text
<text v-if="step === 1"
>这是我们人帅技高的高教练首先请按教练示范尝试自己去做这些动作和手势吧</text
>
<text v-if="step === 2" :style="{ fontSize: '28rpx' }"
>请按下方步骤完成智能弓校准让瞄准器和靶子保持对齐</text
>
<view
class="guide-tips"
:style="{ marginTop: '8rpx' }"
v-if="step === 3"
>
<text>你知道5米射程有多远吗</text>
<text>
在我们的排位赛中射程小于5米的成绩无效建议平时练习距离至少5米现在来边射箭边调整你的站位点吧
</text>
<view v-if="step === 2">
<view :style="{ display: 'flex', flexDirection: 'column' }">
<text :style="{ color: '#fed847' }">你知道5米射程有多远吗</text>
<text>
在我们的排位赛中射程小于5米的成绩无效建议平时练习距离至少5米现在来边射箭边调整你的站位点吧
</text>
</view>
</view>
<view class="guide-tips" v-if="step === 4">
<text>一切准备就绪</text>
<text :style="{ fontSize: '28rpx' }"
>试着完成一个真正的弓箭手任务吧</text
>
<view v-if="step === 3">
<view :style="{ display: 'flex', flexDirection: 'column' }">
<text :style="{ color: '#fed847' }">一切准备就绪</text>
<text>试着完成一个真正的弓箭手任务吧</text>
</view>
</view>
<view class="guide-tips" v-if="step === 6">
<text>新手试炼场通关啦优秀</text>
<text :style="{ fontSize: '28rpx' }"
>反曲弓运动基本知识和射灵世界系统规则你已Get是不是挺容易呀</text
<view v-if="step === 5">
<view
:style="{ display: 'flex', flexDirection: 'column', marginTop: 20 }"
>
<text :style="{ color: '#fed847' }">新手试炼场通关啦优秀</text>
<text
>反曲弓运动基本知识和射灵世界系统规则你已Get是不是挺容易呀</text
>
<text :style="{ opacity: 0 }">新手试炼场通关啦优秀</text>
</view>
</view>
</Guide>
<image
@@ -349,81 +208,64 @@ const getResultTipSrc = (result = {}) => {
v-if="step === 0"
/>
<image
src="https://static.shelingxingqiu.com/attachment/2025-11-17/deas80ef1sf9td0leq.png"
src="https://static.shelingxingqiu.com/attachment/2025-07-01/db0ehpzl8hfzeswfrf.png"
class="try-tip"
mode="widthFix"
v-if="step === 4"
v-if="step === 3"
/>
<image
src="https://static.shelingxingqiu.com/attachment/2025-07-01/db0ehpz9lav58g5drl.png"
class="try-tip"
mode="widthFix"
v-if="step === 6"
v-if="step === 5"
/>
<view style="height: 570px" v-if="step === 1">
<Swiper
:current="guideSwiperIndex"
:onChange="onSwiperIndexChange"
:data="guideImages"
/>
<Swiper :onChange="onSwiperIndexChange" :data="guideImages" />
</view>
<view class="calibration-container" v-if="step === 2">
<view
v-for="(guide, index) in calibrationGuides"
:key="guide.title"
class="calibration-guide"
>
<view>
<text>{{ index + 1 }}</text>
<text>{{ guide.title }}</text>
</view>
<image :src="guide.src" mode="widthFix" />
</view>
<text>请完成以上步骤校准智能弓</text>
</view>
<ShootProgress v-if="step === 5" tips="请开始连续射箭" :start="start" />
<TestDistance v-if="step === 3" :guide="false" />
<ShootProgress v-if="step === 4" tips="请开始连续射箭" :start="start" />
<TestDistance v-if="step === 2" :guide="false" />
<view
class="user-row"
v-if="step === 5"
:style="{ marginBottom: '0' }"
v-if="step === 4"
:style="{ marginBottom: step === 2 ? '40px' : '0' }"
>
<Avatar :src="user.avatar" :size="35" />
<BowPower />
<BowPower :power="power" />
</view>
<BowTarget
v-if="step === 5"
:currentRound="step === 5 ? scores.length : 0"
:totalRound="step === 5 ? total : 0"
v-if="step === 4"
:currentRound="step === 4 ? scores.length : 0"
:totalRound="step === 4 ? total : 0"
:scores="scores"
:isSvip="isSvip"
/>
<ScorePanel
v-if="step === 5"
v-if="step === 4"
:total="total"
:rowCount="6"
:arrows="scores"
:scores="scores.map((s) => s.ring)"
/>
<ScoreResult
v-if="practiseResult.details"
v-if="practiseResult.arrows"
:rowCount="6"
:total="total"
:onClose="onClose"
:result="practiseResult"
:tipSrc="getResultTipSrc(practiseResult)"
:tipSrc="`../static/${
practiseResult.arrows.length < total ? 'un' : ''
}finish-tip.png`"
/>
<canvas class="share-canvas" id="shareCanvas" type="2d"></canvas>
<canvas class="share-canvas" canvas-id="shareCanvas"></canvas>
</view>
<template #bottom>
<SButton :onClick="nextStep" :disabled="btnDisabled">
<view :style="{ marginBottom: '20px' }">
<SButton v-if="step !== 4" :onClick="nextStep" :disabled="btnDisabled">
<BubbleTip v-if="showGuide" :type="step === 1 ? 'long' : 'short'">
<text :style="{ transform: 'translateY(-18rpx)' }">{{
step === 1 ? "学会了,我摆得比教练还帅" : "我找到合适的点位了"
}}</text>
</BubbleTip>
{{ currentStepButtonText }}
{{ stepButtonTexts[step] }}
</SButton>
</template>
</view>
</Container>
</template>
@@ -435,43 +277,4 @@ const getResultTipSrc = (result = {}) => {
width: calc(100% - 20px);
margin: 0 10px;
}
.calibration-container {
display: flex;
flex-direction: column;
align-items: center;
}
.calibration-guide {
display: flex;
flex-direction: column;
align-items: center;
font-size: 26rpx;
color: #ffffff;
margin-bottom: 15rpx;
}
.calibration-guide > view {
width: 100%;
margin: 25rpx 0;
display: flex;
align-items: center;
}
.calibration-guide > view > text:first-child {
font-size: 24rpx;
background: #e89024;
border-radius: 50%;
width: 32rpx;
height: 32rpx;
line-height: 32rpx;
display: block;
text-align: center;
margin-right: 15rpx;
}
.calibration-guide > image {
width: 630rpx;
height: 250rpx;
}
.calibration-container > text {
font-size: 24rpx;
color: #fff9;
margin: 30rpx;
}
</style>
File diff suppressed because it is too large Load Diff
+94 -252
View File
@@ -1,176 +1,86 @@
<script setup>
import { computed, ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import GuideTwo from "@/components/GuideTwo.vue";
import Guide from "@/components/Guide.vue";
import SButton from "@/components/SButton.vue";
import SModal from "@/components/SModal.vue";
import Signin from "@/components/Signin.vue";
import CreateRoom from "@/components/CreateRoom.vue";
import Avatar from "@/components/Avatar.vue";
import ModalDialog from "@/components/ModalDialog.vue";
import { getRoomAPI, joinRoomAPI, getBattleDataAPI, getDailyCountAPI } from "@/apis";
import { debounce, canEenter, getLimitCountText, isLimitReached } from "@/util";
import { getRoomAPI, joinRoomAPI, isGamingAPI, getBattleDataAPI } from "@/apis";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user, device, online, game, dailyCount } = storeToRefs(store);
const { updateDailyCount } = store;
const { user } = storeToRefs(store);
import { debounce } from "@/util";
const showModal = ref(false);
const showSignin = ref(false);
const warnning = ref("");
const roomNumber = ref("");
const data = ref({});
const roomID = ref("");
const loading = ref(false);
const showLimitModal = ref(false);
const createRoomLoading = ref(false);
const isSVip = computed(() => user.value.sVip === true);
const isVip = computed(() => user.value.vip === true && !isSVip.value);
const challengeLimitText = computed(() =>
getLimitCountText("约战", dailyCount.value.challenge)
);
const enterRoom = debounce(async (number) => {
if (loading.value) return;
if (!canEenter(user.value, device.value, online.value)) return;
if (game.value.inBattle) {
const enterRoom = debounce(async () => {
const isGaming = await isGamingAPI();
if (isGaming) {
uni.$showHint(1);
return;
}
if (!number) {
if (!roomNumber.value) {
warnning.value = "请输入房间号";
showModal.value = true;
return;
}
loading.value = true;
let keepLoading = false;
try {
const room = await getRoomAPI(number);
if (!room.number) {
} else {
const room = await getRoomAPI(roomNumber.value);
if (room.number) {
const alreadyIn = room.members.find(
(item) => item.userInfo.id === user.value.id
);
if (!alreadyIn) {
const result = await joinRoomAPI(roomNumber.value);
if (result.full) {
warnning.value = "房间已满员";
showModal.value = true;
return;
}
}
roomNumber.value = "";
showModal.value = false;
uni.navigateTo({
url: `/pages/battle-room?roomNumber=${room.number}`,
});
} else {
warnning.value = room.started ? "该房间对战已开始,无法加入" : "查无此房";
showModal.value = true;
return;
}
const alreadyIn = room.members.find(
(item) => item.userInfo.id === user.value.id
);
if (!alreadyIn) {
const result = await joinRoomAPI(number);
if (result.full) {
warnning.value = "房间已满员";
showModal.value = true;
return;
}
}
keepLoading = true;
uni.navigateTo({
url: "/pages/battle-room?roomNumber=" + number,
fail: () => {
loading.value = false;
},
});
} finally {
if (!keepLoading) loading.value = false;
}
});
const onCreateRoom = debounce(async () => {
if (createRoomLoading.value) return;
if (!canEenter(user.value, device.value, online.value)) return;
createRoomLoading.value = true;
try {
const countData = await loadDailyCount();
if (isLimitReached(countData.challenge)) {
showLimitModal.value = true;
return;
}
warnning.value = "";
showModal.value = true;
} finally {
createRoomLoading.value = false;
const onCreateRoom = async () => {
const isGaming = await isGamingAPI();
if (isGaming) {
uni.$showHint(1);
return;
}
});
const closeLimitModal = () => {
showLimitModal.value = false;
};
const goVipPage = () => {
showLimitModal.value = false;
uni.navigateTo({
url: "/pages/member/be-vip",
});
};
const loadDailyCount = async () => {
if (!user.value.id) return dailyCount.value;
try {
const result = await getDailyCountAPI();
updateDailyCount(result);
return result || dailyCount.value;
} catch (error) {
console.log("load daily count error", error);
return dailyCount.value;
}
};
const onSignin = () => {
if (roomID.value && user.value.id) enterRoom(roomID.value);
showSignin.value = false;
};
/** 跳转到我的战绩页面,默认展示「好友约战」tab */
const goMyRecord = () => {
uni.navigateTo({
url: '/pages/my-growth?tab=1',
});
warnning.value = "";
showModal.value = true;
};
onShow(async () => {
loading.value = false;
if (user.value.id) {
const [result] = await Promise.all([
getBattleDataAPI(),
loadDailyCount(),
]);
data.value = result;
}
});
onLoad(async (options) => {
if (options.roomID) {
roomID.value = options.roomID;
if (user.value.id) enterRoom(options.roomID);
else showSignin.value = true;
}
const result = await getBattleDataAPI();
data.value = result;
});
</script>
<template>
<Container title="好友约战" :showBackToGame="true">
<view :style="{ width: '100%', height: '100%' }">
<GuideTwo>
<view :style="{ width: '100%' }">
<Guide>
<view class="guide-tips">
<text class="guide-tips__main">约上朋友开几局欢乐多不寂寞</text>
<text class="guide-tips__sub">一起练升级更快早日加入全国排位赛</text>
<text>约上朋友开几局欢乐多不寂寞</text>
<text>一起练升级更快早日加入全国排位赛</text>
</view>
</GuideTwo>
</Guide>
<view class="my-data">
<view>
<Avatar :rankLvl="user.rankLvl" :src="user.avatar" :size="30" />
<view
:class="[
'member-nickname',
isVip ? 'member-nickname--vip' : '',
isSVip ? 'member-nickname--svip' : '',
]"
>
<text class="member-nickname__text">{{ user.nickName }}</text>
<text v-if="isSVip" class="member-nickname__shine">{{
user.nickName
}}</text>
</view>
<text class="my-record-btn" @click="goMyRecord">我的战绩</text>
<text class="truncate">{{ user.nickName }}</text>
</view>
<view>
<view>
@@ -190,9 +100,16 @@ onLoad(async (options) => {
<view>
<view class="stars">
<block v-for="i in 5" :key="i">
<image v-if="data.totalWinningRate >= i * 0.2" src="../static/star-full.png" mode="widthFix" />
<image v-else-if="data.totalWinningRate >= (i - 1) * 0.2 + 0.1" src="../static/star-half.png"
mode="widthFix" />
<image
v-if="data.totalWinningRate >= i * 0.2"
src="../static/star-full.png"
mode="widthFix"
/>
<image
v-else-if="data.totalWinningRate >= (i - 1) * 0.2 + 0.1"
src="../static/star-half.png"
mode="widthFix"
/>
<image v-else src="../static/star-empty.png" mode="widthFix" />
</block>
</view>
@@ -203,73 +120,44 @@ onLoad(async (options) => {
<view class="founded-room">
<image src="../static/founded-room.png" mode="widthFix" />
<view>
<input placeholder="输入房间号" v-model="roomNumber" placeholder-style="color: #ccc" />
<view @click="$clickSound(() => enterRoom(roomNumber))">进入房间</view>
<input
placeholder="输入房间号"
v-model="roomNumber"
placeholder-style="color: #ccc"
/>
<view @click="enterRoom">进入房间</view>
</view>
</view>
<view class="create-room">
<image src="https://static.shelingxingqiu.com/attachment/2025-07-15/dbcejys872iyun92h6.png" mode="widthFix" />
<image src="https://static.shelingxingqiu.com/shootmini/static/room-notfound-title.png" mode="widthFix" />
<image
src="https://static.shelingxingqiu.com/attachment/2025-07-15/dbcejys872iyun92h6.png"
mode="widthFix"
/>
<image src="../static/room-notfound-title.png" mode="widthFix" />
<view>
<image :src="user.avatar" mode="widthFix" />
<image src="https://static.shelingxingqiu.com/shootmini/static/versus.png" mode="widthFix" />
<image src="../static/versus.png" mode="widthFix" />
<view>
<image src="../static/question-mark.png" mode="widthFix" />
</view>
</view>
<view>
<view v-if="challengeLimitText" class="pp-text">
{{ challengeLimitText }}
</view>
<SButton
width="80%"
:rounded="30"
:disabled="createRoomLoading"
:onClick="() => { $clickSound(); return onCreateRoom(); }"
>
<SButton width="80%" :rounded="30" :onClick="onCreateRoom">
创建约战房
</SButton>
</view>
</view>
<SModal :show="showModal" :onClose="() => (showModal = false)" height="716rpx">
<SModal :show="showModal" :onClose="() => (showModal = false)">
<view v-if="warnning" class="warnning">
{{ warnning }}
</view>
<!-- showModal 关闭时立即销毁组件重开时重建确保选项重置为 0 -->
<CreateRoom v-if="!warnning && showModal" :onConfirm="() => (showModal = false)" />
<CreateRoom v-if="!warnning" :onConfirm="() => (showModal = false)" />
</SModal>
<Signin :show="showSignin" :onClose="onSignin" />
</view>
</Container>
<ModalDialog
:show="showLimitModal"
:content="'今日约战次数已经用完\n开通会员可增加次数'"
cancelText="知道了"
confirmText="去开通"
:onCancel="closeLimitModal"
:onConfirm="goVipPage"
/>
</template>
<style scoped>
.guide-tips {
display: flex;
flex-direction: column;
padding-left: 112rpx;
width: 100%;
}
.guide-tips__main {
font-weight: 400;
font-size: 26rpx;
color: rgba(255, 217, 71, 0.8);
}
.guide-tips__sub {
font-weight: 400;
font-size: 22rpx;
color: rgba(255, 255, 255, 0.8);
margin-top: 6rpx;
}
.founded-room {
display: flex;
flex-direction: column;
@@ -280,12 +168,10 @@ onLoad(async (options) => {
border-radius: 10px;
padding: 15px;
}
.founded-room>image {
.founded-room > image {
width: 16vw;
}
.founded-room>view {
.founded-room > view {
display: flex;
justify-content: space-between;
align-items: center;
@@ -295,16 +181,14 @@ onLoad(async (options) => {
width: 100%;
overflow: hidden;
}
.founded-room>view>input {
.founded-room > view > input {
width: 70%;
text-align: center;
font-size: 14px;
height: 40px;
color: #000;
color: #fff;
}
.founded-room>view>view {
.founded-room > view > view {
background-color: #fed847;
width: 30%;
line-height: 40px;
@@ -315,45 +199,38 @@ onLoad(async (options) => {
color: #000;
text-align: center;
}
.create-room {
position: relative;
margin: 15px;
height: 50vw;
}
.create-room>image:first-of-type {
.create-room > image:first-of-type {
position: absolute;
width: 100%;
}
.create-room>image:nth-of-type(2) {
.create-room > image:nth-of-type(2) {
padding: 15px;
width: 25vw;
position: relative;
}
.create-room>view:nth-child(3) {
margin: 12vw auto 5vw auto;
.create-room > view:nth-child(3) {
margin: 12vw auto;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.create-room>view>image:first-child {
.create-room > view > image:first-child {
width: 19vw;
transform: translateY(-60%);
border-radius: 50%;
position: relative;
}
.create-room>view>image:nth-child(2) {
.create-room > view > image:nth-child(2) {
width: 37vw;
position: relative;
}
.create-room>view>view:nth-child(3) {
.create-room > view > view:nth-child(3) {
position: relative;
width: 19vw;
height: 19vw;
@@ -364,19 +241,10 @@ onLoad(async (options) => {
align-items: center;
transform: translateY(60%);
}
.create-room>view>view:nth-child(3)>image {
.create-room > view > view:nth-child(3) > image {
width: 20px;
margin-right: 2px;
}
.pp-text{
color: #fff;
text-align: center;
font-size: 22rpx;
margin-bottom: 20rpx;
}
.warnning {
width: 100%;
height: 100%;
@@ -385,7 +253,6 @@ onLoad(async (options) => {
align-items: center;
color: #fff9;
}
.my-data {
width: calc(100% - 30px);
margin: 15px;
@@ -395,14 +262,12 @@ onLoad(async (options) => {
overflow: hidden;
background-color: #54431d33;
}
.my-data>view {
.my-data > view {
width: 100%;
display: flex;
color: #fff9;
}
.my-data>view:first-child {
.my-data > view:first-child {
width: calc(100% - 30px);
align-items: flex-end;
padding-bottom: 15px;
@@ -410,33 +275,16 @@ onLoad(async (options) => {
margin: 15px;
margin-bottom: 0;
}
.my-data>view:first-child>.my-record-btn {
font-weight: 400;
font-size: 24rpx;
color: #76D4FF;
text-align: center;
font-style: normal;
width: auto;
margin-left: auto;
}
.my-data>view:first-child>.member-nickname {
.my-data > view:first-child > text {
color: #fff;
font-size: 17px;
margin-left: 10px;
width: 120px;
}
.my-data>view:first-child>.member-nickname__text,
.my-data>view:first-child>.member-nickname__shine {
font-size: 17px;
}
.my-data>view:last-child {
.my-data > view:last-child {
margin-bottom: 15px;
}
.my-data>view:last-child>view {
.my-data > view:last-child > view {
width: 33%;
margin-top: 15px;
display: flex;
@@ -444,32 +292,26 @@ onLoad(async (options) => {
align-items: center;
font-size: 12px;
}
.my-data>view:last-child>view>view {
.my-data > view:last-child > view > view {
margin-bottom: 5px;
}
.my-data>view:last-child>view>view>text:first-child {
.my-data > view:last-child > view > view > text:first-child {
color: #fff;
font-size: 20px;
margin-right: 5px;
transform: translateY(4px);
}
.my-data>view:last-child>view:nth-child(2) {
.my-data > view:last-child > view:nth-child(2) {
border-left: 1px solid #48494e;
border-right: 1px solid #48494e;
}
.my-data>view:last-child>view>view {
.my-data > view:last-child > view > view {
display: flex;
align-items: flex-end;
height: 20px;
}
.stars>image {
.stars > image {
width: 4vw;
height: 4vw;
margin: 0 1px;
}
</style>
+32 -119
View File
@@ -1,69 +1,34 @@
<script setup>
import { computed } from "vue";
import Container from "@/components/Container.vue";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
const MAX_LEVEL = 100;
const LEVEL_NODE_WIDTH_RPX = 72;
const TRACK_PADDING_RPX = 20;
const windowWidth = uni.getSystemInfoSync().windowWidth;
const rpxToPx = (value) => (value * windowWidth) / 750;
const levels = Array.from({ length: MAX_LEVEL }, (_, index) => index + 1);
const currentLevel = computed(() => {
const level = Number(user.value?.lvl) || 1;
return Math.min(Math.max(level, 1), MAX_LEVEL);
});
const currentLevelScrollLeft = computed(() => {
const nodeWidth = rpxToPx(LEVEL_NODE_WIDTH_RPX);
const trackPadding = rpxToPx(TRACK_PADDING_RPX);
const contentWidth = rpxToPx(
TRACK_PADDING_RPX * 2 + MAX_LEVEL * LEVEL_NODE_WIDTH_RPX
);
const currentCenter =
trackPadding + (currentLevel.value - 1) * nodeWidth + nodeWidth / 2;
const targetLeft = currentCenter - windowWidth / 2;
const maxScrollLeft = Math.max(contentWidth - windowWidth, 0);
return Math.min(Math.max(targetLeft, 0), maxScrollLeft);
});
</script>
<template>
<Container title="等级介绍">
<view class="container">
<!-- 等级进度条 -->
<scroll-view
class="level-progress"
scroll-x
:show-scrollbar="false"
:scroll-left="currentLevelScrollLeft"
scroll-with-animation
>
<view class="level-track">
<view class="level-progress">
<view v-for="(_, index) in 10" :key="index" class="progress-dot">
<view
v-for="level in levels"
:id="`level-${level}`"
:key="level"
:class="[
'level-node',
level < currentLevel ? 'level-node--done' : '',
level === currentLevel ? 'level-node--current' : '',
]"
>
<view class="level-node__top">
<view class="level-node__dot" />
<view v-if="level < MAX_LEVEL" class="level-node__line" />
</view>
<text class="level-node__label">{{ level }}</text>
</view>
:style="{
backgroundColor:
index + 1 < user.lvl
? '#fff9'
: index + 1 === user.lvl
? '#fed847'
: 'transparent',
borderColor: index + 1 === user.lvl ? '#fed847' : '#fff9',
}"
/>
<view />
</view>
</scroll-view>
</view>
<!-- 说明文本 -->
<view class="body">
<view class="content">
<view class="intro-text">
在射灵世界中等级是衡量您射箭技能的重要指标而经验则是您提升等级的关键具体的要求如下
</view>
@@ -100,84 +65,32 @@ const currentLevelScrollLeft = computed(() => {
.level-progress {
width: 100%;
white-space: nowrap;
padding: 24rpx 0 34rpx;
box-sizing: border-box;
}
.level-track {
display: inline-flex;
align-items: flex-start;
padding-left: 20rpx;
padding-right: 20rpx;
}
.level-node {
height: 32rpx;
display: flex;
flex-direction: column;
align-items: flex-start;
width: 72rpx;
flex: 0 0 72rpx;
justify-content: center;
margin-top: 10px;
margin-bottom: 20px;
}
.level-node__top {
.progress-dot {
display: flex;
align-items: center;
width: 100%;
}
.level-node__dot {
width: 28rpx;
height: 28rpx;
.progress-dot > view:first-child {
width: 3.8vw;
height: 3.8vw;
border-radius: 50%;
border: 3rpx solid rgba(255, 255, 255, 0.45);
box-sizing: border-box;
border: 1px solid #fff9;
}
.progress-dot > view:last-child {
width: 3.8vw;
height: 1px;
margin: 0 2px;
background-color: #fff9;
}
.level-node__line {
flex: 1;
height: 2rpx;
background-color: rgba(255, 255, 255, 0.45);
}
.level-node__label {
width: 28rpx;
margin-top: 14rpx;
color: rgba(255, 255, 255, 0.45);
font-size: 24rpx;
line-height: 28rpx;
text-align: center;
}
.level-node--done .level-node__dot {
background-color: #ffffff;
border-color: #ffffff;
}
.level-node--done .level-node__line {
background-color: rgba(255, 255, 255, 0.8);
}
.level-node--done .level-node__label {
color: rgba(255, 255, 255, 0.72);
}
.level-node--current .level-node__dot {
background-color: #fed847;
border-color: #fed847;
}
.level-node--current .level-node__line {
background-color: rgba(255, 255, 255, 0.45);
}
.level-node--current .level-node__label {
color: #fed847;
font-weight: 700;
}
.body {
height: calc(100% - 146rpx);
.content {
height: calc(100% - 148rpx);
background-color: #ffffff;
padding: 30rpx;
}
+79
View File
@@ -0,0 +1,79 @@
<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import { generateCanvasImage } from "@/util";
import { getPractiseAPI } from "@/apis";
import { wxShare } from "@/util";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
onLoad(async (options) => {
const id = options.id || 461;
const data = await getPractiseAPI(id);
if (!data.arrows.length) return;
generateCanvasImage("shareCanvas", options.type, user.value, data);
});
const saveImage = () => {
uni.canvasToTempFilePath({
canvasId: "shareCanvas",
success: (res) => {
const tempFilePath = res.tempFilePath;
// 保存图片到相册
uni.saveImageToPhotosAlbum({
filePath: tempFilePath,
success: () => {
uni.showToast({ title: "保存成功" });
},
fail: () => {
uni.showToast({ title: "保存失败", icon: "error" });
},
});
},
});
};
</script>
<template>
<Container>
<view class="content">
<view :style="{ overflow: 'hidden', borderRadius: '10px' }">
<canvas
:style="{ width: '300px', height: '534px' }"
canvas-id="shareCanvas"
></canvas>
</view>
</view>
</Container>
</template>
<style scoped>
.content {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 20px;
}
.footer {
width: 100%;
display: flex;
justify-content: space-around;
margin-top: 50px;
}
.footer > button {
display: flex;
flex-direction: column;
align-items: center;
color: #fff;
font-size: 12px;
}
.footer > button > image {
width: 45px;
margin-bottom: 10px;
}
</style>
+209 -400
View File
@@ -1,262 +1,54 @@
<script setup>
import {onMounted, onUnmounted, ref} from "vue";
import {onShareAppMessage, onShareTimeline, onShow} from "@dcloudio/uni-app";
import { ref, onMounted } from "vue";
import { onShow, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import AppFooter from "@/components/AppFooter.vue";
import AppBackground from "@/components/AppBackground.vue";
import UserHeader from "@/components/UserHeader.vue";
import SModal from "@/components/SModal.vue";
import Signin from "@/components/Signin.vue";
import BubbleTip from "@/components/BubbleTip.vue";
import OtaModal from "@/components/OtaModal.vue";
import {
checkUserBindAPI,
getAppConfig,
getDeviceBatteryAPI,
getHardwareBoxTaskStatusAPI,
getHardwareBoxVersionAPI,
getRankListAPI,
getHomeData,
getMyDevicesAPI,
getScoreRankList,
sendHardwareBoxUpdateAPI,
silentLoginAPI,
} from "@/apis";
import {topThreeColors} from "@/constants";
import { topThreeColors } from "@/constants";
import useStore from "@/store";
import {storeToRefs} from "pinia";
import { storeToRefs } from "pinia";
const store = useStore();
const {
updateConfig,
updateUser,
updateDevice,
clearDevice,
getLvlName,
getLvlNameByScore,
updateOnline,
} = store;
const {user, device, online, game} = storeToRefs(store);
const { updateConfig, updateUser, updateDevice, updateRank, getLvlName } =
store;
// 使用storeToRefs,用于UI里显示,保持响应性
const { user, device, rankData } = storeToRefs(store);
const showModal = ref(false);
const showGuide = ref(false);
const scoreRankList = ref([]);
// OTA 相关
const otaVisible = ref(false);
const otaState = ref("new_version");
const otaProgress = ref(0);
const otaInfo = ref({
versionNumber: "",
versionInfo: "",
resourceUrl: "",
forceUpdate: false,
});
const isStartingOta = ref(false);
let otaProgressTimer = null;
let otaStatusTimer = null;
let otaTimeoutTimer = null;
// 清理首页 OTA 更新定时器,避免弹窗关闭或页面卸载后继续轮询。
const clearOtaUpdateTimers = () => {
clearInterval(otaProgressTimer);
clearTimeout(otaStatusTimer);
clearTimeout(otaTimeoutTimer);
otaProgressTimer = null;
otaStatusTimer = null;
otaTimeoutTimer = null;
};
// 启动首页 OTA 本地进度动画,最终成功失败以后端任务状态为准。
const startOtaProgressAnimation = () => {
clearInterval(otaProgressTimer);
otaProgressTimer = setInterval(() => {
if (otaProgress.value >= 90) {
clearInterval(otaProgressTimer);
return;
}
const increment = Math.max(0.5, 2 - otaProgress.value / 60);
otaProgress.value = Math.min(90, otaProgress.value + increment);
}, 500);
};
// 获取并保存后端返回的 OTA 版本信息,供弹窗展示和更新接口使用。
const applyOtaVersionInfo = (versionInfo) => {
otaInfo.value = {
versionNumber: versionInfo?.versionNumber || "",
versionInfo: versionInfo?.versionInfo || "",
resourceUrl: versionInfo?.resourceUrl || "",
forceUpdate: Number(versionInfo?.forceUpdate) === 1,
};
};
// 检查当前设备盒子是否存在可升级版本。
const checkOtaUpdate = async () => {
let versionInfo;
try {
versionInfo = await getHardwareBoxVersionAPI();
} catch (err) {
return;
}
if (!versionInfo?.needUpdate) return;
applyOtaVersionInfo(versionInfo);
const dismissedAt = uni.getStorageSync("ota_dismissed_at");
const now = Date.now();
if (!otaInfo.value.forceUpdate && dismissedAt && now - dismissedAt < 24 * 60 * 60 * 1000) return;
otaState.value = "new_version";
otaVisible.value = true;
};
// 拼接 OTA WiFi 页参数,让未连 WiFi 的设备继续使用同一份版本信息。
const getOtaWifiUrl = () => {
const { versionNumber, resourceUrl } = otaInfo.value;
const query = [
`versionNumber=${encodeURIComponent(versionNumber)}`,
`resourceUrl=${encodeURIComponent(resourceUrl)}`,
].join("&");
return `/pages/ota-wifi?${query}`;
};
// 处理 OTA 弹窗暂不更新,强制更新时不允许关闭。
const handleOtaDismiss = () => {
if (otaInfo.value.forceUpdate) return;
uni.setStorageSync("ota_dismissed_at", Date.now());
otaVisible.value = false;
};
// 将首页 OTA 直连更新流程标记为失败。
const failHomeOtaUpdate = () => {
clearOtaUpdateTimers();
isStartingOta.value = false;
otaState.value = "update_failure";
otaVisible.value = true;
};
// 将首页 OTA 直连更新流程标记为成功。
const completeHomeOtaUpdate = () => {
clearOtaUpdateTimers();
isStartingOta.value = false;
otaProgress.value = 100;
setTimeout(() => {
otaState.value = "update_success";
otaVisible.value = true;
}, 300);
};
// 轮询首页直接发起的 OTA 更新任务状态。
const pollHomeOtaTaskStatus = (taskId) => {
clearTimeout(otaStatusTimer);
otaStatusTimer = setTimeout(async () => {
try {
const taskStatus = await getHardwareBoxTaskStatusAPI(taskId);
const status = Number(taskStatus?.status);
if (status === 2) {
completeHomeOtaUpdate();
return;
}
if (status === 3) {
failHomeOtaUpdate();
return;
}
if (status === 0 || status === 1) {
pollHomeOtaTaskStatus(taskId);
return;
}
failHomeOtaUpdate();
} catch (err) {
failHomeOtaUpdate();
}
}, 3000);
};
// 设备盒子已连 WiFi 时,从首页直接传空 WiFi 信息发起 OTA 更新。
const startHomeOtaUpdate = async () => {
otaState.value = "update_progress";
otaVisible.value = true;
otaProgress.value = 0;
startOtaProgressAnimation();
otaTimeoutTimer = setTimeout(() => {
if (otaState.value === "update_progress") {
failHomeOtaUpdate();
}
}, 5 * 60 * 1000);
try {
const updateResult = await sendHardwareBoxUpdateAPI({
versionNumber: otaInfo.value.versionNumber,
wifiSsid: "",
wifiPassword: "",
resourceUrl: otaInfo.value.resourceUrl,
});
if (!updateResult?.taskId) {
failHomeOtaUpdate();
return;
}
pollHomeOtaTaskStatus(updateResult.taskId);
} catch (err) {
failHomeOtaUpdate();
}
};
// 点击立即更新时先判断设备是否在线并已通过 WiFi 联网,已联网则首页直接更新,否则跳转 WiFi 页面。
const handleOtaUpdate = async () => {
if (isStartingOta.value) return;
isStartingOta.value = true;
let deviceStatus;
try {
deviceStatus = await getDeviceBatteryAPI();
} catch (err) {
isStartingOta.value = false;
uni.showToast({
title: "获取设备状态失败,请重试",
icon: "none",
});
return;
}
if (deviceStatus?.online !== true) {
isStartingOta.value = false;
uni.showToast({
title: "请先开启智能弓",
icon: "none",
});
return;
}
if (String(deviceStatus?.netType || "").toLowerCase() === "wifi") {
startHomeOtaUpdate();
return;
}
isStartingOta.value = false;
otaVisible.value = false;
uni.navigateTo({ url: getOtaWifiUrl() });
};
// 处理 OTA 更新成功后的完成按钮,关闭结果弹窗。
const handleOtaDone = () => {
otaVisible.value = false;
};
// 处理 OTA 更新失败后的重试按钮,重新走立即更新判断流程。
const handleOtaRetry = () => {
handleOtaUpdate();
};
// 提取积分榜接口返回的榜单数组,兼容数组和对象两种返回格式。
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 = (path) => {
if (!user.value.id) {
showModal.value = true;
return;
}
uni.navigateTo({url: path});
if (
"/pages/first-try,/pages/practise,/pages/friend-battle".indexOf(path) !== -1
) {
if (!device.value.deviceId) {
return uni.showToast({
title: "请先绑定设备",
icon: "none",
});
}
if ("/pages/first-try".indexOf(path) === -1 && !user.value.trio) {
return uni.showToast({
title: "请先完成新手试炼",
icon: "none",
});
}
}
uni.navigateTo({
url: path,
});
};
const toRankListPage = () => {
@@ -265,64 +57,25 @@ const toRankListPage = () => {
});
};
onShow(async (options) => {
const env = uni.getAccountInfoSync().miniProgram.envVersion;
const token = uni.getStorageSync(`${env}_token`);
onShow(async () => {
const token = uni.getStorageSync(
`${uni.getAccountInfoSync().miniProgram.envVersion}_token`
);
// 检查是否从 OTA 更新页面返回
if (options && options.updateResult) {
otaState.value = options.updateResult;
otaVisible.value = true;
} else if (token || user.value.id) {
await checkOtaUpdate();
}
if (!user.value.id && !token) {
// showModal.value = true;
// try {
// const wxResult = await uni.login({provider: "weixin"});
// const bindResult = await checkUserBindAPI(wxResult.code);
// if (bindResult.binded) {
// const newResult = await uni.login({provider: "weixin"});
// const silentResult = await silentLoginAPI(newResult.code);
// if (silentResult.user) updateUser(silentResult.user);
// const devices = await getMyDevicesAPI();
// if (devices.bindings && devices.bindings.length) {
// updateDevice(
// devices.bindings[0].deviceId,
// devices.bindings[0].deviceName
// );
// const data = await getDeviceBatteryAPI();
// updateOnline(data.online);
// }
// } else {
// showModal.value = true;
// }
// } catch (e) {
// console.log("检查绑定状态失败", e);
// }
}
const promises = [getScoreRankList(undefined, 1, 10)];
if (token || user.value.id) {
const promises = [getRankListAPI()];
if (token) {
promises.push(getHomeData());
}
const [rankList, homeData] = await Promise.all(promises);
console.log("积分榜数据", rankList);
scoreRankList.value = getScoreRankData(rankList).slice(0, 10);
console.log("排行数据", rankList);
updateRank(rankList);
if (homeData) {
console.log("首页数据:", homeData);
if (homeData.user) {
updateUser(homeData.user);
if ("823,209,293,257".indexOf(homeData.user.id) !== -1) {
const show = uni.getStorageSync("show-the-user");
if (!show) {
uni.setStorageSync("show-the-user", true);
}
}
if (homeData.user.trio <= 0) {
showGuide.value = true;
setTimeout(() => {
@@ -332,13 +85,9 @@ onShow(async (options) => {
const devices = await getMyDevicesAPI();
if (devices.bindings && devices.bindings.length) {
updateDevice(
devices.bindings[0].deviceId,
devices.bindings[0].deviceName
devices.bindings[0].deviceId,
devices.bindings[0].deviceName
);
const data = await getDeviceBatteryAPI();
updateOnline(data.online);
} else {
clearDevice();
}
}
}
@@ -350,16 +99,19 @@ onMounted(async () => {
console.log("全局配置:", config);
});
onUnmounted(() => {
clearOtaUpdateTimers();
});
const comingSoon = () => {
uni.showToast({
title: "敬请期待",
icon: "none",
});
};
onShareAppMessage(() => {
return {
title: "智能真弓:实时捕捉+毫秒级同步,弓箭选手全球竞技!", // 分享卡片的标题
path: "/pages/index", // 用户点击分享卡片后跳转的页面路径
imageUrl:
"https://static.shelingxingqiu.com/attachment/2025-09-12/dcqoz26q0268wxmzjg.png", // 分享卡片的配图,可以是本地或网络图片
"https://static.shelingxingqiu.com/attachment/2025-09-12/dcqoz26q0268wxmzjg.png", // 分享卡片的配图,可以是本地或网络图片
};
});
onShareTimeline(() => {
@@ -367,130 +119,106 @@ onShareTimeline(() => {
title: "智能真弓:实时捕捉+毫秒级同步,弓箭选手全球竞技!", // 分享到朋友圈的标题
query: "from=timeline", // 用户通过朋友圈点击后,在页面 onShow 的 options 中可以获取到的参数
imageUrl:
"https://static.shelingxingqiu.com/attachment/2025-09-12/dcqoz26q0268wxmzjg.png", // 分享到朋友圈的配图
"https://static.shelingxingqiu.com/attachment/2025-09-12/dcqoz26q0268wxmzjg.png", // 分享到朋友圈的配图
};
});
</script>
<template>
<Container :isHome="true" :showBackToGame="true">
<!-- OTA 升级弹窗使用 visible 控制显隐description 为副标题changelog 为详细说明 -->
<OtaModal
:visible="otaVisible"
:state="otaState"
:version="otaInfo.versionNumber"
:progress="otaProgress"
:description="''"
:changelog="otaInfo.versionInfo"
:forceUpdate="otaInfo.forceUpdate"
@update="handleOtaUpdate"
@skip="handleOtaDismiss"
@close="handleOtaDismiss"
@done="handleOtaDone"
@retry="handleOtaRetry"
/>
<view class="container">
<view class="top-theme">
<!-- <image
src="https://static.shelingxingqiu.com/attachment/2025-12-31/dfc9dxrq4xn7e6y2pp.png"
mode="widthFix"
/> -->
</view>
<UserHeader showRank :onSignin="() => (showModal = true)"/>
<UserHeader showRank :onSignin="() => (showModal = true)" />
<view :style="{ padding: '12px 10px' }">
<view class="feature-grid">
<view class="bow-card">
<image
v-if="online"
src="https://static.shelingxingqiu.com/attachment/2025-08-07/dbvt1o6dvhr2rop3kn.webp"
mode="widthFix"
@click="() => toPage('/pages/my-device')"
src="https://static.shelingxingqiu.com/attachment/2025-08-07/dbvt1o6dvhr2rop3kn.webp"
mode="widthFix"
@click="() => toPage('/pages/my-device')"
/>
<text v-if="!user.id">我的弓箭</text>
<text v-if="user.id && !device.deviceId">连接智能弓箭</text>
<text
v-if="user.id && device.deviceId"
class="truncate"
:style="{ width: '90%', textAlign: 'center' }"
>{{ device.deviceName }}</text
>
<image
v-else
src="https://static.shelingxingqiu.com/attachment/2026-01-04/dffohwtk1gwh0xfa6h.png"
mode="widthFix"
@click="$clickSound(() => toPage('/pages/my-device'))"
src="../static/first-try.png"
mode="widthFix"
@click="() => toPage('/pages/first-try')"
/>
<block v-if="user.id">
<text v-if="!device.deviceId">绑定我的智能弓</text>
<text v-else-if="!online">设备离线</text>
<text v-else-if="online">设备在线</text>
</block>
<image
src="https://static.shelingxingqiu.com/shootmini/static/first-try.png"
mode="widthFix"
@click="() => toPage('/pages/first-try')"
/>
<BubbleTip v-if="showGuide" :location="{ top: '60%', left: '47%' }">
<BubbleTip
v-if="showGuide"
:location="{ top: '60%', left: '40%', fontSize: '14px' }"
>
<text>新人必刷</text>
<text>快来报到吧~</text>
</BubbleTip>
</view>
<view class="play-card">
<!-- toPage('/pages/practise') -->
<view @click="$clickSound(() => toPage('/pages/training/index'))">
<image src="https://static.shelingxingqiu.com/shootmini/static/my-practise.png" mode="widthFix"/>
<view @click="() => toPage('/pages/practise')">
<image src="../static/my-practise.png" mode="widthFix" />
</view>
<view @click="$clickSound(() => toPage('/pages/friend-battle'))">
<image src="https://static.shelingxingqiu.com/shootmini/static/friend-battle.png" mode="widthFix"/>
<view @click="() => toPage('/pages/friend-battle')">
<image src="../static/friend-battle.png" mode="widthFix" />
</view>
</view>
</view>
<view class="ranking-section">
<image
src="https://static.shelingxingqiu.com/attachment/2025-09-25/dd1p9ci9v7frcrsxhj.png"
mode="widthFix"
src="https://static.shelingxingqiu.com/attachment/2025-09-25/dd1p9ci9v7frcrsxhj.png"
mode="widthFix"
/>
<button
class="into-btn"
@click="$clickSound(() => toPage('/pages/ranking'))"
hover-class="none"
class="into-btn"
@click="() => toPage('/pages/ranking')"
hover-class="none"
></button>
<view class="ranking-players" @click="toRankListPage">
<img src="https://static.shelingxingqiu.com/shootmini/static/juezhanbang.png" mode="widthFix"/>
<img src="../static/juezhanbang.png" mode="widthFix" />
<view class="divide-line"></view>
<view class="player-avatars">
<view
v-for="i in 6"
:key="i"
class="player-avatar"
:style="{
v-for="i in 6"
:key="i"
class="player-avatar"
:style="{
zIndex: 8 - i,
borderColor: scoreRankList[i - 1]
borderColor: rankData.rank[i - 1]
? topThreeColors[i - 1] || '#000'
: '#000',
}"
>
<image v-if="i === 1" src="../static/champ1.png"/>
<image v-if="i === 2" src="../static/champ2.png"/>
<image v-if="i === 3" src="../static/champ3.png"/>
<image v-if="i === 1" src="../static/champ1.png" />
<image v-if="i === 2" src="../static/champ2.png" />
<image v-if="i === 3" src="../static/champ3.png" />
<view v-if="i > 3">{{ i }}</view>
<image
:src="
scoreRankList[i - 1]
? (scoreRankList[i - 1].avatar || '../static/user-icon.png')
:src="
rankData.rank[i - 1]
? rankData.rank[i - 1].avatar
: '../static/user-icon-dark.png'
"
mode="aspectFill"
mode="aspectFill"
/>
</view>
<view class="more-players">
<text>{{ scoreRankList.length }}</text>
<text>{{ rankData.rank.length }}</text>
</view>
</view>
</view>
<view class="my-data">
<view @click="() => toPage('/pages/my-growth')">
<image src="https://static.shelingxingqiu.com/shootmini/static/my-growth.png" mode="widthFix"/>
<image src="../static/my-growth.png" mode="widthFix" />
</view>
<view @click="() => toPage('/pages/ranking')">
<view>
<text>段位</text>
<text>{{
user.lvlName || "暂无"
}}
</text>
user.scores ? getLvlName(user.scores) : "暂无"
}}</text>
</view>
<view>
<text>赛季平均环数</text>
@@ -499,26 +227,79 @@ onShareTimeline(() => {
<view>
<text>赛季胜率</text>
<text>{{
user.avg_win
? Number((user.avg_win * 100).toFixed(2)) + "%"
: "暂无"
}}
</text>
user.avg_win
? Number((user.avg_win * 100).toFixed(2)) + "%"
: "暂无"
}}</text>
</view>
</view>
</view>
<!-- <view class="region-stats">
<view
v-for="(region, index) in [
{ name: '广东', score: 4291 },
{ name: '湖南', score: 3095 },
{ name: '内蒙', score: 2342 },
{ name: '海南', score: 1812 },
{ name: '四川', score: 1293 },
]"
:key="index"
class="region-item"
@click="comingSoon"
>
<image src="../static/region-bg.png" mode="widthFix" />
<image
v-if="index === 0"
src="../static/region-1.png"
mode="widthFix"
/>
<image
v-if="index === 1"
src="../static/region-2.png"
mode="widthFix"
/>
<image
v-if="index === 2"
src="../static/region-3.png"
mode="widthFix"
/>
<image
v-if="index === 3"
src="../static/region-4.png"
mode="widthFix"
/>
<image
v-if="index === 4"
src="../static/region-5.png"
mode="widthFix"
/>
<text>{{ region.name }}</text>
<view>
<text :style="{ color: '#fff', marginRight: '2px' }">{{
region.score
}}</text>
<text>分</text>
</view>
</view>
<view class="region-more" @click="comingSoon">
<image src="../static/region-more.png" mode="widthFix" />
<text>...</text>
<text>更多</text>
</view>
</view> -->
</view>
</view>
<Signin :show="showModal" :onClose="() => (showModal = false)"/>
<SModal :show="showModal" :onClose="() => (showModal = false)">
<Signin :onClose="() => (showModal = false)" />
</SModal>
</view>
<AppFooter/>
<AppFooter />
</Container>
</template>
<style scoped>
.container {
width: 100%;
height: calc(100% - 120px);
}
.feature-grid {
@@ -535,8 +316,6 @@ onShareTimeline(() => {
.bow-card {
width: 50%;
border-radius: 25rpx;
overflow: hidden;
}
.feature-grid > view > image {
@@ -545,7 +324,7 @@ onShareTimeline(() => {
.bow-card > text {
position: absolute;
top: 66%;
top: 65%;
left: 50%;
transform: translate(-50%, -50%);
white-space: nowrap;
@@ -632,7 +411,6 @@ onShareTimeline(() => {
width: 32rpx;
height: 32rpx;
}
.player-avatar > view:first-child {
border-radius: 50%;
background: #777777;
@@ -643,7 +421,6 @@ onShareTimeline(() => {
height: 18px;
color: #fff;
}
.player-avatar > image:last-child {
width: 100%;
height: 100%;
@@ -663,21 +440,71 @@ onShareTimeline(() => {
color: #fff;
}
.region-stats {
display: flex;
grid-template-columns: repeat(6, 1fr);
margin-top: 20px;
justify-content: space-between;
}
.region-item,
.region-more {
border-radius: 10px;
text-align: center;
position: relative;
width: 13vw;
height: 13vw;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #c5c5c5;
font-size: 12px;
}
.region-item > text {
margin-top: 10px;
}
.region-more {
width: 8vw;
height: 13vw;
}
.region-item > image:first-child,
.region-more > image:first-child {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: -1;
}
.region-item > image:nth-of-type(2) {
position: absolute;
top: 0;
left: 0;
width: 18px;
}
.region-item > view:last-child {
display: flex;
justify-content: center;
font-size: 10px;
}
.region-more > text:first-of-type {
font-size: 30px;
line-height: 20px;
margin-bottom: 5px;
}
.my-data {
display: flex;
margin-top: 20px;
justify-content: space-between;
}
.my-data > view:first-child {
width: 28%;
}
.my-data > view:first-child > image {
width: 100%;
transform: translateX(-8px);
}
.my-data > view:nth-child(2) {
width: 68%;
font-size: 12px;
@@ -685,11 +512,9 @@ onShareTimeline(() => {
display: flex;
justify-content: space-between;
}
.my-data > view:nth-child(2) > view:nth-child(2) {
width: 38%;
}
.my-data > view:nth-child(2) > view {
width: 28%;
border-radius: 10px;
@@ -699,25 +524,9 @@ onShareTimeline(() => {
align-items: center;
justify-content: center;
}
.my-data > view:nth-child(2) > view > text:last-child {
color: #fff;
line-height: 25px;
font-weight: 500;
}
.top-theme {
position: absolute;
display: none;
align-items: center;
justify-content: center;
width: 100%;
height: 60px;
z-index: -1;
}
.top-theme > image {
width: 300rpx;
transform: translate(-4%, -14%);
}
</style>
+200 -143
View File
@@ -4,98 +4,91 @@ import { onLoad } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import BattleHeader from "@/components/BattleHeader.vue";
import Avatar from "@/components/Avatar.vue";
// import TeamResult from "@/components/TeamResult.vue";
// import MeleeResult from "@/components/MeleeResult.vue";
import PlayerScore2 from "@/components/PlayerScore2.vue";
import { getBattleAPI } from "@/apis";
import { getGameAPI } from "@/apis";
const blueTeam = ref([]);
const redTeam = ref([]);
const roundsData = ref([]);
const goldenRoundsData = ref([]);
const battleId = ref("");
const data = ref({
teams: [],
rounds: [],
players: [],
});
const players = ref([]);
const isLoading = ref(true);
const loadError = ref("");
// const show = ref(false);
const loadBattle = async () => {
const result = await getBattleAPI(battleId.value);
data.value = result;
if (result.mode > 3) {
const plist = result.teams[0] ? result.teams[0].players : [];
// 以 id 为 key 建立 teams 玩家快速查找表
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);
result.rounds.forEach((r, rIndex) => {
if (r.shoots[playerId]) {
r.shoots[playerId].forEach((s, sIndex) => {
arrows[sIndex + rIndex * 6] = s;
});
onLoad(async (options) => {
if (options.id) {
battleId.value = options.id || "BATTLE-1755484626207409508-955";
const result = await getGameAPI(battleId.value);
data.value = result;
if (result.mode === 1) {
blueTeam.value = Object.values(result.bluePlayers || {});
redTeam.value = Object.values(result.redPlayers || {});
Object.values(result.roundsData).forEach((item) => {
let bluePoint = 1;
let redPoint = 1;
let blueTotalRings = 0;
let redTotalRings = 0;
let blueArrows = [];
let redArrows = [];
blueTeam.value.forEach((p) => {
if (!item[p.playerId]) return;
blueTotalRings += item[p.playerId].reduce((a, b) => a + b.ring, 0);
blueArrows = [...blueArrows, ...item[p.playerId]];
});
redTeam.value.forEach((p) => {
if (!item[p.playerId]) return;
redTotalRings += item[p.playerId].reduce((a, b) => a + b.ring, 0);
redArrows = [...redArrows, ...item[p.playerId]];
});
if (blueTotalRings > redTotalRings) {
bluePoint = 2;
redPoint = 0;
} else if (blueTotalRings < redTotalRings) {
bluePoint = 0;
redPoint = 2;
}
roundsData.value.push({
blue: {
avatars: blueTeam.value.map((p) => p.avatar),
arrows: blueArrows,
totalRing: blueTotalRings,
totalScore: bluePoint,
},
red: {
avatars: redTeam.value.map((p) => p.avatar),
arrows: redArrows,
totalRing: redTotalRings,
totalScore: redPoint,
},
});
});
return {
...item,
id: playerId,
rank: index + 1,
name: (p && p.name) || item.name,
avatar: (p && p.avatar) || item.avatar || "",
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];
result.goldenRounds.forEach((round) => {
goldenRoundsData.value.push({
blue: {
avatars: blueTeam.value.map((p) => p.avatar),
arrows: round.arrowHistory.filter((a) => a.team === 1),
},
red: {
avatars: redTeam.value.map((p) => p.avatar),
arrows: round.arrowHistory.filter((a) => a.team === 0),
},
winner: round.winner,
});
});
}
}
// 数据和派生列表均已就绪后再关闭占位,避免空壳闪烁。
isLoading.value = false;
};
const requestBattle = () => {
if (!battleId.value) return;
isLoading.value = true;
loadError.value = "";
loadBattle().catch((error) => {
console.error("加载比赛详情失败:", error);
loadError.value = "赛况加载失败";
isLoading.value = false;
});
};
onLoad((options) => {
if (!options.battleId) {
loadError.value = "缺少比赛信息";
isLoading.value = false;
return;
}
battleId.value = options.battleId;
requestBattle();
});
const checkBowData = (selected) => {
if (data.value.mode <= 3) {
const checkBowData = () => {
if (data.value.mode === 1) {
uni.navigateTo({
url: `/pages/team-battle/team-bow-data?battleId=${battleId.value}&selected=${selected}`,
url: `/pages/team-bow-data?battleId=${battleId.value}`,
});
} else {
} else if (data.value.mode === 2) {
uni.navigateTo({
url: `/pages/melee-bow-data?battleId=${battleId.value}`,
});
@@ -106,26 +99,14 @@ const checkBowData = (selected) => {
<template>
<Container title="详情">
<view class="container">
<view v-if="isLoading" class="page-state">
<text>赛况加载中...</text>
</view>
<view
v-else-if="loadError"
class="page-state page-state--error"
@click="requestBattle"
>
<text>{{ loadError }}</text>
<text v-if="battleId" class="retry-text">点击重新加载</text>
</view>
<BattleHeader
v-if="data.mode <= 3"
:winner="data.winTeam"
:blueTeam="data.teams[1] ? data.teams[1].players : []"
:redTeam="data.teams[2] ? data.teams[2].players : []"
:players="players"
:winner="data.winner"
:blueTeam="blueTeam"
:redTeam="redTeam"
:players="data.players"
/>
<view
v-if="data.mode > 3"
v-if="data.players && data.players.length"
class="score-header"
:style="{ border: 'none', padding: '5px 15px' }"
>
@@ -136,64 +117,156 @@ const checkBowData = (selected) => {
</view>
</view>
<PlayerScore2
v-if="data.mode > 3"
v-for="(player, index) in players"
v-if="data.players && data.players.length"
v-for="(player, index) in data.players"
:key="index"
:name="player.name"
:avatar="player.avatar"
:arrows="player.arrows"
:scores="player.arrowHistory"
:totalScore="player.totalScore"
:rank="player.rank"
:totalRing="player.totalRings"
:rank="index + 1"
/>
<view
v-if="data.mode <= 3"
v-for="(round, index) in data.rounds"
:key="index"
:style="{ marginBottom: '5px' }"
>
<block v-for="(round, index) in goldenRoundsData" :key="index">
<view class="score-header">
<text>{{ round.ifGold ? "决金箭" : `${index + 1}` }}</text>
<view @click="() => checkBowData(index)">
<text>决金箭轮环数</text>
<view @click="checkBowData">
<text>查看靶纸</text>
<image src="../static/back.png" mode="widthFix" />
</view>
</view>
<view
class="score-row"
v-for="team in Object.keys(round.shoots)"
:key="team"
>
<view class="score-row">
<view>
<view>
<image
v-for="(p, index) in data.teams[team].players"
v-for="(src, index) in round.blue.avatars"
:style="{
borderColor: '#64BAFF',
transform: `translateX(-${index * 15}px)`,
}"
:src="p.avatar || '../static/user-icon.png'"
:src="src"
:key="index"
mode="widthFix"
/>
</view>
<text
v-for="(arrow, index2) in round.shoots[team]"
:key="index2"
:style="{ color: arrow.ringX ? '#fed847' : '#ccc' }"
>
{{ arrow.ringX ? "X" : `${arrow.ring}` }}
<text v-for="(arrow, index) in round.blue.arrows" :key="index">
{{ arrow.ring }}
</text>
</view>
<view>
<text :style="{ color: team == 1 ? '#64BAFF' : '#FF6767' }">
{{ round.shoots[team].reduce((acc, cur) => acc + cur.ring, 0) }}
</text>
<text>得分 {{ round.scores[team].score }}</text>
</view>
<image
v-if="round.winner === 1"
src="../static/winner-badge.png"
mode="widthFix"
/>
</view>
<view class="score-row" :style="{ marginBottom: '5px' }">
<view>
<view>
<image
v-for="(src, index) in round.red.avatars"
:style="{
borderColor: '#FF6767',
transform: `translateX(-${index * 15}px)`,
}"
:src="src || '../static/user-icon.png'"
:key="index"
mode="widthFix"
/>
</view>
<text v-for="(arrow, index) in round.red.arrows" :key="index">
{{ arrow.ring }}
</text>
</view>
<image
v-if="round.winner === 0"
src="../static/winner-badge.png"
mode="widthFix"
/>
</view>
</block>
<view
v-for="(round, index) in roundsData"
:key="index"
:style="{ marginBottom: '5px' }"
>
<block
v-if="
index < Object.keys(roundsData).length - goldenRoundsData.length
"
>
<view class="score-header">
<text>第{{ index + 1 }}轮</text>
<view @click="checkBowData">
<text>查看靶纸</text>
<image src="../static/back.png" mode="widthFix" />
</view>
</view>
<view class="score-row">
<view>
<view>
<image
v-for="(src, index) in round.blue.avatars"
:style="{
borderColor: '#64BAFF',
transform: `translateX(-${index * 15}px)`,
}"
:src="src || '../static/user-icon.png'"
:key="index"
mode="widthFix"
/>
</view>
<text v-for="(arrow, index2) in round.blue.arrows" :key="index2">
{{ arrow.ring }}环
</text>
</view>
<view>
<text :style="{ color: '#64BAFF' }">
{{ round.blue.totalRing }}环
</text>
<text>得分 {{ round.blue.totalScore }}</text>
</view>
</view>
<view class="score-row">
<view>
<view>
<image
v-for="(src, index) in round.red.avatars"
:style="{
borderColor: '#FF6767',
transform: `translateX(-${index * 15}px)`,
}"
:src="src"
:key="index"
mode="widthFix"
/>
</view>
<text v-for="(arrow, index2) in round.red.arrows" :key="index2">
{{ arrow.ring }}环
</text>
</view>
<view>
<text :style="{ color: '#FF6767' }">
{{ round.red.totalRing }}环
</text>
<text>得分 {{ round.red.totalScore }}</text>
</view>
</view>
</block>
</view>
<view :style="{ height: '20px' }"></view>
</view>
<!-- <TeamResult
v-if="data.mode === 1"
:show="show"
:onClose="() => (show = false)"
:data="data"
/>
<MeleeResult
v-if="data.mode === 2"
:show="show"
:onClose="() => (show = false)"
:data="data"
/> -->
</Container>
</template>
@@ -202,22 +275,6 @@ const checkBowData = (selected) => {
width: 100%;
height: 100%;
}
.page-state {
min-height: 60vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.6);
font-size: 26rpx;
}
.page-state--error {
color: rgba(255, 255, 255, 0.72);
}
.retry-text {
margin-top: 16rpx;
color: #fed847;
}
.score-header,
.score-row {
display: flex;
+39 -236
View File
@@ -3,223 +3,46 @@ import { ref, onMounted, onBeforeUnmount } from "vue";
import { onLoad, onShow, onHide } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import Matching from "@/components/Matching.vue";
import ModalDialog from "@/components/ModalDialog.vue";
import audioManager from "@/audioManager";
import { matchGameAPI, getBattleAPI } from "@/apis";
import { MESSAGETYPESV2 } from "@/constants";
import { isLimitError } from "@/util";
import { returnToBattle } from "@/utils/matchReturn";
import RoundEndTip from "@/components/RoundEndTip.vue";
import TestDistance from "@/components/TestDistance.vue";
import { matchGameAPI } from "@/apis";
import { MESSAGETYPES } from "@/constants";
const gameType = ref(0);
const teamSize = ref(0);
const onComplete = ref(null);
const showLimitModal = ref(false);
const navigationPending = ref(false);
let pageMounted = false;
let pageVisible = false;
let foregroundGeneration = 0;
/** 匹配超时计时器,用于检测 WS 消息丢失或真正超时 */
const matchTimeoutTimer = ref(null);
/** 匹配超时阈值(ms),后端设置 15s 匹配,前端预留 5s 冗余 */
const MATCH_TIMEOUT_MS = 20 * 1000;
const MATCH_INFO_RETRY_DELAY_MS = 500;
/** 清除超时计时器 */
const clearMatchTimeout = () => {
if (matchTimeoutTimer.value) {
clearTimeout(matchTimeoutTimer.value);
matchTimeoutTimer.value = null;
}
};
const wait = (delay) =>
new Promise((resolve) => {
setTimeout(resolve, delay);
});
const isCurrentForeground = (generation) =>
pageMounted &&
pageVisible &&
generation === foregroundGeneration &&
!navigationPending.value;
const redirectOnce = (url) =>
new Promise((resolve, reject) => {
if (navigationPending.value) {
resolve(false);
return;
}
navigationPending.value = true;
clearMatchTimeout();
uni.redirectTo({
url,
success: resolve,
fail: (error) => {
navigationPending.value = false;
reject(error);
},
});
});
async function queryCurrentBattle(generation) {
try {
return await getBattleAPI();
} catch (error) {
await wait(MATCH_INFO_RETRY_DELAY_MS);
if (!isCurrentForeground(generation)) throw error;
return getBattleAPI();
}
}
async function returnToCurrentBattle(battle) {
if (!battle?.matchId || navigationPending.value) return false;
return returnToBattle(battle, redirectOnce);
}
async function reconcileMatchingPage(generation) {
clearMatchTimeout();
let battle = null;
try {
battle = await queryCurrentBattle(generation);
} catch (error) {
if (!isCurrentForeground(generation)) return;
console.log("resume match info error", error);
uni.showToast({
title: "比赛状态查询失败,请重试",
icon: "none",
});
return;
}
if (!isCurrentForeground(generation)) return;
if (battle?.matchId) {
try {
await returnToCurrentBattle(battle);
} catch (error) {
console.log("return to current match error", error);
uni.showToast({
title: "进入比赛失败,请重试",
icon: "none",
});
}
return;
}
if (!gameType.value || !teamSize.value) return;
try {
await matchGameAPI(true, gameType.value, teamSize.value);
if (!isCurrentForeground(generation)) return;
matchTimeoutTimer.value = setTimeout(handleMatchTimeout, MATCH_TIMEOUT_MS);
} catch (error) {
if (!isCurrentForeground(generation)) return;
clearMatchTimeout();
if (isLimitError(error)) {
showLimitModal.value = true;
return;
}
uni.navigateBack();
}
}
/**
* 超时处理:查询后端是否已分配对局
* - 有对局 → WS 消息丢失场景,自动跳入
* - 无对局 → 真正超时,提示用户并返回大厅
*/
const handleMatchTimeout = async () => {
if (!pageVisible || navigationPending.value) return;
try {
const battle = await getBattleAPI();
if (battle && battle.matchId) {
uni.showToast({ title: "匹配成功,正在进入...", icon: "none" });
await returnToCurrentBattle(battle);
} 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() {
uni.$showHint(3);
}
const closeLimitModal = () => {
showLimitModal.value = false;
uni.navigateBack();
};
const goVipPage = () => {
showLimitModal.value = false;
uni.redirectTo({
url: "/pages/member/be-vip",
});
};
/**
* 取消匹配,带容错处理:
* - 取消成功 → 返回大厅
* - 取消失败(后端已分配对局但 WS 未到达)→ 查询并跳入当前对局
*/
async function cancelMatch() {
if (navigationPending.value) return;
foregroundGeneration += 1;
clearMatchTimeout();
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) {
await returnToCurrentBattle(battle);
} else {
uni.navigateBack();
async function onReceiveMessage(messages = []) {
messages.forEach((msg) => {
if (msg.constructor === MESSAGETYPES.WaitForAllReady) {
if (!onComplete.value) {
onComplete.value = () => {
if (msg.groupUserStatus) {
uni.setStorageSync("red-team", msg.groupUserStatus.redTeam);
uni.setStorageSync("blue-team", msg.groupUserStatus.blueTeam);
uni.setStorageSync("melee-players", [
...msg.groupUserStatus.redTeam,
...msg.groupUserStatus.blueTeam,
]);
}
uni.removeStorageSync("current-battle");
if (gameType.value == 1) {
uni.redirectTo({
url: `/pages/team-battle?battleId=${msg.id}&gameMode=2`,
});
} else if (gameType.value == 2) {
uni.redirectTo({
url: `/pages/melee-match?battleId=${msg.id}&gameMode=2`,
});
}
};
}
} catch (_) {
uni.navigateBack();
}
}
}
async function onReceiveMessage(msg) {
if (msg.type === MESSAGETYPESV2.MatchSuccess) {
onComplete.value = () => {}
}
if (msg.type === MESSAGETYPESV2.AboutToStart) {
if (navigationPending.value) return;
// 收到开始消息,清除超时计时器
clearMatchTimeout();
// 使用后端下发的 mode 字段判断跳转目标,与好友约战(battle-room.vue)保持一致
// mode <= 3 为团队对抗,mode > 3 为大乱斗,覆盖全部 gameType(1~5),不再遗漏
const matchId = msg.matchId || msg.id;
if (!matchId) return;
const url =
msg.mode <= 3
? `/pages/team-battle/index?battleId=${matchId}`
: `/pages/melee-battle?battleId=${matchId}`;
try {
await redirectOnce(url);
} catch (error) {
console.log("redirect to matched battle error", error);
}
}
});
}
onLoad(async (options) => {
@@ -227,47 +50,35 @@ onLoad(async (options) => {
gameType.value = options.gameType;
teamSize.value = options.teamSize;
}
if (pageMounted && pageVisible) {
const generation = ++foregroundGeneration;
void reconcileMatchingPage(generation);
}
});
onMounted(() => {
void audioManager.warmAll();
uni.setKeepScreenOn({
keepScreenOn: true,
});
uni.$on("socket-inbox", onReceiveMessage);
uni.$on("cancelMatching", cancelMatch);
pageMounted = true;
if (pageVisible) void reconcileMatchingPage(foregroundGeneration);
});
onBeforeUnmount(() => {
pageMounted = false;
pageVisible = false;
foregroundGeneration += 1;
clearMatchTimeout();
uni.setKeepScreenOn({
keepScreenOn: false,
});
uni.$off("socket-inbox", onReceiveMessage);
uni.$off("cancelMatching", cancelMatch);
if (gameType.value && teamSize.value) {
matchGameAPI(false, gameType.value, teamSize.value);
}
});
onShow(() => {
pageVisible = true;
navigationPending.value = false;
const generation = ++foregroundGeneration;
clearMatchTimeout();
if (pageMounted) void reconcileMatchingPage(generation);
onShow(async () => {
if (gameType.value && teamSize.value) {
matchGameAPI(true, gameType.value, teamSize.value);
}
});
onHide(() => {
pageVisible = false;
foregroundGeneration += 1;
clearMatchTimeout();
if (gameType.value && teamSize.value) {
matchGameAPI(false, gameType.value, teamSize.value);
}
});
</script>
@@ -277,14 +88,6 @@ onHide(() => {
<Matching :stopMatch="stopMatch" :onComplete="onComplete" />
</view>
</Container>
<ModalDialog
:show="showLimitModal"
:content="'今日排位赛次数已经用完\n开通会员可增加次数'"
cancelText="知道了"
confirmText="去开通"
:onCancel="closeLimitModal"
:onConfirm="goVipPage"
/>
</template>
<style scoped>
-556
View File
@@ -1,556 +0,0 @@
<script setup>
import { ref, onMounted, onBeforeUnmount, watch, nextTick, computed } from "vue";
import { onLoad, onShow, onHide } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import BowTarget from "@/components/BowTarget.vue";
import ShootProgress from "@/components/ShootProgress.vue";
import BattleHeader from "@/components/BattleHeader.vue";
import PlayerScore from "@/components/PlayerScore.vue";
import SButton from "@/components/SButton.vue";
import Avatar from "@/components/Avatar.vue";
import ScreenHint from "@/components/ScreenHint.vue";
import TestDistance from "@/components/TestDistance.vue";
import SModal from "@/components/SModal.vue";
import audioManager from "@/audioManager";
import { getBattleAPI, laserCloseAPI } from "@/apis";
import {
closeMatchWebSocket,
connectMatchWebSocket,
MATCH_WS_AUDIO_ACK_EVENT,
MATCH_WS_STATE_EVENT,
} from "@/matchWebsocket";
import { MESSAGETYPESV2 } from "@/constants";
import { takeMatchReturnSnapshot } from "@/utils/matchReturn";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user, online } = storeToRefs(store);
const title = ref("");
const start = ref(null);
const battleId = ref("");
/** 对战模式:1=好友约战 2=排位赛,用于结算页跳转判断 */
const way = ref(0);
const currentRound = ref(1);
const tips = ref("即将开始...");
const players = ref([]);
const playersSorted = ref([]);
const playersScores = ref([]);
const halfTimeTip = ref(false);
const halfRest = ref(false);
const DEFAULT_READY_TIME = 15;
const HALF_REST_SECONDS = 20;
const MATCH_READY_SNAPSHOT_PREFIX = "match-ready-snapshot:";
const MATCH_STATUS_BY_TEXT = {
MATCH_STATUS_READY: 0,
MATCH_STATUS_STARTED: 1,
MATCH_STATUS_END: 2,
MATCH_STATUS_TIMEOUT: 3,
MATCH_STATUS_UNEXPECTEDLY: 4,
};
const halfRestRemain = ref(HALF_REST_SECONDS);
const readyTime = ref(DEFAULT_READY_TIME);
let halfRestTimer = null;
/** 控制设备离线提示弹窗的显示状态 */
const showOfflineModal = ref(false);
let battleEnded = false;
let skipNextRestoreOnShow = false;
let restoreGeneration = 0;
function clearHalfRestCountdown() {
if (halfRestTimer) {
clearInterval(halfRestTimer);
halfRestTimer = null;
}
}
function leaveHalfRest() {
clearHalfRestCountdown();
halfTimeTip.value = false;
halfRest.value = false;
}
function getHalfRestSeconds(battleInfo) {
const remainCandidates = [
battleInfo?.halfRestRemain,
battleInfo?.halfRestRemainSeconds,
battleInfo?.restRemain,
battleInfo?.restRemainSeconds,
];
for (const item of remainCandidates) {
const remain = Number(item);
if (Number.isFinite(remain) && remain > 0 && remain <= HALF_REST_SECONDS) {
return Math.ceil(remain);
}
}
const timeoutTime = normalizeTimestamp(battleInfo?.timeoutTime);
if (timeoutTime) {
const elapsedSeconds = Math.max(0, (Date.now() - timeoutTime) / 1000);
return Math.max(
0,
Math.min(HALF_REST_SECONDS, Math.ceil(HALF_REST_SECONDS - elapsedSeconds))
);
}
const endTime = normalizeTimestamp(
battleInfo?.halfRestEndTime ?? battleInfo?.restEndTime
);
if (endTime) {
const diffSeconds = (endTime - Date.now()) / 1000;
return Math.max(
0,
Math.min(HALF_REST_SECONDS, Math.ceil(diffSeconds))
);
}
return HALF_REST_SECONDS;
}
function startHalfRestCountdown(seconds = HALF_REST_SECONDS) {
clearHalfRestCountdown();
const secondsValue = Number(seconds);
const normalizedSeconds = Number.isFinite(secondsValue)
? secondsValue
: HALF_REST_SECONDS;
halfRestRemain.value = Math.max(
0,
Math.min(HALF_REST_SECONDS, Math.ceil(normalizedSeconds))
);
if (halfRestRemain.value <= 0) return;
halfRestTimer = setInterval(() => {
if (halfRestRemain.value <= 1) {
halfRestRemain.value = 0;
clearHalfRestCountdown();
return;
}
halfRestRemain.value -= 1;
}, 1000);
}
const currentPlayer = computed(() =>
players.value.find((player) => String(player?.id) === String(user.value.id))
);
const isCurrentUserSvip = computed(() => currentPlayer.value?.sVip === true);
function getReadySnapshotKey(matchId) {
return `${MATCH_READY_SNAPSHOT_PREFIX}${String(matchId || "")}`;
}
function normalizeBattleInfo(battleInfo) {
if (!battleInfo || typeof battleInfo !== "object") return battleInfo;
const statusText = battleInfo.statusText || battleInfo.status_text;
if (
(battleInfo.status === undefined ||
battleInfo.status === null ||
battleInfo.status === "") &&
MATCH_STATUS_BY_TEXT[statusText] !== undefined
) {
return {
...battleInfo,
status: MATCH_STATUS_BY_TEXT[statusText],
};
}
return battleInfo;
}
function normalizeTimestamp(value) {
const numberValue = Number(value || 0);
if (!numberValue) return 0;
return numberValue < 1000000000000 ? numberValue * 1000 : numberValue;
}
function getReadyTime(battleInfo) {
const value = Number(battleInfo?.readyTime);
return Number.isFinite(value) && value > 0 ? value : DEFAULT_READY_TIME;
}
function getReadyRemainingSeconds(battleInfo) {
const total = getReadyTime(battleInfo);
const countdownStartTime = normalizeTimestamp(battleInfo?.countdownStartTime);
if (!countdownStartTime) return total;
const elapsed = Math.max(0, (Date.now() - countdownStartTime) / 1000);
console.log('11111111111111111111111111111', total, countdownStartTime, Math.max(0, (Date.now() - countdownStartTime) / 1000))
return Math.max(0, total - elapsed);
}
function hasKnownStatus(battleInfo) {
return !(
battleInfo?.status === undefined ||
battleInfo?.status === null ||
battleInfo?.status === ""
);
}
function hasStartedSnapshot(battleInfo) {
if (hasKnownStatus(battleInfo)) return Number(battleInfo.status) !== 0;
const current = battleInfo?.current || {};
return !!(
current.playerId ||
current.startTime ||
current.round ||
(Array.isArray(battleInfo?.rounds) && battleInfo.rounds.length)
);
}
function takeReadySnapshot(matchId) {
const key = getReadySnapshotKey(matchId);
const snapshot = uni.getStorageSync(key);
if (snapshot) uni.removeStorageSync(key);
return normalizeBattleInfo(snapshot);
}
function reconnectMatchServer(battleInfo) {
const status = Number(battleInfo?.status);
if ([2, 4].includes(status)) return;
if (!battleInfo?.serverAddr) return;
connectMatchWebSocket({
serverAddr: battleInfo.serverAddr,
matchId: battleInfo.matchId || battleId.value,
userId: user.value.id,
mode: battleInfo.mode,
});
}
function closeBattleServer(reason) {
if (battleEnded) return;
closeMatchWebSocket({ reason });
}
function notifyMatchAudioAck(message) {
if (
message?.sequence === undefined ||
message?.sequence === null ||
message?.sequence === ""
) {
return;
}
uni.$emit(MATCH_WS_AUDIO_ACK_EVENT, {
matchId: message.matchId || battleId.value,
sequence: message.sequence,
matchWsType: message.matchWsType,
matchWsTypeName: message.matchWsTypeName,
});
}
/**
* 监听设备在线状态,大乱斗比赛进行中设备离线时弹窗提示用户
*/
watch(online, (newVal, oldVal) => {
if (!newVal && oldVal && start.value === true) {
showOfflineModal.value = true;
}
});
function recoverData(battleInfo, { force = false } = {}) {
battleInfo = normalizeBattleInfo(battleInfo);
if (!battleInfo) return;
if (battleInfo.status !== undefined) {
battleEnded = [2, 4].includes(Number(battleInfo.status));
}
try {
if (battleInfo.way === 1) title.value = "好友约战 - 大乱斗";
if (battleInfo.way === 2) title.value = "排位赛 - 大乱斗";
// 保存 way 供结算跳转时使用
way.value = battleInfo.way ?? 0;
// 优先使用接口数据,否则使用缓存
if (battleInfo.teams?.[0]?.players) {
players.value = [...battleInfo.teams[0].players];
} else {
// 大乱斗可能存的是 players 列表
// 这里的缓存逻辑根据 AboutToStart 消息结构可能不同,假设也是 teams[0]
// 如果是从 match-page 过来的,match-page 只存了 teams[1] 和 [2] 给对抗模式
// 大乱斗的匹配逻辑可能不同,暂时保持原样,只做安全保护
players.value = [];
}
if (hasKnownStatus(battleInfo)) {
start.value = battleInfo.status !== 0;
} else if (!hasStartedSnapshot(battleInfo)) {
if (start.value !== true) start.value = false;
return;
} else {
start.value = true;
}
if (battleInfo.status === 0) {
readyTime.value = getReadyTime(battleInfo);
setTimeout(() => {
uni.$emit("update-timer", getReadyRemainingSeconds(battleInfo));
}, 200);
return;
}
const rounds = Array.isArray(battleInfo.rounds) ? battleInfo.rounds : [];
tips.value =
(rounds.length !== 2 ? "上" : "下") + "半场:请先射6箭";
playersScores.value = rounds.map((r) => ({ ...r.shoots }));
const totals = {};
players.value.forEach((p) => {
const total = playersScores.value.reduce((acc, round) => {
const arr = round[p.id] || [];
return acc + arr.length;
}, 0);
totals[p.id] = total;
});
playersSorted.value = players.value.slice().sort((a, b) => {
return totals[b.id] - totals[a.id];
});
if (battleInfo.status === 3) {
halfTimeTip.value = true;
halfRest.value = true;
tips.value = "准备下半场";
startHalfRestCountdown(getHalfRestSeconds(battleInfo));
setTimeout(() => {
uni.$emit("update-remain", 0);
}, 200);
return;
}
leaveHalfRest();
if (force) {
const ackTime = normalizeTimestamp(battleInfo.current?.ackTime);
const remain = ackTime ? Math.max(0, (Date.now() - ackTime) / 1000) : 0;
console.log(`当前轮已进行${remain}`);
if (remain > 0 && remain < 90) {
setTimeout(() => {
uni.$emit("update-remain", 90 - remain - 0.2);
}, 200);
}
}
} catch (err) {
console.error("recoverData error:", err);
}
}
async function restoreLatestBattle() {
if (!battleId.value) return;
const currentRestoreId = ++restoreGeneration;
let result = null;
try {
result = normalizeBattleInfo(await getBattleAPI(battleId.value));
} catch (err) {
console.log("restore latest melee battle failed:", err);
return;
}
if (currentRestoreId !== restoreGeneration || !result) return;
if (result.status === 2) {
battleEnded = true;
uni.showToast({
title: "比赛已结束",
icon: "none",
});
uni.navigateBack({
delta: 2,
});
return;
}
reconnectMatchServer(result);
recoverData(result, { force: true });
}
function onMatchSocketState(event) {
if (event?.state !== "open" || event?.reconnected !== true) return;
if (
event.matchId &&
battleId.value &&
String(event.matchId) !== String(battleId.value)
) {
return;
}
restoreLatestBattle();
}
onLoad(async (options) => {
const returnSnapshot = options.fromReturn ? takeMatchReturnSnapshot() : null;
skipNextRestoreOnShow = false;
if (returnSnapshot?.matchId) battleId.value = returnSnapshot.matchId;
else if (options.battleId) battleId.value = options.battleId;
if (returnSnapshot) {
skipNextRestoreOnShow = true;
reconnectMatchServer(returnSnapshot);
recoverData(returnSnapshot, { force: true });
return;
}
const readySnapshot = takeReadySnapshot(battleId.value);
if (readySnapshot?.status === 0) {
skipNextRestoreOnShow = true;
reconnectMatchServer(readySnapshot);
recoverData(readySnapshot);
}
// uni.enableAlertBeforeUnload({
// message: "离开比赛可能导致比赛失败,是否继续?",
// success: (res) => {
// console.log("已启用离开提示");
// },
// });
});
async function onReceiveMessage(msg) {
if (Array.isArray(msg)) return;
if (msg.type === MESSAGETYPESV2.AboutToStart) {
recoverData(msg);
} else if (msg.type === MESSAGETYPESV2.BattleStart) {
leaveHalfRest();
recoverData(msg);
} else if (msg.type === MESSAGETYPESV2.ShootResult) {
recoverData(msg);
if (msg.shootData?.threeConsecutive10Rings === true) {
nextTick(() => audioManager.play("tententen", false));
}
} else if (msg.type === MESSAGETYPESV2.HalfRest) {
halfTimeTip.value = true;
halfRest.value = true;
tips.value = "准备下半场";
startHalfRestCountdown(getHalfRestSeconds(msg));
} else if (msg.type === MESSAGETYPESV2.BattleEnd) {
battleEnded = true;
notifyMatchAudioAck(msg);
setTimeout(() => {
// 全部跳转到新结算页
uni.redirectTo({
url: "/pages/friend-battle-result?battleId=" + msg.matchId,
});
}, 1000);
}
}
onMounted(async () => {
uni.setKeepScreenOn({
keepScreenOn: true,
});
uni.$on("socket-inbox", onReceiveMessage);
uni.$on(MATCH_WS_STATE_EVENT, onMatchSocketState);
await laserCloseAPI();
});
onBeforeUnmount(() => {
uni.setKeepScreenOn({
keepScreenOn: false,
});
restoreGeneration += 1;
clearHalfRestCountdown();
uni.$off("socket-inbox", onReceiveMessage);
uni.$off(MATCH_WS_STATE_EVENT, onMatchSocketState);
closeBattleServer("melee-battle-unmount");
audioManager.stopAll();
});
onHide(() => {
closeBattleServer("melee-battle-hide");
});
onShow(() => {
if (skipNextRestoreOnShow) {
skipNextRestoreOnShow = false;
return;
}
restoreLatestBattle();
});
</script>
<template>
<Container :title="title" :bgType="1">
<view class="container">
<BattleHeader v-if="!start" :players="players" />
<TestDistance
v-if="start === false"
:guide="false"
:isBattle="true"
:count="readyTime"
/>
<ShootProgress
:show="start"
:start="start && !halfRest"
:tips="tips"
:total="90"
:melee="true"
:halfRest="halfRest"
:battleId="battleId"
/>
<view v-if="start" class="user-row">
<Avatar :src="user.avatar" :size="35" />
<BowPower />
</view>
<BowTarget
v-if="start"
:currentRound="
playersScores.map((s) => s[user.id].length).reduce((a, b) => a + b, 0)
"
:totalRound="12"
:scores="playersScores.map((r) => r[user.id]).flat()"
:isSvip="isCurrentUserSvip"
:missAsZero="true"
:stop="halfRest"
/>
<view :style="{ paddingBottom: '20px' }">
<PlayerScore
v-if="start"
v-for="(player, index) in playersSorted"
:key="index"
:player="player"
:scores="playersScores.map((s) => s[player.id])"
/>
</view>
<ScreenHint
:show="halfTimeTip"
mode="small"
>
<view class="half-time-tip">
<text>上半场结束休息一下吧:</text>
<text>{{ halfRestRemain }}秒后开始下半场</text>
</view>
</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>
</Container>
</template>
<style scoped>
.container {
width: 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>
+35 -91
View File
@@ -4,59 +4,28 @@ import { onLoad } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import BowTarget from "@/components/BowTarget.vue";
import Avatar from "@/components/Avatar.vue";
import { getBattleAPI } from "@/apis";
import { getGameAPI } from "@/apis";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const { user } = storeToRefs(useStore());
const currentUser = ref({
arrows: [],
});
const players = ref([]);
function getRingTotal(arrows = []) {
return arrows.reduce((last, next) => last + (Number(next?.ring) || 0), 0);
}
function getScoreLabel(score) {
if (!score) return "";
return score.ringX ? "X" : score.ring || "";
}
const isMember = (player = {}) => player.vip === true || player.sVip === true;
const getMemberNicknameClass = (player = {}) => [
"player-name",
"member-nickname",
player.vip === true && player.sVip !== true ? "member-nickname--vip" : "",
player.sVip === true ? "member-nickname--svip" : "",
];
const store = useStore();
const { user } = storeToRefs(store);
const scores = ref([]);
const currentUser = ref({});
const data = ref({});
const onSelect = (userId) => {
const user = data.value.players.find((p) => p.playerId === userId);
currentUser.value = user;
if (user && user.arrowHistory) {
scores.value = user.arrowHistory;
}
};
onLoad(async (options) => {
if (!options.battleId) return;
const result = await getBattleAPI(options.battleId || "59348111700660224");
const plist = result.teams?.[0]?.players || [];
players.value = result.resultList.map((item, index) => {
const p = plist.find((p) => String(p.id) === String(item.userId));
const arrows = Array.from({ length: 12 }, () => ({}));
result.rounds.forEach((r, index) => {
if (r.shoots[item.userId]) {
r.shoots[item.userId].forEach((s, index2) => {
arrows[index2 + index * 6] = s;
});
}
});
return {
...item,
...p,
userId: item.userId,
rank: index + 1,
name: p?.name || item.name,
avatar: p?.avatar || item.avatar || "",
arrows,
};
});
if (players.value[0]) {
currentUser.value = players.value[0];
if (options.battleId) {
const result = await getGameAPI(options.battleId);
data.value = result;
if (result.players && result.players[0]) {
onSelect(result.players[0].playerId);
}
}
});
</script>
@@ -64,62 +33,47 @@ onLoad(async (options) => {
<template>
<Container title="靶纸">
<view class="container">
<image
src="https://static.shelingxingqiu.com/shootmini/static/battle-header-melee.png"
mode="widthFix"
:style="{ top: '-50rpx' }"
/>
<view class="players">
<image src="../static/battle-header-melee.png" mode="widthFix" />
<view class="players" v-if="data.players">
<view
v-for="(player, index) in players"
v-for="(player, index) in data.players"
:key="index"
:style="{
width: `${Math.max(100 / players.length, 18)}vw`,
color: player.userId === currentUser.userId ? '#000' : '#fff9',
width: `${Math.max(100 / data.players.length, 18)}vw`,
color: player.playerId === currentUser.playerId ? '#000' : '#fff9',
}"
@click="currentUser = player"
@click="() => onSelect(player.playerId)"
>
<image
v-if="player.userId === currentUser.userId"
v-if="player.playerId === currentUser.playerId"
src="../static/player-bg2.png"
:style="{
width: `${Math.max(100 / players.length, 18)}vw`,
width: `${Math.max(100 / data.players.length, 18)}vw`,
}"
class="player-bg"
/>
<Avatar :src="player.avatar" :rankLvl="player.rankLvl" :size="40" />
<view v-if="isMember(player)" :class="getMemberNicknameClass(player)">
<text class="member-nickname__text">{{ player.name }}</text>
<text v-if="player.sVip === true" class="member-nickname__shine">
{{ player.name }}
</text>
</view>
<text v-else>{{ player.name }}</text>
<text>{{ player.name }}</text>
</view>
</view>
<view :style="{ marginTop: '10px' }">
<BowTarget
:scores="currentUser.arrows"
:isSvip="currentUser.sVip === true"
/>
<BowTarget :scores="scores" />
</view>
<view class="score-text"
><text :style="{ color: '#fed847' }">{{
currentUser.arrows.length
}}</text
><text :style="{ color: '#fed847' }">{{ scores.length }}</text
>支箭<text :style="{ color: '#fed847' }">{{
getRingTotal(currentUser.arrows)
scores.reduce((last, next) => last + next.ring, 0)
}}</text
></view
>
<view class="score-row" v-if="currentUser.arrows">
<view class="score-row">
<view
v-for="(score, index) in currentUser.arrows"
v-for="(score, index) in scores"
:key="index"
class="score-item"
:style="{ width: '13vw', height: '13vw' }"
>
{{ getScoreLabel(score) }}
{{ score.ring }}
</view>
</view>
</view>
@@ -143,7 +97,7 @@ onLoad(async (options) => {
display: flex;
width: 100%;
overflow-x: auto;
margin-top: 50rpx;
margin-top: 25px;
}
.players::-webkit-scrollbar {
width: 0;
@@ -178,16 +132,6 @@ onLoad(async (options) => {
text-align: center;
position: relative;
}
.players > view > .player-name {
margin: 5px 0;
width: 80%;
position: relative;
justify-content: center;
}
.player-name .member-nickname__text,
.player-name .member-nickname__shine {
font-size: 12px;
}
.score-text {
width: 100%;
color: #fff;
+244
View File
@@ -0,0 +1,244 @@
<script setup>
import { ref, watch, onMounted, onBeforeUnmount } from "vue";
import { onLoad, onShow, onHide } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import BowTarget from "@/components/BowTarget.vue";
import ShootProgress from "@/components/ShootProgress.vue";
import BattleHeader from "@/components/BattleHeader.vue";
import PlayerScore from "@/components/PlayerScore.vue";
import SButton from "@/components/SButton.vue";
import Avatar from "@/components/Avatar.vue";
import ScreenHint from "@/components/ScreenHint.vue";
import TestDistance from "@/components/TestDistance.vue";
import { getCurrentGameAPI } from "@/apis";
import { isGameEnded } from "@/util";
import { MESSAGETYPES } from "@/constants";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
const title = ref("大乱斗");
const start = ref(false);
const startCount = ref(true);
const battleId = ref("");
const currentRound = ref(1);
const power = ref(0);
const scores = ref([]);
const tips = ref("即将开始...");
const players = ref([]);
const playersSorted = ref([]);
const playersScores = ref({});
const halfTimeTip = ref(false);
const isEnded = ref(false);
watch(
() => [players.value, playersScores.value],
([n_players, n_scores]) => {
if (n_players.length) {
playersSorted.value = Object.keys(n_scores)
.sort((a, b) => n_scores[b].length - n_scores[a].length)
.map((pid) => n_players.find((p) => p.id == pid));
}
},
{
deep: true, // 添加深度监听
immediate: true,
}
);
function recoverData(battleInfo) {
uni.removeStorageSync("last-awake-time");
battleId.value = battleInfo.id;
players.value = [...battleInfo.blueTeam, ...battleInfo.redTeam];
players.value.forEach((p) => {
playersScores.value[p.id] = [...p.arrows];
if (p.id === user.value.id) scores.value = [...p.arrows];
});
const remain = Date.now() / 1000 - battleInfo.startTime;
console.log(`当前局已进行${remain}`);
if (battleInfo.status === 0) {
if (remain > 0) {
setTimeout(() => {
uni.$emit("update-timer", 15 - remain);
}, 200);
}
} else {
start.value = true;
}
if (battleInfo.status === 2) {
const elapsedTime = (Date.now() - Date.parse(battleInfo.createdAt)) / 1000;
console.log("elapsedTime:", elapsedTime);
startCount.value = true;
// 这里的开始时间不是游戏开始时间,而是上半场或者下半场或者中场的开始时间,还要根据状态来判断
tips.value = battleInfo.halfGame
? "下半场:请再射6箭"
: "上半场:请先射6箭";
setTimeout(() => {
uni.$emit("update-ramain", 90 - remain);
}, 200);
} else if (battleInfo.status === 9) {
startCount.value = false;
tips.value = "准备下半场";
setTimeout(() => {
uni.$emit("update-ramain", 0);
}, 200);
}
}
onLoad(async (options) => {
if (options.gameMode == 1) title.value = "好友约战 - 大乱斗";
if (options.gameMode == 2) title.value = "排位赛 - 大乱斗";
if (options.battleId) {
battleId.value = options.battleId;
const players = uni.getStorageSync("melee-players");
if (players) {
players.value = players;
players.value.forEach((p) => {
playersScores.value[p.id] = [];
});
}
const battleInfo = uni.getStorageSync("current-battle");
if (battleInfo) {
recoverData(battleInfo);
setTimeout(getCurrentGameAPI, 2000);
}
}
});
async function onReceiveMessage(messages = []) {
messages.forEach((msg) => {
if (msg.id !== battleId.value) return;
if (msg.constructor === MESSAGETYPES.MeleeAllReady) {
start.value = true;
startCount.value = true;
tips.value = scores.value.length
? "下半场:请再射6箭"
: "上半场:请先射6箭";
halfTimeTip.value = false;
}
if (msg.constructor === MESSAGETYPES.ShootResult) {
if (!start.value) getCurrentGameAPI();
if (msg.userId === user.value.id) {
scores.value.push({ ...msg.target });
power.value = msg.target.battery;
}
playersScores.value[msg.userId].push({ ...msg.target });
}
if (msg.constructor === MESSAGETYPES.HalfTimeOver) {
uni.$emit("update-ramain", 0);
[...msg.groupUserStatus.redTeam, ...msg.groupUserStatus.blueTeam].forEach(
(player) => {
playersScores.value[player.id] = [...player.arrows];
if (player.id === user.value.id) scores.value = [...player.arrows];
}
);
startCount.value = false;
halfTimeTip.value = true;
tips.value = "准备下半场";
}
if (msg.constructor === MESSAGETYPES.MatchOver) {
isEnded.value = true;
uni.setStorageSync("last-battle", msg.endStatus);
setTimeout(() => {
uni.redirectTo({
url: "/pages/battle-result",
});
}, 1000);
}
if (msg.constructor === MESSAGETYPES.BackToGame) {
uni.$emit("update-header-loading", false);
if (msg.battleInfo) recoverData(msg.battleInfo);
}
});
}
const onBack = () => {
uni.$showHint(2);
};
onMounted(() => {
uni.setKeepScreenOn({
keepScreenOn: true,
});
uni.$on("socket-inbox", onReceiveMessage);
});
onBeforeUnmount(() => {
uni.setKeepScreenOn({
keepScreenOn: false,
});
uni.$off("socket-inbox", onReceiveMessage);
});
const refreshTimer = ref(null);
onShow(async () => {
if (battleId.value) {
if (!isEnded.value && (await isGameEnded(battleId.value))) return;
getCurrentGameAPI();
const refreshData = () => {
const lastAwakeTime = uni.getStorageSync("last-awake-time");
if (lastAwakeTime) {
getCurrentGameAPI();
} else {
clearInterval(refreshTimer.value);
}
};
refreshTimer.value = setInterval(refreshData, 2000);
}
});
onHide(() => {
if (refreshTimer.value) clearInterval(refreshTimer.value);
uni.setStorageSync("last-awake-time", Date.now());
});
</script>
<template>
<Container :title="title" :bgType="1" :onBack="onBack">
<view class="container">
<BattleHeader v-if="!start" :players="players" />
<TestDistance v-if="!start" :guide="false" :isBattle="true" />
<ShootProgress
:show="start"
:start="start && startCount"
:tips="tips"
:total="90"
:melee="true"
:battleId="battleId"
/>
<view v-if="start" class="user-row">
<Avatar :src="user.avatar" :size="35" />
<BowPower :power="power" />
</view>
<BowTarget
v-if="start"
:currentRound="scores.length"
:totalRound="12"
:scores="scores"
:stop="!startCount"
/>
<view :style="{ paddingBottom: '20px' }">
<PlayerScore
v-if="start"
v-for="(player, index) in playersSorted"
:key="index"
:name="player.name"
:avatar="player.avatar"
:scores="playersScores[player.id] || []"
/>
</view>
<ScreenHint
:show="halfTimeTip"
mode="small"
:onClose="() => (halfTimeTip = false)"
>
<view class="half-time-tip">
<text>上半场结束休息一下吧:</text>
<text>20秒后开始下半场</text>
</view>
</ScreenHint>
</view>
</Container>
</template>
<style scoped>
.container {
width: 100%;
height: 100%;
}
</style>
-120
View File
@@ -1,120 +0,0 @@
<script setup>
import { computed, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import { getMemberAgreement } from "./agreementData";
const agreementType = ref("renew");
onLoad((options) => {
agreementType.value = options.type || "renew";
});
const agreement = computed(() => getMemberAgreement(agreementType.value));
</script>
<template>
<Container :title="agreement.navTitle">
<scroll-view scroll-y class="agreement-page" :show-scrollbar="false">
<view class="content">
<view class="page-title">{{ agreement.title }}</view>
<view v-if="agreement.meta" class="meta">{{ agreement.meta }}</view>
<block v-for="(item, index) in agreement.content" :key="index">
<view v-if="item.type === 'heading'" class="section-title">
{{ item.text }}
</view>
<view v-else-if="item.type === 'list'" class="list">
<view v-for="(listItem, listIndex) in item.items" :key="listIndex" class="list-item">
<text class="list-dot"></text>
<text class="list-text">{{ listItem }}</text>
</view>
</view>
<view v-else class="paragraph">
<text>{{ item.text }}</text>
</view>
</block>
<view class="company">{{ agreement.company }}</view>
</view>
</scroll-view>
</Container>
</template>
<style scoped lang="scss">
.agreement-page {
width: 100%;
height: 100%;
background-color: #ffffff;
}
.content {
padding: 30rpx;
box-sizing: border-box;
}
.page-title,
.section-title {
color: #333333;
font-size: 28rpx;
line-height: 40rpx;
font-weight: 700;
}
.page-title {
margin-bottom: 20rpx;
}
.meta {
margin-bottom: 26rpx;
color: #666666;
font-size: 24rpx;
line-height: 34rpx;
}
.section-title {
margin: 42rpx 0 22rpx;
}
.paragraph,
.list-item,
.company {
color: #333333;
font-size: 26rpx;
line-height: 38rpx;
}
.paragraph {
margin-bottom: 22rpx;
}
.list {
margin-bottom: 22rpx;
}
.list-item {
display: flex;
align-items: flex-start;
margin-bottom: 14rpx;
}
.list-dot {
width: 28rpx;
flex-shrink: 0;
color: #333333;
line-height: 38rpx;
}
.list-text {
flex: 1;
color: #333333;
line-height: 38rpx;
}
.company {
margin-top: 42rpx;
padding-bottom: 30rpx;
text-align: right;
font-weight: 700;
}
</style>
-322
View File
@@ -1,322 +0,0 @@
export const memberAgreements = {
renew: {
navTitle: "会员自动续费服务协议",
title: "射灵星球小程序会员自动续费服务协议",
content: [
{
type: "paragraph",
text: "欢迎您使用射灵星球小程序付费会员服务(以下简称“本服务”)!",
},
{
type: "paragraph",
text: "本服务是由广州光点飞舞网络有限公司(以下简称“公司”或“我们”)为您提供。本服务为付费服务。为了保障您的权益,请在使用本服务前详细阅读并遵守本《射灵星球小程序会员服务协议(含自动续费服务规则)》(以下简称“本协议”)以及公司已发布或将来可能发布的各项服务协议与规则。您在申请开通本服务并进入购买程序前,请务必审慎阅读、充分理解各服务协议及规则,特别是免除或限制责任条款、法律适用和争议解决条款。",
},
{
type: "paragraph",
text: "当您依照本服务开通页面提示进行阅读并同意本协议,完成全部服务开通程序后(包括但不限于点击“同意”、“下一步”或“确认支付”等确认按钮,或您开始使用本服务),即表示您已充分阅读、理解并接受本协议的全部内容,您已与本服务提供方达成一致,成为“射灵星球小程序”付费会员。本协议即在您与公司之间产生法律效力,成为对双方均具有约束力的法律文件。",
},
{ type: "heading", text: "一、定义及适用范围" },
{
type: "paragraph",
text: "1.1 射灵星球小程序付费会员:指已按照服务协议及规则完成射灵星球小程序登录的用户,在签署本协议并根据本服务开通页面所展示的收费标准支付相应费用后获取的特殊资格,在本协议中简称为“会员”或“您”。公司根据业务发展可能会新增、调整会员类型或名称,实际以开通页面展示为准,这不影响您的实际权益。",
},
{
type: "paragraph",
text: "1.2 付费会员权益:指用户基于其付费会员资格所享有的特殊权益,具体权益内容应以本服务购买页面展示内容及相关权益说明为准。您理解并同意,公司可能会根据设备型号、系统版本、客户端等因素开发不同的版本,不同版本实际可使用的具体权益或服务内容可能有所差别,具体以购买页面展示为准。",
},
{
type: "paragraph",
text: "1.3 本协议内容同时包括公司已经发布及后续可能不断发布的关于本服务的相关协议、规则等内容。前述内容一经正式发布,并以适当的方式送达您(服务购买页面、网站公布、系统通知等),即为本协议不可分割的组成部分,您应同样遵守。",
},
{
type: "paragraph",
text: "1.4 为了给会员用户提供更多选择,公司可能会与第三方合作推出联合会员服务,或为购买会员服务的用户赠送第三方会员服务。如果您选择购买或接受以上服务,则表示您理解并认可,我们仅提供射灵星球小程序付费会员服务,不对第三方的会员服务负责。第三方会员服务的权益、使用、收费规则等,将由第三方执行和向您解释。",
},
{ type: "heading", text: "二、服务开通、权益内容、服务期限及收费标准" },
{
type: "paragraph",
text: "2.1 本服务仅支持射灵星球小程序登录用户开通。您在开通本服务时,应仔细核对已登录的账号名称、会员类型、付费类型、服务期限等具体信息。因您个人原因充错账号、开通错服务类型或服务时长的,公司不予退还已收取的费用。",
},
{
type: "paragraph",
text: "2.2 您可通过已有和未来新增的支付渠道或公司指定支付方式完成本服务的购买。当您根据本服务页面提示进行确认、并成功支付了会员服务费和/或完成了成为付费会员的所有程序,您将成为射灵星球小程序付费会员。",
},
{
type: "paragraph",
text: "2.3 本服务的期限(以下简称“服务期限”)以您选择并成功开通的期限为准。会员计费与服务时长采用自然时间(自然月/自然年)方式计算。具体截止时间为相应续费到期自然日的对应时间点。服务期限届满后,公司将停止继续向您提供本服务。如您同时开通了多种会员服务,其消耗及重叠规则以开通页面的官方具体规则为准。",
},
{
type: "paragraph",
text: "2.4 本服务的收费标准及具体权益内容以本服务开通页面所展示的为准。基于市场与业务的发展及服务权益调整,公司可能会随时调整本服务开通所需费用及/或具体权益内容。费用或权益内容调整自公布之日起生效,您在调整生效前已开通的服务将不受影响,但该服务到期后的续费开通或自动续费扣款,则需按照调整后的标准执行。",
},
{
type: "paragraph",
text: "2.5 射灵星球小程序付费会员服务为虚拟内容消费,除因本服务存在重大瑕疵导致您完全无法使用等公司的违约情形、法律法规要求必须退款或公司同意退款等情形外,完成支付和购买后,不可进行退款或转让。您在会员到期前主动取消或终止会员资格的,已支付费用不予退还。",
},
{
type: "paragraph",
text: "2.6 为了保护您的账号安全、防止账号被盗风险,我们会对您开通会员服务的账号登录设备及使用范围作出合理限制。您不得将账号提供给多名第三方同时使用,否则公司有权根据安全风控能力随时调整或限制您的登录及使用权限。",
},
{ type: "heading", text: "三、连续购买和自动续费服务" },
{ type: "paragraph", text: "3.1 自动续费服务类型/计费周期" },
{
type: "paragraph",
text: "射灵星球小程序付费会员自动续费服务包含「连续包月」、「连续包年」等服务。本服务的自动续费及对应计费周期采用按自然时间(自然月/自然年)对日顺延的方式计算。即:若您在某月18日开通连续包月服务,则下一次自动扣费续费日期为次月18日;若开通当月无对应日期的(例如1月31日开通,2月无31日),则自动调整为该自然月最后一日进行扣费续费。公司可能会根据会员需求增加或调整自动续费服务类型,具体服务类型以服务开通页面展示为准。",
},
{ type: "paragraph", text: "3.2 自动续费服务说明" },
{
type: "paragraph",
text: "(1)本自动续费服务基于您对于自动续费的需求,在您已开通会员服务的前提下,为避免您因疏忽或其他原因导致未能及时续费而中断服务,您授权公司可在您的会员服务期限到期前,从您开通本自动续费服务时所绑定的Apple ID账户余额、或绑定的第三方支付账户(包括但不限于微信支付、支付宝支付等)余额中自动代扣下一个计费周期的费用,从而延长对应的会员服务期限。",
},
{
type: "paragraph",
text: "(2)自动续费扣费日期以您开通本自动续费服务的支付渠道实际扣款时间为准:如您是通过苹果公司iOS渠道开通本服务,扣费日期通常为开通服务之日起每个计费周期的对应日期前24小时内;如您是通过安卓Android渠道或直接在小程序内通过微信支付等渠道开通本服务,扣费日期通常为每个计费周期到期前1至2日。如支付渠道根据实际情况或相关平台规则自行调整扣费时间的,以实际扣款时间为准。",
},
{
type: "paragraph",
text: "(3)请您关注上述账户及可扣款余额情况,保证上述账户扣款成功以确保会员服务顺利续期。如因上述账户中可扣款余额不足导致续费失败,公司有权中断或终止相应的会员权益及服务,由此导致的风险或损失将由您自行承担。",
},
{
type: "paragraph",
text: "(4)为了方便您知悉自动续费情况,公司将在扣费日期前5日以站内信、小程序系统消息推送或短信等方式提示您即将发生续期扣费的信息,第三方支付渠道也可能向您发送通知提醒即将扣费。",
},
{
type: "paragraph",
text: "(5)系统会在每个扣费日期自动从您开通服务时所绑定的支付账户扣费。如扣费日期因账户问题或余额不足导致续费失败,若您未主动明确取消本服务,将视为您同意公司在扣费日期后继续发出扣款尝试,一旦您的账户扣款成功,公司将继续为您提供相应会员服务权益。",
},
{
type: "paragraph",
text: "(6)如您未在每个扣费日期前操作取消自动续费服务,则公司将根据此前与您达成的委托在扣费日期继续发出续费代扣指令,一旦扣款成功,公司将自动为您开通下一个计费周期的连续服务。对于已成功完成会员服务续费的费用,原则上不予退还。",
},
{
type: "paragraph",
text: "(7)您在自动续费服务期间可以额外购买或通过参与活动等方式获取付费会员服务,会员服务期限将在原服务期限基础上相应延长,但如您未主动取消自动续费服务,系统仍会按照您所开通的自动续费服务进行扣费及续期。",
},
{ type: "paragraph", text: "3.3 自动续费服务的退订" },
{
type: "paragraph",
text: "(1)您有权决定是否取消自动续费服务,如果您希望取消自动续费服务,需在每个扣费日期前(至少提前24小时)操作取消,否则将视为您同意继续授权自动续费。",
},
{
type: "paragraph",
text: "(2)购买自动续费服务后,您可在小程序的会员管理页中关闭自动续费,或通过如下第三方支付渠道方式取消自动续费服务:",
},
{
type: "list",
items: [
"iOS用户(Apple ID订阅):打开苹果手机“设置” -> 点击顶部的“Apple ID/机主姓名” -> 进入“订阅” -> 选择“射灵星球” -> 点击“取消订阅”;或打开“App Store” -> 点击右上角头像进入“账户” -> 点击“订阅”进行管理。",
"微信支付自动续费用户:打开微信APP -> 点击“我” -> “服务” -> “钱包” -> “支付设置” -> “自动续费” -> 选择“射灵星球小程序会员” -> 点击“关闭服务”。",
"支付宝自动续费用户:打开支付宝APP -> 点击“我的” -> “设置” -> “支付设置” -> “免密支付/自动扣款” -> 选择“射灵星球小程序会员” -> 点击“关闭服务”。",
],
},
{
type: "paragraph",
text: "3.4 公司有权根据市场情况、业务规划、运营策略变化等原因单方面决定停止向您提供自动续费服务,并通过公告或站内信等方式通知您,您的付费会员服务期限自当前服务期限届满之日起终止。",
},
{ type: "heading", text: "四、服务使用规范与限制" },
{
type: "paragraph",
text: "4.1 本服务及会员权益仅限您本人使用。未经公司书面同意,禁止以任何形式赠与、借用、出租、转让、售卖或以其他方式许可他人使用该账号及账号项下的会员服务与权益。如发生泄漏、遗失、被盗等行为,而该等行为并非公司过错导致,损失将由您自行承担。",
},
{
type: "paragraph",
text: "4.2 如您存在如下违法或不当使用本服务的情形,公司有权取消您的会员资格、作废会员权益且不予退还您所支付的会员服务费用,并有权向您追偿给公司造成的损失:",
},
{
type: "list",
items: [
"以盗窃、利用系统漏洞、通过任何非公司官方或授权渠道获得本服务的行为;",
"利用本服务进行盈利或非法获利,或以各种形式转让、借用您的会员权益;",
"通过非法手段对本服务会员账户的服务期限、交易状态进行修改或篡改;",
"主动对公司用于保护本服务会员权益的任何安全措施技术进行破解、更改、反操作或破坏;",
"其他违反法律法规、诚实信用原则、服务协议及相关小程序运营规则的行为。",
],
},
{ type: "heading", text: "五、服务中止、终止及变更" },
{
type: "paragraph",
text: "5.1 因国家或相关政府监管部门要求、发生不可抗力事件、或由于用户违反本协议约定,公司有权中止或终止向用户提供服务。",
},
{
type: "paragraph",
text: "5.2 您知悉并确认,您开通本服务后,如您中途主动取消本服务、放弃会员权益或终止资格,您将无法退还部分或全部会员服务费用。本协议终止后,用户无权要求公司继续向其提供任何服务,且不影响终止前基于本协议已产生的权利义务。",
},
{
type: "paragraph",
text: "5.3 公司可根据国家法律法规变化、业务实际变更需求、保护用户权益的需要等,不时修改本协议,并按照法律法规规定的程序及方式进行公告。如用户不同意变更后的内容,则用户有权主动停止使用本服务;如用户在变更内容生效后仍继续使用本服务,即视为用户同意该等内容的变更。",
},
{ type: "heading", text: "六、责任限制与免责条款" },
{
type: "paragraph",
text: "6.1 您理解并同意,本服务是按照现有技术和条件所能达到的现状提供的。公司将尽最大努力确保服务的连贯性和安全性,但不能随时预见和防范技术以及其他风险,包括但不限于不可抗力、网络原因、第三方服务瑕疵等原因可能导致的服务中断、数据丢失以及其他的损失和风险。",
},
{
type: "paragraph",
text: "6.2 基于收益与赔偿相一致及公平合理的原则,如因公司原因造成本服务不正常中断或服务不可用,您所可能获得的最高赔偿额不超过本协议项下公司就该计费周期已实际收取您的相关服务费用总额。",
},
{ type: "heading", text: "七、法律适用与争议解决" },
{
type: "paragraph",
text: "7.1 本协议的成立、生效、履行、解释及争议的解决均应适用中华人民共和国法律。",
},
{
type: "paragraph",
text: "7.2 本协议的签订地为广东省广州市南沙区。若您因本协议与公司发生任何争议,双方应尽量友好协商解决;如协商不成的,任何一方均同意应将相关争议提交至本协议签订地有管辖权的人民法院诉讼解决。",
},
{
type: "paragraph",
text: "7.3 本协议任一条款被视为废止、无效或不可执行,该条应视为可分的且并不影响本协议其余条款的有效性及可执行性。",
},
],
company: "广州光点飞舞网络有限公司",
},
deduct: {
navTitle: "扣款授权服务协议",
title: "扣费授权服务协议",
meta: "版本号:V1.0 生效日期:2026年6月22日",
content: [
{ type: "heading", text: "一、授权声明" },
{
type: "paragraph",
text: "本人(即授权人,以下简称“乙方”)作为射灵星球小程序的注册用户,在自愿、平等、知悉全部授权内容的基础上,同意向广州光点飞舞网络有限公司(以下简称“甲方”)及甲方委托的第三方支付机构(包含微信支付、支付宝、苹果支付等,以下简称“支付机构”)作出本扣费授权,双方就授权扣费相关事宜达成如下协议。",
},
{ type: "heading", text: "二、授权主体" },
{
type: "paragraph",
text: "授权人(乙方):射灵星球小程序注册用户,用户ID以平台系统记录为准。",
},
{
type: "paragraph",
text: "被授权人(甲方):广州光点飞舞网络有限公司,作为会员服务提供方及扣费指令发起方。",
},
{
type: "paragraph",
text: "支付执行方:乙方绑定的第三方支付机构,受甲方委托执行扣费操作。",
},
{ type: "heading", text: "三、授权内容" },
{
type: "paragraph",
text: "授权场景:乙方开通射灵星球会员自动续费服务后,授权甲方在每个会员周期届满前,向支付机构发起扣费指令,用于支付下一周期的会员服务费用。",
},
{
type: "paragraph",
text: "授权金额:扣费金额以乙方开通时选择的自动续费套餐对应价格为准,具体以会员购买页面公示价格为准;若价格调整,甲方将提前通过公示或通知形式告知乙方,乙方继续使用服务视为认可并接受调整后的金额。",
},
{
type: "paragraph",
text: "授权支付账户:乙方开通自动续费时绑定的微信支付、支付宝等第三方支付账户,账户信息以支付机构记录为准。",
},
{
type: "paragraph",
text: "授权扣费次数:本授权为周期性授权。在授权有效期内,甲方可按会员周期重复发起扣费指令,直至乙方依法撤销授权为止。",
},
{ type: "heading", text: "四、授权有效期" },
{
type: "paragraph",
text: "1. 本授权自乙方点击确认开通自动续费服务之日起生效,至乙方成功取消自动续费服务之日终止。",
},
{
type: "paragraph",
text: "2. 若乙方注销射灵星球小程序账号,本授权自账号注销完成之日自动终止。",
},
{
type: "paragraph",
text: "3. 若因国家政策调整、支付机构规则变更、乙方支付账户注销/冻结等非甲方主观原因导致授权无法履行的,本授权自动终止。",
},
{ type: "heading", text: "五、扣费与提醒规则" },
{
type: "paragraph",
text: "1. 扣费提醒:甲方将在每个自动续费扣费日期前5日,通过微信服务通知、小程序系统消息或短信等显著方式提示乙方即将发生续期扣费的信息,以保障乙方的知情权与选择权。",
},
{
type: "paragraph",
text: "2. 扣费时机:甲方将在乙方当前会员有效期届满前24小时内发起下一周期的扣费指令,支付机构根据指令从乙方授权账户中划扣对应费用。",
},
{
type: "paragraph",
text: "3. 扣费失败处理:若因账户余额不足等原因导致首次扣费失败的,甲方及支付机构可在合规范围内依法尝试补扣;若补扣仍失败或账户处于异常状态的,本期自动续费暂停,乙方会员到期后自动失效。",
},
{
type: "paragraph",
text: "4. 扣费凭证:支付机构的扣费记录作为扣费成功的有效凭证,乙方可在支付账户账单中查询明细;甲方同步为乙方提供电子扣费记录,可在会员中心查看。",
},
{ type: "heading", text: "六、授权的变更与撤销" },
{
type: "paragraph",
text: "1. 授权变更:本授权内容如需变更(如更换支付账户、调整续费套餐),乙方需先取消原自动续费服务,再重新开通新套餐。新授权自重新开通成功之日起生效,原授权同步终止。",
},
{
type: "paragraph",
text: "2. 授权撤销:乙方可随时退订本自动续费服务,解约后不影响乙方已生效周期的会员服务。根据乙方开通时选择的支付执行方,具体撤销路径如下:",
},
{
type: "list",
items: [
"微信支付用户:可通过微信APP内(路径:我 -> 服务 -> 钱包 -> 支付设置 -> 自动续费)或在小程序会员中心页面撤销本授权。",
"支付宝用户:可通过支付宝APP内(路径:我的 -> 设置 -> 支付设置 -> 免密支付/自动扣款)或在小程序会员中心页面撤销本授权。",
"苹果支付(iOS/App Store订阅)用户:必须通过苹果系统自带的功能进行取消(路径:iOS设备“设置” -> 点击顶部的Apple ID -> 订阅 -> 选择“射灵星球” -> 取消订阅)。",
],
},
{
type: "paragraph",
text: "3. 退订生效时效:",
},
{
type: "list",
items: [
"针对微信支付和支付宝:撤销操作成功后,本授权即时终止,甲方不得再发起新的扣费指令。因第三方支付平台系统结算延迟等客观原因,导致退订生效前系统已自动扣款成功的,该期会员权益将正常发放,已扣费用原则上不予退还。",
"针对苹果支付:根据苹果公司政策,乙方需在当前计费周期届满前至少24小时手动取消订阅,否则苹果系统可能会自动续订并扣款。苹果渠道的扣费与退款均由苹果公司独立处理,甲方无权干涉,因乙方未及时取消导致扣费的,由乙方自行承担或向苹果公司申诉。",
],
},
{ type: "heading", text: "七、免责条款" },
{
type: "paragraph",
text: "1. 因乙方支付账户余额不足、账户冻结、挂失、注销、限额等非甲方原因导致扣费失败的,甲方不承担任何责任,由此造成的会员权益中断等后果由乙方自行承担。",
},
{
type: "paragraph",
text: "2. 因支付机构系统故障、网络中断、政策调整等第三方不可抗力或外部原因导致扣费延迟、失败或错误的,甲方将协助乙方协调解决,但不承担相应的赔偿责任。",
},
{
type: "paragraph",
text: "3. 因乙方泄露支付账户密码、账号被盗用等自身保管不当原因导致的异常扣费,甲方不承担责任,乙方应自行向支付机构或公安机关主张权利。",
},
{ type: "heading", text: "八、信息保密" },
{
type: "paragraph",
text: "1. 甲方及支付机构应对乙方的授权信息、支付信息、个人身份信息严格保密,不得用于本授权以外的任何用途。",
},
{
type: "paragraph",
text: "2. 除法律法规规定、司法机关或监管部门依法要求外,甲方不得向任何第三方泄露乙方的授权及支付相关信息。",
},
{ type: "heading", text: "九、争议解决" },
{
type: "paragraph",
text: "1. 本授权协议的订立、效力、履行及争议解决均适用中华人民共和国法律。",
},
{
type: "paragraph",
text: "2. 因本协议产生的任何争议,双方应尽量友好协商解决;协商不成的,任何一方均可向甲方住所地(广东省广州市天河区)有管辖权的人民法院提起诉讼。",
},
{ type: "heading", text: "十、其他" },
{
type: "paragraph",
text: "1. 本协议为《射灵星球小程序会员服务协议》的配套协议,与该协议具有同等法律效力;本协议未约定事项,参照主协议执行。",
},
{
type: "paragraph",
text: "2. 甲方有权根据业务及监管要求调整本协议内容,调整后的协议将在平台公示,乙方继续使用自动续费服务视为接受调整后的内容。",
},
{
type: "paragraph",
text: "3. 甲方客服联系方式:请通过射灵星球小程序内【在线客服】或发送邮件至官方客服邮箱进行反馈。",
},
],
company: "广州光点飞舞网络有限公司",
},
};
export const getMemberAgreement = (type) => {
return memberAgreements[type] || memberAgreements.renew;
};
-894
View File
@@ -1,894 +0,0 @@
<script setup>
import { computed, ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import Signin from "@/components/Signin.vue";
import { virtualPayOrderAPI, getAppConfig, getHomeData, getOrderDetailAPI } from "@/apis";
import { capsuleHeight, wxLogin } from "@/util";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user, config } = storeToRefs(store);
const { updateConfig, updateUser } = store;
const currentTypeIndex = ref(1);
const selectedPackageIndex = ref(0);
const showModal = ref(false);
const loadingConfig = ref(false);
const paying = ref(false);
const refreshing = ref(false);
// 会员页核心展示数据:视觉、权益按蓝湖当前两张设计稿拆分,套餐完全使用接口数据。
const memberTypes = [
{
key: "normal",
tab: "VIP",
title: "普通会员",
prefix: "成为射灵星球",
desc: "特享约战竞技次数包、专属会员标识",
benefitTitle: "普通会员专属权益",
themeClass: "vip-page--normal",
heroCard: "https://static.shelingxingqiu.com/shootmini/static/vip/vip-title.png",
activeHeroCard: "https://static.shelingxingqiu.com/shootmini/static/vip/vip-title2.png",
orderIcon: "../../static/vip/vip-order.png",
heroBadge: "../../static/vip/normal-hero-badge.png",
buttonClass: "activate-btn--normal",
benefits: [
{ label: "专属会员标识", icon: "../../static/vip/vip-badge.png" },
{ label: "教练点评", icon: "../../static/vip/vip-comment.png" },
{ label: "专享VIP客服", icon: "../../static/vip/vip-service.png" },
{ label: "排位赛\n每日+20次", icon: "../../static/vip/vip-rank.png" },
{ label: "约战\n每日+20次", icon: "../../static/vip/vip-battle.png" },
],
},
{
key: "super",
tab: "SVIP",
title: "超级会员",
prefix: "成为射灵星球",
desc: "尊享专属特效、无限制约战竞技、专属会员标识",
benefitTitle: "超级会员专属权益",
themeClass: "vip-page--super",
heroCard: "https://static.shelingxingqiu.com/shootmini/static/vip/svip-title.png",
activeHeroCard: "https://static.shelingxingqiu.com/shootmini/static/vip/svip-title2.png",
orderIcon: "../../static/vip/svip-order.png",
heroBadge: "../../static/vip/super-hero-badge.png",
buttonClass: "activate-btn--super",
benefits: [
{ label: "专属落点标识", icon: "../../static/vip/svip-point.png" },
{ label: "专属命中效果", icon: "../../static/vip/svip-hit.png" },
{ label: "专属射箭效果", icon: "../../static/vip/svip-arrow.png" },
{ label: "专属会员标识", icon: "../../static/vip/svip-badge.png" },
{ label: "教练点评", icon: "../../static/vip/svip-comment.png" },
{ label: "约战无限制", icon: "../../static/vip/svip-battle.png" },
{ label: "排位赛无限制", icon: "../../static/vip/svip-rank.png" },
{ label: "专享SVIP客服", icon: "../../static/vip/svip-service.png" },
],
},
];
const currentType = computed(() => memberTypes[currentTypeIndex.value]);
// 后端到期时间可能是秒级时间戳、毫秒级时间戳或日期字符串,这里统一转成毫秒。
const toTimestamp = (value) => {
if (!value) return 0;
const numberValue = Number(value);
if (!Number.isNaN(numberValue)) {
return numberValue < 1000000000000 ? numberValue * 1000 : numberValue;
}
const time = new Date(value).getTime();
return Number.isNaN(time) ? 0 : time;
};
// 当前卡片只关心本 tab 对应的会员到期时间,普通会员和超级会员互不兜底。
const getVipExpiredValue = (type, source = user.value) => {
if (!source) return 0;
return type.key === "super" ? source.superVipExpiredAt : source.normalVipExpiredAt;
};
// 未过期才展示“会员生效中”样式,已过期或无值继续展示未开通样式。
const isVipActive = (type) => {
return toTimestamp(getVipExpiredValue(type)) > Date.now();
};
// 会员卡片展示完整到期时间。
const formatVipDate = (value) => {
const timestamp = toTimestamp(value);
if (!timestamp) return "";
const date = new Date(timestamp);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, "0");
const hour = String(date.getHours()).padStart(2, "0");
const minute = String(date.getMinutes()).padStart(2, "0");
const second = String(date.getSeconds()).padStart(2, "0");
return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
};
// 会员生效时使用 title2 切图,未生效时沿用原来的开通引导图。
const getHeroCard = (type) => {
return isVipActive(type) ? type.activeHeroCard : type.heroCard;
};
const getActiveVipExpiredDate = (type) => {
return formatVipDate(getVipExpiredValue(type));
};
// 设计稿里的“下期自动续费”按到期日前一天展示。
const getActiveVipRenewDate = (type) => {
const timestamp = toTimestamp(getVipExpiredValue(type));
if (!timestamp) return "";
return formatVipDate(timestamp - 24 * 60 * 60 * 1000);
};
const configMenus = computed(() => {
return config.value.vipMenus || [];
});
const getMenuName = (item) => {
return item.name || item.vipName || item.title || "";
};
const formatPrice = (value) => {
if (value === undefined || value === null || value === "") return "";
return String(value).replace("¥", "").replace("¥", "");
};
const getMenuPrice = (item) => {
return formatPrice(item && item.price);
};
const getMenuOriginalPrice = (item) => {
return formatPrice(item && item.originalPrice);
};
const getMenuSortValue = (item) => {
const value = item && item.sort;
if (value === undefined || value === null || value === "") return Number.MAX_SAFE_INTEGER;
const sort = Number(value);
return Number.isFinite(sort) ? sort : Number.MAX_SAFE_INTEGER;
};
const sortMenusBySort = (menus = []) => {
return menus
.map((item, index) => ({ item, index }))
.sort((a, b) => {
const sortDiff = getMenuSortValue(a.item) - getMenuSortValue(b.item);
return sortDiff || a.index - b.index;
})
.map(({ item }) => item);
};
const getMenuType = (item) => {
const vipType = Number(item.vipType);
if (vipType === 1) return "normal";
if (vipType === 2) return "super";
const type = String(item.type || "").toLowerCase();
if (["super", "svip"].includes(type)) return "super";
if (["normal", "vip"].includes(type)) return "normal";
const name = getMenuName(item);
if (/超级|SVIP/i.test(name)) return "super";
if (/普通|VIP|会员/i.test(name)) return "normal";
return "";
};
const getPackages = (type) => {
return sortMenusBySort(configMenus.value)
.filter((item) => getMenuType(item) === type.key)
.map((item) => {
return {
source: item,
id: item.id,
name: getMenuName(item),
price: getMenuPrice(item),
originalPrice: getMenuOriginalPrice(item),
icon: item.icon,
};
});
};
const currentPackages = computed(() => {
return getPackages(currentType.value);
});
const selectedPackage = computed(() => {
return currentPackages.value[selectedPackageIndex.value] || currentPackages.value[0];
});
const switchType = (index) => {
currentTypeIndex.value = index;
selectedPackageIndex.value = 0;
};
const onSwiperChange = (event) => {
currentTypeIndex.value = event.detail.current;
selectedPackageIndex.value = 0;
};
const selectPackage = (index) => {
selectedPackageIndex.value = index;
};
const toPackageDesc = () => {
uni.navigateTo({
url: "/pages/member/vip-intro",
});
};
const toOrderPage = () => {
uni.navigateTo({
url: "/pages/member/orders",
});
};
const toAgreement = (type) => {
uni.navigateTo({
url: `/pages/member/agreement?type=${type}`,
});
};
const loadVipConfig = async () => {
if (loadingConfig.value || configMenus.value.length) return;
loadingConfig.value = true;
try {
const result = await getAppConfig();
if (result) updateConfig(result);
} catch (error) {
console.log("load vip config error", error);
} finally {
loadingConfig.value = false;
}
};
const refreshUserAfterPay = async () => {
refreshing.value = true;
try {
const result = await getHomeData();
if (result.user) {
updateUser(result.user);
}
} catch (error) {
console.log("refresh user after pay error", error);
} finally {
refreshing.value = false;
}
};
const getVirtualPaySignData = (result) => {
// 后端可能返回字符串或对象,这里统一转成微信虚拟支付需要的 JSON 字符串。
const signDataObj = typeof result?.signData === "string" ? JSON.parse(result.signData) : result?.signData;
if (!signDataObj) return "";
// 微信虚拟支付短剧/虚拟商品模式需要购买数量;后端未返回时使用订单数量兜底。
if (!signDataObj.buyQuantity) {
signDataObj.buyQuantity = result.quantity || 1;
}
return JSON.stringify(signDataObj);
};
const isVirtualPayCancel = (res = {}) => {
const message = String(res.errMsg || res.message || "").toLowerCase();
const errCode = Number(res.errCode);
const errno = Number(res.errno);
return message.includes("cancel") || errCode === -23 || errno === -2;
};
const onPay = async () => {
if (paying.value || refreshing.value) return;
if (!user.value.id) {
showModal.value = true;
return;
}
if (!configMenus.value.length) {
await loadVipConfig();
}
const vipId = selectedPackage.value && selectedPackage.value.id;
if (!vipId) {
uni.showToast({
title: loadingConfig.value ? "套餐配置加载中" : "套餐暂不可购买",
icon: "none",
});
return;
}
if (typeof wx === "undefined" || !wx.requestVirtualPayment) {
uni.showToast({
title: "当前环境不支持微信虚拟支付",
icon: "none",
});
return;
}
paying.value = true;
let waitingPayment = false;
let payToast = null;
try {
// 微信虚拟支付创建订单前需要登录 code,服务端用它换取本次支付签名参数。
const wxResult = await wxLogin();
const result = await virtualPayOrderAPI(vipId, wxResult.code);
const finalSignData = getVirtualPaySignData(result);
if (!finalSignData || !result?.paySig || !result?.signature) {
uni.showToast({
title: "支付参数生成失败",
icon: "none",
});
refreshing.value = false;
return;
}
wx.requestVirtualPayment({
signData: finalSignData,
paySig: result.paySig,
signature: result.signature,
mode: "short_series_goods",
async success() {
payToast = {
title: "支付成功",
icon: "success",
};
if (result?.outTradeNo) {
try {
const orderDetail = await getOrderDetailAPI(result.outTradeNo);
console.log("virtual pay order detail", orderDetail);
} catch (error) {
console.log("virtual pay order detail error", error);
}
}
// 客户端支付成功后,会员是否真正生效仍以服务端用户信息刷新结果为准。
refreshUserAfterPay();
},
fail(res) {
console.log("virtual pay error", res);
if (isVirtualPayCancel(res)) {
payToast = {
title: "支付已取消",
icon: "none",
};
return;
}
payToast = {
title: res.message || "支付失败,请稍后重试",
icon: "none",
};
},
complete() {
paying.value = false;
if (payToast) {
setTimeout(() => {
uni.showToast(payToast);
}, 200);
}
},
});
waitingPayment = true;
} catch (error) {
console.log("create virtual pay order error", error);
uni.showToast({
title: error.message || "下单失败",
icon: "none",
});
} finally {
if (!waitingPayment) paying.value = false;
}
};
onShow(loadVipConfig);
</script>
<template>
<Container title="" :bgType="10" :scroll="false" :showBottom="false">
<view class="vip-page" :class="currentType.themeClass">
<view class="type-tabs" :style="{ top: capsuleHeight + 'px' }">
<view
v-for="(item, index) in memberTypes"
:key="item.key"
class="type-tab"
:class="{ 'type-tab--active': currentTypeIndex === index }"
@click="switchType(index)"
>
<text>{{ item.tab }}</text>
<view class="type-tab__indicator" />
</view>
</view>
<swiper
class="type-swiper"
:current="currentTypeIndex"
:duration="260"
@change="onSwiperChange"
>
<swiper-item v-for="type in memberTypes" :key="type.key">
<scroll-view scroll-y class="type-scroll" :show-scrollbar="false">
<view class="vip-content">
<view
class="hero-card"
:class="{ 'hero-card--active': isVipActive(type) }"
>
<image class="hero-card__bg" :src="getHeroCard(type)" mode="scaleToFill" />
<!-- 生效态卡片使用 title2 底图补充有效期和订单入口叠层 -->
<view v-if="isVipActive(type)" class="hero-card__content">
<text class="hero-card__date">
有效期至{{ getActiveVipExpiredDate(type) }}
</text>
<!-- <text v-if="type.key === 'super'" class="hero-card__renew">
下期会员将于{{ getActiveVipRenewDate(type) }}自动续费
</text> -->
<view class="hero-card__order" @click.stop="toOrderPage">
<image class="hero-card__order-icon" :src="type.orderIcon" mode="aspectFit" />
<text>订单管理</text>
</view>
</view>
</view>
<view class="benefit-title">
<view class="benefit-title__line" />
<text>{{ type.benefitTitle }}</text>
<view class="benefit-title__line" />
</view>
<view class="benefit-grid" :class="{ 'benefit-grid--normal': type.key === 'normal' }">
<view
v-for="benefit in type.benefits"
:key="benefit.label"
class="benefit-item"
>
<view class="benefit-icon">
<image class="benefit-icon__img" :src="benefit.icon" mode="aspectFit" />
</view>
<text class="benefit-item__label">{{ benefit.label }}</text>
</view>
</view>
<view class="package-header">
<text class="package-header__title">选择套餐</text>
<view class="package-header__link" @click="toPackageDesc">
<text>套餐说明</text>
<image
class="package-header__icon"
src="../../static/enter.png"
mode="aspectFit"
/>
</view>
</view>
<scroll-view scroll-x class="package-scroll" :show-scrollbar="false">
<view class="package-list">
<view
v-for="(pack, index) in getPackages(type)"
:key="`${type.key}-${pack.id || pack.name || index}`"
class="package-card"
:class="{ 'package-card--active': selectedPackageIndex === index }"
@click="selectPackage(index)"
>
<view class="package-card__inner">
<text class="package-name">{{ pack.name }}</text>
<view class="package-price">
<text class="package-price__symbol">¥</text>
<text class="package-price__value">{{ pack.price }}</text>
</view>
<view v-if="pack.originalPrice" class="package-origin">
<text>¥{{ pack.originalPrice }}</text>
<view class="package-origin__line" />
</view>
</view>
</view>
</view>
</scroll-view>
<button
hover-class="none"
class="activate-btn"
:class="type.buttonClass"
:disabled="loadingConfig || paying || refreshing || !selectedPackage"
@click="onPay"
>
<text v-if="loadingConfig">加载套餐中</text>
<text v-else-if="paying">创建订单中</text>
<text v-else-if="refreshing">刷新会员状态中</text>
<text v-else-if="selectedPackage">¥ {{ selectedPackage.price }} 一键激活</text>
<text v-else>套餐暂不可购买</text>
</button>
<view class="agreement">
<text>支付即同意</text>
&nbsp;<text class="agreement__link" @click.stop="toAgreement('renew')">会员自动续费服务协议</text>
&nbsp;<text class="agreement__link" @click.stop="toAgreement('deduct')">扣款授权服务协议</text>
</view>
</view>
</scroll-view>
</swiper-item>
</swiper>
<Signin :show="showModal" :onClose="() => (showModal = false)" />
</view>
</Container>
</template>
<style scoped>
.vip-page {
position: relative;
width: 100%;
height: 100%;
}
.type-tabs {
position: fixed;
left: 0;
z-index: 998;
width: 50%;
height: 50px;
margin-left: 50%;
transform:translateX(-60%);
display: flex;
align-items: center;
justify-content: center;
pointer-events: auto;
}
.type-tab {
width: 132rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.45);
font-size: 34rpx;
font-weight: 700;
font-style: italic;
}
.type-tab__indicator {
width: 40rpx;
height: 4rpx;
border-radius: 4rpx;
margin-top: 8rpx;
background-color: transparent;
}
.type-tab--active {
color: #ffffff;
}
.vip-page--normal .type-tab--active .type-tab__indicator {
background-color: #ffffff;
}
.vip-page--super .type-tab--active {
color: #fedab5;
}
.vip-page--super .type-tab--active .type-tab__indicator {
background-color: #fedab5;
}
.type-swiper {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
}
.type-scroll {
width: 100%;
height: 100%;
}
.vip-content {
min-height: 100%;
padding: 32rpx 24rpx 52rpx;
box-sizing: border-box;
}
.hero-card {
position: relative;
width: 702rpx;
height: 260rpx;
overflow: hidden;
}
.hero-card__bg {
position: absolute;
left: 0;
top: 0;
width: 702rpx;
height: 260rpx;
}
.hero-card__content {
position: relative;
z-index: 1;
/* 对齐 title2 切图左侧预留文案区域。 */
padding: 132rpx 0 0 44rpx;
display: flex;
flex-direction: column;
align-items: flex-start;
box-sizing: border-box;
}
.hero-card__date,
.hero-card__renew {
color: #8d6d55;
font-size: 24rpx;
line-height: 34rpx;
}
.vip-page--normal .hero-card__date,
.vip-page--normal .hero-card__renew {
color: #555555;
}
.hero-card__order {
display: flex;
align-items: center;
margin-top: 10rpx;
color: #6d5644;
font-size: 24rpx;
line-height: 34rpx;
text-decoration: underline;
}
.vip-page--normal .hero-card__order {
color: #555555;
}
.hero-card__order-icon {
width: 28rpx;
height: 32rpx;
margin-right: 8rpx;
flex-shrink: 0;
}
.benefit-title {
display: flex;
align-items: center;
justify-content: center;
margin-top: 38rpx;
color: #ffffff;
font-size: 24rpx;
line-height: 34rpx;
}
.benefit-title__line {
width: 14rpx;
height: 2rpx;
background-color: #ffffff;
margin: 0 10rpx;
}
.benefit-grid {
display: flex;
flex-wrap: wrap;
width: 622rpx;
margin: 38rpx auto 0;
}
.benefit-grid--normal {
width: 672rpx;
}
.benefit-item {
width: 144rpx;
height: 122rpx;
margin-right: 94rpx;
margin-bottom: 30rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.benefit-item:nth-child(3n) {
margin-right: 0;
}
.benefit-grid--normal .benefit-item {
margin-right: 120rpx;
}
.benefit-grid--normal .benefit-item:nth-child(3n) {
margin-right: 0;
}
.benefit-icon {
width: 80rpx;
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
}
.benefit-icon__img {
width: 80rpx;
height: 80rpx;
display: block;
}
.benefit-item__label {
margin-top: 8rpx;
color: #ffffff;
opacity: 0.7;
font-size: 24rpx;
line-height: 34rpx;
text-align: center;
white-space: pre-line;
}
.package-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 56rpx;
padding-right: 8rpx;
}
.benefit-grid--normal + .package-header {
margin-top: 146rpx;
}
.package-header__title {
color: #ffffff;
font-size: 28rpx;
line-height: 40rpx;
font-weight: 500;
}
.vip-page--super .package-header__title {
color: #e7ba80;
}
.package-header__link {
display: flex;
align-items: center;
color: #999999;
font-size: 22rpx;
line-height: 32rpx;
}
.package-header__icon {
width: 24rpx;
height: 28rpx;
}
.package-scroll {
width: 100%;
margin-top: 40rpx;
white-space: nowrap;
}
.package-list {
display: inline-flex;
min-width: 100%;
padding: 6rpx 84rpx 6rpx 6rpx;
box-sizing: border-box;
}
.package-card {
position: relative;
width: 264rpx;
flex: 0 0 264rpx;
height: 224rpx;
border-radius: 16rpx;
border: 2rpx solid #999999;
margin-right: 32rpx;
padding: 0;
overflow: hidden;
box-sizing: border-box;
color: #999999;
}
.package-card__inner {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
border-radius: inherit;
}
.package-card--active {
border-width: 6rpx;
border-color: #fed847;
}
.vip-page--super .package-card--active {
border: none;
padding: 6rpx;
background: linear-gradient(180deg, #fef3e6 0%, #f0c191 100%);
}
.vip-page--super .package-card--active .package-card__inner {
border-radius: 10rpx;
background-color: #050b19;
}
.package-name {
font-size: 24rpx;
line-height: 34rpx;
}
.package-price {
display: flex;
align-items: baseline;
margin-top: 12rpx;
color: #ffffff;
}
.package-card--active .package-price {
color: #fed847;
}
.vip-page--super .package-card--active .package-price {
color: #ffe8cd;
}
.package-price__symbol {
font-size: 30rpx;
line-height: 36rpx;
font-weight: 700;
}
.package-price__value {
font-size: 56rpx;
line-height: 66rpx;
font-weight: 700;
}
.package-origin {
position: relative;
margin-top: 2rpx;
color: #999999;
font-size: 24rpx;
line-height: 34rpx;
}
.package-origin__line {
position: absolute;
left: -4rpx;
right: -4rpx;
top: 16rpx;
height: 2rpx;
background-color: #999999;
}
.activate-btn {
width: 686rpx;
height: 88rpx;
border-radius: 44rpx;
margin: 34rpx auto 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
color: #000000;
font-size: 30rpx;
line-height: 42rpx;
font-weight: 500;
}
.activate-btn::after {
border: none;
}
.activate-btn--normal {
background-color: #fed847;
}
.activate-btn--super {
background: linear-gradient( 181deg, #FDFDFC 0%, #FDF8F2 0%, #FFC992 100%, #FFB96C 100%);
}
.agreement {
display: flex;
justify-content: center;
align-items: center;
margin-top: 24rpx;
color: #999999;
font-size: 20rpx;
line-height: 28rpx;
}
.agreement__link {
margin-left: -6rpx;
text-decoration: underline;
}
</style>
-244
View File
@@ -1,244 +0,0 @@
<script setup>
import Container from "@/components/Container.vue";
</script>
<template>
<Container title="会员权益说明">
<scroll-view scroll-y class="vip-intro" :show-scrollbar="false">
<view class="content">
<view class="page-title">射灵星球会员权益</view>
<view class="paragraph">
<text class="strong">核心特权</text>
<text>解锁约战段位评级实时排位赛AI智能教练点评四大核心功能</text>
</view>
<view class="paragraph">
<text class="strong">专属服务</text>
<text>享全年不同阶段VIP专属客服快速解决技术故障规则疑问等所有问题</text>
</view>
<view class="paragraph">
<text class="strong">新用户福利</text>
<text>所有初次绑定设备的用户免费赠送6个月普通会员</text>
</view>
<view class="paragraph">
<text>
加入射灵星球在真实射箭运动中体验在线竞技的乐趣结识全球志同道合的弓友持续享受新功能与系统升级不断挑战自我创造属于你的辉煌战绩
</text>
</view>
<view class="table-wrap">
<view class="intro-toast">
<image class="intro-toast__bg" src="../../static/vip/intro-toast.png" mode="scaleToFill" />
<text class="intro-toast__text">初次绑定设备赠送6个月</text>
</view>
<view class="benefit-table">
<view class="table-row table-head">
<text class="table-cell table-cell--feature">特权</text>
<text class="table-cell">基础用户</text>
<text class="table-cell">普通会员</text>
<text class="table-cell">超级会员</text>
</view>
<view class="table-row">
<text class="table-cell table-cell--feature">专属落点标识</text>
<text class="table-cell"></text>
<text class="table-cell"></text>
<text class="table-cell">螺旋</text>
</view>
<view class="table-row">
<text class="table-cell table-cell--feature">专属命中效果</text>
<text class="table-cell"></text>
<text class="table-cell"></text>
<text class="table-cell">玻璃裂纹</text>
</view>
<view class="table-row">
<text class="table-cell table-cell--feature">箭矢飞行特效</text>
<text class="table-cell"></text>
<text class="table-cell"></text>
<text class="table-cell">光箭</text>
</view>
<view class="table-row">
<text class="table-cell table-cell--feature">每日约战次数</text>
<text class="table-cell">2</text>
<text class="table-cell">22</text>
<text class="table-cell">无限</text>
</view>
<view class="table-row">
<text class="table-cell table-cell--feature">每日排位赛次数</text>
<text class="table-cell">2</text>
<text class="table-cell">22</text>
<text class="table-cell">无限</text>
</view>
<view class="table-row">
<text class="table-cell table-cell--feature">教练点评</text>
<text class="table-cell"></text>
<text class="table-cell">专享</text>
<text class="table-cell">专享</text>
</view>
<view class="table-row">
<text class="table-cell table-cell--feature">昵称美化</text>
<text class="table-cell"></text>
<text class="table-cell">专享</text>
<text class="table-cell">专享</text>
</view>
<view class="table-row">
<text class="table-cell table-cell--feature">专属客服</text>
<text class="table-cell"></text>
<text class="table-cell">专享</text>
<text class="table-cell">专享</text>
</view>
</view>
</view>
<view class="section-title">会员时长叠加与生效规则</view>
<view class="paragraph">
<text class="strong">等级优先级</text>
<text>
同时拥有 超级会员 普通会员 优先使用超级会员权益普通会员时长自动顺延 超级会员 到期后自动生效
</text>
</view>
<view class="paragraph">
<text class="strong">连续套餐叠加</text>
<text>
已有月 / 半年 / 年卡时再购买连续包月 / 包年总有效期直接累加连续套餐从下单日起算下个周期正常自动扣费
</text>
</view>
<view class="paragraph example">
<text>
示例1 1 日买半年卡7 1 日到期1 10 日买连续包月总有效期延至 8 1 8 1 日会发起首次自动扣款
</text>
</view>
<view class="paragraph">
<text class="strong">升级超级会员规则</text>
<text>
购买升级 超级会员 后立即生效可升级时长以购买页面提示为准未升级的剩余 普通会员 时长将在 超级会员 到期后继续使用
</text>
</view>
</view>
</scroll-view>
</Container>
</template>
<style scoped lang="scss">
.vip-intro {
width: 100%;
height: 100%;
background-color: #ffffff;
}
.content {
padding: 30rpx;
box-sizing: border-box;
}
.page-title,
.section-title {
color: #333333;
font-size: 28rpx;
line-height: 40rpx;
font-weight: 700;
}
.page-title {
margin-bottom: 26rpx;
}
.section-title {
margin: 42rpx 0 22rpx;
}
.paragraph {
margin-bottom: 22rpx;
color: #333333;
font-size: 26rpx;
line-height: 38rpx;
}
.strong {
color: #333333;
font-weight: 700;
}
.example {
color: #666666;
}
.table-wrap {
position: relative;
margin-top: 34rpx;
}
.intro-toast {
position: absolute;
top: -38rpx;
right: 118rpx;
z-index: 2;
width: 222rpx;
height: 54rpx;
display: flex;
align-items: center;
justify-content: center;
}
.intro-toast__bg {
position: absolute;
left: 0;
top: 0;
width: 222rpx;
height: 54rpx;
}
.intro-toast__text {
position: relative;
z-index: 1;
color: #333333;
font-size: 18rpx;
line-height: 30rpx;
font-weight: 500;
white-space: nowrap;
margin-top: -6rpx;
}
.benefit-table {
width: 100%;
border-top: 1rpx solid #e5e5e5;
border-left: 1rpx solid #e5e5e5;
box-sizing: border-box;
}
.table-row {
display: flex;
min-height: 60rpx;
}
.table-cell {
width: 22.5%;
min-height: 60rpx;
padding: 12rpx 4rpx;
border-right: 1rpx solid #e5e5e5;
border-bottom: 1rpx solid #e5e5e5;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
color: #333333;
font-size: 24rpx;
line-height: 34rpx;
text-align: center;
}
.table-cell--feature {
width: 32.5%;
}
.table-head .table-cell {
color: #666666;
font-weight: 700;
}
</style>
+7 -8
View File
@@ -11,15 +11,14 @@ import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
const arrows = ref([]);
const isSvip = ref(false);
const total = ref(0);
onLoad(async (options) => {
if (!options.id) return;
const result = await getPractiseAPI(options.id || 176);
arrows.value = result.details;
isSvip.value = result.sVip === true;
total.value = result.details.length;
if (options.id) {
const result = await getPractiseAPI(options.id);
arrows.value = result.arrows;
total.value = result.completed_arrows;
}
});
</script>
@@ -36,7 +35,7 @@ onLoad(async (options) => {
</view>
</view> -->
<view :style="{ marginBottom: '20px' }">
<BowTarget :scores="arrows" :isSvip="isSvip" />
<BowTarget :scores="arrows" />
</view>
<view class="desc">
<text>{{ arrows.length }}</text>
@@ -48,7 +47,7 @@ onLoad(async (options) => {
:completeEffect="false"
:rowCount="total === 12 ? 6 : 9"
:total="total"
:arrows="arrows"
:scores="arrows.map((a) => a.ring)"
:margin="arrows.length === 12 ? 4 : 1"
:fontSize="arrows.length === 12 ? 25 : 22"
/>
+44 -213
View File
@@ -1,28 +1,18 @@
<script setup>
import { computed, ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { ref, onMounted } from "vue";
import Container from "@/components/Container.vue";
import ScreenHint from "@/components/ScreenHint.vue";
import SButton from "@/components/SButton.vue";
import {
bindDeviceAPI,
getMyDevicesAPI,
unbindDeviceAPI,
laserAimAPI, bindDeviceAPIV2,
} from "@/apis";
import { bindDeviceAPI, getMyDevicesAPI, unbindDeviceAPI } from "@/apis";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const showTip = ref(false);
const confirmBindTip = ref(false);
const addDevice = ref();
const store = useStore();
const { updateDevice, clearDevice } = store;
const { updateDevice } = store;
const { user, device } = storeToRefs(store);
const justBind = ref(false);
const calibration = ref(false);
const token = ref(null);
const isSVip = computed(() => user.value.sVip === true);
const isVip = computed(() => user.value.vip === true && !isSVip.value);
// 扫描二维码方法
const handleScan = () => {
@@ -33,14 +23,13 @@ const handleScan = () => {
scanType: ["qrCode"],
success: async (res) => {
try {
// const base64Decode = (str) => {
// // 将 base64 转换为 utf8 字符串
// const bytes = wx.base64ToArrayBuffer(str);
// return String.fromCharCode.apply(null, new Uint8Array(bytes));
// };
//
// addDevice.value = JSON.parse(base64Decode(res.result));
token.value = res.result;
const base64Decode = (str) => {
// 将 base64 转换为 utf8 字符串
const bytes = wx.base64ToArrayBuffer(str);
return String.fromCharCode.apply(null, new Uint8Array(bytes));
};
addDevice.value = JSON.parse(base64Decode(res.result));
confirmBindTip.value = true;
} catch (err) {
uni.showToast({
@@ -61,8 +50,8 @@ const handleScan = () => {
};
const confirmBind = async () => {
if (!justBind.value && token.value) {
const result = await bindDeviceAPIV2(token.value);
if (!justBind.value && addDevice.value.id) {
const result = await bindDeviceAPI(addDevice.value);
confirmBindTip.value = false;
if (result.binded) {
return uni.showToast({
@@ -70,7 +59,7 @@ const confirmBind = async () => {
icon: "none",
});
}
updateDevice(result.deviceId, result.name);
updateDevice(addDevice.value.id, addDevice.value.name);
justBind.value = true;
uni.showToast({
title: "绑定成功",
@@ -86,26 +75,12 @@ const toFristTryPage = () => {
};
const unbindDevice = async () => {
try {
await unbindDeviceAPI(device.value.deviceId);
} catch (error) {
if (error?.type === "DEVICE_BIND_INVALID") {
uni.setStorageSync("calibration", false);
clearDevice();
}
return;
}
uni.setStorageSync("calibration", false);
await unbindDeviceAPI(device.value.deviceId);
uni.showToast({
title: "解绑成功",
icon: "success",
});
clearDevice();
};
/** 连接wifi跳转到wifi列表页面 */
const joinWifi = () => {
uni.navigateTo({ url: "/pages/ota-wifi" });
device.value = {};
};
const toDeviceIntroPage = () => {
@@ -129,39 +104,13 @@ const copyEmail = () => {
},
});
};
const goCalibration = async () => {
await laserAimAPI();
uni.navigateTo({
url: "/pages/calibration",
});
};
const syncDeviceBinding = async () => {
if (!user.value.id) return;
try {
const devices = await getMyDevicesAPI();
if (devices.bindings && devices.bindings.length) {
updateDevice(devices.bindings[0].deviceId, devices.bindings[0].deviceName);
} else {
clearDevice();
}
} catch (error) {
console.log("sync device binding error", error);
}
};
onShow(async () => {
calibration.value = uni.getStorageSync("calibration");
await syncDeviceBinding();
});
</script>
<template>
<Container title="弓箭绑定">
<view v-if="!device.deviceId" class="scan-code">
<button hover-class="none" @click="$clickSound(handleScan)">
<image src="https://static.shelingxingqiu.com/shootmini/static/scan.png" mode="widthFix" />
<button hover-class="none" @click="handleScan">
<image src="../static/scan.png" mode="widthFix" />
</button>
<button hover-class="none" @click="showTip = true">
<text></text>
@@ -172,7 +121,7 @@ onShow(async () => {
<text>射灵智能弓箭三模传感系统与独创靶环算法</text>
<text>毫秒级在线实时对战让你拥有全球约战的乐趣</text>
<button hover-class="none" @click="toDeviceIntroPage">
<image src="https://static.shelingxingqiu.com/shootmini/static/have-no-device.png" mode="widthFix" />
<image src="../static/have-no-device.png" mode="widthFix" />
</button>
<ScreenHint
mode="square"
@@ -188,9 +137,7 @@ onShow(async () => {
<text>已被绑定的弓箭无法再次绑定</text>
<view>
<text>如有任何疑问请随时联系</text>
<button hover-class="none" @click="copyEmail">
shelingxingqiu@163.com
</button>
<button hover-class="none" @click="copyEmail">shelingxingqiu@163.com</button>
</view>
</view>
</ScreenHint>
@@ -214,23 +161,10 @@ onShow(async () => {
</ScreenHint>
</view>
<view v-if="justBind" class="just-bind">
<view
class="device-binded"
:style="{ marginBottom: calibration ? '250rpx' : '100rpx' }"
>
<view>
<image src="https://static.shelingxingqiu.com/shootmini/static/device-icon.png" mode="widthFix" />
<view class="device-binded">
<view @click="toDeviceIntroPage">
<image src="../static/device-icon.png" mode="widthFix" />
<text>{{ device.deviceName }}</text>
<view class="calibration" v-if="calibration">
<button hover-class="none" @click="goCalibration">
<text>重新校准</text>
<image src="../static/enter-arrow-blue.png" mode="widthFix" />
</button>
<view>
<image src="../static/calibration-tip.png" mode="widthFix" />
<text>如有场地/距离变化需重新校准以保证智能弓射箭精准度</text>
</view>
</view>
</view>
<image src="../static/bind-success.png" mode="widthFix" />
<view>
@@ -239,67 +173,26 @@ onShow(async () => {
mode="widthFix"
:style="{ borderRadius: '50%' }"
/>
<view
:class="[
'member-nickname',
isVip ? 'member-nickname--vip' : '',
isSVip ? 'member-nickname--svip' : '',
]"
>
<text class="member-nickname__text">{{ user.nickName }}</text>
<text v-if="isSVip" class="member-nickname__shine">{{
user.nickName
}}</text>
</view>
<text>{{ user.nickName }}</text>
</view>
</view>
<!-- <block v-if="calibration"> -->
<view>
<text>恭喜你的弓箭和账号已成功绑定</text>
<text :style="{ color: '#fed847' }">已赠送6个月射灵世界会员</text>
</view>
<!-- <SButton :onClick="goCalibration" width="60vw" :rounded="40">
开启智能弓进行校准
</SButton>
<text :style="{ marginTop: '20rpx', fontSize: '24rpx', color: '#fff9' }"
>校准时弓箭激光将开启请勿直视激光</text
> -->
<view>
<SButton
:onClick="backToHome"
backgroundColor="#fff3"
color="#fff"
width="60vw"
:rounded="40"
<view>
<text>恭喜你的弓箭和账号已成功绑定</text>
<text :style="{ color: '#fed847' }">已赠送6个月射灵世界会员</text>
<text>赶快进入新手试炼场体验一下吧</text>
</view>
<SButton :onClick="toFristTryPage">进入新手试炼</SButton>
<view :style="{ marginTop: '15px' }">
<SButton :onClick="backToHome" backgroundColor="#fff3" color="#fff"
>返回首页</SButton
>
</view>
<view :style="{ marginTop: '15px' }">
<SButton :onClick="toFristTryPage" width="60vw" :rounded="40">进入新手试炼</SButton>
</view>
<!-- </block> -->
<!-- <block v-else>
</block> -->
>
</view>
</view>
<view v-if="device.deviceId && !justBind" class="has-device">
<view class="device-binded">
<view>
<image src="https://static.shelingxingqiu.com/shootmini/static/device-icon.png" mode="widthFix" />
<view @click="toDeviceIntroPage">
<image src="../static/device-icon.png" mode="widthFix" />
<text>{{ device.deviceName }}</text>
<view class="calibration">
<button hover-class="none" @click="goCalibration">
<text>去校准</text>
<image src="../static/enter-arrow-blue.png" mode="widthFix" />
</button>
<view>
<image src="../static/calibration-tip.png" mode="widthFix" />
<text
>首次绑定智能弓或场地/距离变化时应进行校准以确保射箭精度</text
>
</view>
</view>
</view>
<image src="../static/bind.png" mode="widthFix" />
<view>
@@ -308,30 +201,10 @@ onShow(async () => {
mode="widthFix"
:style="{ borderRadius: '50%' }"
/>
<view
:class="[
'member-nickname',
isVip ? 'member-nickname--vip' : '',
isSVip ? 'member-nickname--svip' : '',
]"
>
<text class="member-nickname__text">{{ user.nickName }}</text>
<text v-if="isSVip" class="member-nickname__shine">{{
user.nickName
}}</text>
</view>
<text>{{ user.nickName }}</text>
</view>
</view>
<view :style="{ marginTop: '240rpx' }">
<SButton :onClick="() => $clickSound(unbindDevice)" width="80vw" :rounded="40"
>解绑</SButton
>
</view>
<view :style="{ marginTop: '20rpx' }">
<SButton :onClick="() => $clickSound(joinWifi)" width="80vw" :rounded="40"
>设备连接WIFI</SButton
>
</view>
<SButton :onClick="unbindDevice">解绑</SButton>
</view>
</Container>
</template>
@@ -440,20 +313,18 @@ onShow(async () => {
justify-content: center;
color: #fff;
font-size: 14px;
margin-top: 200rpx;
margin: 100px 0;
}
.device-binded > view {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
font-size: 26rpx;
}
.device-binded > view > image {
width: 140rpx;
height: 140rpx;
width: 24vw;
height: 24vw;
margin-bottom: 5px;
border-radius: 12px;
border-radius: 10px;
}
.device-binded > view > text {
width: 120px;
@@ -462,17 +333,8 @@ onShow(async () => {
text-overflow: ellipsis;
text-align: center;
}
.device-binded .member-nickname {
justify-content: center;
width: 120px;
}
.device-binded .member-nickname__text,
.device-binded .member-nickname__shine {
font-size: 26rpx;
text-align: center;
}
.device-binded > image {
width: 100rpx;
width: 16vw;
margin: 0 20px;
}
.has-device,
@@ -485,42 +347,11 @@ onShow(async () => {
display: flex;
flex-direction: column;
align-items: center;
font-size: 28rpx;
margin-bottom: 100rpx;
font-size: 14px;
margin: 75px 0;
}
.has-device > view:nth-child(2) > text,
.just-bind > view:nth-child(2) > text {
margin: 5px;
}
.calibration {
position: absolute;
bottom: -145rpx;
left: 20rpx;
}
.calibration > button {
font-size: 26rpx;
color: #287fff;
display: flex;
align-items: center;
padding-bottom: 15rpx;
padding-left: 50rpx;
}
.calibration > button > image {
width: 28rpx;
height: 28rpx;
}
.calibration > view {
position: relative;
font-size: 22rpx;
color: #fff9;
padding-top: 34rpx;
padding-left: 35rpx;
width: 322rpx;
}
.calibration > view > image {
position: absolute;
top: 0;
left: 0;
width: 370rpx;
}
</style>

Some files were not shown because too many files have changed in this diff Show More