89 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
kron
6087e1bf94 细节优化 2025-10-21 15:13:22 +08:00
kron
5a7605e9d2 更换客服二维码 2025-10-14 13:57:21 +08:00
kron
3b1fb5b270 修复有时捐赠金额显示不出来的问题 2025-10-14 11:11:48 +08:00
kron
eef113902e 细节更新 2025-10-11 15:37:05 +08:00
kron
5bf3bbccdb 计分本修改 2025-10-11 09:06:56 +08:00
kron
fb0cf62ca0 代码优化 2025-10-09 18:14:07 +08:00
kron
d2ce9f1026 fix bug 2025-10-09 09:30:05 +08:00
kron
ce34ca93d1 细节优化 2025-10-05 11:52:32 +08:00
kron
9f6e1b1e97 优化渲染热力图 2025-10-03 16:40:28 +08:00
kron
0ffca23dbf 修改注释 2025-10-03 12:19:01 +08:00
kron
22429bda52 删除无用代码 2025-10-03 11:16:01 +08:00
kron
e91ba88b9f 细节修改 2025-10-03 11:15:48 +08:00
kron
96fc942d02 UI修改 2025-10-01 12:57:34 +08:00
kron
0875297819 UI优化 2025-10-01 11:58:24 +08:00
kron
10afe737f6 样式优化 2025-09-30 18:29:08 +08:00
kron
1daa830ed0 代码优化 2025-09-30 16:47:00 +08:00
kron
e636d02657 优化渲染速度 2025-09-30 11:29:09 +08:00
kron
c0aa6e8058 UI还原 2025-09-30 10:53:06 +08:00
kron
ca399ffc19 样式调整 2025-09-29 11:14:49 +08:00
kron
301b7a67a0 修改热力图渲染方式 2025-09-29 11:05:42 +08:00
kron
9c6824b82f 更新一版热力图 2025-09-28 18:28:49 +08:00
kron
889e87d3e9 细节修改 2025-09-28 14:48:19 +08:00
kron
caa70b16f4 UI修改 2025-09-28 09:09:38 +08:00
kron
9af2f5b887 UI修改 2025-09-27 16:11:47 +08:00
kron
b75ab93af9 细节完善 2025-09-27 10:09:02 +08:00
kron
f8bc5d094e 添加打赏支付 2025-09-25 17:07:37 +08:00
kron
91535abfd7 样式优化 2025-09-25 16:13:50 +08:00
kron
b8d0c6c567 代码优化 2025-09-25 16:04:37 +08:00
kron
2a1bc1e3bc 添加捐款相关UI 2025-09-25 15:18:24 +08:00
kron
8c45e7f4eb 完善页面 2025-09-25 14:22:03 +08:00
kron
ef96f90470 完成热力图绘制 2025-09-25 11:53:47 +08:00
kron
867d4d0090 准备调热力图 2025-09-25 10:59:49 +08:00
kron
67be4ad7d6 添加柱状图 2025-09-25 10:16:23 +08:00
kron
94edc3d6c9 积分表UI修改 2025-09-24 21:05:06 +08:00
kron
59016fe54f 添加计分本页面分享 2025-09-22 14:55:00 +08:00
kron
0de4dc8e6d fix bug 2025-09-19 16:52:12 +08:00
kron
d5acc639b3 添加分享参数 2025-09-19 16:26:47 +08:00
kron
5748dfdfde 修改海报的二维码 2025-09-19 09:40:49 +08:00
kron
890867586b 修改日志显示 2025-09-18 10:01:10 +08:00
kron
72ab9c3757 修复BUG 2025-09-18 09:28:14 +08:00
kron
b952ea9fd0 优化音频加载 2025-09-18 09:28:04 +08:00
kron
aa6bbf6fd6 更新音频 2025-09-15 11:23:22 +08:00
kron
0a151de3c9 给token区分环境 2025-09-12 17:49:26 +08:00
kron
24b776f327 增加长按识别二维码 2025-09-12 15:36:32 +08:00
kron
1c79ed6183 添加首页分享 2025-09-12 10:38:21 +08:00
kron
eca11715d5 fix bug 2025-09-10 15:56:57 +08:00
kron
65548e6c6a 添加图片 2025-09-04 18:18:29 +08:00
kron
c9e575a81e 更换图片 2025-09-04 18:06:28 +08:00
kron
71a79defe7 增加查看协议 2025-09-04 15:42:59 +08:00
kron
c9eaeedc0d 细节调整 2025-09-04 13:54:39 +08:00
kron
9b2ba22b97 添加页面 2025-09-03 16:37:49 +08:00
kron
1f15183fc4 细节修改 2025-09-03 16:34:54 +08:00
kron
bc17a3a584 修改等级介绍 2025-08-29 11:59:11 +08:00
kron
a1942697e7 添加音频加载失败重新加载 2025-08-29 10:41:25 +08:00
kron
3c414afd82 vip介绍用富文本显示 2025-08-29 10:20:37 +08:00
kron
91ee2a714c 改名字 2025-08-28 19:34:24 +08:00
kron
677d280a4e 添加声音 2025-08-28 10:39:16 +08:00
kron
f076065550 数据显示修改 2025-08-27 18:41:42 +08:00
kron
01f05f4824 声音播放规则修改 2025-08-27 18:23:59 +08:00
kron
eb076df7d5 添加射击无效语音 2025-08-26 18:00:40 +08:00
kron
448df06daf 更换事件 2025-08-25 13:47:32 +08:00
kron
7a9439567f 细节完善 2025-08-22 16:04:39 +08:00
kron
73e35a5506 细节完善 2025-08-22 14:51:42 +08:00
kron
3be6a5ef04 UI调整 2025-08-22 11:51:52 +08:00
kron
17e463a884 bug 修复 2025-08-21 18:32:28 +08:00
kron
4347dea41e 添加无效射击通知 2025-08-21 16:15:29 +08:00
kron
0d1e0737ff bug修复 2025-08-21 16:15:15 +08:00
kron
c0736e1285 靶子点大小调整 2025-08-21 16:08:42 +08:00
kron
e20cb3b272 BUG修复 2025-08-21 14:50:17 +08:00
kron
fca4a138d7 优化 2025-08-21 13:55:32 +08:00
kron
529a09da3e fix bug 2025-08-21 11:39:40 +08:00
kron
2dd3ea05a4 UI优化 2025-08-21 10:27:16 +08:00
kron
d9c9319d24 细节完善 2025-08-21 09:36:00 +08:00
kron
70b3a25369 BUG修复 2025-08-20 18:30:02 +08:00
kron
f19b9b1f9d 细节优化 2025-08-20 16:04:17 +08:00
kron
22a9fe56c0 文字样式修改 2025-08-20 13:53:14 +08:00
kron
12dbe2d05b 靶子放大方式修改 2025-08-20 13:52:29 +08:00
kron
f0edb2a57f fix bug 2025-08-19 18:42:22 +08:00
kron
7162490ef7 交互方式修改 2025-08-19 16:48:33 +08:00
kron
f03adb5ea0 fix bug 2025-08-19 09:44:15 +08:00
127 changed files with 5066 additions and 1005 deletions

View File

@@ -11,7 +11,9 @@ const { updateUser } = store;
watch(
() => user.value.id,
(newVal) => {
const token = uni.getStorageSync("token");
const token = uni.getStorageSync(
`${uni.getAccountInfoSync().miniProgram.envVersion}_token`
);
if (newVal && token) {
websocket.createWebSocket(token, (content) => {
uni.$emit("socket-inbox", content);
@@ -28,7 +30,9 @@ watch(
);
onShow(() => {
const token = uni.getStorageSync("token");
const token = uni.getStorageSync(
`${uni.getAccountInfoSync().miniProgram.envVersion}_token`
);
if (user.value.id && token) {
console.log("回到前台,重新连接 websocket");
websocket.createWebSocket(token, (content) => {
@@ -60,6 +64,12 @@ button {
box-sizing: border-box;
}
view::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
button::after {
border: none;
}

View File

@@ -24,7 +24,9 @@ try {
}
function request(method, url, data = {}) {
const token = uni.getStorageSync("token");
const token = uni.getStorageSync(
`${uni.getAccountInfoSync().miniProgram.envVersion}_token`
);
const header = {};
if (token) header.Authorization = `Bearer ${token || ""}`;
return new Promise((resolve, reject) => {
@@ -40,7 +42,9 @@ function request(method, url, data = {}) {
if (code === 0) resolve(data);
else if (message) {
if (message.indexOf("登录身份已失效") !== -1) {
uni.removeStorageSync("token");
uni.removeStorageSync(
`${uni.getAccountInfoSync().miniProgram.envVersion}_token`
);
}
if (message === "ROOM_FULL") {
resolve({ full: true });
@@ -70,11 +74,18 @@ function request(method, url, data = {}) {
resolve({});
return;
}
if (message === "ROOM_EMPTY") {
return uni.showToast({
title: "房间已过期",
icon: "none",
});
}
uni.showToast({
title: message,
icon: "none",
});
}
reject("");
}
},
fail: (err) => {
@@ -159,7 +170,10 @@ export const loginAPI = async (nickName, avatarData, code) => {
avatarData,
code,
});
uni.setStorageSync("token", result.token);
uni.setStorageSync(
`${uni.getAccountInfoSync().miniProgram.envVersion}_token`,
result.token
);
return result;
};
@@ -288,17 +302,16 @@ export const getGameAPI = async (battleId) => {
};
});
});
const totalRounds = Object.keys(data.roundsData).length;
(goldenRoundRecords || []).forEach((item, index) => {
item.arrowHistory.forEach((arrow) => {
if (!data.roundsData[playerStats.length + index + 1]) {
data.roundsData[playerStats.length + index + 1] = {};
if (!data.roundsData[totalRounds + index + 1]) {
data.roundsData[totalRounds + index + 1] = {};
}
if (!data.roundsData[playerStats.length + index + 1][arrow.playerId]) {
data.roundsData[playerStats.length + index + 1][arrow.playerId] = [];
if (!data.roundsData[totalRounds + index + 1][arrow.playerId]) {
data.roundsData[totalRounds + index + 1][arrow.playerId] = [];
}
data.roundsData[playerStats.length + index + 1][arrow.playerId].push(
arrow
);
data.roundsData[totalRounds + index + 1][arrow.playerId].push(arrow);
});
});
@@ -467,3 +480,41 @@ export const getBattleDataAPI = async () => {
export const chooseTeamAPI = async (number, group) => {
return request("POST", "/user/room/group", { number, group });
};
export const getVIPDescAPI = async () => {
return request("GET", "/index/memberVipDescribe");
};
export const getPointBookStatisticsAPI = async () => {
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,
});
};
export const laserAimAPI = async () => {
return request("POST", "/user/device/laserAim");
};
export const laserCloseAPI = async () => {
return request("POST", "/user/device/closeAim");
};
export const getDeviceBatteryAPI = async () => {
return request("GET", "/user/device/battery");
};
export const addNoteAPI = async (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}`);
};

View File

@@ -1,91 +1,245 @@
const audioFils = {
胜利: "https://static.shelingxingqiu.com/attachment/2025-09-17/dcuo9yjp0kt5msvmvd.mp3",
失败: "https://static.shelingxingqiu.com/attachment/2025-09-17/dcuo9yht2sdwhuqygy.mp3",
请射箭测试距离:
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcuvj8avzqyw4hpq7t.mp3",
距离合格:
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcutwrda0amn5kqr4j.mp3",
距离不足:
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcutya57qurnsj6pg4.mp3",
轮到你了:
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcutzdrn4lxcpv8aqr.mp3",
第一轮:
"https://static.shelingxingqiu.com/attachment/2025-07-14/dbblu6fl26qrspvy79.mp3",
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcutyyr9a7m1vz2w13.mp3",
第二轮:
"https://static.shelingxingqiu.com/attachment/2025-07-14/dbblu6fehshrpe5ook.mp3",
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcutyyr9ldnfexjxtw.mp3",
第三轮:
"https://static.shelingxingqiu.com/attachment/2025-07-14/dbblu6fgbz3iimk7yy.mp3",
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcutyyr97m4ipxaze4.mp3",
第四轮:
"https://static.shelingxingqiu.com/attachment/2025-07-14/dbblu6fjwf50tlxxbi.mp3",
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcutyyr9x5addohlzf.mp3",
第五轮:
"https://static.shelingxingqiu.com/attachment/2025-07-14/dbblu6fg63lqrslhm7.mp3",
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcutyyr9d7lw2gebpv.mp3",
决金箭轮:
"https://static.shelingxingqiu.com/attachment/2025-07-14/dbblu6fhjycwubbwil.mp3",
请蓝方射:
"https://static.shelingxingqiu.com/attachment/2025-07-14/dbblu6fr0zpluiabph.mp3",
请红方射:
"https://static.shelingxingqiu.com/attachment/2025-07-14/dbblu6fu169yerpwey.mp3",
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcutwrd9zs4oi2kujv.mp3",
请蓝方射:
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcutzdrxcbe5ll46as.mp3",
请红方射:
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcutzdrl3re3dhlfjd.mp3",
中场休息:
"https://static.shelingxingqiu.com/attachment/2025-07-14/dbblu6fug8faqrbtwd.mp3",
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcutwrd9zdk1xyolst.mp3",
比赛结束:
"https://static.shelingxingqiu.com/attachment/2025-07-14/dbblsdl717ilr0b3o0.mp3",
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcutya59b6pu0ur4um.mp3",
比赛开始:
"https://static.shelingxingqiu.com/attachment/2025-07-14/dbblsdl7qlkqgvthfr.mp3",
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcuu5z3a3lumkutske.mp3",
请开始射击:
"https://static.shelingxingqiu.com/attachment/2025-07-14/dbbljrfx5guqt5oulk.mp3",
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcutzdrl5u0iromqhf.mp3",
射击无效:
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcutya55ufiiw8oo55.mp3",
未上靶:
"https://static.shelingxingqiu.com/attachment/2025-07-14/dbbkxm60bul0khcoqq.mp3",
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcuuznjc78ljhzuw1o.mp3",
"1环":
"https://static.shelingxingqiu.com/attachment/2025-07-14/dbbklufj59qmdo96ha.mp3",
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcutxin1aq7gxjih5l.mp3",
"2环":
"https://static.shelingxingqiu.com/attachment/2025-07-14/dbbklufogy49ousbv4.mp3",
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcutxin64tdgx2s4at.mp3",
"3环":
"https://static.shelingxingqiu.com/attachment/2025-07-14/dbbklufl3hhijeasck.mp3",
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcutxinlmf87vt8z65.mp3",
"4环":
"https://static.shelingxingqiu.com/attachment/2025-07-14/dbbklufo8vo7k6jxdz.mp3",
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcutxinniv97sx0q9u.mp3",
"5环":
"https://static.shelingxingqiu.com/attachment/2025-07-14/dbbklkzq7lrbfpr6ij.mp3",
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcutxin7j01kknpb7k.mp3",
"6环":
"https://static.shelingxingqiu.com/attachment/2025-07-14/dbbkll0fw7hbmmhxkl.mp3",
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcutxin4syy1015rtq.mp3",
"7环":
"https://static.shelingxingqiu.com/attachment/2025-07-14/dbbkll0fkirkanghmf.mp3",
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcutxin3iz3dvmjdai.mp3",
"8环":
"https://static.shelingxingqiu.com/attachment/2025-07-14/dbbkll0cly2noykieg.mp3",
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcutxinnjd42lhpfiw.mp3",
"9环":
"https://static.shelingxingqiu.com/attachment/2025-07-14/dbbkll0gsuumekhpkn.mp3",
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcutxin69nj1xh7yfz.mp3",
"10环":
"https://static.shelingxingqiu.com/attachment/2025-07-14/dbbklgw2dk22ek7qha.mp3",
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcutxinnvsx0tt7ksa.mp3",
};
// 版本控制日志函数
function debugLog(...args) {
// 获取当前环境信息
const accountInfo = uni.getAccountInfoSync();
const envVersion = accountInfo.miniProgram.envVersion;
// 只在体验版打印日志,正式版(release)和开发版(develop)不打印
if (envVersion === 'trial') {
console.log(...args);
}
}
class AudioManager {
constructor() {
this.audioMap = new Map();
Object.keys(audioFils).forEach((key) => {
this.currentPlayingKey = null;
this.retryCount = new Map();
this.maxRetries = 3;
// 串行加载相关属性
this.audioKeys = [];
this.currentLoadingIndex = 0;
this.isLoading = false;
this.loadingPromise = null;
this.initAudios();
}
// 初始化音频
initAudios() {
if (this.isLoading) {
debugLog("音频正在加载中,跳过重复初始化");
return this.loadingPromise;
}
debugLog("开始串行加载音频...");
this.isLoading = true;
this.audioKeys = Object.keys(audioFils);
this.currentLoadingIndex = 0;
this.loadingPromise = new Promise((resolve) => {
this.loadNextAudio(resolve);
});
return this.loadingPromise;
}
// 串行加载下一个音频
loadNextAudio(onComplete) {
if (this.currentLoadingIndex >= this.audioKeys.length) {
debugLog("所有音频加载完成");
this.isLoading = false;
if (onComplete) onComplete();
return;
}
const key = this.audioKeys[this.currentLoadingIndex];
debugLog(`开始加载音频 ${this.currentLoadingIndex + 1}/${this.audioKeys.length}: ${key}`);
this.createAudio(key, () => {
this.currentLoadingIndex++;
setTimeout(() => {
this.loadNextAudio(onComplete);
}, 100);
});
}
// 创建单个音频实例
createAudio(key, callback) {
const src = audioFils[key];
const audio = uni.createInnerAudioContext();
audio.src = audioFils[key];
audio.src = src;
audio.autoplay = false;
// 设置加载超时
const loadTimeout = setTimeout(() => {
debugLog(`音频 ${key} 加载超时`);
audio.destroy();
if (callback) callback();
}, 10000);
// 监听加载状态
audio.onCanplay(() => {
// console.log(`音频 ${key} 已加载完成`);
clearTimeout(loadTimeout);
debugLog(`音频 ${key} 已加载完成`);
this.retryCount.set(key, 0);
if (callback) callback();
});
audio.onError((res) => {
console.log(`音频 ${key} 加载失败:`, res.errMsg);
clearTimeout(loadTimeout);
debugLog(`音频 ${key} 加载失败:`, res.errMsg);
this.handleAudioError(key);
if (callback) callback();
});
// 监听播放结束事件
audio.onEnded(() => {
if (this.currentPlayingKey === key) {
this.currentPlayingKey = null;
}
});
// 监听播放停止事件
audio.onStop(() => {
if (this.currentPlayingKey === key) {
this.currentPlayingKey = null;
}
});
this.audioMap.set(key, audio);
});
if (!this.retryCount.has(key)) {
this.retryCount.set(key, 0);
}
}
// 处理音频加载错误
handleAudioError(key) {
const currentRetries = this.retryCount.get(key) || 0;
if (currentRetries < this.maxRetries) {
this.retryCount.set(key, currentRetries + 1);
debugLog(`音频 ${key} 开始第 ${currentRetries + 1} 次重试...`);
setTimeout(() => {
this.retryLoadAudio(key);
}, 1000);
} else {
console.error(`音频 ${key} 重试 ${this.maxRetries} 次后仍然失败,停止重试`);
const failedAudio = this.audioMap.get(key);
if (failedAudio) {
failedAudio.destroy();
this.audioMap.delete(key);
}
}
}
// 重新加载音频
retryLoadAudio(key) {
const oldAudio = this.audioMap.get(key);
if (oldAudio) {
oldAudio.destroy();
}
this.createAudio(key);
}
// 播放指定音频
play(key) {
// 如果有正在播放的音频,先停止
if (this.currentPlayingKey) {
this.stop(this.currentPlayingKey);
}
const audio = this.audioMap.get(key);
if (audio) audio.play();
if (audio) {
audio.play();
this.currentPlayingKey = key;
} else {
debugLog(`音频 ${key} 不存在,尝试重新加载...`);
this.reloadAudio(key);
}
}
// 停止指定音频
stop(key) {
const audio = this.audioMap.get(key);
if (audio) audio.stop();
if (audio) {
audio.stop();
if (this.currentPlayingKey === key) {
this.currentPlayingKey = null;
}
}
}
// 销毁所有音频实例
destroyAll() {
this.audioMap.forEach((audio) => {
audio.destroy();
});
this.audioMap.clear();
// 手动重新加载指定音频
reloadAudio(key) {
if (audioFils[key]) {
debugLog(`手动重新加载音频: ${key}`);
this.retryCount.set(key, 0);
this.retryLoadAudio(key);
}
}
}

View File

@@ -43,6 +43,12 @@ onMounted(() => {
src="../static/app-bg4.png"
mode="widthFix"
/>
<image
class="bg-image"
v-if="type === 4"
src="../static/app-bg5.png"
mode="widthFix"
/>
<view class="bg-overlay" v-if="type === 0"></view>
</view>
</template>

View File

@@ -1,15 +1,4 @@
<script setup>
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
const props = defineProps({
signin: {
type: Function,
default: () => {},
},
});
const tabs = [
{ image: "../static/tab-vip.png" },
@@ -18,7 +7,6 @@ const tabs = [
];
function handleTabClick(index) {
if (index === 1 && !user.value.id) return props.signin();
if (index === 0) {
uni.navigateTo({
url: "/pages/be-vip",
@@ -26,7 +14,7 @@ function handleTabClick(index) {
}
if (index === 1) {
uni.navigateTo({
url: "/pages/point-book-create",
url: "/pages/point-book",
});
}
if (index === 2) {
@@ -56,7 +44,7 @@ function handleTabClick(index) {
<style scoped>
.footer {
height: 120px;
height: 117px;
width: 100vw;
position: relative;
display: flex;
@@ -72,17 +60,22 @@ function handleTabClick(index) {
}
.tab-item {
z-index: 1;
display: flex;
justify-content: center;
}
.tab-item > image {
width: 86%;
}
.tab-item:nth-child(2) {
transform: translate(25%, 20%);
transform: translate(25%, 30%);
}
.tab-item:nth-child(3) {
transform: translate(6%, -10%);
margin-bottom: 25rpx;
}
.tab-item:nth-child(3) > image {
width: 140rpx;
}
.tab-item:nth-child(4) {
transform: translate(-25%, 20%);
transform: translate(-25%, 30%);
}
</style>

View File

@@ -1,5 +1,5 @@
<script setup>
import { ref, watch, onMounted, onUnmounted } from "vue";
import { ref, watch, onMounted, onBeforeUnmount } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { isGamingAPI, getCurrentGameAPI } from "@/apis";
import { debounce } from "@/util";
@@ -49,7 +49,7 @@ const gameOver = () => {
onMounted(() => {
uni.$on("game-over", gameOver);
});
onUnmounted(() => {
onBeforeUnmount(() => {
uni.$off("game-over", gameOver);
});
</script>

View File

@@ -182,6 +182,7 @@ defineProps({
}
.players > view > view > image:first-child {
width: 72px;
height: 20px;
}
.players > view > view > view:last-child {
font-size: 10px;

View File

@@ -46,17 +46,18 @@ defineProps({
v-for="(player, index) in blueTeam"
:key="index"
:style="{
margin: blueTeam.length === 2 ? '0 12px' : '0 6px',
margin: blueTeam.length === 2 ? '0 -5px' : '0 6px',
width: `${100 / blueTeam.length - blueTeam.length * 3}%`,
}"
>
<Avatar :src="player.avatar" :rankLvl="player.rankLvl" />
<Avatar :src="player.avatar" :rankLvl="player.rankLvl" :size="40" />
<text class="player-name">{{ player.name }}</text>
</view>
<image
v-if="winner === 1"
src="../static/winner-badge.png"
mode="widthFix"
class="left-winner-badge"
/>
</view>
<view>
@@ -64,17 +65,18 @@ defineProps({
v-for="(player, index) in redTeam"
:key="index"
:style="{
margin: redTeam.length === 2 ? '0 12px' : '0 6px',
margin: redTeam.length === 2 ? '0 -5px' : '0 6px',
width: `${100 / redTeam.length - redTeam.length * 3}%`,
}"
>
<Avatar :src="player.avatar" :rankLvl="player.rankLvl" />
<Avatar :src="player.avatar" :rankLvl="player.rankLvl" :size="40" />
<text class="player-name">{{ player.name }}</text>
</view>
<image
v-if="winner === 0"
src="../static/winner-badge.png"
mode="widthFix"
class="right-winner-badge"
/>
</view>
</view>
@@ -93,7 +95,7 @@ defineProps({
>
<Avatar
:src="player.avatar"
:rankLvl="player.rankLvl"
:rankLvl="showRank ? undefined : player.rankLvl"
:size="40"
:rank="showRank ? index + 1 : 0"
/>
@@ -120,12 +122,12 @@ defineProps({
}
.players > view {
width: 50%;
height: 80px;
height: 75px;
color: #fff9;
font-size: 12px;
overflow: hidden;
position: relative;
padding-top: 7px;
padding-top: 5px;
display: flex;
justify-content: center;
}
@@ -135,13 +137,6 @@ defineProps({
.players > view:last-child {
background-color: #692735;
}
.players > view > image:last-child {
position: absolute;
width: 50px;
top: -10%;
left: -5%;
transform: rotate(-12deg);
}
.players > view > view {
display: flex;
flex-direction: column;
@@ -170,11 +165,25 @@ defineProps({
flex: 0 0 auto;
}
.player-name {
margin-top: 5px;
margin-top: 3px;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
.left-winner-badge {
position: absolute;
width: 50px;
top: -12%;
left: -5%;
transform: rotate(-12deg);
}
.right-winner-badge {
position: absolute;
width: 50px;
top: -12%;
right: -5%;
transform: rotate(36deg);
}
</style>

View File

@@ -49,21 +49,11 @@ const props = defineProps({
const showsimul = ref(false);
const latestOne = ref(null);
const bluelatestOne = ref(null);
const prevScores = ref([]);
const prevBlueScores = ref([]);
// const startCount = ref(false);
const timer = ref(null);
// watch(
// () => props.start,
// (newVal) => {
// startCount.value = newVal;
// },
// {
// immediate: true,
// }
// );
watch(
() => props.scores,
(newVal) => {
@@ -85,10 +75,10 @@ watch(
() => props.blueScores,
(newVal) => {
if (newVal.length - prevBlueScores.value.length === 1) {
latestOne.value = newVal[newVal.length - 1];
bluelatestOne.value = newVal[newVal.length - 1];
if (timer.value) clearTimeout(timer.value);
timer.value = setTimeout(() => {
latestOne.value = null;
bluelatestOne.value = null;
}, 1000);
}
prevBlueScores.value = [...newVal];
@@ -98,13 +88,13 @@ watch(
}
);
function calcRealX(num, offset = 12) {
function calcRealX(num, offset = 3.4) {
const len = 20.4 + num;
return `calc(${(len / 40.8) * 100}% - ${offset / 2}px)`;
return `calc(${(len / 40.8) * 100 - offset / 2}%)`;
}
function calcRealY(num, offset = 12) {
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}px)`;
return `calc(${(len / 40.8) * 100 - offset / 2}%)`;
}
const simulShoot = async () => {
if (device.value.deviceId) await simulShootAPI(device.value.deviceId);
@@ -136,8 +126,8 @@ onMounted(() => {
v-if="latestOne && user.id === latestOne.playerId"
class="e-value fade-in-out"
:style="{
left: calcRealX(latestOne.ring ? latestOne.x : 0, 66),
top: calcRealY(latestOne.ring ? latestOne.y : 0, 150),
left: calcRealX(latestOne.ring ? latestOne.x : 0, 20),
top: calcRealY(latestOne.ring ? latestOne.y : 0, 40),
}"
>
经验 +1
@@ -146,8 +136,8 @@ onMounted(() => {
v-if="latestOne"
class="round-tip fade-in-out"
:style="{
left: calcRealX(latestOne.ring ? latestOne.x : 0, 100),
top: calcRealY(latestOne.ring ? latestOne.y : 0, 100),
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
@@ -176,7 +166,7 @@ onMounted(() => {
<view
v-if="bow.ring > 0"
:class="`hit ${
index === blueScores.length - 1 && latestOne ? 'pump-in' : ''
index === blueScores.length - 1 && bluelatestOne ? 'pump-in' : ''
}`"
:style="{
left: calcRealX(bow.x),
@@ -205,13 +195,16 @@ onMounted(() => {
<style scoped>
.container {
width: calc(100% - 30px);
width: calc(100vw - 30px);
height: calc(100vw - 30px);
padding: 0px 15px;
position: relative;
}
.target {
position: relative;
margin: 10px;
width: calc(100% - 20px);
height: calc(100% - 20px);
}
.e-value {
position: absolute;
@@ -243,25 +236,32 @@ onMounted(() => {
}
.target > image:last-child {
width: 100%;
height: 100%;
}
.hit {
position: absolute;
width: 12px;
height: 12px;
width: 3.4%;
height: 3.4%;
min-width: 3.4%;
min-height: 3.4%;
border-radius: 50%;
border: 1px solid #fff;
z-index: 1;
color: #fff;
font-size: 8px;
text-align: center;
line-height: 10px;
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%); */
}
.hit > text {
transform: scaleX(0.7);
transform: scaleX(0.7) translateY(-0.5px);
display: block;
font-weight: bold;
width: 100%;
text-align: center;
}
.header {
width: 100%;

View File

@@ -19,6 +19,10 @@ const props = defineProps({
type: Function,
default: null,
},
editMode: {
type: Boolean,
default: true,
},
});
const rect = ref({});
@@ -27,8 +31,6 @@ const isDragging = ref(false);
const dragStartPos = ref({ x: 0, y: 0 });
const capsuleHeight = ref(0);
const scale = ref(1);
const zoomPos = ref({ x: 0, y: 0 });
const targetPos = ref({ x: 0, y: 0 });
let lastMoveTime = 0;
// 点击靶纸创建新的点
@@ -40,21 +42,14 @@ const onClick = async (e) => {
) {
return;
}
if (props.id === 7 || props.id === 9) {
scale.value = 1.5;
}
const newArrow = {
x: e.detail.x - zoomPos.value.x - 6 / scale.value,
y:
e.detail.y -
rect.value.top -
capsuleHeight.value -
zoomPos.value.y -
6 / scale.value,
x: (e.detail.x - 6) * scale.value,
y: (e.detail.y - rect.value.top - capsuleHeight.value - 6) * scale.value,
};
targetPos.value = {
x: zoomPos.value.x,
y: zoomPos.value.y,
};
const side = rect.value.width;
newArrow.ring = calcRing(
props.id,
@@ -72,10 +67,6 @@ const onClick = async (e) => {
// 确认添加箭矢
const confirmAdd = () => {
if (props.onChange) {
targetPos.value = {
x: zoomPos.value.x,
y: zoomPos.value.y,
};
props.onChange({
x: arrow.value.x / scale.value,
y: arrow.value.y / scale.value,
@@ -83,15 +74,13 @@ const confirmAdd = () => {
});
}
arrow.value = null;
scale.value = 1;
};
// 删除箭矢
const deleteArrow = () => {
arrow.value = null;
targetPos.value = {
x: zoomPos.value.x,
y: zoomPos.value.y,
};
scale.value = 1;
};
// 开始拖拽 - 同样修复坐标获取
@@ -142,21 +131,17 @@ const onDrag = async (e) => {
const endDrag = (e) => {
isDragging.value = false;
};
const onScale = (e) => {
lastMoveTime = Date.now();
const lastScale = scale.value;
scale.value = e.detail.scale;
zoomPos.value = { x: e.detail.x, y: e.detail.y };
if (arrow.value) {
arrow.value.x = arrow.value.x * (scale.value / lastScale);
arrow.value.y = arrow.value.y * (scale.value / lastScale);
}
};
const onMove = (e) => {
if (e.detail.source) {
zoomPos.value = { x: e.detail.x, y: e.detail.y };
const getNewPos = () => {
if (props.id === 7 || props.id === 9) {
if (arrow.value.y > 1.4)
return { left: "-12px", bottom: "calc(50% - 12px)" };
} else {
if (arrow.value.y > 0.88) {
return { left: "-12px", bottom: "calc(50% - 12px)" };
}
}
return { left: "calc(50% - 12px)", bottom: "-12px" };
};
onMounted(async () => {
@@ -169,25 +154,21 @@ onMounted(async () => {
<template>
<view
:style="{ overflowY: editMode ? 'auto' : 'hidden' }"
class="container"
@tap="onClick"
@touchmove="onDrag"
@touchend="endDrag"
>
<movable-area class="move-area" scale-area>
<movable-view
class="move-view"
direction="all"
scale
:x="targetPos.x"
:y="targetPos.y"
:scale-min="1"
:scale-max="2"
:scale-value="scale"
:animation="false"
@scale="onScale"
@change="onMove"
:out-of-bounds="true"
<movable-area
class="move-area"
:style="{
width: scale * 100 + 'vw',
height: scale * 100 + '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
@@ -202,6 +183,9 @@ onMounted(async () => {
<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>
@@ -212,45 +196,37 @@ onMounted(async () => {
direction="all"
:animation="false"
:out-of-bounds="true"
:x="arrow ? (rect.width * arrow.x) / scale : 0"
:y="arrow ? (rect.width * arrow.y) / scale : 0"
:x="arrow ? rect.width * arrow.x : 0"
:y="arrow ? rect.width * arrow.y : 0"
>
<view class="point"> </view>
<view
v-if="arrow"
class="edit-buttons"
@touchstart.stop
:style="{ transform: `scale(${1 / scale})` }"
>
<view v-if="arrow" class="edit-buttons" @touchstart.stop>
<view class="edit-btn-text">
<!-- <text v-if="arrow.ring === 0" :style="{ width: '100%' }"
>未上靶</text
> -->
<text>{{ arrow.ring === 0 ? "M" : arrow.ring }}</text>
<!-- <text
<text
v-if="arrow.ring > 0"
:style="{
fontSize: '16px',
marginLeft: '2px',
}"
></text
> -->
>points</text
>
</view>
<view class="edit-btn confirm-btn" @touchstart.stop="confirmAdd">
<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)"
>
<view class="edit-btn drag-btn" @touchstart.stop="startDrag($event)">
<image src="../static/arrow-edit-move.png" mode="widthFix" />
</view>
</view>
</movable-view>
</movable-view>
</movable-area>
</view>
</template>
@@ -259,14 +235,24 @@ onMounted(async () => {
.container {
width: 100vw;
height: 100vw;
overflow: hidden;
transform: translateY(-10px);
overflow-x: hidden;
}
.container::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.move-area {
width: 100%;
height: 100%;
position: relative;
transition: all 0.3s ease;
}
.move-area > image {
width: 90%;
height: 90%;
margin: 5%;
}
.move-view {
@@ -300,6 +286,7 @@ onMounted(async () => {
background-color: #ff4444;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
transition: all 0.1s linear;
position: relative;
}
.point > text {
@@ -323,8 +310,8 @@ onMounted(async () => {
.edit-btn-text {
width: 100%;
display: flex;
/* justify-content: center; */
margin-left: 10px;
justify-content: center;
/* margin-left: 10px; */
}
.edit-btn-text > text {
@@ -350,8 +337,7 @@ onMounted(async () => {
}
.confirm-btn {
left: calc(50% - 12px);
bottom: -12px;
transition: all 0.3s ease;
}
.delete-btn {

View File

@@ -1,5 +1,5 @@
<script setup>
import { ref, onMounted, onUnmounted } 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";
@@ -44,30 +44,69 @@ const props = defineProps({
const showHint = ref(false);
const hintType = ref(0);
const capsuleHeight = ref(0);
const isLoading = ref(false);
const showGlobalHint = (type) => {
hintType.value = type;
showHint.value = true;
};
const hideGlobalHint = () => {
showHint.value = false;
};
onMounted(() => {
const menuBtnInfo = uni.getMenuButtonBoundingClientRect();
capsuleHeight.value = menuBtnInfo.top - 9;
});
onUnmounted(() => {
// const pages = getCurrentPages();
// const currentPage = pages[pages.length - 1];
// uni.setStorageSync("last-route", currentPage.route);
});
onShow(() => {
uni.$showHint = showGlobalHint;
uni.$hideHint = hideGlobalHint;
showHint.value = false;
});
const backToGame = debounce(async () => {
const result = await getCurrentGameAPI();
if (isLoading.value) return; // 防止重复点击
try {
isLoading.value = true;
// 设置请求超时
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);
uni.showToast({
title: error.message || '网络请求失败,请重试',
icon: 'none'
});
} finally {
isLoading.value = false;
}
});
const goBack = () => {
uni.navigateBack();
};
@@ -100,7 +139,13 @@ const goBack = () => {
<button hover-class="none" @click="() => (showHint = false)">
不进入
</button>
<button hover-class="none" @click="backToGame">进入</button>
<button
hover-class="none"
@click="backToGame"
:disabled="isLoading"
>
{{ isLoading ? '加载中...' : '进入' }}
</button>
</view>
</view>
<view v-if="hintType === 2" class="tip-content">
@@ -168,4 +213,10 @@ const goBack = () => {
background-color: #fed847;
color: #000;
}
.tip-content > view > button:disabled {
background-color: #ccc;
color: #666;
opacity: 0.6;
}
</style>

View File

@@ -27,7 +27,10 @@ const createRoom = async () => {
if (battleMode.value === 2) size = 10;
if (battleMode.value === 3) size = 4;
if (battleMode.value === 4) size = 6;
const result = await createRoomAPI(battleMode.value === 2 ? 2 : 1, size);
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;

View File

@@ -1,5 +1,5 @@
<script setup>
import { ref, watch, onMounted, onUnmounted } from "vue";
import { ref, watch, onMounted, computed } from "vue";
import { getPointBookConfigAPI } from "@/apis";
const props = defineProps({
itemIndex: {
@@ -27,13 +27,18 @@ 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];
const data = ref([]);
const selectedIndex = ref(-1);
const secondSelectIndex = ref(-1);
const meter = ref("");
const sets = ref("");
const arrowAmount = ref("");
const onSelectItem = (index) => {
selectedIndex.value = index;
if (props.itemIndex === 0) {
@@ -42,27 +47,58 @@ const onSelectItem = (index) => {
props.onSelect(props.itemIndex, distances[index]);
} else if (props.itemIndex === 2) {
props.onSelect(props.itemIndex, data.value[index]);
} else if (props.itemIndex === 3 && secondSelectIndex.value !== -1) {
} else if (props.itemIndex === 3) {
if (secondSelectIndex.value !== -1) {
props.onSelect(
props.itemIndex,
`${selectedIndex.value}/${groupArrows[secondSelectIndex.value]}`
);
}
}
};
const onSelectSecondItem = (index) => {
secondSelectIndex.value = index;
if (selectedIndex.value !== -1) {
props.onSelect(
props.itemIndex,
`${selectedIndex.value}/${groupArrows[secondSelectIndex.value]}`
`${selectedIndex.value < 5 ? selectedIndex.value : sets.value}/${
groupArrows[secondSelectIndex.value]
}`
);
}
};
const meter = ref("");
const onMeterChange = (e) => {
meter.value = e.detail.value;
props.onSelect(props.itemIndex, e.detail.value);
};
const onSetsChange = (e) => {
if (!e.detail.value) return;
sets.value = Math.min(30, Number(e.detail.value));
if (!sets.value) return;
if (secondSelectIndex.value !== -1) {
props.onSelect(
props.itemIndex,
`${sets.value}/${
secondSelectIndex.value === 99
? arrowAmount.value
: groupArrows[secondSelectIndex.value]
}`
);
}
};
const onArrowAmountChange = (e) => {
if (!e.detail.value) return;
arrowAmount.value = Math.min(60, Number(e.detail.value));
if (!arrowAmount.value) return;
if (selectedIndex.value !== -1) {
props.onSelect(
props.itemIndex,
`${selectedIndex.value === 99 ? sets.value : selectedIndex.value}/${
arrowAmount.value
}`
);
}
};
watch(
() => props.value,
(newValue) => {
@@ -114,6 +150,17 @@ 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} sets/${
secondSelectIndex.value === 99
? arrowAmount.value
: groupArrows[secondSelectIndex.value]
} arrows`;
});
onMounted(async () => {
const config = uni.getStorageSync("point-book-config");
if (config) {
@@ -135,24 +182,21 @@ onMounted(async () => {
}"
>
<view @click="() => onExpand(itemIndex, !expand)">
<text :style="{ opacity: expand ? 1 : 0 }">{{
itemIndex !== 3 ? itemTexts[itemIndex] : "选择组"
}}</text>
<view></view>
<block>
<text :style="{ opacity: expand ? 0 : 1 }" v-if="itemIndex === 0">{{
<text v-if="expand" :style="{ color: '#999', fontWeight: 'normal' }">{{
itemIndex !== 3 ? itemTexts[itemIndex] : "Select Sets"
}}</text>
<text v-if="!expand && itemIndex === 0">{{
value || itemTexts[itemIndex]
}}</text>
<text :style="{ opacity: expand ? 0 : 1 }" v-if="itemIndex === 1">{{
value && value > 0 ? value + "" : itemTexts[itemIndex]
<text v-if="!expand && itemIndex === 1">{{
value && value > 0 ? value + " m" : itemTexts[itemIndex]
}}</text>
<text :style="{ opacity: expand ? 0 : 1 }" v-if="itemIndex === 2">{{
<text v-if="!expand && itemIndex === 2">{{
value || itemTexts[itemIndex]
}}</text>
<text :style="{ opacity: expand ? 0 : 1 }" v-if="itemIndex === 3">{{
selectedIndex !== -1 && secondSelectIndex !== -1
? `${selectedIndex + 1}/${groupArrows[secondSelectIndex]}`
: itemTexts[itemIndex]
}}</text>
<text v-if="!expand && itemIndex === 3">{{ formatSetAndAmount }}</text>
</block>
<button hover-class="none">
<image
@@ -186,7 +230,7 @@ onMounted(async () => {
@click="onSelectItem(index)"
>
<text>{{ item }}</text>
<text></text>
<text>m</text>
</view>
<view
:style="{
@@ -195,12 +239,13 @@ onMounted(async () => {
>
<input
v-model="meter"
placeholder="自定义"
type="number"
placeholder="Custom"
placeholder-style="color: #DDDDDD"
@focus="() => (selectedIndex = 9)"
@change="onMeterChange"
@blur="onMeterChange"
/>
<text></text>
<text>m</text>
</view>
</view>
<view v-if="itemIndex === 2" class="bowtarget-items">
@@ -219,7 +264,7 @@ onMounted(async () => {
<view v-if="itemIndex === 3">
<view class="amount-items">
<view
v-for="i in 12"
v-for="i in 4"
:key="i"
:style="{
borderColor: selectedIndex === i ? '#fed847' : '#eeeeee',
@@ -227,12 +272,32 @@ onMounted(async () => {
@click="onSelectItem(i)"
>
<text>{{ i }}</text>
<text></text>
<text>sets</text>
</view>
<view
:style="{
borderColor: selectedIndex === 99 ? '#fed847' : '#eeeeee',
}"
>
<input
placeholder="1 ~ 30"
type="number"
placeholder-style="color: #DDDDDD"
v-model="sets"
@focus="() => (selectedIndex = 99)"
@blur="onSetsChange"
/>
<text>sets</text>
</view>
</view>
<view
:style="{ marginTop: '5px', marginBottom: '10px', color: '#999999' }"
>选择每组的箭数</view
:style="{
marginTop: '5px',
marginBottom: '10px',
color: '#999999',
textAlign: 'center',
}"
>Select arrows per set</view
>
<view class="amount-items">
<view
@@ -244,7 +309,23 @@ onMounted(async () => {
@click="onSelectSecondItem(index)"
>
<text>{{ item }}</text>
<text></text>
<text>arrows</text>
</view>
<view
:style="{
borderColor: secondSelectIndex === 99 ? '#fed847' : '#eeeeee',
}"
>
<input
placeholder="1 ~ 60"
type="number"
placeholder-style="color: #DDDDDD"
v-model="arrowAmount"
maxlength="99"
@focus="() => (secondSelectIndex = 99)"
@blur="onArrowAmountChange"
/>
<text>arrows</text>
</view>
</view>
</view>
@@ -269,9 +350,8 @@ onMounted(async () => {
justify-content: space-between;
height: 50px;
}
.container > view:first-child > text:first-child {
.container > view:first-child > view:first-child {
width: 85px;
color: #999999;
}
.container > view:first-child > text:nth-child(2) {
font-weight: 500;
@@ -352,4 +432,12 @@ onMounted(async () => {
width: 100%;
text-align: center;
}
.amount-items > view:last-child {
grid-column: 1 / -1;
width: 100%;
}
.amount-items > view:last-child > input {
width: 85%;
text-align: center;
}
</style>

View File

@@ -1,6 +1,17 @@
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { ref, computed, onMounted, onBeforeUnmount } from "vue";
import HeaderProgress from "@/components/HeaderProgress.vue";
import Avatar from "@/components/Avatar.vue";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
const currentPage = computed(() => {
const pages = getCurrentPages();
return pages[pages.length - 1].route;
});
const props = defineProps({
title: {
@@ -18,18 +29,47 @@ const props = defineProps({
});
const onClick = () => {
if (props.onBack) props.onBack();
else uni.navigateBack();
if (props.onBack) {
props.onBack();
} else {
const pages = getCurrentPages();
if (pages.length > 1) {
uni.navigateBack();
} else {
uni.redirectTo({
url: "/pages/index",
});
}
}
};
const toUserPage = () => {
uni.navigateTo({
url: "/pages/user",
});
};
const signin = () => {
if (!user.value.id) {
uni.navigateTo({
url: "/pages/sign-in",
});
}
};
const loading = ref(false);
const showLoader = ref(false);
const pointBook = ref(null);
const showProgress = ref(false);
const heat = ref(0);
const updateLoading = (value) => {
loading.value = value;
};
const updateHot = (value) => {
heat.value = value;
};
onMounted(() => {
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1];
@@ -37,19 +77,20 @@ onMounted(() => {
pointBook.value = uni.getStorageSync("point-book");
}
if (
currentPage.route === "pages/battle-room" ||
currentPage.route === "pages/team-battle" ||
currentPage.route === "pages/melee-match"
) {
showLoader.value = true;
}
uni.$on("update-header-loading", updateLoading);
if (currentPage.route === "pages/team-battle") {
showProgress.value = true;
}
uni.$on("update-header-loading", updateLoading);
uni.$on("update-hot", updateHot);
});
onUnmounted(() => {
onBeforeUnmount(() => {
uni.$off("update-header-loading", updateLoading);
uni.$off("update-hot", updateHot);
});
</script>
@@ -64,6 +105,30 @@ onUnmounted(() => {
/>
</view>
<view :style="{ color: whiteBackArrow ? '#fff' : '#000' }">
<view
v-if="currentPage === 'pages/point-book'"
class="user-header"
@click="signin"
>
<block v-if="user.id">
<Avatar
:src="user.avatar"
:onClick="toUserPage"
:size="40"
borderColor="#333"
/>
<text class="truncate">{{ user.nickName }}</text>
<image
v-if="heat"
:src="`../static/hot${heat}.png`"
mode="widthFix"
/>
</block>
<block v-else>
<image src="../static/user-icon.png" mode="widthFix" />
<text>新来的弓箭手你好呀~</text>
</block>
</view>
<block
v-if="
'-凹造型-感知距离-小试牛刀'.indexOf(title) === -1 ||
@@ -191,4 +256,25 @@ onUnmounted(() => {
display: flex;
justify-content: center;
}
.user-header {
display: flex;
align-items: center;
justify-content: flex-start;
}
.user-header > image:first-child {
width: 40px;
height: 40px;
border-radius: 50%;
border: 2rpx solid #333;
}
.user-header > image:last-child {
width: 36rpx;
}
.user-header > text:nth-child(2) {
font-weight: 500;
font-size: 30rpx;
color: #333333;
margin: 0 20rpx;
max-width: 300rpx;
}
</style>

View File

@@ -1,5 +1,5 @@
<script setup>
import { ref, watch, onMounted, onUnmounted } from "vue";
import { ref, watch, onMounted, onBeforeUnmount } from "vue";
import audioManager from "@/audioManager";
import { MESSAGETYPES } from "@/constants";
import useStore from "@/store";
@@ -12,33 +12,37 @@ const melee = ref(false);
const timer = ref(null);
const sound = ref(true);
const currentSound = ref("");
const currentRound = ref(1);
const totalRound = ref(1);
const currentRound = ref(0);
const currentRoundEnded = ref(false);
const ended = ref(false);
const halfTime = ref(false);
const currentShot = ref(0);
const totalShot = ref(0);
const yourTurn = ref(false);
watch(
() => tips.value,
(newVal) => {
let key = "";
if (newVal.includes("红队")) key = "请红方射";
if (newVal.includes("蓝队")) key = "请蓝方射";
if (key && sound.value) {
if (newVal.includes("红队")) key = "请红方射";
if (newVal.includes("蓝队")) key = "请蓝方射";
if (!sound.value) return;
if (currentRoundEnded.value) {
currentRound.value += 1;
// 播放当前轮次语音
audioManager.play(
`${["一", "二", "三", "四", "五"][currentRound.value - 1]}`
);
}
// 延迟播放队伍提示音
setTimeout(
() => {
if (key && !yourTurn.value) audioManager.play(key);
currentRoundEnded.value = false;
if (currentRound.value === 1) audioManager.play("第一轮");
if (currentRound.value === 2) audioManager.play("第二轮");
if (currentRound.value === 3) audioManager.play("第三轮");
if (currentRound.value === 4) audioManager.play("第四轮");
if (currentRound.value === 5) audioManager.play("第五轮");
setTimeout(() => {
audioManager.play(key);
}, 1000);
} else {
audioManager.play(key);
}
}
yourTurn.value = false;
},
currentRoundEnded.value ? 1000 : 0
);
}
);
@@ -52,14 +56,28 @@ async function onReceiveMessage(messages = []) {
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}`
: "未上靶";
console.log(currentSound.value);
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) {
@@ -67,8 +85,9 @@ async function onReceiveMessage(messages = []) {
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 + 1;
currentRound.value = msg.preRoundResult.currentRound;
currentRoundEnded.value = true;
}
} else if (msg.constructor === MESSAGETYPES.HalfTimeOver) {
@@ -77,14 +96,15 @@ async function onReceiveMessage(messages = []) {
} else if (msg.constructor === MESSAGETYPES.MatchOver) {
audioManager.play("比赛结束");
} else if (msg.constructor === MESSAGETYPES.FinalShoot) {
totalShot.value = 0;
audioManager.play("决金箭轮");
} else if (msg.constructor === MESSAGETYPES.ShootSyncMePracticeID) {
ended.value = true;
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.battleMode === 2;
melee.value = msg.battleInfo.config.mode === 2;
}
}
});
@@ -99,14 +119,20 @@ const onUpdateTips = (newVal) => {
tips.value = newVal;
};
const onUpdateTotalShot = (newVal) => {
currentShot.value = newVal.currentShot;
totalShot.value = newVal.totalShot;
};
onMounted(() => {
uni.$on("update-shot", onUpdateTotalShot);
uni.$on("update-tips", onUpdateTips);
uni.$on("socket-inbox", onReceiveMessage);
uni.$on("play-sound", playSound);
});
onUnmounted(() => {
uni.$off("update-tips", onUpdateTips);
onBeforeUnmount(() => {
uni.$off("update-shot", onUpdateTotalShot);
uni.$off("socket-inbox", onReceiveMessage);
uni.$off("play-sound", playSound);
if (timer.value) clearInterval(timer.value);
@@ -116,7 +142,7 @@ onUnmounted(() => {
<template>
<view class="container">
<text>{{ tips }}</text>
<!-- <text> ({{ currentRound }}/{{ totalRound }}) </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`"

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>

View File

@@ -1,5 +1,5 @@
<script setup>
import { ref, onMounted, onUnmounted, watch } from "vue";
import { ref, onMounted, onBeforeUnmount, watch } from "vue";
const props = defineProps({
stopMatch: {
type: Function,
@@ -94,7 +94,7 @@ onMounted(() => {
textStyles.value = getTextStyle(totalTop.value);
}, 40);
});
onUnmounted(() => {
onBeforeUnmount(() => {
if (timer.value) clearInterval(timer.value);
});
</script>

View File

@@ -66,6 +66,7 @@ const seats = new Array(props.total).fill(1);
.players > view > image:nth-child(2) {
width: 40px;
height: 40px;
min-height: 40px;
margin: 0 10px;
border: 1px solid #fff;
border-radius: 50%;

View File

@@ -10,6 +10,12 @@ const props = defineProps({
const bowOptions = ref({});
const targetOptions = ref({});
const toDetailPage = () => {
uni.navigateTo({
url: `/pages/point-book-detail?id=${props.data.id}`,
});
};
onMounted(() => {
const result = uni.getStorageSync("point-book-config");
(result.bowOption || []).forEach((item) => {
@@ -22,9 +28,10 @@ onMounted(() => {
</script>
<template>
<view class="container">
<view class="container" @click="toDetailPage">
<view>
<view class="labels">
<view></view>
<text>{{
bowOptions[data.bowType] ? bowOptions[data.bowType].name : ""
}}</text>
@@ -38,10 +45,15 @@ onMounted(() => {
<view>
<text>{{ data.createAt }}</text>
</view>
<view>
<text>黄心率{{ Number((data.yellowRate * 100).toFixed(2)) }}%</text>
<text>10环数{{ data.tenRings }}</text>
<text>平均{{ data.averageRing }}</text>
</view>
</view>
<view>
<image src="../static/bow-target.png" mode="widthFix" />
<view class="aroow-amount">
<view class="arrow-amount">
<text></text>
<text>{{ data.arrows * data.groups }}</text>
<text></text>
@@ -53,37 +65,54 @@ onMounted(() => {
<style scoped>
.container {
background-color: #fff;
border-radius: 15px;
display: flex;
margin-bottom: 15px;
height: 24vw;
align-items: center;
border-radius: 25rpx;
height: 200rpx;
border: 2rpx solid #fed848;
}
.container > view {
position: relative;
margin-left: 15px;
}
.container > view:first-child {
width: calc(100% - 5vw);
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
height: calc(100% - 50rpx);
color: #333333;
}
.container > view:first-child > view {
width: 100%;
height: 50%;
display: flex;
position: relative;
}
.container > view:first-child > view:nth-child(3) {
display: flex;
align-items: center;
font-size: 20rpx;
color: #666;
}
.container > view:first-child > view:last-child {
font-weight: 500;
.container > view:first-child > view:nth-child(3) > text {
margin-right: 10rpx;
}
.labels {
align-items: flex-end !important;
}
.labels > view:first-child {
position: absolute;
bottom: 0;
height: 10rpx;
background: #fee947;
border-radius: 5rpx;
width: 300rpx;
}
.labels > text {
font-size: 12px;
color: #333333;
border: 1px solid #eee;
font-size: 26rpx;
margin-right: 10px;
border-radius: 10px;
padding: 5px 10px;
position: relative;
color: #333;
}
.container > view:last-child {
margin-right: 1vw;
@@ -91,7 +120,7 @@ onMounted(() => {
.container > view:last-child > image {
width: 24vw;
}
.aroow-amount {
.arrow-amount {
position: absolute;
background-color: #0009;
border-radius: 10px;
@@ -101,10 +130,10 @@ onMounted(() => {
width: 60px;
display: flex;
justify-content: center;
top: calc(50% - 11px);
top: calc(50% - 13px);
left: calc(50% - 30px);
}
.aroow-amount > text:nth-child(2) {
.arrow-amount > text:nth-child(2) {
color: #fff;
font-size: 14px;
margin: 0 3px;

246
src/components/RewardUs.vue Normal file
View File

@@ -0,0 +1,246 @@
<script setup>
import { ref, reactive, watch, onMounted } from "vue";
import { getAppConfig, donateAPI } from "@/apis";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { config } = storeToRefs(store);
const { updateConfig } = store;
const props = defineProps({
show: {
type: Boolean,
default: false,
},
onClose: {
type: Function,
default: null,
},
});
const amounts = ref([]);
const selected = ref(null);
const checked = ref(false);
const formData = reactive({
name: "",
account: "",
organization: "",
suggestion: "",
});
const onPay = async (index) => {
selected.value = index;
const result = await donateAPI(
amounts.value[index],
formData.name,
formData.account,
formData.organization,
formData.suggestion
);
const params = result.order.jsApi.params;
if (params) {
wx.requestPayment({
timeStamp: params.timeStamp,
nonceStr: params.nonceStr,
package: params.package,
paySign: params.paySign,
signType: "RSA",
async success(res) {
uni.showToast({
title: "感谢您的支持!",
icon: "none",
});
props.onClose();
},
fail(res) {
console.log("pay error", res);
uni.showToast({
title: "取消支付",
icon: "none",
});
props.onClose();
},
});
}
};
watch(
() => config.value.donateAmount,
(value) => {
amounts.value = value || [];
},
{ immediate: true }
);
watch(
() => props.show,
() => {
selected.value = null;
formData.name = "";
formData.account = "";
formData.organization = "";
formData.suggestion = "";
}
);
onMounted(async () => {
if (!config.value.donateAmount) {
const config = await getAppConfig();
updateConfig(config);
}
});
</script>
<template>
<view class="container">
<image src="../static/donate.png" mode="widthFix" />
<text>感谢您对我们公益项目的支持</text>
<view class="amounts">
<button
v-for="(item, index) in amounts"
:key="index"
hover-class="none"
@click="onPay(index)"
:style="{
background: selected === index ? '#fed848' : 'white',
}"
>
<text></text>
<text>{{ item }}</text>
</button>
</view>
<view
@click="checked = !checked"
:style="{ marginBottom: !checked ? '20rpx' : '0' }"
>
<image v-if="checked" src="../static/checked.png" mode="widthFix" />
<view v-else></view>
<text>我想给建议(选填</text>
</view>
<view v-if="checked">
<view>
<text>您的姓名</text>
<input v-model="formData.name" />
</view>
<view>
<text>手机/微信号</text>
<input v-model="formData.account" />
</view>
<view>
<text>所在机构</text>
<input v-model="formData.organization" />
</view>
<view>
<text>建议</text>
<textarea v-model="formData.suggestion" />
</view>
</view>
</view>
</template>
<style scoped>
.container {
display: flex;
flex-direction: column;
align-items: center;
transition: all 0.3s ease-in-out;
}
.container > image:first-child {
width: 200rpx;
position: absolute;
top: -114rpx;
}
.container > text:nth-child(2) {
font-weight: 500;
font-size: 28rpx;
color: #333333;
margin: 40rpx 0;
}
.amounts {
display: grid;
grid-template-columns: repeat(3, 1fr);
row-gap: 20rpx;
column-gap: 20rpx;
}
.amounts > button {
width: 150rpx;
height: 88rpx;
background-color: #ffffff;
border-radius: 20rpx;
border: 1rpx solid #fed848;
color: #333;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
}
.amounts > button > text:first-child {
font-size: 20rpx;
margin-right: 3rpx;
}
.amounts > button > text:last-child {
font-size: 34rpx;
}
.container > view:nth-child(4) {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
margin-top: 20rpx;
}
.container > view:nth-child(4) > view {
width: 32rpx;
height: 32rpx;
margin: 0 10rpx;
border: 1rpx solid #e3e3e3;
border-radius: 50%;
}
.container > view:nth-child(4) > image {
width: 32rpx;
height: 32rpx;
margin: 0 10rpx;
}
.container > view:nth-child(4) > text {
font-size: 24rpx;
color: #333333;
margin: 20rpx 0;
}
.container > view:nth-child(5) {
margin-bottom: 25rpx;
}
.container > view:nth-child(5) > view {
width: 100%;
display: flex;
justify-content: flex-start;
margin-bottom: 20rpx;
}
.container > view:nth-child(5) > view > text {
font-size: 24rpx;
color: #333333;
width: 30%;
text-align: right;
padding-right: 20rpx;
height: 60rpx;
line-height: 60rpx;
}
.container > view:nth-child(5) > view > input {
border-radius: 12rpx;
border: 1rpx solid #fed848;
height: 40rpx;
line-height: 40rpx;
padding: 10rpx 20rpx;
font-size: 30rpx;
margin-right: 10rpx;
width: 55%;
}
.container > view:nth-child(5) > view > textarea {
width: 55%;
border-radius: 12rpx;
border: 1rpx solid #fed848;
height: 100rpx;
line-height: 40rpx;
padding: 10rpx 20rpx;
font-size: 30rpx;
margin-right: 10rpx;
}
</style>

View File

@@ -0,0 +1,105 @@
<script setup>
import { ref, computed } from "vue";
const props = defineProps({
data: {
type: Object,
default: Array,
},
total: {
type: Number,
default: 0,
},
});
const barColor = (rate) => {
if (rate >= 0.4) return "#FDC540";
if (rate >= 0.2) return "#FED847";
return "#ffe88f";
};
const bars = computed(() => {
const newList = new Array(12).fill({ ring: 0, rate: 0 }).map((_, index) => {
let ring = index;
if (ring === 11) ring = "M";
if (ring === 0) ring = "X";
return {
ring: ring,
rate: props.data[index] || 0,
};
});
[newList[0], newList[11]] = [newList[11], newList[0]];
return newList.reverse();
});
const ringText = (ring) => {
if (ring === 11) return "X";
if (ring === 0) return "M";
return ring;
};
</script>
<template>
<view class="container">
<view>
<view v-for="(b, index) in bars" :key="index">
<text v-if="b && b.rate">
{{ total === 0 ? `${Number((b.rate * 100).toFixed(1))}%` : b.rate }}
</text>
<view
:style="{
background: barColor(total === 0 ? b.rate : b.rate / total),
height: (total === 0 ? b.rate : b.rate / total) * 300 + 'rpx',
}"
>
</view>
</view>
</view>
<view>
<text v-for="(b, index) in bars" :key="index">
{{ b && b.ring !== undefined ? b.ring : "" }}
</text>
</view>
</view>
</template>
<style scoped>
.container {
min-height: 150rpx;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.container > view {
padding: 0 10rpx;
}
.container > view:first-child {
display: flex;
align-items: flex-end;
justify-content: space-around;
min-height: 50rpx;
}
.container > view:first-child > view {
display: flex;
flex-direction: column;
align-items: center;
font-size: 18rpx;
color: #333;
width: 5vw;
}
.container > view:first-child > view > view {
width: 100%;
transition: all 0.3s ease;
height: 0;
}
.container > view:last-child {
display: grid;
grid-template-columns: repeat(12, 1fr);
border-top: 1rpx solid #333;
font-size: 22rpx;
color: #333333;
}
.container > view:last-child > text {
text-align: center;
}
</style>

View File

@@ -1,5 +1,5 @@
<script setup>
import { ref, watch, onMounted, onUnmounted } from "vue";
import { ref, onMounted, onBeforeUnmount } from "vue";
const props = defineProps({
isFinal: {
type: Boolean,
@@ -26,7 +26,7 @@ const props = defineProps({
default: () => {},
},
});
const count = ref(3);
const count = ref(props.isFinal ? 10 : 3);
const tiemr = ref(null);
function startCount() {
if (tiemr.value) clearInterval(tiemr.value);
@@ -37,24 +37,17 @@ function startCount() {
} else count.value -= 1;
}, 1000);
}
watch(
() => [props.isFinal, props.roundData],
([n_isFinal, n_roundData]) => {
count.value = n_isFinal ? 10 : 3;
startCount();
}
);
onMounted(() => {
startCount();
});
onUnmounted(() => {
onBeforeUnmount(() => {
if (tiemr.value) clearInterval(tiemr.value);
});
</script>
<template>
<view class="round-end-tip">
<text>{{ round }}轮射结束</text>
<text>{{ round }}轮射结束</text>
<block v-if="!isFinal">
<view class="point-view1" v-if="bluePoint !== 0 || redPoint !== 0">
<text>本轮蓝队</text>

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;

View File

@@ -5,6 +5,10 @@ const props = defineProps({
type: Boolean,
default: false,
},
height: {
type: String,
default: "260px",
},
onClose: {
type: Function,
default: () => {},
@@ -46,7 +50,7 @@ watch(
class="modal-content"
:style="{
transform: `translateY(${showContent ? '0%' : '100%'})`,
height: !noBg ? '260px' : 'auto',
height,
}"
@click.stop=""
>
@@ -55,7 +59,7 @@ watch(
src="https://static.shelingxingqiu.com/attachment/2025-08-05/dbuaf19pf7qd8ps0uh.png"
mode="widthFix"
/>
<view class="close-btn" @click="onClose">
<view class="close-btn" @click="onClose" v-if="!noBg">
<image src="../static/close-yellow.png" mode="widthFix" />
</view>
<slot></slot>

View File

@@ -1,5 +1,5 @@
<script setup>
import { ref, watch, onMounted, onUnmounted } from "vue";
import { ref, watch, onMounted, onBeforeUnmount } from "vue";
const props = defineProps({
rowCount: {
type: Number,
@@ -42,7 +42,7 @@ onMounted(() => {
bgIndex.value = bgIndex.value === 0 ? 1 : 0;
}, 200);
});
onUnmounted(() => {
onBeforeUnmount(() => {
if (timer.value) {
clearInterval(timer.value);
}
@@ -78,7 +78,10 @@ onUnmounted(() => {
}"
>
<image src="../static/score-bg.png" mode="widthFix" />
<text>{{ scores[index] }}</text>
<text
:style="{ fontWeight: scores[index] !== undefined ? 'bold' : 'normal' }"
>{{ scores[index] !== undefined ? scores[index] : "-" }}</text
>
</view>
</view>
</template>
@@ -111,7 +114,6 @@ onUnmounted(() => {
}
.score-item > text {
position: relative;
font-weight: bold;
margin-top: 2px;
}
.complete-light {

View File

@@ -53,8 +53,7 @@ const props = defineProps({
position: relative;
width: 75vw;
margin-bottom: 15px;
border-radius: 20px;
overflow: hidden;
border-radius: 30rpx;
background: #fff;
}
.container > view:first-child > image {
@@ -62,5 +61,7 @@ const props = defineProps({
width: 100%;
z-index: -1;
top: 0;
border-top-left-radius: 30rpx;
border-top-right-radius: 30rpx;
}
</style>

View File

@@ -1,5 +1,6 @@
<script setup>
import { ref, watch } from "vue";
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
const props = defineProps({
show: {
type: Boolean,
@@ -14,9 +15,10 @@ const props = defineProps({
default: 10,
},
});
const refreshing = ref(false);
const refreshing = ref(true);
const loading = ref(false);
const noMore = ref(false);
const count = ref(0);
const page = ref(1);
const refresherrefresh = async () => {
if (refreshing.value) return;
@@ -24,6 +26,7 @@ const refresherrefresh = async () => {
refreshing.value = true;
page.value = 1;
const length = await props.onLoading(page.value);
count.value = length;
if (length < props.pageSize) noMore.value = true;
} finally {
refreshing.value = false;
@@ -35,26 +38,28 @@ const scrolltolower = async () => {
loading.value = true;
page.value += 1;
const length = await props.onLoading(page.value);
count.value += length;
if (length < props.pageSize) noMore.value = true;
} finally {
loading.value = false;
}
};
watch(
() => props.show,
async (newVal) => {
if (newVal) await props.onLoading(1);
},
{
immediate: true,
onShow(async () => {
try {
const length = await props.onLoading(page.value);
count.value = length;
if (length < props.pageSize) noMore.value = true;
} finally {
refreshing.value = false;
}
);
});
</script>
<template>
<scroll-view
class="scroll-list"
scroll-y
enable-flex="true"
:show-scrollbar="false"
enhanced="true"
:bounces="false"
@@ -68,8 +73,10 @@ watch(
}"
>
<slot></slot>
<text class="tips" v-if="loading">加载中...</text>
<text class="tips" v-if="noMore">我是有底线的</text>
<view class="tips">
<text v-if="loading">Loading...</text>
<text v-if="noMore">{{ count === 0 ? "No data" : "Thats all" }}</text>
</view>
</scroll-view>
</template>
@@ -77,9 +84,10 @@ watch(
.scroll-list {
width: 100%;
height: 100%;
flex-direction: column;
}
.tips {
color: #fff9;
.tips > text {
color: #d0d0d0;
display: block;
text-align: center;
font-size: 12px;

View File

@@ -1,5 +1,5 @@
<script setup>
import { ref, watch, onMounted, onUnmounted } from "vue";
import { ref, watch, onMounted, onBeforeUnmount } from "vue";
import audioManager from "@/audioManager";
import { MESSAGETYPES } from "@/constants";
import useStore from "@/store";
@@ -51,8 +51,8 @@ watch(
() => props.tips,
(newVal) => {
let key = "";
if (newVal.includes("红队")) key = "请红方射";
if (newVal.includes("蓝队")) key = "请蓝方射";
if (newVal.includes("红队")) key = "请红方射";
if (newVal.includes("蓝队")) key = "请蓝方射";
if (key && sound.value) {
if (currentRoundEnded.value) {
currentRound.value += 1;
@@ -135,6 +135,14 @@ async function onReceiveMessage(messages = []) {
: "未上靶";
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) {
@@ -149,8 +157,6 @@ async function onReceiveMessage(messages = []) {
audioManager.play("比赛结束");
} else if (msg.constructor === MESSAGETYPES.FinalShoot) {
audioManager.play("决金箭轮");
} else if (msg.constructor === MESSAGETYPES.ShootSyncMePracticeID) {
ended.value = true;
} else if (msg.constructor === MESSAGETYPES.MatchOver) {
ended.value = true;
}
@@ -168,7 +174,7 @@ onMounted(() => {
uni.$on("play-sound", playSound);
});
onUnmounted(() => {
onBeforeUnmount(() => {
uni.$off("update-ramain", updateRemain);
uni.$off("socket-inbox", onReceiveMessage);
uni.$off("play-sound", playSound);

View File

@@ -1,5 +1,5 @@
<script setup>
import { ref, watch, onMounted, onUnmounted } from "vue";
import { ref, watch, onMounted, onBeforeUnmount } from "vue";
import { RoundGoldImages } from "@/constants";
const props = defineProps({
tips: {
@@ -52,7 +52,7 @@ onMounted(() => {
uni.$on("update-ramain", updateRemain);
});
onUnmounted(() => {
onBeforeUnmount(() => {
uni.$off("update-ramain", updateRemain);
if (timer.value) clearInterval(timer.value);
});

View File

@@ -8,6 +8,10 @@ import useStore from "@/store";
const store = useStore();
const { updateUser, updateDevice } = store;
const props = defineProps({
noBg: {
type: Boolean,
default: false,
},
onClose: {
type: Function,
default: () => {},
@@ -79,15 +83,36 @@ const handleLogin = () => {
},
});
};
const openServiceLink = () => {
uni.navigateTo({
url:
"/pages/webview?url=" +
encodeURIComponent(
"https://static.shelingxingqiu.com/shootServiceAgreement.html"
),
});
};
const openPrivacyLink = () => {
uni.navigateTo({
url:
"/pages/webview?url=" +
encodeURIComponent(
"https://static.shelingxingqiu.com/shootPrivacyPolicy.html"
),
});
};
onShow(() => {
loading.value = false;
});
</script>
<template>
<view class="container">
<view class="avatar">
<text>头像:</text>
<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"
@@ -95,17 +120,19 @@ onShow(() => {
hover-class="none"
>
<Avatar v-if="avatarUrl" :src="avatarUrl" :size="30" />
<text v-else>点击获取</text>
<text v-else :style="{ color: noBg ? '#666' : '#fff9' }">点击获取</text>
<image src="../static/enter.png" mode="widthFix" />
</button>
</view>
<view class="nickname">
<text>昵称:</text>
<view class="nickname" :style="{ borderColor: noBg ? '#E3E3E3' : '#fff' }">
<text :style="{ color: noBg ? '#666' : '#fff' }">昵称:</text>
<input
type="nickname"
placeholder="请输入昵称"
placeholder-style="color: #fff9"
:placeholder-style="{ color: noBg ? '#666' : '#fff9' }"
@change="onNicknameChange"
@blur="onNicknameBlur"
:style="{ color: noBg ? '#333' : '#fff' }"
/>
</view>
<SButton :rounded="20" width="80vw" :onClick="handleLogin">
@@ -126,14 +153,23 @@ onShow(() => {
</block>
</SButton>
<view class="protocol" @click="handleAgree">
<view v-if="!agree" />
<view v-if="!agree" :style="{ borderColor: noBg ? '#E3E3E3' : '#fff' }" />
<image v-if="agree" src="../static/checked.png" mode="widthFix" />
<text
>已同意并阅读<text :style="{ color: '#fff' }">用户协议</text><text
:style="{ color: '#fff' }"
>隐私协议</text
>内容</text
<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>
</view>
</template>
@@ -146,6 +182,8 @@ onShow(() => {
flex-direction: column;
justify-content: center;
align-items: center;
border-top-left-radius: 24rpx;
border-top-right-radius: 24rpx;
}
.avatar,
.nickname {
@@ -153,7 +191,7 @@ onShow(() => {
display: flex;
align-items: center;
margin-bottom: 20px;
border-bottom: 1px solid #fff3;
border-bottom: 1rpx solid #fff3;
}
.avatar {
margin: 0;
@@ -161,7 +199,6 @@ onShow(() => {
.avatar > text,
.nickname > text {
width: 20%;
color: #fff9;
font-size: 14px;
line-height: 55px;
}
@@ -172,7 +209,6 @@ onShow(() => {
.nickname > input {
flex: 1;
font-size: 14px;
color: #fff;
line-height: 55px;
}
.wechat-icon {
@@ -198,12 +234,22 @@ onShow(() => {
height: 14px;
border-radius: 50%;
margin-right: 10px;
border: 1px solid #fff;
border: 1rpx solid #fff;
}
.protocol > view:last-child {
display: flex;
align-items: center;
}
.login-btn {
line-height: 55px;
width: 80%;
display: flex;
align-items: center;
justify-content: space-between;
}
.login-btn > image {
width: 28rpx;
height: 28rpx;
}
.loading {
width: 25px;

View File

@@ -1,5 +1,5 @@
<script setup>
import { ref, watch, onMounted, onUnmounted } from "vue";
import { ref, watch, onMounted, onBeforeUnmount } from "vue";
const props = defineProps({
start: {
type: Boolean,
@@ -32,7 +32,7 @@ onMounted(() => {
const deviceInfo = uni.getDeviceInfo();
isIos.value = deviceInfo.osName === "ios";
});
onUnmounted(() => {
onBeforeUnmount(() => {
if (timer.value) clearInterval(timer.value);
});
</script>

View File

@@ -52,6 +52,11 @@ watch(
<template>
<view class="container">
<image
:src="isRed ? '../static/flag-red.png' : '../static/flag-blue.png'"
class="flag"
:style="{ [isRed ? 'left' : 'right']: '10rpx' }"
/>
<view
v-for="(item, index) in team"
:key="index"
@@ -67,7 +72,7 @@ watch(
left:
(isRed
? ((players[item.id] || {}).sort || 0) * 20
: 35 - ((players[item.id] || {}).sort || 0) * 15) + 'px',
: 40 - ((players[item.id] || {}).sort || 0) * 20) + 'px',
}"
>
<image :src="item.avatar || '../static/user-icon.png'" mode="widthFix" />
@@ -96,6 +101,7 @@ watch(
position: relative;
width: 20vw;
height: 45px;
margin: 0 20rpx;
}
.container > text {
position: absolute;
@@ -113,6 +119,7 @@ watch(
}
.player > image {
width: 100%;
min-height: 100%;
}
.player > text {
position: absolute;
@@ -123,4 +130,10 @@ watch(
bottom: 0px;
color: #fff;
}
.flag {
position: absolute;
width: 45rpx;
height: 45rpx;
top: -30rpx;
}
</style>

View File

@@ -1,8 +1,9 @@
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { ref, onMounted, onBeforeUnmount } from "vue";
import Guide from "@/components/Guide.vue";
import BowPower from "@/components/BowPower.vue";
import Avatar from "@/components/Avatar.vue";
import audioManager from "@/audioManager";
import { simulShootAPI } from "@/apis";
import { checkConnection } from "@/util";
import { MESSAGETYPES } from "@/constants";
@@ -15,20 +16,46 @@ const props = defineProps({
type: Boolean,
default: true,
},
isBattle: {
type: Boolean,
default: false,
},
});
const arrow = ref({});
const power = ref(0);
const distance = ref(0);
const debugInfo = ref("");
const showsimul = ref(false);
const count = ref(15);
const timer = ref(null);
const updateTimer = (value) => {
count.value = Math.round(value);
};
onMounted(() => {
audioManager.play("请射箭测试距离");
timer.value = setInterval(() => {
if (count.value > 0) count.value -= 1;
else clearInterval(timer.value);
}, 1000);
uni.$on("update-timer", updateTimer);
});
onBeforeUnmount(() => {
if (timer.value) clearInterval(timer.value);
uni.$off("update-timer", updateTimer);
});
async function onReceiveMessage(messages = []) {
messages.forEach((msg) => {
if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
arrow.value = msg.target;
power.value = msg.target.battery;
distance.value = msg.target.dst / 100;
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("距离不足");
}
});
}
@@ -45,14 +72,14 @@ onMounted(() => {
if (envVersion !== "release") showsimul.value = true;
});
onUnmounted(() => {
onBeforeUnmount(() => {
uni.$off("socket-inbox", onReceiveMessage);
});
</script>
<template>
<view class="container">
<Guide v-if="guide">
<Guide v-show="guide">
<view
:style="{
display: 'flex',
@@ -62,20 +89,25 @@ onUnmounted(() => {
}"
>
<view :style="{ display: 'flex', flexDirection: 'column' }">
<text :style="{ color: '#fed847' }">预先射几箭测试</text>
<text>请确保射击距离有5米</text>
<text :style="{ color: '#fed847' }">确保站距达到5米</text>
<text>低于5米的射箭无效</text>
</view>
</view>
</Guide>
<view class="user-row">
<Avatar :src="user.avatar" :size="35" />
<BowPower :power="power" />
</view>
<view class="test-area">
<image
class="text-bg"
src="https://static.shelingxingqiu.com/attachment/2025-07-05/db3skuq1n9rj4fmld4.png"
mode="widthFix"
/>
<button
class="simul"
@click="simulShoot"
hover-class="none"
v-if="showsimul"
>
模拟射箭
</button>
<view class="warnning-text">
<block v-if="distance > 0">
<text>当前距离{{ distance }}</text>
@@ -83,18 +115,20 @@ onUnmounted(() => {
<text v-else>请调整站位</text>
</block>
<block v-else>
<text>大人请射箭</text>
<text>请射箭测试站距</text>
</block>
</view>
<!-- <view class="debug-text">{{ debugInfo }}</view> -->
<view class="user-row">
<Avatar :src="user.avatar" :size="35" />
<BowPower :power="power" />
</view>
</view>
<view v-if="isBattle" class="ready-timer">
<image src="../static/test-tip.png" mode="widthFix" />
<view>
<view
class="simul"
@click="simulShoot"
:style="{ color: '#fff' }"
v-if="showsimul"
>
模拟射箭
<text>具体正式比赛还有</text>
<text>{{ count }}</text>
<text></text>
</view>
</view>
</view>
@@ -103,41 +137,69 @@ onUnmounted(() => {
<style scoped>
.container {
width: 100vw;
max-height: 70vh;
}
.ready-timer {
display: flex;
flex-direction: column;
align-items: center;
transform: translateY(-10vw);
}
.ready-timer > image:first-child {
width: 40%;
}
.ready-timer > view {
width: 80%;
height: 45px;
background-color: #545454;
border-radius: 30px;
display: flex;
justify-content: center;
align-items: center;
transform: translateY(-8vw);
color: #bebebe;
font-size: 15px;
}
.ready-timer > view > text:nth-child(2) {
color: #fed847;
font-size: 20px;
width: 22px;
text-align: center;
}
.test-area {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
width: 100%;
height: 112vw;
position: relative;
}
.test-area > view:last-child {
padding: 15px;
width: calc(100% - 30px);
}
.text-bg {
width: 100%;
transform: translateY(-50px);
position: absolute;
top: -14.4%;
left: 0;
}
.warnning-text {
position: absolute;
color: #fed847;
font-size: 30px;
font-size: 27px;
display: flex;
flex-direction: column;
align-items: center;
width: 54vw;
left: calc(50% - 27vw);
top: 34%;
justify-content: center;
height: 40%;
}
.warnning-text > text {
width: 60vw;
width: 70vw;
text-align: center;
}
.container > view:last-child {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
margin-top: -40vw;
position: relative;
}
.debug-text {
position: fixed;
left: calc(50% - 45vw);
top: 66%;
.simul {
position: absolute;
color: #fff;
font-size: 14px;
right: 10px;
}
</style>

View File

@@ -1,5 +1,5 @@
<script setup>
import { ref, watch, onMounted, onUnmounted } from "vue";
import { ref, watch, onMounted, onBeforeUnmount } from "vue";
const props = defineProps({
countdown: {
type: Number,
@@ -26,7 +26,7 @@ onMounted(() => {
}, 300);
uni.$on("update-timer", updateTimer);
});
onUnmounted(() => {
onBeforeUnmount(() => {
if (timer.value) clearInterval(timer.value);
uni.$off("update-timer", updateTimer);
});

View File

@@ -1,5 +1,5 @@
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { ref, onMounted, onBeforeUnmount } from "vue";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
@@ -44,7 +44,7 @@ onMounted(async () => {
}, 1000);
});
onUnmounted(() => {
onBeforeUnmount(() => {
if (timer.value) clearTimeout(timer.value);
});
</script>

View File

@@ -23,6 +23,7 @@ export const MESSAGETYPES = {
RankUpdate: 1121669910,
LvlUpdate: 3958625354,
TeamUpdate: 4168086616,
InvalidShot: 4168086617,
};
export const topThreeColors = ["#FFD947", "#D2D2D2", "#FFA515"];

105
src/heatmap.js Normal file
View File

@@ -0,0 +1,105 @@
/**
* 在 uni-app 小程序里画弓箭热力图
* @param {String} canvasId 画布 id
* @param {Number} width 画布宽px
* @param {Number} height 画布高px
* @param {Array} arrowData [{x, y, count}, ...]
*/
export function generateHeatmapImage(canvasId, width, height, arrowData) {
return new Promise((resolve, reject) => {
// 1. 创建绘图上下文
const ctx = uni.createCanvasContext(canvasId);
// 3. 计算最大 count用于归一化
const maxCount = Math.max(...arrowData.map((p) => p.count), 1);
// 4. 热点半径:可按实际靶子大小调,这里取画布短边的 6%
const radius = Math.min(width, height) * 0.12;
// 5. 按count从小到大排序count越大越后面
arrowData.sort((a, b) => a.count - b.count);
// 6. 画每个点
arrowData.forEach((item) => {
const intensity = item.count / maxCount; // 0-1
// console.log(item.count, maxCount, intensity);
const r = radius * (1.2 - intensity * 0.8);
// 创建径向渐变
const grd = ctx.createCircularGradient(
item.x * width,
item.y * height,
r
);
grd.addColorStop(0, heatColor(intensity, 1));
grd.addColorStop(0.5, heatColor(intensity, 0.6));
grd.addColorStop(1, "rgba(0,0,0,0)");
ctx.save();
ctx.fillStyle = grd;
ctx.globalCompositeOperation = "screen"; // 叠加变亮
ctx.beginPath();
ctx.arc(item.x * width, item.y * height, r, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
});
// 6. 可选:整体蒙版,让非热点区域暗下去
// ctx.save()
// ctx.fillStyle = 'rgba(0,0,0,0.35)'
// ctx.fillRect(0, 0, width, height)
// ctx.restore()
// 7. 把指令一次性推送到 canvas
ctx.draw(false, () => {
// Canvas绘制完成后生成图片
uni.canvasToTempFilePath({
canvasId: "heatMapCanvas",
width: width,
height: height,
destWidth: width * 2, // 提高图片质量
destHeight: height * 2,
success: (res) => {
console.log("热力图图片生成成功:", res.tempFilePath);
resolve(res.tempFilePath);
},
fail: (error) => {
console.error("热力图图片生成失败:", error);
reject(error);
},
});
});
});
}
/**
* 把强度 0-1 映射成红-黄-绿渐变,返回 rgba 字符串
* @param {Number} v 0-1
* @param {Number} a 透明度 0-1
*/
function heatColor(v, a) {
// v 从 0→1重新映射极低值绿色低值黄色中到高值红色
let red, green;
if (v < 0.2) {
// 极低值:纯绿色
red = 0;
green = 200; // 柔和的绿
} else if (v < 0.4) {
// 低值:绿色到黄色
const t = (v - 0.2) / 0.2;
red = Math.round(255 * t);
green = 255;
} else if (v < 0.6) {
// 中低值:黄色到橙色
const t = (v - 0.4) / 0.2;
red = 255;
green = Math.round(255 * (1 - t * 0.5));
} else {
// 中到高值:橙色到红色
const t = (v - 0.6) / 0.4;
red = 255;
green = Math.round(128 * (1 - t));
}
const blue = 0;
return `rgba(${red}, ${green}, ${blue}, ${a})`;
}

277
src/kde-heatmap.js Normal file
View File

@@ -0,0 +1,277 @@
/**
* 基于小程序Canvas API的核密度估计热力图
* 实现类似test.html中的效果但适配uni-app小程序环境
*/
/**
* Epanechnikov核函数
* @param {Number} bandwidth 带宽参数
* @returns {Function} 核函数
*/
function kernelEpanechnikov(bandwidth) {
return function (v) {
const r = Math.sqrt(v[0] * v[0] + v[1] * v[1]);
return r <= bandwidth
? (3 / (Math.PI * bandwidth * bandwidth)) *
(1 - (r * r) / (bandwidth * bandwidth))
: 0;
};
}
/**
* 核密度估计器
* @param {Function} kernel 核函数
* @param {Array} range 范围[xmin, xmax]
* @param {Number} samples 采样点数
* @returns {Function} 密度估计函数
*/
function kernelDensityEstimator(kernel, range, samples) {
return function (data) {
const gridSize = (range[1] - range[0]) / samples;
const densityData = [];
for (let x = range[0]; x <= range[1]; x += gridSize) {
for (let y = range[0]; y <= range[1]; y += gridSize) {
let sum = 0;
for (const point of data) {
sum += kernel([x - point[0], y - point[1]]);
}
densityData.push([x, y, sum / data.length]);
}
}
// 归一化
const maxDensity = Math.max(...densityData.map((d) => d[2]));
densityData.forEach((d) => {
if (maxDensity > 0) d[2] /= maxDensity;
});
return densityData;
};
}
/**
* 生成随机射箭数据点
* @param {Number} centerCount 中心点数量
* @param {Number} pointsPerCenter 每个中心点的箭数
* @returns {Array} 箭矢坐标数组
*/
export function generateArcheryPoints(centerCount = 2, pointsPerCenter = 100) {
const points = [];
const range = 8; // 坐标范围 -4 到 4
const spread = 3; // 分散度
for (let i = 0; i < centerCount; i++) {
const centerX = Math.random() * range - range / 2;
const centerY = Math.random() * range - range / 2;
for (let j = 0; j < pointsPerCenter; j++) {
points.push([
centerX + (Math.random() - 0.5) * spread,
centerY + (Math.random() - 0.5) * spread,
]);
}
}
return points;
}
/**
* 颜色映射函数 - 将密度值映射到颜色
* @param {Number} density 密度值 0-1
* @returns {String} RGBA颜色字符串
*/
function getHeatColor(density) {
// 绿色系热力图:从浅绿到深绿
if (density < 0.1) return "rgba(0, 255, 0, 0)";
const alpha = Math.min(density * 1.2, 1); // 增强透明度
const intensity = density;
if (intensity < 0.5) {
// 低密度:浅绿色
const green = Math.round(200 + 55 * intensity);
const blue = Math.round(50 + 100 * intensity);
return `rgba(${Math.round(50 * intensity)}, ${green}, ${blue}, ${
alpha * 0.7
})`;
} else {
// 高密度:深绿色
const red = Math.round(50 * (intensity - 0.5) * 2);
const green = Math.round(180 + 75 * (1 - intensity));
const blue = Math.round(30 * (1 - intensity));
return `rgba(${red}, ${green}, ${blue}, ${alpha * 0.7})`;
}
}
/**
* 基于小程序Canvas API绘制核密度估计热力图
* @param {String} canvasId 画布ID
* @param {Number} width 画布宽度
* @param {Number} height 画布高度
* @param {Array} points 箭矢坐标数组 [[x, y], ...]
* @param {Object} options 可选参数
* @returns {Promise} 绘制完成的Promise
*/
export function drawKDEHeatmap(canvasId, width, height, points, options = {}) {
const {
bandwidth = 0.8,
gridSize = 100,
range = [-4, 4],
showPoints = true,
pointColor = "rgba(255, 255, 255, 0.9)",
} = options;
// 微信小程序使用 Canvas 2D
return new Promise((resolve, reject) => {
try {
wx.createSelectorQuery()
.select(`#${canvasId}`)
.fields({ node: true, size: true })
.exec((res) => {
try {
const { node: canvas, width: w, height: h } = res[0] || {};
if (!canvas) return resolve();
// 设置画布尺寸
const cw = width || w || 300;
const ch = height || h || 300;
canvas.width = cw;
canvas.height = ch;
const ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, cw, ch);
if (!points || points.length === 0) return resolve();
// 计算核密度估计
const kernel = kernelEpanechnikov(bandwidth);
const kde = kernelDensityEstimator(kernel, range, gridSize);
const densityData = kde(points);
// 计算网格大小
const cellWidth = cw / gridSize;
const cellHeight = ch / gridSize;
const xRange = range[1] - range[0];
const yRange = range[1] - range[0];
// 绘制热力图网格
densityData.forEach(([x, y, density]) => {
const normalizedX = (x - range[0]) / xRange;
const normalizedY = (y - range[0]) / yRange;
const canvasX = normalizedX * cw;
const canvasY = normalizedY * ch;
const color = getHeatColor(density);
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(
canvasX,
canvasY,
Math.min(cellWidth, cellHeight) * 0.6,
0,
2 * Math.PI
);
ctx.fill();
});
// 绘制原始数据点
if (showPoints) {
ctx.fillStyle = pointColor;
points.forEach(([x, y]) => {
const normalizedX = (x - range[0]) / xRange;
const normalizedY = (y - range[0]) / yRange;
const canvasX = normalizedX * cw;
const canvasY = normalizedY * ch;
ctx.beginPath();
ctx.arc(canvasX, canvasY, 2.5, 0, 2 * Math.PI);
ctx.fill();
});
}
resolve();
} catch (err) {
reject(err);
}
});
} catch (error) {
reject(error);
}
});
}
/**
* 生成热力图图片类似原有的generateHeatmapImage函数
* 但使用核密度估计算法
*/
export function generateKDEHeatmapImage(
canvasId,
width,
height,
points,
options = {}
) {
// Canvas 2D 导出(传入 canvas 对象)
return new Promise((resolve, reject) => {
drawKDEHeatmap(canvasId, width, height, points, options)
.then(() => {
try {
wx.createSelectorQuery()
.select(`#${canvasId}`)
.fields({ node: true, size: true })
.exec((res) => {
const { node: canvas, width: w, height: h } = res[0] || {};
if (!canvas) return reject(new Error("canvas 为空"));
const cw = width || w || 300;
const ch = height || h || 300;
uni.canvasToTempFilePath({
canvas,
width: cw,
height: ch,
destWidth: cw * 3,
destHeight: ch * 3,
success: (r) => resolve(r.tempFilePath),
fail: reject,
});
});
} catch (e) {
reject(e);
}
})
.catch(reject);
});
}
export const generateHeatMapData = (width, height, amount = 100) => {
const data = [];
const centerX = 0.5; // 中心点X坐标
const centerY = 0.5; // 中心点Y坐标
for (let i = 0; i < amount; i++) {
let x, y;
// 30%的数据集中在中心区域(高斯分布)
if (Math.random() < 0.3) {
// 使用正态分布生成中心区域的数据
const angle = Math.random() * 2 * Math.PI;
const radius = Math.sqrt(-2 * Math.log(Math.random())) * 0.15; // 标准差0.15
x = centerX + radius * Math.cos(angle);
y = centerY + radius * Math.sin(angle);
} else {
x = Math.random() * 0.8 + 0.1; // 0.1-0.9范围
y = Math.random() * 0.8 + 0.1;
}
// 确保坐标在0-1范围内
x = Math.max(0.05, Math.min(0.95, x));
y = Math.max(0.05, Math.min(0.95, y));
data.push({
x: parseFloat(x.toFixed(3)),
y: parseFloat(y.toFixed(3)),
ring: Math.floor(Math.random() * 5) + 6, // 6-10环
});
}
return data;
};

View File

@@ -3,6 +3,30 @@
{
"path": "pages/index"
},
{
"path": "pages/reset-password"
},
{
"path": "pages/point-book"
},
{
"path": "pages/edit-profile"
},
{
"path": "pages/sign-in"
},
{
"path": "pages/sign-up"
},
{
"path": "pages/about-us"
},
{
"path": "pages/webview",
"style": {
"navigationBarTitleText": ""
}
},
{
"path": "pages/battle-result"
},
@@ -79,10 +103,7 @@
"path": "pages/ranking"
},
{
"path": "pages/rank-list",
"style": {
"enablePullDownRefresh": false
}
"path": "pages/rank-list"
},
{
"path": "pages/team-match"
@@ -104,14 +125,15 @@
}
],
"globalStyle": {
"backgroundColor": "@bgColor",
"backgroundColor": "#fff",
"backgroundColorBottom": "@bgColorBottom",
"backgroundColorTop": "@bgColorTop",
"backgroundTextStyle": "@bgTxtStyle",
"navigationBarBackgroundColor": "#000000",
"navigationBarTextStyle": "@navTxtStyle",
"navigationBarTitleText": "Uni Creator",
"navigationStyle": "custom"
"navigationStyle": "custom",
"enablePullDownRefresh": false
},
"subPackages": []
}

87
src/pages/about-us.vue Normal file
View File

@@ -0,0 +1,87 @@
<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 = 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>
<Container title="关于我们">
<view class="container">
<view class="text">
射灵星球是以智能和物联网技术驱动的全球射箭专业选手及射箭爱好者互动交流平台由广州光点飞舞网络有限公司研发并提供线上服务
</view>
<view class="text">
我们专注于智能射箭技术的探索和应用通过物联网技术激光系统人工智能嵌入式AI及射箭在线互娱模式的创新与研发提供专业的智能体育设备和有趣的在线物联游戏以此推动射箭运动及更多专业体育运动走入大众家庭
</view>
<view
class="copyright"
:style="{ paddingBottom: isIos ? '30rpx' : '20rpx' }"
@click="openLink"
>
<text>粤ICP备2025421150号-2X</text>
</view>
</view>
</Container>
</template>
<style scoped>
.container {
width: calc(100% - 50rpx);
height: 100%;
padding: 25rpx;
background-color: #ffffff;
position: relative;
}
.intro-text {
font-size: 14px;
color: #333333;
line-height: 1.6;
margin-bottom: 20px;
}
.title {
font-size: 16px;
font-weight: bold;
color: #333333;
margin-bottom: 10px;
}
.text {
font-size: 14px;
color: #666666;
line-height: 1.6;
margin-bottom: 10px;
text-align: justify;
}
.copyright {
position: absolute;
bottom: 0;
display: flex;
flex-direction: column;
width: calc(100% - 50rpx);
align-items: center;
font-size: 24rpx;
color: #afafaf;
}
</style>

View File

@@ -1,10 +1,11 @@
<script setup>
import { ref, onMounted, onUnmounted } 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 { getGameAPI } from "@/apis";
import { topThreeColors, getBattleResultTips } from "@/constants";
import audioManager from "@/audioManager";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
@@ -24,7 +25,7 @@ onLoad(async (options) => {
const myId = user.value.id;
if (options.battleId) {
const result = await getGameAPI(
options.battleId || "BATTLE-1755230224461209000-539"
options.battleId || "BATTLE-1758270367040321900-868"
);
data.value = {
...result,
@@ -76,7 +77,24 @@ onLoad(async (options) => {
if (mine) {
data.value.myTeam = mine.team;
totalPoints.value = mine.totalScore;
ifWin.value = battleInfo.mode === 1 && mine.team === battleInfo.winner;
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("失败");
}
}
}
});
@@ -129,14 +147,19 @@ const checkBowData = () => {
<image src="../static/title-mvp.png" mode="widthFix" />
<text
>斩获<text
:style="{ color: '#fed847', fontSize: '18px', margin: '0 2px' }"
:style="{
color: '#fed847',
fontSize: '18px',
margin: '0 3px',
fontWeight: '600',
}"
>{{ data.mvps[0].totalRings }}</text
></text
>
</view>
<view v-if="data.mvps && data.mvps.length">
<view v-for="(player, index) in data.mvps" :key="index">
<view class="team-avatar" :style="{ transform: 'rotate(10deg)' }">
<view class="team-avatar">
<Avatar
:src="player.avatar"
:size="40"
@@ -193,37 +216,37 @@ const checkBowData = () => {
}"
>
<image
v-if="index === 0"
v-if="player.rank === 1"
class="player-bg"
src="../static/melee-player-bg1.png"
mode="aspectFill"
/>
<image
v-if="index === 1"
v-if="player.rank === 2"
class="player-bg"
src="../static/melee-player-bg2.png"
mode="aspectFill"
/>
<image
v-if="index === 2"
v-if="player.rank === 3"
class="player-bg"
src="../static/melee-player-bg3.png"
mode="aspectFill"
/>
<image
v-if="index === 0"
v-if="player.rank === 1"
class="player-crown"
src="../static/champ1.png"
mode="widthFix"
/>
<image
v-if="index === 1"
v-if="player.rank === 2"
class="player-crown"
src="../static/champ2.png"
mode="widthFix"
/>
<image
v-if="index === 2"
v-if="player.rank === 3"
class="player-crown"
src="../static/champ3.png"
mode="widthFix"
@@ -256,10 +279,14 @@ const checkBowData = () => {
:size="40"
:borderColor="data.myTeam === 1 ? '#5fadff' : '#ff6060'"
/>
<text :style="{ backgroundColor: '#5fadff' }" v-if="data.myTeam === 1"
<text
:style="{ backgroundColor: '#5fadff' }"
v-if="data.mode === 1 && data.myTeam === 1"
>蓝队</text
>
<text :style="{ backgroundColor: '#ff6060' }" v-if="data.myTeam === 0"
<text
:style="{ backgroundColor: '#ff6060' }"
v-if="data.mode === 1 && data.myTeam === 0"
>红队</text
>
</view>
@@ -442,6 +469,7 @@ const checkBowData = () => {
.player-crown {
position: relative;
width: 27px;
height: 27px;
margin: 0 15px;
}
.view-crown {

View File

@@ -1,5 +1,5 @@
<script setup>
import { ref, watch, onMounted, onUnmounted, nextTick } from "vue";
import { ref, watch, onMounted, onBeforeUnmount } from "vue";
import { onLoad, onShow, onHide } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import PlayerSeats from "@/components/PlayerSeats.vue";
@@ -34,6 +34,7 @@ const refreshRoomTimer = ref(null);
async function refreshRoomData() {
if (!roomNumber.value) return;
const result = await getRoomAPI(roomNumber.value);
if (result.started) return;
room.value = result;
battleType.value = result.battleType;
(result.members || []).some((m) => {
@@ -42,31 +43,23 @@ async function refreshRoomData() {
id: m.userInfo.id,
name: m.userInfo.name,
avatar: m.userInfo.avatar,
rankLvl: m.userInfo.rankLvl,
};
return true;
}
return false;
});
if (result.battleType === 1 && result.count === 1) {
if (user.value.id !== owner.value.id) {
opponent.value = {
id: user.value.id,
name: user.value.nickName,
avatar: user.value.avatar,
};
} else if (result.members.length > 1) {
result.members.some((m) => {
if (result.battleType === 1 && result.count === 2) {
result.members.forEach((m) => {
if (m.userInfo.id !== owner.value.id) {
opponent.value = {
id: m.userInfo.id,
name: m.userInfo.name,
avatar: m.userInfo.avatar,
rankLvl: m.userInfo.rankLvl,
};
return true;
}
return false;
});
}
} else if (result.battleType === 2) {
players.value = [];
const ownerIndex = result.members.findIndex(
@@ -117,12 +110,14 @@ async function onReceiveMessage(messages = []) {
id: msg.userId,
name: msg.name,
avatar: msg.avatar,
rankLvl: msg.rankLvl,
};
} else {
opponent.value = {
id: msg.userId,
name: msg.name,
avatar: msg.avatar,
rankLvl: msg.rankLvl,
};
}
}
@@ -132,12 +127,14 @@ async function onReceiveMessage(messages = []) {
id: msg.userId,
name: msg.name,
avatar: msg.avatar,
rankLvl: msg.rankLvl,
};
} else {
players.value.push({
id: msg.userId,
name: msg.name,
avatar: msg.avatar,
rankLvl: msg.rankLvl,
});
}
}
@@ -178,6 +175,7 @@ async function onReceiveMessage(messages = []) {
}
}
if (msg.constructor === MESSAGETYPES.WaitForAllReady) {
roomNumber.value = "";
if (msg.groupUserStatus) {
uni.setStorageSync("red-team", msg.groupUserStatus.redTeam);
uni.setStorageSync("blue-team", msg.groupUserStatus.blueTeam);
@@ -188,7 +186,7 @@ async function onReceiveMessage(messages = []) {
uni.removeStorageSync("current-battle");
if (msg.groupUserStatus.config.mode == 1) {
uni.redirectTo({
url: `/pages/team-match?battleId=${msg.id}&gameMode=1`,
url: `/pages/team-battle?battleId=${msg.id}&gameMode=1`,
});
} else if (msg.groupUserStatus.config.mode == 2) {
uni.redirectTo({
@@ -247,7 +245,7 @@ onMounted(() => {
uni.$on("socket-inbox", onReceiveMessage);
});
onUnmounted(() => {
onBeforeUnmount(() => {
if (refreshRoomTimer.value) clearInterval(refreshRoomTimer.value);
uni.setKeepScreenOn({
keepScreenOn: false,
@@ -285,26 +283,38 @@ onHide(() => {});
mode="widthFix"
/>
<view>
<view class="player" :style="{ transform: 'translateY(-60px)' }">
<Avatar :rankLvl="user.rankLvl" :src="user.avatar" :size="60" />
<view
v-if="owner.id"
class="player"
:style="{ transform: 'translateY(-60px)' }"
>
<Avatar :rankLvl="owner.rankLvl" :src="owner.avatar" :size="60" />
<text>{{ owner.name }}</text>
<text>创建者</text>
</view>
<view
v-else
class="no-player"
:style="{ transform: 'translateY(-60px)' }"
>
<image src="../static/question-mark.png" mode="widthFix" />
</view>
<image src="../static/versus.png" mode="widthFix" />
<block v-if="opponent.id">
<view class="player" :style="{ transform: 'translateY(60px)' }">
<image
:src="opponent.avatar || '../static/user-icon.png'"
mode="widthFix"
<view
v-if="opponent.id"
class="player"
:style="{ transform: 'translateY(60px)' }"
>
<Avatar
:rankLvl="opponent.rankLvl"
:src="opponent.avatar"
:size="60"
/>
<text v-if="opponent.name">{{ opponent.name }}</text>
</view>
</block>
<block v-else>
<view class="no-player">
<view class="no-player" v-else>
<image src="../static/question-mark.png" mode="widthFix" />
</view>
</block>
</view>
</view>
<PlayerSeats
@@ -318,7 +328,8 @@ onHide(() => {});
src="https://static.shelingxingqiu.com/attachment/2025-08-13/dc0x1p59iab6cvbhqc.png"
mode="widthFix"
/>
<image src="../static/title-2v2.png" mode="widthFix" />
<image v-if="room.count === 4" src="../static/title-2v2.png" mode="widthFix" />
<image v-if="room.count === 6" src="../static/title-3v3.png" mode="widthFix" />
<view>
<view v-for="(item, index) in players" :key="index">
<Avatar v-if="item.id" :src="item.avatar" :size="36" />
@@ -478,7 +489,7 @@ onHide(() => {});
text-overflow: ellipsis;
text-align: center;
}
.player > text:last-child {
.player > text:nth-child(3) {
color: #000;
background-color: #fed847;
font-size: 8px;

View File

@@ -1,12 +1,12 @@
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
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 } from "@/apis";
import { createOrderAPI, getHomeData, getVIPDescAPI } from "@/apis";
import { formatTimestamp } from "@/util";
import useStore from "@/store";
import { storeToRefs } from "pinia";
@@ -19,6 +19,7 @@ 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) {
@@ -61,13 +62,18 @@ const onPay = async () => {
}
};
onMounted(async () => {
const result = await getVIPDescAPI();
richContent.value = result.describe;
});
const toOrderPage = () => {
uni.navigateTo({
url: "/pages/orders",
});
};
onUnmounted(() => {
onBeforeUnmount(() => {
if (timer.value) clearInterval(timer.value);
});
</script>
@@ -107,8 +113,9 @@ onUnmounted(() => {
<view />
<text>VIP 介绍</text>
</view>
<view>
<text
<view :style="{ marginTop: '10rpx' }">
<rich-text :nodes="richContent" />
<!-- <text
>射灵星球VIP服务为全球弓箭手提供约战段位评级实时排位赛智能教练点评等专属特权会员可在酷帅的真实射箭运动中同步享受在线竞技的乐趣还能找到志同道合的伙伴并获得新鲜的功能体验和持续升级的系统
</text>
<text
@@ -117,7 +124,7 @@ onUnmounted(() => {
<text
>VIP会员还将获得专属客服支持当您在游戏中遇到任何问题无论是技术故障规则疑问还是其他需要帮助的情况都可联系我们的VIP专属客服团队他们将提供全年不间断的优质服务确保您的对战体验不受影响
</text>
<text>期待您的加入</text>
<text>期待您的加入</text> -->
</view>
</view>
<view class="content">
@@ -202,6 +209,7 @@ onUnmounted(() => {
width: 100%;
display: flex;
align-items: center;
color: #000;
}
.title-bar > view:first-child {
width: 5px;
@@ -214,11 +222,6 @@ onUnmounted(() => {
font-size: 14px;
color: #333;
}
.content > view:nth-child(2) > text {
display: block;
margin-top: 10px;
color: #333;
}
.vip-items {
width: 100%;
display: grid;
@@ -232,6 +235,7 @@ onUnmounted(() => {
padding: 12px 0;
border-radius: 10px;
text-align: center;
font-size: 27rpx;
}
.vip-content {
max-height: 62%;

View File

@@ -1,46 +1,101 @@
<script setup>
import Container from "@/components/Container.vue";
import { ref, onMounted } from "vue";
import SButton from "@/components/SButton.vue";
const images = [
"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("");
const capsuleHeight = ref(0);
onMounted(async () => {
const menuBtnInfo = uni.getMenuButtonBoundingClientRect();
capsuleHeight.value = menuBtnInfo.top - 9;
});
const onScrollView = (e) => {
addBg.value = e.detail.scrollTop > 100;
};
</script>
<template>
<Container title="智能弓箭">
<view class="container">
<view
class="header"
:style="{
paddingTop: capsuleHeight + 'px',
}"
>
<image
src="https://static.shelingxingqiu.com/attachment/2025-08-07/dbw5tq93d6n7xgtgvp.png"
v-if="addBg"
class="bg-image"
src="../static/app-bg.png"
mode="widthFix"
/>
<text>商品形象图及配图标题</text>
<navigator open-type="navigateBack">
<image class="header-back" src="../static/back.png" mode="widthFix" />
</navigator>
<text
>在射灵世界中等级是衡量您射箭技能的重要指标而点数则是您提升等级的关键具体的要求如下
每射出一支箭并上靶无论您射出的箭命中哪个环数只要箭成功上靶您将获得1点基础点数这是您积累点数的基本方式每一次射击都是您向更高目标迈进的一步
射出的箭命中7-9当您的箭命中7环8环或9环时除了获得1点基础点数外还将额外获得0.5点基础点数
射出的箭命中10环命中10环是射箭中的最高成就因此当您的箭命中10环时除了获得1点基础点数外还将额外获得1点基础点数.即每次命中10环将总共获得</text
:style="{ opacity: addBg ? 1 : 0, color: '#fff', fontWeight: 'bold' }"
>
<SButton>加官方企业微信订购有优惠</SButton>
本赛季排行榜
</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 />
</view>
</scroll-view>
</view>
</Container>
</template>
<style scoped>
.container {
width: 100%;
}
.header-bg {
width: 100%;
}
.header {
width: 100%;
height: 50px;
display: flex;
align-items: center;
position: fixed;
top: 0;
transition: all 0.3s ease;
z-index: 10;
overflow: hidden;
}
.header-back {
width: 22px;
height: 22px;
margin: 0px 15px;
margin-top: 5px;
position: relative;
}
.bg-image {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
}
.images {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.container > image {
width: 85%;
border-radius: 10px;
margin-top: 10px;
}
.container > text {
color: #fff;
margin: 20px 0;
}
.container > text:nth-child(3) {
font-size: 14px;
color: #fff9;
margin-top: 0;
padding: 0 15px;
.images > image {
width: 100vw;
}
</style>

102
src/pages/edit-profile.vue Normal file
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>

View File

@@ -1,5 +1,5 @@
<script setup>
import { ref, onMounted, onUnmounted } 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";
@@ -100,7 +100,7 @@ onMounted(() => {
uni.$on("socket-inbox", onReceiveMessage);
});
onUnmounted(() => {
onBeforeUnmount(() => {
uni.setKeepScreenOn({
keepScreenOn: false,
});

View File

@@ -186,6 +186,7 @@ onShow(async () => {
text-align: center;
font-size: 14px;
height: 40px;
color: #fff;
}
.founded-room > view > view {
background-color: #fed847;

View File

@@ -30,32 +30,26 @@ const { user } = storeToRefs(store);
<!-- 说明文本 -->
<view class="content">
<view class="intro-text">
在射灵世界中等级是衡量您射箭技能的重要指标点数则是您提升等级的关键具体的要求如下
在射灵世界中等级是衡量您射箭技能的重要指标经验则是您提升等级的关键具体的要求如下
</view>
<view class="section">
<view class="title">点数的获取规则</view>
<view class="title">经验的获取规则</view>
<view class="text">
每射出一支箭并上靶无论您射出的箭命中哪个环数只要箭成功上靶您将获得1点基础点数这是您积累点数的基本方式每一次射都是您向更高目标迈进的一步
</view>
<view class="text">
射出的箭中7-9当您的箭中7环8环或9环时除了获得1点基础点数外还将额外获得0.5点基础点数
</view>
<view class="text">
射出的箭中10环命中10环是射箭中的最高成就因此当您的箭中10环时除了获得1点基础点数外还将额外获得1点基础点数即每次命中10环将总共获得2点基础点数
每射出一支箭无论是否中靶环数高低您将获得1点经验这是您提升射灵等级的基本方式每一次射都是您向更高目标迈进的一步
</view>
</view>
<view class="section">
<view class="title">解锁特权与玩法</view>
<view class="text">
当您等级达到9级时将解锁"约战模式"在这个模式中您可以邀请您的好友进行切磋与他们展开一场精彩的射箭对决通过与好友的对抗您不仅可以收获友谊和欢乐还能在交流中学习到更多的技巧和经验
当您等级达到9级时将解锁约战模式在这个模式中您可以邀请您的好友进行切磋与他们展开一场精彩的射箭对决通过与好友的对抗您不仅可以收获友谊和欢乐还能在交流中学习到更多的技巧和经验
</view>
<view class="text">
当您等级达到16级时将解锁对战模式每次对战都是一次难得的学习机会您可以借此机会提升自己的水平同时也为您的好友提供帮助和建议此外约战模式还为您提供了展示自己技艺的平台让您在与好友的互动中感受到射箭的乐趣和成就感
当您等级达到16级时将解锁对战模式每次对战都是一次难得的学习机会您可以借此机会提升自己的水平同时也为您的好友提供帮助和建议此外约战模式还为您提供了展示自己技艺的平台让您在与好友的互动中感受到射箭的乐趣和成就感
</view>
<view class="text">
当您等级达到22级时将解锁"押豆模式"在这个模式中您可以与相同段位的玩家进行对抗赢家将收获所有的灵豆这不仅增加了游戏的趣味性和挑战性还为您提供了赢取更多灵豆的机会通过与更多玩家的对战您可以不断提升自己的技术水平
未来我们将推出押豆模式敬请期待当您等级达到22级时您可以与相同段位的玩家进行对抗赢家将收获所有的灵豆这不仅增加了游戏的趣味性和挑战性还为您提供了赢取更多灵豆的机会通过与更多玩家的对战您可以不断提升自己的技术水平
</view>
</view>
</view>
@@ -71,6 +65,7 @@ const { user } = storeToRefs(store);
.level-progress {
width: 100%;
height: 32rpx;
display: flex;
justify-content: center;
margin-top: 10px;
@@ -95,9 +90,9 @@ const { user } = storeToRefs(store);
}
.content {
padding: 0 10px;
height: calc(100% - 148rpx);
background-color: #ffffff;
padding: 15px;
padding: 30rpx;
}
.intro-text {

View File

@@ -1,6 +1,6 @@
<script setup>
import { ref, onMounted } from "vue";
import { onShow } from "@dcloudio/uni-app";
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";
@@ -58,15 +58,25 @@ const toRankListPage = () => {
};
onShow(async () => {
const rankList = await getRankListAPI();
updateRank(rankList);
const token = uni.getStorageSync("token");
const token = uni.getStorageSync(
`${uni.getAccountInfoSync().miniProgram.envVersion}_token`
);
const promises = [getRankListAPI()];
if (token) {
const result = await getHomeData();
console.log("首页数据:", result);
if (result.user) {
updateUser(result.user);
if (result.user.trio <= 0) {
promises.push(getHomeData());
}
const [rankList, homeData] = await Promise.all(promises);
console.log("排行数据", rankList);
updateRank(rankList);
if (homeData) {
console.log("首页数据:", homeData);
if (homeData.user) {
updateUser(homeData.user);
if (homeData.user.trio <= 0) {
showGuide.value = true;
setTimeout(() => {
showGuide.value = false;
@@ -84,7 +94,6 @@ onShow(async () => {
});
onMounted(async () => {
uni.removeStorageSync("point-book-config");
const config = await getAppConfig();
updateConfig(config);
console.log("全局配置:", config);
@@ -96,6 +105,23 @@ const comingSoon = () => {
icon: "none",
});
};
onShareAppMessage(() => {
return {
title: "智能真弓:实时捕捉+毫秒级同步,弓箭选手全球竞技!", // 分享卡片的标题
path: "/pages/index", // 用户点击分享卡片后跳转的页面路径
imageUrl:
"https://static.shelingxingqiu.com/attachment/2025-09-12/dcqoz26q0268wxmzjg.png", // 分享卡片的配图,可以是本地或网络图片
};
});
onShareTimeline(() => {
return {
title: "智能真弓:实时捕捉+毫秒级同步,弓箭选手全球竞技!", // 分享到朋友圈的标题
query: "from=timeline", // 用户通过朋友圈点击后,在页面 onShow 的 options 中可以获取到的参数
imageUrl:
"https://static.shelingxingqiu.com/attachment/2025-09-12/dcqoz26q0268wxmzjg.png", // 分享到朋友圈的配图
};
});
</script>
<template>
@@ -111,7 +137,7 @@ const comingSoon = () => {
@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">连接智能弓箭</text>
<text
v-if="user.id && device.deviceId"
class="truncate"
@@ -141,7 +167,10 @@ const comingSoon = () => {
</view>
</view>
<view class="ranking-section">
<image src="../static/rank-bg.png" mode="widthFix" />
<image
src="https://static.shelingxingqiu.com/attachment/2025-09-25/dd1p9ci9v7frcrsxhj.png"
mode="widthFix"
/>
<button
class="into-btn"
@click="() => toPage('/pages/ranking')"
@@ -151,13 +180,15 @@ const comingSoon = () => {
<img src="../static/juezhanbang.png" mode="widthFix" />
<view class="divide-line"></view>
<view class="player-avatars">
<block v-for="i in 6" :key="i">
<block v-if="rankData.rank && rankData.rank[i - 1]">
<view
v-for="i in 6"
:key="i"
class="player-avatar"
:style="{
zIndex: 8 - i,
borderColor: topThreeColors[i - 1] || '#000',
borderColor: rankData.rank[i - 1]
? topThreeColors[i - 1] || '#000'
: '#000',
}"
>
<image v-if="i === 1" src="../static/champ1.png" />
@@ -166,13 +197,13 @@ const comingSoon = () => {
<view v-if="i > 3">{{ i }}</view>
<image
:src="
rankData.rank[i - 1].avatar || '../static/user-icon.png'
rankData.rank[i - 1]
? rankData.rank[i - 1].avatar
: '../static/user-icon-dark.png'
"
mode="aspectFill"
/>
</view>
</block>
</block>
<view class="more-players">
<text>{{ rankData.rank.length }}</text>
</view>
@@ -182,7 +213,7 @@ const comingSoon = () => {
<view @click="() => toPage('/pages/my-growth')">
<image src="../static/my-growth.png" mode="widthFix" />
</view>
<view>
<view @click="() => toPage('/pages/ranking')">
<view>
<text>段位</text>
<text>{{
@@ -262,7 +293,7 @@ const comingSoon = () => {
<Signin :onClose="() => (showModal = false)" />
</SModal>
</view>
<AppFooter :signin="() => (showModal = true)" />
<AppFooter />
</Container>
</template>
@@ -341,7 +372,7 @@ const comingSoon = () => {
align-items: center;
padding-bottom: 20px;
margin-top: 42%;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 1rpx solid rgba(255, 255, 255, 0.2);
}
.ranking-players > image:first-child {
@@ -366,8 +397,8 @@ const comingSoon = () => {
width: 82rpx;
height: 82rpx;
border-radius: 50%;
margin-right: -10px;
border: 1px solid #312f35;
margin-right: -20rpx;
border: 1rpx solid #312f35;
position: relative;
box-sizing: border-box;
}
@@ -375,10 +406,10 @@ const comingSoon = () => {
.player-avatar > image:first-child,
.player-avatar > view:first-child {
position: absolute;
top: -10px;
left: 12px;
width: 16px;
height: 16px;
top: -24rpx;
left: 22rpx;
width: 32rpx;
height: 32rpx;
}
.player-avatar > view:first-child {
border-radius: 50%;

View File

@@ -168,7 +168,7 @@ const checkBowData = () => {
borderColor: '#FF6767',
transform: `translateX(-${index * 15}px)`,
}"
:src="src"
:src="src || '../static/user-icon.png'"
:key="index"
mode="widthFix"
/>
@@ -210,7 +210,7 @@ const checkBowData = () => {
borderColor: '#64BAFF',
transform: `translateX(-${index * 15}px)`,
}"
:src="src"
:src="src || '../static/user-icon.png'"
:key="index"
mode="widthFix"
/>

View File

@@ -1,5 +1,5 @@
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
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";
@@ -59,7 +59,7 @@ onMounted(() => {
uni.$on("socket-inbox", onReceiveMessage);
});
onUnmounted(() => {
onBeforeUnmount(() => {
uni.setKeepScreenOn({
keepScreenOn: false,
});

View File

@@ -1,11 +1,10 @@
<script setup>
import { ref, watch, onMounted, onUnmounted } from "vue";
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 Timer from "@/components/Timer.vue";
import PlayerScore from "@/components/PlayerScore.vue";
import SButton from "@/components/SButton.vue";
import Avatar from "@/components/Avatar.vue";
@@ -161,7 +160,7 @@ onMounted(() => {
});
uni.$on("socket-inbox", onReceiveMessage);
});
onUnmounted(() => {
onBeforeUnmount(() => {
uni.setKeepScreenOn({
keepScreenOn: false,
});
@@ -193,7 +192,7 @@ onHide(() => {
<Container :title="title" :bgType="1" :onBack="onBack">
<view class="container">
<BattleHeader v-if="!start" :players="players" />
<TestDistance v-if="!start" :guide="false" />
<TestDistance v-if="!start" :guide="false" :isBattle="true" />
<ShootProgress
:show="start"
:start="start && startCount"
@@ -223,7 +222,6 @@ onHide(() => {
:scores="playersScores[player.id] || []"
/>
</view>
<Timer v-if="!start" />
<ScreenHint
:show="halfTimeTip"
mode="small"

View File

@@ -11,11 +11,13 @@ import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
const arrows = ref([]);
const total = ref(0);
onLoad(async (options) => {
if (options.id) {
const result = await getPractiseAPI(options.id);
arrows.value = result.arrows;
total.value = result.completed_arrows;
}
});
</script>
@@ -43,8 +45,8 @@ onLoad(async (options) => {
</view>
<ScorePanel
:completeEffect="false"
:rowCount="arrows.length === 12 ? 6 : 9"
:total="arrows.length"
:rowCount="total === 12 ? 6 : 9"
:total="total"
:scores="arrows.map((a) => a.ring)"
:margin="arrows.length === 12 ? 4 : 1"
:fontSize="arrows.length === 12 ? 25 : 22"

View File

@@ -92,35 +92,53 @@ const toDeviceIntroPage = () => {
const backToHome = () => {
uni.navigateBack();
};
const copyEmail = () => {
uni.setClipboardData({
data: "shelingxingqiu@163.com",
success: () => {
uni.showToast({
title: "邮箱已复制",
icon: "success",
});
},
});
};
</script>
<template>
<Container title="弓箭绑定">
<view v-if="!device.deviceId" class="scan-code">
<view @click="handleScan">
<button hover-class="none" @click="handleScan">
<image src="../static/scan.png" mode="widthFix" />
<text>扫码绑定弓箭</text>
</view>
<view>
<view @click="() => (showTip = true)">找不到我的弓箭</view>
<view @click="toDeviceIntroPage">我还没有弓箭</view>
</view>
</button>
<button hover-class="none" @click="showTip = true">
<text></text>
<text :style="{ color: '#fed847' }">射灵弓箭</text>
<text>上的二维码</text>
<image src="../static/s-question-mark-white.png" mode="widthFix" />
</button>
<text>射灵智能弓箭三模传感系统与独创靶环算法</text>
<text>毫秒级在线实时对战让你拥有全球约战的乐趣</text>
<button hover-class="none" @click="toDeviceIntroPage">
<image src="../static/have-no-device.png" mode="widthFix" />
</button>
<ScreenHint
mode="square"
:show="showTip"
:onClose="() => (showTip = false)"
>
<view class="scan-tips">
<text>找不到我的弓箭 </text>
<text>1.确认弓箭是智能弓箭 </text>
<text>2.确认弓箭有电且电源已开启 </text>
<text>3.进入弓箭绑定功能扫描弓箭上的二维码 </text>
<text>扫码绑定设灵弓箭</text>
<image
src="https://static.shelingxingqiu.com/attachment/2025-08-05/dbuacrelri7jr3axiy.png"
mode="widthFix"
/>
<text>4.连接成功后</text>
<view>联系在线客服</view>
<text>已被绑定的弓箭无法再次绑定</text>
<view>
<text>如有任何疑问请随时联系</text>
<button hover-class="none" @click="copyEmail">shelingxingqiu@163.com</button>
</view>
</view>
</ScreenHint>
<ScreenHint
@@ -202,44 +220,66 @@ const backToHome = () => {
width: 100%;
height: 100%;
}
.scan-code > view:first-child {
.scan-code {
justify-content: flex-start;
}
.scan-code > button:first-child {
margin-top: 22%;
}
.scan-code > button:first-child > image {
width: 300rpx;
}
.scan-code > button:nth-child(2) {
display: flex;
flex-direction: column;
align-items: center;
width: 40%;
color: #fff;
font-size: 14px;
margin: 35% 0;
justify-content: center;
font-size: 26rpx;
color: #ffffff;
margin: 50rpx;
}
.scan-code > view:first-child > image {
width: 100%;
margin-bottom: 20px;
.scan-code > button:nth-child(2) > image {
width: 28rpx;
margin-left: 10rpx;
}
.scan-code > view:nth-child(2) {
display: flex;
flex-direction: column;
align-items: center;
.scan-code > text {
font-size: 24rpx;
color: #fff9;
}
.scan-code > view:nth-child(2) > view {
color: #39a8ff;
font-size: 14px;
margin: 10px;
.scan-code > button:nth-child(5) {
margin-top: 25%;
}
.scan-code > button:nth-child(5) > image {
width: 380rpx;
}
.scan-tips {
display: flex;
flex-direction: column;
font-size: 14px;
width: 90%;
margin-top: 20%;
}
.scan-tips > text {
margin-bottom: 2px;
color: #fff;
font-size: 24rpx;
}
.scan-tips > text:first-child {
color: #fed847;
margin-bottom: 10px;
font-size: 32rpx;
}
.scan-tips > view {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.scan-tips > view:last-child {
color: #39a8ff;
margin-top: 5px;
font-size: 26rpx;
}
.scan-tips > view:last-child > button {
font-size: 30rpx;
color: #39a8ff;
}
.scan-tips > image {
width: 100%;

View File

@@ -86,6 +86,7 @@ const onPractiseLoading = async (page) => {
:blueTeam="item.bluePlayers"
:redTeam="item.redPlayers"
:winner="item.winner"
:showRank="item.mode === 2"
:showHeader="false"
/>
</view>
@@ -101,50 +102,14 @@ const onPractiseLoading = async (page) => {
<text>{{ item.createdAt }}</text>
<image src="../static/back.png" mode="widthFix" />
</view>
<view v-if="item.mode === 1" class="contest-team">
<block v-if="item.bluePlayers[0]">
<view class="player">
<Avatar
:rankLvl="item.bluePlayers[0].rankLvl"
:src="item.bluePlayers[0].avatar"
<BattleHeader
:players="item.mode === 1 ? [] : item.players"
:blueTeam="item.bluePlayers"
:redTeam="item.redPlayers"
:winner="item.winner"
:showRank="item.mode === 2"
:showHeader="false"
/>
<text>{{ item.bluePlayers[0].name }}</text>
<image
v-if="item.winner === 1"
src="../static/winner-badge.png"
mode="widthFix"
/>
</view>
</block>
<block v-if="item.redPlayers[0]">
<view class="player">
<Avatar
:rankLvl="item.redPlayers[0].rankLvl"
:src="item.redPlayers[0].avatar"
/>
<text>{{ item.redPlayers[0].name }}</text>
<image
v-if="item.winner === 0"
src="../static/winner-badge.png"
mode="widthFix"
/>
</view>
</block>
</view>
<view v-if="item.mode === 2" class="contest-melee">
<view
class="player"
v-for="(p, index2) in item.players"
:key="index2"
:style="{
width: `${Math.max(100 / item.players.length, 18)}vw`,
backgroundColor: meleeAvatarColors[index2],
}"
>
<Avatar :rank="index2 + 1" :src="p.avatar" />
<text>{{ p.name }}</text>
</view>
</view>
</view>
</ScrollList>
<ScrollList

View File

@@ -1,5 +1,5 @@
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { ref, onMounted, onBeforeUnmount } from "vue";
import Container from "@/components/Container.vue";
import SButton from "@/components/SButton.vue";
import { payOrderAPI, cancelOrderListAPI, getHomeData } from "@/apis";
@@ -30,7 +30,7 @@ onMounted(() => {
uni.$on("socket-inbox", onReceiveMessage);
});
onUnmounted(() => {
onBeforeUnmount(() => {
uni.$off("socket-inbox", onReceiveMessage);
});

View File

@@ -1,13 +1,12 @@
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { ref, onMounted } from "vue";
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({});
const bowType = ref("");
const distance = ref(0);
const bowtargetType = ref("");
const amountGroup = ref("");
@@ -43,7 +42,7 @@ const toEditPage = () => {
bowtargetType.value &&
amountGroup.value
) {
uni.setStorageSync("point-book", {
uni.setStorageSync("last-point-book", {
bowType: bowType.value,
distance: distance.value,
bowtargetType: bowtargetType.value,
@@ -54,20 +53,13 @@ const toEditPage = () => {
});
} 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("point-book");
const pointBook = uni.getStorageSync("last-point-book");
if (pointBook) {
bowType.value = pointBook.bowType;
distance.value = pointBook.distance;
@@ -82,29 +74,9 @@ onMounted(async () => {
:bgType="2"
bgColor="#F5F5F5"
:whiteBackArrow="false"
title="计分与技术分析"
title="选择参数"
>
<view class="container">
<view class="header">
<image
src="https://static.shelingxingqiu.com/attachment/2025-08-06/dbv8w5ak76hozbfpy2.png"
mode="widthFix"
/>
<view>
<view>
<text>{{ days }}</text>
<text></text>
</view>
<text>训练天数</text>
</view>
<view>
<view>
<text>{{ arrows }}</text>
<text></text>
</view>
<text>训练箭数</text>
</view>
</view>
<view>
<EditOption
:itemIndex="0"
@@ -136,11 +108,7 @@ onMounted(async () => {
</view>
</view>
<view :style="{ marginBottom: '20px' }">
<SButton :rounded="50" :onClick="toEditPage">开始计分</SButton>
<view class="see-more" @click="toListPage">
<text>历史计分记录</text>
<image src="../static/enter-arrow-blue.png" mode="widthFix" />
</view>
<SButton :rounded="50" :onClick="toEditPage">Next</SButton>
</view>
</Container>
</template>

View File

@@ -0,0 +1,434 @@
<script setup>
import { ref, computed } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import SButton from "@/components/SButton.vue";
import BowTargetEdit from "@/components/BowTargetEdit.vue";
import ScreenHint2 from "@/components/ScreenHint2.vue";
import RingBarChart from "@/components/RingBarChart.vue";
import { getPointBookDetailAPI, getPointBookConfigAPI } from "@/apis";
const selectedIndex = ref(0);
const showTip = ref(false);
const showTip2 = ref(false);
const data = ref({});
const targetId = ref(0);
const targetSrc = ref("");
const arrows = ref([]);
const record = ref({
groups: [],
user: {},
});
const bowConfig = ref({});
const paddingTop = computed(() => {
const menuBtnInfo = uni.getMenuButtonBoundingClientRect();
return menuBtnInfo.top - 9 - 9;
});
const openTip = (index) => {
if (index === 1) showTip.value = true;
else if (index === 2) showTip2.value = true;
};
const closeTip = () => {
showTip.value = false;
showTip2.value = false;
};
const goBack = () => {
const pages = getCurrentPages();
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 goHome = () => {
uni.redirectTo({
url: "/pages/point-book",
});
};
const ringRates = computed(() => {
const rates = new Array(12).fill(0);
arrows.value.forEach((item) => {
if (item.ring === -1) rates[11] += 1;
else rates[item.ring] += 1;
});
return rates.map((r) => r / arrows.value.length);
});
onLoad(async (options) => {
if (options.id) {
const result = await getPointBookDetailAPI(options.id || 183);
record.value = result;
const config = await getPointBookConfigAPI();
bowConfig.value = config;
config.targetOption.some((item) => {
if (item.id === result.targetType) {
targetId.value = item.id;
targetSrc.value = item.icon;
}
});
if (result.groups) {
data.value = result.groups[0];
arrows.value = result.groups[0].list;
}
}
});
const bowOptionName = computed(() => {
if (bowConfig.value.bowOption && record.value.bowType) {
const data = bowConfig.value.bowOption.find(
(b) => b.id === record.value.bowType
);
if (data) return data.name || "";
}
return "";
});
const targetTypeName = computed(() => {
if (bowConfig.value.targetOption && record.value.targetType) {
const data = bowConfig.value.targetOption.find(
(b) => b.id === record.value.targetType
);
if (data) return data.name || "";
}
return "";
});
</script>
<template>
<view class="container" :style="{ paddingTop: paddingTop + 'px' }">
<image
src="../static/app-bg5.png"
class="bg-image"
mode="aspectFill"
:style="{ height: paddingTop + 60 + 'px' }"
/>
<view class="header">
<image
:src="record.user.avatar || '../static/user-icon.png'"
mode="widthFix"
class="avatar"
/>
<view>
<text>{{ record.user.name }}</text>
<view class="point-book-info">
<text v-if="bowOptionName">{{ bowOptionName }}</text>
<text>{{ record.distance }} </text>
<text v-if="targetTypeName">{{ targetTypeName }}</text>
</view>
</view>
</view>
<view class="detail-data">
<view>
<view
:style="{ display: 'flex', alignItems: 'center' }"
@click="() => openTip(1)"
>
<text>落点稳定性</text>
<image
src="../static/s-question-mark.png"
mode="widthFix"
class="question-mark"
/>
</view>
<text>{{ Number((data.stability || 0).toFixed(2)) }}</text>
</view>
<view>
<view>黄心率</view>
<text>{{ Number((data.yellowRate * 100).toFixed(2)) }}%</text>
</view>
<view>
<view>10环数</view>
<text>{{ data.tenRings }}</text>
</view>
<view>
<view>平均环数</view>
<text>{{ Number((data.averageRing || 0).toFixed(2)) }}</text>
</view>
<view>
<view>总环数</view>
<text>{{ data.userTotalRing }}/{{ data.totalRing }}</text>
</view>
</view>
<view class="title-bar">
<view />
<text>落点分布</text>
<!-- <button hover-class="none" @click="() => openTip(2)">
<image
src="../static/s-question-mark.png"
mode="widthFix"
class="question-mark"
/>
</button> -->
</view>
<view :style="{ transform: 'translateY(-45rpx)' }">
<BowTargetEdit
:id="targetId"
:src="targetSrc"
:arrows="arrows.filter((item) => item.x && item.y)"
/>
</view>
<view :style="{ transform: 'translateY(-60rpx)' }">
<!-- <view class="title-bar">
<view />
<text>环值分布</text>
</view> -->
<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.list.reduce((acc, cur) => acc + cur.ring, 0) }}</text>
<text></text>
</view>
<view
v-if="
(selectedIndex === 0 && index !== 0) ||
(selectedIndex !== 0 && index === selectedIndex)
"
:style="{
marginLeft: selectedIndex === 0 && index !== 0 ? '20rpx' : '0',
}"
>
<text
v-for="(arrow, index2) in item.list"
:key="index2"
:style="{
color:
arrow.ring === 0 || arrow.ring === 10 ? '#FFA118' : '#666',
}"
>
{{
arrow.ring === 0 ? "X" : arrow.ring === -1 ? "M" : arrow.ring
}}
</text>
</view>
</view>
</view>
<SButton :onClick="goHome" :rounded="40">开启我的弓箭记录</SButton>
</view>
<ScreenHint2 :show="showTip || showTip2" :onClose="closeTip">
<view class="tip-content">
<block v-if="showTip">
<text>落点稳定性说明</text>
<text
>通过计算每支箭与其他箭的平均距离衡量射箭的稳定性,数字越小则说明射箭越稳定。该数据只能在用户标记落点的情况下生成。</text
>
</block>
<block v-if="showTip2">
<text>落点分布说明</text>
<text>展示用户某次练习中射箭的点位</text>
</block>
</view>
</ScreenHint2>
</view>
</template>
<style scoped>
.container {
width: 100vw;
height: 100vh;
background: #f5f5f5;
position: relative;
overflow: auto;
}
.header {
overflow: hidden;
display: flex;
align-items: center;
position: relative;
}
.header > image {
border-radius: 50%;
width: 90rpx;
height: 90rpx;
border: 2rpx solid #000;
margin: 0 25rpx;
}
.header > view {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.header > view > text {
color: #000;
margin-bottom: 7rpx;
}
.bg-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.header {
width: 100%;
height: 60px;
}
.detail-data {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 3vw;
margin: 10rpx 30rpx;
margin-top: 20rpx;
}
.detail-data > view,
.detail-data > button {
border-radius: 10px;
background-color: #fff;
margin-bottom: 20rpx;
padding: 15rpx 24rpx;
}
.detail-data > view > view {
font-size: 13px;
color: #999;
margin-bottom: 6rpx;
}
.detail-data > view > view > text {
word-break: keep-all;
}
.detail-data > view > text {
font-weight: 500;
color: #000;
}
.detail-data > button {
display: flex;
align-items: center;
font-size: 26rpx;
color: #999999;
}
.detail-data > button > image {
width: 28rpx;
height: 28rpx;
margin-right: 10rpx;
margin-left: 20rpx;
}
.question-mark {
width: 28rpx;
height: 28rpx;
margin-left: 3px;
}
.title-bar {
width: 100%;
display: flex;
align-items: center;
font-size: 13px;
color: #999;
position: relative;
z-index: 10;
}
.title-bar > view:first-child {
width: 8rpx;
height: 28rpx;
border-radius: 10px;
background-color: #fed847;
margin-right: 7px;
margin-left: 15px;
}
.title-bar > button {
height: 34rpx;
}
.tip-content {
width: 100%;
padding: 50rpx 44rpx;
display: flex;
flex-direction: column;
color: #000;
}
.tip-content > text {
width: 100%;
}
.tip-content > text:first-child {
text-align: center;
}
.tip-content > text:last-child {
font-size: 13px;
margin-top: 20px;
opacity: 0.8;
}
.ring-text-groups {
display: flex;
flex-direction: column;
padding: 20rpx;
padding-top: 40rpx;
font-size: 24rpx;
color: #999999;
}
.ring-text-groups > view {
display: flex;
justify-content: center;
}
.ring-text-groups > view > view:first-child:nth-last-child(2) {
margin-top: 10rpx;
margin-left: 30rpx;
width: 90rpx;
text-align: center;
justify-content: flex-end;
font-size: 20rpx;
display: flex;
color: #999;
}
.ring-text-groups > view > view:first-child:nth-last-child(2) > text {
line-height: 30rpx;
}
.ring-text-groups
> view
> view:first-child:nth-last-child(2)
> text:nth-child(2) {
font-size: 40rpx;
/* min-width: 45rpx; */
color: #666;
margin-right: 6rpx;
margin-top: -5rpx;
}
.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%;
text-align: center;
margin-bottom: 10rpx;
font-weight: 500;
font-size: 26rpx;
}
.notes-input {
width: calc(100% - 40rpx);
margin: 25rpx 0;
border: 1px solid #eee;
border-radius: 5px;
color: #000;
padding: 20rpx;
}
.point-book-info {
color: #333;
display: flex;
justify-content: center;
}
.point-book-info > text {
border-radius: 6px;
background-color: #fff;
font-size: 10px;
padding: 5px 10px;
margin-right: 5px;
}
</style>

View File

@@ -1,63 +1,153 @@
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { ref, onMounted, computed } from "vue";
import { onLoad, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import BowTargetEdit from "@/components/BowTargetEdit.vue";
import ScreenHint2 from "@/components/ScreenHint2.vue";
import SButton from "@/components/SButton.vue";
import RingBarChart from "@/components/RingBarChart.vue";
import { getPointBookDetailAPI } from "@/apis";
import { getPointBookDetailAPI, addNoteAPI } from "@/apis";
import { wxShare, generateShareCard, generateShareImage } from "@/util";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user, device } = storeToRefs(store);
const selectedIndex = ref(0);
const showTip = ref(false);
const showTip2 = ref(false);
const groups = ref([]);
const showTip3 = ref(false);
const data = ref({});
const targetId = ref(0);
const targetSrc = ref("");
const arrows = ref([]);
const notes = ref("");
const draftNotes = ref("");
const record = ref({
groups: [],
user: {},
});
const shareType = ref(1);
const openTip = (index) => {
if (index === 1) showTip.value = true;
else if (index === 2) showTip2.value = true;
else if (index === 3) showTip3.value = true;
};
const closeTip = () => {
showTip.value = false;
showTip2.value = false;
showTip3.value = false;
};
const saveNote = async () => {
notes.value = draftNotes.value;
draftNotes.value = "";
showTip3.value = false;
if (record.value.id) {
await addNoteAPI(record.value.id, notes.value);
}
};
const onSelect = (index) => {
selectedIndex.value = index;
data.value = groups.value[index];
arrows.value = groups.value[index].list.filter((item) => item.x && item.y);
data.value = record.value.groups[index];
arrows.value = record.value.groups[index].list.filter(
(item) => item.x && item.y
);
};
const goBack = () => {
uni.navigateBack();
const pages = getCurrentPages();
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(() => {
const rates = new Array(12).fill(0);
arrows.value.forEach((item) => {
if (item.ring === -1) rates[11] += 1;
else rates[item.ring] += 1;
});
return rates.map((r) => r / arrows.value.length);
});
const loading = ref(false);
const shareImage = async () => {
if (loading.value) return;
loading.value = true;
await generateShareImage("shareImageCanvas");
await wxShare("shareImageCanvas");
loading.value = false;
};
onLoad(async (options) => {
if (options.id) {
const result = await getPointBookDetailAPI(options.id);
const result = await getPointBookDetailAPI(options.id || 209);
record.value = result;
notes.value = result.remark || "";
const config = uni.getStorageSync("point-book-config");
config.targetOption.some((item) => {
if (item.id === result.targetType) {
targetId.value = item.id;
targetSrc.value = item.icon;
}
});
if (result.groups) {
groups.value = result.groups;
data.value = result.groups[0];
arrows.value = result.groups[0].list.filter((item) => item.x && item.y);
arrows.value = result.groups[0].list;
}
}
});
onShareAppMessage(async () => {
const imageUrl = await generateShareCard(
"shareCardCanvas",
record.value.recordDate,
data.value.userTotalRing,
data.value.totalRing
);
return {
title: "射箭打卡,今日又精进了一些~",
path: "/pages/point-book-detail-share?id=" + record.value.id,
imageUrl,
};
});
onShareTimeline(async () => {
const imageUrl = await generateShareCard(
"shareCardCanvas",
record.value.recordDate,
data.value.userTotalRing,
data.value.totalRing
);
return {
title: "射箭打卡,今日又精进了一些~",
query: "id=" + record.value.id,
imageUrl,
};
});
</script>
<template>
<Container :bgType="2" bgColor="#F5F5F5" :whiteBackArrow="false" title="分析">
<Container
:bgType="2"
bgColor="#F5F5F5"
:whiteBackArrow="false"
title=""
:onBack="goBack"
>
<view class="container">
<view class="tab-bar">
<!-- <view class="tab-bar">
<view
v-for="(_, index) in groups"
:key="index"
@@ -72,20 +162,25 @@ onLoad(async (options) => {
}"
>{{ index === 0 ? "全部" : `${index}` }}</text
>
<!-- <image
src="../static/s-triangle.png"
mode="widthFix"
:style="{ bottom: selectedIndex !== index ? '0' : '-5px' }"
/> -->
</view>
</view>
</view> -->
<canvas
class="share-canvas"
canvas-id="shareCardCanvas"
style="width: 375px; height: 300px"
></canvas>
<canvas
class="share-canvas"
canvas-id="shareImageCanvas"
style="width: 375px; height: 860px"
></canvas>
<view class="detail-data">
<view>
<view
:style="{ display: 'flex', alignItems: 'center' }"
@click="() => openTip(1)"
>
<text>落点稳定性</text>
<text>Stability</text>
<image
src="../static/s-question-mark.png"
mode="widthFix"
@@ -95,48 +190,134 @@ onLoad(async (options) => {
<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
hover-class="none"
@click="() => openTip(3)"
v-if="user.id === record.user.id"
>
<image src="../static/edit.png" mode="widthFix" />
<text>Notes</text>
</button>
</view>
<view class="title-bar">
<view />
<text>落点分布</text>
<button hover-class="none" @click="() => openTip(2)">
<text>Distribution</text>
<!-- <button hover-class="none" @click="() => openTip(2)">
<image
src="../static/s-question-mark.png"
mode="widthFix"
class="question-mark"
/>
</button>
</button> -->
</view>
<BowTargetEdit :src="targetSrc" :arrows="arrows" />
<view :style="{ marginTop: '20px' }">
<SButton :onClick="goBack" :rounded="50">关闭</SButton>
<view :style="{ transform: 'translateY(-45rpx)' }">
<BowTargetEdit
:id="targetId"
:src="targetSrc"
:arrows="arrows.filter((item) => item.x && item.y)"
/>
</view>
<ScreenHint2 :show="showTip || showTip2" :onClose="closeTip">
<view :style="{ transform: 'translateY(-60rpx)' }">
<view :style="{ padding: '0 30rpx' }">
<RingBarChart :data="ringRates" />
</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>Ring</text>
</view>
<view
v-if="
(selectedIndex === 0 && index !== 0) ||
(selectedIndex !== 0 && index === selectedIndex)
"
>
<text
v-for="(arrow, index2) in item.list"
:key="index2"
:style="{
color:
arrow.ring === 0 || arrow.ring === 10 ? '#FFA118' : '#666',
}"
>
{{
arrow.ring === 0 ? "X" : arrow.ring === -1 ? "M" : arrow.ring
}}
</text>
</view>
</view>
</view>
<view
class="btns"
:style="{
gridTemplateColumns: `repeat(${
user.id === record.user.id ? 1 : 1
}, 1fr)`,
}"
>
<button hover-class="none" @click="goBack">Close</button>
<!-- <button
hover-class="none"
@click="shareImage"
v-if="user.id === record.user.id"
>
分享
</button> -->
</view>
</view>
<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>Notes</text>
<text v-if="notes">{{ notes }}</text>
<textarea
v-if="!notes"
v-model="draftNotes"
maxlength="300"
rows="4"
class="notes-input"
placeholder="写下本次射箭的补充信息与心得"
placeholder-style="color: #ccc;"
/>
<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>
</ScreenHint2>
@@ -166,8 +347,7 @@ onLoad(async (options) => {
border-radius: 10px;
background-color: #fff;
width: 24vw;
height: 13vw;
line-height: 13vw;
height: 80rpx;
text-align: center;
margin: 5px;
margin-top: 0;
@@ -176,6 +356,7 @@ onLoad(async (options) => {
position: relative;
}
.tab-bar > view > text {
line-height: 80rpx;
transition: all 0.2s ease;
}
.tab-bar > view > image {
@@ -189,25 +370,43 @@ onLoad(async (options) => {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 3vw;
margin: 10px 15px;
margin: 10rpx 30rpx;
margin-top: 20rpx;
}
.detail-data > view {
.detail-data > view,
.detail-data > button {
border-radius: 10px;
background-color: #fff;
margin-bottom: 10px;
padding: 12px;
margin-bottom: 20rpx;
padding: 15rpx 24rpx;
}
.detail-data > view > view {
font-size: 13px;
color: #999;
margin-bottom: 8px;
margin-bottom: 6rpx;
}
.detail-data > view > view > text {
word-break: keep-all;
}
.detail-data > view > text {
font-weight: 500;
color: #000;
}
.detail-data > button {
display: flex;
align-items: center;
font-size: 26rpx;
color: #999999;
}
.detail-data > button > image {
width: 28rpx;
height: 28rpx;
margin-right: 10rpx;
margin-left: 20rpx;
}
.question-mark {
width: 15px;
height: 15px;
width: 28rpx;
height: 28rpx;
margin-left: 3px;
}
.title-bar {
@@ -216,23 +415,27 @@ onLoad(async (options) => {
align-items: center;
font-size: 13px;
color: #999;
position: relative;
z-index: 10;
}
.title-bar > view:first-child {
width: 5px;
height: 15px;
width: 8rpx;
height: 28rpx;
border-radius: 10px;
background-color: #fed847;
margin-right: 7px;
margin-left: 15px;
}
.title-bar > text {
margin-bottom: 2px;
.title-bar > button {
height: 34rpx;
}
.tip-content {
width: 100%;
padding: 25px;
padding: 50rpx 44rpx;
display: flex;
flex-direction: column;
color: #000;
overflow: hidden;
}
.tip-content > text {
width: 100%;
@@ -245,4 +448,113 @@ onLoad(async (options) => {
margin-top: 20px;
opacity: 0.8;
}
.tip-content > view {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.tip-content > view > input {
width: 80%;
height: 44px;
border-radius: 22px;
border: 1px solid #eeeeee;
padding: 0 12px;
font-size: 14px;
color: #000;
}
.tip-content > view > button {
width: 48%;
background: linear-gradient(180deg, #fbfbfb 0%, #f5f5f5 100%);
border-radius: 22px;
border: 1px solid #eeeeee;
padding: 12px 0;
font-size: 14px;
color: #000;
}
.tip-content > view > button:last-child {
background: #fed847;
}
.ring-text-groups {
display: flex;
flex-direction: column;
padding: 20rpx;
padding-top: 40rpx;
font-size: 24rpx;
color: #999999;
}
.ring-text-groups > view {
display: flex;
justify-content: center;
}
.ring-text-groups > view > view:first-child:nth-last-child(2) {
margin-top: 10rpx;
margin-left: 30rpx;
width: 90rpx;
text-align: center;
justify-content: flex-end;
font-size: 20rpx;
display: flex;
color: #999;
}
.ring-text-groups > view > view:first-child:nth-last-child(2) > text {
line-height: 30rpx;
}
.ring-text-groups
> view
> view:first-child:nth-last-child(2)
> text:nth-child(2) {
font-size: 40rpx;
/* min-width: 45rpx; */
color: #666;
margin-right: 6rpx;
margin-top: -5rpx;
}
.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%;
text-align: center;
margin-bottom: 10rpx;
font-weight: 500;
font-size: 26rpx;
}
.notes-input {
width: calc(100% - 40rpx);
min-width: calc(100% - 40rpx);
margin: 25rpx 0;
border: 1px solid #eee;
border-radius: 5px;
padding: 5px;
color: #000;
padding: 20rpx;
}
.btns {
margin-bottom: 40rpx;
display: grid;
align-items: center;
justify-content: center;
column-gap: 20rpx;
padding: 0 20rpx;
}
.btns > button {
height: 84rpx;
line-height: 84rpx;
background: linear-gradient(180deg, #fbfbfb 0%, #f5f5f5 100%), #ffffff;
border-radius: 44rpx;
border: 2rpx solid #eeeeee;
box-sizing: border-box;
font-weight: 500;
font-size: 30rpx;
color: #000000;
}
.btns > button:nth-child(2) {
background: #fed847;
border: none;
}
</style>

View File

@@ -36,7 +36,7 @@ const onSubmit = async () => {
);
if (!isComplete) {
return uni.showToast({
title: "请完善信息",
title: "Please complete the information",
icon: "none",
});
}
@@ -44,7 +44,7 @@ const onSubmit = async () => {
currentGroup.value++;
currentArrow.value = 0;
} else {
const pointBook = uni.getStorageSync("point-book");
const pointBook = uni.getStorageSync("last-point-book");
const res = await savePointBookAPI(
pointBook.bowType.id,
pointBook.distance,
@@ -75,7 +75,7 @@ const onEditDone = (arrow) => {
};
onMounted(() => {
const pointBook = uni.getStorageSync("point-book");
const pointBook = uni.getStorageSync("last-point-book");
if (pointBook.bowtargetType) {
bowtarget.value = pointBook.bowtargetType;
if (bowtarget.value.id > 3) {
@@ -112,11 +112,11 @@ onMounted(() => {
<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">
@@ -133,12 +133,15 @@ onMounted(() => {
isNaN(arrow.ring)
? arrow.ring
: arrow.ring
? arrow.ring + " "
? arrow.ring + " points"
: ""
}}</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"
@@ -155,12 +158,12 @@ onMounted(() => {
</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>
@@ -168,7 +171,7 @@ onMounted(() => {
</view>
<view :style="{ marginBottom: '20px' }">
<SButton :rounded="50" :onClick="onSubmit">
{{ currentGroup === groups ? "记完了,提交看分析" : "下一组" }}
{{ currentGroup === groups ? "Submit for analysis" : "Next set" }}
</SButton>
</view>
</Container>
@@ -218,6 +221,7 @@ onMounted(() => {
padding: 25px;
display: flex;
flex-direction: column;
color: #000;
}
.tip-content > text {
width: 100%;
@@ -237,6 +241,7 @@ onMounted(() => {
border: 1px solid #eeeeee;
padding: 12px 0;
font-size: 14px;
color: #000;
}
.tip-content > view > button:last-child {
background: #fed847;

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>

View File

@@ -1,18 +1,21 @@
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { ref, onMounted } from "vue";
import Container from "@/components/Container.vue";
import SModal from "@/components/SModal.vue";
import EditOption from "@/components/EditOption.vue";
import PointRecord from "@/components/PointRecord.vue";
import ScrollList from "@/components/ScrollList.vue";
import { getPointBookListAPI } from "@/apis";
import ScreenHint2 from "@/components/ScreenHint2.vue";
import { getPointBookListAPI, removePointRecord } from "@/apis";
const showTip = ref(false);
const bowType = ref({});
const distance = ref(0);
const bowtargetType = ref({});
const showModal = ref(false);
const selectorIndex = ref(0);
const list = ref([]);
const removeId = ref("");
const onListLoading = async (page) => {
const result = await getPointBookListAPI(
@@ -34,6 +37,22 @@ const openSelector = (index) => {
showModal.value = true;
};
const onRemoveRecord = (item) => {
removeId.value = item.id;
showTip.value = true;
};
const confirmRemove = async () => {
try {
showTip.value = false;
await removePointRecord(removeId.value);
list.value = list.value.filter((it) => it.id !== removeId.value);
uni.showToast({ title: "Deleted", icon: "none" });
} catch (e) {
uni.showToast({ title: "Delete failed, please retry", icon: "none" });
}
};
const onSelectOption = (itemIndex, value) => {
if (itemIndex === 0) {
bowType.value = value.name === bowType.value.name ? {} : value;
@@ -45,11 +64,6 @@ const onSelectOption = (itemIndex, value) => {
showModal.value = false;
onListLoading(1);
};
const toDetailPage = (id) => {
uni.navigateTo({
url: `/pages/point-book-detail?id=${id}`,
});
};
</script>
<template>
@@ -57,44 +71,42 @@ const toDetailPage = (id) => {
: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">
<view
v-for="(item, index) in list"
:key="index"
@click="() => toDetailPage(item.id)"
>
<PointRecord :data="item" />
<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">暂无数据</view>
<view class="no-data" v-if="list.length === 0">No data</view>
</ScrollList>
</view>
<SModal
:show="showModal"
:noBg="true"
height="auto"
:onClose="() => (showModal = false)"
>
<view class="selector">
@@ -127,6 +139,15 @@ const toDetailPage = (id) => {
/>
</view>
</SModal>
<ScreenHint2 :show="showTip">
<view class="tip-content">
<text>Are you sure to delete this record?</text>
<view>
<button hover-class="none" @click="showTip = false">Cancel</button>
<button hover-class="none" @click="confirmRemove">Confirm</button>
</view>
</view>
</ScreenHint2>
</view>
</Container>
</template>
@@ -194,4 +215,34 @@ const toDetailPage = (id) => {
color: #999999;
font-size: 14px;
}
.tip-content {
width: 100%;
padding: 25px;
display: flex;
flex-direction: column;
color: #000;
}
.tip-content > text {
width: 100%;
text-align: center;
font-size: 14px;
margin-top: 5px;
}
.tip-content > view {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.tip-content > view > button {
width: 48%;
background: linear-gradient(180deg, #fbfbfb 0%, #f5f5f5 100%);
border-radius: 22px;
border: 1px solid #eeeeee;
padding: 12px 0;
font-size: 14px;
color: #000;
}
.tip-content > view > button:last-child {
background: #fed847;
}
</style>

View File

@@ -0,0 +1,201 @@
<script setup>
import { ref } from "vue";
import Avatar from "@/components/Avatar.vue";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
const editAvatar = ref(false);
const toEditPage = (type) => {
uni.navigateTo({
url: "/pages/edit-profile?type=" + type,
});
};
const toSignInPage = () => {
uni.navigateTo({
url: "/pages/sign-in",
});
};
</script>
<template>
<view class="container">
<view class="header">
<image :src="user.avatar" mode="widthFix" />
<button hover-class="none" @click="editAvatar = true">
<image src="../static/pen-yellow.png" mode="widthFix" />
</button>
</view>
<view class="body">
<view>
<button hover-class="none" @click="toEditPage('Name')">
<image src="../static/user-yellow.png" mode="widthFix" />
<text>Name</text>
<image src="../static/back-grey.png" mode="widthFix" />
</button>
<button hover-class="none" @click="toEditPage('Email')">
<image src="../static/email-yellow.png" mode="widthFix" />
<text>Email</text>
<image src="../static/back-grey.png" mode="widthFix" />
</button>
<button hover-class="none" @click="toEditPage('Password')">
<image src="../static/password-yellow.png" mode="widthFix" />
<text>Password</text>
<image src="../static/back-grey.png" mode="widthFix" />
</button>
</view>
<button hover-class="none" @click="toSignInPage">Log out</button>
<view>
<text>Have questions? Please contact us through email: </text>
<text>shelingxingqiu@163.com</text>
</view>
</view>
<view
class="edit-avatar"
:style="{ height: editAvatar ? '100vh' : '0' }"
@click="editAvatar = false"
>
<image :src="user.avatar" mode="widthFix" />
<view>
<button hover-class="none">
<text>Take a photo</text>
<image src="../static/back-grey.png" mode="widthFix" />
</button>
<button hover-class="none">
<text>Choose photo</text>
<image src="../static/back-grey.png" mode="widthFix" />
</button>
</view>
</view>
</view>
</template>
<style scoped lang="scss">
.container {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
}
.header {
position: relative;
margin-top: -120rpx;
}
.header > image {
width: 180rpx;
height: 180rpx;
border-radius: 50%;
border: 4rpx solid #fff;
}
.header > button {
position: absolute;
right: 0;
bottom: 0;
}
.header > button > image {
width: 60rpx;
height: 60rpx;
}
.body {
width: 100%;
margin-top: 20rpx;
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
}
.body > view:first-child {
background-color: $uni-bg-color;
border-radius: 25px;
padding: 0 20px;
width: calc(100% - 80rpx);
}
.body > view:first-child > button {
display: flex;
align-items: center;
padding: 20px 0;
}
.body > view:first-child > button:not(:last-child) {
border-bottom: 1rpx solid #e3e3e3;
}
.body > view:first-child > button > image:first-child {
width: 40rpx;
height: 40rpx;
}
.body > view:first-child > button > text {
flex: 1;
font-size: 26rpx;
color: #333333;
text-align: left;
padding-left: 20rpx;
}
.body > view:first-child > button > image:last-child {
width: 28rpx;
height: 28rpx;
}
.body > button {
margin-top: 24rpx;
background: $uni-bg-color;
border-radius: 24rpx;
font-size: 26rpx;
color: $uni-link-color;
text-align: center;
padding: 20px 0;
width: 100%;
}
.body > view:last-child {
margin-top: auto;
padding-bottom: 25rpx;
display: flex;
flex-direction: column;
align-items: center;
font-size: 24rpx;
color: #666666;
}
.body > view:last-child > text:last-child {
color: $uni-link-color;
}
.edit-avatar {
position: fixed;
top: 0;
right: 0;
width: 100vw;
background: rgba(0, 0, 0, 0.8);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
}
.edit-avatar > image {
width: 85vw;
height: 85vw;
border-radius: 50%;
}
.edit-avatar > view {
border-radius: 25rpx;
margin-top: 100rpx;
width: calc(100% - 150rpx);
padding: 0 40rpx;
background: #404040;
}
.edit-avatar > view > button {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 30rpx;
color: #ffffff;
padding: 40rpx 0;
}
.edit-avatar > view > button:not(:last-child) {
border-bottom: 1rpx solid #fff3;
border-radius: 0;
}
.edit-avatar > view > button > image {
width: 28rpx;
}
</style>

551
src/pages/point-book.vue Normal file
View File

@@ -0,0 +1,551 @@
<script setup>
import { ref, computed, onMounted, onBeforeUnmount, watch } from "vue";
import { onShow, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import PointRecord from "@/components/PointRecord.vue";
import RingBarChart from "@/components/RingBarChart.vue";
import SModal from "@/components/SModal.vue";
import Signin from "@/components/Signin.vue";
import ScreenHint2 from "@/components/ScreenHint2.vue";
import RewardUs from "@/components/RewardUs.vue";
import {
getHomeData,
getPointBookConfigAPI,
getPointBookListAPI,
getPointBookStatisticsAPI,
removePointRecord,
} from "@/apis";
import { getElementRect } from "@/util";
import { generateKDEHeatmapImage } from "@/kde-heatmap";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { updateUser } = store;
const { user } = storeToRefs(store);
const isIOS = computed(() => {
const systemInfo = uni.getDeviceInfo();
return systemInfo.osName === "ios";
});
const loadImage = ref(false);
const showModal = ref(false);
const showTip = ref(false);
const showTip2 = ref(false);
const data = ref({
weeksCheckIn: [],
});
const list = ref([]);
const bowTargetSrc = ref("");
const heatMapImageSrc = ref(""); // 存储热力图图片地址
const canvasVisible = ref(false); // 控制canvas显示状态
const removeId = ref("");
const toListPage = () => {
uni.navigateTo({
url: "/pages/point-book-list",
});
};
const onSignin = () => {
showModal.value = true;
};
const startScoring = () => {
if (user.value.id) {
uni.navigateTo({
url: "/pages/point-book-create",
});
} else {
showModal.value = true;
}
};
const onRemoveRecord = (item) => {
removeId.value = item.id;
showTip2.value = true;
};
const confirmRemove = async () => {
try {
showTip2.value = false;
await removePointRecord(removeId.value);
const result = await getPointBookListAPI(1);
list.value = result.slice(0, 3);
uni.showToast({ title: "Deleted", icon: "none" });
} catch (e) {
uni.showToast({ title: "Delete failed, please retry", icon: "none" });
}
};
const loadData = async () => {
const result = await getPointBookListAPI(1);
list.value = result.slice(0, 3);
const result2 = await getPointBookStatisticsAPI();
data.value = result2;
const rect = await getElementRect(".heat-map");
let hot = 0;
if (result2.checkInCount > -3 && result2.checkInCount < 3) hot = 1;
else if (result2.checkInCount >= 3) hot = 2;
else if (result2.checkInCount >= 5) hot = 3;
else if (result2.checkInCount === 7) hot = 4;
uni.$emit("update-hot", hot);
loadImage.value = true;
const generateHeatmapAsync = async () => {
const weekArrows = result2.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("Heatmap image path:", finalPath);
} catch (error) {
console.error("Failed to generate heatmap image:", error);
loadImage.value = false;
}
};
// 异步生成热力图不阻塞UI
generateHeatmapAsync();
};
watch(
() => user.value.id,
(id) => {
if (id) loadData();
}
);
onShow(async () => {
uni.removeStorageSync("point-book");
if (user.value.id) loadData();
});
onMounted(async () => {
uni.$on("point-book-signin", onSignin);
const token = uni.getStorageSync(
`${uni.getAccountInfoSync().miniProgram.envVersion}_token`
);
if (!user.value.id && token) {
const data = await getHomeData();
if (data.user) updateUser(data.user);
}
const config = await getPointBookConfigAPI();
uni.setStorageSync("point-book-config", config);
if (config.targetOption && config.targetOption[0]) {
bowTargetSrc.value = config.targetOption[0].icon;
}
});
onBeforeUnmount(() => {
uni.$off("point-book-signin", onSignin);
});
// onShareAppMessage(() => {
// return {
// title: "高效记录每一次射箭,深度分析助你提升!",
// path: "pages/point-book",
// imageUrl:
// "https://static.shelingxingqiu.com/attachment/2025-09-22/dcz4m4nbgycqqwknrv.png",
// };
// });
// onShareTimeline(() => {
// return {
// title: "高效记录每一次射箭,深度分析助你提升!",
// query: "from=timeline",
// imageUrl:
// "https://static.shelingxingqiu.com/attachment/2025-09-22/dcz4m4nbgycqqwknrv.png",
// };
// });
</script>
<template>
<Container :bgType="4" bgColor="#F5F5F5" :whiteBackArrow="false" title="">
<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>Arrows Today</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>Average Rings</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>
<view class="reward" v-if="data.totalArrow">
<button hover-class="none" @click="showTip = true">
<image src="../static/reward-us.png" mode="widthFix" />
</button>
</view>
<RingBarChart :data="data.ringRate" v-if="user.id" />
<view class="title" v-if="user.id">
<image src="../static/point-book-title2.png" mode="widthFix" />
</view>
<block v-for="(item, index) in list" :key="item.id">
<PointRecord :data="item" />
<view
v-if="index < list.length - 1"
:style="{ height: '25rpx' }"
></view>
</block>
<view
class="see-more"
@click="toListPage"
v-if="list.length"
:style="{ marginBottom: isIOS ? '10rpx' : 0 }"
>
<text>View all records</text>
<image src="../static/enter-arrow-blue.png" mode="widthFix" />
</view>
</view>
<SModal :show="showModal" :onClose="() => (showModal = false)" :noBg="true">
<Signin :onClose="() => (showModal = false)" :noBg="true" />
</SModal>
<ScreenHint2
:show="showTip || showTip2"
:onClose="showTip ? () => (showTip = false) : null"
>
<RewardUs
v-if="showTip"
:show="showTip"
:onClose="() => (showTip = false)"
/>
<view class="tip-content" v-if="showTip2">
<text>Are you sure to delete this record?</text>
<view>
<button hover-class="none" @click="showTip2 = false">Cancel</button>
<button hover-class="none" @click="confirmRemove">Confirm</button>
</view>
</view>
</ScreenHint2>
</Container>
</template>
<style scoped>
.container {
width: calc(100% - 50rpx);
padding: 25rpx;
}
.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;
}
.reward {
width: 100%;
display: flex;
justify-content: flex-end;
margin-top: -120rpx;
position: relative;
z-index: 10;
}
.reward > button {
width: 100rpx;
}
.reward > button > image {
width: 100%;
height: 100%;
}
.tip-content {
width: 100%;
padding: 25px;
display: flex;
flex-direction: column;
color: #000;
}
.tip-content > text {
width: 100%;
text-align: center;
font-size: 14px;
margin-top: 5px;
}
.tip-content > view {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.tip-content > view > button {
width: 48%;
background: linear-gradient(180deg, #fbfbfb 0%, #f5f5f5 100%);
border-radius: 22px;
border: 1px solid #eeeeee;
padding: 12px 0;
font-size: 14px;
color: #000;
}
.tip-content > view > button:last-child {
background: #fed847;
}
</style>

View File

@@ -1,5 +1,5 @@
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { ref, onMounted, onBeforeUnmount } from "vue";
import Container from "@/components/Container.vue";
import ShootProgress from "@/components/ShootProgress.vue";
import BowTarget from "@/components/BowTarget.vue";
@@ -98,7 +98,7 @@ onMounted(() => {
uni.$on("socket-inbox", onReceiveMessage);
});
onUnmounted(() => {
onBeforeUnmount(() => {
uni.setKeepScreenOn({
keepScreenOn: false,
});

View File

@@ -1,5 +1,5 @@
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { ref, onMounted, onBeforeUnmount } from "vue";
import Container from "@/components/Container.vue";
import ShootProgress from "@/components/ShootProgress.vue";
import BowTarget from "@/components/BowTarget.vue";
@@ -91,7 +91,7 @@ onMounted(() => {
uni.$on("socket-inbox", onReceiveMessage);
});
onUnmounted(() => {
onBeforeUnmount(() => {
uni.setKeepScreenOn({
keepScreenOn: false,
});
@@ -106,7 +106,7 @@ onUnmounted(() => {
<block v-if="practiseId">
<ShootProgress
:start="start"
:tips="`请连续射${total}支箭`"
:tips="`请连续射${total}支箭`"
:total="120"
/>
<view class="user-row">

View File

@@ -38,6 +38,15 @@ const handleSelect = (index) => {
}
return false;
});
if (!myData.value.userId) {
myData.value = {
userId: user.value.id,
TotalGames: 0,
totalScore: 0,
mvpCount: 0,
TenRings: 0,
};
}
}
};
@@ -45,11 +54,11 @@ const onScrollView = (e) => {
addBg.value = e.detail.scrollTop > 100;
};
const subTitles = ["排位赛积分", "本周MVP次数", "本周十环次数"];
const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
</script>
<template>
<scroll-view class="container" scroll-y @scroll="onScrollView">
<view class="container">
<view
class="header"
:style="{
@@ -71,7 +80,16 @@ const subTitles = ["排位赛积分", "本周MVP次数", "本周十环次数"];
本赛季排行榜
</text>
</view>
<image src="../static/rankbg.png" mode="widthFix" class="header-bg" />
<scroll-view
scroll-y
@scroll="onScrollView"
:style="{ height: myData.userId ? '90vh' : '100vh' }"
>
<image
src="https://static.shelingxingqiu.com/attachment/2025-09-25/dd1p9b3wcrwnlnghiq.png"
mode="widthFix"
class="header-bg"
/>
<view class="rank-tabs">
<view
v-for="(rankType, index) in ['积分榜', 'MVP榜', '十环榜']"
@@ -145,17 +163,20 @@ const subTitles = ["排位赛积分", "本周MVP次数", "本周十环次数"];
>
</view>
<text class="rank-item-integral" v-if="selectedIndex === 0">
<text :style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
<text
:style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
>{{ item.totalScore }} </text
>
</text>
<text class="rank-item-integral" v-if="selectedIndex === 1">
<text :style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
<text
:style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
>{{ item.mvpCount }} </text
>
</text>
<text class="rank-item-integral" v-if="selectedIndex === 2">
<text :style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
<text
:style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
>{{ item.TenRings }} </text
>
</text>
@@ -164,6 +185,7 @@ const subTitles = ["排位赛积分", "本周MVP次数", "本周十环次数"];
<text>筹备中...</text>
</view>
</view>
</scroll-view>
<view class="my-rank-data" v-if="myData.userId">
<image
src="https://static.shelingxingqiu.com/attachment/2025-08-05/dbuaf19pf7qd8ps0uh.png"
@@ -178,30 +200,28 @@ const subTitles = ["排位赛积分", "本周MVP次数", "本周十环次数"];
<text class="rank-item-integral" v-if="selectedIndex === 0">
<text
:style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
>{{ myData.totalScore }}</text
></text
>{{ myData.totalScore || 0 }}</text
></text
>
<text class="rank-item-integral" v-if="selectedIndex === 1">
<text
:style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
>{{ myData.TotalGames }}</text
>{{ myData.mvpCount || 0 }}</text
></text
>
<text class="rank-item-integral" v-if="selectedIndex === 2">
<text
:style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
>{{ myData.TenRings }}</text
>{{ myData.TenRings || 0 }}</text
></text
>
</view>
</scroll-view>
</view>
</template>
<style scoped>
.container {
width: 100%;
height: 100vh;
padding-bottom: 100px;
}
.header-bg {
width: 100%;
@@ -279,6 +299,7 @@ const subTitles = ["排位赛积分", "本周MVP次数", "本周十环次数"];
.player-crown {
position: relative;
width: 27px;
height: 27px;
margin: 0 15px;
}
.view-crown {
@@ -313,17 +334,17 @@ const subTitles = ["排位赛积分", "本周MVP次数", "本周十环次数"];
text-align: right;
}
.my-rank-data {
position: fixed;
bottom: 0;
left: 0;
width: calc(100% - 30px);
padding: 15px;
padding-bottom: 30px;
display: flex;
align-items: center;
justify-content: space-between;
color: #fff9;
font-size: 12px;
height: calc(10vh - 30px);
position: relative;
overflow: hidden;
border-radius: 10px;
}
.my-rank-data > image:first-child {
position: absolute;
@@ -369,6 +390,7 @@ const subTitles = ["排位赛积分", "本周MVP次数", "本周十环次数"];
width: 22px;
height: 22px;
margin: 0px 15px;
margin-top: 5px;
position: relative;
}
.bg-image {

View File

@@ -102,8 +102,8 @@ const updateData = () => {
}
let keyName = "";
if (item.gameType === 1 && item.teamSize === 2) keyName = "1v1";
if (item.gameType === 1 && item.teamSize === 3) keyName = "2v2";
if (item.gameType === 1 && item.teamSize === 5) keyName = "3v3";
if (item.gameType === 1 && item.teamSize === 4) keyName = "2v2";
if (item.gameType === 1 && item.teamSize === 6) keyName = "3v3";
if (item.gameType === 2 && item.teamSize === 5) keyName = "5m";
if (item.gameType === 2 && item.teamSize === 10) keyName = "10m";
if (keyName) {
@@ -121,6 +121,9 @@ onShow(async () => {
rankData.value = result;
handleSelect(selectedIndex.value);
seasonData.value = result.seasonList;
if (seasonData.value[0]) {
seasonName.value = seasonData.value[0].seasonName;
}
updateData();
showSeasonList.value = false;
});
@@ -191,7 +194,7 @@ onShow(async () => {
</view>
<view class="my-rank-score">
<image src="../static/bubble-tip5.png" mode="widthFix" />
<text>积分{{ rankData.user.scores }}</text>
<text>积分{{ Math.max(0, rankData.user.scores) }}</text>
</view>
</view>
<view class="battle-types">
@@ -261,7 +264,7 @@ onShow(async () => {
<view>
<view
:style="{
width: `${currentSeasonData['1v1'].winRate}%`,
width: `${currentSeasonData['3v3'].winRate}%`,
backgroundColor: '#FF8C8C',
}"
/>
@@ -511,6 +514,7 @@ onShow(async () => {
padding: 7px 10px;
text-align: center;
border-radius: 20px;
font-size: 30rpx;
}
.rank-item {
width: calc(100% - 30px);
@@ -595,11 +599,13 @@ onShow(async () => {
top: -44rpx;
right: -30rpx;
letter-spacing: 2px;
z-index: 10;
}
.season-list > view {
display: flex;
align-items: center;
padding: 10px 20px;
word-break: keep-all;
}
.season-list > view > image {
width: 12px;

View File

@@ -0,0 +1,52 @@
<script setup>
import { ref } from "vue";
import InputRow from "@/components/InputRow.vue";
import SButton from "@/components/SButton.vue";
const toSignInPage = () => {
uni.navigateBack();
};
</script>
<template>
<view class="container">
<text class="title">Reset Password</text>
<text class="sub-title">Enter email address to reset password</text>
<InputRow placeholder="email" width="80vw" />
<InputRow
placeholder="verification code"
type="number"
width="80vw"
btnType="code"
/>
<InputRow type="password" placeholder="password" width="80vw" />
<InputRow type="password" placeholder="confirm password" width="80vw" />
<view :style="{ height: '20rpx' }"></view>
<SButton width="80vw">Submit</SButton>
</view>
</template>
<style scoped>
.container {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding-top: 240rpx;
background: #f5f5f5;
}
.title {
font-weight: 600;
font-size: 48rpx;
color: #333333;
width: 80vw;
margin-bottom: 10rpx;
}
.sub-title {
font-size: 24rpx;
color: #666666;
width: 80vw;
margin-bottom: 20rpx;
}
</style>

145
src/pages/sign-in.vue Normal file
View File

@@ -0,0 +1,145 @@
<script setup>
import { ref } from "vue";
import InputRow from "@/components/InputRow.vue";
import SButton from "@/components/SButton.vue";
const checked = ref(false);
const toSignUpPage = () => {
uni.navigateTo({
url: "/pages/sign-up",
});
};
const toResetPasswordPage = () => {
uni.navigateTo({
url: "/pages/reset-password",
});
};
</script>
<template>
<view class="container">
<image class="app-logo" src="../static/logo.png" mode="widthFix" />
<text class="app-name">ARCX</text>
<InputRow type="text" placeholder="email" width="80vw" />
<InputRow type="password" placeholder="password" width="80vw" />
<view class="btn-row">
<button hover-class="none" @click="toResetPasswordPage">
Forgot Password?
</button>
</view>
<SButton width="80vw">login</SButton>
<button
hover-class="none"
@click.stop="checked = !checked"
class="agreement"
>
<image :src="`../static/${checked ? 'checked' : 'unchecked'}.png`" />
<text>i read and accept</text>
<button hover-class="none" @click.stop="">user agreement</button>
<text>and</text>
<button hover-class="none" @click.stop="">privacy policy</button>
</button>
<view class="thrid-signin">
<button hover-class="none">
<image src="../static/google-icon.png" mode="widthFix" />
<text>login with google</text>
</button>
<button hover-class="none">
<image src="../static/apple-icon.png" mode="widthFix" />
<text>login with apple</text>
</button>
</view>
<view class="to-sign-up">
<text>don't have an account? </text>
<button hover-class="none" @click.stop="toSignUpPage">sign up ></button>
</view>
</view>
</template>
<style scoped>
.container {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #f5f5f5;
}
.app-logo {
width: 176rpx;
height: 176rpx;
margin-top: 40rpx;
}
.app-name {
font-weight: 600;
font-size: 40rpx;
color: #333333;
margin: 20rpx 0;
}
.btn-row {
width: 80vw;
display: flex;
justify-content: flex-end;
}
.btn-row > button {
font-size: 24rpx;
color: #287fff;
margin-bottom: 25rpx;
line-height: 34rpx;
}
.agreement {
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 24rpx;
margin-top: 24rpx;
margin-bottom: 50rpx;
color: #999999;
}
.agreement > image:first-child {
width: 32rpx;
height: 32rpx;
margin-right: 10rpx;
}
.agreement > button {
color: #333;
font-size: 24rpx;
margin: 0 10rpx;
}
.thrid-signin {
width: 80vw;
display: flex;
flex-direction: column;
margin: 60rpx 0;
}
.thrid-signin > button {
width: 100%;
height: 88rpx;
display: flex;
justify-content: center;
align-items: center;
border-radius: 45rpx;
background-color: #fff;
font-size: 30rpx;
color: #333333;
margin: 20rpx 0;
}
.thrid-signin > button > image {
width: 40rpx;
margin-right: 20rpx;
}
.to-sign-up {
font-size: 24rpx;
color: #666666;
display: flex;
justify-content: center;
align-items: center;
}
.to-sign-up > button {
font-size: 24rpx;
color: #287fff;
margin-left: 20rpx;
}
</style>

91
src/pages/sign-up.vue Normal file
View File

@@ -0,0 +1,91 @@
<script setup>
import { ref } from "vue";
import InputRow from "@/components/InputRow.vue";
import SButton from "@/components/SButton.vue";
const toSignInPage = () => {
uni.navigateBack();
};
</script>
<template>
<view class="container">
<text class="title">Sign up</text>
<text class="sub-title">Create an Arcx account</text>
<InputRow placeholder="name" width="80vw" />
<InputRow placeholder="email" width="80vw" />
<InputRow placeholder="verification code" type="number" width="80vw" btnType="code" />
<InputRow type="password" placeholder="password" width="80vw" />
<InputRow type="password" placeholder="confirm password" width="80vw" />
<view :style="{ height: '20rpx' }"></view>
<SButton width="80vw">login</SButton>
<view class="agreement">
<text>By clicking Sign Up, you agree to our</text>
<button hover-class="none" @click.stop="">user agreement</button>
<text>and</text>
<button hover-class="none" @click.stop="">privacy policy</button>
</view>
<view class="to-sign-up">
<text>have an account? </text>
<button hover-class="none" @click.stop="toSignInPage">sign in ></button>
</view>
</view>
</template>
<style scoped>
.container {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #f5f5f5;
}
.title {
font-weight: 600;
font-size: 48rpx;
color: #333333;
width: 80vw;
margin-bottom: 10rpx;
}
.sub-title {
font-size: 24rpx;
color: #666666;
width: 80vw;
margin-bottom: 20rpx;
}
.agreement {
width: 80vw;
display: flex;
justify-content: center;
align-items: center;
font-size: 24rpx;
margin-top: 24rpx;
margin-bottom: 50rpx;
color: #999999;
flex-wrap: wrap;
}
.agreement > image:first-child {
width: 32rpx;
height: 32rpx;
margin-right: 10rpx;
}
.agreement > button {
color: #333;
font-size: 24rpx;
margin: 0 10rpx;
}
.to-sign-up {
font-size: 24rpx;
color: #999;
display: flex;
justify-content: center;
align-items: center;
margin-top: 100rpx;
}
.to-sign-up > button {
font-size: 24rpx;
color: #287fff;
margin-left: 20rpx;
}
</style>

View File

@@ -1,12 +1,11 @@
<script setup>
import { ref, onMounted, onUnmounted, nextTick } from "vue";
import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
import { onLoad, onShow, onHide } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import BattleHeader from "@/components/BattleHeader.vue";
import BowTarget from "@/components/BowTarget.vue";
import ShootProgress from "@/components/ShootProgress.vue";
import PlayersRow from "@/components/PlayersRow.vue";
import Timer from "@/components/Timer.vue";
import BattleFooter from "@/components/BattleFooter.vue";
import ScreenHint from "@/components/ScreenHint.vue";
import SButton from "@/components/SButton.vue";
@@ -17,6 +16,7 @@ import ShootProgress2 from "@/components/ShootProgress2.vue";
import { getCurrentGameAPI } from "@/apis";
import { isGameEnded } from "@/util";
import { MESSAGETYPES, roundsName } from "@/constants";
import audioManager from "@/audioManager";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
@@ -65,7 +65,7 @@ function recoverData(battleInfo) {
redPoints.value = 0;
currentRound.value = battleInfo.currentRound;
totalRounds.value = battleInfo.maxRound;
roundResults.value = battleInfo.roundResults;
roundResults.value = [...battleInfo.roundResults];
battleInfo.roundResults.forEach((round) => {
const blueTotal = round.blueArrows.reduce(
(last, next) => last + next.ring,
@@ -84,31 +84,40 @@ function recoverData(battleInfo) {
redPoints.value += 2;
}
});
const hasCurrentRoundData =
battleInfo.redTeam.some(
(item) => !!item.shotHistory[battleInfo.currentRound]
) ||
battleInfo.blueTeam.some(
(item) => !!item.shotHistory[battleInfo.currentRound]
);
if (
battleInfo.redTeam[0].shotHistory[battleInfo.currentRound] ||
battleInfo.blueTeam[0].shotHistory[battleInfo.currentRound]
battleInfo.currentRound > battleInfo.roundResults.length &&
hasCurrentRoundData
) {
const blueArrows = [];
const redArrows = [];
battleInfo.redTeam.forEach((item) =>
item.shotHistory[battleInfo.currentRound]
.filter((item) => !!item.playerId)
.forEach((item) => redArrows.push(item))
);
battleInfo.blueTeam.forEach((item) =>
item.shotHistory[battleInfo.currentRound]
.filter((item) => !!item.playerId)
.forEach((item) => blueArrows.push(item))
);
roundResults.value.push({
redArrows: battleInfo.redTeam[0].shotHistory[
battleInfo.currentRound
].filter((item) => !!item.playerId),
blueArrows: battleInfo.blueTeam[0].shotHistory[
battleInfo.currentRound
].filter((item) => !!item.playerId),
});
} else if (battleInfo.currentRound < 5) {
roundResults.value.push({
redArrows: [],
blueArrows: [],
redArrows,
blueArrows,
});
}
if (battleInfo.goldenRound) {
const { ShotCount, RedRecords, BlueRecords } = battleInfo.goldenRound;
const roundCount = Math.max(RedRecords.length, BlueRecords.length);
currentRound.value += roundCount;
goldenRound.value += roundCount;
currentRound.value += ShotCount;
goldenRound.value += ShotCount;
isFinalShoot.value = true;
for (let i = 0; i < roundCount; i++) {
for (let i = 0; i < ShotCount; i++) {
const roundData = {
redArrows:
RedRecords && RedRecords[i] ? RedRecords[i].Arrows || [] : [],
@@ -116,12 +125,22 @@ function recoverData(battleInfo) {
BlueRecords && BlueRecords[i] ? BlueRecords[i].Arrows || [] : [],
gold: true,
};
if (roundResults.value[5 + i]) {
roundResults.value[5 + i] = roundData;
} else {
roundResults.value.push(roundData);
}
} else {
[...battleInfo.redTeam, ...battleInfo.blueTeam].some((p) => {
if (p.id === user.value.id) {
const roundArrows = Object.values(p.shotHistory);
if (roundArrows.length) {
uni.$emit("update-shot", {
currentShot: roundArrows[roundArrows.length - 1].length,
totalShot: battleInfo.config.teamSize === 2 ? 3 : 2,
});
}
return true;
}
return false;
});
}
const lastIndex = roundResults.value.length - 1;
if (roundResults.value[lastIndex]) {
@@ -157,12 +176,6 @@ async function onReceiveMessage(messages = []) {
if (msg.constructor === MESSAGETYPES.AllReady) {
start.value = true;
totalRounds.value = msg.groupUserStatus.config.maxRounds;
roundResults.value = [
{
redArrows: [],
blueArrows: [],
},
];
}
if (msg.constructor === MESSAGETYPES.ToSomeoneShoot) {
if (currentShooterId.value !== msg.userId) {
@@ -170,6 +183,7 @@ async function onReceiveMessage(messages = []) {
const redPlayer = redTeam.value.find(
(item) => item.id === currentShooterId.value
);
if (msg.userId === user.value.id) audioManager.play("轮到你了");
const nextTips = redPlayer ? "请红队射箭" : "请蓝队射箭";
if (nextTips !== tips.value) {
tips.value = nextTips;
@@ -184,6 +198,7 @@ async function onReceiveMessage(messages = []) {
const isRed = redTeam.value.find((item) => item.id === msg.userId);
if (isRed) scores.value.push({ ...msg.target });
else blueScores.value.push({ ...msg.target });
// 下标从0开始的要减1
if (!roundResults.value[currentRound.value - 1]) {
roundResults.value.push({
redArrows: [],
@@ -204,17 +219,14 @@ async function onReceiveMessage(messages = []) {
currentRedPoint.value = result.redScore;
bluePoints.value += result.blueScore;
redPoints.value += result.redScore;
if (result.currentRound < 5) {
currentRound.value = result.currentRound + 1;
roundResults.value.push({
redArrows: [],
blueArrows: [],
});
if (!result.goldenRound) {
showRoundTip.value = true;
}
}
if (msg.constructor === MESSAGETYPES.FinalShoot) {
currentShooterId.value = 0;
currentRound.value = msg.groupUserStatus.currentRound + 1;
goldenRound.value += 1;
roundResults.value.push({
redArrows: [],
@@ -234,6 +246,7 @@ async function onReceiveMessage(messages = []) {
currentBluePoint.value = 0;
currentRedPoint.value = 0;
showRoundTip.value = true;
isFinalShoot.value = false;
setTimeout(() => {
uni.navigateBack();
}, 3000);
@@ -274,7 +287,7 @@ onMounted(() => {
});
uni.$on("socket-inbox", onReceiveMessage);
});
onUnmounted(() => {
onBeforeUnmount(() => {
uni.setKeepScreenOn({
keepScreenOn: false,
});
@@ -303,10 +316,10 @@ onHide(() => {
</script>
<template>
<Container :bgType="3" :onBack="onBack">
<Container :bgType="start ? 3 : 1" :onBack="onBack">
<view class="container">
<BattleHeader v-if="!start" :redTeam="redTeam" :blueTeam="blueTeam" />
<TestDistance v-if="!start" :guide="false" />
<TestDistance v-if="!start" :guide="false" :isBattle="true" />
<view v-if="start" class="players-row">
<TeamAvatars
:team="blueTeam"
@@ -336,7 +349,6 @@ onHide(() => {
:goldenRound="goldenRound"
:power="power"
/>
<Timer v-if="!start" />
<ScreenHint
:show="showRoundTip"
:onClose="() => (showRoundTip = false)"
@@ -349,9 +361,7 @@ onHide(() => {
:bluePoint="currentBluePoint"
:redPoint="currentRedPoint"
:roundData="
roundResults[roundResults.length - 2]
? roundResults[roundResults.length - 2]
: []
roundResults[currentRound - 2] ? roundResults[currentRound - 2] : []
"
:onAutoClose="() => (showRoundTip = false)"
/>
@@ -368,7 +378,7 @@ onHide(() => {
.players-row {
display: flex;
align-items: center;
justify-content: space-around;
justify-content: center;
margin-bottom: -7vw;
margin-top: -3vw;
}

View File

@@ -18,7 +18,7 @@ const data = ref({
onLoad(async (options) => {
if (options.battleId) {
const result = await getGameAPI(
options.battleId || "BATTLE-1755484626207409508-955"
options.battleId || "BATTLE-1756453741433684760-512"
);
data.value = result;
Object.values(result.bluePlayers).forEach((p, index) => {
@@ -150,6 +150,7 @@ const onClickTab = (index) => {
</view>
<view
v-if="
selected > 0 &&
selected >= data.goldenRounds.length &&
selected <= data.goldenRounds.length
"

View File

@@ -1,5 +1,5 @@
<script setup>
import { ref, onMounted, onUnmounted, nextTick } from "vue";
import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
import { onLoad, onShow, onHide } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import BattleHeader from "@/components/BattleHeader.vue";
@@ -270,7 +270,7 @@ onMounted(() => {
});
uni.$on("socket-inbox", onReceiveMessage);
});
onUnmounted(() => {
onBeforeUnmount(() => {
uni.setKeepScreenOn({
keepScreenOn: false,
});

View File

@@ -1,4 +1,5 @@
<script setup>
import { ref, onMounted } from "vue";
import Container from "@/components/Container.vue";
import UserHeader from "@/components/UserHeader.vue";
import UserItem from "@/components/UserItem.vue";
@@ -46,11 +47,25 @@ const toRankIntroPage = () => {
url: "/pages/rank-intro",
});
};
const toAboutUsPage = () => {
uni.navigateTo({
url: "/pages/about-us",
});
};
const showLogout = ref(false);
const logout = () => {
uni.removeStorageSync("token");
uni.removeStorageSync(
`${uni.getAccountInfoSync().miniProgram.envVersion}_token`
);
uni.navigateBack();
updateUser();
};
onMounted(() => {
const accountInfo = uni.getAccountInfoSync();
const envVersion = accountInfo.miniProgram.envVersion;
if (envVersion !== "release") showLogout.value = true;
});
</script>
<template>
@@ -110,7 +125,12 @@ const logout = () => {
<view class="my-grow" @click="toMyGrowthPage">
<image src="../static/my-grow.png" mode="widthFix" />
</view>
<UserItem title="退出登录(仅用于测试)" :onClick="logout" />
<UserItem title="关于我们" :onClick="toAboutUsPage" />
<UserItem
title="退出登录(仅用于测试)"
:onClick="logout"
v-if="showLogout"
/>
</view>
</view>
</Container>

15
src/pages/webview.vue Normal file
View File

@@ -0,0 +1,15 @@
<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
const url = ref("");
onLoad((options) => {
url.value = decodeURIComponent(options.url);
});
</script>
<template>
<web-view :src="url"></web-view>
</template>
<style scoped></style>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 189 B

After

Width:  |  Height:  |  Size: 171 B

BIN
src/static/app-bg5.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

BIN
src/static/app-bg6.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.5 KiB

BIN
src/static/apple-icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
src/static/back-grey.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 273 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 372 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
src/static/donate.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

BIN
src/static/edit.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 363 B

BIN
src/static/email-yellow.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
src/static/eye-close.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
src/static/eye-open.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
src/static/flag-blue.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 522 B

BIN
src/static/flag-red.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 540 B

BIN
src/static/google-icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
src/static/has-note.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 709 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

BIN
src/static/hot1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/static/hot2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/static/hot3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/static/hot4.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/static/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 687 B

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