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
283 changed files with 8335 additions and 33881 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
-3
View File
@@ -1,3 +0,0 @@
{
"i18n-ally.localesPaths": []
}
-269
View File
@@ -1,269 +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
除非用户明确要求:
否则不要输出完整项目。
-116
View File
@@ -1,116 +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`
-10532
View File
File diff suppressed because it is too large Load Diff
-2
View File
@@ -23,9 +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",
"vue": "^3.4.21",
"vue-i18n": "^9.1.9"
},
+205 -351
View File
@@ -1,377 +1,231 @@
<script setup>
import {
watch
} from "vue";
import {
onShow,
onHide
} from "@dcloudio/uni-app";
import websocket from "@/websocket";
import {
getDeviceBatteryAPI
} from "@/apis";
import useStore from "@/store";
import {
storeToRefs
} from "pinia";
import audioManager from "./audioManager";
const store = useStore();
const {
user
} = 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) {
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();
updateOnline(data.online);
}
function onDeviceBindInvalid() {
clearDevice();
uni.setStorageSync("calibration", false);
}
function onDeviceShoot() {
// audioManager.play("射箭声音")
}
function onShootWsMsg(content) {
if(content.type === 'shoot-trigger'){
onDeviceShoot()
}
uni.$emit("socket-inbox", content);
}
onShow(() => {
uni.$on("update-user", emitUpdateUser);
uni.$on("update-online", emitUpdateOnline);
uni.$on("session-kicked-out", onSessionKickedOut);
uni.$on("device-bind-invalid", onDeviceBindInvalid);
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);
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 -434
View File
@@ -1,586 +1,520 @@
let BASE_URL = "https://api.shelingxingqiu.com/api/shoot"; // 默认正式版
try {
const accountInfo = uni.getAccountInfoSync();
const envVersion = accountInfo.miniProgram.envVersion;
const accountInfo = uni.getAccountInfoSync();
const envVersion = accountInfo.miniProgram.envVersion;
switch (envVersion) {
case "develop": // 开发版
// BASE_URL = "http://192.168.1.30:8000/api/shoot";
BASE_URL = "https://apitest.shelingxingqiu.com/api/shoot";
break;
case "trial": // 体验版
BASE_URL = "https://apitest.shelingxingqiu.com/api/shoot";
break;
case "release": // 正式版
BASE_URL = "https://api.shelingxingqiu.com/api/shoot";
break;
default:
// 保持默认值
break;
}
switch (envVersion) {
case "develop": // 开发版
// BASE_URL = "http://192.168.1.242:8000/api/shoot";
BASE_URL = "https://apitest.shelingxingqiu.com/api/shoot";
break;
case "trial": // 体验版
BASE_URL = "https://apitest.shelingxingqiu.com/api/shoot";
break;
case "release": // 正式版
BASE_URL = "https://api.shelingxingqiu.com/api/shoot";
break;
default:
// 保持默认值
break;
}
} catch (e) {
console.error("获取环境信息失败,使用默认正式环境", e);
console.error("获取环境信息失败,使用默认正式环境", e);
}
const ADDONS_BASE_URL = BASE_URL.replace(/\/api\/shoot$/, "/api/shoot");
function request(method, url, data = {}, baseUrl = BASE_URL) {
const token = uni.getStorageSync(
`${uni.getAccountInfoSync().miniProgram.envVersion}_token`
);
const header = {};
if (token) header.Authorization = `Bearer ${token || ""}`;
return new Promise((resolve, reject) => {
uni.request({
url: `${baseUrl}${url}`,
method,
header,
data,
timeout: 10000,
success: (res) => {
if (res.data) {
const {code, data, message} = res.data;
if (code === 0) resolve(data);
else if (message) {
const error = {code, data, message};
if (message.indexOf("登录身份已失效") !== -1) {
console.log('1111111111111111111,token失效')
uni.removeStorageSync(
`${uni.getAccountInfoSync().miniProgram.envVersion}_token`
);
uni.$emit("update-user");
reject({ type: "AUTH_INVALID", message });
return;
}
if (message.indexOf("已达上限") !== -1) {
reject(error);
return;
}
if (message === "ROOM_FULL") {
resolve({full: true});
return;
}
if (message === "ERROR_ROOM_GAME_START") {
resolve({started: true});
return;
}
if (url.indexOf("/user/room") !== -1 && method === "GET") {
resolve({});
return;
}
if (message === "ERROR_BATTLE_GAMING") {
resolve({});
return;
}
if (message === "BIND_DEVICE") {
resolve({binded: true});
return;
}
if (message === "BIND_FAILD") {
uni.$emit("device-bind-invalid");
uni.showToast({
title: "设备绑定状态已失效,请重新绑定",
icon: "none",
});
reject({type: "DEVICE_BIND_INVALID", message});
return;
}
if (message === "ERROR_ORDER_UNPAY") {
uni.showToast({
title: "当前有未支付订单",
icon: "none",
});
resolve({});
return;
}
if (message === "ROOM_EMPTY") {
return uni.showToast({
title: "房间已过期",
icon: "none",
});
}
uni.showToast({
title: message,
icon: "none",
});
reject(error);
return;
}
reject({code, data, message});
}
},
fail: (err) => {
handleRequestError(err, url);
reject(err);
},
});
function request(method, url, data = {}) {
const token = uni.getStorageSync(
`${uni.getAccountInfoSync().miniProgram.envVersion}_token`
);
const header = {};
if (token) header.Authorization = `Bearer ${token || ""}`;
return new Promise((resolve, reject) => {
uni.request({
url: `${BASE_URL}${url}`,
method,
header,
data,
timeout: 10000,
success: (res) => {
if (res.data) {
const { code, data, message } = res.data;
if (code === 0) resolve(data);
else if (message) {
if (message.indexOf("登录身份已失效") !== -1) {
uni.removeStorageSync(
`${uni.getAccountInfoSync().miniProgram.envVersion}_token`
);
}
if (message === "ROOM_FULL") {
resolve({ full: true });
return;
}
if (message === "ERROR_ROOM_GAME_START") {
resolve({ started: true });
return;
}
if (url.indexOf("/user/room") !== -1 && method === "GET") {
resolve({});
return;
}
if (message === "ERROR_BATTLE_GAMING") {
resolve({});
return;
}
if (message === "BIND_DEVICE") {
resolve({ binded: true });
return;
}
if (message === "ERROR_ORDER_UNPAY") {
uni.showToast({
title: "当前有未支付订单",
icon: "none",
});
resolve({});
return;
}
if (message === "ROOM_EMPTY") {
return uni.showToast({
title: "房间已过期",
icon: "none",
});
}
uni.showToast({
title: message,
icon: "none",
});
}
reject("");
}
},
fail: (err) => {
handleRequestError(err, url);
reject(err);
},
});
});
}
// 统一的错误处理函数
function handleRequestError(err, url) {
console.log("请求失败:", {err, url});
console.log("请求失败:", { err, url });
// 根据错误类型显示不同提示
if (err.errMsg) {
if (err.errMsg.includes("timeout")) {
showCustomToast("请求超时,请稍后重试", "timeout");
} else if (err.errMsg.includes("fail")) {
// 检查网络状态
uni.getNetworkType({
success: (res) => {
if (res.networkType === "none") {
showCustomToast("网络连接已断开,请检查网络设置", "network");
} else {
showCustomToast("服务器连接失败,请稍后重试", "server");
}
},
fail: () => {
showCustomToast("网络异常,请检查网络连接", "unknown");
},
});
} else {
showCustomToast("请求失败,请稍后重试", "general");
}
// 根据错误类型显示不同提示
if (err.errMsg) {
if (err.errMsg.includes("timeout")) {
showCustomToast("请求超时,请稍后重试", "timeout");
} else if (err.errMsg.includes("fail")) {
// 检查网络状态
uni.getNetworkType({
success: (res) => {
if (res.networkType === "none") {
showCustomToast("网络连接已断开,请检查网络设置", "network");
} else {
showCustomToast("服务器连接失败,请稍后重试", "server");
}
},
fail: () => {
showCustomToast("网络异常,请检查网络连接", "unknown");
},
});
} else {
showCustomToast("网络异常,请稍后重试", "unknown");
showCustomToast("请求失败,请稍后重试", "general");
}
} else {
showCustomToast("网络异常,请稍后重试", "unknown");
}
}
// 自定义提示函数
function showCustomToast(message, type) {
const config = {
title: message,
icon: "none",
duration: 3000,
};
const config = {
title: message,
icon: "none",
duration: 3000,
};
// 根据错误类型可以添加不同的处理逻辑
switch (type) {
case "timeout":
config.duration = 4000; // 超时提示显示更久
break;
case "network":
config.duration = 5000; // 网络问题提示显示更久
break;
default:
break;
}
// 根据错误类型可以添加不同的处理逻辑
switch (type) {
case "timeout":
config.duration = 4000; // 超时提示显示更久
break;
case "network":
config.duration = 5000; // 网络问题提示显示更久
break;
default:
break;
}
uni.showToast(config);
uni.showToast(config);
}
// 获取全局配置
export const getAppConfig = () => {
return request("GET", "/index/appConfig");
};
export const getDailyCountAPI = () => {
return request("GET", "/index/dailyCount", {}, ADDONS_BASE_URL);
return request("GET", "/index/appConfig");
};
export const getHomeData = (seasonId) => {
return request("GET", `/user/myHome?seasonId=${seasonId}`);
return request("GET", `/user/myHome?seasonId=${seasonId}`);
};
export const getProvinceData = () => {
return request("GET", "/index/provinces/list");
return request("GET", "/index/provinces/list");
};
export const loginAPI = async (phone, nickName, avatarData, code) => {
const result = await request("POST", "/index/code", {
appName: "shoot",
appId: "wxa8f5989dcd45cc23",
nickName,
avatarData,
code,
phone,
});
uni.setStorageSync(
`${uni.getAccountInfoSync().miniProgram.envVersion}_token`,
result.token
);
return result;
};
export const silentLoginAPI = async (code) => {
const result = await request("POST", "/index/code", {
appName: "shoot",
appId: "wxa8f5989dcd45cc23",
code,
});
uni.setStorageSync(
`${uni.getAccountInfoSync().miniProgram.envVersion}_token`,
result.token
);
return result;
};
export const checkUserBindAPI = async (code) => {
return request("POST", "/index/checkBind", {
appName: "shoot",
appId: "wxa8f5989dcd45cc23",
code,
});
export const loginAPI = async (nickName, avatarData, code) => {
const result = await request("POST", "/index/code", {
appName: "shoot",
appId: "wxa8f5989dcd45cc23",
nickName,
avatarData,
code,
});
uni.setStorageSync(
`${uni.getAccountInfoSync().miniProgram.envVersion}_token`,
result.token
);
return result;
};
export const bindDeviceAPI = (device) => {
return request("POST", "/user/device/bindDevice", {
device,
});
};
export const bindDeviceAPIV2 = (token) => {
return request("POST", "/user/device/bindDevice/v2", {
token: token,
});
return request("POST", "/user/device/bindDevice", {
device,
});
};
export const unbindDeviceAPI = (deviceId) => {
return request("POST", "/user/device/unbindDevice", {
deviceId,
});
return request("POST", "/user/device/unbindDevice", {
deviceId,
});
};
export const getMyDevicesAPI = () => {
// "/user/device/getBinding?deviceId=9ZF9oVXs"
return request("GET", "/user/device/getBindings");
// "/user/device/getBinding?deviceId=9ZF9oVXs"
return request("GET", "/user/device/getBindings");
};
export const createPractiseAPI = (arrows, time, target) => {
return request("POST", "/user/practice/create", {
shootNumber: arrows,
shootTime: time,
targetType: target * 20,
});
};
export const startPractiseAPI = () => {
return request("POST", "/user/practice/begin");
};
export const endPractiseAPI = () => {
return request("POST", "/user/practice/stop");
export const createPractiseAPI = (arrows) => {
return request("POST", "/user/practice/create", {
arrows,
});
};
export const getPractiseAPI = async (id) => {
return request("GET", `/user/practice/get?id=${id}`);
const result = await request("GET", `/user/practice/get?id=${id}`);
const data = { ...(result.UserPracticeRound || {}) };
if (data.arrows) data.arrows = JSON.parse(data.arrows);
return data;
};
export const createRoomAPI = (gameType, teamSize, targetType) => {
return request("POST", "/user/createroom", {
gameType,
teamSize,
targetType,
});
export const createRoomAPI = (gameType, teamSize) => {
return request("POST", "/user/createroom", {
gameType,
teamSize,
});
};
export const getRoomAPI = (number) => {
return request("GET", `/user/room?number=${number}`);
return request("GET", `/user/room?number=${number}`);
};
export const joinRoomAPI = (number) => {
return request("POST", `/user/room/join`, {number});
return request("POST", `/user/room/join`, { number });
};
export const destroyRoomAPI = (roomNumber) => {
return request("POST", "/user/room/destroyRoom", {
roomNumber,
});
return request("POST", "/user/room/destroyRoom", {
roomNumber,
});
};
export const exitRoomAPI = (number, userId) => {
return request("POST", "/user/room/exitRoom", {
number,
userId,
});
export const exitRoomAPI = (number) => {
return request("POST", "/user/room/exitRoom", {
number,
});
};
export const startRoomAPI = (number) => {
return request("POST", "/user/room/start", {number});
return request("POST", "/user/room/start", { number });
};
export const getPractiseResultListAPI = async (page = 1, page_size = 15) => {
const reuslt = await request(
"GET",
`/user/practice/list?page=${page}&page_size=${page_size}`
);
return reuslt.list;
const reuslt = await request(
"GET",
`/user/practice/list?page=${page}&page_size=${page_size}`
);
return reuslt.list;
};
export const matchGameAPI = (match, gameType, teamSize) => {
return request("POST", "/user/game/match", {
match,
gameType,
teamSize,
readyTime: 15,
targetType: 20,
});
return request("POST", "/user/game/match", {
match,
gameType,
teamSize,
});
};
export const readyGameAPI = (battleId) => {
return request("POST", "/user/game/prepare", {
battleId,
return request("POST", "/user/game/prepare", {
battleId,
});
};
export const getGameAPI = async (battleId) => {
const result = await request("POST", "/user/battle/detail", {
id: battleId,
});
if (!result.battleStats) return {};
const {
battleStats = {},
playerStats = {},
goldenRoundRecords = [],
} = result;
const data = {
id: battleId,
mode: battleStats.mode, // 1.几V几 2.大乱斗
gameMode: battleStats.gameMode, // 1.约战 2.排位
teamSize: battleStats.teamSize,
};
if (battleStats && battleStats.mode === 1) {
data.winner = battleStats.winner;
data.roundsData = {};
data.redPlayers = {};
data.bluePlayers = {};
data.mvps = [];
data.goldenRounds =
goldenRoundRecords && goldenRoundRecords.length ? goldenRoundRecords : [];
playerStats.forEach((item) => {
const { playerBattleStats = {}, roundRecords = [] } = item;
if (playerBattleStats.team === 0) {
data.redPlayers[playerBattleStats.playerId] = playerBattleStats;
}
if (playerBattleStats.team === 1) {
data.bluePlayers[playerBattleStats.playerId] = playerBattleStats;
}
if (playerBattleStats.mvp) {
data.mvps.push(playerBattleStats);
}
roundRecords.forEach((round) => {
data.roundsData[round.roundNumber] = {
...data.roundsData[round.roundNumber],
[round.playerId]: round.arrowHistory,
};
});
});
const totalRounds = Object.keys(data.roundsData).length;
(goldenRoundRecords || []).forEach((item, index) => {
item.arrowHistory.forEach((arrow) => {
if (!data.roundsData[totalRounds + index + 1]) {
data.roundsData[totalRounds + index + 1] = {};
}
if (!data.roundsData[totalRounds + index + 1][arrow.playerId]) {
data.roundsData[totalRounds + index + 1][arrow.playerId] = [];
}
data.roundsData[totalRounds + index + 1][arrow.playerId].push(arrow);
});
});
data.mvps.sort((a, b) => b.totalRings - a.totalRings);
}
if (battleStats && battleStats.mode === 2) {
data.players = [];
playerStats.forEach((item) => {
data.players.push({
...item.playerBattleStats,
arrowHistory: item.roundRecords[0].arrowHistory,
});
});
data.players = data.players.sort((a, b) => b.totalScore - a.totalScore);
}
// console.log("game result:", result);
// console.log("format data:", data);
return data;
};
export const simulShootAPI = (device_id, x, y) => {
const data = {
device_id,
};
if (x !== undefined && y !== undefined) {
data.x = x;
data.y = y;
}
return request("POST", "/index/arrow", data);
const data = {
device_id,
};
if (x !== undefined && y !== undefined) {
data.x = x;
data.y = y;
}
return request("POST", "/index/arrow", data);
};
export const getBattleListAPI = async (page, battleType) => {
const result = await request("POST", "/user/battle/details/list", {
page,
pageSize: 10,
battleType,
const data = [];
const result = await request("POST", "/user/battle/details/list", {
page,
battleType,
modeType: 0,
});
(result.Battles || []).forEach((item) => {
let name = "";
if (item.battleStats.mode === 1) {
name = `${item.playerStats.length / 2}V${item.playerStats.length / 2}`;
}
if (item.battleStats.mode === 2) {
name = `${item.playerStats.length}人大乱斗`;
}
data.push({
name,
battleId: item.battleStats.battleId,
mode: item.battleStats.mode,
createdAt: item.battleStats.createdAt,
gameEndAt: item.battleStats.gameEndAt,
winner: item.battleStats.winner,
players: item.playerStats
.map((p) => p.playerBattleStats)
.sort((a, b) => b.totalScore - a.totalScore),
redPlayers: item.playerStats
.filter((p) => p.playerBattleStats.team === 0)
.map((p) => p.playerBattleStats),
bluePlayers: item.playerStats
.filter((p) => p.playerBattleStats.team === 1)
.map((p) => p.playerBattleStats),
});
return result.list;
});
return data;
};
export const getRankListAPI = () => {
return request("GET", "/index/ranklist");
return request("GET", "/index/ranklist");
};
export const createOrderAPI = (vipId) => {
return request("POST", "/user/order/create", {
vipId,
quanity: 1,
tradeType: "mini",
payType: "wxpay",
returnUrl: "",
remark: "",
mockTest: false,
});
return request("POST", "/user/order/create", {
vipId,
quanity: 1,
tradeType: "mini",
payType: "wxpay",
});
};
export const payOrderAPI = (id) => {
return request("POST", "/user/order/pay", {
id,
tradeType: "mini",
payType: "wxpay",
});
return request("POST", "/user/order/pay", {
id,
tradeType: "mini",
payType: "wxpay",
});
};
export const getOrderListAPI = async (page) => {
const reuslt = await request("GET", `/user/order/list?page=${page}`);
return reuslt.items || [];
const reuslt = await request("GET", `/user/order/list?page=${page}`);
return reuslt.items || [];
};
export const cancelOrderListAPI = async (id) => {
return request("POST", "/user/order/cancelOrder", {id});
return request("POST", "/user/order/cancelOrder", { id });
};
export const getUserGameState = () => {
return request("GET", "/user/state");
export const isGamingAPI = async () => {
const result = await request("GET", "/user/isGaming");
return result.gaming || false;
};
export const getCurrentGameAPI = async () => {
uni.$emit("update-header-loading", true);
const result = await request("GET", "/user/join/battle");
return result.currentGame || {};
};
export const getPointBookConfigAPI = async () => {
return request("GET", "/user/score/sheet/option");
return request("GET", "/user/score/sheet/option");
};
export const savePointBookAPI = async (
bowType,
distance,
targetType,
groups,
arrows,
data = []
) => {
return request("POST", "/user/score/sheet/report", {
bowType,
distance,
targetType,
groups,
arrows,
data = []
) => {
return request("POST", "/user/score/sheet/report", {
bowType,
distance,
targetType,
groups,
arrows,
group_data: data.map((item) =>
item.map((i) => ({
...i,
ring: i.ring === "M" ? -1 : i.ring === "X" ? 0 : Number(i.ring),
}))
),
});
group_data: data.map((item) =>
item.map((i) => ({
...i,
ring: i.ring === "M" ? -1 : i.ring === "X" ? 0 : Number(i.ring),
}))
),
});
};
export const getPointBookListAPI = async (
page = 1,
bowType,
distance,
targetType
page = 1,
bowType,
distance,
targetType
) => {
let url = `/user/score/sheet/list?pageNum=${page}&pageSize=10`;
if (bowType) url += `&bowType=${bowType}`;
if (distance) url += `&distance=${distance}`;
if (targetType) url += `&targetType=${targetType}`;
const result = await request("GET", url);
return result.list || [];
let url = `/user/score/sheet/list?pageNum=${page}&pageSize=10`;
if (bowType) url += `&bowType=${bowType}`;
if (distance) url += `&distance=${distance}`;
if (targetType) url += `&targetType=${targetType}`;
const result = await request("GET", url);
return result.list || [];
};
export const getPointBookDetailAPI = async (id) => {
return request("GET", `/user/score/sheet/detail?id=${id}`);
return request("GET", `/user/score/sheet/detail?id=${id}`);
};
export const getPointBookDataAPI = async () => {
return request("GET", "/user/score/sheet/statistics");
return request("GET", "/user/score/sheet/statistics");
};
export const getPractiseDataAPI = async () => {
return request("GET", "/user/practice/statistics");
return request("GET", "/user/practice/statistics");
};
export const getBattleDataAPI = async () => {
return request("GET", "/user/fight/statistics");
return request("GET", "/user/fight/statistics");
};
export const chooseTeamAPI = async (number, group) => {
return request("POST", "/user/room/group", {number, group});
return request("POST", "/user/room/group", { number, group });
};
export const getVIPDescAPI = async () => {
return request("GET", "/index/memberVipDescribe");
return request("GET", "/index/memberVipDescribe");
};
export const getPointBookStatisticsAPI = async () => {
return request("GET", `/v2/user/score/sheet/statistics`);
return request("GET", `/v2/user/score/sheet/statistics`);
};
export const donateAPI = async (amount, name, phone, organizer, advice) => {
return request("POST", `/user/donate`, {
amount,
name,
phone,
organizer,
advice,
});
return request("POST", `/user/donate`, {
amount,
name,
phone,
organizer,
advice,
});
};
export const laserAimAPI = async () => {
return request("POST", "/user/device/laserAim");
return request("POST", "/user/device/laserAim");
};
export const laserCloseAPI = async () => {
return request("POST", "/user/device/closeAim");
return request("POST", "/user/device/closeAim");
};
export const getDeviceBatteryAPI = async () => {
return request("GET", "/user/device/battery");
return request("GET", "/user/device/battery");
};
export const addNoteAPI = async (id, remark) => {
return request("POST", "/user/score/sheet/remark", {id, remark});
return request("POST", "/user/score/sheet/remark", { id, remark });
};
export const removePointRecord = async (id) => {
return request("DELETE", `/user/score/sheet/delete?id=${id}`);
};
export const getPhoneNumberAPI = (data) => {
return request("POST", "/index/getPhone", data);
};
export const getPointBookRankListAPI = (page = 1) => {
return request(
"GET",
`/user/score/sheet/week/shoot/rank/list?pageNum=${page}&pageSize=100`
);
};
export const clickLikeAPI = (userId, ifLike) => {
return request("POST", "/user/score/sheet/week/shoot/rank/like", {
userId,
ifLike,
});
};
export const getMyLikeList = (page = 1, pageSize = 10) => {
return request(
"GET",
`/user/score/sheet/week/shoot/rank/like/list?pageNum=${page}&pageSize=${pageSize}`
);
};
export const getReadyAPI = (roomId) => {
return request("POST", `/user/room/ready`, {
roomId,
});
};
export const getBattleAPI = async (battleId) => {
return request("POST", "/user/match/info", {
id: battleId,
});
};
export const kickPlayerAPI = (number, userId) => {
return request("POST", "/user/room/kicking", {
number,
userId,
});
};
// 获取赛季列表
export const getSeasonList = () => {
return request("GET", "/index/season/list");
};
// 获取赛季统计
export const getSeasonStats = (seasonId) => {
const data = {};
if (seasonId !== undefined && seasonId !== null) data.seasonId = seasonId;
return request("GET", "/index/season/stats", data);
};
//获取积分榜
export const getScoreRankList = (seasonId, page, perPage) => {
return request("GET", "/index/score/rank/list", {
seasonId,
page,
perPage
});
};
// 获取10环排行榜
export const getTenRingRankList = (seasonId, page, perPage) => {
return request("GET", "/index/tenRing/rank/list", {
seasonId,
page,
perPage
});
};
// 获取MVP排行榜
export const getMvpRankList = (seasonId, page, perPage) => {
return request("GET", "/index/mvp/rank/list", {
seasonId,
page,
perPage
});
};
// 获取我的积分排名
export const getMyScoreRank = (seasonId) => {
const data = {};
if (seasonId !== undefined && seasonId !== null) data.seasonId = seasonId;
return request("GET", "/index/myScoreRank", data);
};
// 获取我的MVP排名
export const getMyMvpRank = (seasonId) => {
const data = {};
if (seasonId !== undefined && seasonId !== null) data.seasonId = seasonId;
return request("GET", "/index/myMvpRank", data);
};
// 获取我的10环排名
export const getMyTenRingRank = (seasonId) => {
const data = {};
if (seasonId !== undefined && seasonId !== null) data.seasonId = seasonId;
return request("GET", "/index/myTenRingRank", data);
return request("DELETE", `/user/score/sheet/delete?id=${id}`);
};
+106 -786
View File
File diff suppressed because it is too large Load Diff
-1020
View File
File diff suppressed because it is too large Load Diff
+13 -27
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,51 +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 === 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>
@@ -79,7 +65,7 @@ const props = defineProps({
.bg-image {
width: 100%;
/* height: 100%; */
height: 100%;
}
.bg-overlay {
+9 -11
View File
@@ -1,4 +1,5 @@
<script setup>
const tabs = [
{ image: "../static/tab-vip.png" },
{ image: "../static/tab-point-book.png" },
@@ -8,7 +9,7 @@ const tabs = [
function handleTabClick(index) {
if (index === 0) {
uni.navigateTo({
url: "/pages/member/be-vip",
url: "/pages/be-vip",
});
}
if (index === 1) {
@@ -31,9 +32,9 @@ function handleTabClick(index) {
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>
+25 -76
View File
@@ -1,90 +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 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 uni.$checkAudio();
if (result.mode <= 3) {
await navigateOnce(`/pages/team-battle/index?battleId=${result.matchId}`);
} else {
await navigateOnce(`/pages/melee-battle?battleId=${result.matchId}`);
}
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);
@@ -95,19 +55,10 @@ onBeforeUnmount(() => {
</script>
<template>
<view
v-if="game.inBattle || game.roomID"
class="back-to-game"
@click="onClick"
>
<view v-if="show" class="back-to-game" @click="onClick">
<image src="../static/back-to-game-bg.png" mode="widthFix" />
<block v-if="game.inBattle">
<image src="../static/pk-icon.png" mode="widthFix" />
<text>返回进行中的对局</text>
</block>
<block v-else-if="game.roomID">
<text>返回房间</text>
</block>
<image src="../static/pk-icon.png" mode="widthFix" />
<text>返回进行中的对局</text>
<image src="../static/back.png" mode="widthFix" />
</view>
</template>
@@ -127,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;
+32 -28
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,16 +15,15 @@ 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>
@@ -38,7 +36,7 @@ const normalRounds = computed(() => {
transform: 'scale(0.8) translateX(10px)',
}"
>
<BowPower />
<BowPower :power="power" />
</view>
</view>
<view>
@@ -49,9 +47,15 @@ const normalRounds = computed(() => {
<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>
+23 -76
View File
@@ -27,14 +27,6 @@ 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>
@@ -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,63 +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
@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>
@@ -186,21 +144,17 @@ const isMember = (player = {}) => player.vip === true || player.sVip === true;
justify-content: center;
}
.players-melee {
display: flex;
height: 80px;
width: 100%;
overflow-x: auto;
}
.players-melee::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
/* 小程序 scroll-view 不支持直接 flex,通过内层 wrapper 承载横向排列 */
.players-melee-inner {
display: flex;
height: 100%;
flex-wrap: nowrap;
}
.players-melee-inner > view {
.players-melee > view {
display: flex;
flex-direction: column;
align-items: center;
@@ -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>
-387
View File
@@ -1,387 +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,
},
hitOffsetPx: {
type: Number,
default: 0,
},
});
const emit = defineEmits(["complete", "impact"]);
const phase = ref("idle");
const activePlayKey = ref("");
const animationKey = ref("");
const impactEmitted = ref(false);
let timers = [];
const isActive = computed(() => phase.value !== "idle");
const ARROW_IMPACT_MS = 340;
const COMPLETE_FALLBACK_MS = 980;
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);
return {
width: Number.isFinite(width) && width > 0 ? width : 0,
height: Number.isFinite(height) && height > 0 ? height : 0,
};
});
const shotPoint = computed(() => {
const x = Number(props.shot?.x);
const y = Number(props.shot?.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 arrowAngle = computed(() => {
const size = safeTargetSize.value;
if (!size.width || !size.height) {
const dx = hitPercent.value.left - 50;
const dy = 114 - hitPercent.value.top;
const fallbackAngle = Math.atan2(dx, dy || 1) * (180 / Math.PI);
return Math.max(-18, Math.min(18, fallbackAngle));
}
const startX = size.width * 0.5;
const startY = 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 = startY - endY;
const angle = Math.atan2(dx, dy || 1) * (180 / Math.PI);
return Math.max(-18, Math.min(18, angle));
});
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;
let x = getTargetTranslate(hitPercent.value.left - 50);
let y = getTargetTranslate(hitPercent.value.top - 114);
if (size.width && size.height) {
const startX = size.width * 0.5;
const startY = 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;
x = `${endX - startX}px`;
y = `${endY - startY}px`;
}
return {
"--shot-tx": x,
"--shot-ty": y,
"--shot-angle": `${arrowAngle.value}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 = "";
emit("complete", playKey);
}
function play() {
if (!props.playKey || !props.shot || !props.shot.ring) return;
clearTimers();
activePlayKey.value = props.playKey;
animationKey.value = `${props.playKey}`;
impactEmitted.value = false;
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="../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="../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: 50%;
top: 114%;
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>
+97 -544
View File
@@ -1,9 +1,7 @@
<script setup>
import { ref, watch, onMounted, onBeforeUnmount, computed, nextTick } from "vue";
import PointSwitcher from "@/components/PointSwitcher.vue";
import BowShotEffect from "@/components/BowShotEffect.vue";
import { MESSAGETYPES, MESSAGETYPESV2 } from "@/constants";
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";
@@ -19,6 +17,14 @@ const props = defineProps({
type: Number,
default: 0,
},
avatar: {
type: String,
default: "",
},
power: {
type: Number,
default: 0,
},
scores: {
type: Array,
default: () => [],
@@ -27,155 +33,36 @@ const props = defineProps({
type: Array,
default: () => [],
},
isSvip: {
type: Boolean,
default: false,
},
mode: {
type: String,
default: "solo", // solo 单排,team 双排
},
// 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 shakeTimer = ref(null);
const ROUND_TIP_OFFSET_Y = -32;
const EXPERIENCE_TIP_OFFSET_Y = -68;
function buildShotEffectKey(team, shot, index) {
return [
team,
index,
shot?.playerId ?? "",
shot?.x ?? "",
shot?.y ?? "",
shot?.ring ?? "",
shot?.ringX ? 1 : 0,
].join("-");
}
function shouldPlayShotEffect(shot) {
return props.isSvip && !!shot && Number(shot.ring) > 0;
}
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 shouldHideRedHit(index) {
return !!hiddenRedLatestKey.value && index === props.scores.length - 1;
}
function shouldHideBlueHit(index) {
return !!hiddenBlueLatestKey.value && index === props.blueScores.length - 1;
}
watch(
() => props.scores,
(newVal) => {
if (newVal.length - prevScores.value.length === 1) {
const latestShot = newVal[newVal.length - 1];
if (shouldPlayShotEffect(latestShot)) {
triggerShotEffect("red", latestShot, newVal.length - 1);
} else {
showShotTip("red", latestShot);
}
} else if (newVal.length <= prevScores.value.length) {
latestOne.value = null;
hiddenRedLatestKey.value = "";
if (shotEffect.value?.team === "red") shotEffect.value = null;
latestOne.value = newVal[newVal.length - 1];
if (timer.value) clearTimeout(timer.value);
timer.value = setTimeout(() => {
latestOne.value = null;
}, 1000);
}
prevScores.value = [...newVal];
},
@@ -188,16 +75,11 @@ watch(
() => props.blueScores,
(newVal) => {
if (newVal.length - prevBlueScores.value.length === 1) {
const latestShot = newVal[newVal.length - 1];
if (shouldPlayShotEffect(latestShot)) {
triggerShotEffect("blue", latestShot, newVal.length - 1);
} else {
showShotTip("blue", latestShot);
}
} else if (newVal.length <= prevBlueScores.value.length) {
bluelatestOne.value = null;
hiddenBlueLatestKey.value = "";
if (shotEffect.value?.team === "blue") shotEffect.value = null;
bluelatestOne.value = newVal[newVal.length - 1];
if (timer.value) clearTimeout(timer.value);
timer.value = setTimeout(() => {
bluelatestOne.value = null;
}, 1000);
}
prevBlueScores.value = [...newVal];
},
@@ -206,276 +88,108 @@ watch(
}
);
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 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);
});
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);
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)"
>{{ latestOne.ringX ? "X" : latestOne.ring || "未上靶"
}}<text v-if="latestOne.ring"></text>
</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)"
>{{ bluelatestOne.ringX ? "X" : bluelatestOne.ring || "未上靶"
}}<text v-if="bluelatestOne.ring">环</text></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"
@impact="shakeTarget"
@complete="completeShotEffect"
/>
<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>
</view>
<!-- <text :style="{ color: '#fff', wordBreak: 'break-all' }">{{
scores.length ? scores[scores.length - 1] : ""
}}</text> -->
<!-- <StartCountdown :start="startCount" /> -->
</view>
</template>
@@ -485,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;
@@ -515,6 +221,8 @@ onBeforeUnmount(() => {
}
.round-tip {
position: absolute;
/* top: 38%; */
/* left: 60%; */
color: #fff;
font-size: 30px;
font-weight: bold;
@@ -526,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%;
@@ -662,7 +285,6 @@ onBeforeUnmount(() => {
padding: 0 10px;
display: flex;
margin-top: -40px;
justify-content: flex-end;
}
.footer > image {
width: 40px;
@@ -673,10 +295,9 @@ onBeforeUnmount(() => {
}
.simul {
position: absolute;
top: 0;
bottom: 40px;
right: 20px;
margin-left: 20px;
z-index: 999;
}
.simul > button {
color: #fff;
@@ -693,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");
+61 -183
View File
@@ -1,13 +1,12 @@
<script setup>
import { ref, computed, onMounted, onBeforeUnmount } 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 AudioManager from "@/audioManager";
import { getCurrentGameAPI } from "@/apis";
import { debounce } from "@/util";
const props = defineProps({
title: {
type: String,
@@ -21,9 +20,9 @@ const props = defineProps({
type: Function,
default: null,
},
scroll: {
type: Boolean,
default: true,
overflow: {
type: String,
default: "auto",
},
isHome: {
type: Boolean,
@@ -41,22 +40,11 @@ const props = defineProps({
type: Boolean,
default: true,
},
titleStyle: {
type: [String, Object, Array],
default: () => ({}),
},
showBottom: {
type: Boolean,
default: true,
},
});
const isIOS = uni.getDeviceInfo().osName === "ios";
const showHint = ref(false);
const hintType = ref(0);
const capsuleHeight = ref(0);
const isLoading = ref(false);
const audioInitProgress = ref(1);
const audioProgress = ref(0);
const audioTimer = ref(null);
const showGlobalHint = (type) => {
hintType.value = type;
@@ -67,69 +55,53 @@ const hideGlobalHint = () => {
showHint.value = false;
};
const restart = () => {
uni.restartMiniProgram({
path: "/pages/index",
});
};
const checkAudioProgress = async () => {
return new Promise((resolve, reject) => {
try {
audioInitProgress.value = AudioManager.getLoadProgress();
if (audioInitProgress.value === 1) return resolve();
audioTimer.value = setInterval(() => {
audioProgress.value = AudioManager.getLoadProgress();
if (audioProgress.value === 1) {
setTimeout(() => {
audioInitProgress.value = 1;
}, 200);
clearInterval(audioTimer.value);
resolve();
}
}, 200);
} catch (err) {
reject(err);
}
});
};
const audioFinalProgress = computed(() => {
const left = 1 - audioInitProgress.value;
return Math.max(0, (audioProgress.value - audioInitProgress.value) / left);
});
onBeforeUnmount(() => {
if (audioTimer.value) clearInterval(audioTimer.value);
onMounted(() => {
const menuBtnInfo = uni.getMenuButtonBoundingClientRect();
capsuleHeight.value = menuBtnInfo.top - 9;
});
onShow(() => {
uni.$showHint = showGlobalHint;
uni.$hideHint = hideGlobalHint;
uni.$checkAudio = checkAudioProgress;
showHint.value = false;
});
const backToGame = debounce(async () => {
if (isLoading.value) return; // 防止重复点击
try {
isLoading.value = true;
const result = await getBattleAPI();
if (result && result.matchId) {
await checkAudioProgress();
if (result.mode <= 3) {
uni.navigateTo({
url: `/pages/team-battle/index?battleId=${result.matchId}`,
});
} else {
uni.navigateTo({
url: `/pages/melee-battle?battleId=${result.matchId}`,
});
}
// 设置请求超时
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;
}
@@ -138,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>
@@ -159,28 +120,16 @@ const goCalibration = async () => {
:title="title"
:onBack="onBack"
:whiteBackArrow="whiteBackArrow"
:titleStyle="titleStyle"
/>
<BackToGame v-if="showBackToGame" />
<scroll-view
: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">
@@ -190,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>
@@ -211,41 +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="audioInitProgress < 1" class="audio-progress">
<image
src="https://static.shelingxingqiu.com/attachment/2025-11-26/deihtj15xjwcz3c1tx.png"
mode="widthFix"
/>
<view>
<view :style="{ width: `${audioFinalProgress * 100}%` }">
<!-- <image
src="https://static.shelingxingqiu.com/attachment/2025-11-24/degu91a7si77sg9jqv.png"
mode="widthFix"
/> -->
</view>
</view>
<view>
<text>若加载时间过长</text>
<button hover-class="none" @click="restart">点击这里重启</button>
</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;
@@ -283,62 +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 {
background: #ffe431;
min-height: 6rpx;
border-radius: 4rpx;
display: flex;
align-items: center;
justify-content: flex-end;
transition: width 0.5s ease;
}
.audio-progress > view:nth-child(2) > view > image {
width: 46rpx;
height: 26rpx;
}
.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;
}
.audio-progress > view:nth-child(3) > button {
font-size: 22rpx;
color: #ffe431;
line-height: 32rpx;
padding: 20rpx 0;
}
</style>
+92 -112
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,20 +10,14 @@ 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;
}
@@ -40,79 +27,79 @@ const createRoom = debounce(async () => {
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);
uni.navigateTo({
url: "/pages/battle-room?roomNumber=" + result.number + "&target=" + targetMode.value,
});
}
} catch (error) {
console.log(error);
} finally {
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="../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 :onClick="() => $clickSound(createRoom)">创建房间</SButton>
</view>
</template>
@@ -123,7 +110,6 @@ const createRoom = debounce(async () => {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 44rpx;
}
.container > image:first-child {
width: 45%;
@@ -138,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;
@@ -200,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>
+2 -2
View File
@@ -23,7 +23,7 @@ const bubbleTypes = [
<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>
+89 -74
View File
@@ -11,94 +11,91 @@ 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>
@@ -110,20 +107,37 @@ onBeforeUnmount(() => {
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="../static/common/dialog-light.png"
mode="widthFix"
/>
<image
class="dialog-icon"
src="../static/common/dialog-icon.png"
mode="widthFix"
/>
<view class="dialog-panel">
<image
class="dialog-bg"
src="../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>
-396
View File
@@ -1,396 +0,0 @@
<script setup>
import { computed } from "vue";
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)));
</script>
<template>
<view v-if="visible" class="ota-mask">
<!-- 图标 + 弹窗卡片 容器 -->
<view
class="ota-outer"
:class="isNewVersion ? 'outer-new' : 'outer-result'"
>
<!-- 悬浮图标溢出卡片顶部 -->
<image
v-if="isNewVersion"
src="../static/ota/ota-mascot.png"
mode="aspectFit"
class="float-icon float-mascot"
/>
<image
v-else-if="isSuccess"
src="../static/ota/check-char.png"
mode="aspectFit"
class="float-icon float-check"
/>
<image
v-else-if="isFailure"
src="../static/ota/close-char.png"
mode="aspectFit"
class="float-icon float-close"
/>
<image
v-else-if="isProgress"
src="../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="../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="../static/ota/new-ver.png" mode="aspectFit" class="new-ver-img" />
<view v-if="version" class="version-tag-wrap">
<image src="../static/ota/ota-ver.png" mode="aspectFill" 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="emit('update')">
<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="../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="../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="../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 && !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;
/* 离标题图 -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 arrow.ring ? `${arrow.ring}` : "-";
};
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>
+29 -84
View File
@@ -1,6 +1,4 @@
<script setup>
import Avatar from "@/components/Avatar.vue";
const props = defineProps({
total: {
type: Number,
@@ -10,15 +8,6 @@ const props = defineProps({
type: Array,
default: () => [],
},
removePlayer: {
type: Function,
default: () => {},
},
/** 当前用户是否为房主;仅房主可见踢人按钮 */
isOwner: {
type: Boolean,
default: false,
},
});
const seats = new Array(props.total).fill(1);
</script>
@@ -27,16 +16,11 @@ const seats = new Array(props.total).fill(1);
<view class="players">
<view v-for="(_, index) in seats" :key="index">
<image src="../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
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>
@@ -44,69 +28,48 @@ const seats = new Array(props.total).fill(1);
players[index].name
}}</text>
<text v-else :style="{ color: '#fff9' }">虚位以待</text>
<view v-if="index === 0" class="founder">管理员</view>
<!-- <image
<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;
}
.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;
.players > view > image:nth-child(2) {
width: 40px;
height: 40px;
min-height: 40px;
margin: 0 10px;
border: 1px solid #fff;
border-radius: 50%;
}
.players > view > text:nth-child(3) {
width: 20vw;
@@ -117,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>
+26 -37
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">
<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>
+1 -1
View File
@@ -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%;
+4 -6
View File
@@ -9,7 +9,7 @@ const props = defineProps({
type: Number,
default: 0,
},
arrows: {
scores: {
type: Array,
default: () => [],
},
@@ -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>
+15 -12
View File
@@ -1,6 +1,6 @@
<script setup>
const props = defineProps({
arrows: {
scores: {
type: Array,
default: () => [],
},
@@ -10,34 +10,37 @@ const getSum = (a, b, c) => {
return sum > 0 ? sum + "环" : "-";
};
const roundsName = ["第一轮", "第二轮", "第三轮", "第四轮"];
const getShowText = (arrow = {}) => {
return arrow.ring ? (arrow.ringX ? "X" : arrow.ring + "环") : "-";
};
</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>
+41 -71
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,38 +45,22 @@ 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.ringX) return "X";
return arrow.ring ? arrow.ring : "-";
};
const arrows = computed(() => {
const data = new Array(props.total).fill({ ring: 0 });
(props.result.details || []).forEach((arrow, index) => {
data[index] = arrow;
});
return data;
});
const validArrows = computed(() => arrows.value.filter((a) => !!a.ring).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>
@@ -83,8 +69,8 @@ const openCoachComment = () => {
<image :src="tipSrc" 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>
@@ -105,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>
@@ -143,35 +128,28 @@ const openCoachComment = () => {
}}</text
>环的成绩所有箭支上靶后的平均点间距为<text
:style="{ color: '#fed847' }"
>{{ Number((result.average_distance || 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)"
/>
@@ -191,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;
@@ -248,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%;
@@ -269,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>
+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;
+82 -83
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,22 +35,17 @@ const props = defineProps({
type: Boolean,
default: false,
},
onStop: {
type: Function,
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,
@@ -61,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;
@@ -80,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);
}
},
{
@@ -121,62 +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) {
halfTime.value = false;
audioManager.play("比赛开始");
} else if (msg.type === MESSAGETYPESV2.BattleEnd) {
audioManager.play("比赛结束", 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.playerId !== 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 !== null)
key.push(`${getDirectionText(arrow.angle)}调整`);
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);
@@ -187,7 +186,7 @@ onBeforeUnmount(() => {
<view class="container" :style="{ display: show ? 'block' : 'none' }">
<view>
<image src="../static/shooter.png" mode="widthFix" />
<text>{{ tipContent }}</text>
<text>{{ start && remain === 0 ? "时间到!" : tips }}</text>
<button hover-class="none" @click="updateSound">
<image
:src="`../static/sound${sound ? '' : '-off'}-yellow.png`"
@@ -201,7 +200,6 @@ onBeforeUnmount(() => {
width: `${(remain / total) * 100}%`,
backgroundColor: barColor,
right: tips.includes('红队') ? 0 : 'unset',
transition: transitionStyle,
}"
/>
<text>剩余{{ remain }}</text>
@@ -256,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 -168
View File
@@ -1,28 +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,
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,
@@ -33,7 +18,6 @@ const props = defineProps({
},
});
const agree = ref(false);
const phone = ref("");
const avatarUrl = ref("");
const nickName = ref("");
const loading = ref(false);
@@ -41,17 +25,6 @@ const handleAgree = () => {
agree.value = !agree.value;
};
async function getphonenumber(e) {
if (e.detail.code) {
const wxResult = await wxLogin();
const result = await getPhoneNumberAPI({
...e.detail,
code: wxResult.code,
});
if (result.phone) phone.value = result.phone;
}
}
function onChooseAvatar(e) {
avatarUrl.value = e.detail.avatarUrl;
}
@@ -60,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: "请选择头像",
@@ -101,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 = () => {
@@ -154,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>
@@ -263,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;
@@ -272,7 +200,7 @@ onShow(() => {
.nickname > text {
width: 20%;
font-size: 14px;
line-height: 120rpx;
line-height: 55px;
}
.avatar > button > text {
color: #fff9;
@@ -281,7 +209,7 @@ onShow(() => {
.nickname > input {
flex: 1;
font-size: 14px;
line-height: 120rpx;
line-height: 55px;
}
.wechat-icon {
width: 24px;
@@ -292,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 {
@@ -306,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>
-197
View File
@@ -1,197 +0,0 @@
<script setup>
import { ref, watch } from "vue";
import SButton from "@/components/SButton.vue";
const props = defineProps({
show: {
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 handleConfirm = () => {
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="() => (selectedTarget = 1)"
>
<text>20厘米全环靶</text>
</view>
<view style="width: 30rpx"></view>
<view
:class="{ 'target-btn': true, 'target-choosen': selectedTarget === 2 }"
@click="() => (selectedTarget = 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>
+37 -25
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,13 +45,19 @@ onBeforeUnmount(() => {
uni.$off("update-timer", updateTimer);
});
async function onReceiveMessage(msg) {
if (Array.isArray(msg)) return;
if (msg.type === MESSAGETYPESV2.TestDistance) {
distance.value = Number((msg.shootData.distance / 100).toFixed(2));
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 () => {
@@ -62,6 +65,7 @@ const simulShoot = async () => {
};
onMounted(() => {
checkConnection();
uni.$on("socket-inbox", onReceiveMessage);
const accountInfo = uni.getAccountInfoSync();
const envVersion = accountInfo.miniProgram.envVersion;
@@ -76,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">
@@ -107,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="../static/test-tip.png" mode="widthFix" />
<view v-if="count >= 0">
<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;
+8 -26
View File
@@ -24,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 = {
@@ -118,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",
@@ -140,7 +122,7 @@ export const getBattleResultTips = (
];
return tests[getRandomIndex(3)];
}
} else {
} else if (mode === 2) {
if (rank <= 3) {
const tests = [
"好成绩!全国排位赛等着你!",
@@ -152,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",
@@ -174,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 -70
View File
@@ -1,74 +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",
"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"]
}
}
+36 -51
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,17 +27,11 @@
"navigationBarTitleText": ""
}
},
{
"path": "pages/team-battle/index"
},
{
"path": "pages/melee-battle"
},
{
"path": "pages/battle-result"
},
{
"path": "pages/friend-battle-result"
"path": "pages/team-battle"
},
{
"path": "pages/point-book-edit"
@@ -55,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"
@@ -69,24 +60,18 @@
{
"path": "pages/user"
},
{
"path": "pages/member/orders"
},
{
"path": "pages/member/order-detail"
},
{
"path": "pages/member/be-vip"
},
{
"path": "pages/member/vip-intro"
},
{
"path": "pages/member/agreement"
},
{
"path": "pages/grade-intro"
},
{
"path": "pages/orders"
},
{
"path": "pages/order-detail"
},
{
"path": "pages/be-vip"
},
{
"path": "pages/grade-intro"
},
{
"path": "pages/rank-intro"
},
@@ -106,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"
@@ -114,27 +105,27 @@
{
"path": "pages/rank-list"
},
{
"path": "pages/team-match"
},
{
"path": "pages/melee-match"
},
{
"path": "pages/match-detail"
},
{
"path": "pages/team-battle/team-bow-data"
},
{
"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",
@@ -144,11 +135,5 @@
"navigationStyle": "custom",
"enablePullDownRefresh": false
},
"easycom": {
"autoscan": true,
"custom": {
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
}
},
"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>
+106 -83
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,108 +16,134 @@ 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="../static/battle-result.png" mode="widthFix" />
<view class="header-solo" v-if="data.mode === 1">
<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="`../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.totalRings">
<view v-if="data.mvps && data.mvps[0].totalRings">
<image src="../static/title-mvp.png" mode="widthFix" />
<text
>斩获<text
@@ -127,22 +153,22 @@ const checkBowData = () => {
margin: '0 3px',
fontWeight: '600',
}"
>{{ data.mvp.totalRings }}</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
>
@@ -161,7 +187,7 @@ const checkBowData = () => {
/>
<image
:src="
getBattleResultTips(data.way, data.mode, {
getBattleResultTips(data.battleMode, data.mode, {
win: ifWin,
})
"
@@ -170,7 +196,7 @@ const checkBowData = () => {
/>
</view>
</block>
<block v-else>
<block v-if="data.mode === 2">
<view class="header-melee">
<view />
<image src="../static/battle-result.png" mode="widthFix" />
@@ -179,11 +205,11 @@ const checkBowData = () => {
<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="../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;
+306 -555
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>
+111 -260
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,18 +12,9 @@ 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,
startPractiseAPI,
endPractiseAPI,
getPractiseAPI,
laserAimAPI,
laserCloseAPI,
} from "@/apis";
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();
@@ -34,7 +25,6 @@ const total = 12;
const stepButtonTexts = [
"开始",
"进入下一个任务",
"我已校准",
"进入下一个任务",
"我准备好了,开始",
"",
@@ -43,250 +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 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) => {
const result = await createPractiseAPI(arrows, 1);
const result = await createPractiseAPI(arrows);
if (result) practiseId.value = result.id;
};
const onOver = async () => {
practiseResult.value = await getPractiseAPI(practiseId.value);
start.value = false;
};
async function onReceiveMessage(msg) {
if (msg.type === MESSAGETYPESV2.ShootResult) {
scores.value = msg.details;
} else if (msg.type === MESSAGETYPESV2.BattleEnd) {
setTimeout(onOver, 1500);
} else if (msg.type === MESSAGETYPESV2.TestDistance && step.value === 3) {
if (msg.shootData.distance / 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(() => {
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();
endPractiseAPI();
});
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 createPractiseAPI(total, 120);
if (result) practiseId.value = result.id;
} 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 = "小试牛刀";
await startPractiseAPI();
await createPractise(total);
scores.value = [];
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 = [];
step.value = 4;
const result = await createPractiseAPI(total, 120);
if (result) practiseId.value = result.id;
step.value = 3;
}
};
</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
@@ -296,86 +208,64 @@ const onClose = async () => {
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"
/>
<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="`../static/${
practiseResult.details.filter(
(arrow) => arrow.x !== -30 && arrow.y !== -30
).length < total
? 'un'
: ''
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>
@@ -387,43 +277,4 @@ const onClose = async () => {
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
+88 -228
View File
@@ -1,163 +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 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;
}
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;
}
}
loading.value = true;
uni.navigateTo({
url: "/pages/battle-room?roomNumber=" + number,
});
} finally {
loading.value = false;
}
});
const onCreateRoom = async () => {
if (!canEenter(user.value, device.value, online.value)) return;
const countData = await loadDailyCount();
if (isLimitReached(countData.challenge)) {
showLimitModal.value = true;
const isGaming = await isGamingAPI();
if (isGaming) {
uni.$showHint(1);
return;
}
warnning.value = "";
showModal.value = true;
};
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',
});
};
onShow(async () => {
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>
@@ -177,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>
@@ -190,12 +120,19 @@ 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/attachment/2025-07-15/dbcejys872iyun92h6.png"
mode="widthFix"
/>
<image src="../static/room-notfound-title.png" mode="widthFix" />
<view>
<image :src="user.avatar" mode="widthFix" />
@@ -205,53 +142,22 @@ onLoad(async (options) => {
</view>
</view>
<view>
<view v-if="challengeLimitText" class="pp-text">
{{ challengeLimitText }}
</view>
<SButton width="80%" :rounded="30" :onClick="() => $clickSound(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;
@@ -262,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;
@@ -277,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;
@@ -297,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;
@@ -346,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%;
@@ -367,7 +253,6 @@ onLoad(async (options) => {
align-items: center;
color: #fff9;
}
.my-data {
width: calc(100% - 30px);
margin: 15px;
@@ -377,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;
@@ -392,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;
@@ -426,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 -395
View File
@@ -1,258 +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;
// 使storeToRefsUI
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 (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;
}
// if (path === "/pages/first-try") {
// if (canEenter(user.value, device.value, online.value, path)) {
// await uni.$checkAudio();
// }
// }
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 = () => {
@@ -261,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(() => {
@@ -328,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();
}
}
}
@@ -346,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(() => {
@@ -363,129 +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="../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">
<view @click="$clickSound(() => toPage('/pages/practise'))">
<image src="../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="../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="../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="../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>
@@ -494,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 {
@@ -530,8 +316,6 @@ onShareTimeline(() => {
.bow-card {
width: 50%;
border-radius: 25rpx;
overflow: hidden;
}
.feature-grid > view > image {
@@ -540,7 +324,7 @@ onShareTimeline(() => {
.bow-card > text {
position: absolute;
top: 66%;
top: 65%;
left: 50%;
transform: translate(-50%, -50%);
white-space: nowrap;
@@ -627,7 +411,6 @@ onShareTimeline(() => {
width: 32rpx;
height: 32rpx;
}
.player-avatar > view:first-child {
border-radius: 50%;
background: #777777;
@@ -638,7 +421,6 @@ onShareTimeline(() => {
height: 18px;
color: #fff;
}
.player-avatar > image:last-child {
width: 100%;
height: 100%;
@@ -658,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;
@@ -680,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;
@@ -694,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>
+199 -89
View File
@@ -4,72 +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 show = ref(false);
onLoad(async (options) => {
if (!options.battleId) return;
battleId.value = options.battleId || "60510101693403136";
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;
});
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,
});
});
}
}
});
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}`,
});
@@ -81,14 +100,13 @@ const checkBowData = (selected) => {
<Container title="详情">
<view class="container">
<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' }"
>
@@ -99,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>
+36 -134
View File
@@ -3,126 +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 { matchGameAPI, getBattleAPI } from "@/apis";
import { MESSAGETYPESV2 } from "@/constants";
import { isLimitError } from "@/util";
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);
/** 匹配超时计时器,用于检测 WS 消息丢失或真正超时 */
const matchTimeoutTimer = ref(null);
/** 匹配超时阈值(ms),后端设置 15s 匹配,前端预留 5s 冗余 */
const MATCH_TIMEOUT_MS = 20 * 1000;
/** 清除超时计时器 */
const clearMatchTimeout = () => {
if (matchTimeoutTimer.value) {
clearTimeout(matchTimeoutTimer.value);
matchTimeoutTimer.value = null;
}
};
/**
* 超时处理查询后端是否已分配对局
* - 有对局 WS 消息丢失场景自动跳入
* - 无对局 真正超时提示用户并返回大厅
*/
const handleMatchTimeout = async () => {
try {
const battle = await getBattleAPI();
if (battle && battle.matchId) {
uni.showToast({ title: "匹配成功,正在进入...", icon: "none" });
if (battle.mode <= 3) {
uni.redirectTo({ url: `/pages/team-battle/index?battleId=${battle.matchId}` });
} else {
uni.redirectTo({ url: `/pages/melee-battle?battleId=${battle.matchId}` });
}
} else {
uni.showToast({ title: "匹配超时,请重试", icon: "none" });
try {
if (gameType.value && teamSize.value) {
await matchGameAPI(false, gameType.value, teamSize.value);
}
} catch (_) { /* 取消失败忽略 */ }
uni.navigateBack();
}
} catch (e) {
uni.showToast({ title: "匹配超时,请重试", icon: "none" });
uni.navigateBack();
}
};
async function stopMatch() {
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() {
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) {
if (battle.mode <= 3) {
uni.redirectTo({ url: `/pages/team-battle/index?battleId=${battle.matchId}` });
} else {
uni.redirectTo({ url: `/pages/melee-battle?battleId=${battle.matchId}` });
}
} 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) {
//
clearMatchTimeout();
// 使 mode battle-room.vue
// mode <= 3 mode > 3 gameType1~5
if (msg.mode <= 3) {
uni.redirectTo({
url: `/pages/team-battle/index?battleId=${msg.id}`,
});
} else {
uni.redirectTo({
url: `/pages/melee-battle?battleId=${msg.id}`,
});
}
}
});
}
onLoad(async (options) => {
@@ -137,38 +57,28 @@ onMounted(() => {
keepScreenOn: true,
});
uni.$on("socket-inbox", onReceiveMessage);
uni.$on("cancelMatching", cancelMatch);
});
onBeforeUnmount(() => {
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(async () => {
if (gameType.value && teamSize.value) {
try {
await matchGameAPI(true, gameType.value, teamSize.value);
// WS
clearMatchTimeout();
matchTimeoutTimer.value = setTimeout(handleMatchTimeout, MATCH_TIMEOUT_MS);
} catch (error) {
clearMatchTimeout();
if (isLimitError(error)) {
showLimitModal.value = true;
return;
}
uni.navigateBack();
}
matchGameAPI(true, gameType.value, teamSize.value);
}
});
onHide(() => {
if (gameType.value && teamSize.value) {
matchGameAPI(false, gameType.value, teamSize.value);
}
});
</script>
@@ -178,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>
-375
View File
@@ -1,375 +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 { MESSAGETYPESV2 } from "@/constants";
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 HALF_REST_SECONDS = 20;
const halfRestRemain = ref(HALF_REST_SECONDS);
let halfRestTimer = null;
/** 控制设备离线提示弹窗的显示状态 */
const showOfflineModal = ref(false);
/** 记录每位玩家当前半场连续 10 环及以上次数,key 为 playerId,用于触发 tententen 音效 */
const xRingStreaks = ref({});
function clearHalfRestCountdown() {
if (halfRestTimer) {
clearInterval(halfRestTimer);
halfRestTimer = null;
}
}
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 endTime = Number(battleInfo?.halfRestEndTime ?? battleInfo?.restEndTime);
if (!Number.isFinite(endTime) || endTime <= 0) return HALF_REST_SECONDS;
const timestamp = endTime < 1e12 ? endTime * 1000 : endTime;
const diffSeconds = (timestamp - Date.now()) / 1000;
if (diffSeconds > 0 && diffSeconds <= HALF_REST_SECONDS) {
return Math.ceil(diffSeconds);
}
return HALF_REST_SECONDS;
}
function startHalfRestCountdown(seconds = HALF_REST_SECONDS) {
clearHalfRestCountdown();
halfRestRemain.value = Math.max(0, Math.ceil(Number(seconds) || HALF_REST_SECONDS));
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);
/**
* 监听设备在线状态大乱斗比赛进行中设备离线时弹窗提示用户
*/
watch(online, (newVal, oldVal) => {
if (!newVal && oldVal && start.value === true) {
showOfflineModal.value = true;
}
});
function recoverData(battleInfo, { force = false } = {}) {
if (!battleInfo) return;
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 = [];
}
start.value = battleInfo.status !== 0;
if (battleInfo.status === 0) {
const readyRemain = (Date.now() - (battleInfo.createTime || Date.now())) / 1000;
if (readyRemain > 0 && readyRemain < 15) {
setTimeout(() => uni.$emit("update-timer", 15 - readyRemain - 0.2), 200);
}
return;
}
tips.value =
(battleInfo.rounds.length !== 2 ? "上" : "下") + "半场:请先射6箭";
playersScores.value = battleInfo.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;
}
if (force) {
const remain = (Date.now() - (battleInfo.current?.startTime || Date.now())) / 1000;
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);
}
}
onLoad(async (options) => {
if (options.battleId) battleId.value = options.battleId;
// uni.enableAlertBeforeUnload({
// message: "",
// success: (res) => {
// console.log("");
// },
// });
});
/**
* 检测指定玩家连续 10 环及以上是否达到 3 达到则在环数播报入队后追加 tententen 音效
* @param {number|string} playerId - 本次射手的 ID大乱斗中 ShootResult 保留 playerId
* @param {boolean} isTenPlusRingShot - 本次射击是否为 10 环及以上
*/
function isTenPlusRing(shot) {
return !!(shot?.ringX || Number(shot?.ring) >= 10);
}
function checkAndPlayTententen(playerId, isTenPlusRingShot) {
if (!playerId) return;
const id = parseInt(playerId);
if (isTenPlusRingShot) {
xRingStreaks.value[id] = (xRingStreaks.value[id] || 0) + 1;
// 3 10
if (xRingStreaks.value[id] >= 3) {
xRingStreaks.value[id] = 0;
// nextTick HeaderProgress tententen
nextTick(() => audioManager.play("tententen", false));
}
} else {
// 10
xRingStreaks.value[id] = 0;
}
}
async function onReceiveMessage(msg) {
if (Array.isArray(msg)) return;
if (msg.type === MESSAGETYPESV2.BattleStart) {
clearHalfRestCountdown();
halfTimeTip.value = false;
halfRest.value = false;
recoverData(msg);
} else if (msg.type === MESSAGETYPESV2.ShootResult) {
//
const curRound = playersScores.value[playersScores.value.length - 1] || {};
const prevCounts = {};
for (const pid of Object.keys(curRound)) {
prevCounts[pid] = (curRound[pid] || []).length;
}
recoverData(msg);
// ring
const newRound = playersScores.value[playersScores.value.length - 1] || {};
let shooterId = null;
let isTenPlusRingShot = false;
for (const pid of Object.keys(newRound)) {
const newLen = (newRound[pid] || []).length;
if (newLen > (prevCounts[pid] || 0)) {
shooterId = parseInt(pid);
const shot = newRound[pid][newLen - 1];
isTenPlusRingShot = isTenPlusRing(shot);
break;
}
}
// 10 tententen
checkAndPlayTententen(shooterId, isTenPlusRingShot);
} else if (msg.type === MESSAGETYPESV2.HalfRest) {
halfTimeTip.value = true;
halfRest.value = true;
tips.value = "准备下半场";
startHalfRestCountdown();
} else if (msg.type === MESSAGETYPESV2.BattleEnd) {
setTimeout(() => {
//
uni.redirectTo({
url: "/pages/friend-battle-result?battleId=" + msg.matchId,
});
}, 1000);
}
}
onMounted(async () => {
uni.setKeepScreenOn({
keepScreenOn: true,
});
uni.$on("socket-inbox", onReceiveMessage);
await laserCloseAPI();
});
onBeforeUnmount(() => {
uni.setKeepScreenOn({
keepScreenOn: false,
});
clearHalfRestCountdown();
uni.$off("socket-inbox", onReceiveMessage);
audioManager.stopAll();
});
onShow(async () => {
if (battleId.value) {
const result = await getBattleAPI(battleId.value);
if (!result) return;
if (result.status === 2) {
uni.showToast({
title: "比赛已结束",
icon: "none",
});
uni.navigateBack({
delta: 2,
});
} else {
recoverData(result, { force: true });
}
}
});
</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" />
<ShootProgress
:show="start"
:start="start && !halfRest"
:tips="tips"
:total="90"
:melee="true"
: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"
: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="../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;
};
-885
View File
@@ -1,885 +0,0 @@
<script setup>
import { computed, ref, onBeforeUnmount } from "vue";
import { onShow } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import Signin from "@/components/Signin.vue";
import { createOrderAPI, getAppConfig, getHomeData } from "@/apis";
import { capsuleHeight } 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 timer = ref(null);
const lastDate = ref(user.value.expiredAt || 0);
const maxRefreshTimes = 12;
// 稿
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" },
],
packages: [
{ name: "连续包月", price: "20", original: "35" },
{ name: "12个月", price: "300", original: "420" },
{ name: "3个月", price: "84", original: "105" },
],
},
{
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" },
],
packages: [
{ name: "连续包月", price: "20", original: "35" },
{ name: "12个月", price: "300", original: "420" },
{ name: "3个月", price: "84", original: "105" },
],
},
];
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;
};
// expiredAt
const getLatestVipExpiredTime = (source = user.value) => {
if (!source) return 0;
return Math.max(
toTimestamp(source.normalVipExpiredAt),
toTimestamp(source.superVipExpiredAt),
toTimestamp(source.expiredAt)
);
};
//
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 getMenuPrice = (item) => {
const value = item.price || item.total || item.amount || item.money;
return value ? String(value).replace("¥", "").replace("¥", "") : "";
};
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 getPackageMonths = (name) => {
if (/连续包月/.test(name)) return 1;
const match = String(name || "").match(/(\d+)\s*个?月/);
return match ? Number(match[1]) : 0;
};
const matchPackageSource = (type, pack, index) => {
const menus = configMenus.value;
const typedMenus = menus.filter((item) => {
const menuType = getMenuType(item);
if (type.key === "super") return menuType === "super";
return menuType === "normal";
});
const pool = typedMenus.length ? typedMenus : menus;
const packMonths = getPackageMonths(pack.name);
return (
pool.find((item) => getMenuName(item).indexOf(pack.name) !== -1) ||
pool.find((item) => packMonths && getPackageMonths(getMenuName(item)) === packMonths) ||
pool.find((item) => getMenuPrice(item) === pack.price) ||
pool[index]
);
};
const getPackages = (type) => {
return type.packages.map((item, index) => {
const source = matchPackageSource(type, item, index);
return {
...item,
source,
name: source ? getMenuName(source) || item.name : item.name,
price: source ? getMenuPrice(source) || item.price : item.price,
icon: source && source.icon,
id: source && source.id,
};
});
};
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 clearRefreshTimer = () => {
if (timer.value) {
clearInterval(timer.value);
timer.value = null;
}
};
const refreshUserAfterPay = () => {
clearRefreshTimer();
let refreshTimes = 0;
//
lastDate.value = getLatestVipExpiredTime();
refreshing.value = true;
timer.value = setInterval(async () => {
refreshTimes += 1;
try {
const result = await getHomeData();
const latestExpiredAt = getLatestVipExpiredTime(result.user);
if (result.user && latestExpiredAt > lastDate.value) {
lastDate.value = latestExpiredAt;
updateUser(result.user);
clearRefreshTimer();
refreshing.value = false;
} else if (refreshTimes >= maxRefreshTimes) {
clearRefreshTimer();
refreshing.value = false;
}
} catch (error) {
console.log("refresh user after pay error", error);
if (refreshTimes >= maxRefreshTimes) {
clearRefreshTimer();
refreshing.value = false;
}
}
}, 1000);
};
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;
}
paying.value = true;
let waitingPayment = false;
try {
const result = await createOrderAPI(vipId);
const params = result?.pay?.order?.jsApi?.params;
if (!params?.timeStamp || !params?.nonceStr || !params?.package || !params?.paySign) {
uni.showToast({
title: "支付参数生成失败",
icon: "none",
});
refreshing.value = false;
return;
}
waitingPayment = true;
wx.requestPayment({
timeStamp: params.timeStamp, //
nonceStr: params.nonceStr, //
package: params.package, //
paySign: params.paySign, //
signType: params.signType || "RSA",
success() {
uni.showToast({
title: "支付成功",
icon: "none",
});
refreshUserAfterPay();
},
fail(res) {
console.log("pay error", res);
if (res.errMsg && res.errMsg.indexOf("cancel") !== -1) return;
uni.showToast({
title: "支付失败,请稍后重试",
icon: "none",
});
},
complete() {
paying.value = false;
},
});
} catch (error) {
console.log("create vip order error", error);
} finally {
if (!waitingPayment) paying.value = false;
}
};
onShow(loadVipConfig);
onBeforeUnmount(() => {
clearRefreshTimer();
});
</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.name}`"
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 class="package-origin">
<text>¥{{ pack.original }}</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"
@click="onPay"
>
<text v-if="loadingConfig">加载套餐中</text>
<text v-else-if="paying">创建订单中</text>
<text v-else-if="!refreshing">¥ {{ 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: flex;
width: 984rpx;
padding: 6rpx 84rpx 6rpx 6rpx;
box-sizing: border-box;
}
.package-card {
position: relative;
width: 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"
/>
+40 -209
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,38 +104,12 @@ 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)">
<button hover-class="none" @click="handleScan">
<image src="../static/scan.png" mode="widthFix" />
</button>
<button hover-class="none" @click="showTip = true">
@@ -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>
<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>
<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>
+61 -92
View File
@@ -1,6 +1,5 @@
<script setup>
import { onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import Avatar from "@/components/Avatar.vue";
import BowData from "@/components/BowData.vue";
@@ -18,7 +17,7 @@ const practiseList = ref([]);
const toMatchDetail = (id) => {
uni.navigateTo({
url: `/pages/match-detail?battleId=${id}`,
url: `/pages/match-detail?id=${id}`,
});
};
const getPractiseDetail = async (id) => {
@@ -53,32 +52,10 @@ const onPractiseLoading = async (page) => {
}
return result.length;
};
const getName = (battle) => {
if (battle.mode <= 3) return `${battle.mode}V${battle.mode}`;
// mode 使
if (battle.way === 2) {
if (battle.mode === 4) return "5人大乱斗";
if (battle.mode === 5) return "10人大乱斗";
}
// teams[0].players
const count = battle.teams?.[0]?.players?.length;
return count ? `${count}人大乱斗` : "大乱斗";
};
/**
* 支持通过 URL 参数指定初始 tab
* @example /pages/my-growth?tab=1 跳转到好友约战tab
*/
onLoad((options) => {
if (options && options.tab !== undefined) {
const tabIndex = parseInt(options.tab, 10);
if (!isNaN(tabIndex)) selectedIndex.value = tabIndex;
}
});
</script>
<template>
<Container title="我的成长脚印" :scroll="false">
<Container title="我的成长脚印" overflow="hidden">
<view class="tabs">
<view
v-for="(rankType, index) in ['排位赛', '好友约战', '个人练习']"
@@ -93,74 +70,66 @@ onLoad((options) => {
</view>
</view>
<view class="contents">
<swiper
:current="selectedIndex"
@change="(e) => (selectedIndex = e.detail.current)"
:style="{ height: '100%' }"
<ScrollList :show="selectedIndex === 0" :onLoading="onMatchLoading">
<view
v-for="(item, index) in matchList"
:key="index"
@click="() => toMatchDetail(item.battleId)"
>
<view class="contest-header">
<text>{{ item.name }}</text>
<text>{{ item.createdAt }}</text>
<image src="../static/back.png" mode="widthFix" />
</view>
<BattleHeader
:players="item.mode === 1 ? [] : item.players"
:blueTeam="item.bluePlayers"
:redTeam="item.redPlayers"
:winner="item.winner"
:showRank="item.mode === 2"
:showHeader="false"
/>
</view>
</ScrollList>
<ScrollList :show="selectedIndex === 1" :onLoading="onBattleLoading">
<view
v-for="(item, index) in battleList"
:key="index"
@click="() => toMatchDetail(item.battleId)"
>
<view class="contest-header">
<text>{{ item.name }}</text>
<text>{{ item.createdAt }}</text>
<image src="../static/back.png" mode="widthFix" />
</view>
<BattleHeader
:players="item.mode === 1 ? [] : item.players"
:blueTeam="item.bluePlayers"
:redTeam="item.redPlayers"
:winner="item.winner"
:showRank="item.mode === 2"
:showHeader="false"
/>
</view>
</ScrollList>
<ScrollList
:show="selectedIndex === 2"
:onLoading="onPractiseLoading"
:pageSize="15"
>
<swiper-item>
<ScrollList :onLoading="onMatchLoading">
<view
v-for="(item, index) in matchList"
:key="index"
@click="() => toMatchDetail(item.id)"
>
<view class="contest-header">
<text>{{ getName(item) }}</text>
<text>{{ item.createTime }}</text>
<image src="../static/back.png" mode="widthFix" />
</view>
<BattleHeader
:players="item.teams[0] ? item.teams[0].players : []"
:blueTeam="item.teams[1] ? item.teams[1].players : []"
:redTeam="item.teams[2] ? item.teams[2].players : []"
:winner="item.winTeam"
:showRank="!!item.teams[0]"
:showHeader="false"
/>
</view>
</ScrollList>
</swiper-item>
<swiper-item>
<ScrollList :onLoading="onBattleLoading">
<view
v-for="(item, index) in battleList"
:key="index"
@click="() => toMatchDetail(item.id)"
>
<view class="contest-header">
<text>{{ getName(item) }}</text>
<text>{{ item.createTime }}</text>
<image src="../static/back.png" mode="widthFix" />
</view>
<BattleHeader
:players="item.teams[0] ? item.teams[0].players : []"
:blueTeam="item.teams[1] ? item.teams[1].players : []"
:redTeam="item.teams[2] ? item.teams[2].players : []"
:winner="item.winTeam"
:showRank="!!item.teams[0]"
:showHeader="false"
/>
</view>
</ScrollList>
</swiper-item>
<swiper-item>
<ScrollList :onLoading="onPractiseLoading" :pageSize="15">
<view
v-for="(item, index) in practiseList"
:key="index"
class="practice-record"
@click="() => getPractiseDetail(item.id)"
>
<text
>{{ item.completed_arrows === 36 ? "耐力挑战" : "单组练习" }}
{{ item.createTime }}</text
>
<image src="../static/back.png" mode="widthFix" />
</view>
</ScrollList>
</swiper-item>
</swiper>
<view
v-for="(item, index) in practiseList"
:key="index"
class="practice-record"
@click="() => getPractiseDetail(item.id)"
>
<text
>{{ item.completed_arrows === 36 ? "耐力挑战" : "单组练习" }}
{{ item.createdAt }}</text
>
<image src="../static/back.png" mode="widthFix" />
</view>
</ScrollList>
</view>
</Container>
</template>
-66
View File
@@ -1,66 +0,0 @@
<script setup>
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import Avatar from "@/components/Avatar.vue";
import ScrollList from "@/components/ScrollList.vue";
import { getMyLikeList } from "@/apis";
const list = ref([]);
const onListLoading = async (page) => {
const result = await getMyLikeList(page);
if (page === 1) list.value = result.list;
else list.value = list.value.concat(result.list);
return result.list.length;
};
</script>
<template>
<Container
:bgType="2"
bgColor="#F5F5F5"
:whiteBackArrow="false"
title="赞我的朋友"
>
<view class="container">
<ScrollList :onLoading="onListLoading">
<block v-for="item in list" :key="item.id">
<view class="like-item">
<Avatar :src="item.avatar" mode="widthFix" />
<text>{{ item.name }}</text>
</view>
<view class="like-bottom-line" />
</block>
</ScrollList>
</view>
</Container>
</template>
<style scoped lang="scss">
.container {
width: 100%;
height: 100%;
}
.like-item {
background: $uni-white;
height: 140rpx;
width: 100%;
font-weight: 500;
font-size: 26rpx;
color: #333;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 25rpx;
}
.like-item > text {
margin-left: 25rpx;
}
.like-bottom-line {
width: calc(100% - 50rpx);
margin: 0 25rpx;
height: 1rpx;
background: #e5e5e5;
}
</style>
@@ -61,18 +61,6 @@ const goPay = async () => {
}
};
const copyOrderId = (orderId) => {
uni.setClipboardData({
data: String(orderId),
success: () => {
uni.showToast({
title: "复制成功",
icon: "success",
});
},
});
};
const cancelOrder = async () => {
const result = await cancelOrderListAPI(data.value.orderId);
data.value = result;
@@ -90,13 +78,8 @@ const cancelOrder = async () => {
>
<view class="order">
<view>
<text>{{ data.vipName }}</text>
<view class="order-number">
<text>订单号{{ data.orderId }}</text>
<text class="copy-action" @click.stop="copyOrderId(data.orderId)"
>复制</text
>
</view>
<text>商品名{{ data.vipName }}</text>
<text>订单号{{ data.orderId }}</text>
<text>下单时间{{ data.vipCreateAt }}</text>
<text
>支付时间{{
@@ -158,25 +141,4 @@ const cancelOrder = async () => {
text-align: center;
font-size: 11px;
}
.order-number {
display: flex;
align-items: center;
color: #666666;
font-size: 26rpx;
margin-top: 10rpx;
}
.order-number > text:first-child {
flex: 1;
min-width: 0;
word-break: break-all;
}
.copy-action {
flex-shrink: 0;
margin-left: 16rpx;
padding: 2rpx 14rpx;
color: #1f6ed4;
font-size: 24rpx;
line-height: 34rpx;
}
</style>
@@ -3,7 +3,6 @@ import { ref, onMounted } from "vue";
import { onShow } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import ScrollList from "@/components/ScrollList.vue";
import ModalDialog from "@/components/ModalDialog.vue";
import { getOrderListAPI } from "@/apis";
import useStore from "@/store";
import { orderStatusNames, getStatusColor } from "@/constants";
@@ -11,34 +10,13 @@ import { storeToRefs } from "pinia";
const store = useStore();
const { user, config } = storeToRefs(store);
const autoRenewDialogVisible = ref(false);
const selectedRenewOrder = ref(null);
const toDetailPage = (detail) => {
uni.setStorageSync("order", detail);
uni.navigateTo({
url: "/pages/member/order-detail",
url: `/pages/order-detail`,
});
};
const openAutoRenewDialog = (detail) => {
selectedRenewOrder.value = detail;
autoRenewDialogVisible.value = true;
};
const closeAutoRenewDialog = () => {
autoRenewDialogVisible.value = false;
selectedRenewOrder.value = null;
};
const confirmAutoRenewDialog = () => {
autoRenewDialogVisible.value = false;
uni.showToast({
title: "功能实现中",
icon: "none",
});
}
const list = ref([]);
const onLoading = async (page) => {
@@ -66,7 +44,7 @@ onShow(() => {
</script>
<template>
<Container title="订单管理">
<Container title="订单">
<view class="container">
<ScrollList :onLoading="onLoading">
<view
@@ -80,31 +58,18 @@ onShow(() => {
>{{ orderStatusNames[item.orderStatus] }}</view
>
<text>{{ item.vipName }}</text>
<text>订单号{{ item.orderId }}</text>
<text>创建时间{{ item.orderCreateAt }}</text>
<!-- <text
<!-- <text>订单号{{ item.orderId }}</text> -->
<!-- <text>创建时间{{ item.vipCreateAt }}</text> -->
<text
>支付时间{{
item.orderStatus === 4 ? item.paymentTime : ""
}}</text
> -->
>
<text>金额{{ item.total }} </text>
<!-- <text>支付方式微信</text> -->
<!-- <text class="renew-action" @click.stop="openAutoRenewDialog(item)">
自动续费
</text> -->
<text>支付方式微信</text>
</view>
</ScrollList>
</view>
<ModalDialog
:show="autoRenewDialogVisible"
title=""
:content="'确定关闭自动续费吗?\n会员到期后你将失去7项特权哦!'"
cancel-text="一意孤行"
confirm-text="继续享受"
:on-cancel="closeAutoRenewDialog"
:on-confirm="confirmAutoRenewDialog"
/>
</Container>
</template>
@@ -113,15 +78,15 @@ onShow(() => {
width: 100%;
height: 100%;
background-color: #f5f5f5;
padding-top: 16rpx;
padding-top: 10px;
}
.order-item {
position: relative;
background-color: #fff;
margin-bottom: 16rpx;
margin-bottom: 10px;
display: flex;
flex-direction: column;
padding: 28rpx 30rpx 18rpx 30rpx;
padding: 15px;
}
.order-item > view:first-child {
position: absolute;
@@ -133,20 +98,12 @@ onShow(() => {
font-size: 11px;
}
.order-item > text:nth-child(2) {
color: #333333;
font-size: 30rpx;
font-weight: bold;
color: #000;
font-size: 16px;
}
.order-item > text {
color: #666666;
font-size: 26rpx;
margin-bottom: 10rpx;
}
.order-item > .renew-action {
position: absolute;
right: 30rpx;
bottom: 18rpx;
color: #1f6ed4;
margin-bottom: 0;
font-size: 13px;
margin-top: 5px;
}
</style>
File diff suppressed because it is too large Load Diff
+34 -40
View File
@@ -4,7 +4,6 @@ import { onShow } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import EditOption from "@/components/EditOption.vue";
import SButton from "@/components/SButton.vue";
import { getPointBookDataAPI } from "@/apis";
const expandIndex = ref(0);
const bowType = ref("");
@@ -49,23 +48,16 @@ const toEditPage = () => {
bowtargetType: bowtargetType.value,
amountGroup: amountGroup.value,
});
uni.redirectTo({
uni.navigateTo({
url: "/pages/point-book-edit",
});
} else {
uni.showToast({
title: "请完善信息",
title: "Please complete the information",
icon: "none",
});
}
};
// onShow(async () => {
// const result = await getPointBookDataAPI();
// if (result) {
// days.value = result.total_day || 0;
// arrows.value = result.total_arrow || 0;
// }
// });
onMounted(async () => {
const pointBook = uni.getStorageSync("last-point-book");
if (pointBook) {
@@ -85,37 +77,39 @@ onMounted(async () => {
title="选择参数"
>
<view class="container">
<EditOption
:itemIndex="0"
:expand="expandIndex === 0"
:onExpand="onExpandChange"
:onSelect="onSelect"
:value="bowType.name"
/>
<EditOption
:itemIndex="1"
:expand="expandIndex === 1"
:onExpand="onExpandChange"
:onSelect="onSelect"
:value="distance + ''"
/>
<EditOption
:itemIndex="2"
:expand="expandIndex === 2"
:onExpand="onExpandChange"
:onSelect="onSelect"
:value="bowtargetType.name"
/>
<EditOption
:itemIndex="3"
:expand="expandIndex === 3"
:onExpand="onExpandChange"
:onSelect="onSelect"
/>
<view>
<EditOption
:itemIndex="0"
:expand="expandIndex === 0"
:onExpand="onExpandChange"
:onSelect="onSelect"
:value="bowType.name"
/>
<EditOption
:itemIndex="1"
:expand="expandIndex === 1"
:onExpand="onExpandChange"
:onSelect="onSelect"
:value="distance + ''"
/>
<EditOption
:itemIndex="2"
:expand="expandIndex === 2"
:onExpand="onExpandChange"
:onSelect="onSelect"
:value="bowtargetType.name"
/>
<EditOption
:itemIndex="3"
:expand="expandIndex === 3"
:onExpand="onExpandChange"
:onSelect="onSelect"
/>
</view>
</view>
<view :style="{ marginBottom: '20px' }">
<SButton :rounded="50" :onClick="toEditPage">Next</SButton>
</view>
<template #bottom>
<SButton :rounded="50" :onClick="() => $clickSound(toEditPage)">下一步</SButton>
</template>
</Container>
</template>
+1 -1
View File
@@ -107,7 +107,7 @@ const targetTypeName = computed(() => {
<template>
<view class="container" :style="{ paddingTop: paddingTop + 'px' }">
<image
src="https://static.shelingxingqiu.com/shootmini/static/app-bg5.png"
src="../static/app-bg5.png"
class="bg-image"
mode="aspectFill"
:style="{ height: paddingTop + 60 + 'px' }"
+79 -109
View File
@@ -7,8 +7,7 @@ import ScreenHint2 from "@/components/ScreenHint2.vue";
import RingBarChart from "@/components/RingBarChart.vue";
import { getPointBookDetailAPI, addNoteAPI } from "@/apis";
import { wxShare } from "@/util";
import { generateShareImage, generateShareCard } from "@/canvas";
import { wxShare, generateShareCard, generateShareImage } from "@/util";
import useStore from "@/store";
import { storeToRefs } from "pinia";
@@ -24,7 +23,7 @@ const targetId = ref(0);
const targetSrc = ref("");
const arrows = ref([]);
const notes = ref("");
const hasPoint = ref(false);
const draftNotes = ref("");
const record = ref({
groups: [],
user: {},
@@ -44,11 +43,11 @@ const closeTip = () => {
};
const saveNote = async () => {
if (record.value.id && notes.value) {
if (record.value.remark !== notes.value) {
await addNoteAPI(record.value.id, notes.value);
}
showTip3.value = false;
notes.value = draftNotes.value;
draftNotes.value = "";
showTip3.value = false;
if (record.value.id) {
await addNoteAPI(record.value.id, notes.value);
}
};
@@ -62,10 +61,16 @@ const onSelect = (index) => {
const goBack = () => {
const pages = getCurrentPages();
const lastPage = pages[pages.length - 2];
uni.navigateBack({
delta: lastPage.route === "pages/point-book-edit" ? 2 : 1,
});
if (pages.length > 1) {
const currentPage = pages[pages.length - 2];
uni.navigateBack({
delta: currentPage.route === "pages/point-book" ? 1 : 2,
});
} else {
uni.redirectTo({
url: "/pages/index",
});
}
};
const ringRates = computed(() => {
@@ -81,42 +86,17 @@ const loading = ref(false);
const shareImage = async () => {
if (loading.value) return;
loading.value = true;
try {
await generateShareImage("shareImageCanvas", record.value);
await wxShare("shareImageCanvas");
} catch (e) {
uni.showToast({
title: "海报生成失败,请稍后重试",
icon: "none",
});
} finally {
loading.value = false;
}
await generateShareImage("shareImageCanvas");
await wxShare("shareImageCanvas");
loading.value = false;
};
onLoad(async (options) => {
if (options.id) {
const result = await getPointBookDetailAPI(options.id || 247);
const result = await getPointBookDetailAPI(options.id || 209);
record.value = result;
const config = uni.getStorageSync("point-book-config");
const bowType = config.bowOption.find(
(item) => item.id === record.value.bowType
);
const bowtargetType = config.targetOption.find(
(item) => item.id === record.value.targetType
);
uni.setStorageSync("point-book", {
bowType,
bowtargetType,
distance: result.distance,
amountGroup: result.groups,
});
const arrowData =
record.value.groups && record.value.groups[0]
? record.value.groups[0]
: {};
hasPoint.value = (arrowData.list || []).some((arrow) => arrow.x && arrow.y);
notes.value = result.remark || "";
const config = uni.getStorageSync("point-book-config");
config.targetOption.some((item) => {
if (item.id === result.targetType) {
targetId.value = item.id;
@@ -191,9 +171,8 @@ onShareTimeline(async () => {
></canvas>
<canvas
class="share-canvas"
id="shareImageCanvas"
type="2d"
:style="`width: 375px; height: ${hasPoint ? 800 : 440}px`"
canvas-id="shareImageCanvas"
style="width: 375px; height: 860px"
></canvas>
<view class="detail-data">
<view>
@@ -201,7 +180,7 @@ onShareTimeline(async () => {
:style="{ display: 'flex', alignItems: 'center' }"
@click="() => openTip(1)"
>
<text>落点稳定性</text>
<text>Stability</text>
<image
src="../static/s-question-mark.png"
mode="widthFix"
@@ -211,19 +190,19 @@ onShareTimeline(async () => {
<text>{{ Number((data.stability || 0).toFixed(2)) }}</text>
</view>
<view>
<view>黄心率</view>
<view>Yellow Rate</view>
<text>{{ Number((data.yellowRate * 100).toFixed(2)) }}%</text>
</view>
<view>
<view>10环数</view>
<view>Gold Rings</view>
<text>{{ data.tenRings }}</text>
</view>
<view>
<view>平均环数</view>
<view>Avg Rings</view>
<text>{{ Number((data.averageRing || 0).toFixed(2)) }}</text>
</view>
<view>
<view>总环数</view>
<view>Total Rings</view>
<text>{{ data.userTotalRing }}/{{ data.totalRing }}</text>
</view>
<button
@@ -231,16 +210,13 @@ onShareTimeline(async () => {
@click="() => openTip(3)"
v-if="user.id === record.user.id"
>
<image
:src="`../static/${notes ? 'has' : 'add'}-note.png`"
mode="widthFix"
/>
<text>{{ notes ? "我的备注" : "添加备注" }}</text>
<image src="../static/edit.png" mode="widthFix" />
<text>Notes</text>
</button>
</view>
<view class="title-bar" v-if="hasPoint">
<view class="title-bar">
<view />
<text>落点分布</text>
<text>Distribution</text>
<!-- <button hover-class="none" @click="() => openTip(2)">
<image
src="../static/s-question-mark.png"
@@ -249,36 +225,23 @@ onShareTimeline(async () => {
/>
</button> -->
</view>
<view
:style="{ transform: 'translateY(-64rpx) scale(0.9)' }"
v-if="hasPoint"
>
<view :style="{ transform: 'translateY(-45rpx)' }">
<BowTargetEdit
:id="targetId"
:src="targetSrc"
:arrows="arrows.filter((item) => item.x && item.y)"
/>
</view>
<view :style="{ transform: hasPoint ? 'translateY(-100rpx)' : 'none' }">
<!-- <view class="title-bar">
<view />
<text>环值分布</text>
</view> -->
<view :style="{ transform: 'translateY(-60rpx)' }">
<view :style="{ padding: '0 30rpx' }">
<RingBarChart :data="ringRates" />
</view>
<!-- <view class="title-bar" :style="{ marginTop: '30rpx' }">
<view />
<text>{{
selectedIndex === 0 ? "每组环数" : `${selectedIndex}组环数`
}}</text>
</view> -->
<view class="ring-text-groups">
<view v-for="(item, index) in record.groups" :key="index">
<view v-if="selectedIndex === 0 && index !== 0">
<text>{{ index }}</text>
<text>{{ item.userTotalRing }}</text>
<text></text>
<text>Ring</text>
</view>
<view
v-if="
@@ -305,50 +268,55 @@ onShareTimeline(async () => {
class="btns"
:style="{
gridTemplateColumns: `repeat(${
user.id === record.user.id ? 2 : 1
user.id === record.user.id ? 1 : 1
}, 1fr)`,
}"
>
<button hover-class="none" @click="goBack">关闭</button>
<button
<button hover-class="none" @click="goBack">Close</button>
<!-- <button
hover-class="none"
@click="shareImage"
v-if="user.id === record.user.id"
>
分享
</button>
</button> -->
</view>
</view>
<ScreenHint2 :show="showTip || showTip2 || showTip3" :onClose="closeTip">
<ScreenHint2
:show="showTip || showTip2 || showTip3"
:onClose="!notes && showTip3 ? null : closeTip"
>
<view class="tip-content">
<block v-if="showTip">
<text>落点稳定性说明</text>
<text>Stability Description</text>
<text
>通过计算每支箭与其他箭的平均距离衡量射箭的稳定性数字越小则说明射箭越稳定该数据只能在用户标记落点的情况下生成</text
>The stability of archery is measured by calculating the average
distance of each arrow to other arrows. The smaller the number,
the more stable the archery. This data can only be generated when
the user marks the landing point.</text
>
</block>
<block v-if="showTip2">
<text>落点分布说明</text>
<text>展示用户某次练习中射箭的点位</text>
<text>Distribution Description</text>
<text>Show the user's archery points in a practice session</text>
</block>
<block v-if="showTip3">
<text>备注</text>
<text>Notes</text>
<text v-if="notes">{{ notes }}</text>
<textarea
v-model="notes"
v-if="!notes"
v-model="draftNotes"
maxlength="300"
rows="3"
rows="4"
class="notes-input"
placeholder="写下本次射箭的补充信息与心得"
placeholder-style="color: #ccc;"
/>
<view>
<button
hover-class="none"
@click="saveNote"
:class="notes ? '' : 'button-disabled'"
>
保存备注
<view v-if="!notes">
<button hover-class="none" @click="showTip3 = false">
Cancel
</button>
<button hover-class="none" @click="saveNote">Save Notes</button>
</view>
</block>
</view>
@@ -426,15 +394,15 @@ onShareTimeline(async () => {
}
.detail-data > button {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
font-size: 24rpx;
color: #333333;
font-size: 26rpx;
color: #999999;
}
.detail-data > button > image {
width: 44rpx;
height: 44rpx;
width: 28rpx;
height: 28rpx;
margin-right: 10rpx;
margin-left: 20rpx;
}
.question-mark {
width: 28rpx;
@@ -484,7 +452,7 @@ onShareTimeline(async () => {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
justify-content: space-between;
}
.tip-content > view > input {
width: 80%;
@@ -497,21 +465,21 @@ onShareTimeline(async () => {
}
.tip-content > view > button {
width: 48%;
border-radius: 44rpx;
background: linear-gradient(180deg, #fbfbfb 0%, #f5f5f5 100%);
border-radius: 22px;
border: 1px solid #eeeeee;
padding: 12px 0;
font-size: 14px;
color: #000;
background: #fed847;
}
.button-disabled {
background: linear-gradient(180deg, #fbfbfb 0%, #f5f5f5 100%) !important;
color: #ccc !important;
.tip-content > view > button:last-child {
background: #fed847;
}
.ring-text-groups {
display: flex;
flex-direction: column;
padding: 20rpx;
padding-top: 50rpx;
padding-top: 40rpx;
font-size: 24rpx;
color: #999999;
}
@@ -521,9 +489,10 @@ onShareTimeline(async () => {
}
.ring-text-groups > view > view:first-child:nth-last-child(2) {
margin-top: 10rpx;
width: 115rpx;
margin-left: 30rpx;
width: 90rpx;
text-align: center;
justify-content: flex-start;
justify-content: flex-end;
font-size: 20rpx;
display: flex;
color: #999;
@@ -535,17 +504,18 @@ onShareTimeline(async () => {
> view
> view:first-child:nth-last-child(2)
> text:nth-child(2) {
font-size: 28rpx;
font-size: 40rpx;
/* min-width: 45rpx; */
color: #666;
margin-right: 6rpx;
margin-top: -5rpx;
font-weight: 500;
}
.ring-text-groups > view > view:last-child {
width: 80%;
display: flex;
flex-wrap: wrap;
margin-bottom: 30rpx;
transform: translateX(20rpx);
}
.ring-text-groups > view > view:last-child > text {
width: 16.6%;
+27 -55
View File
@@ -1,6 +1,5 @@
<script setup>
import { ref, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import ScreenHint2 from "@/components/ScreenHint2.vue";
import SButton from "@/components/SButton.vue";
@@ -37,7 +36,7 @@ const onSubmit = async () => {
);
if (!isComplete) {
return uni.showToast({
title: "请完善信息",
title: "Please complete the information",
icon: "none",
});
}
@@ -55,7 +54,6 @@ const onSubmit = async () => {
Object.values(arrowGroups.value)
);
if (res.record_id) {
uni.removeStorageSync("last-point-record");
uni.redirectTo({
url: `/pages/point-book-detail?id=${res.record_id}`,
});
@@ -66,35 +64,17 @@ const onClickRing = (ring) => {
if (arrowGroups.value[currentGroup.value]) {
arrowGroups.value[currentGroup.value][currentArrow.value] = { ring };
if (currentArrow.value < amount.value - 1) currentArrow.value++;
uni.setStorageSync("last-point-record", arrowGroups.value);
}
};
const deleteArrow = () => {
const arrow = arrowGroups.value[currentGroup.value][currentArrow.value];
if (JSON.stringify(arrow) === "{}") {
currentArrow.value -= 1;
} else {
arrowGroups.value[currentGroup.value][currentArrow.value] = {};
}
uni.$emit("set-edit-arrow", null);
uni.setStorageSync("last-point-record", arrowGroups.value);
arrowGroups.value[currentGroup.value][currentArrow.value] = {};
};
const onEditDone = (arrow) => {
arrowGroups.value[currentGroup.value][currentArrow.value] = arrow;
if (currentArrow.value < amount.value - 1) currentArrow.value++;
uni.setStorageSync("last-point-record", arrowGroups.value);
};
const onSelectArrow = (index) => {
currentArrow.value = index;
const arrow = arrowGroups.value[currentGroup.value][currentArrow.value];
if (arrow && arrow.x && arrow.y) {
uni.$emit("set-edit-arrow", index);
} else {
uni.$emit("set-edit-arrow", null);
}
};
onLoad((options) => {
onMounted(() => {
const pointBook = uni.getStorageSync("last-point-book");
if (pointBook.bowtargetType) {
bowtarget.value = pointBook.bowtargetType;
@@ -112,27 +92,16 @@ onLoad((options) => {
arrowGroups.value[i] = new Array(amount.value).fill({});
}
}
if (options.withDraft) {
const draft = uni.getStorageSync("last-point-record");
if (draft) {
Object.values(draft).some((arrows, index1) =>
arrows.some((arrow, index2) => {
currentArrow.value = index2;
currentGroup.value = index1 + 1;
return JSON.stringify(arrow) === "{}";
})
);
arrowGroups.value = draft;
}
}
// uni.enableAlertBeforeUnload({
// message: "",
// });
});
</script>
<template>
<Container :bgType="2" bgColor="#F5F5F5" :whiteBackArrow="false">
<Container
:bgType="2"
bgColor="#F5F5F5"
:whiteBackArrow="false"
:onBack="() => (showTip = true)"
>
<view class="container">
<BowTargetEdit
:onChange="onEditDone"
@@ -143,11 +112,11 @@ onLoad((options) => {
<view class="title-bar">
<view>
<view />
<text> {{ currentGroup }} </text>
<text>Set {{ currentGroup }}</text>
</view>
<view @click="deleteArrow">
<image src="../static/delete.png" />
<text>删除</text>
<text>Delete</text>
</view>
</view>
<view class="bow-arrows">
@@ -155,7 +124,7 @@ onLoad((options) => {
v-if="arrowGroups[currentGroup]"
v-for="(arrow, index) in arrowGroups[currentGroup]"
:key="index"
@click="onSelectArrow(index)"
@click="currentArrow = index"
:style="{
borderColor: currentArrow === index ? '#FED847' : '#eeeeee',
borderWidth: currentArrow === index ? '2px' : '1px',
@@ -164,12 +133,15 @@ onLoad((options) => {
isNaN(arrow.ring)
? arrow.ring
: arrow.ring
? arrow.ring + " "
? arrow.ring + " points"
: ""
}}
</view>
}}</view
>
</view>
<text>推荐在靶纸上落点计分这样可获得稳定性分析</text>
<text
>It is recommended to score on the target face to obtain stability
analysis</text
>
<view class="bow-rings">
<view
v-for="(item, index) in ringTypes"
@@ -186,22 +158,22 @@ onLoad((options) => {
</view>
<ScreenHint2 :show="showTip">
<view class="tip-content">
<text>现在离开会导致</text>
<text>未提交的数据丢失是否继续</text>
<text>Leaving now will result in the loss of unsaved data.</text>
<text>Are you sure you want to continue?</text>
<view>
<button hover-class="none" @click="onBack">退出</button>
<button hover-class="none" @click="onBack">Exit</button>
<button hover-class="none" @click="showTip = false">
继续记录
Continue
</button>
</view>
</view>
</ScreenHint2>
</view>
<template #bottom>
<SButton :rounded="50" :onClick="() => $clickSound(onSubmit)">
{{ currentGroup === groups ? "保存并查看分析" : "下一组" }}
<view :style="{ marginBottom: '20px' }">
<SButton :rounded="50" :onClick="onSubmit">
{{ currentGroup === groups ? "Submit for analysis" : "Next set" }}
</SButton>
</template>
</view>
</Container>
</template>
+381
View File
@@ -0,0 +1,381 @@
<script setup>
import { ref, computed, onMounted, watch } from "vue";
import { onShow } from "@dcloudio/uni-app";
import PointRecord from "@/components/PointRecord.vue";
import RingBarChart from "@/components/RingBarChart.vue";
import { getPointBookConfigAPI, getPointBookStatisticsAPI } from "@/apis";
import { getElementRect } from "@/util";
import { generateKDEHeatmapImage } from "@/kde-heatmap";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
const isIOS = computed(() => {
const systemInfo = uni.getDeviceInfo();
return systemInfo.osName === "ios";
});
const loadImage = ref(false);
const data = ref({
weeksCheckIn: [],
ringRate: [],
});
const bowTargetSrc = ref("");
const heatMapImageSrc = ref(""); //
const startScoring = () => {
if (user.value.id) {
uni.navigateTo({
url: "/pages/point-book-create",
});
} else {
showModal.value = true;
}
};
const loadData = async () => {
const result = await getPointBookStatisticsAPI();
data.value = result;
const rect = await getElementRect(".heat-map");
let hot = 0;
if (result.checkInCount > -3 && result.checkInCount < 3) hot = 1;
else if (result.checkInCount >= 3) hot = 2;
else if (result.checkInCount >= 5) hot = 3;
else if (result.checkInCount === 7) hot = 4;
uni.$emit("update-hot", hot);
return;
loadImage.value = true;
const generateHeatmapAsync = async () => {
const weekArrows = result.weekArrows
.filter((item) => item.x && item.y)
.map((item) => [item.x, item.y]);
try {
//
if (weekArrows.length > 1000) {
const quickPath = await generateKDEHeatmapImage(
"heatMapCanvas",
rect.width,
rect.height,
weekArrows
);
heatMapImageSrc.value = quickPath;
//
await new Promise((resolve) => setTimeout(resolve, 500));
}
//
const finalPath = await generateKDEHeatmapImage(
"heatMapCanvas",
rect.width,
rect.height,
weekArrows,
{
range: [0, 1],
gridSize: 120, // 齿
bandwidth: 0.15, //
showPoints: false,
}
);
heatMapImageSrc.value = finalPath;
loadImage.value = false;
console.log("热力图图片地址:", finalPath);
} catch (error) {
console.error("生成热力图图片失败:", error);
loadImage.value = false;
}
};
// UI
generateHeatmapAsync();
};
onMounted(async () => {
const config = await getPointBookConfigAPI();
uni.setStorageSync("point-book-config", config);
if (config.targetOption && config.targetOption[0]) {
bowTargetSrc.value = config.targetOption[0].icon;
}
});
watch(
() => user.value.id,
(id) => {
if (id) loadData();
}
);
onShow(async () => {
if (user.value.id) loadData();
});
</script>
<template>
<view class="container">
<view class="daily-signin">
<view>
<image src="../static/week-check.png" />
</view>
<view :class="data.weeksCheckIn[0] ? 'checked' : ''">
<image
v-if="data.weeksCheckIn[0]"
src="../static/checked-green2.png"
mode="widthFix"
/>
<view v-else></view>
<text>Mon</text>
</view>
<view :class="data.weeksCheckIn[1] ? 'checked' : ''">
<image
v-if="data.weeksCheckIn[1]"
src="../static/checked-green2.png"
mode="widthFix"
/>
<view v-else></view>
<text>Tue</text>
</view>
<view :class="data.weeksCheckIn[2] ? 'checked' : ''">
<image
v-if="data.weeksCheckIn[2]"
src="../static/checked-green2.png"
mode="widthFix"
/>
<view v-else></view>
<text>Wed</text>
</view>
<view :class="data.weeksCheckIn[3] ? 'checked' : ''">
<image
v-if="data.weeksCheckIn[3]"
src="../static/checked-green2.png"
mode="widthFix"
/>
<view v-else></view>
<text>Thu</text>
</view>
<view :class="data.weeksCheckIn[4] ? 'checked' : ''">
<image
v-if="data.weeksCheckIn[4]"
src="../static/checked-green2.png"
mode="widthFix"
/>
<view v-else></view>
<text>Fri</text>
</view>
<view :class="data.weeksCheckIn[5] ? 'checked' : ''">
<image
v-if="data.weeksCheckIn[5]"
src="../static/checked-green2.png"
mode="widthFix"
/>
<view v-else></view>
<text>Sat</text>
</view>
<view :class="data.weeksCheckIn[6] ? 'checked' : ''">
<image
v-if="data.weeksCheckIn[6]"
src="../static/checked-green2.png"
mode="widthFix"
/>
<view v-else></view>
<text>Sun</text>
</view>
</view>
<view class="statistics">
<view>
<text>{{ data.todayTotalArrow || "-" }}</text>
<text>Today's Arrows</text>
</view>
<view>
<text>{{ data.totalArrow || "-" }}</text>
<text>Total Arrows</text>
</view>
<view>
<text>{{ data.totalDay || "-" }}</text>
<text>Training Days</text>
</view>
<view>
<text>{{ data.averageRing || "-" }}</text>
<text>Avg Score</text>
</view>
<view>
<text>{{
data.yellowRate !== undefined
? Number((data.yellowRate * 100).toFixed(2)) + "%"
: "-"
}}</text>
<text>Gold Rate</text>
</view>
<view>
<button hover-class="none" @click="startScoring">
<image src="../static/start-scoring.png" mode="widthFix" />
</button>
</view>
</view>
<view class="title" :style="{ marginBottom: 0 }">
<image src="../static/point-book-title1.png" mode="widthFix" />
</view>
<view class="heat-map">
<image
:src="bowTargetSrc || '../static/bow-target.png'"
mode="widthFix"
/>
<image v-if="heatMapImageSrc" :src="heatMapImageSrc" mode="aspectFill" />
<view v-if="loadImage" class="load-image">
<text>Generating...</text>
</view>
<canvas
id="heatMapCanvas"
canvas-id="heatMapCanvas"
type="2d"
style="
width: 100%;
height: 100%;
position: absolute;
top: -1000px;
left: 0;
z-index: 2;
"
/>
</view>
<RingBarChart :data="data.ringRate" />
<view :style="{ height: '25rpx' }" />
</view>
</template>
<style scoped>
.container {
width: 100%;
height: 100%;
overflow: auto;
}
.statistics {
border-radius: 25rpx;
border-bottom-left-radius: 50rpx;
border-bottom-right-radius: 50rpx;
border: 4rpx solid #fed848;
background: #fff;
font-size: 22rpx;
display: flex;
flex-wrap: wrap;
padding: 25rpx 0;
margin-bottom: 10rpx;
}
.statistics > view {
width: 33.33%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.statistics > view:nth-child(-n + 3) {
margin-bottom: 25rpx;
}
.statistics > view:nth-child(2),
.statistics > view:nth-child(5) {
border-left: 1rpx solid #eeeeee;
border-right: 1rpx solid #eeeeee;
box-sizing: border-box;
}
.statistics > view > text {
text-align: center;
font-size: 22rpx;
color: #333333;
}
.statistics > view > text:first-child {
font-weight: 500;
font-size: 40rpx;
margin-bottom: 10rpx;
}
.statistics > view:last-child > button > image {
width: 164rpx;
}
.daily-signin {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 10rpx;
border-radius: 20rpx;
margin-bottom: 25rpx;
}
.daily-signin > view {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 12rpx;
box-sizing: border-box;
}
.daily-signin > view:not(:first-child) {
background: #f8f8f8;
box-sizing: border-box;
width: 78rpx;
height: 94rpx;
padding-top: 10rpx;
}
.daily-signin > view:not(:first-child) > image {
width: 32rpx;
height: 32rpx;
}
.daily-signin > view:not(:first-child) > view {
width: 32rpx;
height: 32rpx;
border-radius: 50%;
box-sizing: border-box;
border: 2rpx solid #333;
}
.daily-signin > view > text {
font-size: 20rpx;
color: #999999;
font-weight: 500;
text-align: center;
margin-top: 10rpx;
}
.daily-signin > view:first-child > image {
width: 72rpx;
height: 94rpx;
}
.checked {
border: 2rpx solid #000;
}
.checked > text {
color: #333 !important;
}
.title {
width: 100%;
display: flex;
justify-content: center;
margin: 25rpx 0;
}
.title > image {
width: 566rpx;
}
.heat-map {
position: relative;
margin: 0 auto;
width: calc(100vw - 70rpx);
height: calc(100vw - 70rpx);
transform: scale(0.9);
}
.heat-map > image {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.load-image {
position: absolute;
width: 160rpx;
top: calc(50% - 65rpx);
left: calc(50% - 75rpx);
color: #525252;
font-size: 20rpx;
display: flex;
flex-direction: column;
align-items: center;
}
</style>
+15 -139
View File
@@ -1,6 +1,5 @@
<script setup>
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { ref, onMounted } from "vue";
import Container from "@/components/Container.vue";
import SModal from "@/components/SModal.vue";
import EditOption from "@/components/EditOption.vue";
@@ -17,7 +16,6 @@ const showModal = ref(false);
const selectorIndex = ref(0);
const list = ref([]);
const removeId = ref("");
const pointDraft = ref(null);
const onListLoading = async (page) => {
const result = await getPointBookListAPI(
@@ -49,9 +47,9 @@ const confirmRemove = async () => {
showTip.value = false;
await removePointRecord(removeId.value);
list.value = list.value.filter((it) => it.id !== removeId.value);
uni.showToast({ title: "已删除", icon: "none" });
uni.showToast({ title: "Deleted", icon: "none" });
} catch (e) {
uni.showToast({ title: "删除失败,请重试", icon: "none" });
uni.showToast({ title: "Delete failed, please retry", icon: "none" });
}
};
@@ -66,22 +64,6 @@ const onSelectOption = (itemIndex, value) => {
showModal.value = false;
onListLoading(1);
};
const onRemoveDraft = () => {
pointDraft.value = null;
uni.removeStorageSync("last-point-record");
};
const toEditPage = () => {
uni.navigateTo({
url: "/pages/point-book-edit?withDraft=true",
});
};
onShow(() => {
const draft = uni.getStorageSync("last-point-record");
pointDraft.value = draft ? uni.getStorageSync("last-point-book") : null;
});
</script>
<template>
@@ -89,79 +71,36 @@ onShow(() => {
:bgType="2"
bgColor="#F5F5F5"
:whiteBackArrow="false"
title="计分记录"
title="Point Records"
>
<view class="container">
<view class="selectors">
<view @click="() => openSelector(0)">
<text :style="{ color: bowType.name ? '#000' : '#999' }">{{
bowType.name || "请选择"
bowType.name || "Please select"
}}</text>
<image src="../static/arrow-grey.png" mode="widthFix" />
</view>
<view @click="() => openSelector(1)">
<text :style="{ color: distance ? '#000' : '#999' }">{{
distance ? distance + " " : "请选择"
distance ? distance + " m" : "Please select"
}}</text>
<image src="../static/arrow-grey.png" mode="widthFix" />
</view>
<view @click="() => openSelector(2)">
<text :style="{ color: bowtargetType.name ? '#000' : '#999' }">{{
bowtargetType.name || "请选择"
bowtargetType.name || "Please select"
}}</text>
<image src="../static/arrow-grey.png" mode="widthFix" />
</view>
</view>
<view class="point-records">
<ScrollList :onLoading="onListLoading">
<uni-swipe-action>
<block v-if="pointDraft">
<uni-swipe-action-item>
<template v-slot:right>
<view class="swipe-right" @click="onRemoveDraft">
<image
class="swipe-icon"
src="../static/delete-white.png"
mode="widthFix"
/>
</view>
</template>
<view class="point-draft" v-if="pointDraft" @click="toEditPage">
<text>{{ pointDraft.bowType.name }}</text>
<text>{{ pointDraft.distance }}</text>
<text>{{ pointDraft.bowtargetType.name }}</text>
<view>
<image src="../static/draft-icon.png" mode="widthFix" />
<text>本地草稿</text>
<view>
<text>计分待完成</text>
<image src="../static/back.png" mode="widthFix" />
</view>
</view>
</view>
</uni-swipe-action-item>
<view :style="{ height: '25rpx' }" />
</block>
<block v-for="(item, index) in list" :key="item.id">
<uni-swipe-action-item>
<template v-slot:right>
<view class="swipe-right" @click="onRemoveRecord(item)">
<image
class="swipe-icon"
src="../static/delete-white.png"
mode="widthFix"
/>
</view>
</template>
<PointRecord :data="item" />
</uni-swipe-action-item>
<view
v-if="index < list.length - 1"
:style="{ height: '25rpx' }"
/>
</block>
</uni-swipe-action>
<view class="no-data" v-if="list.length === 0">暂无数据</view>
<view v-for="(item, index) in list" :key="item.id">
<PointRecord :data="item" :onRemove="onRemoveRecord" />
<view v-if="index < list.length - 1" :style="{ height: '25rpx' }"></view>
</view>
<view class="no-data" v-if="list.length === 0">No data</view>
</ScrollList>
</view>
<SModal
@@ -202,10 +141,10 @@ onShow(() => {
</SModal>
<ScreenHint2 :show="showTip">
<view class="tip-content">
<text>确认删除该记录吗?</text>
<text>Are you sure to delete this record?</text>
<view>
<button hover-class="none" @click="showTip = false">取消</button>
<button hover-class="none" @click="confirmRemove">确认</button>
<button hover-class="none" @click="showTip = false">Cancel</button>
<button hover-class="none" @click="confirmRemove">Confirm</button>
</view>
</view>
</ScreenHint2>
@@ -306,67 +245,4 @@ onShow(() => {
.tip-content > view > button:last-child {
background: #fed847;
}
/* 右侧滑动按钮(自定义宽度与图标) */
.swipe-right {
width: 120rpx; /* 这里可按需调整按钮宽度 */
height: 100%;
background-color: #ff7c7c;
display: flex;
align-items: center;
justify-content: center;
}
.swipe-icon {
width: 44rpx;
height: 44rpx;
}
.point-draft {
height: 200rpx;
border-radius: 25rpx;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.point-draft > text {
font-weight: 500;
font-size: 40rpx;
color: #333333;
margin: 0 20rpx;
}
.point-draft > view:last-child {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #000000b3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.point-draft > view:last-child > image {
width: 46rpx;
height: 38rpx;
margin-bottom: 10rpx;
}
.point-draft > view:last-child > text {
font-weight: 500;
font-size: 26rpx;
color: #ffffff;
}
.point-draft > view:last-child > view {
display: flex;
align-items: center;
justify-content: center;
font-size: 22rpx;
color: #ffffff;
transform: translateX(8rpx);
}
.point-draft > view:last-child > view > image {
width: 30rpx;
height: 30rpx;
transform: rotate(180deg);
}
</style>

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