14 Commits
Author SHA1 Message Date
zhangyi 8b25a10d4c Merge branch 'test' into feat-prac 2026-05-29 14:01:03 +08:00
zhangyi 0e82416800 Merge branch 'test' into feat-prac 2026-05-28 11:16:54 +08:00
zhangyi e6d00e7ea9 Merge branch 'test' into feat-prac 2026-05-28 09:46:54 +08:00
zhangyi 18afba01ec update:新增基础训练入口 2026-05-26 11:38:49 +08:00
zhangyi 2780d1a6df update:代码备份 2026-05-26 10:23:31 +08:00
zhangyi 2a53f6739e update:对接个人训练难度页 2026-05-26 09:33:28 +08:00
zhangyi bae31add22 update:对接个人训练首页 2026-05-20 16:36:07 +08:00
zhangyi 465b9c8dc7 update:代码备份 2026-05-18 16:39:36 +08:00
zhangyi 3ff11df1d7 update:代码备份 2026-05-18 11:05:13 +08:00
zhangyi 21d8d0fbdb update:代码备份 2026-05-18 09:20:07 +08:00
zhangyi fc7149121b update:优化 2026-05-15 10:23:59 +08:00
zhangyi 8061ddbed5 update:训练难度展示ui完成 2026-05-15 09:46:33 +08:00
zhangyi bb50c7ca10 update:删除个人训练首页的无用组件 2026-05-13 10:54:15 +08:00
zhangyi 1bca5977c1 个人训练改版首页存档 2026-05-13 10:49:31 +08:00
162 changed files with 5177 additions and 6698 deletions
-1
View File
@@ -10,7 +10,6 @@ lerna-debug.log*
node_modules node_modules
.history .history
.github .github
.claude
openspec openspec
CLAUDE.md CLAUDE.md
docs docs
+1
View File
@@ -264,6 +264,7 @@ AI 应主动:
* 少解释 * 少解释
* 优先 patch * 优先 patch
* 优先 diff * 优先 diff
* 写好中文注释
除非用户明确要求: 除非用户明确要求:
否则不要输出完整项目。 否则不要输出完整项目。
+1 -72
View File
@@ -22,8 +22,7 @@
const { const {
updateUser, updateUser,
updateOnline, updateOnline,
clearSessionState, clearSessionState
clearDevice
} = store; } = store;
watch( watch(
@@ -64,11 +63,6 @@
updateOnline(data.online); updateOnline(data.online);
} }
function onDeviceBindInvalid() {
clearDevice();
uni.setStorageSync("calibration", false);
}
function onDeviceShoot() { function onDeviceShoot() {
// audioManager.play("射箭声音") // audioManager.play("射箭声音")
} }
@@ -84,7 +78,6 @@
uni.$on("update-user", emitUpdateUser); uni.$on("update-user", emitUpdateUser);
uni.$on("update-online", emitUpdateOnline); uni.$on("update-online", emitUpdateOnline);
uni.$on("session-kicked-out", onSessionKickedOut); uni.$on("session-kicked-out", onSessionKickedOut);
uni.$on("device-bind-invalid", onDeviceBindInvalid);
const token = uni.getStorageSync( const token = uni.getStorageSync(
`${uni.getAccountInfoSync().miniProgram.envVersion}_token` `${uni.getAccountInfoSync().miniProgram.envVersion}_token`
); );
@@ -98,7 +91,6 @@
uni.$off("update-user", emitUpdateUser); uni.$off("update-user", emitUpdateUser);
uni.$off("update-online", emitUpdateOnline); uni.$off("update-online", emitUpdateOnline);
uni.$off("session-kicked-out", onSessionKickedOut); uni.$off("session-kicked-out", onSessionKickedOut);
uni.$off("device-bind-invalid", onDeviceBindInvalid);
websocket.closeWebSocket(); websocket.closeWebSocket();
}); });
</script> </script>
@@ -258,69 +250,6 @@
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.member-nickname {
position: relative;
display: inline-flex;
max-width: 100%;
overflow: hidden;
}
.member-nickname__text,
.member-nickname__shine {
display: block;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.member-nickname--vip .member-nickname__text {
color: #E7BA80;
}
.member-nickname--svip .member-nickname__text {
background: linear-gradient(90deg, #ffb86c, #ff4fd8, #7c5cff, #35d6ff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.member-nickname__shine {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(
110deg,
transparent 0%,
transparent 38%,
rgba(255, 255, 255, 0.15) 45%,
rgba(255, 255, 255, 1) 50%,
rgba(255, 255, 255, 0.15) 55%,
transparent 62%,
transparent 100%
);
background-size: 220% 100%;
background-position: 120% 0;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
pointer-events: none;
animation: memberNicknameShine 3.5s infinite ease-in-out;
}
@keyframes memberNicknameShine {
0%,
50% {
background-position: 120% 0;
}
100% {
background-position: -200% 0;
}
}
.modal { .modal {
height: 100%; height: 100%;
display: flex; display: flex;
+12 -68
View File
@@ -23,10 +23,7 @@ try {
console.error("获取环境信息失败,使用默认正式环境", e); console.error("获取环境信息失败,使用默认正式环境", e);
} }
const ADDONS_BASE_URL = BASE_URL.replace(/\/api\/shoot$/, "/api/shoot"); function request(method, url, data = {}) {
// 统一处理业务接口请求,包含登录态、业务错误和 WiFi 连接空响应兼容。
function request(method, url, data = {}, baseUrl = BASE_URL) {
const token = uni.getStorageSync( const token = uni.getStorageSync(
`${uni.getAccountInfoSync().miniProgram.envVersion}_token` `${uni.getAccountInfoSync().miniProgram.envVersion}_token`
); );
@@ -34,21 +31,16 @@ function request(method, url, data = {}, baseUrl = BASE_URL) {
if (token) header.Authorization = `Bearer ${token || ""}`; if (token) header.Authorization = `Bearer ${token || ""}`;
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
uni.request({ uni.request({
url: `${baseUrl}${url}`, url: `${BASE_URL}${url}`,
method, method,
header, header,
data, data,
timeout: 10000, timeout: 10000,
success: (res) => { success: (res) => {
if (url === "/user/hardwareBox/connectWifi" && res.statusCode === 200 && res.data && Object.keys(res.data).length === 0) {
resolve({});
return;
}
if (res.data) { if (res.data) {
const {code, data, message} = res.data; const {code, data, message} = res.data;
if (code === 0) resolve(data); if (code === 0) resolve(data);
else if (message) { else if (message) {
const error = {code, data, message};
if (message.indexOf("登录身份已失效") !== -1) { if (message.indexOf("登录身份已失效") !== -1) {
console.log('1111111111111111111,token失效') console.log('1111111111111111111,token失效')
uni.removeStorageSync( uni.removeStorageSync(
@@ -58,10 +50,6 @@ function request(method, url, data = {}, baseUrl = BASE_URL) {
reject({ type: "AUTH_INVALID", message }); reject({ type: "AUTH_INVALID", message });
return; return;
} }
if (message.indexOf("已达上限") !== -1) {
reject(error);
return;
}
if (message === "ROOM_FULL") { if (message === "ROOM_FULL") {
resolve({full: true}); resolve({full: true});
return; return;
@@ -82,15 +70,6 @@ function request(method, url, data = {}, baseUrl = BASE_URL) {
resolve({binded: true}); resolve({binded: true});
return; return;
} }
if (message === "BIND_FAILD") {
uni.$emit("device-bind-invalid");
uni.showToast({
title: "设备绑定状态已失效,请重新绑定",
icon: "none",
});
reject({type: "DEVICE_BIND_INVALID", message});
return;
}
if (message === "ERROR_ORDER_UNPAY") { if (message === "ERROR_ORDER_UNPAY") {
uni.showToast({ uni.showToast({
title: "当前有未支付订单", title: "当前有未支付订单",
@@ -109,10 +88,8 @@ function request(method, url, data = {}, baseUrl = BASE_URL) {
title: message, title: message,
icon: "none", icon: "none",
}); });
reject(error);
return;
} }
reject({code, data, message}); reject("");
} }
}, },
fail: (err) => { fail: (err) => {
@@ -181,10 +158,6 @@ export const getAppConfig = () => {
return request("GET", "/index/appConfig"); return request("GET", "/index/appConfig");
}; };
export const getDailyCountAPI = () => {
return request("GET", "/index/dailyCount", {}, ADDONS_BASE_URL);
};
export const getHomeData = (seasonId) => { export const getHomeData = (seasonId) => {
return request("GET", `/user/myHome?seasonId=${seasonId}`); return request("GET", `/user/myHome?seasonId=${seasonId}`);
}; };
@@ -360,23 +333,9 @@ export const createOrderAPI = (vipId) => {
quanity: 1, quanity: 1,
tradeType: "mini", tradeType: "mini",
payType: "wxpay", payType: "wxpay",
returnUrl: "",
remark: "",
mockTest: false,
}); });
}; };
export const virtualPayOrderAPI = (vipId = 0, code = "") => {
return request("POST", "/user/virtualPay/createOrder", {
vipId,
code,
});
};
export const getOrderDetailAPI = (orderId) => {
return request("GET", `/user/order/detail?orderId=${encodeURIComponent(orderId)}`);
};
export const payOrderAPI = (id) => { export const payOrderAPI = (id) => {
return request("POST", "/user/order/pay", { return request("POST", "/user/order/pay", {
id, id,
@@ -451,6 +410,15 @@ export const getPractiseDataAPI = async () => {
return request("GET", "/user/practice/statistics"); return request("GET", "/user/practice/statistics");
}; };
export const getPersonalTrainingAPI = async () => {
return request("GET", "/personal/training");
};
export const getTrainingDifficultyListAPI = async (type) => {
const query = type ? `?type=${encodeURIComponent(type)}` : "";
return request("GET", `/training/difficulty/list${query}`);
};
export const getBattleDataAPI = async () => { export const getBattleDataAPI = async () => {
return request("GET", "/user/fight/statistics"); return request("GET", "/user/fight/statistics");
}; };
@@ -489,26 +457,6 @@ export const getDeviceBatteryAPI = async () => {
return request("GET", "/user/device/battery"); return request("GET", "/user/device/battery");
}; };
// 设备连接指定 WiFi,只下发 WiFi 凭证,不触发 OTA 升级。
export const connectDeviceWifiAPI = async (ssid, password) => {
return request("POST", "/user/hardwareBox/connectWifi", {ssid, password});
};
// 获取硬件盒子版本信息,用于判断当前设备是否需要 OTA 升级。
export const getHardwareBoxVersionAPI = async () => {
return request("GET", "/user/hardwareBox/version");
};
// 发送硬件盒子 OTA 更新指令,服务端会返回后续轮询使用的任务 ID。
export const sendHardwareBoxUpdateAPI = async (data) => {
return request("POST", "/user/hardwareBox/sendUpdate", data);
};
// 根据任务 ID 获取硬件盒子 OTA 更新状态。
export const getHardwareBoxTaskStatusAPI = async (taskId) => {
return request("GET", `/user/hardwareBox/taskStatus?taskId=${taskId}`);
};
export const addNoteAPI = async (id, remark) => { export const addNoteAPI = async (id, remark) => {
return request("POST", "/user/score/sheet/remark", {id, remark}); return request("POST", "/user/score/sheet/remark", {id, remark});
}; };
@@ -521,10 +469,6 @@ export const getPhoneNumberAPI = (data) => {
return request("POST", "/index/getPhone", data); return request("POST", "/index/getPhone", data);
}; };
export const getPhoneNumberAPIv2 = (data) => {
return request("POST", "/index/getPhone/v2", data);
};
export const getPointBookRankListAPI = (page = 1) => { export const getPointBookRankListAPI = (page = 1) => {
return request( return request(
"GET", "GET",
+14 -183
View File
@@ -40,8 +40,6 @@ export const audioFils = {
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcutya59b6pu0ur4um.mp3", "https://static.shelingxingqiu.com/attachment/2025-09-17/dcutya59b6pu0ur4um.mp3",
比赛开始: 比赛开始:
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcuu5z3a3lumkutske.mp3", "https://static.shelingxingqiu.com/attachment/2025-09-17/dcuu5z3a3lumkutske.mp3",
下半场开始:
"https://static.shelingxingqiu.com/shootmini/static/audio/%E4%B8%8B%E5%8D%8A%E5%9C%BA%E5%BC%80%E5%A7%8B.mp3",
请开始射击: 请开始射击:
"https://static.shelingxingqiu.com/attachment/2025-09-17/dcutzdrl5u0iromqhf.mp3", "https://static.shelingxingqiu.com/attachment/2025-09-17/dcutzdrl5u0iromqhf.mp3",
射击无效: 射击无效:
@@ -133,10 +131,6 @@ class AudioManager {
this.lastPlayKey = null; this.lastPlayKey = null;
this.lastPlayAt = 0; this.lastPlayAt = 0;
this.isInterrupted = false; this.isInterrupted = false;
this.interruptedAt = 0;
this.interruptionFallbackMs = 5000;
this.playWatchdogMs = 8000;
this.playWatchdogTimers = new Map();
// 静音开关 // 静音开关
this.isMuted = false; this.isMuted = false;
@@ -163,7 +157,6 @@ class AudioManager {
const begin = () => { const begin = () => {
if (this.isInterrupted) return; if (this.isInterrupted) return;
this.isInterrupted = true; this.isInterrupted = true;
this.interruptedAt = Date.now();
this.stopAll(); this.stopAll();
this.isSequenceRunning = false; this.isSequenceRunning = false;
this.sequenceQueue = []; this.sequenceQueue = [];
@@ -175,7 +168,6 @@ class AudioManager {
const end = () => { const end = () => {
if (!this.isInterrupted) return; if (!this.isInterrupted) return;
this.isInterrupted = false; this.isInterrupted = false;
this.interruptedAt = 0;
uni.$emit(AUDIO_INTERRUPTION_END_EVENT); uni.$emit(AUDIO_INTERRUPTION_END_EVENT);
void this.reloadAll(); void this.reloadAll();
}; };
@@ -358,14 +350,9 @@ class AudioManager {
const loadTimeout = setTimeout(() => { const loadTimeout = setTimeout(() => {
debugLog(`音频 ${key} 加载超时`); debugLog(`音频 ${key} 加载超时`);
this.recordLoadFailure(key); this.recordLoadFailure(key);
this.audioMap.delete(key);
try { try {
audio.destroy(); audio.destroy();
} catch (_) {} } catch (_) {}
this.finishPlayback(key, {
advanceSequence: true,
emitEnded: true,
});
if (callback) callback(); if (callback) callback();
}, 10000); }, 10000);
@@ -399,13 +386,7 @@ class AudioManager {
} }
this.recordLoadFailure(key); this.recordLoadFailure(key);
this.audioMap.delete(key); this.audioMap.delete(key);
try {
audio.destroy(); audio.destroy();
} catch (_) {}
this.finishPlayback(key, {
advanceSequence: true,
emitEnded: true,
});
if (this.readyMap.get(key)) { if (this.readyMap.get(key)) {
// 这里不要去除,不然检查进度的时候由于没有重新加载而进度卡住,等播放失败的时候会重新加载 // 这里不要去除,不然检查进度的时候由于没有重新加载而进度卡住,等播放失败的时候会重新加载
// this.readyMap.set(key, false); // this.readyMap.set(key, false);
@@ -415,14 +396,19 @@ class AudioManager {
}); });
audio.onEnded(() => { audio.onEnded(() => {
this.finishPlayback(key, { if (this.currentPlayingKey === key) {
advanceSequence: true, this.currentPlayingKey = null;
emitEnded: true, }
}); this.allowPlayMap.set(key, false);
this.onAudioEnded(key);
uni.$emit('audioEnded', key);
}); });
audio.onStop(() => { audio.onStop(() => {
this.finishPlayback(key); if (this.currentPlayingKey === key) {
this.currentPlayingKey = null;
}
this.allowPlayMap.set(key, false);
}); });
this.audioMap.set(key, audio); this.audioMap.set(key, audio);
@@ -460,19 +446,11 @@ class AudioManager {
}); });
} else { } else {
this.recordLoadFailure(key); this.recordLoadFailure(key);
this.finishPlayback(key, {
advanceSequence: true,
emitEnded: true,
});
if (callback) callback(); if (callback) callback();
} }
}, },
fail: () => { fail: () => {
this.recordLoadFailure(key); this.recordLoadFailure(key);
this.finishPlayback(key, {
advanceSequence: true,
emitEnded: true,
});
if (callback) callback(); if (callback) callback();
}, },
}); });
@@ -509,137 +487,15 @@ class AudioManager {
this.failedLoadKeys.add(key); this.failedLoadKeys.add(key);
} }
clearPlayWatchdog(key) {
const timer = this.playWatchdogTimers.get(key);
if (timer) {
clearTimeout(timer);
this.playWatchdogTimers.delete(key);
}
}
clearAllPlayWatchdogs() {
for (const timer of this.playWatchdogTimers.values()) {
clearTimeout(timer);
}
this.playWatchdogTimers.clear();
}
startPlayWatchdog(key) {
this.clearPlayWatchdog(key);
const timer = setTimeout(() => {
if (this.currentPlayingKey !== key) return;
debugLog(`音频 ${key} 播放超时,跳过当前音频并继续队列`);
this.finishPlayback(key, {
advanceSequence: true,
emitEnded: true,
force: true,
});
this.reloadAudioKey(key);
}, this.playWatchdogMs);
this.playWatchdogTimers.set(key, timer);
}
finishPlayback(key, { advanceSequence = false, emitEnded = false, force = false } = {}) {
const wasCurrent = this.currentPlayingKey === key;
const isSequenceCurrent =
this.isSequenceRunning && this.sequenceQueue[this.sequenceIndex] === key;
this.clearPlayWatchdog(key);
this.allowPlayMap.set(key, false);
if (!force && !wasCurrent && !isSequenceCurrent) return false;
if (wasCurrent) {
this.currentPlayingKey = null;
}
if (advanceSequence && isSequenceCurrent) {
this.onAudioEnded(key);
}
if (emitEnded) {
uni.$emit("audioEnded", key);
}
return true;
}
recoverFromInterruptionIfStale(force = false) {
if (!this.isInterrupted) return false;
const interruptedFor = Date.now() - (this.interruptedAt || Date.now());
if (!force && interruptedFor < this.interruptionFallbackMs) return false;
debugLog("音频中断状态超时,执行兜底恢复");
this.isInterrupted = false;
this.interruptedAt = 0;
uni.$emit(AUDIO_INTERRUPTION_END_EVENT);
void this.reloadAll();
return true;
}
recoverIfStale(expectedKey) {
if (this.recoverFromInterruptionIfStale(true)) return;
const key =
expectedKey || this.currentPlayingKey || this.sequenceQueue[this.sequenceIndex];
if (!key) {
if (this.isSequenceRunning) {
this.sequenceQueue = [];
this.sequenceIndex = 0;
this.isSequenceRunning = false;
}
return;
}
const isStaleCurrent =
this.currentPlayingKey === key ||
(this.isSequenceRunning && this.sequenceQueue[this.sequenceIndex] === key);
if (!isStaleCurrent) return;
debugLog(`音频 ${key} 等待超时,执行轻量恢复`);
const audio = this.audioMap.get(key);
if (audio) {
try {
audio.stop();
} catch (_) {}
}
this.finishPlayback(key, {
advanceSequence: true,
emitEnded: true,
force: true,
});
this.reloadAudioKey(key);
}
reloadAudioKey(key) {
const audio = this.audioMap.get(key);
if (audio) {
try {
audio.destroy();
} catch (_) {}
this.audioMap.delete(key);
}
this.readyMap.set(key, false);
this.retryLoadAudio(key);
}
// 重新加载音频 // 重新加载音频
retryLoadAudio(key) { retryLoadAudio(key) {
this.clearPlayWatchdog(key);
const oldAudio = this.audioMap.get(key); const oldAudio = this.audioMap.get(key);
if (oldAudio) { if (oldAudio) oldAudio.destroy();
try {
oldAudio.destroy();
} catch (_) {}
}
this.createAudio(key); this.createAudio(key);
} }
// 播放指定音频或音频数组(数组则按顺序连续播放) // 播放指定音频或音频数组(数组则按顺序连续播放)
play(input, interrupt = true) { play(input, interrupt = true) {
if (this.isInterrupted) {
this.recoverFromInterruptionIfStale();
}
if (this.isInterrupted) { if (this.isInterrupted) {
debugLog("音频处理中断状态,忽略播放请求"); debugLog("音频处理中断状态,忽略播放请求");
return; return;
@@ -697,9 +553,6 @@ class AudioManager {
// 内部方法:播放单个 key // 内部方法:播放单个 key
_playSingle(key, forceStopAll = false) { _playSingle(key, forceStopAll = false) {
if (this.isInterrupted) {
this.recoverFromInterruptionIfStale();
}
if (this.isInterrupted) { if (this.isInterrupted) {
debugLog(`音频处理中断状态,跳过播放: ${key}`); debugLog(`音频处理中断状态,跳过播放: ${key}`);
return; return;
@@ -708,11 +561,6 @@ class AudioManager {
const now = Date.now(); const now = Date.now();
if (this.lastPlayKey === key && now - this.lastPlayAt < 250) { if (this.lastPlayKey === key && now - this.lastPlayAt < 250) {
debugLog(`忽略快速重复播放: ${key}`); debugLog(`忽略快速重复播放: ${key}`);
this.finishPlayback(key, {
advanceSequence: true,
emitEnded: true,
force: true,
});
return; return;
} }
@@ -755,34 +603,21 @@ class AudioManager {
try { try {
audio.play(); audio.play();
} catch (err) { } catch (err) {
this.finishPlayback(key, { this.allowPlayMap.set(key, false);
advanceSequence: true,
emitEnded: true,
force: true,
});
debugLog(`音频 ${key} 播放调用失败`, err?.errMsg || err); debugLog(`音频 ${key} 播放调用失败`, err?.errMsg || err);
return; return;
} }
this.currentPlayingKey = key; this.currentPlayingKey = key;
this.lastPlayKey = key; this.lastPlayKey = key;
this.lastPlayAt = Date.now(); this.lastPlayAt = Date.now();
this.startPlayWatchdog(key);
} else { } else {
debugLog(`音频 ${key} 不存在,尝试重新加载...`); debugLog(`音频 ${key} 不存在,尝试重新加载...`);
this.retryLoadAudio(key); this.retryLoadAudio(key);
let loadWaitTimer = null; const handler = (loadedKey) => {
const cleanup = () => { if (loadedKey === key) {
try { try {
uni.$off("audioLoaded", handler); uni.$off("audioLoaded", handler);
} catch (_) {} } catch (_) {}
if (loadWaitTimer) {
clearTimeout(loadWaitTimer);
loadWaitTimer = null;
}
};
const handler = (loadedKey) => {
if (loadedKey === key) {
cleanup();
// 再次校验是否存在且就绪 // 再次校验是否存在且就绪
const a = this.audioMap.get(key); const a = this.audioMap.get(key);
if (a && this.readyMap.get(key)) { if (a && this.readyMap.get(key)) {
@@ -793,7 +628,6 @@ class AudioManager {
try { try {
uni.$on("audioLoaded", handler); uni.$on("audioLoaded", handler);
} catch (_) {} } catch (_) {}
loadWaitTimer = setTimeout(cleanup, 12000);
} }
} }
@@ -819,7 +653,6 @@ class AudioManager {
// 停止指定音频 // 停止指定音频
stop(key) { stop(key) {
const audio = this.audioMap.get(key); const audio = this.audioMap.get(key);
this.clearPlayWatchdog(key);
if (audio) { if (audio) {
audio.stop(); audio.stop();
this.allowPlayMap.set(key, false); this.allowPlayMap.set(key, false);
@@ -831,7 +664,6 @@ class AudioManager {
// 停止所有音频 // 停止所有音频
stopAll() { stopAll() {
this.clearAllPlayWatchdogs();
for (const [k, audio] of this.audioMap.entries()) { for (const [k, audio] of this.audioMap.entries()) {
try { try {
audio.stop(); audio.stop();
@@ -905,7 +737,6 @@ class AudioManager {
this.readyMap.clear(); this.readyMap.clear();
this.failedLoadKeys.clear(); this.failedLoadKeys.clear();
this.allowPlayMap.clear(); this.allowPlayMap.clear();
this.clearAllPlayWatchdogs();
this.currentPlayingKey = null; this.currentPlayingKey = null;
this.sequenceQueue = []; this.sequenceQueue = [];
this.sequenceIndex = 0; this.sequenceIndex = 0;
+4 -12
View File
@@ -456,29 +456,23 @@ export const generateShareImage = async (canvasId, data) => {
// 2D 即时绘制,无需 ctx.draw() // 2D 即时绘制,无需 ctx.draw()
} catch (e) { } catch (e) {
console.error("generateShareImage 绘制失败:", e); console.error("generateShareImage 绘制失败:", e);
throw e;
} }
}; };
// 顶部导入与工具方法 // 顶部导入与工具方法
async function getCanvas2DContext(canvasId, targetWidth, targetHeight) { async function getCanvas2DContext(canvasId, targetWidth, targetHeight) {
return new Promise((resolve, reject) => { return new Promise((resolve) => {
const query = uni.createSelectorQuery(); const query = uni.createSelectorQuery();
query query
.select(`#${canvasId}`) .select(`#${canvasId}`)
.fields({ node: true, size: true }) .fields({ node: true, size: true })
.exec((res) => { .exec((res) => {
const canvasInfo = res && res[0]; const { node: canvas } = res[0] || {};
const { node: canvas } = canvasInfo || {};
if (!canvas || typeof canvas.getContext !== "function") {
reject(new Error(`canvas ${canvasId} not found`));
return;
}
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext("2d");
const dpr = uni.getSystemInfoSync().pixelRatio || 1; const dpr = uni.getSystemInfoSync().pixelRatio || 1;
const w = targetWidth || canvasInfo.width; const w = targetWidth || res[0].width;
const h = targetHeight || canvasInfo.height; const h = targetHeight || res[0].height;
canvas.width = w * dpr; canvas.width = w * dpr;
canvas.height = h * dpr; canvas.height = h * dpr;
@@ -567,7 +561,6 @@ export const sharePointData = async (canvasId, data) => {
// 2D 即时绘制,无需 ctx.draw() // 2D 即时绘制,无需 ctx.draw()
} catch (e) { } catch (e) {
console.error("generateShareImage 绘制失败:", e); console.error("generateShareImage 绘制失败:", e);
throw e;
} }
}; };
@@ -785,7 +778,6 @@ export async function sharePractiseData(canvasId, type, user, data) {
// 2D 模式下无需 ctx.draw() // 2D 模式下无需 ctx.draw()
} catch (err) { } catch (err) {
console.log(err); console.log(err);
throw err;
} }
} }
+19 -1
View File
@@ -57,10 +57,28 @@ const props = defineProps({
src="https://static.shelingxingqiu.com/shootmini/static/rank/rank-bg.png" src="https://static.shelingxingqiu.com/shootmini/static/rank/rank-bg.png"
mode="widthFix" mode="widthFix"
/> />
<image
class="bg-image"
v-if="type === 7"
src="@/static/app-bg6.png"
mode="widthFix"
/>
<image
class="bg-image"
v-if="type === 8"
src="@/static/app-bg7.png"
mode="widthFix"
/>
<image
class="bg-image"
v-if="type === 9"
src="@/static/app-bg8.png"
mode="widthFix"
/>
<image <image
class="bg-image" class="bg-image"
v-if="type === 10" v-if="type === 10"
src="https://static.shelingxingqiu.com/shootmini/static/vip/vip-bg.png" src="@/static/app-bg9.png"
mode="widthFix" mode="widthFix"
/> />
<view class="bg-overlay" v-if="type === 0"></view> <view class="bg-overlay" v-if="type === 0"></view>
+1 -1
View File
@@ -8,7 +8,7 @@ const tabs = [
function handleTabClick(index) { function handleTabClick(index) {
if (index === 0) { if (index === 0) {
uni.navigateTo({ uni.navigateTo({
url: "/pages/member/be-vip", url: "/pages/be-vip",
}); });
} }
if (index === 1) { if (index === 1) {
+10 -19
View File
@@ -18,14 +18,12 @@ const props = defineProps({
}, },
}); });
const loading = ref(false); const loading = ref(false);
const navigating = ref(false);
/** 统一获取当前环境 token,用于守卫:无有效 token 时不发起接口请求 */ /** 统一获取当前环境 token,用于守卫:无有效 token 时不发起接口请求 */
const getToken = () => const getToken = () =>
uni.getStorageSync(`${uni.getAccountInfoSync().miniProgram.envVersion}_token`); uni.getStorageSync(`${uni.getAccountInfoSync().miniProgram.envVersion}_token`);
onShow(async () => { onShow(async () => {
navigating.value = false;
if (user.value.id && getToken()) { if (user.value.id && getToken()) {
setTimeout(async () => { setTimeout(async () => {
const state = await getUserGameState(); const state = await getUserGameState();
@@ -47,35 +45,28 @@ watch(
} }
); );
const navigateOnce = (url) =>
new Promise((resolve, reject) => {
navigating.value = true;
uni.navigateTo({
url,
success: resolve,
fail: (error) => {
navigating.value = false;
reject(error);
},
});
});
const onClick = debounce(async () => { const onClick = debounce(async () => {
if (loading.value || navigating.value) return; if (loading.value) return;
try { try {
loading.value = true; loading.value = true;
const result = await getBattleAPI(); const result = await getBattleAPI();
if (result && result.matchId) { if (result && result.matchId) {
await uni.$checkAudio(); await uni.$checkAudio();
if (result.mode <= 3) { if (result.mode <= 3) {
await navigateOnce(`/pages/team-battle/index?battleId=${result.matchId}`); uni.navigateTo({
url: `/pages/team-battle/index?battleId=${result.matchId}`,
});
} else { } else {
await navigateOnce(`/pages/melee-battle?battleId=${result.matchId}`); uni.navigateTo({
url: `/pages/melee-battle?battleId=${result.matchId}`,
});
} }
return; return;
} }
if (game.value.roomID) { if (game.value.roomID) {
await navigateOnce("/pages/battle-room?roomNumber=" + game.value.roomID); uni.navigateTo({
url: "/pages/battle-room?roomNumber=" + game.value.roomID,
});
} else { } else {
updateGame(false, ""); updateGame(false, "");
} }
+4 -46
View File
@@ -27,14 +27,6 @@ defineProps({
default: true, default: true,
}, },
}); });
const getMemberNicknameClass = (player = {}) => [
"member-nickname",
player.vip === true && player.sVip !== true ? "member-nickname--vip" : "",
player.sVip === true ? "member-nickname--svip" : "",
];
const isMember = (player = {}) => player.vip === true || player.sVip === true;
</script> </script>
<template> <template>
@@ -59,16 +51,7 @@ const isMember = (player = {}) => player.vip === true || player.sVip === true;
}" }"
> >
<Avatar :src="player.avatar" :rankLvl="player.rankLvl" :size="40" /> <Avatar :src="player.avatar" :rankLvl="player.rankLvl" :size="40" />
<view <text class="player-name">{{ player.name }}</text>
v-if="isMember(player)"
:class="['player-name', ...getMemberNicknameClass(player)]"
>
<text class="member-nickname__text">{{ player.name }}</text>
<text v-if="player.sVip === true" class="member-nickname__shine">
{{ player.name }}
</text>
</view>
<text v-else class="player-name">{{ player.name }}</text>
</view> </view>
<image <image
v-if="winner === 1" v-if="winner === 1"
@@ -87,16 +70,7 @@ const isMember = (player = {}) => player.vip === true || player.sVip === true;
}" }"
> >
<Avatar :src="player.avatar" :rankLvl="player.rankLvl" :size="40" /> <Avatar :src="player.avatar" :rankLvl="player.rankLvl" :size="40" />
<view <text class="player-name">{{ player.name }}</text>
v-if="isMember(player)"
:class="['player-name', ...getMemberNicknameClass(player)]"
>
<text class="member-nickname__text">{{ player.name }}</text>
<text v-if="player.sVip === true" class="member-nickname__shine">
{{ player.name }}
</text>
</view>
<text v-else class="player-name">{{ player.name }}</text>
</view> </view>
<image <image
v-if="winner === 2" v-if="winner === 2"
@@ -131,16 +105,7 @@ const isMember = (player = {}) => player.vip === true || player.sVip === true;
:size="40" :size="40"
:rank="showRank ? index + 1 : 0" :rank="showRank ? index + 1 : 0"
/> />
<view <text class="player-name">{{ player.name }}</text>
v-if="isMember(player)"
:class="['player-name', ...getMemberNicknameClass(player)]"
>
<text class="member-nickname__text">{{ player.name }}</text>
<text v-if="player.sVip === true" class="member-nickname__shine">
{{ player.name }}
</text>
</view>
<text v-else class="player-name">{{ player.name }}</text>
</view> </view>
</view> </view>
</scroll-view> </scroll-view>
@@ -207,7 +172,7 @@ const isMember = (player = {}) => player.vip === true || player.sVip === true;
justify-content: center; justify-content: center;
color: #fff9; color: #fff9;
font-size: 12px; font-size: 12px;
/* padding-top: 7px; */ padding-top: 7px;
flex: 0 0 auto; flex: 0 0 auto;
} }
.player-name { .player-name {
@@ -218,13 +183,6 @@ const isMember = (player = {}) => player.vip === true || player.sVip === true;
text-overflow: ellipsis; text-overflow: ellipsis;
text-align: center; text-align: center;
} }
view.player-name {
justify-content: center;
}
.player-name .member-nickname__text,
.player-name .member-nickname__shine {
font-size: 12px;
}
.left-winner-badge { .left-winner-badge {
position: absolute; position: absolute;
width: 50px; width: 50px;
+2 -27
View File
@@ -1,5 +1,4 @@
<script setup> <script setup>
import { computed } from "vue";
import AppBackground from "@/components/AppBackground.vue"; import AppBackground from "@/components/AppBackground.vue";
import Avatar from "@/components/Avatar.vue"; import Avatar from "@/components/Avatar.vue";
import BowTarget from "@/components/BowTarget.vue"; import BowTarget from "@/components/BowTarget.vue";
@@ -9,9 +8,6 @@ import { storeToRefs } from "pinia";
const store = useStore(); const store = useStore();
const { user } = storeToRefs(store); const { user } = storeToRefs(store);
const isSVip = computed(() => user.value.sVip === true);
const isVip = computed(() => user.value.vip === true && user.value.sVip !== true);
const props = defineProps({ const props = defineProps({
show: { show: {
type: Boolean, type: Boolean,
@@ -39,21 +35,7 @@ const props = defineProps({
<view> <view>
<Avatar :src="user.avatar" :rankLvl="user.rankLvl" :size="45" /> <Avatar :src="user.avatar" :rankLvl="user.rankLvl" :size="45" />
<view> <view>
<view <text>{{ user.nickName }}</text>
v-if="isVip || isSVip"
:class="[
'bow-data-user-name',
'member-nickname',
isVip ? 'member-nickname--vip' : '',
isSVip ? 'member-nickname--svip' : '',
]"
>
<text class="member-nickname__text">{{ user.nickName }}</text>
<text v-if="isSVip" class="member-nickname__shine">
{{ user.nickName }}
</text>
</view>
<text v-else>{{ user.nickName }}</text>
<text>{{ user.lvlName }}</text> <text>{{ user.lvlName }}</text>
</view> </view>
</view> </view>
@@ -62,7 +44,7 @@ const props = defineProps({
</view> </view>
</view> </view>
<view :style="{ width: '100%', marginBottom: '20px' }"> <view :style="{ width: '100%', marginBottom: '20px' }">
<BowTarget :scores="arrows" :isSvip="isSVip" /> <BowTarget :scores="arrows" />
</view> </view>
<view class="desc"> <view class="desc">
<text>{{ arrows.length }}</text> <text>{{ arrows.length }}</text>
@@ -113,13 +95,6 @@ const props = defineProps({
margin-left: 10px; margin-left: 10px;
color: #fff; color: #fff;
} }
.bow-data-user-name {
max-width: 300rpx;
}
.bow-data-user-name .member-nickname__text,
.bow-data-user-name .member-nickname__shine {
max-width: 300rpx;
}
.header > view:first-child > view:last-child > text:last-child { .header > view:first-child > view:last-child > text:last-child {
font-size: 10px; font-size: 10px;
background-color: #5f51ff; background-color: #5f51ff;
-400
View File
@@ -1,400 +0,0 @@
<script setup>
import { computed, onBeforeUnmount, ref, watch } from "vue";
const props = defineProps({
shot: {
type: Object,
default: null,
},
playKey: {
type: [String, Number],
default: "",
},
targetRadius: {
type: Number,
default: 20,
},
targetWidth: {
type: Number,
default: 0,
},
targetHeight: {
type: Number,
default: 0,
},
hitOffsetPx: {
type: Number,
default: 0,
},
});
const emit = defineEmits(["complete", "impact"]);
const phase = ref("idle");
const activePlayKey = ref("");
const animationKey = ref("");
const impactEmitted = ref(false);
const activeShot = ref(null);
let timers = [];
const isActive = computed(() => phase.value !== "idle");
const ARROW_IMPACT_MS = 340;
const COMPLETE_FALLBACK_MS = 980;
const safeTargetRadius = computed(() => {
const radius = Number(props.targetRadius);
return Number.isFinite(radius) && radius > 0 ? radius : 20;
});
const safeTargetSize = computed(() => {
const width = Number(props.targetWidth);
const height = Number(props.targetHeight);
return {
width: Number.isFinite(width) && width > 0 ? width : 0,
height: Number.isFinite(height) && height > 0 ? height : 0,
};
});
function hasShotPoint(shot) {
const x = Number(shot?.x);
const y = Number(shot?.y);
return Number.isFinite(x) && Number.isFinite(y);
}
const effectiveShot = computed(() => activeShot.value || props.shot);
const shotPoint = computed(() => {
const x = Number(effectiveShot.value?.x);
const y = Number(effectiveShot.value?.y);
return {
x: Number.isFinite(x) ? x : 0,
y: Number.isFinite(y) ? y : 0,
};
});
const pointDirection = computed(() => {
const point = shotPoint.value;
const distance = Math.sqrt(point.x * point.x + point.y * point.y);
if (distance === 0) return null;
return {
x: point.x / distance,
y: point.y / distance,
};
});
const hitOffset = computed(() => {
const offset = Number(props.hitOffsetPx);
const safeOffset = Number.isFinite(offset) && offset > 0 ? offset : 0;
const direction = pointDirection.value;
return {
x: direction ? direction.x * safeOffset : 0,
y: direction ? -direction.y * safeOffset : 0,
};
});
const hitPercent = computed(() => {
const point = shotPoint.value;
const radius = safeTargetRadius.value;
const diameter = radius * 2;
return {
left: ((point.x + radius) / diameter) * 100,
top: ((radius - point.y) / diameter) * 100,
};
});
const arrowAngle = computed(() => {
const size = safeTargetSize.value;
if (!size.width || !size.height) {
const dx = hitPercent.value.left - 50;
const dy = 114 - hitPercent.value.top;
const fallbackAngle = Math.atan2(dx, dy || 1) * (180 / Math.PI);
return Math.max(-18, Math.min(18, fallbackAngle));
}
const startX = size.width * 0.5;
const startY = size.height * 1.14;
const endX = size.width * (hitPercent.value.left / 100) + hitOffset.value.x;
const endY = size.height * (hitPercent.value.top / 100) + hitOffset.value.y;
const dx = endX - startX;
const dy = startY - endY;
const angle = Math.atan2(dx, dy || 1) * (180 / Math.PI);
return Math.max(-18, Math.min(18, angle));
});
function formatPxOffset(value) {
if (!value) return "";
const operator = value > 0 ? "+" : "-";
return ` ${operator} ${Math.abs(value)}px`;
}
function formatTargetPosition(percent, offset) {
const pxOffset = formatPxOffset(offset);
return pxOffset ? `calc(${percent}%${pxOffset})` : `${percent}%`;
}
const crackStyle = computed(() => ({
left: formatTargetPosition(hitPercent.value.left, hitOffset.value.x),
top: formatTargetPosition(hitPercent.value.top, hitOffset.value.y),
}));
function getTargetTranslate(percent) {
const absPercent = Math.abs(percent);
const operator = percent >= 0 ? "-" : "+";
return `calc(${percent}vw ${operator} ${absPercent * 0.5}px)`;
}
const arrowMoveStyle = computed(() => {
const size = safeTargetSize.value;
let x = getTargetTranslate(hitPercent.value.left - 50);
let y = getTargetTranslate(hitPercent.value.top - 114);
if (size.width && size.height) {
const startX = size.width * 0.5;
const startY = size.height * 1.14;
const endX = size.width * (hitPercent.value.left / 100) + hitOffset.value.x;
const endY = size.height * (hitPercent.value.top / 100) + hitOffset.value.y;
x = `${endX - startX}px`;
y = `${endY - startY}px`;
}
return {
"--shot-tx": x,
"--shot-ty": y,
"--shot-angle": `${arrowAngle.value}deg`,
};
});
function clearTimers() {
timers.forEach((timer) => clearTimeout(timer));
timers = [];
}
function queueTimer(callback, delay) {
const timer = setTimeout(callback, delay);
timers.push(timer);
}
function emitImpactOnce(playKey) {
if (phase.value === "idle" || activePlayKey.value !== playKey || impactEmitted.value) return;
impactEmitted.value = true;
emit("impact");
}
function finish(playKey) {
if (phase.value === "idle" || activePlayKey.value !== playKey) return;
clearTimers();
phase.value = "idle";
activePlayKey.value = "";
activeShot.value = null;
emit("complete", playKey);
}
function play() {
if (!props.playKey || !props.shot || !props.shot.ring || !hasShotPoint(props.shot)) {
return;
}
clearTimers();
activePlayKey.value = props.playKey;
animationKey.value = `${props.playKey}`;
impactEmitted.value = false;
activeShot.value = { ...props.shot };
phase.value = "playing";
queueTimer(() => {
emitImpactOnce(activePlayKey.value);
}, ARROW_IMPACT_MS);
queueTimer(() => {
finish(activePlayKey.value);
}, COMPLETE_FALLBACK_MS);
}
function handleArrowAnimationEnd() {
emitImpactOnce(activePlayKey.value);
}
function handleCrackAnimationEnd() {
finish(activePlayKey.value);
}
watch(
() => props.playKey,
() => {
play();
},
{ immediate: true }
);
onBeforeUnmount(() => {
clearTimers();
});
</script>
<template>
<view
v-show="isActive"
:class="['shot-effect', `shot-effect--${phase}`]"
:style="arrowMoveStyle"
>
<view
:key="`arrow-${animationKey}`"
class="shot-arrow-track"
@animationend="handleArrowAnimationEnd"
>
<image
class="shot-arrow"
src="../static/vip/svip-jian.png"
mode="heightFix"
/>
</view>
<view
:key="`flash-${animationKey}`"
class="shot-flash"
:style="crackStyle"
></view>
<view
:key="`crack-anchor-${animationKey}`"
class="shot-crack-anchor"
:style="crackStyle"
>
<image
:key="`crack-${animationKey}`"
class="shot-crack"
src="../static/vip/svip-lie.png"
mode="aspectFit"
@animationend="handleCrackAnimationEnd"
/>
</view>
</view>
</template>
<style scoped lang="scss">
.shot-effect {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
pointer-events: none;
overflow: visible;
transform: translateZ(0);
}
.shot-arrow-track {
position: absolute;
left: 50%;
top: 114%;
width: 0;
height: 0;
opacity: 0;
transform: translate3d(0, 0, 0);
animation: none;
backface-visibility: hidden;
will-change: transform, opacity;
}
.shot-arrow {
position: absolute;
width: 248rpx;
height: 1186rpx;
left: 0;
top: 0;
opacity: 1;
transform-origin: 44.35% 3.04%;
transform: translate(-44.35%, -3.04%) rotate(var(--shot-angle));
backface-visibility: hidden;
will-change: transform;
}
.shot-effect--playing .shot-arrow-track {
animation: shot-arrow-fly 0.38s cubic-bezier(0.68, 0, 0.9, 0.62) forwards;
}
.shot-flash,
.shot-crack-anchor {
position: absolute;
transform: translate(-50%, -50%);
backface-visibility: hidden;
will-change: transform, opacity;
}
.shot-flash {
width: 86rpx;
height: 86rpx;
border-radius: 50%;
border: 3rpx solid rgba(255, 236, 166, 0.9);
opacity: 0;
animation: none;
}
.shot-crack-anchor {
width: 750rpx;
height: 750rpx;
}
.shot-crack {
width: 100%;
height: 100%;
opacity: 0;
transform-origin: center center;
animation: none;
will-change: transform, opacity;
}
.shot-effect--playing .shot-flash {
animation: shot-flash 0.42s ease-out 0.32s forwards;
}
.shot-effect--playing .shot-crack {
animation: shot-crack-hit 0.52s ease-out 0.34s forwards;
}
@keyframes shot-arrow-fly {
0% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
86% {
opacity: 1;
transform: translate3d(var(--shot-tx), var(--shot-ty), 0);
}
100% {
opacity: 0;
transform: translate3d(var(--shot-tx), var(--shot-ty), 0);
}
}
@keyframes shot-flash {
0% {
opacity: 0.95;
transform: translate(-50%, -50%) scale(0.2);
}
100% {
opacity: 0;
transform: translate(-50%, -50%) scale(1.9);
}
}
@keyframes shot-crack-hit {
0% {
opacity: 0;
transform: scale(0.55);
}
28% {
opacity: 1;
transform: scale(1.08);
}
56% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.18);
}
}
</style>
+33 -275
View File
@@ -1,15 +1,6 @@
<script setup> <script setup>
import { import { ref, watch, onMounted, onBeforeUnmount, computed } from "vue";
ref,
watch,
onMounted,
onBeforeUnmount,
computed,
nextTick,
getCurrentInstance,
} from "vue";
import PointSwitcher from "@/components/PointSwitcher.vue"; import PointSwitcher from "@/components/PointSwitcher.vue";
import BowShotEffect from "@/components/BowShotEffect.vue";
import { MESSAGETYPES, MESSAGETYPESV2 } from "@/constants"; import { MESSAGETYPES, MESSAGETYPESV2 } from "@/constants";
import { simulShootAPI } from "@/apis"; import { simulShootAPI } from "@/apis";
@@ -35,10 +26,6 @@ const props = defineProps({
type: Array, type: Array,
default: () => [], default: () => [],
}, },
isSvip: {
type: Boolean,
default: false,
},
mode: { mode: {
type: String, type: String,
default: "solo", // solo 单排,team 双排 default: "solo", // solo 单排,team 双排
@@ -64,180 +51,46 @@ const props = defineProps({
const pMode = ref(true); const pMode = ref(true);
const latestOne = ref(null); const latestOne = ref(null);
const bluelatestOne = ref(null); const bluelatestOne = ref(null);
const prevScores = ref([]);
const prevBlueScores = ref([]);
const timer = ref(null); const timer = ref(null);
const dirTimer = ref(null); const dirTimer = ref(null);
const angle = ref(null); const angle = ref(null);
const circleColor = ref(""); const circleColor = ref("");
const shotEffect = ref(null);
const hiddenRedLatestKey = ref("");
const hiddenBlueLatestKey = ref("");
const targetShaking = ref(false);
const targetSize = ref({ width: 0, height: 0 });
const shakeTimer = ref(null);
const instance = getCurrentInstance();
const ROUND_TIP_OFFSET_Y = -32; const ROUND_TIP_OFFSET_Y = -32;
const EXPERIENCE_TIP_OFFSET_Y = -68; const EXPERIENCE_TIP_OFFSET_Y = -68;
function buildShotEffectKey(team, shot, index) {
return [
team,
index,
shot?.playerId ?? "",
shot?.x ?? "",
shot?.y ?? "",
shot?.ring ?? "",
shot?.ringX ? 1 : 0,
].join("-");
}
function hasShotPoint(shot) {
const x = Number(shot?.x);
const y = Number(shot?.y);
return Number.isFinite(x) && Number.isFinite(y);
}
function shouldPlayShotEffect(shot) {
return props.isSvip && !!shot && Number(shot.ring) > 0 && hasShotPoint(shot);
}
function clearTipTimer() {
if (timer.value) {
clearTimeout(timer.value);
timer.value = null;
}
}
function showShotTip(team, shot) {
clearTipTimer();
if (team === "red") {
latestOne.value = shot;
timer.value = setTimeout(() => {
latestOne.value = null;
timer.value = null;
}, 1000);
return;
}
bluelatestOne.value = shot;
timer.value = setTimeout(() => {
bluelatestOne.value = null;
timer.value = null;
}, 1000);
}
function triggerShotEffect(team, shot, index) {
const key = buildShotEffectKey(team, shot, index);
if (shotEffect.value?.team === "red") hiddenRedLatestKey.value = "";
if (shotEffect.value?.team === "blue") hiddenBlueLatestKey.value = "";
if (team === "red") {
latestOne.value = null;
hiddenRedLatestKey.value = key;
} else {
bluelatestOne.value = null;
hiddenBlueLatestKey.value = key;
}
shotEffect.value = { key, team, shot };
}
function completeShotEffect(key) {
if (!shotEffect.value || shotEffect.value.key !== key) return;
const { team, shot } = shotEffect.value;
if (team === "red") hiddenRedLatestKey.value = "";
if (team === "blue") hiddenBlueLatestKey.value = "";
shotEffect.value = null;
showShotTip(team, shot);
}
function shakeTarget() {
targetShaking.value = false;
if (shakeTimer.value) {
clearTimeout(shakeTimer.value);
shakeTimer.value = null;
}
nextTick(() => {
targetShaking.value = true;
shakeTimer.value = setTimeout(() => {
targetShaking.value = false;
shakeTimer.value = null;
}, 260);
});
}
function updateTargetSize() {
nextTick(() => {
const query = instance?.proxy
? uni.createSelectorQuery().in(instance.proxy)
: uni.createSelectorQuery();
query
.select(".target")
.boundingClientRect((rect) => {
const width = Number(rect?.width);
const height = Number(rect?.height);
if (!Number.isFinite(width) || !Number.isFinite(height)) return;
if (width <= 0 || height <= 0) return;
targetSize.value = { width, height };
})
.exec();
});
}
function handleWindowResize() {
updateTargetSize();
}
function shouldHideRedHit(index) {
return !!hiddenRedLatestKey.value && index === props.scores.length - 1;
}
function shouldHideBlueHit(index) {
return !!hiddenBlueLatestKey.value && index === props.blueScores.length - 1;
}
watch( watch(
() => props.scores.length, () => props.scores,
(newLen, oldLen) => { (newVal) => {
if (newLen === oldLen + 1) { if (newVal.length - prevScores.value.length === 1) {
const latestShot = props.scores[newLen - 1]; latestOne.value = newVal[newVal.length - 1];
if (shouldPlayShotEffect(latestShot)) { if (timer.value) clearTimeout(timer.value);
triggerShotEffect("red", latestShot, newLen - 1); timer.value = setTimeout(() => {
} else {
showShotTip("red", latestShot);
}
return;
}
if (newLen < oldLen) {
latestOne.value = null; latestOne.value = null;
hiddenRedLatestKey.value = ""; }, 1000);
if (shotEffect.value?.team === "red") shotEffect.value = null;
} }
prevScores.value = [...newVal];
},
{
deep: true,
} }
); );
watch( watch(
() => props.blueScores.length, () => props.blueScores,
(newLen, oldLen) => { (newVal) => {
if (newLen === oldLen + 1) { if (newVal.length - prevBlueScores.value.length === 1) {
const latestShot = props.blueScores[newLen - 1]; bluelatestOne.value = newVal[newVal.length - 1];
if (shouldPlayShotEffect(latestShot)) { if (timer.value) clearTimeout(timer.value);
triggerShotEffect("blue", latestShot, newLen - 1); timer.value = setTimeout(() => {
} else {
showShotTip("blue", latestShot);
}
return;
}
if (newLen < oldLen) {
bluelatestOne.value = null; bluelatestOne.value = null;
hiddenBlueLatestKey.value = ""; }, 1000);
if (shotEffect.value?.team === "blue") shotEffect.value = null;
} }
prevBlueScores.value = [...newVal];
},
{
deep: true,
} }
); );
@@ -311,15 +164,6 @@ function getHitStyle(shot) {
}; };
} }
function getSvipHitBgStyle(shot) {
const radius = currentHitRadiusPx.value;
const point = getShotPoint(shot);
return {
...getTargetPositionStyle(point, radius),
};
}
function getRoundTipStyle(shot) { function getRoundTipStyle(shot) {
const point = getShotPoint(shot, true); const point = getShotPoint(shot, true);
return getTargetPositionStyle( return getTargetPositionStyle(
@@ -384,8 +228,6 @@ async function onReceiveMessage(message) {
onMounted(() => { onMounted(() => {
uni.$on("socket-inbox", onReceiveMessage); uni.$on("socket-inbox", onReceiveMessage);
updateTargetSize();
if (uni.onWindowResize) uni.onWindowResize(handleWindowResize);
}); });
onBeforeUnmount(() => { onBeforeUnmount(() => {
@@ -397,17 +239,12 @@ onBeforeUnmount(() => {
clearTimeout(dirTimer.value); clearTimeout(dirTimer.value);
dirTimer.value = null; dirTimer.value = null;
} }
if (shakeTimer.value) {
clearTimeout(shakeTimer.value);
shakeTimer.value = null;
}
uni.$off("socket-inbox", onReceiveMessage); uni.$off("socket-inbox", onReceiveMessage);
if (uni.offWindowResize) uni.offWindowResize(handleWindowResize);
}); });
</script> </script>
<template> <template>
<view :class="['container', { 'container--effecting': shotEffect }]"> <view class="container">
<view class="header" v-if="totalRound > 0"> <view class="header" v-if="totalRound > 0">
<text v-if="totalRound > 0" class="round-count">{{ <text v-if="totalRound > 0" class="round-count">{{
(currentRound > totalRound ? totalRound : currentRound) + (currentRound > totalRound ? totalRound : currentRound) +
@@ -415,7 +252,7 @@ onBeforeUnmount(() => {
totalRound totalRound
}}</text> }}</text>
</view> </view>
<view :class="['target', { 'target--shake': targetShaking }]"> <view class="target">
<view v-if="angle !== null" class="arrow-dir" :style="arrowStyle"> <view v-if="angle !== null" class="arrow-dir" :style="arrowStyle">
<view :style="{ background: circleColor }"> <view :style="{ background: circleColor }">
<image src="../static/dot-circle.png" mode="widthFix" /> <image src="../static/dot-circle.png" mode="widthFix" />
@@ -455,15 +292,8 @@ onBeforeUnmount(() => {
}}<text v-if="bluelatestOne.ring">环</text></view }}<text v-if="bluelatestOne.ring">环</text></view
> >
<block v-for="(bow, index) in scores" :key="index"> <block v-for="(bow, index) in scores" :key="index">
<image
v-if="pMode && isSvip && bow.ring > 0 && !shouldHideRedHit(index)"
class="svip-hit-bg"
src="../static/vip/svip-xuan.png"
:style="getSvipHitBgStyle(bow)"
mode="aspectFit"
/>
<view <view
v-if="bow.ring > 0 && !shouldHideRedHit(index)" v-if="bow.ring > 0"
:class="`hit ${pMode ? 'b' : 's'}-point ${ :class="`hit ${pMode ? 'b' : 's'}-point ${
index === scores.length - 1 && latestOne ? 'pump-in' : '' index === scores.length - 1 && latestOne ? 'pump-in' : ''
}`" }`"
@@ -475,15 +305,8 @@ onBeforeUnmount(() => {
> >
</block> </block>
<block v-for="(bow, index) in blueScores" :key="index"> <block v-for="(bow, index) in blueScores" :key="index">
<image
v-if="pMode && isSvip && bow.ring > 0 && !shouldHideBlueHit(index)"
class="svip-hit-bg"
src="../static/vip/svip-xuan.png"
:style="getSvipHitBgStyle(bow)"
mode="aspectFit"
/>
<view <view
v-if="bow.ring > 0 && !shouldHideBlueHit(index)" v-if="bow.ring > 0"
:class="`hit ${pMode ? 'b' : 's'}-point ${ :class="`hit ${pMode ? 'b' : 's'}-point ${
index === blueScores.length - 1 && bluelatestOne ? 'pump-in' : '' index === blueScores.length - 1 && bluelatestOne ? 'pump-in' : ''
}`" }`"
@@ -495,16 +318,6 @@ onBeforeUnmount(() => {
<text v-if="pMode">{{ index + 1 }}</text> <text v-if="pMode">{{ index + 1 }}</text>
</view> </view>
</block> </block>
<BowShotEffect
:shot="shotEffect && shotEffect.shot"
:playKey="shotEffect ? shotEffect.key : ''"
:targetRadius="safeTargetRadius"
:targetWidth="targetSize.width"
:targetHeight="targetSize.height"
:hitOffsetPx="currentHitRadiusPx"
@impact="shakeTarget"
@complete="completeShotEffect"
/>
<image src="../static/bow-target.png" mode="widthFix" /> <image src="../static/bow-target.png" mode="widthFix" />
</view> </view>
<view class="footer"> <view class="footer">
@@ -526,22 +339,13 @@ onBeforeUnmount(() => {
height: calc(100vw - 30px); height: calc(100vw - 30px);
padding: 0px 15px; padding: 0px 15px;
position: relative; position: relative;
z-index: 3;
}
.container--effecting {
z-index: 10000;
} }
.target { .target {
position: relative; position: relative;
margin: 10px; margin: 10px;
width: calc(100% - 20px); width: calc(100% - 20px);
height: calc(100% - 20px); height: calc(100% - 20px);
z-index: 1; z-index: -1;
pointer-events: none;
transform-origin: center center;
}
.target--shake {
animation: target-shake 0.26s ease-out;
} }
.e-value { .e-value {
position: absolute; position: absolute;
@@ -596,26 +400,17 @@ onBeforeUnmount(() => {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.svip-hit-bg {
position: absolute;
width: 48rpx;
height: 48rpx;
z-index: 1;
pointer-events: none;
transform-origin: center center;
animation: svip-hit-xuan 1.2s linear infinite;
}
.hit { .hit {
position: absolute; position: absolute;
border-radius: 50%; border-radius: 50%;
z-index: 2; z-index: 1;
color: #fff; color: #fff;
transition: transform 0.2s ease, opacity 0.2s ease; transition: all 0.3s ease;
box-sizing: border-box; box-sizing: border-box;
} }
.b-point { .b-point {
border: 1px solid #fff; border: 1px solid #fff;
z-index: 2; z-index: 1;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@@ -631,20 +426,6 @@ onBeforeUnmount(() => {
transform: translate(-50%, -50%);*/ transform: translate(-50%, -50%);*/
margin-top: 2rpx; margin-top: 2rpx;
} }
@keyframes svip-hit-xuan {
0% {
opacity: 0.9;
transform: translate(-50%, -50%) rotate(0deg) scale(0.92);
}
50% {
opacity: 1;
transform: translate(-50%, -50%) rotate(180deg) scale(1.08);
}
100% {
opacity: 0.9;
transform: translate(-50%, -50%) rotate(360deg) scale(0.92);
}
}
@keyframes target-pump-in { @keyframes target-pump-in {
from { from {
transform: translate(-50%, -50%) scale(2); transform: translate(-50%, -50%) scale(2);
@@ -654,29 +435,6 @@ onBeforeUnmount(() => {
transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1);
} }
} }
@keyframes target-shake {
0% {
transform: translate(0, 0);
}
14% {
transform: translate(-20rpx, 8rpx);
}
28% {
transform: translate(16rpx, -8rpx);
}
44% {
transform: translate(-12rpx, 6rpx);
}
64% {
transform: translate(8rpx, -4rpx);
}
82% {
transform: translate(-4rpx, 2rpx);
}
100% {
transform: translate(0, 0);
}
}
.hit.pump-in { .hit.pump-in {
animation: target-pump-in 0.3s ease-out forwards; animation: target-pump-in 0.3s ease-out forwards;
transform-origin: center center; transform-origin: center center;
-5
View File
@@ -41,10 +41,6 @@ const props = defineProps({
type: Boolean, type: Boolean,
default: true, default: true,
}, },
titleStyle: {
type: [String, Object, Array],
default: () => ({}),
},
showBottom: { showBottom: {
type: Boolean, type: Boolean,
default: true, default: true,
@@ -159,7 +155,6 @@ const goCalibration = async () => {
:title="title" :title="title"
:onBack="onBack" :onBack="onBack"
:whiteBackArrow="whiteBackArrow" :whiteBackArrow="whiteBackArrow"
:titleStyle="titleStyle"
/> />
<BackToGame v-if="showBackToGame" /> <BackToGame v-if="showBackToGame" />
<scroll-view <scroll-view
+4 -28
View File
@@ -26,10 +26,6 @@ const props = defineProps({
type: Boolean, type: Boolean,
default: true, default: true,
}, },
titleStyle: {
type: [String, Object, Array],
default: () => ({}),
},
}); });
const onClick = () => { const onClick = () => {
@@ -59,9 +55,6 @@ const signin = () => {
} }
}; };
const isSVip = computed(() => user.value.sVip === true);
const isVip = computed(() => user.value.vip === true && user.value.sVip !== true);
const loading = ref(false); const loading = ref(false);
const pointBook = ref(null); const pointBook = ref(null);
const heat = ref(0); const heat = ref(0);
@@ -122,9 +115,7 @@ onBeforeUnmount(() => {
mode="widthFix" mode="widthFix"
/> />
</view> </view>
<view <view :style="{ color: whiteBackArrow ? '#fff' : '#000' }">
:style="[{ color: whiteBackArrow ? '#fff' : '#000' }, titleStyle]"
>
<view <view
v-if="currentPage === 'pages/point-book'" v-if="currentPage === 'pages/point-book'"
class="user-header" class="user-header"
@@ -137,21 +128,7 @@ onBeforeUnmount(() => {
:size="40" :size="40"
borderColor="#333" borderColor="#333"
/> />
<view <text class="truncate">{{ user.nickName }}</text>
v-if="isVip || isSVip"
:class="[
'point-book-user-name',
'member-nickname',
isVip ? 'member-nickname--vip' : '',
isSVip ? 'member-nickname--svip' : '',
]"
>
<text class="member-nickname__text">{{ user.nickName }}</text>
<text v-if="isSVip" class="member-nickname__shine">
{{ user.nickName }}
</text>
</view>
<text v-else class="truncate">{{ user.nickName }}</text>
<image <image
v-if="heat" v-if="heat"
:src="`../static/hot${heat}.png`" :src="`../static/hot${heat}.png`"
@@ -308,8 +285,7 @@ onBeforeUnmount(() => {
width: 36rpx; width: 36rpx;
height: 36rpx; height: 36rpx;
} }
.user-header > text:nth-child(2), .user-header > text:nth-child(2) {
.user-header > .point-book-user-name {
font-weight: 500; font-weight: 500;
font-size: 30rpx; font-size: 30rpx;
color: #333333; color: #333333;
@@ -340,7 +316,7 @@ onBeforeUnmount(() => {
width: 156rpx; width: 156rpx;
height: 28rpx; height: 28rpx;
font-weight: 400; font-weight: 400;
font-size: 24rpx; font-size: 20rpx;
color: #ffffff; color: #ffffff;
text-align: center; text-align: center;
line-height: 28rpx; line-height: 28rpx;
-234
View File
@@ -1,234 +0,0 @@
<script setup>
const props = defineProps({
show: {
type: Boolean,
default: false,
},
title: {
type: String,
default: "",
},
content: {
type: String,
default: "",
},
cancelText: {
type: String,
default: "取消",
},
confirmText: {
type: String,
default: "确定",
},
showCancel: {
type: Boolean,
default: true,
},
showConfirm: {
type: Boolean,
default: true,
},
onCancel: {
type: Function,
default: null,
},
onConfirm: {
type: Function,
default: null,
},
});
const handleCancel = () => {
props.onCancel?.();
};
const handleConfirm = () => {
props.onConfirm?.();
};
</script>
<template>
<view class="modal-mask" :style="{ display: show ? 'flex' : 'none' }">
<view class="modal-wrap scale-in">
<image
class="dialog-light"
src="../static/common/dialog-light.png"
mode="widthFix"
/>
<image
class="dialog-icon"
src="../static/common/dialog-icon.png"
mode="widthFix"
/>
<view class="dialog-panel">
<image
class="dialog-bg"
src="../static/common/dialog-bg.png"
mode="scaleToFill"
/>
<view class="dialog-content">
<slot>
<text v-if="title" class="dialog-title">{{ title }}</text>
<text v-if="content" class="dialog-text">{{ content }}</text>
</slot>
</view>
<view
v-if="showCancel || showConfirm"
class="dialog-actions"
:class="{ single: !(showCancel && showConfirm) }"
>
<view
v-if="showCancel"
class="dialog-button cancel"
@click="handleCancel"
>
<text>{{ cancelText }}</text>
</view>
<view
v-if="showConfirm"
class="dialog-button confirm"
@click="handleConfirm"
>
<text>{{ confirmText }}</text>
</view>
</view>
</view>
</view>
</view>
</template>
<style scoped lang="scss">
.modal-mask {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.62);
justify-content: center;
align-items: center;
z-index: 999;
}
.modal-wrap {
position: relative;
display: flex;
width: 549rpx;
min-height: 318rpx;;
padding-top: 168rpx;
justify-content: flex-start;
align-items: center;
}
.dialog-light {
position: absolute;
top: 0;
left: 50%;
width: 520rpx;
z-index: 1;
transform-origin: center center;
animation: rotateLight 8s linear infinite;
}
.dialog-icon {
position: absolute;
top: 70rpx;
left: 50%;
width: 250rpx;
z-index: 5;
transform: translateX(-50%);
}
.dialog-panel {
position: relative;
width: 100%;
min-height: 318rpx;
padding: 98rpx 36rpx 40rpx 36rpx;
box-sizing: border-box;
z-index: 3;
border-radius: 24rpx;
border: 2rpx solid rgba(249, 213, 161, 0.5);
overflow: hidden;
}
.dialog-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 24rpx;
}
.dialog-content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
color: #fff;
text-align: center;
}
.dialog-title {
font-size: 28rpx;
font-weight: 700;
line-height: 40rpx;
}
.dialog-text {
margin-top: 10rpx;
font-size: 26rpx;
line-height: 36rpx;
white-space: pre-wrap;
}
.dialog-actions {
position: relative;
z-index: 1;
display: flex;
margin-top: 50rpx;
justify-content: space-between;
align-items: center;
gap: 20rpx;
}
.dialog-actions.single {
justify-content: center;
}
.dialog-button {
display: flex;
width: 232rpx;
height: 70rpx;
line-height: 70rpx;
border-radius: 44rpx;
justify-content: center;
align-items: center;
font-size: 26rpx;
font-weight: 500;
}
.dialog-button.cancel {
color: #fff;
background-color: rgba(255,255,255,0.2);
}
.dialog-button.confirm {
color: #000000;
background-color: #ffda3f;
}
@keyframes rotateLight {
from {
transform: translateX(-50%) rotate(0deg);
}
to {
transform: translateX(-50%) rotate(360deg);
}
}
</style>
-429
View File
@@ -1,429 +0,0 @@
<script setup>
import { computed } from "vue";
import { getDeviceBatteryAPI } from "@/apis";
const OTA_MIN_BATTERY = 50;
const OTA_LOW_BATTERY_TEXT = "电量不足 50%,暂不支持 OTA 升级";
const OTA_OFFLINE_TEXT = "请先开启智能弓";
const props = defineProps({
visible: {
type: Boolean,
default: false,
},
state: {
type: String,
default: "new_version", // new_version | update_progress | update_success | update_failure
},
version: {
type: String,
default: "",
},
progress: {
type: Number,
default: 40,
},
// 副标题:如“新版本将优化智能弓体验”
description: {
type: String,
default: "",
},
// 详细说明:如“升级前请确保:...”
changelog: {
type: String,
default: "",
},
forceUpdate: {
type: Boolean,
default: false,
},
});
const emit = defineEmits(["update", "skip", "close", "done", "retry"]);
const isNewVersion = computed(() => props.state === "new_version");
const isProgress = computed(() => props.state === "update_progress");
const isSuccess = computed(() => props.state === "update_success");
const isFailure = computed(() => props.state === "update_failure");
// Clamp progress to keep the progress bar width within its container.
const progressValue = computed(() => Math.min(100, Math.max(0, Number(props.progress) || 0)));
// 点击立即更新前先校验设备在线状态,再校验设备电量。
const handleUpdateClick = async () => {
try {
const deviceStatus = await getDeviceBatteryAPI();
if (deviceStatus?.online !== true) {
uni.showToast({
title: OTA_OFFLINE_TEXT,
icon: "none",
});
return;
}
if (Number(deviceStatus?.battery) <= OTA_MIN_BATTERY) {
uni.showToast({
title: OTA_LOW_BATTERY_TEXT,
icon: "none",
});
return;
}
} catch (err) {
emit("update");
return;
}
emit("update");
};
</script>
<template>
<view v-if="visible" class="ota-mask">
<!-- 图标 + 弹窗卡片 容器 -->
<view
class="ota-outer"
:class="isNewVersion ? 'outer-new' : 'outer-result'"
>
<!-- 悬浮图标溢出卡片顶部 -->
<image
v-if="isNewVersion"
src="https://static.shelingxingqiu.com/shootmini/static/ota/ota-mascot.png"
mode="aspectFit"
class="float-icon float-mascot"
/>
<image
v-else-if="isSuccess"
src="https://static.shelingxingqiu.com/shootmini/static/ota/check-char.png"
mode="aspectFit"
class="float-icon float-check"
/>
<image
v-else-if="isFailure"
src="https://static.shelingxingqiu.com/shootmini/static/ota/close-char.png"
mode="aspectFit"
class="float-icon float-close"
/>
<image
v-else-if="isProgress"
src="https://static.shelingxingqiu.com/shootmini/static/ota/target-char.png"
mode="aspectFit"
class="float-icon float-target"
/>
<!-- 弹窗卡片overflow:visible 允许按钮溢出底部背景图通过 ota-bg-clip 独立裁剪保持圆角 -->
<view class="ota-dialog">
<view class="ota-bg-clip">
<image src="https://static.shelingxingqiu.com/shootmini/static/ota/ota-bg.png" mode="aspectFill" class="ota-bg" />
</view>
<view
class="ota-content"
:class="{ 'content-new': isNewVersion, 'content-result': isProgress || isSuccess || isFailure }"
>
<!-- 发现新版本new-ver.png 已包含标题图不再重复文字版本号使用 ota-ver.png 胶囊背景 -->
<block v-if="isNewVersion">
<image src="https://static.shelingxingqiu.com/shootmini/static/ota/new-ver.png" mode="aspectFit" class="new-ver-img" />
<view v-if="version" class="version-tag-wrap">
<image src="https://static.shelingxingqiu.com/shootmini/static/ota/ota-ver.png" mode="aspectFit" class="version-tag-bg-img" />
<text class="version-tag">{{ version }}</text>
</view>
<!-- 副标题新版本将优化智能弓体验离下方详情 12rpx -->
<text v-if="description" class="desc-text">{{ description }}</text>
<!-- 详细说明升级前请确保... -->
<text v-if="changelog" class="changelog-text">{{ changelog }}</text>
<view class="btn-group">
<view class="primary-btn" @click="handleUpdateClick">
<text class="primary-btn-text">立即更新</text>
</view>
<text v-if="!forceUpdate" class="skip-text" @click="emit('skip')">暂不更新</text>
</view>
</block>
<!-- 更新成功图片左边距 34rpx文案左边距 44rpx按钮浮动底部居中 -->
<block v-else-if="isSuccess">
<image src="https://static.shelingxingqiu.com/shootmini/static/ota/update-ok.png" mode="aspectFit" class="result-title-img" style="width: 220rpx; height: 62rpx;" />
<text class="dialog-desc">请关机并重启智能弓</text>
<view class="btn-group-result">
<view class="primary-btn" @click="emit('done')">
<text class="primary-btn-text">完成</text>
</view>
</view>
</block>
<!-- 更新中复用成功标题图正文区域展示进度条无底部按钮 -->
<block v-else-if="isProgress">
<image src="https://static.shelingxingqiu.com/shootmini/static/ota/update_progress.png" mode="aspectFit" class="result-title-img" style="width: 220rpx; height: 62rpx;" />
<view class="progress-wrap">
<view class="progress-track">
<view class="progress-fill" :style="{ width: `${progressValue}%` }"></view>
</view>
</view>
</block>
<!-- 更新失败图片左边距 34rpx文案左对齐 44rpx按钮浮动底部居中 -->
<block v-else-if="isFailure">
<image src="https://static.shelingxingqiu.com/shootmini/static/ota/update-fail.png" mode="aspectFit" class="result-title-img" style="width: 222rpx; height: 62rpx;" />
<text class="dialog-desc">请确保</text>
<text class="dialog-desc">1智能弓已开启</text>
<text class="dialog-desc">2网路连接稳定</text>
<view class="btn-group-result">
<view class="primary-btn" @click="emit('retry')">
<text class="primary-btn-text">重试</text>
</view>
</view>
</block>
</view>
</view>
</view>
<!-- 关闭按钮仅新版本状态非强制更新时位于弹窗下方 -->
<view
v-if="(isNewVersion || isFailure) && !forceUpdate"
class="ota-close-below"
@click="emit('close')"
>
<image src="../static/sicon/close.png" mode="aspectFit" style="width: 56rpx; height: 56rpx;" />
</view>
</view>
</template>
<style scoped>
.ota-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 1000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* 外层容器:相对定位,为浮动图标创造溢出空间 */
.ota-outer {
position: relative;
overflow: visible;
}
/* 设计图:吉祥物向上突出弹窗顶部 40px(375px基准)× 2 = 80rpx */
.outer-new {
padding-top: 80rpx;
}
.outer-result {
padding-top: 80rpx;
padding-bottom: 66rpx;
}
/* 浮动图标(绝对定位,位于卡片顶部上方) */
.float-icon {
position: absolute;
z-index: 2;
}
/* 吉祥物尺寸:设计图 149×109px375px基准)× 2 = 298×218rpx */
.float-mascot {
width: 298rpx;
height: 218rpx;
top: -5px;
right: -74rpx;
}
.float-check {
width: 194rpx;
height: 166rpx;
top: 20px;
right: 30rpx;
}
.float-close {
width: 194rpx;
height: 164rpx;
top: 20px;
right: 30rpx;
}
.float-target {
width: 194rpx;
height: 166rpx;
top: 20px;
right: 30rpx;
}
/* 弹窗卡片:overflow:visible 允许按钮溢出底部,背景通过 ota-bg-clip 独立裁剪 */
.ota-dialog {
position: relative;
width: 482rpx;
border-radius: 24rpx;
border: 2rpx solid #F9D5A1;
overflow: visible;
background-color: #392F1D;
}
/* 背景图裁剪层:独立 overflow:hidden + border-radius 保持圆角效果 */
.ota-bg-clip {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 24rpx;
overflow: hidden;
z-index: 0;
}
.ota-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ota-content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
/* 按钮以外内容均左对齐 */
align-items: flex-start;
}
.content-new {
padding: 30rpx 0 40rpx 0;
}
.content-result {
padding: 30rpx 0 66rpx 0;
}
/* 发现新版本内容 */
.new-ver-img {
width: 274rpx;
height: 62rpx;
/* 左边距 34rpx,去掉 margin-bottom */
margin-left: 34rpx;
}
/* 版本号胶囊容器:相对定位,使 ota-ver.png 作为背景衬底 */
.version-tag-wrap {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 116rpx;
height: 44rpx;
/* 离标题图 -10rpx,左边距 50rpx,离下方副标题 22rpx */
margin-top: -10rpx;
margin-left: 50rpx;
margin-bottom: 22rpx;
}
/* ota-ver.png 胶囊背景图 */
.version-tag-bg-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* 版本号文字:浮于背景图之上 */
.version-tag {
position: relative;
z-index: 1;
color: rgba(254, 222, 100, 1);
font-size: 24rpx;
padding: 8rpx 22rpx 4rpx 24rpx;
}
/* 副标题(如"新版本将优化智能弓体验"):左边距 44rpx,离下方文案 12rpx */
.desc-text {
font-weight: 500;
font-size: 26rpx;
color: #FFFFFF;
line-height: 36rpx;
text-align: left;
margin-left: 44rpx;
margin-bottom: 12rpx;
}
/* 详细说明文案(如“升级前请确保:...”):左边距 44rpx */
.changelog-text {
font-weight: 400;
font-size: 26rpx;
color: #FFFFFF;
line-height: 40rpx;
text-align: left;
margin-left: 44rpx;
margin-bottom: 0;
}
/* 按钮组(新版本状态):离上方文案 30rpx,内部按钮间距 24rpx */
.btn-group {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 30rpx;
gap: 24rpx;
}
/* 按钮组(结果状态):绝对定位,溢出卡片底边 -35rpx 悬浮在底边中间 */
.btn-group-result {
position: absolute;
bottom: -35rpx;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* 主按钮:按照设计规范 width: 232rpx, height: 70rpx */
.primary-btn {
width: 232rpx;
height: 70rpx;
background-color: #FED847;
border-radius: 44rpx;
display: flex;
align-items: center;
justify-content: center;
}
.primary-btn-text {
font-weight: 500;
font-size: 26rpx;
color: #000000;
line-height: 36rpx;
}
/* 暂不更新:设计规范颜色 #5FADFF 蓝色 */
.skip-text {
font-weight: 400;
font-size: 26rpx;
color: #5FADFF;
line-height: 36rpx;
}
/* 更新结果内容:图片左边距 34rpx,下边距 16rpx */
.result-title-img {
margin-left: 34rpx;
margin-bottom: 16rpx;
}
/* 结果页文案:左对齐,左边距 44rpx,与 new_version 保持一致 */
.dialog-desc {
font-weight: 400;
font-size: 26rpx;
color: #FFFFFF;
line-height: 40rpx;
text-align: left;
margin-left: 44rpx;
}
.progress-wrap {
width: 394rpx;
margin-top: 40rpx;
margin-left: 44rpx;
}
.progress-track {
width: 100%;
height: 18rpx;
background-color: rgba(255, 255, 255, 0.28);
border-radius: 999rpx;
overflow: hidden;
}
.progress-fill {
height: 100%;
background-color: #FED847;
border-radius: 999rpx;
}
/* 关闭按钮(位于弹窗下方) */
.ota-close-below {
margin-top: 40rpx;
display: flex;
justify-content: center;
}
</style>
+8 -33
View File
@@ -15,19 +15,6 @@ const props = defineProps({
}); });
const rowCount = new Array(6).fill(0); const rowCount = new Array(6).fill(0);
const getRingText = (arrow) => {
if (!arrow) return "-";
if (arrow.ringX && arrow.ring) return "X环";
return arrow.ring ? `${arrow.ring}` : "-";
};
const isMember = (player = {}) => player.vip === true || player.sVip === true;
const getMemberNicknameClass = (player = {}) => [
"member-nickname",
player.vip === true && player.sVip !== true ? "member-nickname--vip" : "",
player.sVip === true ? "member-nickname--svip" : "",
];
</script> </script>
<template> <template>
@@ -44,32 +31,27 @@ const getMemberNicknameClass = (player = {}) => [
mode="widthFix" mode="widthFix"
/> />
<image :src="player.avatar || '../static/user-icon.png'" mode="widthFix" /> <image :src="player.avatar || '../static/user-icon.png'" mode="widthFix" />
<view <text>{{ player.name }}</text>
v-if="isMember(player)"
:class="['player-score-name', ...getMemberNicknameClass(player)]"
>
<text class="member-nickname__text">{{ player.name }}</text>
<text v-if="player.sVip === true" class="member-nickname__shine">
{{ player.name }}
</text>
</view>
<text v-else>{{ player.name }}</text>
<view> <view>
<view> <view>
<view v-for="(_, index) in rowCount" :key="index"> <view v-for="(_, index) in rowCount" :key="index">
<text>{{ getRingText(scores[0]?.[index]) }}</text> <text>{{
scores[0] && scores[0][index] ? `${scores[0][index].ring}` : "-"
}}</text>
</view> </view>
</view> </view>
<view> <view>
<view v-for="(_, index) in rowCount" :key="index"> <view v-for="(_, index) in rowCount" :key="index">
<text>{{ getRingText(scores[1]?.[index]) }}</text> <text>{{
scores[1] && scores[1][index] ? `${scores[1][index].ring}` : "-"
}}</text>
</view> </view>
</view> </view>
</view> </view>
<text <text
>{{ >{{
scores scores
.map((s) => (s || []).reduce((last, next) => last + next.ring, 0)) .map((s) => s.reduce((last, next) => last + next.ring, 0))
.reduce((last, next) => last + next, 0) .reduce((last, next) => last + next, 0)
}}</text }}</text
> >
@@ -114,13 +96,6 @@ const getMemberNicknameClass = (player = {}) => [
text-overflow: ellipsis; text-overflow: ellipsis;
width: 20%; width: 20%;
} }
.player-score-name {
width: 20%;
}
.player-score-name .member-nickname__text,
.player-score-name .member-nickname__shine {
font-size: 14px;
}
.container > view:nth-child(4) { .container > view:nth-child(4) {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
+1 -24
View File
@@ -22,15 +22,6 @@ const props = defineProps({
const like = ref(props.data.ifLike); const like = ref(props.data.ifLike);
const likeCount = ref(props.data.likeTotal || 0); const likeCount = ref(props.data.likeTotal || 0);
const isMember = (data = {}) => data.vip === true || data.sVip === true;
const getMemberNicknameClass = (data = {}) => [
"point-rank-name",
"member-nickname",
data.vip === true && data.sVip !== true ? "member-nickname--vip" : "",
data.sVip === true ? "member-nickname--svip" : "",
];
watch( watch(
() => props.data, () => props.data,
(newVal) => { (newVal) => {
@@ -62,13 +53,7 @@ const onClick = async () => {
<view> <view>
<Avatar :src="data.avatar || '../static/user-icon.png'" :size="36" /> <Avatar :src="data.avatar || '../static/user-icon.png'" :size="36" />
<view> <view>
<view v-if="isMember(data)" :class="getMemberNicknameClass(data)"> <text class="truncate">{{ data.name }}</text>
<text class="member-nickname__text">{{ data.name }}</text>
<text v-if="data.sVip === true" class="member-nickname__shine">
{{ data.name }}
</text>
</view>
<text v-else class="truncate">{{ data.name }}</text>
<view> <view>
<text>{{ data.totalDay }}</text> <text>{{ data.totalDay }}</text>
<view /> <view />
@@ -133,14 +118,6 @@ const onClick = async () => {
color: #333333; color: #333333;
margin-bottom: 5rpx; margin-bottom: 5rpx;
} }
.rank-item > view:nth-child(2) > view:last-child > .point-rank-name {
width: 200rpx;
margin-bottom: 5rpx;
}
.point-rank-name .member-nickname__text,
.point-rank-name .member-nickname__shine {
font-size: 28rpx;
}
.rank-item > view:nth-child(2) > view:last-child > view { .rank-item > view:nth-child(2) > view:last-child > view {
display: flex; display: flex;
align-items: center; align-items: center;
+2 -8
View File
@@ -70,11 +70,6 @@ const arrows = computed(() => {
}); });
const validArrows = computed(() => arrows.value.filter((a) => !!a.ring).length); const validArrows = computed(() => arrows.value.filter((a) => !!a.ring).length);
const isMember = computed(() => user.value.vip === true || user.value.sVip === true);
const openCoachComment = () => {
if (!isMember.value) return;
showComment.value = true;
};
</script> </script>
<template> <template>
@@ -117,10 +112,9 @@ const openCoachComment = () => {
:onClick="onClickShare" :onClick="onClickShare"
/> />
<IconButton <IconButton
v-if="isMember"
name="教练点评" name="教练点评"
src="../static/review.png" src="../static/review.png"
:onClick="openCoachComment" :onClick="() => (showComment = true)"
/> />
</block> </block>
<SButton <SButton
@@ -143,7 +137,7 @@ const openCoachComment = () => {
}}</text }}</text
>环的成绩所有箭支上靶后的平均点间距为<text >环的成绩所有箭支上靶后的平均点间距为<text
:style="{ color: '#fed847' }" :style="{ color: '#fed847' }"
>{{ Number((result?.interpretation?.spreadStability || 0).toFixed(2)) }}</text >{{ Number((result.average_distance || 0).toFixed(2)) }}</text
>{{ >{{
result.spreadEvaluation === "Dispersed" result.spreadEvaluation === "Dispersed"
? "还需要持续改进哦~" ? "还需要持续改进哦~"
+1 -6
View File
@@ -38,10 +38,6 @@ const props = defineProps({
type: Boolean, type: Boolean,
default: false, default: false,
}, },
halfRest: {
type: Boolean,
default: false,
},
onStop: { onStop: {
type: Function, type: Function,
default: () => {}, default: () => {},
@@ -140,9 +136,8 @@ const updateSound = () => {
async function onReceiveMessage(msg) { async function onReceiveMessage(msg) {
if (Array.isArray(msg)) return; if (Array.isArray(msg)) return;
if (msg.type === MESSAGETYPESV2.BattleStart) { if (msg.type === MESSAGETYPESV2.BattleStart) {
const audioKey = props.melee && (halfTime.value || props.halfRest) ? "下半场开始" : "比赛开始";
halfTime.value = false; halfTime.value = false;
audioManager.play(audioKey); audioManager.play("比赛开始");
} else if (msg.type === MESSAGETYPESV2.BattleEnd) { } else if (msg.type === MESSAGETYPESV2.BattleEnd) {
audioManager.play("比赛结束", false); audioManager.play("比赛结束", false);
} else if (msg.type === MESSAGETYPESV2.ShootResult) { } else if (msg.type === MESSAGETYPESV2.ShootResult) {
+13 -28
View File
@@ -1,5 +1,5 @@
<script setup> <script setup>
import { ref, watch } from "vue"; import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app"; import { onShow } from "@dcloudio/uni-app";
import SModal from "@/components/SModal.vue"; import SModal from "@/components/SModal.vue";
import Avatar from "@/components/Avatar.vue"; import Avatar from "@/components/Avatar.vue";
@@ -11,13 +11,12 @@ import {
loginAPI, loginAPI,
getHomeData, getHomeData,
getPhoneNumberAPI, getPhoneNumberAPI,
getPhoneNumberAPIv2,
getDeviceBatteryAPI, getDeviceBatteryAPI,
} from "@/apis"; } from "@/apis";
import useStore from "@/store"; import useStore from "@/store";
const store = useStore(); const store = useStore();
const { updateUser, updateDevice, updateOnline, clearDevice } = store; const { updateUser, updateDevice, updateOnline } = store;
const props = defineProps({ const props = defineProps({
show: { show: {
@@ -44,12 +43,12 @@ const handleAgree = () => {
async function getphonenumber(e) { async function getphonenumber(e) {
if (e.detail.code) { if (e.detail.code) {
// const wxResult = await wxLogin(); const wxResult = await wxLogin();
const result = await getPhoneNumberAPIv2({ const result = await getPhoneNumberAPI({
// ...e.detail, ...e.detail,
code: e.detail.code, code: wxResult.code,
}); });
if (result.purePhoneNumber) phone.value = result.purePhoneNumber; if (result.phone) phone.value = result.phone;
} }
} }
@@ -61,21 +60,6 @@ function onNicknameChange(e) {
nickName.value = e.detail.value; nickName.value = e.detail.value;
} }
const resetForm = () => {
loading.value = false;
agree.value = false;
phone.value = "";
avatarUrl.value = "";
nickName.value = "";
};
watch(
() => props.show,
(show) => {
if (show) resetForm();
}
);
const handleLogin = async () => { const handleLogin = async () => {
if (loading.value) return; if (loading.value) return;
if (!phone.value) { if (!phone.value) {
@@ -123,8 +107,6 @@ async function doLogin() {
); );
const data = await getDeviceBatteryAPI(); const data = await getDeviceBatteryAPI();
updateOnline(data.online); updateOnline(data.online);
} else {
clearDevice();
} }
props.onClose(); props.onClose();
} catch (error) { } catch (error) {
@@ -155,7 +137,11 @@ const openPrivacyLink = () => {
}; };
onShow(() => { onShow(() => {
resetForm(); loading.value = false;
agree.value = false;
phone.value = "";
avatarUrl.value = "";
nickName.value = "";
}); });
</script> </script>
@@ -201,11 +187,10 @@ onShow(() => {
<text :style="{ color: noBg ? '#666' : '#fff' }">昵称:</text> <text :style="{ color: noBg ? '#666' : '#fff' }">昵称:</text>
<input <input
type="nickname" type="nickname"
:value="nickName"
placeholder="请输入昵称" placeholder="请输入昵称"
:placeholder-style="`color: ${noBg ? '#666' : '#fff9'} `" :placeholder-style="`color: ${noBg ? '#666' : '#fff9'} `"
@input="onNicknameChange"
@change="onNicknameChange" @change="onNicknameChange"
@blur="onNicknameBlur"
:style="{ color: noBg ? '#333' : '#fff' }" :style="{ color: noBg ? '#333' : '#fff' }"
/> />
</view> </view>
+6 -20
View File
@@ -19,8 +19,6 @@ const nextLvlPoints = ref(0);
const containerWidth = computed(() => const containerWidth = computed(() =>
props.showRank ? "72%" : "calc(100% - 15px)" props.showRank ? "72%" : "calc(100% - 15px)"
); );
const isSVip = computed(() => user.value.sVip === true);
const isVip = computed(() => user.value.vip === true && !isSVip.value);
const toUserPage = () => { const toUserPage = () => {
// 获取当前页面路径 // 获取当前页面路径
const pages = getCurrentPages(); const pages = getCurrentPages();
@@ -71,18 +69,7 @@ watch(
/> />
<view class="user-details" @click="toUserPage"> <view class="user-details" @click="toUserPage">
<view class="user-name"> <view class="user-name">
<view <text>{{ user.nickName }}</text>
:class="[
'member-nickname',
isVip ? 'member-nickname--vip' : '',
isSVip ? 'member-nickname--svip' : '',
]"
>
<text class="member-nickname__text">{{ user.nickName }}</text>
<text v-if="isSVip" class="member-nickname__shine">{{
user.nickName
}}</text>
</view>
<image <image
class="user-name-image" class="user-name-image"
src="../static/vip1.png" src="../static/vip1.png"
@@ -161,13 +148,12 @@ watch(
margin-bottom: 5px; margin-bottom: 5px;
} }
.user-name .member-nickname { .user-name > text:first-child {
max-width: 180rpx;
}
.user-name .member-nickname__text,
.user-name .member-nickname__shine {
font-size: 13px; font-size: 13px;
max-width: 180rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.user-name-image { .user-name-image {
+1 -5
View File
@@ -64,11 +64,7 @@
"usingComponents" : true, "usingComponents" : true,
"darkmode" : true, "darkmode" : true,
"themeLocation" : "theme.json", "themeLocation" : "theme.json",
"permission" : { "permission" : {},
"scope.userLocation": {
"desc": "用于扫描附近 WiFi,完成设备 OTA 升级网络连接"
}
},
"requiredPrivateInfos" : [ "getLocation", "chooseLocation" ] "requiredPrivateInfos" : [ "getLocation", "chooseLocation" ]
} }
} }
+104
View File
@@ -0,0 +1,104 @@
// 首页一周打卡展示数据,直接对应顶部 7 个日期卡片。
export const trainingHomeWeekSchedule = [
{
key: "mon",
label: "周一",
status: "done",
icon: "../../static/training-home/done.png",
},
{
key: "tue",
label: "周二",
status: "done",
icon: "../../static/training-home/done.png",
},
{
key: "wed",
label: "周三",
status: "missed",
icon: "../../static/training-home/missed.png",
},
{
key: "thu",
label: "周四",
status: "missed",
icon: "../../static/training-home/missed.png",
},
{
key: "fri",
label: "周五",
status: "done",
icon: "../../static/training-home/done.png",
},
{
key: "sat",
label: "周六",
status: "done",
icon: "../../static/training-home/done.png",
},
{
key: "sun",
label: "周日",
status: "missed",
icon: "../../static/training-home/missed.png",
},
];
// 首页统计卡数据,按设计稿从左到右展示。
export const trainingHomeStats = [
{ key: "days", value: "12", unit: "天", label: "共训练" },
{ key: "shots", value: "112", unit: "支", label: "累计射箭" },
{ key: "hitRate", value: "30", unit: "%", label: "命中率" },
{ key: "endurance", value: "6", unit: "支/分钟", label: "耐力射击" },
{ key: "calories", value: "31W", unit: "卡路里", label: "共消耗" },
];
// 雷达图区文案与数值配置。
export const trainingHomeRadar = {
labels: ["基础", "精准", "力量", "节奏", "耐力"],
values: [5.5, 6.3, 10, 4.5, 6],
maxValue: 10,
surpassValue: '80%'
};
// 首页主推荐训练卡数据。
export const trainingHomeFeatured = {
title: "基础训练",
progressText: "当前进度 LV7 >",
};
// 首页四个训练入口卡片数据。
export const trainingHomeModes = [
{
key: "endurance",
title: "耐力训练",
progressText: "当前进度 LV5 >",
icon: "../../static/training-home/img_3.png",
recommended: true,
disabled: false,
},
{
key: "precision",
title: "精准训练",
progressText: "当前进度 LV3 >",
icon: "../../static/training-home/img_4.png",
recommended: false,
disabled: false,
},
{
key: "rhythm",
title: "节奏训练",
progressText: "当前进度 LV6 >",
icon: "../../static/training-home/img_5.png",
recommended: false,
disabled: false,
},
{
key: "power",
title: "力量训练",
progressText: "Coming! LV10",
icon: "../../static/training-home/img_6.png",
recommended: false,
disabled: true,
},
];
+113
View File
@@ -0,0 +1,113 @@
// 难度页当前用于保存“开始训练前上下文”的本地存储 key。
export const trainingDifficultyStorageKey = "training-selection";
// 当前是页面联调用的模拟数据:
// 1. 总难度 20 级
// 2. 已解锁到 Lv3
// 3. 前三关展示不同完成进度
const totalDifficultyLevel = 20;
const mockedUnlockedDifficultyId = "lv3";
const mockedDifficultyProgressMap = {
lv1: 100,
lv2: 90,
lv3: 70,
};
const modeList = [
{
key: "endurance",
title: "耐力训练",
},
{
key: "precision",
title: "精准训练",
},
{
key: "rhythm",
title: "节奏训练",
},
{
key: "basic",
title: "基础训练",
},
{
key: "power",
title: "力量训练",
},
{
key: "focus",
title: "专注训练",
},
];
const createDifficultyId = (level) => `lv${level}`;
const createDifficultyLabel = (level) => `Lv${level}`;
// 根据等级生成模拟文案,方便一次性扩展到更多关卡。
const createDifficultySummary = (level) => {
return [
`箭靶划分为${Math.min(1 + Math.floor((level - 1) / 5), 4)}个区域`,
`${4 + level}次命中目标`,
`${100 + Math.floor((level - 1) / 2) * 10}秒内完成所有射击`,
"需使用20CM全环靶",
];
};
// 难度页的节点位置已经在页面内统一计算,
// 这里保留最核心的 id / label 即可,不再维护无效的 left / top / style 字段。
const createDifficultyNode = (level) => {
return {
id: createDifficultyId(level),
label: createDifficultyLabel(level),
};
};
const createDifficultyDetail = (level) => {
const id = createDifficultyId(level);
const label = createDifficultyLabel(level);
return {
id,
label,
title: `${label}难度`,
summary: createDifficultySummary(level),
startText: "开始",
targetPaperType: "20CM全环靶",
};
};
// 所有训练模式当前共用同一套难度定义。
const sharedDifficultyNodes = Array.from(
{ length: totalDifficultyLevel },
(_, index) => createDifficultyNode(index + 1)
);
const sharedDifficultyDetails = Object.fromEntries(
Array.from({ length: totalDifficultyLevel }, (_, index) => {
const detail = createDifficultyDetail(index + 1);
return [detail.id, detail];
})
);
const createModeConfig = ({ key, title, reward = null }) => {
return {
key,
title,
nodes: sharedDifficultyNodes,
details: sharedDifficultyDetails,
activeDifficultyId: mockedUnlockedDifficultyId,
progressMap: mockedDifficultyProgressMap,
reward,
};
};
// 难度页数据源入口:
// 页面通过 getTrainingDifficultyModeConfig(modeKey) 获取当前模式完整配置。
export const trainingDifficultyModeMap = Object.fromEntries(
modeList.map((mode) => [mode.key, createModeConfig(mode)])
);
export const getTrainingDifficultyModeConfig = (modeKey) => {
return trainingDifficultyModeMap[modeKey] || trainingDifficultyModeMap.precision;
};
+11 -14
View File
@@ -70,19 +70,13 @@
"path": "pages/user" "path": "pages/user"
}, },
{ {
"path": "pages/member/orders" "path": "pages/orders"
}, },
{ {
"path": "pages/member/order-detail" "path": "pages/order-detail"
}, },
{ {
"path": "pages/member/be-vip" "path": "pages/be-vip"
},
{
"path": "pages/member/vip-intro"
},
{
"path": "pages/member/agreement"
}, },
{ {
"path": "pages/grade-intro" "path": "pages/grade-intro"
@@ -118,7 +112,7 @@
"path": "pages/match-detail" "path": "pages/match-detail"
}, },
{ {
"path": "pages/team-battle/team-bow-data" "path": "pages/team-bow-data"
}, },
{ {
"path": "pages/melee-bow-data" "path": "pages/melee-bow-data"
@@ -127,10 +121,13 @@
"path": "pages/mine-bow-data" "path": "pages/mine-bow-data"
}, },
{ {
"path": "pages/ota-wifi", "path": "pages/training/difficulty"
"style": { },
"navigationStyle": "custom" {
} "path": "pages/training/index"
},
{
"path": "pages/training/practise-one"
} }
], ],
"globalStyle": { "globalStyle": {
-30
View File
@@ -7,7 +7,6 @@ import GuideTwo from "@/components/GuideTwo.vue";
import SButton from "@/components/SButton.vue"; import SButton from "@/components/SButton.vue";
import Avatar from "@/components/Avatar.vue"; import Avatar from "@/components/Avatar.vue";
import ScreenHint from "@/components/ScreenHint.vue"; import ScreenHint from "@/components/ScreenHint.vue";
import ModalDialog from "@/components/ModalDialog.vue";
import { import {
getRoomAPI, getRoomAPI,
exitRoomAPI, exitRoomAPI,
@@ -15,7 +14,6 @@ import {
getReadyAPI, getReadyAPI,
kickPlayerAPI, kickPlayerAPI,
} from "@/apis"; } from "@/apis";
import { isLimitError } from "@/util";
import { MESSAGETYPES, MESSAGETYPESV2 } from "@/constants"; import { MESSAGETYPES, MESSAGETYPESV2 } from "@/constants";
import useStore from "@/store"; import useStore from "@/store";
import { storeToRefs } from "pinia"; import { storeToRefs } from "pinia";
@@ -58,7 +56,6 @@ const ready = ref(false);
const allReady = ref(false); const allReady = ref(false);
const timer = ref(null); const timer = ref(null);
const goBattle = ref(false); const goBattle = ref(false);
const showLimitModal = ref(false);
/** 从结算页返回时为 true,跳过进场靶纸语音 */ /** 从结算页返回时为 true,跳过进场靶纸语音 */
const skipTargetAudio = ref(false); const skipTargetAudio = ref(false);
@@ -140,26 +137,7 @@ async function refreshRoomData() {
} }
const getReady = async () => { const getReady = async () => {
try {
await getReadyAPI(roomNumber.value); await getReadyAPI(roomNumber.value);
} catch (error) {
if (isLimitError(error)) {
showLimitModal.value = true;
return;
}
console.log("room ready error", error);
}
};
const closeLimitModal = () => {
showLimitModal.value = false;
};
const goVipPage = () => {
showLimitModal.value = false;
uni.navigateTo({
url: "/pages/member/be-vip",
});
}; };
const refreshMembers = (members = []) => { const refreshMembers = (members = []) => {
@@ -478,14 +456,6 @@ onBeforeUnmount(() => {
</view> </view>
</view> </view>
</Container> </Container>
<ModalDialog
:show="showLimitModal"
:content="'今日约战次数已经用完\n开通会员可增加次数'"
cancelText="知道了"
confirmText="去开通"
:onCancel="closeLimitModal"
:onConfirm="goVipPage"
/>
<!-- 踢出玩家二次确认弹窗不传 onClose屏蔽 X 关闭按钮 --> <!-- 踢出玩家二次确认弹窗不传 onClose屏蔽 X 关闭按钮 -->
<ScreenHint :show="showKickConfirm"> <ScreenHint :show="showKickConfirm">
<view class="kick-confirm"> <view class="kick-confirm">
+258
View File
@@ -0,0 +1,258 @@
<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import Container from "@/components/Container.vue";
import Avatar from "@/components/Avatar.vue";
import SButton from "@/components/SButton.vue";
import Signin from "@/components/Signin.vue";
import UserHeader from "@/components/UserHeader.vue";
import { createOrderAPI, getHomeData, getVIPDescAPI } from "@/apis";
import { formatTimestamp } from "@/util";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user, config } = storeToRefs(store);
const { updateUser } = store;
const selectedVIP = ref(0);
const showModal = ref(false);
const lastDate = ref(user.value.expiredAt);
const refreshing = ref(false);
const timer = ref(null);
const richContent = ref("");
const onPay = async () => {
if (!user.value.id) {
showModal.value = true;
} else if (config.value.vipMenus[selectedVIP.value]) {
if (config.value.vipMenus[selectedVIP.value].id) {
const result = await createOrderAPI(
config.value.vipMenus[selectedVIP.value].id
);
if (!result.pay) return;
const params = result.pay.order.jsApi.params;
if (params) {
wx.requestPayment({
timeStamp: params.timeStamp, // 时间戳
nonceStr: params.nonceStr, // 随机字符串
package: params.package, // 统一下单接口返回的 prepay_id 参数值,格式:prepay_id=***
paySign: params.paySign, // 签名
signType: "RSA", // 签名类型,默认为RSA
async success(res) {
uni.showToast({
title: "支付成功",
icon: "none",
});
timer.value = setInterval(async () => {
refreshing.value = true;
const result = await getHomeData();
if (result.user.expiredAt > lastDate.value) {
refreshing.value = false;
if (result.user) updateUser(result.user);
clearInterval(timer.value);
}
}, 1000);
},
fail(res) {
console.log("pay error", res);
},
});
}
}
}
};
onMounted(async () => {
const result = await getVIPDescAPI();
richContent.value = result.describe;
});
const toOrderPage = () => {
uni.navigateTo({
url: "/pages/orders",
});
};
onBeforeUnmount(() => {
if (timer.value) clearInterval(timer.value);
});
</script>
<template>
<Container title="会员说明">
<view v-if="user.id" class="header">
<view>
<Avatar :src="user.avatar" :size="35" />
<text class="truncate">{{ user.nickName }}</text>
<image
class="user-name-image"
src="../static/vip1.png"
mode="widthFix"
/>
</view>
<block v-if="refreshing">
<image
src="../static/btn-loading.png"
mode="widthFix"
class="loading"
/>
</block>
<block v-else>
<text v-if="user.expiredAt">
{{ formatTimestamp(user.expiredAt) }} 到期
</text>
</block>
</view>
<view
class="container"
:style="{ height: !user.id ? 'calc(100% - 10px)' : 'calc(100% - 62px)' }"
>
<view class="content vip-content">
<view class="title-bar">
<view />
<text>VIP 介绍</text>
</view>
<view :style="{ marginTop: '10rpx' }">
<rich-text :nodes="richContent" />
</view>
</view>
<view class="content">
<view class="title-bar">
<view />
<text>会员续费</text>
</view>
<view class="vip-items">
<view
v-for="(item, index) in config.vipMenus || []"
:key="index"
:style="{
color: selectedVIP === index ? '#fff' : '#333333',
borderColor: selectedVIP === index ? '#FF7D57' : '#eee',
background:
selectedVIP === index
? '#FF7D57'
: 'linear-gradient(180deg, #fbfbfb 0%, #f5f5f5 100%)',
}"
@click="() => (selectedVIP = index)"
>
{{ item.name }}
</view>
</view>
</view>
<SButton :onClick="onPay">支付</SButton>
<view class="my-orders" v-if="user.id">
<view @click="toOrderPage">
<text>我的订单</text>
<image src="../static/enter-arrow-blue.png" mode="widthFix" />
</view>
</view>
<Signin :show="showModal" :onClose="() => (showModal = false)" />
</view>
</Container>
</template>
<style scoped>
.header {
width: calc(100% - 30px);
display: flex;
align-items: center;
justify-content: space-between;
color: #fff;
padding: 15px;
padding-top: 0;
font-size: 14px;
}
.header > view {
display: flex;
align-items: center;
}
.header > view > text {
margin-left: 10px;
max-width: 120px;
text-align: left;
}
.header > view > image {
margin-left: 5px;
width: 20px;
}
.header > text:nth-child(2) {
color: #fed847;
}
.container {
width: 100%;
background-color: #f5f5f5;
padding-top: 10px;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
padding: 15px;
margin-bottom: 10px;
}
.title-bar {
width: 100%;
display: flex;
align-items: center;
color: #000;
}
.title-bar > view:first-child {
width: 5px;
height: 15px;
border-radius: 10px;
background-color: #fed847;
margin-right: 10px;
}
.content > view:nth-child(2) {
font-size: 14px;
color: #333;
}
.vip-items {
width: 100%;
display: grid;
grid-template-columns: repeat(4, 23.5%);
padding: 10px;
row-gap: 5%;
column-gap: 2%;
}
.vip-items > view {
border: 1px solid #eee;
padding: 12px 0;
border-radius: 10px;
text-align: center;
font-size: 27rpx;
}
.vip-content {
max-height: 62%;
}
.vip-content > view:nth-child(2) {
overflow: auto;
}
.vip-content > view:nth-child(2)::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.my-orders {
display: flex;
justify-content: center;
color: #39a8ff;
margin-top: 10px;
font-size: 13px;
}
.my-orders > view {
display: flex;
align-items: center;
}
.my-orders > view > image {
width: 15px;
}
.loading {
width: 20px;
height: 20px;
margin-left: 10px;
transition: all 0.3s ease;
background-blend-mode: darken;
animation: rotate 2s linear infinite;
}
</style>
-17
View File
@@ -29,7 +29,6 @@ import { storeToRefs } from "pinia";
const store = useStore(); const store = useStore();
const { user } = storeToRefs(store); const { user } = storeToRefs(store);
const scores = ref([]); const scores = ref([]);
const isSvip = ref(false);
const step = ref(0); const step = ref(0);
const total = 12; const total = 12;
const stepButtonTexts = [ const stepButtonTexts = [
@@ -49,7 +48,6 @@ const practiseId = ref("");
const showGuide = ref(false); const showGuide = ref(false);
const laserActive = ref(false); const laserActive = ref(false);
const guideSwiperIndex = ref(0); const guideSwiperIndex = ref(0);
const sharing = ref(false);
const guideImages = [ const guideImages = [
"https://static.shelingxingqiu.com/shootmini/static/target.png", "https://static.shelingxingqiu.com/shootmini/static/target.png",
@@ -115,7 +113,6 @@ const onOver = async () => {
async function onReceiveMessage(msg) { async function onReceiveMessage(msg) {
if (msg.type === MESSAGETYPESV2.ShootResult) { if (msg.type === MESSAGETYPESV2.ShootResult) {
isSvip.value = msg.sVip === true;
scores.value = msg.details; scores.value = msg.details;
} else if (msg.type === MESSAGETYPESV2.BattleEnd) { } else if (msg.type === MESSAGETYPESV2.BattleEnd) {
setTimeout(onOver, 1500); setTimeout(onOver, 1500);
@@ -142,19 +139,8 @@ async function onReceiveMessage(msg) {
} }
const onClickShare = debounce(async () => { const onClickShare = debounce(async () => {
if (sharing.value) return;
sharing.value = true;
try {
await sharePractiseData("shareCanvas", 1, user.value, practiseResult.value); await sharePractiseData("shareCanvas", 1, user.value, practiseResult.value);
await wxShare("shareCanvas"); await wxShare("shareCanvas");
} catch (e) {
uni.showToast({
title: "海报生成失败,请稍后重试",
icon: "none",
});
} finally {
sharing.value = false;
}
}); });
onMounted(() => { onMounted(() => {
@@ -206,7 +192,6 @@ const nextStep = async () => {
title.value = "小试牛刀"; title.value = "小试牛刀";
await startPractiseAPI(); await startPractiseAPI();
scores.value = []; scores.value = [];
isSvip.value = false;
step.value = 5; step.value = 5;
start.value = true; start.value = true;
setTimeout(() => { setTimeout(() => {
@@ -233,7 +218,6 @@ const onClose = async () => {
practiseResult.value = {}; practiseResult.value = {};
start.value = false; start.value = false;
scores.value = []; scores.value = [];
isSvip.value = false;
step.value = 4; step.value = 4;
const result = await createPractiseAPI(total, 120); const result = await createPractiseAPI(total, 120);
if (result) practiseId.value = result.id; if (result) practiseId.value = result.id;
@@ -347,7 +331,6 @@ const onClose = async () => {
:currentRound="step === 5 ? scores.length : 0" :currentRound="step === 5 ? scores.length : 0"
:totalRound="step === 5 ? total : 0" :totalRound="step === 5 ? total : 0"
:scores="scores" :scores="scores"
:isSvip="isSvip"
/> />
<ScorePanel <ScorePanel
v-if="step === 5" v-if="step === 5"
+5 -76
View File
@@ -92,14 +92,6 @@ const mvpTeam = computed(() => {
return blueTeamPlayers.value.some((p) => p.id === mvpPlayer.value.id) ? 1 : 2; return blueTeamPlayers.value.some((p) => p.id === mvpPlayer.value.id) ? 1 : 2;
}); });
const isMember = (player = {}) => player.vip === true || player.sVip === true;
const getMemberNicknameClass = (player = {}) => [
"member-nickname",
player.vip === true && player.sVip !== true ? "member-nickname--vip" : "",
player.sVip === true ? "member-nickname--svip" : "",
];
/** /**
* 激励语图片 URL(在 onLoad 中确定 ifWin 后赋值,避免 Math.random 放在 computed 里产生缓存不一致问题) * 激励语图片 URL(在 onLoad 中确定 ifWin 后赋值,避免 Math.random 放在 computed 里产生缓存不一致问题)
*/ */
@@ -136,8 +128,6 @@ const meleeRankList = computed(() => {
id: p.id, id: p.id,
avatar: p.avatar || "", avatar: p.avatar || "",
name: p.name || "", name: p.name || "",
vip: p.vip,
sVip: p.sVip,
// rank_lvl 字段可能缺失,缺失时显示空字符串,避免 getLvlName(undefined) 返回错误段位名 // rank_lvl 字段可能缺失,缺失时显示空字符串,避免 getLvlName(undefined) 返回错误段位名
lvlName: p.rank_lvl != null ? getLvlName(p.rank_lvl) : "", lvlName: p.rank_lvl != null ? getLvlName(p.rank_lvl) : "",
totalRing: resultItem.totalRing ?? 0, totalRing: resultItem.totalRing ?? 0,
@@ -315,7 +305,7 @@ function goBack() {
<Container <Container
:bgType="data.mode > 3 ? -1 : 0" :bgType="data.mode > 3 ? -1 : 0"
bgColor="#000000" bgColor="#000000"
:onBack="exit" :onBack="goBack"
> >
<!-- ----- Banner game 胜负展示图 NvN 对抗模式----- --> <!-- ----- Banner game 胜负展示图 NvN 对抗模式----- -->
@@ -342,20 +332,7 @@ function goBack() {
<view class="team-players team-players-blue"> <view class="team-players team-players-blue">
<view v-for="p in blueTeamPlayers" :key="p.id" class="player-item"> <view v-for="p in blueTeamPlayers" :key="p.id" class="player-item">
<Avatar :src="p.avatar" :size="34" borderColor="#8FB4FD" /> <Avatar :src="p.avatar" :size="34" borderColor="#8FB4FD" />
<view <text class="player-name player-name-blue">{{ p.name }}</text>
v-if="isMember(p)"
:class="[
'player-name',
'player-name-blue',
...getMemberNicknameClass(p),
]"
>
<text class="member-nickname__text">{{ p.name }}</text>
<text v-if="p.sVip === true" class="member-nickname__shine">
{{ p.name }}
</text>
</view>
<text v-else class="player-name player-name-blue">{{ p.name }}</text>
</view> </view>
</view> </view>
@@ -363,20 +340,7 @@ function goBack() {
<view class="team-players team-players-red"> <view class="team-players team-players-red">
<view v-for="p in redTeamPlayers" :key="p.id" class="player-item"> <view v-for="p in redTeamPlayers" :key="p.id" class="player-item">
<Avatar :src="p.avatar" :size="34" borderColor="#E67470" /> <Avatar :src="p.avatar" :size="34" borderColor="#E67470" />
<view <text class="player-name player-name-red">{{ p.name }}</text>
v-if="isMember(p)"
:class="[
'player-name',
'player-name-red',
...getMemberNicknameClass(p),
]"
>
<text class="member-nickname__text">{{ p.name }}</text>
<text v-if="p.sVip === true" class="member-nickname__shine">
{{ p.name }}
</text>
</view>
<text v-else class="player-name player-name-red">{{ p.name }}</text>
</view> </view>
</view> </view>
</view> </view>
@@ -421,16 +385,7 @@ function goBack() {
:size="53" :size="53"
:borderColor="mvpTeam === 1 ? '#5FADFF' : '#FF6060'" :borderColor="mvpTeam === 1 ? '#5FADFF' : '#FF6060'"
/> />
<view <text class="mvp-name">{{ mvpPlayer.name }}</text>
v-if="isMember(mvpPlayer)"
:class="['mvp-name', ...getMemberNicknameClass(mvpPlayer)]"
>
<text class="member-nickname__text">{{ mvpPlayer.name }}</text>
<text v-if="mvpPlayer.sVip === true" class="member-nickname__shine">
{{ mvpPlayer.name }}
</text>
</view>
<text v-else class="mvp-name">{{ mvpPlayer.name }}</text>
</view> </view>
</view> </view>
@@ -478,16 +433,7 @@ function goBack() {
<!-- 昵称 + 段位 --> <!-- 昵称 + 段位 -->
<view class="rank-player-info"> <view class="rank-player-info">
<view <text class="rank-player-name">{{ item.name }}</text>
v-if="isMember(item)"
:class="['rank-player-name', ...getMemberNicknameClass(item)]"
>
<text class="member-nickname__text">{{ item.name }}</text>
<text v-if="item.sVip === true" class="member-nickname__shine">
{{ item.name }}
</text>
</view>
<text v-else class="rank-player-name">{{ item.name }}</text>
<text class="rank-player-lvl">{{ item.lvlName }}</text> <text class="rank-player-lvl">{{ item.lvlName }}</text>
</view> </view>
@@ -667,12 +613,6 @@ function goBack() {
white-space: nowrap; white-space: nowrap;
} }
.player-name .member-nickname__text,
.player-name .member-nickname__shine {
font-size: 22rpx;
font-weight: 400;
}
/* ---- 得分行 ---- */ /* ---- 得分行 ---- */
.vs-scores-row { .vs-scores-row {
position: relative; position: relative;
@@ -812,11 +752,6 @@ function goBack() {
white-space: nowrap; white-space: nowrap;
} }
.mvp-name .member-nickname__text,
.mvp-name .member-nickname__shine {
font-size: 24rpx;
}
/* ============================ /* ============================
查看完整成绩链接 查看完整成绩链接
============================ */ ============================ */
@@ -1137,12 +1072,6 @@ function goBack() {
white-space: nowrap; white-space: nowrap;
} }
.rank-player-name .member-nickname__text,
.rank-player-name .member-nickname__shine {
font-size: 28rpx;
font-weight: 500;
}
.rank-player-lvl { .rank-player-lvl {
font-size: 22rpx; font-size: 22rpx;
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
+9 -81
View File
@@ -1,5 +1,5 @@
<script setup> <script setup>
import { computed, ref } from "vue"; import { ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app"; import { onLoad, onShow } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue"; import Container from "@/components/Container.vue";
import GuideTwo from "@/components/GuideTwo.vue"; import GuideTwo from "@/components/GuideTwo.vue";
@@ -8,16 +8,14 @@ import SModal from "@/components/SModal.vue";
import Signin from "@/components/Signin.vue"; import Signin from "@/components/Signin.vue";
import CreateRoom from "@/components/CreateRoom.vue"; import CreateRoom from "@/components/CreateRoom.vue";
import Avatar from "@/components/Avatar.vue"; import Avatar from "@/components/Avatar.vue";
import ModalDialog from "@/components/ModalDialog.vue";
import { getRoomAPI, joinRoomAPI, getBattleDataAPI, getDailyCountAPI } from "@/apis"; import { getRoomAPI, joinRoomAPI, getBattleDataAPI } from "@/apis";
import { debounce, canEenter, getLimitCountText, isLimitReached } from "@/util"; import { debounce, canEenter } from "@/util";
import useStore from "@/store"; import useStore from "@/store";
import { storeToRefs } from "pinia"; import { storeToRefs } from "pinia";
const store = useStore(); const store = useStore();
const { user, device, online, game, dailyCount } = storeToRefs(store); const { user, device, online, game } = storeToRefs(store);
const { updateDailyCount } = store;
const showModal = ref(false); const showModal = ref(false);
const showSignin = ref(false); const showSignin = ref(false);
@@ -26,12 +24,6 @@ const roomNumber = ref("");
const data = ref({}); const data = ref({});
const roomID = ref(""); const roomID = ref("");
const loading = ref(false); const loading = ref(false);
const showLimitModal = ref(false);
const isSVip = computed(() => user.value.sVip === true);
const isVip = computed(() => user.value.vip === true && !isSVip.value);
const challengeLimitText = computed(() =>
getLimitCountText("约战", dailyCount.value.challenge)
);
const enterRoom = debounce(async (number) => { const enterRoom = debounce(async (number) => {
if (loading.value) return; if (loading.value) return;
@@ -73,37 +65,9 @@ const enterRoom = debounce(async (number) => {
}); });
const onCreateRoom = async () => { const onCreateRoom = async () => {
if (!canEenter(user.value, device.value, online.value)) return; if (!canEenter(user.value, device.value, online.value)) return;
const countData = await loadDailyCount();
if (isLimitReached(countData.challenge)) {
showLimitModal.value = true;
return;
}
warnning.value = ""; warnning.value = "";
showModal.value = true; showModal.value = true;
}; };
const closeLimitModal = () => {
showLimitModal.value = false;
};
const goVipPage = () => {
showLimitModal.value = false;
uni.navigateTo({
url: "/pages/member/be-vip",
});
};
const loadDailyCount = async () => {
if (!user.value.id) return dailyCount.value;
try {
const result = await getDailyCountAPI();
updateDailyCount(result);
return result || dailyCount.value;
} catch (error) {
console.log("load daily count error", error);
return dailyCount.value;
}
};
const onSignin = () => { const onSignin = () => {
if (roomID.value && user.value.id) enterRoom(roomID.value); if (roomID.value && user.value.id) enterRoom(roomID.value);
showSignin.value = false; showSignin.value = false;
@@ -117,10 +81,7 @@ const goMyRecord = () => {
}; };
onShow(async () => { onShow(async () => {
if (user.value.id) { if (user.value.id) {
const [result] = await Promise.all([ const result = await getBattleDataAPI();
getBattleDataAPI(),
loadDailyCount(),
]);
data.value = result; data.value = result;
} }
}); });
@@ -145,18 +106,7 @@ onLoad(async (options) => {
<view class="my-data"> <view class="my-data">
<view> <view>
<Avatar :rankLvl="user.rankLvl" :src="user.avatar" :size="30" /> <Avatar :rankLvl="user.rankLvl" :src="user.avatar" :size="30" />
<view <text class="truncate">{{ user.nickName }}</text>
:class="[
'member-nickname',
isVip ? 'member-nickname--vip' : '',
isSVip ? 'member-nickname--svip' : '',
]"
>
<text class="member-nickname__text">{{ user.nickName }}</text>
<text v-if="isSVip" class="member-nickname__shine">{{
user.nickName
}}</text>
</view>
<text class="my-record-btn" @click="goMyRecord">我的战绩</text> <text class="my-record-btn" @click="goMyRecord">我的战绩</text>
</view> </view>
<view> <view>
@@ -205,9 +155,6 @@ onLoad(async (options) => {
</view> </view>
</view> </view>
<view> <view>
<view v-if="challengeLimitText" class="pp-text">
{{ challengeLimitText }}
</view>
<SButton width="80%" :rounded="30" :onClick="() => $clickSound(onCreateRoom)"> <SButton width="80%" :rounded="30" :onClick="() => $clickSound(onCreateRoom)">
创建约战房 创建约战房
</SButton> </SButton>
@@ -223,14 +170,6 @@ onLoad(async (options) => {
<Signin :show="showSignin" :onClose="onSignin" /> <Signin :show="showSignin" :onClose="onSignin" />
</view> </view>
</Container> </Container>
<ModalDialog
:show="showLimitModal"
:content="'今日约战次数已经用完\n开通会员可增加次数'"
cancelText="知道了"
confirmText="去开通"
:onCancel="closeLimitModal"
:onConfirm="goVipPage"
/>
</template> </template>
<style scoped> <style scoped>
@@ -316,7 +255,7 @@ onLoad(async (options) => {
} }
.create-room>view:nth-child(3) { .create-room>view:nth-child(3) {
margin: 12vw auto 5vw auto; margin: 12vw auto;
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -352,13 +291,6 @@ onLoad(async (options) => {
margin-right: 2px; margin-right: 2px;
} }
.pp-text{
color: #fff;
text-align: center;
font-size: 22rpx;
margin-bottom: 20rpx;
}
.warnning { .warnning {
width: 100%; width: 100%;
height: 100%; height: 100%;
@@ -403,17 +335,13 @@ onLoad(async (options) => {
margin-left: auto; margin-left: auto;
} }
.my-data>view:first-child>.member-nickname { .my-data>view:first-child>text {
color: #fff; color: #fff;
font-size: 17px;
margin-left: 10px; margin-left: 10px;
width: 120px; width: 120px;
} }
.my-data>view:first-child>.member-nickname__text,
.my-data>view:first-child>.member-nickname__shine {
font-size: 17px;
}
.my-data>view:last-child { .my-data>view:last-child {
margin-bottom: 15px; margin-bottom: 15px;
} }
+27 -114
View File
@@ -1,66 +1,31 @@
<script setup> <script setup>
import { computed } from "vue";
import Container from "@/components/Container.vue"; import Container from "@/components/Container.vue";
import useStore from "@/store"; import useStore from "@/store";
import { storeToRefs } from "pinia"; import { storeToRefs } from "pinia";
const store = useStore(); const store = useStore();
const { user } = storeToRefs(store); const { user } = storeToRefs(store);
const MAX_LEVEL = 100;
const LEVEL_NODE_WIDTH_RPX = 72;
const TRACK_PADDING_RPX = 20;
const windowWidth = uni.getSystemInfoSync().windowWidth;
const rpxToPx = (value) => (value * windowWidth) / 750;
const levels = Array.from({ length: MAX_LEVEL }, (_, index) => index + 1);
const currentLevel = computed(() => {
const level = Number(user.value?.lvl) || 1;
return Math.min(Math.max(level, 1), MAX_LEVEL);
});
const currentLevelScrollLeft = computed(() => {
const nodeWidth = rpxToPx(LEVEL_NODE_WIDTH_RPX);
const trackPadding = rpxToPx(TRACK_PADDING_RPX);
const contentWidth = rpxToPx(
TRACK_PADDING_RPX * 2 + MAX_LEVEL * LEVEL_NODE_WIDTH_RPX
);
const currentCenter =
trackPadding + (currentLevel.value - 1) * nodeWidth + nodeWidth / 2;
const targetLeft = currentCenter - windowWidth / 2;
const maxScrollLeft = Math.max(contentWidth - windowWidth, 0);
return Math.min(Math.max(targetLeft, 0), maxScrollLeft);
});
</script> </script>
<template> <template>
<Container title="等级介绍"> <Container title="等级介绍">
<view class="container"> <view class="container">
<!-- 等级进度条 --> <!-- 等级进度条 -->
<scroll-view <view class="level-progress">
class="level-progress" <view v-for="(_, index) in 10" :key="index" class="progress-dot">
scroll-x
:show-scrollbar="false"
:scroll-left="currentLevelScrollLeft"
scroll-with-animation
>
<view class="level-track">
<view <view
v-for="level in levels" :style="{
:id="`level-${level}`" backgroundColor:
:key="level" index + 1 < user.lvl
:class="[ ? '#fff9'
'level-node', : index + 1 === user.lvl
level < currentLevel ? 'level-node--done' : '', ? '#fed847'
level === currentLevel ? 'level-node--current' : '', : 'transparent',
]" borderColor: index + 1 === user.lvl ? '#fed847' : '#fff9',
> }"
<view class="level-node__top"> />
<view class="level-node__dot" /> <view />
<view v-if="level < MAX_LEVEL" class="level-node__line" />
</view>
<text class="level-node__label">{{ level }}</text>
</view> </view>
</view> </view>
</scroll-view>
<!-- 说明文本 --> <!-- 说明文本 -->
<view class="body"> <view class="body">
@@ -100,80 +65,28 @@ const currentLevelScrollLeft = computed(() => {
.level-progress { .level-progress {
width: 100%; width: 100%;
white-space: nowrap; height: 32rpx;
padding: 24rpx 0 34rpx;
box-sizing: border-box;
}
.level-track {
display: inline-flex;
align-items: flex-start;
padding-left: 20rpx;
padding-right: 20rpx;
}
.level-node {
display: flex; display: flex;
flex-direction: column; justify-content: center;
align-items: flex-start; padding-top: 20rpx;
width: 72rpx; padding-bottom: 40rpx;
flex: 0 0 72rpx;
} }
.level-node__top { .progress-dot {
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%;
} }
.progress-dot > view:first-child {
.level-node__dot { width: 3.8vw;
width: 28rpx; height: 3.8vw;
height: 28rpx;
border-radius: 50%; border-radius: 50%;
border: 3rpx solid rgba(255, 255, 255, 0.45); border: 1px solid #fff9;
box-sizing: border-box;
} }
.progress-dot > view:last-child {
.level-node__line { width: 3.8vw;
flex: 1; height: 1px;
height: 2rpx; margin: 0 2px;
background-color: rgba(255, 255, 255, 0.45); background-color: #fff9;
}
.level-node__label {
width: 28rpx;
margin-top: 14rpx;
color: rgba(255, 255, 255, 0.45);
font-size: 24rpx;
line-height: 28rpx;
text-align: center;
}
.level-node--done .level-node__dot {
background-color: #ffffff;
border-color: #ffffff;
}
.level-node--done .level-node__line {
background-color: rgba(255, 255, 255, 0.8);
}
.level-node--done .level-node__label {
color: rgba(255, 255, 255, 0.72);
}
.level-node--current .level-node__dot {
background-color: #fed847;
border-color: #fed847;
}
.level-node--current .level-node__line {
background-color: rgba(255, 255, 255, 0.45);
}
.level-node--current .level-node__label {
color: #fed847;
font-weight: 700;
} }
.body { .body {
+4 -239
View File
@@ -1,23 +1,19 @@
<script setup> <script setup>
import {onMounted, onUnmounted, ref} from "vue"; import {onMounted, ref} from "vue";
import {onShareAppMessage, onShareTimeline, onShow} from "@dcloudio/uni-app"; import {onShareAppMessage, onShareTimeline, onShow} from "@dcloudio/uni-app";
import Container from "@/components/Container.vue"; import Container from "@/components/Container.vue";
import AppFooter from "@/components/AppFooter.vue"; import AppFooter from "@/components/AppFooter.vue";
import UserHeader from "@/components/UserHeader.vue"; import UserHeader from "@/components/UserHeader.vue";
import Signin from "@/components/Signin.vue"; import Signin from "@/components/Signin.vue";
import BubbleTip from "@/components/BubbleTip.vue"; import BubbleTip from "@/components/BubbleTip.vue";
import OtaModal from "@/components/OtaModal.vue";
import { import {
checkUserBindAPI, checkUserBindAPI,
getAppConfig, getAppConfig,
getDeviceBatteryAPI, getDeviceBatteryAPI,
getHardwareBoxTaskStatusAPI,
getHardwareBoxVersionAPI,
getHomeData, getHomeData,
getMyDevicesAPI, getMyDevicesAPI,
getScoreRankList, getScoreRankList,
sendHardwareBoxUpdateAPI,
silentLoginAPI, silentLoginAPI,
} from "@/apis"; } from "@/apis";
import {topThreeColors} from "@/constants"; import {topThreeColors} from "@/constants";
@@ -30,7 +26,6 @@ const {
updateConfig, updateConfig,
updateUser, updateUser,
updateDevice, updateDevice,
clearDevice,
getLvlName, getLvlName,
getLvlNameByScore, getLvlNameByScore,
updateOnline, updateOnline,
@@ -41,208 +36,6 @@ const showModal = ref(false);
const showGuide = ref(false); const showGuide = ref(false);
const scoreRankList = ref([]); const scoreRankList = ref([]);
// OTA 相关
const otaVisible = ref(false);
const otaState = ref("new_version");
const otaProgress = ref(0);
const otaInfo = ref({
versionNumber: "",
versionInfo: "",
resourceUrl: "",
forceUpdate: false,
});
const isStartingOta = ref(false);
let otaProgressTimer = null;
let otaStatusTimer = null;
let otaTimeoutTimer = null;
// 清理首页 OTA 更新定时器,避免弹窗关闭或页面卸载后继续轮询。
const clearOtaUpdateTimers = () => {
clearInterval(otaProgressTimer);
clearTimeout(otaStatusTimer);
clearTimeout(otaTimeoutTimer);
otaProgressTimer = null;
otaStatusTimer = null;
otaTimeoutTimer = null;
};
// 启动首页 OTA 本地进度动画,最终成功失败以后端任务状态为准。
const startOtaProgressAnimation = () => {
clearInterval(otaProgressTimer);
otaProgressTimer = setInterval(() => {
if (otaProgress.value >= 90) {
clearInterval(otaProgressTimer);
return;
}
const increment = Math.max(0.5, 2 - otaProgress.value / 60);
otaProgress.value = Math.min(90, otaProgress.value + increment);
}, 500);
};
// 获取并保存后端返回的 OTA 版本信息,供弹窗展示和更新接口使用。
const applyOtaVersionInfo = (versionInfo) => {
otaInfo.value = {
versionNumber: versionInfo?.versionNumber || "",
versionInfo: versionInfo?.versionInfo || "",
resourceUrl: versionInfo?.resourceUrl || "",
forceUpdate: Number(versionInfo?.forceUpdate) === 1,
};
};
// 检查当前设备盒子是否存在可升级版本。
const checkOtaUpdate = async () => {
let versionInfo;
try {
versionInfo = await getHardwareBoxVersionAPI();
} catch (err) {
return;
}
if (!versionInfo?.needUpdate) return;
applyOtaVersionInfo(versionInfo);
const dismissedAt = uni.getStorageSync("ota_dismissed_at");
const now = Date.now();
if (!otaInfo.value.forceUpdate && dismissedAt && now - dismissedAt < 24 * 60 * 60 * 1000) return;
otaState.value = "new_version";
otaVisible.value = true;
};
// 拼接 OTA WiFi 页参数,让未连 WiFi 的设备继续使用同一份版本信息。
const getOtaWifiUrl = () => {
const { versionNumber, resourceUrl } = otaInfo.value;
const query = [
`versionNumber=${encodeURIComponent(versionNumber)}`,
`resourceUrl=${encodeURIComponent(resourceUrl)}`,
].join("&");
return `/pages/ota-wifi?${query}`;
};
// 处理 OTA 弹窗暂不更新,强制更新时不允许关闭。
const handleOtaDismiss = () => {
if (otaInfo.value.forceUpdate) return;
uni.setStorageSync("ota_dismissed_at", Date.now());
otaVisible.value = false;
};
// 将首页 OTA 直连更新流程标记为失败。
const failHomeOtaUpdate = () => {
clearOtaUpdateTimers();
isStartingOta.value = false;
otaState.value = "update_failure";
otaVisible.value = true;
};
// 将首页 OTA 直连更新流程标记为成功。
const completeHomeOtaUpdate = () => {
clearOtaUpdateTimers();
isStartingOta.value = false;
otaProgress.value = 100;
setTimeout(() => {
otaState.value = "update_success";
otaVisible.value = true;
}, 300);
};
// 轮询首页直接发起的 OTA 更新任务状态。
const pollHomeOtaTaskStatus = (taskId) => {
clearTimeout(otaStatusTimer);
otaStatusTimer = setTimeout(async () => {
try {
const taskStatus = await getHardwareBoxTaskStatusAPI(taskId);
const status = Number(taskStatus?.status);
if (status === 2) {
completeHomeOtaUpdate();
return;
}
if (status === 3) {
failHomeOtaUpdate();
return;
}
if (status === 0 || status === 1) {
pollHomeOtaTaskStatus(taskId);
return;
}
failHomeOtaUpdate();
} catch (err) {
failHomeOtaUpdate();
}
}, 3000);
};
// 设备盒子已连 WiFi 时,从首页直接传空 WiFi 信息发起 OTA 更新。
const startHomeOtaUpdate = async () => {
otaState.value = "update_progress";
otaVisible.value = true;
otaProgress.value = 0;
startOtaProgressAnimation();
otaTimeoutTimer = setTimeout(() => {
if (otaState.value === "update_progress") {
failHomeOtaUpdate();
}
}, 5 * 60 * 1000);
try {
const updateResult = await sendHardwareBoxUpdateAPI({
versionNumber: otaInfo.value.versionNumber,
wifiSsid: "",
wifiPassword: "",
resourceUrl: otaInfo.value.resourceUrl,
});
if (!updateResult?.taskId) {
failHomeOtaUpdate();
return;
}
pollHomeOtaTaskStatus(updateResult.taskId);
} catch (err) {
failHomeOtaUpdate();
}
};
// 点击立即更新时先判断设备是否在线并已通过 WiFi 联网,已联网则首页直接更新,否则跳转 WiFi 页面。
const handleOtaUpdate = async () => {
if (isStartingOta.value) return;
isStartingOta.value = true;
let deviceStatus;
try {
deviceStatus = await getDeviceBatteryAPI();
} catch (err) {
isStartingOta.value = false;
uni.showToast({
title: "获取设备状态失败,请重试",
icon: "none",
});
return;
}
if (deviceStatus?.online !== true) {
isStartingOta.value = false;
uni.showToast({
title: "请先开启智能弓",
icon: "none",
});
return;
}
if (String(deviceStatus?.netType || "").toLowerCase() === "wifi") {
startHomeOtaUpdate();
return;
}
isStartingOta.value = false;
otaVisible.value = false;
uni.navigateTo({ url: getOtaWifiUrl() });
};
// 处理 OTA 更新成功后的完成按钮,关闭结果弹窗。
const handleOtaDone = () => {
otaVisible.value = false;
};
// 处理 OTA 更新失败后的重试按钮,重新走立即更新判断流程。
const handleOtaRetry = () => {
handleOtaUpdate();
};
// 提取积分榜接口返回的榜单数组,兼容数组和对象两种返回格式。 // 提取积分榜接口返回的榜单数组,兼容数组和对象两种返回格式。
const getScoreRankData = (result) => { const getScoreRankData = (result) => {
if (Array.isArray(result)) return result; if (Array.isArray(result)) return result;
@@ -270,18 +63,10 @@ const toRankListPage = () => {
}); });
}; };
onShow(async (options) => { onShow(async () => {
const env = uni.getAccountInfoSync().miniProgram.envVersion; const env = uni.getAccountInfoSync().miniProgram.envVersion;
const token = uni.getStorageSync(`${env}_token`); const token = uni.getStorageSync(`${env}_token`);
// 检查是否从 OTA 更新页面返回
if (options && options.updateResult) {
otaState.value = options.updateResult;
otaVisible.value = true;
} else if (token || user.value.id) {
await checkOtaUpdate();
}
if (!user.value.id && !token) { if (!user.value.id && !token) {
// showModal.value = true; // showModal.value = true;
// try { // try {
@@ -342,8 +127,6 @@ onShow(async (options) => {
); );
const data = await getDeviceBatteryAPI(); const data = await getDeviceBatteryAPI();
updateOnline(data.online); updateOnline(data.online);
} else {
clearDevice();
} }
} }
} }
@@ -355,10 +138,6 @@ onMounted(async () => {
console.log("全局配置:", config); console.log("全局配置:", config);
}); });
onUnmounted(() => {
clearOtaUpdateTimers();
});
onShareAppMessage(() => { onShareAppMessage(() => {
return { return {
title: "智能真弓:实时捕捉+毫秒级同步,弓箭选手全球竞技!", // 分享卡片的标题 title: "智能真弓:实时捕捉+毫秒级同步,弓箭选手全球竞技!", // 分享卡片的标题
@@ -379,21 +158,6 @@ onShareTimeline(() => {
<template> <template>
<Container :isHome="true" :showBackToGame="true"> <Container :isHome="true" :showBackToGame="true">
<!-- OTA 升级弹窗使用 visible 控制显隐description 为副标题changelog 为详细说明 -->
<OtaModal
:visible="otaVisible"
:state="otaState"
:version="otaInfo.versionNumber"
:progress="otaProgress"
:description="''"
:changelog="otaInfo.versionInfo"
:forceUpdate="otaInfo.forceUpdate"
@update="handleOtaUpdate"
@skip="handleOtaDismiss"
@close="handleOtaDismiss"
@done="handleOtaDone"
@retry="handleOtaRetry"
/>
<view class="container"> <view class="container">
<view class="top-theme"> <view class="top-theme">
<!-- <image <!-- <image
@@ -433,7 +197,8 @@ onShareTimeline(() => {
</BubbleTip> </BubbleTip>
</view> </view>
<view class="play-card"> <view class="play-card">
<view @click="$clickSound(() => toPage('/pages/practise'))"> <!-- toPage('/pages/practise') -->
<view @click="() => toPage('/pages/training/index')">
<image src="../static/my-practise.png" mode="widthFix"/> <image src="../static/my-practise.png" mode="widthFix"/>
</view> </view>
<view @click="$clickSound(() => toPage('/pages/friend-battle'))"> <view @click="$clickSound(() => toPage('/pages/friend-battle'))">
+1 -1
View File
@@ -67,7 +67,7 @@ onLoad(async (options) => {
const checkBowData = (selected) => { const checkBowData = (selected) => {
if (data.value.mode <= 3) { if (data.value.mode <= 3) {
uni.navigateTo({ uni.navigateTo({
url: `/pages/team-battle/team-bow-data?battleId=${battleId.value}&selected=${selected}`, url: `/pages/team-bow-data?battleId=${battleId.value}&selected=${selected}`,
}); });
} else { } else {
uni.navigateTo({ uni.navigateTo({
+1 -33
View File
@@ -3,15 +3,12 @@ import { ref, onMounted, onBeforeUnmount } from "vue";
import { onLoad, onShow, onHide } from "@dcloudio/uni-app"; import { onLoad, onShow, onHide } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue"; import Container from "@/components/Container.vue";
import Matching from "@/components/Matching.vue"; import Matching from "@/components/Matching.vue";
import ModalDialog from "@/components/ModalDialog.vue";
import { matchGameAPI, getBattleAPI } from "@/apis"; import { matchGameAPI, getBattleAPI } from "@/apis";
import { MESSAGETYPESV2 } from "@/constants"; import { MESSAGETYPESV2 } from "@/constants";
import { isLimitError } from "@/util";
const gameType = ref(0); const gameType = ref(0);
const teamSize = ref(0); const teamSize = ref(0);
const onComplete = ref(null); const onComplete = ref(null);
const showLimitModal = ref(false);
/** 匹配超时计时器,用于检测 WS 消息丢失或真正超时 */ /** 匹配超时计时器,用于检测 WS 消息丢失或真正超时 */
const matchTimeoutTimer = ref(null); const matchTimeoutTimer = ref(null);
@@ -61,18 +58,6 @@ async function stopMatch() {
uni.$showHint(3); uni.$showHint(3);
} }
const closeLimitModal = () => {
showLimitModal.value = false;
uni.navigateBack();
};
const goVipPage = () => {
showLimitModal.value = false;
uni.redirectTo({
url: "/pages/member/be-vip",
});
};
/** /**
* 取消匹配,带容错处理: * 取消匹配,带容错处理:
* - 取消成功 → 返回大厅 * - 取消成功 → 返回大厅
@@ -151,19 +136,10 @@ onBeforeUnmount(() => {
onShow(async () => { onShow(async () => {
if (gameType.value && teamSize.value) { if (gameType.value && teamSize.value) {
try { matchGameAPI(true, gameType.value, teamSize.value);
await matchGameAPI(true, gameType.value, teamSize.value);
// 启动超时计时器,防止 WS 消息丢失或长时间无对手导致用户卡死 // 启动超时计时器,防止 WS 消息丢失或长时间无对手导致用户卡死
clearMatchTimeout(); clearMatchTimeout();
matchTimeoutTimer.value = setTimeout(handleMatchTimeout, MATCH_TIMEOUT_MS); matchTimeoutTimer.value = setTimeout(handleMatchTimeout, MATCH_TIMEOUT_MS);
} catch (error) {
clearMatchTimeout();
if (isLimitError(error)) {
showLimitModal.value = true;
return;
}
uni.navigateBack();
}
} }
}); });
@@ -178,14 +154,6 @@ onHide(() => {
<Matching :stopMatch="stopMatch" :onComplete="onComplete" /> <Matching :stopMatch="stopMatch" :onComplete="onComplete" />
</view> </view>
</Container> </Container>
<ModalDialog
:show="showLimitModal"
:content="'今日排位赛次数已经用完\n开通会员可增加次数'"
cancelText="知道了"
confirmText="去开通"
:onCancel="closeLimitModal"
:onConfirm="goVipPage"
/>
</template> </template>
<style scoped> <style scoped>
+15 -81
View File
@@ -1,5 +1,5 @@
<script setup> <script setup>
import { ref, onMounted, onBeforeUnmount, watch, nextTick, computed } from "vue"; import { ref, onMounted, onBeforeUnmount, watch, nextTick } from "vue";
import { onLoad, onShow, onHide } from "@dcloudio/uni-app"; import { onLoad, onShow, onHide } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue"; import Container from "@/components/Container.vue";
import BowTarget from "@/components/BowTarget.vue"; import BowTarget from "@/components/BowTarget.vue";
@@ -30,69 +30,11 @@ const playersSorted = ref([]);
const playersScores = ref([]); const playersScores = ref([]);
const halfTimeTip = ref(false); const halfTimeTip = ref(false);
const halfRest = ref(false); const halfRest = ref(false);
const HALF_REST_SECONDS = 20;
const halfRestRemain = ref(HALF_REST_SECONDS);
let halfRestTimer = null;
/** 控制设备离线提示弹窗的显示状态 */ /** 控制设备离线提示弹窗的显示状态 */
const showOfflineModal = ref(false); const showOfflineModal = ref(false);
/** 记录每位玩家当前半场连续 10 环及以上次数,key 为 playerId,用于触发 tententen 音效 */ /** 记录每位玩家当前半场连续 X 环数,key 为 playerId,用于触发 tententen 音效 */
const xRingStreaks = ref({}); const xRingStreaks = ref({});
function clearHalfRestCountdown() {
if (halfRestTimer) {
clearInterval(halfRestTimer);
halfRestTimer = null;
}
}
function getHalfRestSeconds(battleInfo) {
const remainCandidates = [
battleInfo?.halfRestRemain,
battleInfo?.halfRestRemainSeconds,
battleInfo?.restRemain,
battleInfo?.restRemainSeconds,
];
for (const item of remainCandidates) {
const remain = Number(item);
if (Number.isFinite(remain) && remain > 0 && remain <= HALF_REST_SECONDS) {
return Math.ceil(remain);
}
}
const endTime = Number(battleInfo?.halfRestEndTime ?? battleInfo?.restEndTime);
if (!Number.isFinite(endTime) || endTime <= 0) return HALF_REST_SECONDS;
const timestamp = endTime < 1e12 ? endTime * 1000 : endTime;
const diffSeconds = (timestamp - Date.now()) / 1000;
if (diffSeconds > 0 && diffSeconds <= HALF_REST_SECONDS) {
return Math.ceil(diffSeconds);
}
return HALF_REST_SECONDS;
}
function startHalfRestCountdown(seconds = HALF_REST_SECONDS) {
clearHalfRestCountdown();
halfRestRemain.value = Math.max(0, Math.ceil(Number(seconds) || HALF_REST_SECONDS));
if (halfRestRemain.value <= 0) return;
halfRestTimer = setInterval(() => {
if (halfRestRemain.value <= 1) {
halfRestRemain.value = 0;
clearHalfRestCountdown();
return;
}
halfRestRemain.value -= 1;
}, 1000);
}
const currentPlayer = computed(() =>
players.value.find((player) => String(player?.id) === String(user.value.id))
);
const isCurrentUserSvip = computed(() => currentPlayer.value?.sVip === true);
/** /**
* 监听设备在线状态,大乱斗比赛进行中设备离线时弹窗提示用户 * 监听设备在线状态,大乱斗比赛进行中设备离线时弹窗提示用户
*/ */
@@ -149,7 +91,8 @@ function recoverData(battleInfo, { force = false } = {}) {
halfTimeTip.value = true; halfTimeTip.value = true;
halfRest.value = true; halfRest.value = true;
tips.value = "准备下半场"; tips.value = "准备下半场";
startHalfRestCountdown(getHalfRestSeconds(battleInfo)); // 剩余休息时间
// const remain = (Date.now() - battleInfo.timeoutTime) / 1000;
setTimeout(() => { setTimeout(() => {
uni.$emit("update-remain", 0); uni.$emit("update-remain", 0);
}, 200); }, 200);
@@ -180,27 +123,23 @@ onLoad(async (options) => {
}); });
/** /**
* 检测指定玩家连续 10 环及以上是否达到 3 箭,达到则在环数播报入队后追加 tententen 音效 * 检测指定玩家连续 X 环是否达到 3 箭,达到则在环数播报入队后追加 tententen 音效
* @param {number|string} playerId - 本次射手的 ID(大乱斗中 ShootResult 保留 playerId * @param {number|string} playerId - 本次射手的 ID(大乱斗中 ShootResult 保留 playerId
* @param {boolean} isTenPlusRingShot - 本次射击是否为 10 环及以上 * @param {boolean} isXRing - 本次射击是否为 X 环
*/ */
function isTenPlusRing(shot) { function checkAndPlayTententen(playerId, isXRing) {
return !!(shot?.ringX || Number(shot?.ring) >= 10);
}
function checkAndPlayTententen(playerId, isTenPlusRingShot) {
if (!playerId) return; if (!playerId) return;
const id = parseInt(playerId); const id = parseInt(playerId);
if (isTenPlusRingShot) { if (isXRing) {
xRingStreaks.value[id] = (xRingStreaks.value[id] || 0) + 1; xRingStreaks.value[id] = (xRingStreaks.value[id] || 0) + 1;
// 同一玩家连续 3 箭均为 10 环及以上,追加到环数音效队列尾部播放 // 同一玩家连续 3 箭均为 X 环,追加到环数音效队列尾部播放
if (xRingStreaks.value[id] >= 3) { if (xRingStreaks.value[id] >= 3) {
xRingStreaks.value[id] = 0; xRingStreaks.value[id] = 0;
// nextTick 确保 HeaderProgress 的环数播报已入队后再追加 tententen,避免播放顺序颠倒 // nextTick 确保 HeaderProgress 的环数播报已入队后再追加 tententen,避免播放顺序颠倒
nextTick(() => audioManager.play("tententen", false)); nextTick(() => audioManager.play("tententen", false));
} }
} else { } else {
// 低于 10 环或未上靶则重置该玩家的连续计数 // 非 X 环则重置该玩家的连续计数
xRingStreaks.value[id] = 0; xRingStreaks.value[id] = 0;
} }
} }
@@ -208,7 +147,6 @@ function checkAndPlayTententen(playerId, isTenPlusRingShot) {
async function onReceiveMessage(msg) { async function onReceiveMessage(msg) {
if (Array.isArray(msg)) return; if (Array.isArray(msg)) return;
if (msg.type === MESSAGETYPESV2.BattleStart) { if (msg.type === MESSAGETYPESV2.BattleStart) {
clearHalfRestCountdown();
halfTimeTip.value = false; halfTimeTip.value = false;
halfRest.value = false; halfRest.value = false;
recoverData(msg); recoverData(msg);
@@ -223,23 +161,22 @@ async function onReceiveMessage(msg) {
// 对比更新后数据找出箭数增加的玩家(即本次射手),并读取其最新箭的 ring 数据 // 对比更新后数据找出箭数增加的玩家(即本次射手),并读取其最新箭的 ring 数据
const newRound = playersScores.value[playersScores.value.length - 1] || {}; const newRound = playersScores.value[playersScores.value.length - 1] || {};
let shooterId = null; let shooterId = null;
let isTenPlusRingShot = false; let isXRing = false;
for (const pid of Object.keys(newRound)) { for (const pid of Object.keys(newRound)) {
const newLen = (newRound[pid] || []).length; const newLen = (newRound[pid] || []).length;
if (newLen > (prevCounts[pid] || 0)) { if (newLen > (prevCounts[pid] || 0)) {
shooterId = parseInt(pid); shooterId = parseInt(pid);
const shot = newRound[pid][newLen - 1]; const shot = newRound[pid][newLen - 1];
isTenPlusRingShot = isTenPlusRing(shot); isXRing = !!(shot?.ringX && shot?.ring);
break; break;
} }
} }
// 检测同一玩家连续三箭 10 环及以上,触发 tententen 音效 // 检测同一玩家三箭全 X 环,触发 tententen 音效
checkAndPlayTententen(shooterId, isTenPlusRingShot); checkAndPlayTententen(shooterId, isXRing);
} else if (msg.type === MESSAGETYPESV2.HalfRest) { } else if (msg.type === MESSAGETYPESV2.HalfRest) {
halfTimeTip.value = true; halfTimeTip.value = true;
halfRest.value = true; halfRest.value = true;
tips.value = "准备下半场"; tips.value = "准备下半场";
startHalfRestCountdown();
} else if (msg.type === MESSAGETYPESV2.BattleEnd) { } else if (msg.type === MESSAGETYPESV2.BattleEnd) {
setTimeout(() => { setTimeout(() => {
// 全部跳转到新结算页 // 全部跳转到新结算页
@@ -260,7 +197,6 @@ onBeforeUnmount(() => {
uni.setKeepScreenOn({ uni.setKeepScreenOn({
keepScreenOn: false, keepScreenOn: false,
}); });
clearHalfRestCountdown();
uni.$off("socket-inbox", onReceiveMessage); uni.$off("socket-inbox", onReceiveMessage);
audioManager.stopAll(); audioManager.stopAll();
}); });
@@ -295,7 +231,6 @@ onShow(async () => {
:tips="tips" :tips="tips"
:total="90" :total="90"
:melee="true" :melee="true"
:halfRest="halfRest"
:battleId="battleId" :battleId="battleId"
/> />
<view v-if="start" class="user-row"> <view v-if="start" class="user-row">
@@ -309,7 +244,6 @@ onShow(async () => {
" "
:totalRound="12" :totalRound="12"
:scores="playersScores.map((r) => r[user.id]).flat()" :scores="playersScores.map((r) => r[user.id]).flat()"
:isSvip="isCurrentUserSvip"
:stop="halfRest" :stop="halfRest"
/> />
<view :style="{ paddingBottom: '20px' }"> <view :style="{ paddingBottom: '20px' }">
@@ -327,7 +261,7 @@ onShow(async () => {
> >
<view class="half-time-tip"> <view class="half-time-tip">
<text>上半场结束休息一下吧:</text> <text>上半场结束休息一下吧:</text>
<text>{{ halfRestRemain }}秒后开始下半场</text> <text>20秒后开始下半场</text>
</view> </view>
</ScreenHint> </ScreenHint>
<!-- 设备离线提示弹窗 --> <!-- 设备离线提示弹窗 -->
+9 -48
View File
@@ -13,31 +13,13 @@ const currentUser = ref({
}); });
const players = ref([]); const players = ref([]);
function getRingTotal(arrows = []) {
return arrows.reduce((last, next) => last + (Number(next?.ring) || 0), 0);
}
function getScoreLabel(score) {
if (!score) return "";
return score.ringX ? "X" : score.ring || "";
}
const isMember = (player = {}) => player.vip === true || player.sVip === true;
const getMemberNicknameClass = (player = {}) => [
"player-name",
"member-nickname",
player.vip === true && player.sVip !== true ? "member-nickname--vip" : "",
player.sVip === true ? "member-nickname--svip" : "",
];
onLoad(async (options) => { onLoad(async (options) => {
if (!options.battleId) return; if (!options.battleId) return;
const result = await getBattleAPI(options.battleId || "59348111700660224"); const result = await getBattleAPI(options.battleId || "59348111700660224");
const plist = result.teams?.[0]?.players || [];
players.value = result.resultList.map((item, index) => { players.value = result.resultList.map((item, index) => {
const p = plist.find((p) => String(p.id) === String(item.userId)); const plist = result.teams[0] ? result.teams[0].players : [];
const arrows = Array.from({ length: 12 }, () => ({})); const p = plist.find((p) => p.id === item.userId);
const arrows = new Array(12);
result.rounds.forEach((r, index) => { result.rounds.forEach((r, index) => {
if (r.shoots[item.userId]) { if (r.shoots[item.userId]) {
r.shoots[item.userId].forEach((s, index2) => { r.shoots[item.userId].forEach((s, index2) => {
@@ -47,11 +29,9 @@ onLoad(async (options) => {
}); });
return { return {
...item, ...item,
...p,
userId: item.userId,
rank: index + 1, rank: index + 1,
name: p?.name || item.name, name: p.name,
avatar: p?.avatar || item.avatar || "", avatar: p.avatar || "",
arrows, arrows,
}; };
}); });
@@ -88,27 +68,18 @@ onLoad(async (options) => {
class="player-bg" class="player-bg"
/> />
<Avatar :src="player.avatar" :rankLvl="player.rankLvl" :size="40" /> <Avatar :src="player.avatar" :rankLvl="player.rankLvl" :size="40" />
<view v-if="isMember(player)" :class="getMemberNicknameClass(player)"> <text>{{ player.name }}</text>
<text class="member-nickname__text">{{ player.name }}</text>
<text v-if="player.sVip === true" class="member-nickname__shine">
{{ player.name }}
</text>
</view>
<text v-else>{{ player.name }}</text>
</view> </view>
</view> </view>
<view :style="{ marginTop: '10px' }"> <view :style="{ marginTop: '10px' }">
<BowTarget <BowTarget :scores="currentUser.arrows" />
:scores="currentUser.arrows"
:isSvip="currentUser.sVip === true"
/>
</view> </view>
<view class="score-text" <view class="score-text"
><text :style="{ color: '#fed847' }">{{ ><text :style="{ color: '#fed847' }">{{
currentUser.arrows.length currentUser.arrows.length
}}</text }}</text
>支箭<text :style="{ color: '#fed847' }">{{ >支箭<text :style="{ color: '#fed847' }">{{
getRingTotal(currentUser.arrows) currentUser.arrows.reduce((last, next) => last + next.ring, 0)
}}</text }}</text
></view ></view
> >
@@ -119,7 +90,7 @@ onLoad(async (options) => {
class="score-item" class="score-item"
:style="{ width: '13vw', height: '13vw' }" :style="{ width: '13vw', height: '13vw' }"
> >
{{ getScoreLabel(score) }} {{ score.ringX ? "X" : score.ring }}
</view> </view>
</view> </view>
</view> </view>
@@ -178,16 +149,6 @@ onLoad(async (options) => {
text-align: center; text-align: center;
position: relative; position: relative;
} }
.players > view > .player-name {
margin: 5px 0;
width: 80%;
position: relative;
justify-content: center;
}
.player-name .member-nickname__text,
.player-name .member-nickname__shine {
font-size: 12px;
}
.score-text { .score-text {
width: 100%; width: 100%;
color: #fff; color: #fff;
-120
View File
@@ -1,120 +0,0 @@
<script setup>
import { computed, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import { getMemberAgreement } from "./agreementData";
const agreementType = ref("renew");
onLoad((options) => {
agreementType.value = options.type || "renew";
});
const agreement = computed(() => getMemberAgreement(agreementType.value));
</script>
<template>
<Container :title="agreement.navTitle">
<scroll-view scroll-y class="agreement-page" :show-scrollbar="false">
<view class="content">
<view class="page-title">{{ agreement.title }}</view>
<view v-if="agreement.meta" class="meta">{{ agreement.meta }}</view>
<block v-for="(item, index) in agreement.content" :key="index">
<view v-if="item.type === 'heading'" class="section-title">
{{ item.text }}
</view>
<view v-else-if="item.type === 'list'" class="list">
<view v-for="(listItem, listIndex) in item.items" :key="listIndex" class="list-item">
<text class="list-dot"></text>
<text class="list-text">{{ listItem }}</text>
</view>
</view>
<view v-else class="paragraph">
<text>{{ item.text }}</text>
</view>
</block>
<view class="company">{{ agreement.company }}</view>
</view>
</scroll-view>
</Container>
</template>
<style scoped lang="scss">
.agreement-page {
width: 100%;
height: 100%;
background-color: #ffffff;
}
.content {
padding: 30rpx;
box-sizing: border-box;
}
.page-title,
.section-title {
color: #333333;
font-size: 28rpx;
line-height: 40rpx;
font-weight: 700;
}
.page-title {
margin-bottom: 20rpx;
}
.meta {
margin-bottom: 26rpx;
color: #666666;
font-size: 24rpx;
line-height: 34rpx;
}
.section-title {
margin: 42rpx 0 22rpx;
}
.paragraph,
.list-item,
.company {
color: #333333;
font-size: 26rpx;
line-height: 38rpx;
}
.paragraph {
margin-bottom: 22rpx;
}
.list {
margin-bottom: 22rpx;
}
.list-item {
display: flex;
align-items: flex-start;
margin-bottom: 14rpx;
}
.list-dot {
width: 28rpx;
flex-shrink: 0;
color: #333333;
line-height: 38rpx;
}
.list-text {
flex: 1;
color: #333333;
line-height: 38rpx;
}
.company {
margin-top: 42rpx;
padding-bottom: 30rpx;
text-align: right;
font-weight: 700;
}
</style>
-322
View File
@@ -1,322 +0,0 @@
export const memberAgreements = {
renew: {
navTitle: "会员自动续费服务协议",
title: "射灵星球小程序会员自动续费服务协议",
content: [
{
type: "paragraph",
text: "欢迎您使用射灵星球小程序付费会员服务(以下简称“本服务”)!",
},
{
type: "paragraph",
text: "本服务是由广州光点飞舞网络有限公司(以下简称“公司”或“我们”)为您提供。本服务为付费服务。为了保障您的权益,请在使用本服务前详细阅读并遵守本《射灵星球小程序会员服务协议(含自动续费服务规则)》(以下简称“本协议”)以及公司已发布或将来可能发布的各项服务协议与规则。您在申请开通本服务并进入购买程序前,请务必审慎阅读、充分理解各服务协议及规则,特别是免除或限制责任条款、法律适用和争议解决条款。",
},
{
type: "paragraph",
text: "当您依照本服务开通页面提示进行阅读并同意本协议,完成全部服务开通程序后(包括但不限于点击“同意”、“下一步”或“确认支付”等确认按钮,或您开始使用本服务),即表示您已充分阅读、理解并接受本协议的全部内容,您已与本服务提供方达成一致,成为“射灵星球小程序”付费会员。本协议即在您与公司之间产生法律效力,成为对双方均具有约束力的法律文件。",
},
{ type: "heading", text: "一、定义及适用范围" },
{
type: "paragraph",
text: "1.1 射灵星球小程序付费会员:指已按照服务协议及规则完成射灵星球小程序登录的用户,在签署本协议并根据本服务开通页面所展示的收费标准支付相应费用后获取的特殊资格,在本协议中简称为“会员”或“您”。公司根据业务发展可能会新增、调整会员类型或名称,实际以开通页面展示为准,这不影响您的实际权益。",
},
{
type: "paragraph",
text: "1.2 付费会员权益:指用户基于其付费会员资格所享有的特殊权益,具体权益内容应以本服务购买页面展示内容及相关权益说明为准。您理解并同意,公司可能会根据设备型号、系统版本、客户端等因素开发不同的版本,不同版本实际可使用的具体权益或服务内容可能有所差别,具体以购买页面展示为准。",
},
{
type: "paragraph",
text: "1.3 本协议内容同时包括公司已经发布及后续可能不断发布的关于本服务的相关协议、规则等内容。前述内容一经正式发布,并以适当的方式送达您(服务购买页面、网站公布、系统通知等),即为本协议不可分割的组成部分,您应同样遵守。",
},
{
type: "paragraph",
text: "1.4 为了给会员用户提供更多选择,公司可能会与第三方合作推出联合会员服务,或为购买会员服务的用户赠送第三方会员服务。如果您选择购买或接受以上服务,则表示您理解并认可,我们仅提供射灵星球小程序付费会员服务,不对第三方的会员服务负责。第三方会员服务的权益、使用、收费规则等,将由第三方执行和向您解释。",
},
{ type: "heading", text: "二、服务开通、权益内容、服务期限及收费标准" },
{
type: "paragraph",
text: "2.1 本服务仅支持射灵星球小程序登录用户开通。您在开通本服务时,应仔细核对已登录的账号名称、会员类型、付费类型、服务期限等具体信息。因您个人原因充错账号、开通错服务类型或服务时长的,公司不予退还已收取的费用。",
},
{
type: "paragraph",
text: "2.2 您可通过已有和未来新增的支付渠道或公司指定支付方式完成本服务的购买。当您根据本服务页面提示进行确认、并成功支付了会员服务费和/或完成了成为付费会员的所有程序,您将成为射灵星球小程序付费会员。",
},
{
type: "paragraph",
text: "2.3 本服务的期限(以下简称“服务期限”)以您选择并成功开通的期限为准。会员计费与服务时长采用自然时间(自然月/自然年)方式计算。具体截止时间为相应续费到期自然日的对应时间点。服务期限届满后,公司将停止继续向您提供本服务。如您同时开通了多种会员服务,其消耗及重叠规则以开通页面的官方具体规则为准。",
},
{
type: "paragraph",
text: "2.4 本服务的收费标准及具体权益内容以本服务开通页面所展示的为准。基于市场与业务的发展及服务权益调整,公司可能会随时调整本服务开通所需费用及/或具体权益内容。费用或权益内容调整自公布之日起生效,您在调整生效前已开通的服务将不受影响,但该服务到期后的续费开通或自动续费扣款,则需按照调整后的标准执行。",
},
{
type: "paragraph",
text: "2.5 射灵星球小程序付费会员服务为虚拟内容消费,除因本服务存在重大瑕疵导致您完全无法使用等公司的违约情形、法律法规要求必须退款或公司同意退款等情形外,完成支付和购买后,不可进行退款或转让。您在会员到期前主动取消或终止会员资格的,已支付费用不予退还。",
},
{
type: "paragraph",
text: "2.6 为了保护您的账号安全、防止账号被盗风险,我们会对您开通会员服务的账号登录设备及使用范围作出合理限制。您不得将账号提供给多名第三方同时使用,否则公司有权根据安全风控能力随时调整或限制您的登录及使用权限。",
},
{ type: "heading", text: "三、连续购买和自动续费服务" },
{ type: "paragraph", text: "3.1 自动续费服务类型/计费周期" },
{
type: "paragraph",
text: "射灵星球小程序付费会员自动续费服务包含「连续包月」、「连续包年」等服务。本服务的自动续费及对应计费周期采用按自然时间(自然月/自然年)对日顺延的方式计算。即:若您在某月18日开通连续包月服务,则下一次自动扣费续费日期为次月18日;若开通当月无对应日期的(例如1月31日开通,2月无31日),则自动调整为该自然月最后一日进行扣费续费。公司可能会根据会员需求增加或调整自动续费服务类型,具体服务类型以服务开通页面展示为准。",
},
{ type: "paragraph", text: "3.2 自动续费服务说明" },
{
type: "paragraph",
text: "(1)本自动续费服务基于您对于自动续费的需求,在您已开通会员服务的前提下,为避免您因疏忽或其他原因导致未能及时续费而中断服务,您授权公司可在您的会员服务期限到期前,从您开通本自动续费服务时所绑定的Apple ID账户余额、或绑定的第三方支付账户(包括但不限于微信支付、支付宝支付等)余额中自动代扣下一个计费周期的费用,从而延长对应的会员服务期限。",
},
{
type: "paragraph",
text: "(2)自动续费扣费日期以您开通本自动续费服务的支付渠道实际扣款时间为准:如您是通过苹果公司iOS渠道开通本服务,扣费日期通常为开通服务之日起每个计费周期的对应日期前24小时内;如您是通过安卓Android渠道或直接在小程序内通过微信支付等渠道开通本服务,扣费日期通常为每个计费周期到期前1至2日。如支付渠道根据实际情况或相关平台规则自行调整扣费时间的,以实际扣款时间为准。",
},
{
type: "paragraph",
text: "(3)请您关注上述账户及可扣款余额情况,保证上述账户扣款成功以确保会员服务顺利续期。如因上述账户中可扣款余额不足导致续费失败,公司有权中断或终止相应的会员权益及服务,由此导致的风险或损失将由您自行承担。",
},
{
type: "paragraph",
text: "(4)为了方便您知悉自动续费情况,公司将在扣费日期前5日以站内信、小程序系统消息推送或短信等方式提示您即将发生续期扣费的信息,第三方支付渠道也可能向您发送通知提醒即将扣费。",
},
{
type: "paragraph",
text: "(5)系统会在每个扣费日期自动从您开通服务时所绑定的支付账户扣费。如扣费日期因账户问题或余额不足导致续费失败,若您未主动明确取消本服务,将视为您同意公司在扣费日期后继续发出扣款尝试,一旦您的账户扣款成功,公司将继续为您提供相应会员服务权益。",
},
{
type: "paragraph",
text: "(6)如您未在每个扣费日期前操作取消自动续费服务,则公司将根据此前与您达成的委托在扣费日期继续发出续费代扣指令,一旦扣款成功,公司将自动为您开通下一个计费周期的连续服务。对于已成功完成会员服务续费的费用,原则上不予退还。",
},
{
type: "paragraph",
text: "(7)您在自动续费服务期间可以额外购买或通过参与活动等方式获取付费会员服务,会员服务期限将在原服务期限基础上相应延长,但如您未主动取消自动续费服务,系统仍会按照您所开通的自动续费服务进行扣费及续期。",
},
{ type: "paragraph", text: "3.3 自动续费服务的退订" },
{
type: "paragraph",
text: "(1)您有权决定是否取消自动续费服务,如果您希望取消自动续费服务,需在每个扣费日期前(至少提前24小时)操作取消,否则将视为您同意继续授权自动续费。",
},
{
type: "paragraph",
text: "(2)购买自动续费服务后,您可在小程序的会员管理页中关闭自动续费,或通过如下第三方支付渠道方式取消自动续费服务:",
},
{
type: "list",
items: [
"iOS用户(Apple ID订阅):打开苹果手机“设置” -> 点击顶部的“Apple ID/机主姓名” -> 进入“订阅” -> 选择“射灵星球” -> 点击“取消订阅”;或打开“App Store” -> 点击右上角头像进入“账户” -> 点击“订阅”进行管理。",
"微信支付自动续费用户:打开微信APP -> 点击“我” -> “服务” -> “钱包” -> “支付设置” -> “自动续费” -> 选择“射灵星球小程序会员” -> 点击“关闭服务”。",
"支付宝自动续费用户:打开支付宝APP -> 点击“我的” -> “设置” -> “支付设置” -> “免密支付/自动扣款” -> 选择“射灵星球小程序会员” -> 点击“关闭服务”。",
],
},
{
type: "paragraph",
text: "3.4 公司有权根据市场情况、业务规划、运营策略变化等原因单方面决定停止向您提供自动续费服务,并通过公告或站内信等方式通知您,您的付费会员服务期限自当前服务期限届满之日起终止。",
},
{ type: "heading", text: "四、服务使用规范与限制" },
{
type: "paragraph",
text: "4.1 本服务及会员权益仅限您本人使用。未经公司书面同意,禁止以任何形式赠与、借用、出租、转让、售卖或以其他方式许可他人使用该账号及账号项下的会员服务与权益。如发生泄漏、遗失、被盗等行为,而该等行为并非公司过错导致,损失将由您自行承担。",
},
{
type: "paragraph",
text: "4.2 如您存在如下违法或不当使用本服务的情形,公司有权取消您的会员资格、作废会员权益且不予退还您所支付的会员服务费用,并有权向您追偿给公司造成的损失:",
},
{
type: "list",
items: [
"以盗窃、利用系统漏洞、通过任何非公司官方或授权渠道获得本服务的行为;",
"利用本服务进行盈利或非法获利,或以各种形式转让、借用您的会员权益;",
"通过非法手段对本服务会员账户的服务期限、交易状态进行修改或篡改;",
"主动对公司用于保护本服务会员权益的任何安全措施技术进行破解、更改、反操作或破坏;",
"其他违反法律法规、诚实信用原则、服务协议及相关小程序运营规则的行为。",
],
},
{ type: "heading", text: "五、服务中止、终止及变更" },
{
type: "paragraph",
text: "5.1 因国家或相关政府监管部门要求、发生不可抗力事件、或由于用户违反本协议约定,公司有权中止或终止向用户提供服务。",
},
{
type: "paragraph",
text: "5.2 您知悉并确认,您开通本服务后,如您中途主动取消本服务、放弃会员权益或终止资格,您将无法退还部分或全部会员服务费用。本协议终止后,用户无权要求公司继续向其提供任何服务,且不影响终止前基于本协议已产生的权利义务。",
},
{
type: "paragraph",
text: "5.3 公司可根据国家法律法规变化、业务实际变更需求、保护用户权益的需要等,不时修改本协议,并按照法律法规规定的程序及方式进行公告。如用户不同意变更后的内容,则用户有权主动停止使用本服务;如用户在变更内容生效后仍继续使用本服务,即视为用户同意该等内容的变更。",
},
{ type: "heading", text: "六、责任限制与免责条款" },
{
type: "paragraph",
text: "6.1 您理解并同意,本服务是按照现有技术和条件所能达到的现状提供的。公司将尽最大努力确保服务的连贯性和安全性,但不能随时预见和防范技术以及其他风险,包括但不限于不可抗力、网络原因、第三方服务瑕疵等原因可能导致的服务中断、数据丢失以及其他的损失和风险。",
},
{
type: "paragraph",
text: "6.2 基于收益与赔偿相一致及公平合理的原则,如因公司原因造成本服务不正常中断或服务不可用,您所可能获得的最高赔偿额不超过本协议项下公司就该计费周期已实际收取您的相关服务费用总额。",
},
{ type: "heading", text: "七、法律适用与争议解决" },
{
type: "paragraph",
text: "7.1 本协议的成立、生效、履行、解释及争议的解决均应适用中华人民共和国法律。",
},
{
type: "paragraph",
text: "7.2 本协议的签订地为广东省广州市南沙区。若您因本协议与公司发生任何争议,双方应尽量友好协商解决;如协商不成的,任何一方均同意应将相关争议提交至本协议签订地有管辖权的人民法院诉讼解决。",
},
{
type: "paragraph",
text: "7.3 本协议任一条款被视为废止、无效或不可执行,该条应视为可分的且并不影响本协议其余条款的有效性及可执行性。",
},
],
company: "广州光点飞舞网络有限公司",
},
deduct: {
navTitle: "扣款授权服务协议",
title: "扣费授权服务协议",
meta: "版本号:V1.0 生效日期:2026年6月22日",
content: [
{ type: "heading", text: "一、授权声明" },
{
type: "paragraph",
text: "本人(即授权人,以下简称“乙方”)作为射灵星球小程序的注册用户,在自愿、平等、知悉全部授权内容的基础上,同意向广州光点飞舞网络有限公司(以下简称“甲方”)及甲方委托的第三方支付机构(包含微信支付、支付宝、苹果支付等,以下简称“支付机构”)作出本扣费授权,双方就授权扣费相关事宜达成如下协议。",
},
{ type: "heading", text: "二、授权主体" },
{
type: "paragraph",
text: "授权人(乙方):射灵星球小程序注册用户,用户ID以平台系统记录为准。",
},
{
type: "paragraph",
text: "被授权人(甲方):广州光点飞舞网络有限公司,作为会员服务提供方及扣费指令发起方。",
},
{
type: "paragraph",
text: "支付执行方:乙方绑定的第三方支付机构,受甲方委托执行扣费操作。",
},
{ type: "heading", text: "三、授权内容" },
{
type: "paragraph",
text: "授权场景:乙方开通射灵星球会员自动续费服务后,授权甲方在每个会员周期届满前,向支付机构发起扣费指令,用于支付下一周期的会员服务费用。",
},
{
type: "paragraph",
text: "授权金额:扣费金额以乙方开通时选择的自动续费套餐对应价格为准,具体以会员购买页面公示价格为准;若价格调整,甲方将提前通过公示或通知形式告知乙方,乙方继续使用服务视为认可并接受调整后的金额。",
},
{
type: "paragraph",
text: "授权支付账户:乙方开通自动续费时绑定的微信支付、支付宝等第三方支付账户,账户信息以支付机构记录为准。",
},
{
type: "paragraph",
text: "授权扣费次数:本授权为周期性授权。在授权有效期内,甲方可按会员周期重复发起扣费指令,直至乙方依法撤销授权为止。",
},
{ type: "heading", text: "四、授权有效期" },
{
type: "paragraph",
text: "1. 本授权自乙方点击确认开通自动续费服务之日起生效,至乙方成功取消自动续费服务之日终止。",
},
{
type: "paragraph",
text: "2. 若乙方注销射灵星球小程序账号,本授权自账号注销完成之日自动终止。",
},
{
type: "paragraph",
text: "3. 若因国家政策调整、支付机构规则变更、乙方支付账户注销/冻结等非甲方主观原因导致授权无法履行的,本授权自动终止。",
},
{ type: "heading", text: "五、扣费与提醒规则" },
{
type: "paragraph",
text: "1. 扣费提醒:甲方将在每个自动续费扣费日期前5日,通过微信服务通知、小程序系统消息或短信等显著方式提示乙方即将发生续期扣费的信息,以保障乙方的知情权与选择权。",
},
{
type: "paragraph",
text: "2. 扣费时机:甲方将在乙方当前会员有效期届满前24小时内发起下一周期的扣费指令,支付机构根据指令从乙方授权账户中划扣对应费用。",
},
{
type: "paragraph",
text: "3. 扣费失败处理:若因账户余额不足等原因导致首次扣费失败的,甲方及支付机构可在合规范围内依法尝试补扣;若补扣仍失败或账户处于异常状态的,本期自动续费暂停,乙方会员到期后自动失效。",
},
{
type: "paragraph",
text: "4. 扣费凭证:支付机构的扣费记录作为扣费成功的有效凭证,乙方可在支付账户账单中查询明细;甲方同步为乙方提供电子扣费记录,可在会员中心查看。",
},
{ type: "heading", text: "六、授权的变更与撤销" },
{
type: "paragraph",
text: "1. 授权变更:本授权内容如需变更(如更换支付账户、调整续费套餐),乙方需先取消原自动续费服务,再重新开通新套餐。新授权自重新开通成功之日起生效,原授权同步终止。",
},
{
type: "paragraph",
text: "2. 授权撤销:乙方可随时退订本自动续费服务,解约后不影响乙方已生效周期的会员服务。根据乙方开通时选择的支付执行方,具体撤销路径如下:",
},
{
type: "list",
items: [
"微信支付用户:可通过微信APP内(路径:我 -> 服务 -> 钱包 -> 支付设置 -> 自动续费)或在小程序会员中心页面撤销本授权。",
"支付宝用户:可通过支付宝APP内(路径:我的 -> 设置 -> 支付设置 -> 免密支付/自动扣款)或在小程序会员中心页面撤销本授权。",
"苹果支付(iOS/App Store订阅)用户:必须通过苹果系统自带的功能进行取消(路径:iOS设备“设置” -> 点击顶部的Apple ID -> 订阅 -> 选择“射灵星球” -> 取消订阅)。",
],
},
{
type: "paragraph",
text: "3. 退订生效时效:",
},
{
type: "list",
items: [
"针对微信支付和支付宝:撤销操作成功后,本授权即时终止,甲方不得再发起新的扣费指令。因第三方支付平台系统结算延迟等客观原因,导致退订生效前系统已自动扣款成功的,该期会员权益将正常发放,已扣费用原则上不予退还。",
"针对苹果支付:根据苹果公司政策,乙方需在当前计费周期届满前至少24小时手动取消订阅,否则苹果系统可能会自动续订并扣款。苹果渠道的扣费与退款均由苹果公司独立处理,甲方无权干涉,因乙方未及时取消导致扣费的,由乙方自行承担或向苹果公司申诉。",
],
},
{ type: "heading", text: "七、免责条款" },
{
type: "paragraph",
text: "1. 因乙方支付账户余额不足、账户冻结、挂失、注销、限额等非甲方原因导致扣费失败的,甲方不承担任何责任,由此造成的会员权益中断等后果由乙方自行承担。",
},
{
type: "paragraph",
text: "2. 因支付机构系统故障、网络中断、政策调整等第三方不可抗力或外部原因导致扣费延迟、失败或错误的,甲方将协助乙方协调解决,但不承担相应的赔偿责任。",
},
{
type: "paragraph",
text: "3. 因乙方泄露支付账户密码、账号被盗用等自身保管不当原因导致的异常扣费,甲方不承担责任,乙方应自行向支付机构或公安机关主张权利。",
},
{ type: "heading", text: "八、信息保密" },
{
type: "paragraph",
text: "1. 甲方及支付机构应对乙方的授权信息、支付信息、个人身份信息严格保密,不得用于本授权以外的任何用途。",
},
{
type: "paragraph",
text: "2. 除法律法规规定、司法机关或监管部门依法要求外,甲方不得向任何第三方泄露乙方的授权及支付相关信息。",
},
{ type: "heading", text: "九、争议解决" },
{
type: "paragraph",
text: "1. 本授权协议的订立、效力、履行及争议解决均适用中华人民共和国法律。",
},
{
type: "paragraph",
text: "2. 因本协议产生的任何争议,双方应尽量友好协商解决;协商不成的,任何一方均可向甲方住所地(广东省广州市天河区)有管辖权的人民法院提起诉讼。",
},
{ type: "heading", text: "十、其他" },
{
type: "paragraph",
text: "1. 本协议为《射灵星球小程序会员服务协议》的配套协议,与该协议具有同等法律效力;本协议未约定事项,参照主协议执行。",
},
{
type: "paragraph",
text: "2. 甲方有权根据业务及监管要求调整本协议内容,调整后的协议将在平台公示,乙方继续使用自动续费服务视为接受调整后的内容。",
},
{
type: "paragraph",
text: "3. 甲方客服联系方式:请通过射灵星球小程序内【在线客服】或发送邮件至官方客服邮箱进行反馈。",
},
],
company: "广州光点飞舞网络有限公司",
},
};
export const getMemberAgreement = (type) => {
return memberAgreements[type] || memberAgreements.renew;
};
-894
View File
@@ -1,894 +0,0 @@
<script setup>
import { computed, ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import Signin from "@/components/Signin.vue";
import { virtualPayOrderAPI, getAppConfig, getHomeData, getOrderDetailAPI } from "@/apis";
import { capsuleHeight, wxLogin } from "@/util";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user, config } = storeToRefs(store);
const { updateConfig, updateUser } = store;
const currentTypeIndex = ref(1);
const selectedPackageIndex = ref(0);
const showModal = ref(false);
const loadingConfig = ref(false);
const paying = ref(false);
const refreshing = ref(false);
// 会员页核心展示数据:视觉、权益按蓝湖当前两张设计稿拆分,套餐完全使用接口数据。
const memberTypes = [
{
key: "normal",
tab: "VIP",
title: "普通会员",
prefix: "成为射灵星球",
desc: "特享约战竞技次数包、专属会员标识",
benefitTitle: "普通会员专属权益",
themeClass: "vip-page--normal",
heroCard: "https://static.shelingxingqiu.com/shootmini/static/vip/vip-title.png",
activeHeroCard: "https://static.shelingxingqiu.com/shootmini/static/vip/vip-title2.png",
orderIcon: "../../static/vip/vip-order.png",
heroBadge: "../../static/vip/normal-hero-badge.png",
buttonClass: "activate-btn--normal",
benefits: [
{ label: "专属会员标识", icon: "../../static/vip/vip-badge.png" },
{ label: "教练点评", icon: "../../static/vip/vip-comment.png" },
{ label: "专享VIP客服", icon: "../../static/vip/vip-service.png" },
{ label: "排位赛\n每日+20次", icon: "../../static/vip/vip-rank.png" },
{ label: "约战\n每日+20次", icon: "../../static/vip/vip-battle.png" },
],
},
{
key: "super",
tab: "SVIP",
title: "超级会员",
prefix: "成为射灵星球",
desc: "尊享专属特效、无限制约战竞技、专属会员标识",
benefitTitle: "超级会员专属权益",
themeClass: "vip-page--super",
heroCard: "https://static.shelingxingqiu.com/shootmini/static/vip/svip-title.png",
activeHeroCard: "https://static.shelingxingqiu.com/shootmini/static/vip/svip-title2.png",
orderIcon: "../../static/vip/svip-order.png",
heroBadge: "../../static/vip/super-hero-badge.png",
buttonClass: "activate-btn--super",
benefits: [
{ label: "专属落点标识", icon: "../../static/vip/svip-point.png" },
{ label: "专属命中效果", icon: "../../static/vip/svip-hit.png" },
{ label: "专属射箭效果", icon: "../../static/vip/svip-arrow.png" },
{ label: "专属会员标识", icon: "../../static/vip/svip-badge.png" },
{ label: "教练点评", icon: "../../static/vip/svip-comment.png" },
{ label: "约战无限制", icon: "../../static/vip/svip-battle.png" },
{ label: "排位赛无限制", icon: "../../static/vip/svip-rank.png" },
{ label: "专享SVIP客服", icon: "../../static/vip/svip-service.png" },
],
},
];
const currentType = computed(() => memberTypes[currentTypeIndex.value]);
// 后端到期时间可能是秒级时间戳、毫秒级时间戳或日期字符串,这里统一转成毫秒。
const toTimestamp = (value) => {
if (!value) return 0;
const numberValue = Number(value);
if (!Number.isNaN(numberValue)) {
return numberValue < 1000000000000 ? numberValue * 1000 : numberValue;
}
const time = new Date(value).getTime();
return Number.isNaN(time) ? 0 : time;
};
// 当前卡片只关心本 tab 对应的会员到期时间,普通会员和超级会员互不兜底。
const getVipExpiredValue = (type, source = user.value) => {
if (!source) return 0;
return type.key === "super" ? source.superVipExpiredAt : source.normalVipExpiredAt;
};
// 未过期才展示“会员生效中”样式,已过期或无值继续展示未开通样式。
const isVipActive = (type) => {
return toTimestamp(getVipExpiredValue(type)) > Date.now();
};
// 会员卡片展示完整到期时间。
const formatVipDate = (value) => {
const timestamp = toTimestamp(value);
if (!timestamp) return "";
const date = new Date(timestamp);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, "0");
const hour = String(date.getHours()).padStart(2, "0");
const minute = String(date.getMinutes()).padStart(2, "0");
const second = String(date.getSeconds()).padStart(2, "0");
return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
};
// 会员生效时使用 title2 切图,未生效时沿用原来的开通引导图。
const getHeroCard = (type) => {
return isVipActive(type) ? type.activeHeroCard : type.heroCard;
};
const getActiveVipExpiredDate = (type) => {
return formatVipDate(getVipExpiredValue(type));
};
// 设计稿里的“下期自动续费”按到期日前一天展示。
const getActiveVipRenewDate = (type) => {
const timestamp = toTimestamp(getVipExpiredValue(type));
if (!timestamp) return "";
return formatVipDate(timestamp - 24 * 60 * 60 * 1000);
};
const configMenus = computed(() => {
return config.value.vipMenus || [];
});
const getMenuName = (item) => {
return item.name || item.vipName || item.title || "";
};
const formatPrice = (value) => {
if (value === undefined || value === null || value === "") return "";
return String(value).replace("¥", "").replace("¥", "");
};
const getMenuPrice = (item) => {
return formatPrice(item && item.price);
};
const getMenuOriginalPrice = (item) => {
return formatPrice(item && item.originalPrice);
};
const getMenuSortValue = (item) => {
const value = item && item.sort;
if (value === undefined || value === null || value === "") return Number.MAX_SAFE_INTEGER;
const sort = Number(value);
return Number.isFinite(sort) ? sort : Number.MAX_SAFE_INTEGER;
};
const sortMenusBySort = (menus = []) => {
return menus
.map((item, index) => ({ item, index }))
.sort((a, b) => {
const sortDiff = getMenuSortValue(a.item) - getMenuSortValue(b.item);
return sortDiff || a.index - b.index;
})
.map(({ item }) => item);
};
const getMenuType = (item) => {
const vipType = Number(item.vipType);
if (vipType === 1) return "normal";
if (vipType === 2) return "super";
const type = String(item.type || "").toLowerCase();
if (["super", "svip"].includes(type)) return "super";
if (["normal", "vip"].includes(type)) return "normal";
const name = getMenuName(item);
if (/超级|SVIP/i.test(name)) return "super";
if (/普通|VIP|会员/i.test(name)) return "normal";
return "";
};
const getPackages = (type) => {
return sortMenusBySort(configMenus.value)
.filter((item) => getMenuType(item) === type.key)
.map((item) => {
return {
source: item,
id: item.id,
name: getMenuName(item),
price: getMenuPrice(item),
originalPrice: getMenuOriginalPrice(item),
icon: item.icon,
};
});
};
const currentPackages = computed(() => {
return getPackages(currentType.value);
});
const selectedPackage = computed(() => {
return currentPackages.value[selectedPackageIndex.value] || currentPackages.value[0];
});
const switchType = (index) => {
currentTypeIndex.value = index;
selectedPackageIndex.value = 0;
};
const onSwiperChange = (event) => {
currentTypeIndex.value = event.detail.current;
selectedPackageIndex.value = 0;
};
const selectPackage = (index) => {
selectedPackageIndex.value = index;
};
const toPackageDesc = () => {
uni.navigateTo({
url: "/pages/member/vip-intro",
});
};
const toOrderPage = () => {
uni.navigateTo({
url: "/pages/member/orders",
});
};
const toAgreement = (type) => {
uni.navigateTo({
url: `/pages/member/agreement?type=${type}`,
});
};
const loadVipConfig = async () => {
if (loadingConfig.value || configMenus.value.length) return;
loadingConfig.value = true;
try {
const result = await getAppConfig();
if (result) updateConfig(result);
} catch (error) {
console.log("load vip config error", error);
} finally {
loadingConfig.value = false;
}
};
const refreshUserAfterPay = async () => {
refreshing.value = true;
try {
const result = await getHomeData();
if (result.user) {
updateUser(result.user);
}
} catch (error) {
console.log("refresh user after pay error", error);
} finally {
refreshing.value = false;
}
};
const getVirtualPaySignData = (result) => {
// 后端可能返回字符串或对象,这里统一转成微信虚拟支付需要的 JSON 字符串。
const signDataObj = typeof result?.signData === "string" ? JSON.parse(result.signData) : result?.signData;
if (!signDataObj) return "";
// 微信虚拟支付短剧/虚拟商品模式需要购买数量;后端未返回时使用订单数量兜底。
if (!signDataObj.buyQuantity) {
signDataObj.buyQuantity = result.quantity || 1;
}
return JSON.stringify(signDataObj);
};
const isVirtualPayCancel = (res = {}) => {
const message = String(res.errMsg || res.message || "").toLowerCase();
const errCode = Number(res.errCode);
const errno = Number(res.errno);
return message.includes("cancel") || errCode === -23 || errno === -2;
};
const onPay = async () => {
if (paying.value || refreshing.value) return;
if (!user.value.id) {
showModal.value = true;
return;
}
if (!configMenus.value.length) {
await loadVipConfig();
}
const vipId = selectedPackage.value && selectedPackage.value.id;
if (!vipId) {
uni.showToast({
title: loadingConfig.value ? "套餐配置加载中" : "套餐暂不可购买",
icon: "none",
});
return;
}
if (typeof wx === "undefined" || !wx.requestVirtualPayment) {
uni.showToast({
title: "当前环境不支持微信虚拟支付",
icon: "none",
});
return;
}
paying.value = true;
let waitingPayment = false;
let payToast = null;
try {
// 微信虚拟支付创建订单前需要登录 code,服务端用它换取本次支付签名参数。
const wxResult = await wxLogin();
const result = await virtualPayOrderAPI(vipId, wxResult.code);
const finalSignData = getVirtualPaySignData(result);
if (!finalSignData || !result?.paySig || !result?.signature) {
uni.showToast({
title: "支付参数生成失败",
icon: "none",
});
refreshing.value = false;
return;
}
wx.requestVirtualPayment({
signData: finalSignData,
paySig: result.paySig,
signature: result.signature,
mode: "short_series_goods",
async success() {
payToast = {
title: "支付成功",
icon: "success",
};
if (result?.outTradeNo) {
try {
const orderDetail = await getOrderDetailAPI(result.outTradeNo);
console.log("virtual pay order detail", orderDetail);
} catch (error) {
console.log("virtual pay order detail error", error);
}
}
// 客户端支付成功后,会员是否真正生效仍以服务端用户信息刷新结果为准。
refreshUserAfterPay();
},
fail(res) {
console.log("virtual pay error", res);
if (isVirtualPayCancel(res)) {
payToast = {
title: "支付已取消",
icon: "none",
};
return;
}
payToast = {
title: res.message || "支付失败,请稍后重试",
icon: "none",
};
},
complete() {
paying.value = false;
if (payToast) {
setTimeout(() => {
uni.showToast(payToast);
}, 200);
}
},
});
waitingPayment = true;
} catch (error) {
console.log("create virtual pay order error", error);
uni.showToast({
title: error.message || "下单失败",
icon: "none",
});
} finally {
if (!waitingPayment) paying.value = false;
}
};
onShow(loadVipConfig);
</script>
<template>
<Container title="" :bgType="10" :scroll="false" :showBottom="false">
<view class="vip-page" :class="currentType.themeClass">
<view class="type-tabs" :style="{ top: capsuleHeight + 'px' }">
<view
v-for="(item, index) in memberTypes"
:key="item.key"
class="type-tab"
:class="{ 'type-tab--active': currentTypeIndex === index }"
@click="switchType(index)"
>
<text>{{ item.tab }}</text>
<view class="type-tab__indicator" />
</view>
</view>
<swiper
class="type-swiper"
:current="currentTypeIndex"
:duration="260"
@change="onSwiperChange"
>
<swiper-item v-for="type in memberTypes" :key="type.key">
<scroll-view scroll-y class="type-scroll" :show-scrollbar="false">
<view class="vip-content">
<view
class="hero-card"
:class="{ 'hero-card--active': isVipActive(type) }"
>
<image class="hero-card__bg" :src="getHeroCard(type)" mode="scaleToFill" />
<!-- 生效态卡片使用 title2 底图补充有效期和订单入口叠层 -->
<view v-if="isVipActive(type)" class="hero-card__content">
<text class="hero-card__date">
有效期至{{ getActiveVipExpiredDate(type) }}
</text>
<!-- <text v-if="type.key === 'super'" class="hero-card__renew">
下期会员将于{{ getActiveVipRenewDate(type) }}自动续费
</text> -->
<view class="hero-card__order" @click.stop="toOrderPage">
<image class="hero-card__order-icon" :src="type.orderIcon" mode="aspectFit" />
<text>订单管理</text>
</view>
</view>
</view>
<view class="benefit-title">
<view class="benefit-title__line" />
<text>{{ type.benefitTitle }}</text>
<view class="benefit-title__line" />
</view>
<view class="benefit-grid" :class="{ 'benefit-grid--normal': type.key === 'normal' }">
<view
v-for="benefit in type.benefits"
:key="benefit.label"
class="benefit-item"
>
<view class="benefit-icon">
<image class="benefit-icon__img" :src="benefit.icon" mode="aspectFit" />
</view>
<text class="benefit-item__label">{{ benefit.label }}</text>
</view>
</view>
<view class="package-header">
<text class="package-header__title">选择套餐</text>
<view class="package-header__link" @click="toPackageDesc">
<text>套餐说明</text>
<image
class="package-header__icon"
src="../../static/enter.png"
mode="aspectFit"
/>
</view>
</view>
<scroll-view scroll-x class="package-scroll" :show-scrollbar="false">
<view class="package-list">
<view
v-for="(pack, index) in getPackages(type)"
:key="`${type.key}-${pack.id || pack.name || index}`"
class="package-card"
:class="{ 'package-card--active': selectedPackageIndex === index }"
@click="selectPackage(index)"
>
<view class="package-card__inner">
<text class="package-name">{{ pack.name }}</text>
<view class="package-price">
<text class="package-price__symbol">¥</text>
<text class="package-price__value">{{ pack.price }}</text>
</view>
<view v-if="pack.originalPrice" class="package-origin">
<text>¥{{ pack.originalPrice }}</text>
<view class="package-origin__line" />
</view>
</view>
</view>
</view>
</scroll-view>
<button
hover-class="none"
class="activate-btn"
:class="type.buttonClass"
:disabled="loadingConfig || paying || refreshing || !selectedPackage"
@click="onPay"
>
<text v-if="loadingConfig">加载套餐中</text>
<text v-else-if="paying">创建订单中</text>
<text v-else-if="refreshing">刷新会员状态中</text>
<text v-else-if="selectedPackage">¥ {{ selectedPackage.price }} 一键激活</text>
<text v-else>套餐暂不可购买</text>
</button>
<view class="agreement">
<text>支付即同意</text>
&nbsp;<text class="agreement__link" @click.stop="toAgreement('renew')">会员自动续费服务协议</text>
&nbsp;<text class="agreement__link" @click.stop="toAgreement('deduct')">扣款授权服务协议</text>
</view>
</view>
</scroll-view>
</swiper-item>
</swiper>
<Signin :show="showModal" :onClose="() => (showModal = false)" />
</view>
</Container>
</template>
<style scoped>
.vip-page {
position: relative;
width: 100%;
height: 100%;
}
.type-tabs {
position: fixed;
left: 0;
z-index: 998;
width: 50%;
height: 50px;
margin-left: 50%;
transform:translateX(-60%);
display: flex;
align-items: center;
justify-content: center;
pointer-events: auto;
}
.type-tab {
width: 132rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.45);
font-size: 34rpx;
font-weight: 700;
font-style: italic;
}
.type-tab__indicator {
width: 40rpx;
height: 4rpx;
border-radius: 4rpx;
margin-top: 8rpx;
background-color: transparent;
}
.type-tab--active {
color: #ffffff;
}
.vip-page--normal .type-tab--active .type-tab__indicator {
background-color: #ffffff;
}
.vip-page--super .type-tab--active {
color: #fedab5;
}
.vip-page--super .type-tab--active .type-tab__indicator {
background-color: #fedab5;
}
.type-swiper {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
}
.type-scroll {
width: 100%;
height: 100%;
}
.vip-content {
min-height: 100%;
padding: 32rpx 24rpx 52rpx;
box-sizing: border-box;
}
.hero-card {
position: relative;
width: 702rpx;
height: 260rpx;
overflow: hidden;
}
.hero-card__bg {
position: absolute;
left: 0;
top: 0;
width: 702rpx;
height: 260rpx;
}
.hero-card__content {
position: relative;
z-index: 1;
/* 对齐 title2 切图左侧预留文案区域。 */
padding: 132rpx 0 0 44rpx;
display: flex;
flex-direction: column;
align-items: flex-start;
box-sizing: border-box;
}
.hero-card__date,
.hero-card__renew {
color: #8d6d55;
font-size: 24rpx;
line-height: 34rpx;
}
.vip-page--normal .hero-card__date,
.vip-page--normal .hero-card__renew {
color: #555555;
}
.hero-card__order {
display: flex;
align-items: center;
margin-top: 10rpx;
color: #6d5644;
font-size: 24rpx;
line-height: 34rpx;
text-decoration: underline;
}
.vip-page--normal .hero-card__order {
color: #555555;
}
.hero-card__order-icon {
width: 28rpx;
height: 32rpx;
margin-right: 8rpx;
flex-shrink: 0;
}
.benefit-title {
display: flex;
align-items: center;
justify-content: center;
margin-top: 38rpx;
color: #ffffff;
font-size: 24rpx;
line-height: 34rpx;
}
.benefit-title__line {
width: 14rpx;
height: 2rpx;
background-color: #ffffff;
margin: 0 10rpx;
}
.benefit-grid {
display: flex;
flex-wrap: wrap;
width: 622rpx;
margin: 38rpx auto 0;
}
.benefit-grid--normal {
width: 672rpx;
}
.benefit-item {
width: 144rpx;
height: 122rpx;
margin-right: 94rpx;
margin-bottom: 30rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.benefit-item:nth-child(3n) {
margin-right: 0;
}
.benefit-grid--normal .benefit-item {
margin-right: 120rpx;
}
.benefit-grid--normal .benefit-item:nth-child(3n) {
margin-right: 0;
}
.benefit-icon {
width: 80rpx;
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
}
.benefit-icon__img {
width: 80rpx;
height: 80rpx;
display: block;
}
.benefit-item__label {
margin-top: 8rpx;
color: #ffffff;
opacity: 0.7;
font-size: 24rpx;
line-height: 34rpx;
text-align: center;
white-space: pre-line;
}
.package-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 56rpx;
padding-right: 8rpx;
}
.benefit-grid--normal + .package-header {
margin-top: 146rpx;
}
.package-header__title {
color: #ffffff;
font-size: 28rpx;
line-height: 40rpx;
font-weight: 500;
}
.vip-page--super .package-header__title {
color: #e7ba80;
}
.package-header__link {
display: flex;
align-items: center;
color: #999999;
font-size: 22rpx;
line-height: 32rpx;
}
.package-header__icon {
width: 24rpx;
height: 28rpx;
}
.package-scroll {
width: 100%;
margin-top: 40rpx;
white-space: nowrap;
}
.package-list {
display: inline-flex;
min-width: 100%;
padding: 6rpx 84rpx 6rpx 6rpx;
box-sizing: border-box;
}
.package-card {
position: relative;
width: 264rpx;
flex: 0 0 264rpx;
height: 224rpx;
border-radius: 16rpx;
border: 2rpx solid #999999;
margin-right: 32rpx;
padding: 0;
overflow: hidden;
box-sizing: border-box;
color: #999999;
}
.package-card__inner {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
border-radius: inherit;
}
.package-card--active {
border-width: 6rpx;
border-color: #fed847;
}
.vip-page--super .package-card--active {
border: none;
padding: 6rpx;
background: linear-gradient(180deg, #fef3e6 0%, #f0c191 100%);
}
.vip-page--super .package-card--active .package-card__inner {
border-radius: 10rpx;
background-color: #050b19;
}
.package-name {
font-size: 24rpx;
line-height: 34rpx;
}
.package-price {
display: flex;
align-items: baseline;
margin-top: 12rpx;
color: #ffffff;
}
.package-card--active .package-price {
color: #fed847;
}
.vip-page--super .package-card--active .package-price {
color: #ffe8cd;
}
.package-price__symbol {
font-size: 30rpx;
line-height: 36rpx;
font-weight: 700;
}
.package-price__value {
font-size: 56rpx;
line-height: 66rpx;
font-weight: 700;
}
.package-origin {
position: relative;
margin-top: 2rpx;
color: #999999;
font-size: 24rpx;
line-height: 34rpx;
}
.package-origin__line {
position: absolute;
left: -4rpx;
right: -4rpx;
top: 16rpx;
height: 2rpx;
background-color: #999999;
}
.activate-btn {
width: 686rpx;
height: 88rpx;
border-radius: 44rpx;
margin: 34rpx auto 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
color: #000000;
font-size: 30rpx;
line-height: 42rpx;
font-weight: 500;
}
.activate-btn::after {
border: none;
}
.activate-btn--normal {
background-color: #fed847;
}
.activate-btn--super {
background: linear-gradient( 181deg, #FDFDFC 0%, #FDF8F2 0%, #FFC992 100%, #FFB96C 100%);
}
.agreement {
display: flex;
justify-content: center;
align-items: center;
margin-top: 24rpx;
color: #999999;
font-size: 20rpx;
line-height: 28rpx;
}
.agreement__link {
margin-left: -6rpx;
text-decoration: underline;
}
</style>
-244
View File
@@ -1,244 +0,0 @@
<script setup>
import Container from "@/components/Container.vue";
</script>
<template>
<Container title="会员权益说明">
<scroll-view scroll-y class="vip-intro" :show-scrollbar="false">
<view class="content">
<view class="page-title">射灵星球会员权益</view>
<view class="paragraph">
<text class="strong">核心特权</text>
<text>解锁约战段位评级实时排位赛AI智能教练点评四大核心功能</text>
</view>
<view class="paragraph">
<text class="strong">专属服务</text>
<text>享全年不同阶段VIP专属客服快速解决技术故障规则疑问等所有问题</text>
</view>
<view class="paragraph">
<text class="strong">新用户福利</text>
<text>所有初次绑定设备的用户免费赠送6个月普通会员</text>
</view>
<view class="paragraph">
<text>
加入射灵星球在真实射箭运动中体验在线竞技的乐趣结识全球志同道合的弓友持续享受新功能与系统升级不断挑战自我创造属于你的辉煌战绩
</text>
</view>
<view class="table-wrap">
<view class="intro-toast">
<image class="intro-toast__bg" src="../../static/vip/intro-toast.png" mode="scaleToFill" />
<text class="intro-toast__text">初次绑定设备赠送6个月</text>
</view>
<view class="benefit-table">
<view class="table-row table-head">
<text class="table-cell table-cell--feature">特权</text>
<text class="table-cell">基础用户</text>
<text class="table-cell">普通会员</text>
<text class="table-cell">超级会员</text>
</view>
<view class="table-row">
<text class="table-cell table-cell--feature">专属落点标识</text>
<text class="table-cell"></text>
<text class="table-cell"></text>
<text class="table-cell">螺旋</text>
</view>
<view class="table-row">
<text class="table-cell table-cell--feature">专属命中效果</text>
<text class="table-cell"></text>
<text class="table-cell"></text>
<text class="table-cell">玻璃裂纹</text>
</view>
<view class="table-row">
<text class="table-cell table-cell--feature">箭矢飞行特效</text>
<text class="table-cell"></text>
<text class="table-cell"></text>
<text class="table-cell">光箭</text>
</view>
<view class="table-row">
<text class="table-cell table-cell--feature">每日约战次数</text>
<text class="table-cell">2</text>
<text class="table-cell">22</text>
<text class="table-cell">无限</text>
</view>
<view class="table-row">
<text class="table-cell table-cell--feature">每日排位赛次数</text>
<text class="table-cell">2</text>
<text class="table-cell">22</text>
<text class="table-cell">无限</text>
</view>
<view class="table-row">
<text class="table-cell table-cell--feature">教练点评</text>
<text class="table-cell"></text>
<text class="table-cell">专享</text>
<text class="table-cell">专享</text>
</view>
<view class="table-row">
<text class="table-cell table-cell--feature">昵称美化</text>
<text class="table-cell"></text>
<text class="table-cell">专享</text>
<text class="table-cell">专享</text>
</view>
<view class="table-row">
<text class="table-cell table-cell--feature">专属客服</text>
<text class="table-cell"></text>
<text class="table-cell">专享</text>
<text class="table-cell">专享</text>
</view>
</view>
</view>
<view class="section-title">会员时长叠加与生效规则</view>
<view class="paragraph">
<text class="strong">等级优先级</text>
<text>
同时拥有 超级会员 普通会员 优先使用超级会员权益普通会员时长自动顺延 超级会员 到期后自动生效
</text>
</view>
<view class="paragraph">
<text class="strong">连续套餐叠加</text>
<text>
已有月 / 半年 / 年卡时再购买连续包月 / 包年总有效期直接累加连续套餐从下单日起算下个周期正常自动扣费
</text>
</view>
<view class="paragraph example">
<text>
示例1 1 日买半年卡7 1 日到期1 10 日买连续包月总有效期延至 8 1 8 1 日会发起首次自动扣款
</text>
</view>
<view class="paragraph">
<text class="strong">升级超级会员规则</text>
<text>
购买升级 超级会员 后立即生效可升级时长以购买页面提示为准未升级的剩余 普通会员 时长将在 超级会员 到期后继续使用
</text>
</view>
</view>
</scroll-view>
</Container>
</template>
<style scoped lang="scss">
.vip-intro {
width: 100%;
height: 100%;
background-color: #ffffff;
}
.content {
padding: 30rpx;
box-sizing: border-box;
}
.page-title,
.section-title {
color: #333333;
font-size: 28rpx;
line-height: 40rpx;
font-weight: 700;
}
.page-title {
margin-bottom: 26rpx;
}
.section-title {
margin: 42rpx 0 22rpx;
}
.paragraph {
margin-bottom: 22rpx;
color: #333333;
font-size: 26rpx;
line-height: 38rpx;
}
.strong {
color: #333333;
font-weight: 700;
}
.example {
color: #666666;
}
.table-wrap {
position: relative;
margin-top: 34rpx;
}
.intro-toast {
position: absolute;
top: -38rpx;
right: 118rpx;
z-index: 2;
width: 222rpx;
height: 54rpx;
display: flex;
align-items: center;
justify-content: center;
}
.intro-toast__bg {
position: absolute;
left: 0;
top: 0;
width: 222rpx;
height: 54rpx;
}
.intro-toast__text {
position: relative;
z-index: 1;
color: #333333;
font-size: 18rpx;
line-height: 30rpx;
font-weight: 500;
white-space: nowrap;
margin-top: -6rpx;
}
.benefit-table {
width: 100%;
border-top: 1rpx solid #e5e5e5;
border-left: 1rpx solid #e5e5e5;
box-sizing: border-box;
}
.table-row {
display: flex;
min-height: 60rpx;
}
.table-cell {
width: 22.5%;
min-height: 60rpx;
padding: 12rpx 4rpx;
border-right: 1rpx solid #e5e5e5;
border-bottom: 1rpx solid #e5e5e5;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
color: #333333;
font-size: 24rpx;
line-height: 34rpx;
text-align: center;
}
.table-cell--feature {
width: 32.5%;
}
.table-head .table-cell {
color: #666666;
font-weight: 700;
}
</style>
+1 -3
View File
@@ -11,14 +11,12 @@ import { storeToRefs } from "pinia";
const store = useStore(); const store = useStore();
const { user } = storeToRefs(store); const { user } = storeToRefs(store);
const arrows = ref([]); const arrows = ref([]);
const isSvip = ref(false);
const total = ref(0); const total = ref(0);
onLoad(async (options) => { onLoad(async (options) => {
if (!options.id) return; if (!options.id) return;
const result = await getPractiseAPI(options.id || 176); const result = await getPractiseAPI(options.id || 176);
arrows.value = result.details; arrows.value = result.details;
isSvip.value = result.sVip === true;
total.value = result.details.length; total.value = result.details.length;
}); });
</script> </script>
@@ -36,7 +34,7 @@ onLoad(async (options) => {
</view> </view>
</view> --> </view> -->
<view :style="{ marginBottom: '20px' }"> <view :style="{ marginBottom: '20px' }">
<BowTarget :scores="arrows" :isSvip="isSvip" /> <BowTarget :scores="arrows" />
</view> </view>
<view class="desc"> <view class="desc">
<text>{{ arrows.length }}</text> <text>{{ arrows.length }}</text>
+6 -72
View File
@@ -1,5 +1,5 @@
<script setup> <script setup>
import { computed, ref } from "vue"; import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app"; import { onShow } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue"; import Container from "@/components/Container.vue";
import ScreenHint from "@/components/ScreenHint.vue"; import ScreenHint from "@/components/ScreenHint.vue";
@@ -16,13 +16,11 @@ const showTip = ref(false);
const confirmBindTip = ref(false); const confirmBindTip = ref(false);
const addDevice = ref(); const addDevice = ref();
const store = useStore(); const store = useStore();
const { updateDevice, clearDevice } = store; const { updateDevice } = store;
const { user, device } = storeToRefs(store); const { user, device } = storeToRefs(store);
const justBind = ref(false); const justBind = ref(false);
const calibration = ref(false); const calibration = ref(false);
const token = ref(null); const token = ref(null);
const isSVip = computed(() => user.value.sVip === true);
const isVip = computed(() => user.value.vip === true && !isSVip.value);
// 扫描二维码方法 // 扫描二维码方法
const handleScan = () => { const handleScan = () => {
@@ -86,26 +84,13 @@ const toFristTryPage = () => {
}; };
const unbindDevice = async () => { const unbindDevice = async () => {
try {
await unbindDeviceAPI(device.value.deviceId); await unbindDeviceAPI(device.value.deviceId);
} catch (error) {
if (error?.type === "DEVICE_BIND_INVALID") {
uni.setStorageSync("calibration", false);
clearDevice();
}
return;
}
uni.setStorageSync("calibration", false); uni.setStorageSync("calibration", false);
uni.showToast({ uni.showToast({
title: "解绑成功", title: "解绑成功",
icon: "success", icon: "success",
}); });
clearDevice(); device.value = {};
};
/** 连接wifi跳转到wifi列表页面 */
const joinWifi = () => {
uni.navigateTo({ url: "/pages/ota-wifi" });
}; };
const toDeviceIntroPage = () => { const toDeviceIntroPage = () => {
@@ -137,23 +122,8 @@ const goCalibration = async () => {
}); });
}; };
const syncDeviceBinding = async () => { onShow(() => {
if (!user.value.id) return;
try {
const devices = await getMyDevicesAPI();
if (devices.bindings && devices.bindings.length) {
updateDevice(devices.bindings[0].deviceId, devices.bindings[0].deviceName);
} else {
clearDevice();
}
} catch (error) {
console.log("sync device binding error", error);
}
};
onShow(async () => {
calibration.value = uni.getStorageSync("calibration"); calibration.value = uni.getStorageSync("calibration");
await syncDeviceBinding();
}); });
</script> </script>
@@ -239,18 +209,7 @@ onShow(async () => {
mode="widthFix" mode="widthFix"
:style="{ borderRadius: '50%' }" :style="{ borderRadius: '50%' }"
/> />
<view <text>{{ user.nickName }}</text>
:class="[
'member-nickname',
isVip ? 'member-nickname--vip' : '',
isSVip ? 'member-nickname--svip' : '',
]"
>
<text class="member-nickname__text">{{ user.nickName }}</text>
<text v-if="isSVip" class="member-nickname__shine">{{
user.nickName
}}</text>
</view>
</view> </view>
</view> </view>
<!-- <block v-if="calibration"> --> <!-- <block v-if="calibration"> -->
@@ -308,18 +267,7 @@ onShow(async () => {
mode="widthFix" mode="widthFix"
:style="{ borderRadius: '50%' }" :style="{ borderRadius: '50%' }"
/> />
<view <text>{{ user.nickName }}</text>
:class="[
'member-nickname',
isVip ? 'member-nickname--vip' : '',
isSVip ? 'member-nickname--svip' : '',
]"
>
<text class="member-nickname__text">{{ user.nickName }}</text>
<text v-if="isSVip" class="member-nickname__shine">{{
user.nickName
}}</text>
</view>
</view> </view>
</view> </view>
<view :style="{ marginTop: '240rpx' }"> <view :style="{ marginTop: '240rpx' }">
@@ -327,11 +275,6 @@ onShow(async () => {
>解绑</SButton >解绑</SButton
> >
</view> </view>
<view :style="{ marginTop: '20rpx' }">
<SButton :onClick="() => $clickSound(joinWifi)" width="80vw" :rounded="40"
>设备连接WIFI</SButton
>
</view>
</view> </view>
</Container> </Container>
</template> </template>
@@ -462,15 +405,6 @@ onShow(async () => {
text-overflow: ellipsis; text-overflow: ellipsis;
text-align: center; text-align: center;
} }
.device-binded .member-nickname {
justify-content: center;
width: 120px;
}
.device-binded .member-nickname__text,
.device-binded .member-nickname__shine {
font-size: 26rpx;
text-align: center;
}
.device-binded > image { .device-binded > image {
width: 100rpx; width: 100rpx;
margin: 0 20px; margin: 0 20px;
@@ -61,18 +61,6 @@ const goPay = async () => {
} }
}; };
const copyOrderId = (orderId) => {
uni.setClipboardData({
data: String(orderId),
success: () => {
uni.showToast({
title: "复制成功",
icon: "success",
});
},
});
};
const cancelOrder = async () => { const cancelOrder = async () => {
const result = await cancelOrderListAPI(data.value.orderId); const result = await cancelOrderListAPI(data.value.orderId);
data.value = result; data.value = result;
@@ -90,17 +78,14 @@ const cancelOrder = async () => {
> >
<view class="order"> <view class="order">
<view> <view>
<text>{{ data.vipName }}</text> <text>商品名{{ data.vipName }}</text>
<view class="order-number">
<text>订单号{{ data.orderId }}</text> <text>订单号{{ data.orderId }}</text>
<text class="copy-action" @click.stop="copyOrderId(data.orderId)" <text>下单时间{{ data.vipCreateAt }}</text>
>复制</text <text
> >支付时间{{
</view>
<text>创建时间{{ data.orderCreateAt }}</text>
<text v-if="data.orderStatus === 4">支付时间{{
data.orderStatus === 4 ? data.paymentTime : "" data.orderStatus === 4 ? data.paymentTime : ""
}}</text> }}</text
>
<text>金额{{ data.total }} </text> <text>金额{{ data.total }} </text>
<text>支付方式微信</text> <text>支付方式微信</text>
</view> </view>
@@ -156,25 +141,4 @@ const cancelOrder = async () => {
text-align: center; text-align: center;
font-size: 11px; font-size: 11px;
} }
.order-number {
display: flex;
align-items: center;
color: #666666;
font-size: 26rpx;
margin-top: 10rpx;
}
.order-number > text:first-child {
flex: 1;
min-width: 0;
word-break: break-all;
}
.copy-action {
flex-shrink: 0;
margin-left: 16rpx;
padding: 2rpx 14rpx;
color: #1f6ed4;
font-size: 24rpx;
line-height: 34rpx;
}
</style> </style>
@@ -3,7 +3,6 @@ import { ref, onMounted } from "vue";
import { onShow } from "@dcloudio/uni-app"; import { onShow } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue"; import Container from "@/components/Container.vue";
import ScrollList from "@/components/ScrollList.vue"; import ScrollList from "@/components/ScrollList.vue";
import ModalDialog from "@/components/ModalDialog.vue";
import { getOrderListAPI } from "@/apis"; import { getOrderListAPI } from "@/apis";
import useStore from "@/store"; import useStore from "@/store";
import { orderStatusNames, getStatusColor } from "@/constants"; import { orderStatusNames, getStatusColor } from "@/constants";
@@ -11,34 +10,13 @@ import { storeToRefs } from "pinia";
const store = useStore(); const store = useStore();
const { user, config } = storeToRefs(store); const { user, config } = storeToRefs(store);
const autoRenewDialogVisible = ref(false);
const selectedRenewOrder = ref(null);
const toDetailPage = (detail) => { const toDetailPage = (detail) => {
uni.setStorageSync("order", detail); uni.setStorageSync("order", detail);
uni.navigateTo({ uni.navigateTo({
url: "/pages/member/order-detail", url: `/pages/order-detail`,
}); });
}; };
const openAutoRenewDialog = (detail) => {
selectedRenewOrder.value = detail;
autoRenewDialogVisible.value = true;
};
const closeAutoRenewDialog = () => {
autoRenewDialogVisible.value = false;
selectedRenewOrder.value = null;
};
const confirmAutoRenewDialog = () => {
autoRenewDialogVisible.value = false;
uni.showToast({
title: "功能实现中",
icon: "none",
});
}
const list = ref([]); const list = ref([]);
const onLoading = async (page) => { const onLoading = async (page) => {
@@ -66,7 +44,7 @@ onShow(() => {
</script> </script>
<template> <template>
<Container title="订单管理"> <Container title="订单">
<view class="container"> <view class="container">
<ScrollList :onLoading="onLoading"> <ScrollList :onLoading="onLoading">
<view <view
@@ -80,31 +58,18 @@ onShow(() => {
>{{ orderStatusNames[item.orderStatus] }}</view >{{ orderStatusNames[item.orderStatus] }}</view
> >
<text>{{ item.vipName }}</text> <text>{{ item.vipName }}</text>
<text>订单号{{ item.orderId }}</text> <!-- <text>订单号{{ item.orderId }}</text> -->
<text>创建时间{{ item.orderCreateAt }}</text> <!-- <text>创建时间{{ item.vipCreateAt }}</text> -->
<!-- <text <text
>支付时间{{ >支付时间{{
item.orderStatus === 4 ? item.paymentTime : "" item.orderStatus === 4 ? item.paymentTime : ""
}}</text }}</text
> --> >
<text>金额{{ item.total }} </text> <text>金额{{ item.total }} </text>
<!-- <text>支付方式微信</text> --> <text>支付方式微信</text>
<!-- <text class="renew-action" @click.stop="openAutoRenewDialog(item)">
自动续费
</text> -->
</view> </view>
</ScrollList> </ScrollList>
</view> </view>
<ModalDialog
:show="autoRenewDialogVisible"
title=""
:content="'确定关闭自动续费吗?\n会员到期后你将失去7项特权哦!'"
cancel-text="一意孤行"
confirm-text="继续享受"
:on-cancel="closeAutoRenewDialog"
:on-confirm="confirmAutoRenewDialog"
/>
</Container> </Container>
</template> </template>
@@ -113,15 +78,15 @@ onShow(() => {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #f5f5f5; background-color: #f5f5f5;
padding-top: 16rpx; padding-top: 10px;
} }
.order-item { .order-item {
position: relative; position: relative;
background-color: #fff; background-color: #fff;
margin-bottom: 16rpx; margin-bottom: 10px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 28rpx 30rpx 18rpx 30rpx; padding: 15px;
} }
.order-item > view:first-child { .order-item > view:first-child {
position: absolute; position: absolute;
@@ -133,20 +98,12 @@ onShow(() => {
font-size: 11px; font-size: 11px;
} }
.order-item > text:nth-child(2) { .order-item > text:nth-child(2) {
color: #333333; color: #000;
font-size: 30rpx; font-size: 16px;
font-weight: bold;
} }
.order-item > text { .order-item > text {
color: #666666; color: #666666;
font-size: 26rpx; font-size: 13px;
margin-bottom: 10rpx; margin-top: 5px;
}
.order-item > .renew-action {
position: absolute;
right: 30rpx;
bottom: 18rpx;
color: #1f6ed4;
margin-bottom: 0;
} }
</style> </style>
File diff suppressed because it is too large Load Diff
-8
View File
@@ -81,17 +81,9 @@ const loading = ref(false);
const shareImage = async () => { const shareImage = async () => {
if (loading.value) return; if (loading.value) return;
loading.value = true; loading.value = true;
try {
await generateShareImage("shareImageCanvas", record.value); await generateShareImage("shareImageCanvas", record.value);
await wxShare("shareImageCanvas"); await wxShare("shareImageCanvas");
} catch (e) {
uni.showToast({
title: "海报生成失败,请稍后重试",
icon: "none",
});
} finally {
loading.value = false; loading.value = false;
}
}; };
onLoad(async (options) => { onLoad(async (options) => {
+1 -12
View File
@@ -15,22 +15,11 @@ const list = ref([]);
const mine = ref({ const mine = ref({
averageRing: 0, averageRing: 0,
}); });
const sharing = ref(false);
const shareImage = async () => { const shareImage = async () => {
if (!mine.value.id || sharing.value) return; if (!mine.value.id) return;
sharing.value = true;
try {
await sharePointData("shareCanvas", mine.value); await sharePointData("shareCanvas", mine.value);
await wxShare("shareCanvas"); await wxShare("shareCanvas");
} catch (e) {
uni.showToast({
title: "海报生成失败,请稍后重试",
icon: "none",
});
} finally {
sharing.value = false;
}
}; };
onMounted(async () => { onMounted(async () => {
+9 -30
View File
@@ -30,16 +30,14 @@ const { user } = storeToRefs(store);
const start = ref(false); const start = ref(false);
const scores = ref([]); const scores = ref([]);
const isSvip = ref(false);
const total = 12; const total = 12;
/** 当前练习中连续 10 环及以上计数,用于触发 tententen 音效 */ /** 当前练习中连续 X 环计数,用于触发 tententen 音效 */
const xRingStreak = ref(0); const xRingStreak = ref(0);
const practiseResult = ref({}); const practiseResult = ref({});
const practiseId = ref(""); const practiseId = ref("");
const showGuide = ref(false); const showGuide = ref(false);
const tips = ref(""); const tips = ref("");
const targetType = ref(1); const targetType = ref(1);
const sharing = ref(false);
onLoad((options) => { onLoad((options) => {
if (options.target) { if (options.target) {
@@ -50,7 +48,6 @@ onLoad((options) => {
const onReady = async () => { const onReady = async () => {
await startPractiseAPI(); await startPractiseAPI();
scores.value = []; scores.value = [];
isSvip.value = false;
xRingStreak.value = 0; // 新一局开始,重置 X 环连续计数 xRingStreak.value = 0; // 新一局开始,重置 X 环连续计数
start.value = true; start.value = true;
audioManager.play("练习开始"); audioManager.play("练习开始");
@@ -62,23 +59,19 @@ const onOver = async () => {
}; };
/** /**
* 检测连续 10 环及以上是否达到 3 箭,达到则播放 tententen 音效 * 检测连续 X 环是否达到 3 箭,达到则播放 tententen 音效
* @param {boolean} isTenPlusRingShot - 本次射击是否为 10 环及以上 * @param {boolean} isXRing - 本次射击是否为 X 环
*/ */
function isTenPlusRing(shot) { function checkAndPlayTententen(isXRing) {
return !!(shot?.ringX || Number(shot?.ring) >= 10); if (isXRing) {
}
function checkAndPlayTententen(isTenPlusRingShot) {
if (isTenPlusRingShot) {
xRingStreak.value += 1; xRingStreak.value += 1;
// 连续 3 箭均为 10 环及以上,在环数播报入队后追加 tententen,避免播放顺序颠倒 // 连续 3 箭均为 X 环,在环数播报入队后追加 tententen,避免播放顺序颠倒
if (xRingStreak.value >= 3) { if (xRingStreak.value >= 3) {
xRingStreak.value = 0; xRingStreak.value = 0;
nextTick(() => audioManager.play("tententen", false)); nextTick(() => audioManager.play("tententen", false));
} }
} else { } else {
// 低于 10 环或未上靶则重置连续计数 // 非 X 环则重置连续计数
xRingStreak.value = 0; xRingStreak.value = 0;
} }
} }
@@ -86,12 +79,11 @@ function checkAndPlayTententen(isTenPlusRingShot) {
async function onReceiveMessage(msg) { async function onReceiveMessage(msg) {
if (msg.type === MESSAGETYPESV2.ShootResult) { if (msg.type === MESSAGETYPESV2.ShootResult) {
const prevLen = scores.value.length; const prevLen = scores.value.length;
isSvip.value = msg.sVip === true;
scores.value = msg.details; scores.value = msg.details;
// 有新箭时取最后一箭判断是否 10 环及以上并检测连续计数 // 有新箭时取最后一箭判断是否 X 环并检测连续计数
if (scores.value.length > prevLen) { if (scores.value.length > prevLen) {
const latestArrow = scores.value[scores.value.length - 1]; const latestArrow = scores.value[scores.value.length - 1];
checkAndPlayTententen(isTenPlusRing(latestArrow)); checkAndPlayTententen(!!(latestArrow?.ringX && latestArrow?.ring));
} }
} else if (msg.type === MESSAGETYPESV2.BattleEnd) { } else if (msg.type === MESSAGETYPESV2.BattleEnd) {
// setTimeout(onOver, 1500); // setTimeout(onOver, 1500);
@@ -109,7 +101,6 @@ async function onComplete() {
practiseResult.value = {}; practiseResult.value = {};
start.value = false; start.value = false;
scores.value = []; scores.value = [];
isSvip.value = false;
xRingStreak.value = 0; // 重新开始练习,重置 X 环连续计数 xRingStreak.value = 0; // 重新开始练习,重置 X 环连续计数
const result = await createPractiseAPI(total, 120); const result = await createPractiseAPI(total, 120);
if (result) practiseId.value = result.id; if (result) practiseId.value = result.id;
@@ -117,19 +108,8 @@ async function onComplete() {
} }
const onClickShare = debounce(async () => { const onClickShare = debounce(async () => {
if (sharing.value) return;
sharing.value = true;
try {
await sharePractiseData("shareCanvas", 2, user.value, practiseResult.value); await sharePractiseData("shareCanvas", 2, user.value, practiseResult.value);
await wxShare("shareCanvas"); await wxShare("shareCanvas");
} catch (e) {
uni.showToast({
title: "海报生成失败,请稍后重试",
icon: "none",
});
} finally {
sharing.value = false;
}
}); });
function onAudioEnded(s) { function onAudioEnded(s) {
@@ -194,7 +174,6 @@ onBeforeUnmount(() => {
:totalRound="start ? total / 4 : 0" :totalRound="start ? total / 4 : 0"
:currentRound="scores.length % 3" :currentRound="scores.length % 3"
:scores="scores" :scores="scores"
:isSvip="isSvip"
/> />
<ScorePanel2 :arrows="scores" /> <ScorePanel2 :arrows="scores" />
<ScoreResult <ScoreResult
+9 -30
View File
@@ -30,15 +30,13 @@ const { user } = storeToRefs(store);
const start = ref(false); const start = ref(false);
const scores = ref([]); const scores = ref([]);
const isSvip = ref(false);
const total = 36; const total = 36;
/** 当前练习中连续 10 环及以上计数,用于触发 tententen 音效 */ /** 当前练习中连续 X 环计数,用于触发 tententen 音效 */
const xRingStreak = ref(0); const xRingStreak = ref(0);
const practiseResult = ref({}); const practiseResult = ref({});
const practiseId = ref(""); const practiseId = ref("");
const showGuide = ref(false); const showGuide = ref(false);
const targetType = ref(1); const targetType = ref(1);
const sharing = ref(false);
onLoad((options) => { onLoad((options) => {
if (options.target) { if (options.target) {
@@ -49,7 +47,6 @@ onLoad((options) => {
const onReady = async () => { const onReady = async () => {
await startPractiseAPI(); await startPractiseAPI();
scores.value = []; scores.value = [];
isSvip.value = false;
xRingStreak.value = 0; // 新一局开始,重置 X 环连续计数 xRingStreak.value = 0; // 新一局开始,重置 X 环连续计数
start.value = true; start.value = true;
audioManager.play("练习开始"); audioManager.play("练习开始");
@@ -61,23 +58,19 @@ const onOver = async () => {
}; };
/** /**
* 检测连续 10 环及以上是否达到 3 箭,达到则播放 tententen 音效 * 检测连续 X 环是否达到 3 箭,达到则播放 tententen 音效
* @param {boolean} isTenPlusRingShot - 本次射击是否为 10 环及以上 * @param {boolean} isXRing - 本次射击是否为 X 环
*/ */
function isTenPlusRing(shot) { function checkAndPlayTententen(isXRing) {
return !!(shot?.ringX || Number(shot?.ring) >= 10); if (isXRing) {
}
function checkAndPlayTententen(isTenPlusRingShot) {
if (isTenPlusRingShot) {
xRingStreak.value += 1; xRingStreak.value += 1;
// 连续 3 箭均为 10 环及以上,在环数播报入队后追加 tententen,避免播放顺序颠倒 // 连续 3 箭均为 X 环,在环数播报入队后追加 tententen,避免播放顺序颠倒
if (xRingStreak.value >= 3) { if (xRingStreak.value >= 3) {
xRingStreak.value = 0; xRingStreak.value = 0;
nextTick(() => audioManager.play("tententen", false)); nextTick(() => audioManager.play("tententen", false));
} }
} else { } else {
// 低于 10 环或未上靶则重置连续计数 // 非 X 环则重置连续计数
xRingStreak.value = 0; xRingStreak.value = 0;
} }
} }
@@ -85,12 +78,11 @@ function checkAndPlayTententen(isTenPlusRingShot) {
async function onReceiveMessage(msg) { async function onReceiveMessage(msg) {
if (msg.type === MESSAGETYPESV2.ShootResult) { if (msg.type === MESSAGETYPESV2.ShootResult) {
const prevLen = scores.value.length; const prevLen = scores.value.length;
isSvip.value = msg.sVip === true;
scores.value = msg.details; scores.value = msg.details;
// 有新箭时取最后一箭判断是否 10 环及以上并检测连续计数 // 有新箭时取最后一箭判断是否 X 环并检测连续计数
if (scores.value.length > prevLen) { if (scores.value.length > prevLen) {
const latestArrow = scores.value[scores.value.length - 1]; const latestArrow = scores.value[scores.value.length - 1];
checkAndPlayTententen(isTenPlusRing(latestArrow)); checkAndPlayTententen(!!(latestArrow?.ringX && latestArrow?.ring));
} }
} else if (msg.type === MESSAGETYPESV2.BattleEnd) { } else if (msg.type === MESSAGETYPESV2.BattleEnd) {
setTimeout(onOver, 1500); setTimeout(onOver, 1500);
@@ -124,7 +116,6 @@ async function onComplete() {
practiseResult.value = {}; practiseResult.value = {};
start.value = false; start.value = false;
scores.value = []; scores.value = [];
isSvip.value = false;
xRingStreak.value = 0; // 重新开始练习,重置 X 环连续计数 xRingStreak.value = 0; // 重新开始练习,重置 X 环连续计数
const result = await createPractiseAPI(total, 3600); const result = await createPractiseAPI(total, 3600);
if (result) practiseId.value = result.id; if (result) practiseId.value = result.id;
@@ -132,19 +123,8 @@ async function onComplete() {
} }
const onClickShare = debounce(async () => { const onClickShare = debounce(async () => {
if (sharing.value) return;
sharing.value = true;
try {
await sharePractiseData("shareCanvas", 3, user.value, practiseResult.value); await sharePractiseData("shareCanvas", 3, user.value, practiseResult.value);
await wxShare("shareCanvas"); await wxShare("shareCanvas");
} catch (e) {
uni.showToast({
title: "海报生成失败,请稍后重试",
icon: "none",
});
} finally {
sharing.value = false;
}
}); });
onMounted(async () => { onMounted(async () => {
@@ -195,7 +175,6 @@ onBeforeUnmount(() => {
:currentRound="scores.length" :currentRound="scores.length"
:totalRound="start ? total : 0" :totalRound="start ? total : 0"
:scores="scores" :scores="scores"
:isSvip="isSvip"
/> />
<ScorePanel <ScorePanel
v-if="start" v-if="start"
+4 -20
View File
@@ -1,5 +1,5 @@
<script setup> <script setup>
import { computed, ref } from "vue"; import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app"; import { onShow } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue"; import Container from "@/components/Container.vue";
import Guide from "@/components/Guide.vue"; import Guide from "@/components/Guide.vue";
@@ -15,8 +15,6 @@ const { user, device, online } = storeToRefs(store);
const data = ref({}); const data = ref({});
const showTargetPicker = ref(false); const showTargetPicker = ref(false);
const pendingPractiseType = ref(""); const pendingPractiseType = ref("");
const isSVip = computed(() => user.value.sVip === true);
const isVip = computed(() => user.value.vip === true && !isSVip.value);
const goPractise = async (type) => { const goPractise = async (type) => {
if (!canEenter(user.value, device.value, online.value)) return; if (!canEenter(user.value, device.value, online.value)) return;
@@ -51,18 +49,7 @@ onShow(async () => {
<view> <view>
<view> <view>
<Avatar :rankLvl="user.rankLvl" :src="user.avatar" :size="30" /> <Avatar :rankLvl="user.rankLvl" :src="user.avatar" :size="30" />
<view <text class="truncate">{{ user.nickName }}</text>
:class="[
'member-nickname',
isVip ? 'member-nickname--vip' : '',
isSVip ? 'member-nickname--svip' : '',
]"
>
<text class="member-nickname__text">{{ user.nickName }}</text>
<text v-if="isSVip" class="member-nickname__shine">{{
user.nickName
}}</text>
</view>
</view> </view>
<view> <view>
<text>已练习打卡</text> <text>已练习打卡</text>
@@ -145,14 +132,11 @@ onShow(async () => {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
} }
.practise-data > view:first-child > view:first-child .member-nickname { .practise-data > view:first-child > view:first-child > text {
color: #fff; color: #fff;
margin-left: 10px; margin-left: 10px;
width: 120px;
}
.practise-data > view:first-child > view:first-child .member-nickname__text,
.practise-data > view:first-child > view:first-child .member-nickname__shine {
font-size: 16px; font-size: 16px;
width: 120px;
} }
.practise-data > view:first-child > view:last-child > text:nth-child(2) { .practise-data > view:first-child > view:last-child > text:nth-child(2) {
color: #f7d247; color: #f7d247;
+2 -2
View File
@@ -13,7 +13,7 @@ import Container from "@/components/Container.vue";
<view class="section"> <view class="section">
<view class="title">段位体系概述</view> <view class="title">段位体系概述</view>
<view class="text"> <view class="text">
我们的段位体系分为多个等级从低到高依次为倔强青铜秩序白银荣耀黄金永恒钻石最强王者非凡王者无双王者绝世王者至圣王者荣耀王者和传奇王者每个大段位下又分为若干小段位玩家需要通过积累积分来提升段位 我们的段位体系分为多个等级从低到高依次为倔强青铜秩序白银黄金王者永恒钻石最强王者非凡王者无双王者绝世王者至圣王者荣耀王者和传奇王者每个大段位下又分为若干小段位玩家需要通过积累积分来提升段位
</view> </view>
</view> </view>
@@ -79,7 +79,7 @@ import Container from "@/components/Container.vue";
<text>每个小段位需要满 3颗星才能晋升到下一个段位共9颗星</text> <text>每个小段位需要满 3颗星才能晋升到下一个段位共9颗星</text>
</view> </view>
<view class="table-row"> <view class="table-row">
<text>荣耀黄金</text> <text>黄金王者</text>
<view> <view>
<text>黄金1*</text> <text>黄金1*</text>
<text>黄金2*</text> <text>黄金2*</text>
+2 -47
View File
@@ -102,8 +102,6 @@ const buildDefaultMyData = () => ({
userId: user.value.id, userId: user.value.id,
name: user.value.nickName, name: user.value.nickName,
avatar: user.value.avatar, avatar: user.value.avatar,
vip: user.value.vip,
sVip: user.value.sVip,
totalScore: 0, totalScore: 0,
mvpCount: 0, mvpCount: 0,
tenRings: 0, tenRings: 0,
@@ -156,15 +154,6 @@ const getRankUnit = (index = selectedIndex.value) => {
return "次"; return "次";
}; };
const isMember = (item = {}) => item.vip === true || item.sVip === true;
const getMemberNicknameClass = (item = {}) => [
"rank-list-player-name",
"member-nickname",
item.vip === true && item.sVip !== true ? "member-nickname--vip" : "",
item.sVip === true ? "member-nickname--svip" : "",
];
// 统一设置页面当前的视觉滚动状态,避免吸顶和顶部背景不同步。 // 统一设置页面当前的视觉滚动状态,避免吸顶和顶部背景不同步。
const syncScrollVisualState = (scrollTop = 0) => { const syncScrollVisualState = (scrollTop = 0) => {
currentScrollTop.value = scrollTop; currentScrollTop.value = scrollTop;
@@ -452,13 +441,7 @@ const measureTabsMetrics = () => {
</view> </view>
<Avatar :src="item.avatar" /> <Avatar :src="item.avatar" />
<view class="rank-item-content"> <view class="rank-item-content">
<view v-if="isMember(item)" :class="getMemberNicknameClass(item)"> <text class="truncate">{{ item.name }}</text>
<text class="member-nickname__text">{{ item.name }}</text>
<text v-if="item.sVip === true" class="member-nickname__shine">
{{ item.name }}
</text>
</view>
<text v-else class="rank-list-player-name truncate">{{ item.name }}</text>
<text>{{ formatLevelText(item) }}</text> <text>{{ formatLevelText(item) }}</text>
</view> </view>
<text class="rank-item-integral"> <text class="rank-item-integral">
@@ -496,23 +479,7 @@ const measureTabsMetrics = () => {
<text>{{ getDisplayMyRank(currentMyData) }}</text> <text>{{ getDisplayMyRank(currentMyData) }}</text>
<Avatar :src="currentMyData.avatar || user.avatar" /> <Avatar :src="currentMyData.avatar || user.avatar" />
<view class="rank-item-content"> <view class="rank-item-content">
<view <text class="truncate">{{ currentMyData.name || user.nickName }}</text>
v-if="isMember(currentMyData)"
:class="getMemberNicknameClass(currentMyData)"
>
<text class="member-nickname__text">
{{ currentMyData.name || user.nickName }}
</text>
<text
v-if="currentMyData.sVip === true"
class="member-nickname__shine"
>
{{ currentMyData.name || user.nickName }}
</text>
</view>
<text v-else class="rank-list-player-name truncate">
{{ currentMyData.name || user.nickName }}
</text>
<text>{{ formatLevelText(currentMyData) }}</text> <text>{{ formatLevelText(currentMyData) }}</text>
</view> </view>
<text class="rank-item-integral"> <text class="rank-item-integral">
@@ -686,18 +653,6 @@ const measureTabsMetrics = () => {
width: 120px; width: 120px;
} }
.rank-list-player-name {
color: #fff;
font-size: 14px;
margin-bottom: 3px;
width: 120px;
}
.rank-list-player-name .member-nickname__text,
.rank-list-player-name .member-nickname__shine {
font-size: 14px;
}
.rank-list-item > text:last-child { .rank-list-item > text:last-child {
margin-right: 10px; margin-right: 10px;
width: 56px; width: 56px;
+10 -134
View File
@@ -3,23 +3,21 @@ import { computed, ref } from "vue";
import { onShow } from "@dcloudio/uni-app"; import { onShow } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue"; import Container from "@/components/Container.vue";
import Avatar from "@/components/Avatar.vue"; import Avatar from "@/components/Avatar.vue";
import ModalDialog from "@/components/ModalDialog.vue";
import { topThreeColors } from "@/constants"; import { topThreeColors } from "@/constants";
import { import {
getDailyCountAPI,
getSeasonList, getSeasonList,
getSeasonStats, getSeasonStats,
getScoreRankList, getScoreRankList,
getTenRingRankList, getTenRingRankList,
getMvpRankList, getMvpRankList,
} from "@/apis"; } from "@/apis";
import { canEenter, getLimitCountText, isLimitReached } from "@/util"; import { canEenter } from "@/util";
import useStore from "@/store"; import useStore from "@/store";
import { storeToRefs } from "pinia"; import { storeToRefs } from "pinia";
const store = useStore(); const store = useStore();
const { user, device, online, game, dailyCount } = storeToRefs(store); const { user, device, online, game } = storeToRefs(store);
const { getLvlName, updateDailyCount } = store; const { getLvlName } = store;
const defaultSeasonStats = { const defaultSeasonStats = {
nickName: "", nickName: "",
@@ -57,21 +55,6 @@ const rankLoading = ref(false);
const scoreRankList = ref([]); const scoreRankList = ref([]);
const mvpRankList = ref([]); const mvpRankList = ref([]);
const tenRingRankList = ref([]); const tenRingRankList = ref([]);
const showLimitModal = ref(false);
const isSVip = computed(() => user.value.sVip === true);
const isVip = computed(() => user.value.vip === true && !isSVip.value);
const rankedLimitText = computed(() =>
getLimitCountText("排位", dailyCount.value.ranked)
);
const isMember = (item = {}) => item.vip === true || item.sVip === true;
const getMemberNicknameClass = (item = {}) => [
"rank-preview-name",
"member-nickname",
item.vip === true && item.sVip !== true ? "member-nickname--vip" : "",
item.sVip === true ? "member-nickname--svip" : "",
];
// 根据接口返回结构提取榜单数组,兼容数组和对象两种返回形式。 // 根据接口返回结构提取榜单数组,兼容数组和对象两种返回形式。
const getRankListFromResponse = (result) => { const getRankListFromResponse = (result) => {
@@ -121,40 +104,12 @@ const toMatchPage = async (gameType, teamSize) => {
uni.$showHint(1); uni.$showHint(1);
return; return;
} }
const countData = await loadDailyCount();
if (isLimitReached(countData.ranked)) {
showLimitModal.value = true;
return;
}
await uni.$checkAudio(); await uni.$checkAudio();
uni.navigateTo({ uni.navigateTo({
url: `/pages/match-page?gameType=${gameType}&teamSize=${teamSize}`, url: `/pages/match-page?gameType=${gameType}&teamSize=${teamSize}`,
}); });
}; };
const closeLimitModal = () => {
showLimitModal.value = false;
};
const goVipPage = () => {
showLimitModal.value = false;
uni.navigateTo({
url: "/pages/member/be-vip",
});
};
const loadDailyCount = async () => {
if (!user.value.id) return dailyCount.value;
try {
const result = await getDailyCountAPI();
updateDailyCount(result);
return result || dailyCount.value;
} catch (error) {
console.log("load daily count error", error);
return dailyCount.value;
}
};
const toMyGrowthPage = () => { const toMyGrowthPage = () => {
uni.navigateTo({ uni.navigateTo({
url: "/pages/my-growth", url: "/pages/my-growth",
@@ -280,10 +235,7 @@ const onChangeSeason = async (seasonId, name) => {
// 页面显示时先拿赛季列表,再拉当前赛季统计和默认榜单数据。 // 页面显示时先拿赛季列表,再拉当前赛季统计和默认榜单数据。
onShow(async () => { onShow(async () => {
try { try {
const [seasonResult] = await Promise.all([ const seasonResult = await getSeasonList();
getSeasonList(),
loadDailyCount(),
]);
seasonData.value = seasonResult.list || []; seasonData.value = seasonResult.list || [];
if (!seasonData.value.length) { if (!seasonData.value.length) {
@@ -319,12 +271,7 @@ onShow(async () => {
</script> </script>
<template> <template>
<Container <Container title="排位赛" :showBackToGame="true" :bgType="6">
:title="rankedLimitText ? rankedLimitText : '排位赛'"
:titleStyle="rankedLimitText ? { fontSize: '24rpx', fontWeight: 'normal' } : {}"
:showBackToGame="true"
:bgType="6"
>
<view class="battle-types-box"> <view class="battle-types-box">
<view class="battle-types"> <view class="battle-types">
<view class="first"> <view class="first">
@@ -367,20 +314,7 @@ onShow(async () => {
:rankLvl="seasonStats.rankLvl" :rankLvl="seasonStats.rankLvl"
:size="30" :size="30"
/> />
<view <text>{{ seasonStats.nickName || user.nickName }}</text>
:class="[
'member-nickname',
isVip ? 'member-nickname--vip' : '',
isSVip ? 'member-nickname--svip' : '',
]"
>
<text class="member-nickname__text">
{{ seasonStats.nickName || user.nickName }}
</text>
<text v-if="isSVip" class="member-nickname__shine">
{{ seasonStats.nickName || user.nickName }}
</text>
</view>
</view> </view>
<view <view
class="ranking-season" class="ranking-season"
@@ -542,13 +476,7 @@ onShow(async () => {
:style="{ borderColor: index < 3 ? topThreeColors[index] : '' }" :style="{ borderColor: index < 3 ? topThreeColors[index] : '' }"
/> />
<view> <view>
<view v-if="isMember(item)" :class="getMemberNicknameClass(item)"> <text class="truncate">{{ item.name }}</text>
<text class="member-nickname__text">{{ item.name }}</text>
<text v-if="item.sVip === true" class="member-nickname__shine">
{{ item.name }}
</text>
</view>
<text v-else class="rank-preview-name truncate">{{ item.name }}</text>
<text>{{ formatRankSubTitle(item) }}</text> <text>{{ formatRankSubTitle(item) }}</text>
</view> </view>
<text>{{ item.totalScore || 0 }}<text></text></text> <text>{{ item.totalScore || 0 }}<text></text></text>
@@ -571,13 +499,7 @@ onShow(async () => {
:style="{ borderColor: index < 3 ? topThreeColors[index] : '' }" :style="{ borderColor: index < 3 ? topThreeColors[index] : '' }"
/> />
<view> <view>
<view v-if="isMember(item)" :class="getMemberNicknameClass(item)"> <text class="truncate">{{ item.name }}</text>
<text class="member-nickname__text">{{ item.name }}</text>
<text v-if="item.sVip === true" class="member-nickname__shine">
{{ item.name }}
</text>
</view>
<text v-else class="rank-preview-name truncate">{{ item.name }}</text>
<text>{{ formatRankSubTitle(item) }}</text> <text>{{ formatRankSubTitle(item) }}</text>
</view> </view>
<text>{{ item.mvpCount || 0 }}<text></text></text> <text>{{ item.mvpCount || 0 }}<text></text></text>
@@ -600,13 +522,7 @@ onShow(async () => {
:style="{ borderColor: index < 3 ? topThreeColors[index] : '' }" :style="{ borderColor: index < 3 ? topThreeColors[index] : '' }"
/> />
<view> <view>
<view v-if="isMember(item)" :class="getMemberNicknameClass(item)"> <text class="truncate">{{ item.name }}</text>
<text class="member-nickname__text">{{ item.name }}</text>
<text v-if="item.sVip === true" class="member-nickname__shine">
{{ item.name }}
</text>
</view>
<text v-else class="rank-preview-name truncate">{{ item.name }}</text>
<text>{{ formatRankSubTitle(item) }}</text> <text>{{ formatRankSubTitle(item) }}</text>
</view> </view>
<text>{{ item.tenRings ?? item.TenRings ?? 0 }}<text></text></text> <text>{{ item.tenRings ?? item.TenRings ?? 0 }}<text></text></text>
@@ -622,14 +538,6 @@ onShow(async () => {
</view> </view>
</view> </view>
</Container> </Container>
<ModalDialog
:show="showLimitModal"
:content="'今日排位赛次数已经用完\n开通会员可增加次数'"
cancelText="知道了"
confirmText="去开通"
:onCancel="closeLimitModal"
:onConfirm="goVipPage"
/>
</template> </template>
<style scoped> <style scoped>
@@ -671,14 +579,8 @@ onShow(async () => {
font-size: 14px; font-size: 14px;
} }
.user-info > .member-nickname { .user-info > text {
margin-left: 15px; margin-left: 15px;
max-width: 220rpx;
}
.user-info .member-nickname__text,
.user-info .member-nickname__shine {
font-size: 14px;
} }
.ranking-season { .ranking-season {
@@ -871,17 +773,6 @@ onShow(async () => {
width: 120px; width: 120px;
} }
.rank-preview-name {
color: #fff9;
font-size: 14px;
width: 120px;
}
.rank-preview-name .member-nickname__text,
.rank-preview-name .member-nickname__shine {
font-size: 14px;
}
.rank-item > view:nth-child(3) > text:last-child { .rank-item > view:nth-child(3) > text:last-child {
color: #fff4; color: #fff4;
font-size: 13px; font-size: 13px;
@@ -976,19 +867,4 @@ onShow(async () => {
font-size: 10px !important; font-size: 10px !important;
margin-bottom: 7px; margin-bottom: 7px;
} }
.flex-box{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
padding: 0 10rpx;
}
.lf-text{
font-size: 22rpx;
color: #bf985e;
}
.rg-text{
font-size: 24rpx;
color: #fff;
}
</style> </style>
+9 -13
View File
@@ -49,7 +49,7 @@ const battleWay = ref(0);
const lastToSomeoneShootKey = ref(""); const lastToSomeoneShootKey = ref("");
/** 控制设备离线提示弹窗的显示状态 */ /** 控制设备离线提示弹窗的显示状态 */
const showOfflineModal = ref(false); const showOfflineModal = ref(false);
/** 记录每位玩家当前轮连续 10 环及以上次数,key 为 playerId,用于触发 tententen 音效 */ /** 记录每位玩家当前轮连续 X 环数,key 为 playerId,用于触发 tententen 音效 */
const xRingStreaks = ref({}); const xRingStreaks = ref({});
/** /**
@@ -234,26 +234,22 @@ function onNewRound(msg, prevRound) {
} }
/** /**
* 检测指定射手连续 10 环及以上是否达到 3 箭,达到则在环数播报入队后追加 tententen 音效 * 检测指定射手连续 X 环是否达到 3 箭,达到则在环数播报入队后追加 tententen 音效
* @param {number} shooterId - 本次射手的 ID(取自 currentShooterId.value * @param {number} shooterId - 本次射手的 ID(取自 currentShooterId.value
* @param {boolean} isTenPlusRingShot - 本次射击是否为 10 环及以上 * @param {boolean} isXRing - 本次射击是否为 X 环
*/ */
function isTenPlusRing(shot) { function checkAndPlayTententen(shooterId, isXRing) {
return !!(shot?.ringX || Number(shot?.ring) >= 10);
}
function checkAndPlayTententen(shooterId, isTenPlusRingShot) {
if (!shooterId) return; if (!shooterId) return;
if (isTenPlusRingShot) { if (isXRing) {
xRingStreaks.value[shooterId] = (xRingStreaks.value[shooterId] || 0) + 1; xRingStreaks.value[shooterId] = (xRingStreaks.value[shooterId] || 0) + 1;
// 同一玩家连续 3 箭均为 10 环及以上,追加到环数音效队列尾部播放 // 同一玩家连续 3 箭均为 X 环,追加到环数音效队列尾部播放
if (xRingStreaks.value[shooterId] >= 3) { if (xRingStreaks.value[shooterId] >= 3) {
xRingStreaks.value[shooterId] = 0; xRingStreaks.value[shooterId] = 0;
// nextTick 确保 HeaderProgress 的环数播报已入队后再追加 tententen,避免播放顺序颠倒 // nextTick 确保 HeaderProgress 的环数播报已入队后再追加 tententen,避免播放顺序颠倒
nextTick(() => audioManager.play("tententen", false)); nextTick(() => audioManager.play("tententen", false));
} }
} else { } else {
// 低于 10 环或未上靶则重置该玩家的连续计数 // 非 X 环则重置该玩家的连续计数
xRingStreaks.value[shooterId] = 0; xRingStreaks.value[shooterId] = 0;
} }
} }
@@ -272,9 +268,9 @@ async function onReceiveMessage(msg) {
} else if (msg.type === MESSAGETYPESV2.ShootResult) { } else if (msg.type === MESSAGETYPESV2.ShootResult) {
showRoundTip.value = false; showRoundTip.value = false;
recoverData(msg, {arrowOnly: true}); recoverData(msg, {arrowOnly: true});
// 检测同一玩家连续三箭 10 环及以上,触发 tententen 音效 // 检测同一玩家三箭全 X 环,触发 tententen 音效
// currentShooterId 在 ToSomeoneShoot 时写入,ShootResult 不会覆盖,可靠识别本次射手 // currentShooterId 在 ToSomeoneShoot 时写入,ShootResult 不会覆盖,可靠识别本次射手
checkAndPlayTententen(currentShooterId.value, isTenPlusRing(msg.shootData)); checkAndPlayTententen(currentShooterId.value, !!(msg.shootData?.ringX && msg.shootData?.ring));
} else if (msg.type === MESSAGETYPESV2.NewRound) { } else if (msg.type === MESSAGETYPESV2.NewRound) {
// 在进入延迟前先捕获当前轮次,供 onNewRound 使用,防止 800ms 内 ToSomeoneShoot 提前更新 currentRound 造成 Tip 展示错轮 // 在进入延迟前先捕获当前轮次,供 onNewRound 使用,防止 800ms 内 ToSomeoneShoot 提前更新 currentRound 造成 Tip 展示错轮
const prevRound = currentRound.value; const prevRound = currentRound.value;
+10 -19
View File
@@ -18,14 +18,12 @@ const props = defineProps({
}, },
}); });
const loading = ref(false); const loading = ref(false);
const navigating = ref(false);
/** 统一获取当前环境 token,用于守卫:无有效 token 时不发起接口请求 */ /** 统一获取当前环境 token,用于守卫:无有效 token 时不发起接口请求 */
const getToken = () => const getToken = () =>
uni.getStorageSync(`${uni.getAccountInfoSync().miniProgram.envVersion}_token`); uni.getStorageSync(`${uni.getAccountInfoSync().miniProgram.envVersion}_token`);
onShow(async () => { onShow(async () => {
navigating.value = false;
if (user.value.id && getToken()) { if (user.value.id && getToken()) {
setTimeout(async () => { setTimeout(async () => {
const state = await getUserGameState(); const state = await getUserGameState();
@@ -47,35 +45,28 @@ watch(
} }
); );
const navigateOnce = (url) =>
new Promise((resolve, reject) => {
navigating.value = true;
uni.navigateTo({
url,
success: resolve,
fail: (error) => {
navigating.value = false;
reject(error);
},
});
});
const onClick = debounce(async () => { const onClick = debounce(async () => {
if (loading.value || navigating.value) return; if (loading.value) return;
try { try {
loading.value = true; loading.value = true;
const result = await getBattleAPI(); const result = await getBattleAPI();
if (result && result.matchId) { if (result && result.matchId) {
await uni.$checkAudio(); await uni.$checkAudio();
if (result.mode <= 3) { if (result.mode <= 3) {
await navigateOnce(`/pages/team-battle/index?battleId=${result.matchId}`); uni.navigateTo({
url: `/pages/team-battle/index?battleId=${result.matchId}`,
});
} else { } else {
await navigateOnce(`/pages/melee-battle?battleId=${result.matchId}`); uni.navigateTo({
url: `/pages/melee-battle?battleId=${result.matchId}`,
});
} }
return; return;
} }
if (game.value.roomID) { if (game.value.roomID) {
await navigateOnce("/pages/battle-room?roomNumber=" + game.value.roomID); uni.navigateTo({
url: "/pages/battle-room?roomNumber=" + game.value.roomID,
});
} else { } else {
updateGame(false, ""); updateGame(false, "");
} }
@@ -51,7 +51,7 @@ const normalRounds = computed(() => {
<view v-for="(result, index) in roundResults" :key="index"> <view v-for="(result, index) in roundResults" :key="index">
<block v-if="index + 1 > normalRounds"> <block v-if="index + 1 > normalRounds">
<image <image
:src="RoundImages[`gold${result.goldRound || index + 1 - normalRounds}`]" :src="RoundImages[`gold${index + 1 - normalRounds}`]"
mode="widthFix" mode="widthFix"
/> />
</block> </block>
@@ -86,7 +86,7 @@ const normalRounds = computed(() => {
<view v-for="(result, index) in roundResults" :key="index"> <view v-for="(result, index) in roundResults" :key="index">
<block v-if="index + 1 > normalRounds"> <block v-if="index + 1 > normalRounds">
<image <image
:src="RoundImages[`gold${result.goldRound || index + 1 - normalRounds}`]" :src="RoundImages[`gold${index + 1 - normalRounds}`]"
mode="widthFix" mode="widthFix"
/> />
</block> </block>
@@ -27,14 +27,6 @@ defineProps({
default: true, default: true,
}, },
}); });
const getMemberNicknameClass = (player = {}) => [
"member-nickname",
player.vip === true && player.sVip !== true ? "member-nickname--vip" : "",
player.sVip === true ? "member-nickname--svip" : "",
];
const isMember = (player = {}) => player.vip === true || player.sVip === true;
</script> </script>
<template> <template>
@@ -59,16 +51,7 @@ const isMember = (player = {}) => player.vip === true || player.sVip === true;
}" }"
> >
<Avatar :src="player.avatar" :rankLvl="player.rankLvl" :size="40" /> <Avatar :src="player.avatar" :rankLvl="player.rankLvl" :size="40" />
<view <text class="player-name">{{ player.name }}</text>
v-if="isMember(player)"
:class="['player-name', ...getMemberNicknameClass(player)]"
>
<text class="member-nickname__text">{{ player.name }}</text>
<text v-if="player.sVip === true" class="member-nickname__shine">
{{ player.name }}
</text>
</view>
<text v-else class="player-name">{{ player.name }}</text>
</view> </view>
<image <image
v-if="winner === 1" v-if="winner === 1"
@@ -87,16 +70,7 @@ const isMember = (player = {}) => player.vip === true || player.sVip === true;
}" }"
> >
<Avatar :src="player.avatar" :rankLvl="player.rankLvl" :size="40" /> <Avatar :src="player.avatar" :rankLvl="player.rankLvl" :size="40" />
<view <text class="player-name">{{ player.name }}</text>
v-if="isMember(player)"
:class="['player-name', ...getMemberNicknameClass(player)]"
>
<text class="member-nickname__text">{{ player.name }}</text>
<text v-if="player.sVip === true" class="member-nickname__shine">
{{ player.name }}
</text>
</view>
<text v-else class="player-name">{{ player.name }}</text>
</view> </view>
<image <image
v-if="winner === 2" v-if="winner === 2"
@@ -131,16 +105,7 @@ const isMember = (player = {}) => player.vip === true || player.sVip === true;
:size="40" :size="40"
:rank="showRank ? index + 1 : 0" :rank="showRank ? index + 1 : 0"
/> />
<view <text class="player-name">{{ player.name }}</text>
v-if="isMember(player)"
:class="['player-name', ...getMemberNicknameClass(player)]"
>
<text class="member-nickname__text">{{ player.name }}</text>
<text v-if="player.sVip === true" class="member-nickname__shine">
{{ player.name }}
</text>
</view>
<text v-else class="player-name">{{ player.name }}</text>
</view> </view>
</view> </view>
</scroll-view> </scroll-view>
@@ -218,13 +183,6 @@ const isMember = (player = {}) => player.vip === true || player.sVip === true;
text-overflow: ellipsis; text-overflow: ellipsis;
text-align: center; text-align: center;
} }
view.player-name {
justify-content: center;
}
.player-name .member-nickname__text,
.player-name .member-nickname__shine {
font-size: 12px;
}
.left-winner-badge { .left-winner-badge {
position: absolute; position: absolute;
width: 50px; width: 50px;
+13 -288
View File
@@ -1,15 +1,6 @@
<script setup> <script setup>
import { import { ref, watch, onMounted, onBeforeUnmount, computed } from "vue";
ref,
watch,
onMounted,
onBeforeUnmount,
computed,
nextTick,
getCurrentInstance,
} from "vue";
import PointSwitcher from "./PointSwitcher.vue"; import PointSwitcher from "./PointSwitcher.vue";
import BowShotEffect from "@/components/BowShotEffect.vue";
import { MESSAGETYPES, MESSAGETYPESV2 } from "@/constants"; import { MESSAGETYPES, MESSAGETYPESV2 } from "@/constants";
import { simulShootAPI } from "@/apis"; import { simulShootAPI } from "@/apis";
@@ -35,14 +26,6 @@ const props = defineProps({
type: Array, type: Array,
default: () => [], default: () => [],
}, },
redTeam: {
type: Array,
default: () => [],
},
blueTeam: {
type: Array,
default: () => [],
},
latestShotFlash: { latestShotFlash: {
type: Object, type: Object,
default: null, default: null,
@@ -76,56 +59,18 @@ const timer = ref(null);
const dirTimer = ref(null); const dirTimer = ref(null);
const angle = ref(null); const angle = ref(null);
const circleColor = ref(""); const circleColor = ref("");
const shotEffect = ref(null);
const hiddenRedLatestKey = ref("");
const hiddenBlueLatestKey = ref("");
const targetShaking = ref(false);
const targetSize = ref({ width: 0, height: 0 });
const shakeTimer = ref(null);
const instance = getCurrentInstance();
const ROUND_TIP_OFFSET_Y = -32; const ROUND_TIP_OFFSET_Y = -32;
const EXPERIENCE_TIP_OFFSET_Y = -68; const EXPERIENCE_TIP_OFFSET_Y = -68;
function buildShotEffectKey(team, shot, fallbackKey = "") { function showShotFlash(flash) {
return ( const shootData = flash?.shootData;
fallbackKey || if (!shootData) return;
[
team,
shot?.playerId ?? "",
shot?.x ?? "",
shot?.y ?? "",
shot?.ring ?? "",
shot?.ringX ? 1 : 0,
].join("-")
);
}
function findShotPlayer(shot, team) {
const players = team === "red" ? props.redTeam : props.blueTeam;
return players.find((player) => String(player?.id) === String(shot?.playerId));
}
function isSvipShot(shot, team) {
return findShotPlayer(shot, team)?.sVip === true;
}
function shouldPlayShotEffect(shot, team) {
return !!shot && Number(shot.ring) > 0 && isSvipShot(shot, team);
}
function clearTipTimer() {
if (timer.value) clearTimeout(timer.value); if (timer.value) clearTimeout(timer.value);
timer.value = null;
}
function showShotTip(team, shootData) { if (flash.team === "red") {
clearTipTimer();
if (team === "red") {
latestOne.value = shootData; latestOne.value = shootData;
timer.value = setTimeout(() => { timer.value = setTimeout(() => {
latestOne.value = null; latestOne.value = null;
timer.value = null;
}, 1000); }, 1000);
return; return;
} }
@@ -133,102 +78,9 @@ function showShotTip(team, shootData) {
bluelatestOne.value = shootData; bluelatestOne.value = shootData;
timer.value = setTimeout(() => { timer.value = setTimeout(() => {
bluelatestOne.value = null; bluelatestOne.value = null;
timer.value = null;
}, 1000); }, 1000);
} }
function triggerShotEffect(team, shot, fallbackKey = "") {
const key = buildShotEffectKey(team, shot, fallbackKey);
if (shotEffect.value?.team === "red") hiddenRedLatestKey.value = "";
if (shotEffect.value?.team === "blue") hiddenBlueLatestKey.value = "";
if (team === "red") {
latestOne.value = null;
hiddenRedLatestKey.value = key;
} else {
bluelatestOne.value = null;
hiddenBlueLatestKey.value = key;
}
shotEffect.value = { key, team, shot };
}
function completeShotEffect(key) {
if (!shotEffect.value || shotEffect.value.key !== key) return;
const { team, shot } = shotEffect.value;
if (team === "red") hiddenRedLatestKey.value = "";
if (team === "blue") hiddenBlueLatestKey.value = "";
shotEffect.value = null;
showShotTip(team, shot);
}
function shakeTarget() {
targetShaking.value = false;
if (shakeTimer.value) {
clearTimeout(shakeTimer.value);
shakeTimer.value = null;
}
nextTick(() => {
targetShaking.value = true;
shakeTimer.value = setTimeout(() => {
targetShaking.value = false;
shakeTimer.value = null;
}, 260);
});
}
function updateTargetSize() {
nextTick(() => {
const query = instance?.proxy
? uni.createSelectorQuery().in(instance.proxy)
: uni.createSelectorQuery();
query
.select(".target")
.boundingClientRect((rect) => {
const width = Number(rect?.width);
const height = Number(rect?.height);
if (!Number.isFinite(width) || !Number.isFinite(height)) return;
if (width <= 0 || height <= 0) return;
targetSize.value = { width, height };
})
.exec();
});
}
function handleWindowResize() {
updateTargetSize();
}
function shouldHideRedHit(index) {
return !!hiddenRedLatestKey.value && index === props.scores.length - 1;
}
function shouldHideBlueHit(index) {
return !!hiddenBlueLatestKey.value && index === props.blueScores.length - 1;
}
function showShotFlash(flash) {
const shootData = flash?.shootData;
if (!shootData) {
hiddenRedLatestKey.value = "";
hiddenBlueLatestKey.value = "";
shotEffect.value = null;
return;
}
const team = flash.team === "red" ? "red" : "blue";
if (shouldPlayShotEffect(shootData, team)) {
triggerShotEffect(team, shootData, flash.key);
return;
}
showShotTip(team, shootData);
}
watch( watch(
() => props.latestShotFlash, () => props.latestShotFlash,
(newVal) => { (newVal) => {
@@ -237,26 +89,6 @@ watch(
{ immediate: true } { immediate: true }
); );
watch(
() => props.scores.length,
(newLen, oldLen) => {
if (newLen > oldLen) return;
latestOne.value = null;
hiddenRedLatestKey.value = "";
if (shotEffect.value?.team === "red") shotEffect.value = null;
}
);
watch(
() => props.blueScores.length,
(newLen, oldLen) => {
if (newLen > oldLen) return;
bluelatestOne.value = null;
hiddenBlueLatestKey.value = "";
if (shotEffect.value?.team === "blue") shotEffect.value = null;
}
);
const safeTargetRadius = computed(() => { const safeTargetRadius = computed(() => {
const radius = Number(props.targetRadius); const radius = Number(props.targetRadius);
return Number.isFinite(radius) && radius > 0 ? radius : 20; return Number.isFinite(radius) && radius > 0 ? radius : 20;
@@ -327,15 +159,6 @@ function getHitStyle(shot) {
}; };
} }
function getSvipHitBgStyle(shot) {
const radius = currentHitRadiusPx.value;
const point = getShotPoint(shot);
return {
...getTargetPositionStyle(point, radius),
};
}
function getRoundTipStyle(shot) { function getRoundTipStyle(shot) {
const point = getShotPoint(shot, true); const point = getShotPoint(shot, true);
return getTargetPositionStyle( return getTargetPositionStyle(
@@ -400,8 +223,6 @@ async function onReceiveMessage(message) {
onMounted(() => { onMounted(() => {
uni.$on("socket-inbox", onReceiveMessage); uni.$on("socket-inbox", onReceiveMessage);
updateTargetSize();
if (uni.onWindowResize) uni.onWindowResize(handleWindowResize);
}); });
onBeforeUnmount(() => { onBeforeUnmount(() => {
@@ -413,17 +234,12 @@ onBeforeUnmount(() => {
clearTimeout(dirTimer.value); clearTimeout(dirTimer.value);
dirTimer.value = null; dirTimer.value = null;
} }
if (shakeTimer.value) {
clearTimeout(shakeTimer.value);
shakeTimer.value = null;
}
uni.$off("socket-inbox", onReceiveMessage); uni.$off("socket-inbox", onReceiveMessage);
if (uni.offWindowResize) uni.offWindowResize(handleWindowResize);
}); });
</script> </script>
<template> <template>
<view :class="['container', { 'container--effecting': shotEffect }]"> <view class="container">
<view class="header" v-if="totalRound > 0"> <view class="header" v-if="totalRound > 0">
<text v-if="totalRound > 0" class="round-count">{{ <text v-if="totalRound > 0" class="round-count">{{
(currentRound > totalRound ? totalRound : currentRound) + (currentRound > totalRound ? totalRound : currentRound) +
@@ -431,7 +247,7 @@ onBeforeUnmount(() => {
totalRound totalRound
}}</text> }}</text>
</view> </view>
<view :class="['target', { 'target--shake': targetShaking }]"> <view class="target">
<view v-if="angle !== null" class="arrow-dir" :style="arrowStyle"> <view v-if="angle !== null" class="arrow-dir" :style="arrowStyle">
<view :style="{ background: circleColor }"> <view :style="{ background: circleColor }">
<image src="../../../static/dot-circle.png" mode="widthFix" /> <image src="../../../static/dot-circle.png" mode="widthFix" />
@@ -471,20 +287,8 @@ onBeforeUnmount(() => {
}}<text v-if="bluelatestOne.ring">环</text></view }}<text v-if="bluelatestOne.ring">环</text></view
> >
<block v-for="(bow, index) in scores" :key="index"> <block v-for="(bow, index) in scores" :key="index">
<image
v-if="
pMode &&
bow.ring > 0 &&
isSvipShot(bow, 'red') &&
!shouldHideRedHit(index)
"
class="svip-hit-bg"
src="../../../static/vip/svip-xuan.png"
:style="getSvipHitBgStyle(bow)"
mode="aspectFit"
/>
<view <view
v-if="bow.ring > 0 && !shouldHideRedHit(index)" v-if="bow.ring > 0"
:class="`hit ${pMode ? 'b' : 's'}-point ${ :class="`hit ${pMode ? 'b' : 's'}-point ${
index === scores.length - 1 && latestOne ? 'pump-in' : '' index === scores.length - 1 && latestOne ? 'pump-in' : ''
}`" }`"
@@ -496,20 +300,8 @@ onBeforeUnmount(() => {
> >
</block> </block>
<block v-for="(bow, index) in blueScores" :key="index"> <block v-for="(bow, index) in blueScores" :key="index">
<image
v-if="
pMode &&
bow.ring > 0 &&
isSvipShot(bow, 'blue') &&
!shouldHideBlueHit(index)
"
class="svip-hit-bg"
src="../../../static/vip/svip-xuan.png"
:style="getSvipHitBgStyle(bow)"
mode="aspectFit"
/>
<view <view
v-if="bow.ring > 0 && !shouldHideBlueHit(index)" v-if="bow.ring > 0"
:class="`hit ${pMode ? 'b' : 's'}-point ${ :class="`hit ${pMode ? 'b' : 's'}-point ${
index === blueScores.length - 1 && bluelatestOne ? 'pump-in' : '' index === blueScores.length - 1 && bluelatestOne ? 'pump-in' : ''
}`" }`"
@@ -521,16 +313,6 @@ onBeforeUnmount(() => {
<text v-if="pMode">{{ index + 1 }}</text> <text v-if="pMode">{{ index + 1 }}</text>
</view> </view>
</block> </block>
<BowShotEffect
:shot="shotEffect && shotEffect.shot"
:playKey="shotEffect ? shotEffect.key : ''"
:targetRadius="safeTargetRadius"
:targetWidth="targetSize.width"
:targetHeight="targetSize.height"
:hitOffsetPx="currentHitRadiusPx"
@impact="shakeTarget"
@complete="completeShotEffect"
/>
<image src="../../../static/bow-target.png" mode="widthFix" /> <image src="../../../static/bow-target.png" mode="widthFix" />
</view> </view>
<view class="footer"> <view class="footer">
@@ -552,22 +334,13 @@ onBeforeUnmount(() => {
height: calc(100vw - 30px); height: calc(100vw - 30px);
padding: 0px 15px; padding: 0px 15px;
position: relative; position: relative;
z-index: 3;
}
.container--effecting {
z-index: 10000;
} }
.target { .target {
position: relative; position: relative;
margin: 10px; margin: 10px;
width: calc(100% - 20px); width: calc(100% - 20px);
height: calc(100% - 20px); height: calc(100% - 20px);
z-index: 1; z-index: -1;
pointer-events: none;
transform-origin: center center;
}
.target--shake {
animation: target-shake 0.26s ease-out;
} }
.e-value { .e-value {
position: absolute; position: absolute;
@@ -622,26 +395,17 @@ onBeforeUnmount(() => {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.svip-hit-bg {
position: absolute;
width: 48rpx;
height: 48rpx;
z-index: 1;
pointer-events: none;
transform-origin: center center;
animation: svip-hit-xuan 1.2s linear infinite;
}
.hit { .hit {
position: absolute; position: absolute;
border-radius: 50%; border-radius: 50%;
z-index: 2; z-index: 1;
color: #fff; color: #fff;
transition: transform 0.2s ease, opacity 0.2s ease; transition: all 0.3s ease;
box-sizing: border-box; box-sizing: border-box;
} }
.b-point { .b-point {
border: 1px solid #fff; border: 1px solid #fff;
z-index: 2; z-index: 1;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@@ -657,20 +421,6 @@ onBeforeUnmount(() => {
transform: translate(-50%, -50%);*/ transform: translate(-50%, -50%);*/
margin-top: 2rpx; margin-top: 2rpx;
} }
@keyframes svip-hit-xuan {
0% {
opacity: 0.9;
transform: translate(-50%, -50%) rotate(0deg) scale(0.92);
}
50% {
opacity: 1;
transform: translate(-50%, -50%) rotate(180deg) scale(1.08);
}
100% {
opacity: 0.9;
transform: translate(-50%, -50%) rotate(360deg) scale(0.92);
}
}
@keyframes target-pump-in { @keyframes target-pump-in {
from { from {
transform: translate(-50%, -50%) scale(2); transform: translate(-50%, -50%) scale(2);
@@ -680,29 +430,6 @@ onBeforeUnmount(() => {
transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1);
} }
} }
@keyframes target-shake {
0% {
transform: translate(0, 0);
}
14% {
transform: translate(-20rpx, 8rpx);
}
28% {
transform: translate(16rpx, -8rpx);
}
44% {
transform: translate(-12rpx, 6rpx);
}
64% {
transform: translate(8rpx, -4rpx);
}
82% {
transform: translate(-4rpx, 2rpx);
}
100% {
transform: translate(0, 0);
}
}
.hit.pump-in { .hit.pump-in {
animation: target-pump-in 0.3s ease-out forwards; animation: target-pump-in 0.3s ease-out forwards;
transform-origin: center center; transform-origin: center center;
@@ -730,8 +457,6 @@ onBeforeUnmount(() => {
display: flex; display: flex;
margin-top: -40px; margin-top: -40px;
justify-content: flex-end; justify-content: flex-end;
position: relative;
z-index: 999;
} }
.footer > image { .footer > image {
width: 40px; width: 40px;
+1 -1
View File
@@ -316,7 +316,7 @@ onBeforeUnmount(() => {
width: 156rpx; width: 156rpx;
height: 28rpx; height: 28rpx;
font-weight: 400; font-weight: 400;
font-size: 24rpx; font-size: 20rpx;
color: #ffffff; color: #ffffff;
text-align: center; text-align: center;
line-height: 28rpx; line-height: 28rpx;
@@ -17,7 +17,6 @@ const props = defineProps({
const players = ref({}); const players = ref({});
const currentTeam = ref(false); const currentTeam = ref(false);
const firstName = ref(""); const firstName = ref("");
const currentPlayer = ref(null);
// 抽出判断:当前队伍且该玩家排序为 0(队伍首位) // 抽出判断:当前队伍且该玩家排序为 0(队伍首位)
const isFirst = (id) => const isFirst = (id) =>
@@ -31,18 +30,6 @@ const getPos = (id) => {
return sort * 40; return sort * 40;
}; };
const getMemberNicknameClass = () => [
"current-shooter-name",
"member-nickname",
currentPlayer.value?.vip === true && currentPlayer.value?.sVip !== true
? "member-nickname--vip"
: "",
currentPlayer.value?.sVip === true ? "member-nickname--svip" : "",
];
const isCurrentPlayerMember = () =>
currentPlayer.value?.vip === true || currentPlayer.value?.sVip === true;
const syncPlayers = () => { const syncPlayers = () => {
const nextPlayers = {}; const nextPlayers = {};
const shooterId = props.currentShooterId; const shooterId = props.currentShooterId;
@@ -53,14 +40,12 @@ const syncPlayers = () => {
currentTeam.value = !!shooterId && shooterIndex >= 0; currentTeam.value = !!shooterId && shooterIndex >= 0;
firstName.value = ""; firstName.value = "";
currentPlayer.value = null;
if (currentTeam.value) { if (currentTeam.value) {
const target = nextTeam.splice(shooterIndex, 1)[0]; const target = nextTeam.splice(shooterIndex, 1)[0];
if (target) { if (target) {
nextTeam.unshift(target); nextTeam.unshift(target);
firstName.value = target.name || ""; firstName.value = target.name || "";
currentPlayer.value = target;
} }
} }
@@ -108,20 +93,8 @@ watch(
>{{ isRed ? "红队" : "蓝队" }}</text >{{ isRed ? "红队" : "蓝队" }}</text
> >
</view> </view>
<view
v-if="currentTeam && isCurrentPlayerMember()"
:class="getMemberNicknameClass()"
:style="{
[isRed ? 'left' : 'right']: '-4rpx',
}"
>
<text class="member-nickname__text">{{ firstName }}</text>
<text v-if="currentPlayer?.sVip === true" class="member-nickname__shine">
{{ firstName }}
</text>
</view>
<text <text
v-else-if="currentTeam" v-if="currentTeam"
class="truncate" class="truncate"
:style="{ :style="{
color: isRed ? '#ff6060' : '#5fadff', color: isRed ? '#ff6060' : '#5fadff',
@@ -141,17 +114,6 @@ watch(
height: 10rpx; height: 10rpx;
margin: 0 20rpx; margin: 0 20rpx;
} }
.current-shooter-name {
position: absolute;
width: 80rpx;
bottom: -100rpx;
justify-content: center;
}
.current-shooter-name .member-nickname__text,
.current-shooter-name .member-nickname__shine {
font-size: 20rpx;
text-align: center;
}
.container > text { .container > text {
position: absolute; position: absolute;
font-size: 20rpx; font-size: 20rpx;
+6 -32
View File
@@ -318,22 +318,6 @@ function enqueueBattleMessage(message) {
if (battleEnded && message.type !== MESSAGETYPESV2.BattleEnd) return; if (battleEnded && message.type !== MESSAGETYPESV2.BattleEnd) return;
if (message.type === MESSAGETYPESV2.BattleEnd) battleEnded = true; if (message.type === MESSAGETYPESV2.BattleEnd) battleEnded = true;
if (message.type === MESSAGETYPESV2.InvalidShot) {
const receivedAt = Date.now();
const order = ++queueOrder;
battleQueue.value.push({
message,
type: message.type,
key: `${message.type}:invalid:${receivedAt}:${order}`,
serverTime: 0,
receivedAt,
order,
});
sortBattleQueue();
runBattleQueue();
return;
}
// 入队阶段只做排序、去重和时间边界判断,不直接改 UI。 // 入队阶段只做排序、去重和时间边界判断,不直接改 UI。
const serverTime = getServerTime(message); const serverTime = getServerTime(message);
const key = getMessageKey(message); const key = getMessageKey(message);
@@ -432,10 +416,7 @@ function playAudioKeys(keys, { interrupt = false, timeout } = {}) {
resolve(); resolve();
}, },
}; };
const timer = setTimeout(() => { const timer = setTimeout(waiter.done, waitTime);
audioManager.recoverIfStale(expectedKey);
waiter.done();
}, waitTime);
audioWaiters.add(waiter); audioWaiters.add(waiter);
audioManager.play(audioKeys, interrupt); audioManager.play(audioKeys, interrupt);
}); });
@@ -482,8 +463,7 @@ function updateGoldenRound(battleInfo) {
} }
const rounds = Array.isArray(battleInfo.rounds) ? battleInfo.rounds : []; const rounds = Array.isArray(battleInfo.rounds) ? battleInfo.rounds : [];
const finishedGoldCount = rounds.filter((round) => !!round?.ifGold).length; const finishedGoldCount = rounds.filter((round) => !!round?.ifGold).length;
// goldenRound.value = Math.max(1, finishedGoldCount + (battleInfo.current?.playerId ? 1 : 0)); goldenRound.value = Math.max(1, finishedGoldCount + (battleInfo.current?.playerId ? 1 : 0));
goldenRound.value = Math.max(1, finishedGoldCount);
} }
// Restore an info snapshot whose eventType points at the NewRound phase. // Restore an info snapshot whose eventType points at the NewRound phase.
@@ -861,14 +841,10 @@ async function runToSomeoneShootTask(task, runId) {
}); });
} }
function isTenPlusRing(shot) { function updateXRingStreak(shooterId, isXRing) {
return !!(shot?.ringX || Number(shot?.ring) >= 10);
}
function updateXRingStreak(shooterId, isTenPlusRingShot) {
if (!shooterId) return false; if (!shooterId) return false;
const id = String(shooterId); const id = String(shooterId);
if (!isTenPlusRingShot) { if (!isXRing) {
xRingStreaks.value[id] = 0; xRingStreaks.value[id] = 0;
saveXRingStreaks(); saveXRingStreaks();
return false; return false;
@@ -913,7 +889,7 @@ async function runShootResultTask(task) {
const isTententen = updateXRingStreak( const isTententen = updateXRingStreak(
currentShooterId.value, currentShooterId.value,
isTenPlusRing(battleInfo.shootData) !!(battleInfo.shootData?.ringX && battleInfo.shootData?.ring)
); );
const audioKeys = buildShootResultAudioKeys(battleInfo.shootData); const audioKeys = buildShootResultAudioKeys(battleInfo.shootData);
if (isTententen) audioKeys.push("tententen"); if (isTententen) audioKeys.push("tententen");
@@ -1222,8 +1198,6 @@ onShow(() => {
:scores="scores" :scores="scores"
:blueScores="blueScores" :blueScores="blueScores"
:latestShotFlash="latestShotFlash" :latestShotFlash="latestShotFlash"
:redTeam="redTeam"
:blueTeam="blueTeam"
/> />
<BattleFooter <BattleFooter
v-if="start" v-if="start"
@@ -1259,7 +1233,7 @@ onShow(() => {
<view class="offline-modal"> <view class="offline-modal">
<text class="offline-title">设备已离线</text> <text class="offline-title">设备已离线</text>
<text class="offline-desc">检测到设备已断开连接请检查设备后继续比赛</text> <text class="offline-desc">检测到设备已断开连接请检查设备后继续比赛</text>
<SButton :onClick="() => (showOfflineModal = false)">我知道了</SButton> <SButton @click="showOfflineModal = false">我知道了</SButton>
</view> </view>
</SModal> </SModal>
</view> </view>
-171
View File
@@ -1,171 +0,0 @@
<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import Container from "./components/Container.vue";
import BowTarget from "./components/BowTarget.vue";
import Avatar from "./components/Avatar.vue";
import { roundsName } from "@/constants";
import { getBattleAPI } from "@/apis";
const selected = ref(0);
const redScores = ref([]);
const blueScores = ref([]);
const redTeam = ref([]);
const blueTeam = ref([]);
const tabs = ref([]);
const players = ref([]);
const data = ref({});
const loadArrows = (round) => {
round.shoots[1].forEach((arrow) => {
blueScores.value.push(arrow);
});
round.shoots[2].forEach((arrow) => {
redScores.value.push(arrow);
});
};
onLoad(async (options) => {
if (!options.battleId) return;
const result = await getBattleAPI(options.battleId || "57943107462893568");
data.value = result;
blueTeam.value = data.value.teams?.[1]?.players || [];
redTeam.value = data.value.teams?.[2]?.players || [];
blueTeam.value.forEach((p, index) => {
players.value.push(p);
players.value.push(redTeam.value[index]);
});
Object.values(data.value.rounds).forEach((round, index) => {
if (round.ifGold) tabs.value.push(`决金箭`);
else tabs.value.push(`${roundsName[index + 1]}`);
});
selected.value = Number(options.selected || 0);
onClickTab(selected.value);
});
const onClickTab = (index) => {
selected.value = index;
redScores.value = [];
blueScores.value = [];
loadArrows(data.value.rounds[index]);
};
</script>
<template>
<Container title="靶纸">
<view class="container">
<view>
<view
v-for="(tab, index) in tabs"
:key="index"
@click="() => onClickTab(index)"
:class="selected === index ? 'selected-tab' : ''"
>
{{ tab }}
</view>
</view>
<view :style="{ margin: '20px 0' }">
<BowTarget
:scores="redScores"
:blueScores="blueScores"
:redTeam="redTeam"
:blueTeam="blueTeam"
mode="team"
/>
</view>
<view class="score-container">
<view
class="score-row"
v-for="(player, index) in players"
:key="index"
:style="{
justifyContent: index % 2 === 0 ? 'flex-end' : 'flex-start',
}"
>
<Avatar
:src="player.avatar"
:borderColor="index % 2 === 0 ? '#64BAFF' : '#FF6767'"
:size="36"
/>
<view>
<view
v-for="(score, index) in data.rounds[selected].shoots[
index % 2 === 0 ? 1 : 2
]"
:key="index"
class="score-item"
>
{{ score.ringX ? "X" : score.ring }}
</view>
</view>
</view>
</view>
</view>
</Container>
</template>
<style scoped>
.container {
width: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container > view:nth-child(1) {
display: flex;
align-items: center;
justify-content: flex-start;
width: calc(100% - 20px);
color: #fff9;
padding: 10px;
overflow-x: auto;
}
.container > view:nth-child(1)::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.container > view:nth-child(1) > view {
border: 1px solid #fff9;
border-radius: 20px;
padding: 7px 10px;
margin: 0 5px;
font-size: 14px;
flex: 0 0 auto;
}
.selected-tab {
background-color: #fed847;
border-color: #fed847 !important;
color: #000;
}
.score-row {
display: flex;
align-items: flex-start;
margin-bottom: 5px;
width: calc(50% - 5px);
padding-left: 5px;
}
.score-row > view:last-child {
margin-left: 10px;
display: grid;
grid-template-columns: repeat(3, auto);
gap: 5px;
margin-right: 5px;
min-width: 26%;
}
.score-item {
background-image: url("../../static/score-bg.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
color: #fed847;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
width: 10vw;
height: 10vw;
}
.score-container {
display: flex;
flex-wrap: wrap;
width: 100%;
}
</style>
+456
View File
@@ -0,0 +1,456 @@
<script setup>
import { ref, watch, onMounted, onBeforeUnmount, computed } from "vue";
import PointSwitcher from "@/components/PointSwitcher.vue";
import { MESSAGETYPES, MESSAGETYPESV2 } from "@/constants";
import { simulShootAPI } from "@/apis";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user, device } = storeToRefs(store);
const props = defineProps({
currentRound: {
type: Number,
default: 0,
},
totalRound: {
type: Number,
default: 0,
},
scores: {
type: Array,
default: () => [],
},
blueScores: {
type: Array,
default: () => [],
},
mode: {
type: String,
default: "solo", // solo 单排,team 双排
},
stop: {
type: Boolean,
default: false,
},
});
const pMode = ref(true);
const latestOne = ref(null);
const bluelatestOne = ref(null);
const prevScores = ref([]);
const prevBlueScores = ref([]);
const timer = ref(null);
const dirTimer = ref(null);
const angle = ref(null);
const circleColor = ref("");
watch(
() => props.scores,
(newVal) => {
if (newVal.length - prevScores.value.length === 1) {
latestOne.value = newVal[newVal.length - 1];
if (timer.value) clearTimeout(timer.value);
timer.value = setTimeout(() => {
latestOne.value = null;
}, 1000);
}
prevScores.value = [...newVal];
},
{
deep: true,
}
);
watch(
() => props.blueScores,
(newVal) => {
if (newVal.length - prevBlueScores.value.length === 1) {
bluelatestOne.value = newVal[newVal.length - 1];
if (timer.value) clearTimeout(timer.value);
timer.value = setTimeout(() => {
bluelatestOne.value = null;
}, 1000);
}
prevBlueScores.value = [...newVal];
},
{
deep: true,
}
);
function calcRealX(num, offset = 3.4) {
const len = 20.4 + num;
return `calc(${(len / 40.8) * 100 - offset / 2}%)`;
}
function calcRealY(num, offset = 3.4) {
const len = num < 0 ? Math.abs(num) + 20.4 : 20.4 - num;
return `calc(${(len / 40.8) * 100 - offset / 2}%)`;
}
const simulShoot = async () => {
if (device.value.deviceId) await simulShootAPI(device.value.deviceId);
};
const simulShoot2 = async () => {
if (device.value.deviceId) {
const r1 = Math.random() > 0.5 ? 0.01 : 0.02;
await simulShootAPI(device.value.deviceId, r1, r1);
}
};
const env = computed(() => {
const accountInfo = uni.getAccountInfoSync();
return accountInfo.miniProgram.envVersion;
});
const arrowStyle = computed(() => {
return {
transform: `rotateX(180deg) translate(-50%, -50%) rotate(${
360 - angle.value
}deg) translateY(105%)`,
};
});
async function onReceiveMessage(message) {
if (Array.isArray(message)) return;
if (message.type === MESSAGETYPESV2.ShootResult && message.shootData) {
if (
message.shootData.playerId === user.value.id &&
!message.shootData.ring &&
message.shootData.angle >= 0
) {
angle.value = null;
setTimeout(() => {
if (props.scores[0]) {
circleColor.value =
message.shootData.playerId === props.scores[0].playerId
? "#ff4444"
: "#1840FF";
}
angle.value = message.shootData.angle;
}, 200);
}
}
}
onMounted(() => {
uni.$on("socket-inbox", onReceiveMessage);
});
onBeforeUnmount(() => {
if (timer.value) {
clearTimeout(timer.value);
timer.value = null;
}
if (dirTimer.value) {
clearTimeout(dirTimer.value);
dirTimer.value = null;
}
uni.$off("socket-inbox", onReceiveMessage);
});
</script>
<template>
<view class="container">
<!-- <view class="header" v-if="totalRound > 0">
<text v-if="totalRound > 0" class="round-count">{{
(currentRound > totalRound ? totalRound : currentRound) +
"/" +
totalRound
}}</text>
</view> -->
<view class="target">
<view v-if="angle !== null" class="arrow-dir" :style="arrowStyle">
<view :style="{ background: circleColor }">
<image src="../../../static/dot-circle.png" mode="widthFix" />
</view>
</view>
<view v-if="stop" class="stop-sign">中场休息</view>
<view
v-if="latestOne && latestOne.ring && user.id === latestOne.playerId"
class="e-value fade-in-out"
:style="{
left: calcRealX(latestOne.ring ? latestOne.x : 0, 20),
top: calcRealY(latestOne.ring ? latestOne.y : 0, 40),
}"
>
经验 +1
</view>
<view
v-if="latestOne"
class="round-tip fade-in-out"
:style="{
left: calcRealX(latestOne.ring ? latestOne.x : 0, 28),
top: calcRealY(latestOne.ring ? latestOne.y : 0, 28),
}"
>{{ latestOne.ringX ? "X" : latestOne.ring || "未上靶"
}}<text v-if="latestOne.ring"></text>
</view>
<view
v-if="
bluelatestOne &&
bluelatestOne.ring &&
user.id === bluelatestOne.playerId
"
class="e-value fade-in-out"
:style="{
left: calcRealX(bluelatestOne.ring ? bluelatestOne.x : 0, 20),
top: calcRealY(bluelatestOne.ring ? bluelatestOne.y : 0, 40),
}"
>
经验 +1
</view>
<view
v-if="bluelatestOne"
class="round-tip fade-in-out"
:style="{
left: calcRealX(bluelatestOne.ring ? bluelatestOne.x : 0, 28),
top: calcRealY(bluelatestOne.ring ? bluelatestOne.y : 0, 28),
}"
>{{ bluelatestOne.ringX ? "X" : bluelatestOne.ring || "未上靶"
}}<text v-if="bluelatestOne.ring">环</text></view
>
<block v-for="(bow, index) in scores" :key="index">
<view
v-if="bow.ring > 0"
:class="`hit ${pMode ? 'b' : 's'}-point ${
index === scores.length - 1 && latestOne ? 'pump-in' : ''
}`"
:style="{
left: calcRealX(bow.x, pMode ? '3.4' : '2'),
top: calcRealY(bow.y, pMode ? '3.4' : '2'),
backgroundColor: mode === 'solo' ? '#00bf04' : '#FF0000',
}"
><text v-if="pMode">{{ index + 1 }}</text></view
>
</block>
<block v-for="(bow, index) in blueScores" :key="index">
<view
v-if="bow.ring > 0"
:class="`hit ${pMode ? 'b' : 's'}-point ${
index === blueScores.length - 1 && bluelatestOne ? 'pump-in' : ''
}`"
:style="{
left: calcRealX(bow.x, pMode ? '3.4' : '2'),
top: calcRealY(bow.y, pMode ? '3.4' : '2'),
backgroundColor: '#1840FF',
}"
>
<text v-if="pMode">{{ index + 1 }}</text>
</view>
</block>
<image src="../../../static/bow-target.png" mode="widthFix" />
</view>
<view class="footer">
<PointSwitcher
:onChange="(val) => (pMode = val)"
:style="{ zIndex: 999 }"
/>
</view>
<view class="simul" v-if="env !== 'release'">
<button @click="simulShoot">模拟</button>
<button @click="simulShoot2">射箭</button>
</view>
</view>
</template>
<style scoped>
.container {
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);
z-index: -1;
}
.e-value {
position: absolute;
background-color: #0006;
color: #fff;
font-size: 12px;
padding: 4px 7px;
border-radius: 5px;
z-index: 2;
width: 50px;
text-align: center;
}
.round-tip {
position: absolute;
color: #fff;
font-size: 30px;
font-weight: bold;
z-index: 2;
width: 100px;
text-align: center;
}
.round-tip > text {
font-size: 24px;
margin-left: 5px;
}
.target > image:last-child {
width: 100%;
height: 100%;
}
.hit {
position: absolute;
border-radius: 50%;
z-index: 1;
color: #fff;
transition: all 0.3s ease;
}
.s-point {
width: 4px;
height: 4px;
min-width: 4px;
min-height: 4px;
}
.b-point {
width: 10px;
height: 10px;
min-width: 10px;
min-height: 10px;
border: 1px solid #fff;
z-index: 1;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
.b-point > text {
font-size: 16rpx;
color: #fff;
font-family: "DINCondensed";
/* text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);*/
margin-top: 2rpx;
}
.header {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: -40px;
}
.header > image:first-child {
width: 40px;
height: 40px;
}
.round-count {
font-size: 20px;
color: #fed847;
top: 75px;
font-weight: bold;
}
.footer {
width: calc(100% - 20px);
padding: 0 10px;
display: flex;
margin-top: -40px;
justify-content: flex-end;
}
.footer > image {
width: 40px;
min-height: 40px;
max-height: 40px;
border-radius: 50%;
border: 1px solid #fff;
}
.simul {
position: absolute;
top: 0;
right: 20px;
margin-left: 20px;
z-index: 999;
}
.simul > button {
color: #fff;
}
.stop-sign {
position: absolute;
font-size: 44px;
color: #fff9;
text-align: center;
width: 200px;
height: 60px;
left: calc(50% - 100px);
top: calc(50% - 30px);
z-index: 99;
font-weight: bold;
}
.arrow-dir {
position: absolute;
width: 100%;
height: 52%;
left: 50%;
bottom: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.arrow-dir > view {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
}
.arrow-dir > view > image {
width: 100rpx;
height: 100rpx;
transform: translate(-30%, -30%);
}
@keyframes spring-in {
0% {
transform: scale(2);
opacity: 0.4;
}
15% {
transform: scale(3);
opacity: 1;
}
30% {
transform: scale(2);
opacity: 0.4;
}
45% {
transform: scale(3);
opacity: 1;
}
60% {
transform: scale(2);
opacity: 0.4;
}
75% {
transform: scale(3);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0;
}
}
@keyframes disappear {
0% {
opacity: 1;
}
75% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.arrow-dir > view {
animation: disappear 3s ease forwards;
}
.arrow-dir > view > image {
animation: spring-in 3s ease forwards;
width: 100%;
}
</style>
@@ -0,0 +1,62 @@
<script setup>
const props = defineProps({
type: {
type: String,
default: "normal",
},
location: {
type: Object,
default: () => ({}),
},
});
</script>
<template>
<view :class="`container ${type}`" :style="{ ...location }">
<slot />
</view>
</template>
<style scoped>
.container {
position: absolute;
color: #fff;
display: flex;
flex-direction: column;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
font-size: 24rpx;
}
.normal {
background-image: url("../static/bubble-tip.png");
width: 157rpx;
height: 105rpx;
padding-top: 10px;
padding-left: 30rpx;
}
.normal2 {
background-image: url("../static/bubble-tip4.png");
width: 190rpx;
height: 105rpx;
padding-top: 10px;
padding-left: 20rpx;
top: 0;
left: 15%;
z-index: 1;
}
.long {
background-image: url("../static/bubble-tip2.png");
width: 370rpx;
height: 70rpx;
top: -50%;
left: 49%;
}
.short {
background-image: url("../static/bubble-tip3.png");
width: 300rpx;
height: 70rpx;
top: -50%;
right: -1%;
}
</style>
@@ -0,0 +1,109 @@
<script setup>
import { computed } from "vue";
const props = defineProps({
arrows: {
type: Array,
default: () => [],
},
total: {
type: Number,
default: 0,
},
});
const getDisplayText = (arrow = {}) => {
if (!arrow) return "";
if (!arrow.ring) return "-";
return arrow.ringX ? "X" : String(arrow.ring);
};
const isLowScore = (arrow = {}) => {
if (!arrow || arrow.ringX) return false;
return Number(arrow.ring) < 6;
};
const displayArrows = computed(() => {
const list = [...props.arrows];
if (props.total > 0 && list.length < props.total) {
list.push(null);
}
return list;
});
</script>
<template>
<view v-if="displayArrows.length" class="score-panel">
<view class="score-grid">
<view
v-for="(arrow, index) in displayArrows"
:key="index"
class="score-card"
>
<image class="score-card-bg" :src="isLowScore(arrow)?'/static/training-difficulty-design/block-gray.png':'/static/training-difficulty-design/block-gold.png'"></image>
<text
class="score-value"
:class="{ 'score-value--low': isLowScore(arrow) }"
>
{{ getDisplayText(arrow) }}
</text>
</view>
</view>
</view>
</template>
<style scoped lang="scss">
.score-panel {
width: 100%;
padding: 30rpx 40rpx 0 40rpx;
box-sizing: border-box;
}
.score-grid {
display: flex;
flex-wrap: wrap;
}
.score-card {
position: relative;
width: 100rpx;
height: 56rpx;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
margin-right: 14rpx;
margin-bottom: 14rpx;
}
.score-card:nth-child(6n) {
margin-right: 0;
}
.score-card-bg {
position: absolute;
top: 0;
left: 0;
width: 100rpx;
height: 56rpx;
}
.score-value {
position: relative;
z-index: 1;
min-width: 28rpx;
text-align: center;
font-size: 34rpx;
line-height: 1;
font-weight: 700;
font-style: italic;
color: #f6e3b2;
text-shadow: 0 2rpx 0 rgba(36, 36, 48, 0.5);
margin-left: -10rpx;
}
.score-value--low {
color: #cfcfcf;
text-shadow: 0 2rpx 0 rgba(0, 0, 0, 0.5);
}
</style>
@@ -0,0 +1,628 @@
<script setup>
import { ref, onMounted, computed } from "vue";
import ScreenHint from "@/components/ScreenHint.vue";
import BowData from "@/components/BowData.vue";
import UserUpgrade from "@/components/UserUpgrade.vue";
import { directionAdjusts } from "@/constants";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
const props = defineProps({
onClose: {
type: Function,
default: () => { },
},
onRetry: {
type: Function,
default: () => { },
},
total: {
type: Number,
default: 0,
},
rowCount: {
type: Number,
default: 0,
},
result: {
type: Object,
default: () => ({}),
},
tipSrc: {
type: String,
default: "",
},
});
const showPanel = ref(true);
const showComment = ref(false);
const showBowData = ref(false);
const showUpgrade = ref(false);
const closePanel = () => {
showPanel.value = false;
setTimeout(() => {
props.onClose();
}, 300);
};
const retryPractice = () => {
showPanel.value = false;
setTimeout(() => {
props.onRetry();
}, 300);
};
function onClickShare() {
uni.$emit("share-image");
}
onMounted(() => {
if (props.result.lvl > user.value.lvl) {
showUpgrade.value = true;
}
});
const details = computed(() => props.result.details || []);
const arrows = computed(() => {
const data = new Array(props.total).fill(null);
details.value.forEach((arrow, index) => {
data[index] = arrow;
});
return data;
});
const validArrows = computed(() => arrows.value.filter((a) => !!a?.ring).length);
const totalRing = computed(() =>
details.value.reduce((last, next) => last + (Number(next.ring) || 0), 0)
);
const gainedExp = computed(
() => props.result.exp || props.result.experience || validArrows.value
);
const currentLevel = computed(
() => props.result.lvl || user.value.lvl || user.value.rankLvl || 1
);
const currentExp = computed(
() => props.result.currentExp || props.result.score || user.value.scores || 0
);
const nextExp = computed(
() => props.result.nextExp || props.result.upgradeScore || 100
);
const expPercent = computed(() => {
if (!nextExp.value) return 0;
return Math.min(100, Math.max(0, (currentExp.value / nextExp.value) * 100));
});
const findValue = (...keys) => {
const item = keys.find((key) => props.result[key] !== undefined);
return item ? props.result[item] : undefined;
};
const formatDuration = (value) => {
const seconds = Number(value || 0);
if (!seconds) return "--";
const minutes = Math.floor(seconds / 60);
const rest = seconds % 60;
return minutes ? `${minutes}${rest}` : `${rest}`;
};
const usedTime = computed(() =>
findValue("duration", "usedTime", "shootTime", "time")
);
const hitCompare = computed(
() => Number(findValue("hitCompare", "hitDiff", "hitDelta") || 0)
);
const timeCompare = computed(
() => Number(findValue("timeCompare", "timeDiff", "durationDiff") || 0)
);
const calories = computed(
() => Number(findValue("calories", "calorie", "kcal") || 0)
);
</script>
<template>
<view :class="['result-mask', showPanel ? 'result-mask--show' : 'result-mask--hide']">
<image class="hero-glow" src="/static/training-difficulty-design/result-bg.png" mode="widthFix" />
<view class="result-title">
<image class="result-title-bg" src="/static/training-difficulty-design/result-t-bg.png" mode="widthFix" />
<view class="result-title-text">Lv{{ currentLevel }}</view>
</view>
<view class="result-panel">
<view class="line-top"></view>
<view class="line-bottom"></view>
<view class="stats">
<view class="stat-row">
<image class="stat-bg" src="/static/training-difficulty-design/result-c-bg.png" mode="scaleToFill" />
<view class="stat-cell">
<text class="stat-label">共命中目标</text>
<view class="stat-value">
<text>{{ validArrows }}</text>
<text class="stat-unit"></text>
</view>
</view>
<view class="stat-divider"></view>
<view class="stat-cell stat-cell--compare">
<text class="stat-label">对比上次</text>
<view class="stat-value">
<text>{{ Math.abs(hitCompare) }}</text>
<text class="stat-unit"></text>
<image class="trend-icon" :class="{ 'trend-icon--down': hitCompare < 0 }"
src="/static/training-difficulty-design/result-up.png" mode="widthFix" />
</view>
</view>
</view>
<view class="stat-row">
<image class="stat-bg" src="/static/training-difficulty-design/result-c-bg.png" mode="scaleToFill" />
<view class="stat-cell">
<text class="stat-label">用时</text>
<view class="stat-value">
<text>{{ formatDuration(usedTime) }}</text>
</view>
</view>
<view class="stat-divider"></view>
<view class="stat-cell stat-cell--compare">
<text class="stat-label">对比上次</text>
<view class="stat-value">
<text>{{ formatDuration(Math.abs(timeCompare)) }}</text>
<image class="trend-icon" :class="{ 'trend-icon--down': timeCompare <= 0 }"
src="/static/training-difficulty-design/result-up.png" mode="widthFix" />
</view>
</view>
</view>
<view class="stat-row">
<image class="stat-bg" src="/static/training-difficulty-design/result-c-bg.png" mode="scaleToFill" />
<view class="stat-cell">
<text class="stat-label">消耗卡路里</text>
<view class="stat-value">
<text>{{ calories }}</text>
</view>
</view>
<text class="stat-equal"></text>
<!-- <view class="stat-divider"></view> -->
<view class="stat-cell stat-cell--compare">
<view class="stat-value">
<image v-for="index in 3" :key="index" class="rice-icon"
src="/static/training-difficulty-design/result-rice.png" mode="widthFix" />
</view>
</view>
</view>
<view class="actions">
<view class="action-item" @click="() => (showBowData = true)">
<image class="action-icon" src="/static/training-difficulty-design/result-icon-1.png" mode="widthFix" />
<text>查看靶纸</text>
</view>
<view v-if="validArrows === total" class="action-item" @click="() => (showComment = true)">
<image class="action-icon" src="/static/training-difficulty-design/result-icon-2.png" mode="widthFix" />
<text>教练点评</text>
</view>
<view v-if="validArrows === total" class="action-item" @click="onClickShare">
<image class="action-icon" src="/static/training-difficulty-design/result-icon-3.png" mode="widthFix" />
<text>分享成绩</text>
</view>
</view>
</view>
</view>
<view class="oper-box">
<view class="exp-area">
<text class="exp-gain">+{{ gainedExp }}经验</text>
<view class="level-progress">
<text class="level-text">LV.{{ currentLevel }}</text>
<view class="progress-track">
<view class="progress-fill" :style="{ width: `${expPercent}%` }"></view>
</view>
<text class="progress-text">{{ currentExp }} / {{ nextExp }}</text>
</view>
</view>
<view class="footer-actions">
<view class="result-btn result-btn--muted" @click="closePanel">
<text>{{ validArrows === total ? "完成" : "返回" }}</text>
</view>
<view class="result-btn result-btn--primary" @click="retryPractice">
<text>再来一次</text>
</view>
</view>
</view>
<ScreenHint :show="showComment" :onClose="() => (showComment = false)" mode="tall">
<view class="coach-comment">
<text>
您本次练习取得了<text class="gold-text">{{ totalRing }}</text>环的成绩所有箭支上靶后的平均点间距离为<text class="gold-text">{{
Number((result.average_distance || 0).toFixed(2))
}}</text>{{
result.spreadEvaluation === "Dispersed"
? "还需要持续改进哦~"
: "成绩优秀。"
}}
</text>
<view>
<image src="https://static.shelingxingqiu.com/attachment/2025-11-26/deihtj15xjwcz3c1tx.png" mode="widthFix" />
<text class="coach-suggestion">
针对您本次的练习{{
result.spreadEvaluation === "Dispersed"
? "我们建议您充分练习推弓、靠位以及撒放动作一致性。"
: totalRing >= 100
? "我们建议您继续保持即可。"
: `我们建议您将设备的瞄准器${directionAdjusts[result.adjustmentHint]
}调整。`
}}
</text>
</view>
</view>
</ScreenHint>
<BowData :total="arrows.length" :arrows="result.details" :show="showBowData"
:onClose="() => (showBowData = false)" />
<UserUpgrade :show="showUpgrade" :onClose="() => (showUpgrade = false)" :lvl="result.lvl" />
</view>
</template>
<style scoped lang="scss">
.result-mask {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
overflow: hidden;
background:
linear-gradient(180deg,
rgba(24, 22, 17, 0.38) 0%,
rgba(24, 22, 17, 0.56) 28%,
rgba(17, 17, 25, 0.92) 58%),
rgba(0, 0, 0, 0.72);
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.result-mask--show {
opacity: 1;
}
.result-mask--hide {
opacity: 0;
transition: opacity 0.3s ease;
}
.hero-glow {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.result-title {
position: relative;
width: 100%;
height: 264rpx;
z-index: 2;
}
.result-title-bg {
width: 100%;
height: 264rpx;
display: block;
}
.result-title-text {
width: 100%;
font-size: 28rpx;
color: #FBFCE6;
font-weight: 600;
line-height: 40rpx;
text-align: center;
position: absolute;
top: 116rpx;
left: 0;
}
.result-panel {
width: 100vw;
height: 634rpx;
padding: 144rpx 80rpx 0 80rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
background: rgba(0, 0, 0, 0.8);
z-index: 1;
margin-top: -100rpx;
position: relative;
}
.stats {
width: 100%;
margin-top: 34rpx;
}
.line-top {
background: linear-gradient(45deg, rgba(205, 183, 122, 0) 0%, #CDB77A 49.92%, rgba(205, 183, 122, 0) 100%);
width: 100%;
height: 4rpx;
opacity: 0.9;
position: absolute;
top: 2rpx;
left: 0;
}
.line-bottom {
background: linear-gradient(45deg, rgba(205, 183, 122, 0) 0%, #CDB77A 49.92%, rgba(205, 183, 122, 0) 100%);
width: 100%;
height: 4rpx;
opacity: 0.9;
position: absolute;
bottom: 2rpx;
left: 0;
}
.stat-row {
width: 100%;
height: 62rpx;
position: relative;
display: flex;
align-items: center;
margin-bottom: 52rpx;
// border: 2rpx solid rgba(209, 184, 125, 0.72);
// border-radius: 14rpx;
transform: skewX(-12deg);
box-sizing: border-box;
}
.stat-cell {
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transform: skewX(12deg);
}
.stat-bg {
position: absolute;
top: 0;
left: 0;
width: 582rpx;
height: 62rpx;
}
.stat-cell--compare {
padding-left: 8rpx;
box-sizing: border-box;
}
.stat-label {
position: absolute;
top: -30rpx;
color: rgba(255, 255, 255, 0.7);
font-size: 20rpx;
line-height: 1;
}
.stat-value {
display: flex;
align-items: center;
justify-content: center;
min-width: 120rpx;
color: #F3E0B9;
font-size: 32rpx;
line-height: 1;
font-weight: 700;
font-style: italic;
}
.stat-unit {
margin-left: 4rpx;
font-size: 24rpx;
}
.stat-divider {
width: 2rpx;
height: 34rpx;
background: rgba(197, 160, 92, 0.64);
transform: skewX(12deg);
}
.stat-equal{
width: 30rpx;
height: 40rpx;
color: #F3E0B9;
font-size: 30rpx;
margin-left: 10rpx;
}
.trend-icon {
width: 28rpx;
height: 42rpx;
margin-left: 16rpx;
}
.trend-icon--down {
transform: rotate(180deg);
}
.stat-bg {
position: absolute;
top: 0;
left: 0;
width: 582rpx;
height: 62rpx;
}
.rice-list {
width: 160rpx;
display: flex;
align-items: center;
}
.rice-icon {
width: 36rpx;
height: 34rpx;
margin-right: 14rpx;
}
.oper-box {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 598rpx;
}
.actions {
width: 350rpx;
display: flex;
justify-content: space-between;
margin: 0 auto;
margin-top: 38rpx;
}
.action-item {
width: 80rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.action-icon {
width: 70rpx;
height: 68rpx;
}
.action-item>text {
margin-top: 4rpx;
color: #FAE6BC;
font-size: 20rpx;
line-height: 1;
white-space: nowrap;
}
.exp-area {
width: 100%;
margin-top: auto;
padding-top: 122rpx;
}
.exp-gain {
display: block;
margin-bottom: 14rpx;
color: #f6e3b2;
font-size: 22rpx;
line-height: 1;
text-align: center;
}
.level-progress {
display: flex;
align-items: center;
width: 100%;
}
.level-text,
.progress-text {
color: rgba(255, 255, 255, 0.86);
font-size: 24rpx;
line-height: 1;
}
.level-text {
min-width: 60rpx;
}
.progress-text {
min-width: 72rpx;
text-align: right;
}
.progress-track {
flex: 1;
height: 10rpx;
margin: 0 14rpx;
border-radius: 999rpx;
overflow: hidden;
background: rgba(255, 255, 255, 0.26);
}
.progress-fill {
height: 100%;
border-radius: 999rpx;
background: linear-gradient(90deg, #ff940f 0%, #ffbb33 58%, #fff0a7 100%);
}
.footer-actions {
width: 100%;
display: flex;
justify-content: center;
margin-top: 70rpx;
}
.result-btn {
width: 234rpx;
height: 72rpx;
border-radius: 999rpx;
display: flex;
align-items: center;
justify-content: center;
margin: 0 18rpx;
}
.result-btn>text {
font-size: 28rpx;
line-height: 1;
font-weight: 700;
}
.result-btn--muted {
color: #ffffff;
background: rgba(255, 255, 255, 0.2);
}
.result-btn--primary {
background: #FED847;
color: #151515;
}
.gold-text {
color: #fed847;
}
.coach-comment {
display: flex;
flex-direction: column;
font-size: 14px;
}
.coach-comment>view {
display: flex;
}
.coach-comment>view>image {
width: 420rpx;
height: 420rpx;
margin-right: 20rpx;
}
.coach-suggestion {
margin-top: 12px;
}
</style>
@@ -0,0 +1,379 @@
<script setup>
import { ref, watch, onMounted, onBeforeUnmount, computed } from "vue";
import audioManager from "@/audioManager";
import { MESSAGETYPESV2 } from "@/constants";
import { getDirectionText } from "@/util";
import Avatar from "@/components/Avatar.vue";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
const props = defineProps({
show: {
type: Boolean,
default: true,
},
start: {
type: Boolean,
default: false,
},
tips: {
type: String,
default: "",
},
total: {
type: Number,
default: 120,
},
currentRound: {
type: Number,
default: 0,
},
battleId: {
type: String,
default: "",
},
melee: {
type: Boolean,
default: false,
},
onStop: {
type: Function,
default: () => {},
},
});
const barColor = ref("#fed847");
const remain = ref(props.total);
const timer = ref(null);
const sound = ref(true);
const currentRound = ref(props.currentRound);
const currentRoundEnded = ref(false);
const halfTime = ref(false);
const wait = ref(0);
const transitionStyle = ref("all 1s linear");
const progressPercent = computed(() => {
if (!props.total) return 0;
return Math.max(0, Math.min(100, (remain.value / props.total) * 100));
});
const displayName = computed(() => {
return (
user.value?.nickName ||
user.value?.nickname ||
user.value?.name ||
"Archer"
);
});
const avatarSrc = computed(() => {
return user.value?.avatar || "/static/shooter2.png";
});
watch(
() => props.tips,
(newVal) => {
let key = "";
if (newVal.includes("红队")) key = "请红方射箭";
if (newVal.includes("蓝队")) key = "请蓝方射箭";
if (key) {
if (currentRoundEnded.value) {
currentRound.value += 1;
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);
}
}
}
);
const resetTimer = (count) => {
if (timer.value) clearInterval(timer.value);
const newVal = Math.round(count);
if (newVal >= remain.value) {
transitionStyle.value = "none";
remain.value = newVal;
setTimeout(() => {
transitionStyle.value = "all 1s linear";
}, 50);
} else {
remain.value = newVal;
}
if (remain.value > 0) {
timer.value = setInterval(() => {
if (remain.value === 0) {
clearInterval(timer.value);
props.onStop();
}
if (remain.value > 0) remain.value--;
}, 1000);
}
};
watch(
() => props.start,
(newVal) => {
if (newVal) {
resetTimer(props.total);
} else {
remain.value = 0;
clearInterval(timer.value);
}
},
{
immediate: true,
}
);
const tipContent = computed(() => {
if (halfTime.value) {
return props.battleId ? "中场休息" : `中场休息(${wait.value}秒)`;
}
return props.start && remain.value === 0 ? "时间到!" : props.tips;
});
const updateSound = () => {
sound.value = !sound.value;
audioManager.setMuted(!sound.value);
};
async function onReceiveMessage(msg) {
if (Array.isArray(msg)) return;
if (msg.type === MESSAGETYPESV2.BattleStart) {
halfTime.value = false;
audioManager.play("比赛开始");
} else if (msg.type === MESSAGETYPESV2.BattleEnd) {
audioManager.play("比赛结束", false);
} else if (msg.type === MESSAGETYPESV2.ShootResult) {
let arrow = {};
if (msg.details && Array.isArray(msg.details)) {
arrow = msg.details[msg.details.length - 1];
} else {
if (msg.shootData.playerId !== user.value.id) return;
if (msg.shootData) arrow = msg.shootData;
}
let key = [];
key.push(arrow.ring ? `${arrow.ringX ? "X" : arrow.ring}` : "未上靶");
if (arrow.angle !== null) {
key.push(`${getDirectionText(arrow.angle)}调整`);
}
audioManager.play(key, false);
} else if (msg.type === MESSAGETYPESV2.HalfRest) {
halfTime.value = true;
audioManager.play("中场休息");
} else if (msg.type === MESSAGETYPESV2.InvalidShot) {
uni.showToast({
title: "距离不足,无效",
icon: "none",
});
audioManager.play("射击无效");
}
}
const playSound = (key) => {
audioManager.play(key);
};
onMounted(() => {
uni.$on("update-remain", resetTimer);
uni.$on("socket-inbox", onReceiveMessage);
uni.$on("play-sound", playSound);
});
onBeforeUnmount(() => {
uni.$off("update-remain", resetTimer);
uni.$off("socket-inbox", onReceiveMessage);
uni.$off("play-sound", playSound);
if (timer.value) clearInterval(timer.value);
});
</script>
<template>
<view v-if="show" class="progress-card">
<view class="progress-card__header">
<view class="progress-card__profile">
<view class="progress-card__avatar-shell">
<Avatar :src="user.avatar" :size="40" />
</view>
<text class="progress-card__name">{{ displayName }}</text>
</view>
<!-- <button class="progress-card__sound" hover-class="none" @click="updateSound">
<image
class="progress-card__sound-icon"
:src="`/static/sound${sound ? '' : '-off'}-yellow.png`"
mode="aspectFit"
/>
</button> -->
</view>
<view class="progress-card__track-wrap">
<image
class="progress-card__titile"
src="../../../static/training-difficulty-design/text-icon-cgxl.png"
mode="aspectFit"
/>
<view class="progress-card__track">
<view
class="progress-card__fill"
:style="{
width: `${progressPercent}%`,
backgroundColor: barColor,
right: tips.includes('红队') ? 0 : 'unset',
transition: transitionStyle,
}"
/>
<view class="progress-card__badge">
<text class="progress-card__badge-text">剩余{{ remain }}</text>
</view>
</view>
<!-- <text v-if="tipContent" class="progress-card__tip">{{ tipContent }}123</text> -->
</view>
</view>
</template>
<style scoped>
.progress-card {
box-sizing: border-box;
/* padding: 50rpx 30rpx 0 30rpx; */
margin: 70rpx 30rpx 0 30rpx;
}
.progress-card__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.progress-card__profile {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.progress-card__avatar-shell {
width: 86rpx;
height: 86rpx;
padding: 3rpx;
box-sizing: border-box;
border-radius: 50%;
background: linear-gradient(180deg, rgba(255, 209, 153, 1), rgba(162, 119, 55, 1));
}
.progress-card__avatar {
width: 100%;
height: 100%;
display: block;
border-radius: 50%;
}
.progress-card__name {
width: 86rpx;
color: #E7BA80;
font-size: 18rpx;
line-height: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
margin-top: 10rpx;
}
.progress-card__sound {
width: 68rpx;
height: 68rpx;
margin: 0;
padding: 0;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(28, 24, 21, 0.72);
box-shadow: 0 8rpx 18rpx rgba(0, 0, 0, 0.18);
}
.progress-card__sound::after {
border: none;
}
.progress-card__sound-icon {
width: 34rpx;
height: 34rpx;
}
.progress-card__track-wrap {
margin-top: -156rpx;
padding-left: 102rpx;
}
.progress-card__titile{
width: 260rpx;
height: 72rpx;
margin-left: 110rpx;
}
.progress-card__track {
position: relative;
width: 100%;
height: 24rpx;
border-radius: 18rpx;
overflow: hidden;
background: #444444;
}
.progress-card__fill {
position: absolute;
top: 0;
left: 0;
bottom: 0;
border-radius: 18rpx;
background: linear-gradient( 133deg, #FFD19A 0%, #A17636 100%);
}
.progress-card__badge {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 156rpx;
height: 40rpx;
padding: 0 24rpx;
box-sizing: border-box;
border-radius: 999rpx;
display: flex;
align-items: center;
justify-content: center;
/* background: rgba(164, 117, 47, 0.94); */
/* box-shadow: 0 4rpx 10rpx rgba(76, 45, 7, 0.22); */
}
.progress-card__badge-text {
color: #fff7de;
font-size: 18rpx;
line-height: 1;
white-space: nowrap;
}
.progress-card__tip {
display: block;
margin-top: 16rpx;
color: rgba(255, 243, 216, 0.88);
font-size: 24rpx;
line-height: 1.4;
text-align: center;
}
</style>
@@ -0,0 +1,196 @@
<script setup>
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 { MESSAGETYPESV2 } from "@/constants";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user, device } = storeToRefs(store);
const props = defineProps({
guide: {
type: Boolean,
default: true,
},
isBattle: {
type: Boolean,
default: false,
},
count: {
type: Number,
default: 15,
},
});
const arrow = ref({});
const distance = ref(0);
const showsimul = ref(false);
const count = ref(props.count);
const timer = ref(null);
const updateTimer = (value) => {
count.value = Math.round(value);
};
onMounted(() => {
audioManager.play("请射箭测试距离");
if (props.isBattle) {
timer.value = setInterval(() => {
count.value -= 1;
if (count.value < 0) clearInterval(timer.value);
}, 1000);
}
uni.$on("update-timer", updateTimer);
});
onBeforeUnmount(() => {
if (timer.value) clearInterval(timer.value);
uni.$off("update-timer", updateTimer);
});
async function onReceiveMessage(msg) {
if (Array.isArray(msg)) return;
if (msg.type === MESSAGETYPESV2.TestDistance) {
distance.value = Number((msg.shootData.distance / 100).toFixed(2));
if (distance.value >= 5) audioManager.play("距离合格");
else audioManager.play("距离不足");
}
}
const simulShoot = async () => {
if (device.value.deviceId) await simulShootAPI(device.value.deviceId);
};
onMounted(() => {
uni.$on("socket-inbox", onReceiveMessage);
const accountInfo = uni.getAccountInfoSync();
const envVersion = accountInfo.miniProgram.envVersion;
if (envVersion !== "release") showsimul.value = true;
});
onBeforeUnmount(() => {
uni.$off("socket-inbox", onReceiveMessage);
});
</script>
<template>
<view class="container">
<view class="test-area">
<image
class="text-bg"
src="../../../static/training-difficulty-design/par-bg.png"
mode="widthFix"
/>
<button
class="simul"
@click="simulShoot"
hover-class="none"
v-if="showsimul"
>
模拟射箭
</button>
<view class="warnning-text">
<view class="target-tip">当前靶子为<text class="text-yellow">20cm</text>全环靶,请更换靶子</view>
<block v-if="distance > 0">
<text>当前距离<text class="text-yellow">{{ distance }}</text></text>
<text v-if="distance >= 5">已达到距离要求</text>
<text v-else>请调整站位</text>
</block>
<block v-else>
<text>请射箭测试站距</text>
</block>
</view>
<view class="user-row">
<Avatar :src="user.avatar" :size="35" />
<BowPower />
</view>
</view>
<view v-if="isBattle" class="ready-timer">
<image src="../../../static/test-tip.png" mode="widthFix" />
<view v-if="count >= 0">
<text>具体正式比赛还有</text>
<text>{{ count }}</text>
<text></text>
</view>
<view v-else> 进入中... </view>
</view>
</view>
</template>
<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 {
width: 100%;
height: auto;
position: relative;
}
.text-bg {
width: 100%;
position: relative;
}
.warnning-text {
color: #fff;
display: flex;
flex-direction: column;
height: 200rpx;
position: absolute;
top: 142rpx;
left: 0;
width: 100%;
font-size: 36rpx;
text-align: center;
}
.target-tip{
margin-bottom: 28rpx;
}
.text-yellow{
color: #FED847;
}
.simul {
position: absolute;
color: #fff;
right: 10px;
top: 30rpx;
}
.user-row{
position: absolute;
bottom: 34rpx;
left: 0rpx;
width: 100%;
padding: 0 34rpx;
box-sizing: border-box;
}
</style>
@@ -0,0 +1,327 @@
<script setup>
import { computed } from "vue";
const lockedBadgeBackground =
"/static/training-difficulty-design/unlock.svg";
const unlockedBadgeBackground =
"/static/training-difficulty-design/lock.svg";
const props = defineProps({
node: {
type: Object,
required: true,
},
active: {
type: Boolean,
default: false,
},
completedProgress: {
type: Number,
default: 0,
},
locked: {
type: Boolean,
default: false,
},
});
const emit = defineEmits(["click"]);
const badgeStyle = computed(() => {
const { left, top } = props.node.style || {};
return {
left,
top,
};
});
const progressValue = computed(() => {
const value = Number(props.completedProgress);
if (!Number.isFinite(value)) return 0;
return Math.max(0, Math.min(100, value));
});
const badgeStateStyle = computed(() => {
const label = String(props.node?.label || "");
const estimatedLabelWidthRpx = Math.max(36, label.length * 14);
const labelCircleSizeRpx = Math.max(58, estimatedLabelWidthRpx + 18);
const badgeSizeRpx = Math.max(
124,
Math.round(labelCircleSizeRpx / 0.4727)
);
return {
"--badge-progress": progressValue.value,
"--badge-size": `${badgeSizeRpx}rpx`,
"--badge-label-size": `${labelCircleSizeRpx}rpx`,
"--badge-orbit-offset": "12rpx",
"--badge-locked-ring-offset": "12rpx",
};
});
const showProgress = computed(() => {
return !props.locked;
});
const badgeFillSrc = computed(() => {
return props.locked ? lockedBadgeBackground : unlockedBadgeBackground;
});
const handleClick = () => {
emit("click", props.node);
};
</script>
<template>
<view
class="difficulty-badge"
:class="{
'difficulty-badge--active': active,
'difficulty-badge--progress': showProgress,
'difficulty-badge--locked': locked,
}"
:style="[badgeStyle, badgeStateStyle]"
@click="handleClick"
>
<view class="difficulty-badge__fill">
<image class="difficulty-badge__bg" :src="badgeFillSrc" mode="aspectFit" />
<view v-if="active" class="difficulty-badge__active-orbit">
<view
class="difficulty-badge__active-triangle difficulty-badge__active-triangle--top"
></view>
<view
class="difficulty-badge__active-triangle difficulty-badge__active-triangle--right"
></view>
<view
class="difficulty-badge__active-triangle difficulty-badge__active-triangle--bottom"
></view>
<view
class="difficulty-badge__active-triangle difficulty-badge__active-triangle--left"
></view>
</view>
<view class="difficulty-badge__label-wrap">
<view class="difficulty-badge__label">{{ node.label }}</view>
</view>
</view>
</view>
</template>
<style scoped>
.difficulty-badge,
.difficulty-badge__fill,
.difficulty-badge__label-wrap {
box-sizing: border-box;
}
.difficulty-badge {
position: absolute;
transform: translate(-50%, -50%);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.difficulty-badge--active {
transform: translate(-50%, -50%) scale(1.04);
}
.difficulty-badge--active::before {
content: "";
position: absolute;
inset: calc(var(--badge-orbit-offset) * -1);
border: 4rpx solid transparent;
border-radius: 50%;
pointer-events: none;
box-sizing: border-box;
}
.difficulty-badge--active::after {
content: "";
position: absolute;
inset: -24rpx;
border: 4rpx solid rgba(254, 208, 152, 0.96);
border-radius: 50%;
box-shadow: inset 0 0 10rpx rgba(254, 208, 152, 0.88),
inset 0 0 22rpx rgba(254, 208, 152, 0.32),
0 0 14rpx rgba(254, 208, 152, 0.92),
0 0 32rpx rgba(254, 208, 152, 0.52),
0 0 52rpx rgba(254, 208, 152, 0.22);
pointer-events: none;
box-sizing: border-box;
}
.difficulty-badge__active-orbit {
position: absolute;
top: 50%;
left: 50%;
width: calc(100% + var(--badge-orbit-offset) * 2);
height: calc(100% + var(--badge-orbit-offset) * 2);
border-radius: 50%;
z-index: 3;
pointer-events: none;
transform: translate(-50%, -50%);
animation: badge-orbit-spin 5.4s linear infinite;
transform-origin: center;
}
.difficulty-badge__active-triangle {
position: absolute;
width: 0;
height: 0;
border-style: solid;
z-index: 2;
pointer-events: none;
opacity: 0.92;
filter: drop-shadow(0 0 8rpx rgba(255, 255, 255, 0.45));
}
.difficulty-badge__active-triangle--top {
top: -3rpx;
left: 50%;
transform: translateX(-50%);
border-width: 11rpx 8rpx 0 8rpx;
border-color: #ffffff transparent transparent transparent;
}
.difficulty-badge__active-triangle--right {
right: -3rpx;
top: 50%;
transform: translateY(-50%);
border-width: 8rpx 11rpx 8rpx 0;
border-color: transparent #ffffff transparent transparent;
}
.difficulty-badge__active-triangle--bottom {
bottom: -3rpx;
left: 50%;
transform: translateX(-50%);
border-width: 0 8rpx 11rpx 8rpx;
border-color: transparent transparent #ffffff transparent;
}
.difficulty-badge__active-triangle--left {
left: -3rpx;
top: 50%;
transform: translateY(-50%);
border-width: 8rpx 0 8rpx 11rpx;
border-color: transparent transparent transparent #ffffff;
}
.difficulty-badge__fill {
width: var(--badge-size);
height: var(--badge-size);
position: relative;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.difficulty-badge__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
z-index: 1;
}
.difficulty-badge--active .difficulty-badge__fill::before,
.difficulty-badge--active .difficulty-badge__fill::after {
content: none;
}
.difficulty-badge--progress .difficulty-badge__fill::before,
.difficulty-badge--progress .difficulty-badge__fill::after {
content: "";
position: absolute;
inset: -12rpx;
padding: 6rpx;
border-radius: inherit;
-webkit-mask: linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
pointer-events: none;
}
.difficulty-badge--progress .difficulty-badge__fill::before {
background: rgba(255, 255, 255, 0.35);
}
.difficulty-badge--progress .difficulty-badge__fill::after {
background: conic-gradient(
from -90deg,
rgba(254, 208, 152, 1) 0,
rgba(255, 229, 198, 1) calc(var(--badge-progress) * 1%),
transparent calc(var(--badge-progress) * 1%) 100%
);
}
.difficulty-badge--active .difficulty-badge__label,
.difficulty-badge--progress .difficulty-badge__label {
color: #333333;
}
.difficulty-badge--locked {
opacity: 1;
}
.difficulty-badge--locked::before {
content: "";
position: absolute;
inset: calc(var(--badge-locked-ring-offset) * -1);
border: 2rpx solid rgba(160, 160, 160, 0.5);
border-radius: 50%;
pointer-events: none;
box-sizing: border-box;
}
.difficulty-badge--locked .difficulty-badge__label {
color: rgba(51, 51, 51, 0.54);
}
.difficulty-badge__label-wrap {
width: var(--badge-label-size);
height: var(--badge-label-size);
border-radius: 50%;
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
margin-top: -5rpx;
}
.difficulty-badge__label {
color: rgba(51, 51, 51, 0.7);
font-size: 24rpx;
max-width: 100%;
height: 34rpx;
line-height: 34rpx;
font-family: "PingFang SC", sans-serif;
font-weight: 600;
text-align: center;
white-space: nowrap;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
@keyframes badge-orbit-spin {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
</style>
@@ -0,0 +1,86 @@
<script setup>
import { computed } from "vue";
const props = defineProps({
title: {
type: String,
default: "",
},
lines: {
type: Array,
default: () => [],
},
});
const previewLines = computed(() => {
return props.lines.map((line) => String(line || "").trim()).filter(Boolean);
});
</script>
<template>
<view class="difficulty-preview">
<image
class="difficulty-preview__bg"
src="/static/training-difficulty-design/text.png"
mode="widthFix"
/>
<view class="difficulty-preview__content">
<text class="difficulty-preview__title">{{ title }}</text>
<view class="difficulty-preview__copy">
<text
v-for="(line, index) in previewLines"
:key="`${line}-${index}`"
class="difficulty-preview__line"
>
{{ line }}
</text>
</view>
</view>
</view>
</template>
<style scoped>
.difficulty-preview {
position: relative;
width: 100%;
}
.difficulty-preview__bg {
display: block;
width: 100%;
}
.difficulty-preview__content {
position: absolute;
top: 28rpx;
left: 30rpx;
box-sizing: border-box;
width: 486rpx;
}
.difficulty-preview__title {
display: block;
color: #ffd543;
font-size: 24rpx;
line-height: 34rpx;
font-family: "PingFang SC", sans-serif;
text-align: center;
}
.difficulty-preview__copy {
width: 80%;
margin: 0 auto;
display: block;
color: #ffffff;
font-size: 24rpx;
line-height: 34rpx;
font-family: "PingFang SC", sans-serif;
text-align: center;
}
.difficulty-preview__line {
display: block;
}
</style>
@@ -0,0 +1,81 @@
<script setup>
const props = defineProps({
text: {
type: String,
default: "开始",
},
});
const emit = defineEmits(["click"]);
const handleClick = () => {
emit("click");
};
</script>
<template>
<button
class="difficulty-start"
hover-class="difficulty-start--hover"
@click="handleClick"
>
<image
class="difficulty-start__button"
src="/static/training-difficulty-design/btn.png"
mode="widthFix"
/>
</button>
</template>
<style scoped>
.difficulty-start {
position: relative;
width: 302rpx;
height: 170rpx;
padding: 0;
border: 0;
background: transparent;
margin: 0 auto;
}
.difficulty-start::after {
border: 0;
}
.difficulty-start--hover {
transform: translateY(2rpx) scale(0.99);
}
.difficulty-start__mascot {
position: absolute;
left: 50%;
top: 0;
z-index: 1;
width: 112rpx;
transform: translateX(-50%);
}
.difficulty-start__button {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
width: 100%;
}
.difficulty-start__text {
position: absolute;
left: 0;
right: 0;
bottom: 58rpx;
z-index: 3;
color: #9f4d00;
font-size: 64rpx;
line-height: 76rpx;
text-align: center;
font-family: "AlimamaShuHeiTi-Bold", "PingFang SC", sans-serif;
font-weight: 800;
text-shadow: 0 3rpx 0 rgba(255, 245, 205, 0.78);
}
</style>
+778
View File
@@ -0,0 +1,778 @@
<script setup>
import { computed, nextTick, ref } from "vue";
import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import TargetPicker from "@/components/TargetPicker.vue";
import TrainingDifficultyBadge from "./components/TrainingDifficultyBadge.vue";
import TrainingDifficultyPreviewCard from "./components/TrainingDifficultyPreviewCard.vue";
import TrainingDifficultyStartButton from "./components/TrainingDifficultyStartButton.vue";
import { getTrainingDifficultyListAPI } from "@/apis";
// 难度页接口数据源:
// 1. 接口:GET /training/difficulty/list?type=base/endurance/precision/rhythm
// 2. 当前进度:接口 user_levels / list.completed,路由参数可覆盖选中难度
const trainingDifficultyStorageKey = "training-selection";
const trainingDifficultyRefreshEvent = "training-difficulty-refresh";
const defaultTrainingType = "precision";
const defaultUnlockedDifficultyId = "lv1";
const trainingTypeMetaMap = {
base: {
key: "base",
title: "基础训练",
},
endurance: {
key: "endurance",
title: "耐力训练",
},
precision: {
key: "precision",
title: "精准训练",
},
rhythm: {
key: "rhythm",
title: "节奏训练",
},
};
const routeModeTypeMap = {
basic: "base",
base: "base",
endurance: "endurance",
precision: "precision",
rhythm: "rhythm",
};
const resolveTrainingType = (mode) => {
const normalizedMode = String(mode || "").toLowerCase();
return routeModeTypeMap[normalizedMode] || defaultTrainingType;
};
const createDifficultyId = (level) => `lv${level}`;
const toNumber = (value, fallback = 0) => {
const numberValue = Number(value);
return Number.isFinite(numberValue) ? numberValue : fallback;
};
const clampProgress = (value) => {
return Math.min(Math.max(value, 0), 100);
};
const getDifficultyProgress = (item = {}) => {
const completedCnt = toNumber(item.completed_cnt);
const promoteCnt = toNumber(item.promote_cnt);
if (item.completed) {
return 100;
}
if (promoteCnt <= 0) {
return 0;
}
return clampProgress(Math.round((completedCnt / promoteCnt) * 100));
};
const checkDifficultyCompleted = (item = {}) => {
const completedCnt = toNumber(item.completed_cnt);
const promoteCnt = toNumber(item.promote_cnt);
return Boolean(item.completed) || (promoteCnt > 0 && completedCnt >= promoteCnt);
};
const getDifficultyModeText = (mode) => {
return Number(mode) === 1 ? "随机区域+指定环数" : "随机区域命中";
};
const createEmptyModeConfig = (type = defaultTrainingType) => {
const meta = trainingTypeMetaMap[type] || trainingTypeMetaMap[defaultTrainingType];
return {
key: meta.key,
title: meta.title,
nodes: [],
details: {},
activeDifficultyId: defaultUnlockedDifficultyId,
progressMap: {},
};
};
const createDifficultySummary = (item = {}) => {
const desc = String(item.desc || "").trim();
const type = item.type;
const arrows = toNumber(item.arrows);
const timeLimit = toNumber(item.time_limit);
const hitReq = toNumber(item.hit_req);
const totalReq = toNumber(item.total_req);
const blocks = toNumber(item.blocks);
const promoteCnt = toNumber(item.promote_cnt);
const timeText = timeLimit > 0 ? `${timeLimit}秒内完成` : "不限时完成";
const promoteText = promoteCnt > 0 ? `完成${promoteCnt}次晋级` : "";
const summaryMap = {
base: [
desc || (hitReq > 0 ? `每箭命中${hitReq}环以上` : "上靶即可"),
[`${arrows}`, promoteText].filter(Boolean).join(" · "),
],
endurance: [
desc || `${timeText}${arrows}`,
[`累计${totalReq}`, promoteText].filter(Boolean).join(" · "),
],
precision: [
desc || `命中${blocks}个指定区域`,
[
`${arrows}`,
timeText,
getDifficultyModeText(item.mode),
promoteText,
]
.filter(Boolean)
.join(" · "),
],
rhythm: [
desc || `间隔${timeLimit}秒射击`,
[
`${arrows}`,
hitReq > 0 ? `每箭${hitReq}环以上` : "上靶即可",
getDifficultyModeText(item.mode),
promoteText,
]
.filter(Boolean)
.join(" · "),
],
};
return (summaryMap[type] || [desc]).filter(Boolean);
};
const normalizeTrainingDifficultyConfig = (result, type) => {
const meta = trainingTypeMetaMap[type] || trainingTypeMetaMap[defaultTrainingType];
const list = Array.isArray(result?.list) ? result.list : [];
const rawItems = list.filter((item) => !item?.type || item.type === meta.key);
const difficultyItems = rawItems
.map((item) => {
const level = toNumber(item?.difficulty);
if (level <= 0) {
return null;
}
const id = createDifficultyId(level);
const label = `Lv${level}`;
return {
...item,
recordId: item.id,
completedCnt: toNumber(item.completed_cnt),
promoteCnt: toNumber(item.promote_cnt),
id,
level,
label,
title: `${label}难度`,
summary: createDifficultySummary(item),
startText: "开始",
targetPaperType: "20CM全环靶",
};
})
.filter(Boolean)
.sort((first, second) => first.level - second.level);
const maxLevel = difficultyItems.reduce(
(currentMax, item) => Math.max(currentMax, item.level),
0
);
const completedLevelFromList = difficultyItems.reduce((currentMax, item) => {
return checkDifficultyCompleted(item)
? Math.max(currentMax, item.level)
: currentMax;
}, 0);
const userCompletedLevel = toNumber(result?.user_levels?.[meta.key]);
const highestCompletedLevel = userCompletedLevel || completedLevelFromList;
const unlockedLevel = maxLevel
? Math.min(Math.max(highestCompletedLevel + 1, 1), maxLevel)
: 1;
return {
key: meta.key,
title: meta.title,
nodes: difficultyItems.map((item) => ({
id: item.id,
label: item.label,
})),
details: Object.fromEntries(
difficultyItems.map((item) => [item.id, item])
),
activeDifficultyId: createDifficultyId(unlockedLevel),
progressMap: Object.fromEntries(
difficultyItems.map((item) => [item.id, getDifficultyProgress(item)])
),
};
};
// 难度轴布局参数,节点按“等级越低越靠下”的方式排列。
const nodesLayout = {
viewportHeightRpx: 1020,
topPaddingRpx: 136,
bottomPaddingRpx: 144,
verticalGapRpx: 188,
anchorOffsetRpx: 796,
horizontalPatternRpx: [388, 232, 516, 258, 458, 304],
nearHorizontalDistanceRpx: 170,
extraGapScale: 0.5,
};
const emptyDifficulty = {
id: "",
label: "",
title: "",
summary: [],
startText: "开始",
targetPaperType: "",
};
// 页面基础状态
const pageConfig = ref(createEmptyModeConfig(defaultTrainingType));
const unlockedDifficultyId = ref(defaultUnlockedDifficultyId);
const selectedDifficultyId = ref(defaultUnlockedDifficultyId);
const showTargetPicker = ref(false);
const nodesScrollTop = ref(0);
const nodesScrollWithAnimation = ref(false);
const routeOptions = ref({});
const needRefreshProgress = ref(false);
const difficultyProgressMap = computed(() => {
return pageConfig.value?.progressMap || {};
});
const clamp = (value, min, max) => {
return Math.min(Math.max(value, min), max);
};
// 从 lv1 / lv20 这类 id 中提取等级数值,统一用于排序、解锁判断和进度比较。
const getDifficultyLevel = (difficultyId = "") => {
const matched = String(difficultyId).match(/\d+/);
return matched ? Number(matched[0]) : 0;
};
// 合并节点基础信息和难度详情,并统一按等级升序整理。
const createDifficultyNodes = (config) => {
const details = config?.details || {};
const rawNodes = Array.isArray(config?.nodes) ? config.nodes : [];
const nodeMap = new Map(rawNodes.map((node) => [node.id, node]));
const difficultyIds = new Set([
...rawNodes.map((node) => node.id),
...Object.keys(details),
]);
return Array.from(difficultyIds)
.map((difficultyId) => {
const level = getDifficultyLevel(difficultyId);
const node = nodeMap.get(difficultyId) || {};
const detail = details[difficultyId] || {};
const label = node.label || detail.label || `Lv${level || ""}`;
return {
...node,
...detail,
id: difficultyId,
level,
label,
title: detail.title || `${label}难度`,
summary: Array.isArray(detail.summary) ? detail.summary : [],
startText: detail.startText || "开始",
targetPaperType: detail.targetPaperType || "",
};
})
.filter((node) => node.id && node.level > 0)
.sort((first, second) => first.level - second.level);
};
const findValidDifficultyId = (difficultyId, nodes) => {
return nodes.some((node) => node.id === difficultyId) ? difficultyId : "";
};
const getNextDifficultyId = (difficultyId, nodes) => {
const currentLevel = getDifficultyLevel(difficultyId);
return (
nodes.find((node) => node.level === currentLevel + 1)?.id || difficultyId
);
};
// 统一解析当前最新已解锁难度:
// completedDifficultyId 优先级最高,可在完成当前难度后自动推进到下一关。
const resolveUnlockedDifficultyId = (options, config, nodes) => {
const completedDifficultyId = findValidDifficultyId(
options.completedDifficultyId,
nodes
);
if (completedDifficultyId) {
return getNextDifficultyId(completedDifficultyId, nodes);
}
return (
[
options.currentDifficultyId,
options.latestDifficultyId,
options.activeDifficultyId,
config.activeDifficultyId,
defaultUnlockedDifficultyId,
].find((difficultyId) => findValidDifficultyId(difficultyId, nodes)) ||
nodes[0]?.id ||
defaultUnlockedDifficultyId
);
};
// 如果传入的默认选中项尚未解锁,则自动回退到当前最新已解锁难度。
const resolveSelectedDifficultyId = (difficultyId, nodes, currentUnlockedId) => {
const safeDifficultyId = findValidDifficultyId(difficultyId, nodes);
if (!safeDifficultyId) {
return currentUnlockedId;
}
return getDifficultyLevel(safeDifficultyId) <=
getDifficultyLevel(currentUnlockedId)
? safeDifficultyId
: currentUnlockedId;
};
// 页面渲染使用的难度节点列表,包含纵向轨道坐标。
const difficultyNodes = computed(() => {
const nodes = createDifficultyNodes(pageConfig.value);
const leftPositions = nodes.map((_, index) => {
return nodesLayout.horizontalPatternRpx[
index % nodesLayout.horizontalPatternRpx.length
];
});
const offsetsFromBottom = [];
let accumulatedOffsetRpx = 0;
nodes.forEach((node, index) => {
if (index > 0) {
const previousLeftRpx = leftPositions[index - 1];
const currentLeftRpx = leftPositions[index];
const horizontalDistanceRpx = Math.abs(currentLeftRpx - previousLeftRpx);
const extraGapRpx =
Math.max(
0,
nodesLayout.nearHorizontalDistanceRpx - horizontalDistanceRpx
) * nodesLayout.extraGapScale;
accumulatedOffsetRpx +=
nodesLayout.verticalGapRpx + Math.round(extraGapRpx);
}
offsetsFromBottom.push(accumulatedOffsetRpx);
});
const contentHeightRpx = Math.max(
nodesLayout.viewportHeightRpx,
nodesLayout.topPaddingRpx +
nodesLayout.bottomPaddingRpx +
(offsetsFromBottom[offsetsFromBottom.length - 1] || 0)
);
return nodes.map((node, index) => {
const leftRpx = leftPositions[index];
const topRpx =
contentHeightRpx -
nodesLayout.bottomPaddingRpx -
offsetsFromBottom[index];
return {
...node,
leftRpx,
topRpx,
style: {
left: `${leftRpx}rpx`,
top: `${topRpx}rpx`,
},
};
});
});
const difficultyConnectors = computed(() => {
const nodes = difficultyNodes.value;
return nodes.slice(1).map((currentNode, index) => {
const previousNode = nodes[index];
const startX = Number(previousNode?.leftRpx || 0);
const startY = Number(previousNode?.topRpx || 0);
const endX = Number(currentNode?.leftRpx || 0);
const endY = Number(currentNode?.topRpx || 0);
const midX = (startX + endX) / 2;
const midY = (startY + endY) / 2;
const angle =
(Math.atan2(endY - startY, endX - startX) * 180) / Math.PI + 90;
return {
id: `${previousNode.id}-${currentNode.id}`,
left: `${midX}rpx`,
top: `${midY}rpx`,
transform: `translate(-50%, -50%) rotate(${angle}deg)`,
};
});
});
const nodesTrackHeightRpx = computed(() => {
const bottomNode = difficultyNodes.value[0];
if (!bottomNode) {
return nodesLayout.viewportHeightRpx;
}
return Math.max(
nodesLayout.viewportHeightRpx,
bottomNode.topRpx + nodesLayout.bottomPaddingRpx
);
});
const nodesTrackStyle = computed(() => {
return {
height: `${nodesTrackHeightRpx.value}rpx`,
};
});
const selectedDifficulty = computed(() => {
return (
difficultyNodes.value.find((node) => node.id === selectedDifficultyId.value) ||
difficultyNodes.value[0] ||
emptyDifficulty
);
});
// 优先显示配置中的难度进度;没有配置时,再按已解锁等级推导完成态。
const getCompletedDifficultyProgress = (node) => {
const configuredProgress = Number(difficultyProgressMap.value[node?.id]);
if (Number.isFinite(configuredProgress) && configuredProgress > 0) {
return configuredProgress;
}
return getDifficultyLevel(node?.id) < getDifficultyLevel(unlockedDifficultyId.value)
? 100
: 0;
};
const checkDifficultyLocked = (node) => {
return getDifficultyLevel(node?.id) > getDifficultyLevel(unlockedDifficultyId.value);
};
// 根据目标难度计算 scroll-view 应滚动到的位置,顶部/底部会自动吸附边界。
const scrollToDifficulty = (difficultyId, animated = false) => {
const node = difficultyNodes.value.find((item) => item.id === difficultyId);
if (!node) {
return;
}
const maxScrollRpx = Math.max(
nodesTrackHeightRpx.value - nodesLayout.viewportHeightRpx,
0
);
const targetScrollRpx = clamp(
node.topRpx - nodesLayout.anchorOffsetRpx,
0,
maxScrollRpx
);
nodesScrollWithAnimation.value = animated;
nodesScrollTop.value = uni.upx2px(targetScrollRpx);
};
// 首次进入页面需要静默定位到默认难度;
// 定位完成后再开启滚动动画,避免第一次手动切换时丢失过渡效果。
const initScrollPosition = () => {
scrollToDifficulty(selectedDifficultyId.value, false);
nextTick(() => {
nodesScrollWithAnimation.value = true;
});
};
const normalizeRouteOptions = (options = {}) => {
const difficultyLevel = toNumber(options.difficulty);
const completedDifficultyLevel = toNumber(options.completedDifficulty);
return {
...options,
difficultyId:
options.difficultyId ||
(difficultyLevel > 0 ? createDifficultyId(difficultyLevel) : ""),
completedDifficultyId:
options.completedDifficultyId ||
(completedDifficultyLevel > 0
? createDifficultyId(completedDifficultyLevel)
: ""),
};
};
const applyPageState = (options = {}, config) => {
const safeOptions = normalizeRouteOptions(options);
const nodes = createDifficultyNodes(config);
const currentUnlockedId = resolveUnlockedDifficultyId(
safeOptions,
config,
nodes
);
pageConfig.value = config;
unlockedDifficultyId.value = currentUnlockedId;
selectedDifficultyId.value = resolveSelectedDifficultyId(
safeOptions.difficultyId,
nodes,
currentUnlockedId
);
nextTick(() => {
initScrollPosition();
});
};
const initPageState = async (options = {}, refreshOptions = {}) => {
const { keepCurrent = false } = refreshOptions;
const trainingType = resolveTrainingType(options.mode);
const fallbackConfig = createEmptyModeConfig(trainingType);
if (!keepCurrent) {
pageConfig.value = fallbackConfig;
}
try {
const result = await getTrainingDifficultyListAPI(trainingType);
applyPageState(
options,
normalizeTrainingDifficultyConfig(result, trainingType)
);
} catch (error) {
console.log("training difficulty load failed", error);
if (!keepCurrent) {
applyPageState(options, fallbackConfig);
}
uni.showToast({
title: "训练难度加载失败",
icon: "none",
});
}
};
const resolveTargetPaperType = (target) => {
return Number(target) === 1 ? "20厘米全环靶" : "40厘米全环靶";
};
const saveTrainingContext = (target) => {
const difficulty = selectedDifficulty.value;
if (!difficulty.id) {
return;
}
uni.setStorageSync(trainingDifficultyStorageKey, {
trainingType: pageConfig.value.key,
trainingTitle: pageConfig.value.title,
difficultyId: difficulty.id,
difficultyLabel: difficulty.label,
targetPaperType: target
? resolveTargetPaperType(target)
: difficulty.targetPaperType,
});
};
const handleSelectDifficulty = (node) => {
if (!node?.id) {
return;
}
if (checkDifficultyLocked(node)) {
uni.showToast({
title: "难度尚未解锁",
icon: "none",
});
return;
}
if (node.id === selectedDifficultyId.value) {
return;
}
selectedDifficultyId.value = node.id;
nextTick(() => {
scrollToDifficulty(node.id, true);
});
};
const handleStart = () => {
if (!selectedDifficulty.value.id) {
return;
}
saveTrainingContext();
uni.showToast({
title: `${selectedDifficulty.value.title} 即将开始`,
icon: "none",
});
};
const openTargetPicker = () => {
if (!selectedDifficulty.value.id) {
return;
}
showTargetPicker.value = true;
};
const handleTargetConfirm = (target) => {
showTargetPicker.value = false;
saveTrainingContext(target);
// uni.showToast({
// title: `${selectedDifficulty.value.title} 即将开始`,
// icon: "none",
// });
uni.navigateTo({
url: `/pages/training/practise-one?target=${target}`,
});
};
const markProgressRefresh = () => {
needRefreshProgress.value = true;
};
onLoad((options = {}) => {
routeOptions.value = { ...options };
uni.$on(trainingDifficultyRefreshEvent, markProgressRefresh);
initPageState(options);
});
onShow(() => {
if (!needRefreshProgress.value) {
return;
}
needRefreshProgress.value = false;
initPageState(routeOptions.value, {
keepCurrent: true,
});
});
onUnload(() => {
uni.$off(trainingDifficultyRefreshEvent, markProgressRefresh);
});
</script>
<template>
<Container
:title="pageConfig.title"
:bgType="8"
bgColor="#1c1c23"
:scroll="false"
>
<view class="difficulty-page">
<view class="difficulty-page__nodes">
<scroll-view
class="difficulty-page__nodes-scroll"
scroll-y
enhanced
:scroll-top="nodesScrollTop"
:scroll-with-animation="nodesScrollWithAnimation"
:show-scrollbar="false"
>
<view class="difficulty-page__nodes-track" :style="nodesTrackStyle">
<image
v-for="connector in difficultyConnectors"
:key="connector.id"
class="difficulty-page__connector"
src="../../static/training-difficulty-design/jiantou.png"
mode="aspectFit"
:style="connector"
/>
<TrainingDifficultyBadge
v-for="node in difficultyNodes"
:key="node.id"
:node="node"
:active="node.id === selectedDifficultyId"
:locked="checkDifficultyLocked(node)"
:completedProgress="getCompletedDifficultyProgress(node)"
@click="handleSelectDifficulty"
/>
</view>
</scroll-view>
</view>
<view class="difficulty-page__preview">
<TrainingDifficultyPreviewCard
:title="selectedDifficulty.title"
:lines="selectedDifficulty.summary"
/>
</view>
<view class="difficulty-page__start">
<TrainingDifficultyStartButton
:text="selectedDifficulty.startText"
@click="openTargetPicker"
/>
</view>
</view>
<TargetPicker
:show="showTargetPicker"
:onClose="() => (showTargetPicker = false)"
:onConfirm="handleTargetConfirm"
/>
</Container>
</template>
<style scoped>
.difficulty-page {
height: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 18rpx 0 40rpx;
overflow: hidden;
}
.difficulty-page__nodes {
position: relative;
flex: 1;
min-height: 0;
z-index: 2;
margin-bottom: 8rpx;
}
.difficulty-page__nodes-scroll {
width: 100%;
height: 100%;
}
.difficulty-page__nodes-track {
position: relative;
width: 100%;
min-height: 100%;
}
.difficulty-page__connector {
position: absolute;
width: 18rpx;
height: 28rpx;
z-index: 1;
pointer-events: none;
}
.difficulty-page__preview {
position: relative;
flex: none;
z-index: 3;
width: 540rpx;
height: 172rpx;
margin: 0 auto;
}
.difficulty-page__start {
position: relative;
flex: none;
z-index: 4;
width: 302rpx;
height: 190rpx;
margin: 0 auto;
top: -16rpx;
}
</style>
+885
View File
@@ -0,0 +1,885 @@
<script setup>
import { nextTick, onMounted, ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import TargetPicker from "@/components/TargetPicker.vue";
import { getPersonalTrainingAPI } from "@/apis";
const checkedIcon = "../../static/training-home/done.png";
const missedIcon = "../../static/training-home/missed.png";
// 后端训练项目 id 与难度页 mode 参数的映射关系。
const trainingModeRouteMap = {
base: "basic",
endurance: "endurance",
precision: "precision",
rhythm: "rhythm",
strength: "power",
};
// 训练项目卡片右侧主图标。
const trainingModeIconMap = {
base_bow: "../../static/training-home/img_22.png",
bow: "../../static/training-home/img_3.png",
target: "../../static/training-home/img_4.png",
wave: "../../static/training-home/img_5.png",
muscle: "../../static/training-home/img_6.png",
};
// 训练项目卡片标题图,按接口 id 映射本地资源。
const trainingModeTitleImageMap = {
endurance: "../../static/training-home/nailixunlian.png",
precision: "../../static/training-home/jingzhunxunlian.png",
rhythm: "../../static/training-home/jiezouxunlian.png",
strength: "../../static/training-home/liliangxulian.png",
};
const defaultWeekDays = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
const defaultRadarDimensions = [
{ name: "基础", score: 0 },
{ name: "精准", score: 0 },
{ name: "力量", score: 0 },
{ name: "节奏", score: 0 },
{ name: "耐力", score: 0 },
];
// 页面始终直接消费接口字段,这里只保留一份兜底结构,避免模板访问空值。
const createDefaultTrainingData = () => ({
week_days: defaultWeekDays.map((day) => ({ day, status: "cross" })),
stats: {
total_training_days: 0,
total_arrows: 0,
hit_rate: 0,
endurance_shoot_speed: 0,
total_calories: 0,
overtake_rate: 0,
},
radar: {
dimensions: defaultRadarDimensions,
},
training_items: [],
});
const trainingData = ref(createDefaultTrainingData());
const pageMounted = ref(false);
const showRoutineTargetPicker = ref(false);
const trainingRadarCanvasId = "training-home-radar";
const radarImageWidth = 225;
const radarImageHeight = 224;
const radarFigureWidthRpx = 448;
const radarFigureHeightRpx = Math.round(
(radarFigureWidthRpx * radarImageHeight) / radarImageWidth
);
const radarCanvasWidth = Math.round(uni.upx2px(radarFigureWidthRpx));
const radarCanvasHeight = Math.round(uni.upx2px(radarFigureHeightRpx));
const radarScaleX = radarCanvasWidth / radarImageWidth;
const radarScaleY = radarCanvasHeight / radarImageHeight;
const radarScale = Math.min(radarScaleX, radarScaleY);
const radarCenterX = 112.0624 * radarScaleX;
const radarCenterY = 111.4645 * radarScaleY;
const radarStrokeWidth = Math.max(1, 2 * radarScale);
const radarPointRadius = Math.max(2.5, 3.5 * radarScale);
const radarOuterRadiusX = 110.7089 * radarScaleX;
const radarOuterRadiusY = 110.7089 * radarScaleY;
const radarMaxValue = 100;
const radarFigureStyle = {
width: `${radarFigureWidthRpx}rpx`,
height: `${radarFigureHeightRpx}rpx`,
};
const formatValue = (value, digits = 1) => {
const numberValue = Number(value);
if (!Number.isFinite(numberValue)) return "--";
return String(Number(numberValue.toFixed(digits)));
};
const getLevelText = (item) => {
if (!item) return "";
const level = Number(item.current_level) || 0;
return item.is_locked ? `Coming! LV${level}` : `当前进度 LV${level} >`;
};
// 卡路里字段按需求做 K / W 缩写展示。
const getCaloriesValue = (value) => {
const numberValue = Number(value);
if (!Number.isFinite(numberValue)) return "--";
if (numberValue >= 10000) return `${formatValue(numberValue / 10000)}W`;
if (numberValue >= 1000) return `${formatValue(numberValue / 1000)}K`;
return formatValue(numberValue, 0);
};
const getTrainingIcon = (item = {}) =>
trainingModeIconMap[item.icon] || trainingModeIconMap.bow;
const getTrainingTitleImage = (item = {}) =>
trainingModeTitleImageMap[item.id] || "";
const getTrainingMode = (item = {}) =>
trainingModeRouteMap[item.id] || item.id || "";
const getRadarPoint = (centerX, centerY, radiusX, radiusY, angle) => ({
x: centerX + radiusX * Math.cos(angle),
y: centerY + radiusY * Math.sin(angle),
});
// 雷达图直接使用接口的 5 维 score,按 0-100 等比映射到顶点位置。
const drawRadar = () => {
const dimensions = Array.isArray(trainingData.value.radar?.dimensions)
? trainingData.value.radar.dimensions.slice(0, 5)
: [];
if (dimensions.length !== 5) return;
const ctx = uni.createCanvasContext(trainingRadarCanvasId);
const angles = dimensions.map(
(_, index) => (-90 + index * 72) * (Math.PI / 180)
);
ctx.clearRect(0, 0, radarCanvasWidth, radarCanvasHeight);
const points = dimensions.map((item, index) => {
const normalized = Math.max(
0,
Math.min(Number(item.score) || 0, radarMaxValue)
);
const progress = normalized / radarMaxValue;
return getRadarPoint(
radarCenterX,
radarCenterY,
radarOuterRadiusX * progress,
radarOuterRadiusY * progress,
angles[index]
);
});
ctx.beginPath();
points.forEach((point, index) => {
if (index === 0) ctx.moveTo(point.x, point.y);
else ctx.lineTo(point.x, point.y);
});
ctx.closePath();
ctx.setFillStyle("rgba(255, 209, 154, 0.26)");
ctx.fill();
ctx.setStrokeStyle("rgba(220, 162, 92, 0.92)");
ctx.setLineWidth(radarStrokeWidth);
ctx.stroke();
points.forEach((point) => {
ctx.beginPath();
ctx.arc(point.x, point.y, radarPointRadius, 0, 2 * Math.PI);
ctx.setFillStyle("rgba(221, 162, 90, 1)");
ctx.fill();
});
ctx.beginPath();
ctx.arc(radarCenterX, radarCenterY, radarPointRadius, 0, 2 * Math.PI);
ctx.setFillStyle("rgba(125, 107, 83, 0.65)");
ctx.fill();
ctx.draw();
};
// 小程序 canvas 首次渲染时机不稳定,延后一帧再绘制更稳。
const refreshRadar = async () => {
await nextTick();
setTimeout(() => {
drawRadar();
}, 30);
};
const loadPersonalTrainingData = async () => {
try {
const result = await getPersonalTrainingAPI();
trainingData.value = {
week_days:
Array.isArray(result?.week_days) && result.week_days.length
? result.week_days
: createDefaultTrainingData().week_days,
stats: {
total_training_days: result?.stats?.total_training_days ?? 0,
total_arrows: result?.stats?.total_arrows ?? 0,
hit_rate: result?.stats?.hit_rate ?? 0,
endurance_shoot_speed: result?.stats?.endurance_shoot_speed ?? 0,
total_calories: result?.stats?.total_calories ?? 0,
overtake_rate: result?.stats?.overtake_rate ?? 0,
},
radar: {
dimensions:
Array.isArray(result?.radar?.dimensions) &&
result.radar.dimensions.length === 5
? result.radar.dimensions
: createDefaultTrainingData().radar.dimensions,
},
training_items: Array.isArray(result?.training_items)
? result.training_items
: [],
};
} catch (error) {
console.log("personal training load failed", error);
trainingData.value = createDefaultTrainingData();
} finally {
await refreshRadar();
}
};
const openTrainingRecord = () => {
uni.navigateTo({
url: "/pages/my-growth?tab=2",
});
};
const openTrainingItem = (item = {}) => {
const mode = getTrainingMode(item);
if (!mode) return;
if (item.is_locked) {
uni.showToast({
title: `${item.name || "训练"} 暂未开放`,
icon: "none",
});
return;
}
uni.navigateTo({
url: `/pages/training/difficulty?mode=${mode}`,
});
};
const openRoutineTraining = () => {
showRoutineTargetPicker.value = true;
};
const handleRoutineTargetConfirm = (target) => {
showRoutineTargetPicker.value = false;
uni.navigateTo({
url: `/pages/practise-one?target=${target}`,
});
};
// 首次进入页面时拉取数据并完成雷达图初始化。
onMounted(async () => {
await loadPersonalTrainingData();
pageMounted.value = true;
});
// 从其他页面返回时刷新训练数据,保持进度与推荐状态最新。
onShow(async () => {
if (!pageMounted.value) return;
await loadPersonalTrainingData();
});
</script>
<template>
<Container :showBackToGame="true" :bgType="7" bgColor="#050b19">
<view class="training-home">
<view class="week-grid">
<view
v-for="item in trainingData.week_days"
:key="item.day"
class="week-item"
>
<view class="week-item-bg"></view>
<image
class="week-item-icon"
:src="item.status === 'checked' ? checkedIcon : missedIcon"
mode="widthFix"
/>
<text
class="week-item-label"
:class="{ 'week-item-label-active': item.status === 'checked' }"
>
{{ item.day }}
</text>
</view>
</view>
<view class="stats-card">
<view class="stats-card-bg"></view>
<image
class="stats-quote stats-quote-left"
src="../../static/training-home/img_17.png"
mode="widthFix"
/>
<image
class="stats-quote stats-quote-right"
src="../../static/training-home/img_16.png"
mode="widthFix"
/>
<view class="stats-grid">
<view class="stats-item">
<view class="stats-value-row">
<view class="stats-value-group">
<text class="stats-value">
{{ formatValue(trainingData.stats.total_training_days, 0) }}
</text>
<text class="stats-unit"></text>
<view class="stats-value-decoration"></view>
</view>
</view>
<text class="stats-label">共训练</text>
</view>
<view class="stats-item">
<view class="stats-value-row">
<view class="stats-value-group">
<text class="stats-value">
{{ formatValue(trainingData.stats.total_arrows, 0) }}
</text>
<text class="stats-unit"></text>
<view class="stats-value-decoration"></view>
</view>
</view>
<text class="stats-label">累计射箭</text>
</view>
<view class="stats-item">
<view class="stats-value-row">
<view class="stats-value-group">
<text class="stats-value">
{{ formatValue(trainingData.stats.hit_rate) }}
</text>
<text class="stats-unit">%</text>
<view class="stats-value-decoration"></view>
</view>
</view>
<text class="stats-label">命中率</text>
</view>
<view class="stats-item">
<view class="stats-value-row">
<view class="stats-value-group">
<text class="stats-value">
{{ formatValue(trainingData.stats.endurance_shoot_speed, 0) }}
</text>
<text class="stats-unit">/分钟</text>
<view class="stats-value-decoration"></view>
</view>
</view>
<text class="stats-label">耐力射击</text>
</view>
<view class="stats-item">
<view class="stats-value-row">
<view class="stats-value-group">
<text class="stats-value">
{{ getCaloriesValue(trainingData.stats.total_calories) }}
</text>
<text class="stats-unit">卡路里</text>
<view class="stats-value-decoration"></view>
</view>
</view>
<text class="stats-label">共消耗</text>
</view>
</view>
</view>
<view class="radar-section">
<view class="record-bubble" @click="openTrainingRecord">
<image
class="record-bubble-bg"
src="../../static/training-home/img_28.png"
mode="widthFix"
/>
<view class="record-bubble-copy">
<view class="record-main">
已超越<text class="record-main-highlight">{{ formatValue(trainingData.stats.overtake_rate) }}%</text>对手
</view>
<view class="record-sub-row">
<text class="record-sub-text">我的训练记录</text>
<image
class="record-arrow"
src="../../static/training-home/img_7.png"
mode="widthFix"
/>
</view>
</view>
</view>
<view class="radar-board">
<text class="radar-label radar-label-top">
{{ trainingData.radar.dimensions[0].name }}
</text>
<text class="radar-label radar-label-right">
{{ trainingData.radar.dimensions[1].name }}
</text>
<text class="radar-label radar-label-bottom-right">
{{ trainingData.radar.dimensions[2].name }}
</text>
<text class="radar-label radar-label-bottom-left">
{{ trainingData.radar.dimensions[3].name }}
</text>
<text class="radar-label radar-label-left">
{{ trainingData.radar.dimensions[4].name }}
</text>
<view class="radar-figure" :style="radarFigureStyle">
<image
class="radar-grid-image"
:style="radarFigureStyle"
src="../../static/training-home/img_19.png"
/>
<canvas
:canvas-id="trainingRadarCanvasId"
:id="trainingRadarCanvasId"
class="radar-canvas"
:style="radarFigureStyle"
:width="radarCanvasWidth"
:height="radarCanvasHeight"
/>
<image
class="radar-mascot"
src="../../static/training-home/img_21.png"
mode="widthFix"
/>
</view>
</view>
</view>
<view class="featured-card" @click="openRoutineTraining">
<image
class="featured-card-bg"
src="../../static/training-home/img_22.png"
mode="widthFix"
/>
<view class="featured-card-mask"></view>
<view class="featured-card-copy">
<text class="featured-card-title">常规训练</text>
<text class="featured-card-subtitle">12箭练习</text>
</view>
</view>
<view class="mode-grid">
<view
v-for="item in trainingData.training_items.filter((item) => item.id !== 'strength')"
:key="item.id"
class="mode-card"
@click="openTrainingItem(item)"
>
<view v-if="item.is_recommended" class="mode-tag">推荐</view>
<view class="mode-card-copy">
<image
v-if="getTrainingTitleImage(item)"
class="mode-card-title-image"
:src="getTrainingTitleImage(item)"
mode="widthFix"
/>
<text v-else class="mode-card-title">{{ item.name }}</text>
<text class="mode-card-progress">{{ getLevelText(item) }}</text>
</view>
<image
class="mode-card-icon"
:src="getTrainingIcon(item)"
mode="aspectFit"
/>
</view>
</view>
</view>
<TargetPicker
:show="showRoutineTargetPicker"
:onClose="() => (showRoutineTargetPicker = false)"
:onConfirm="handleRoutineTargetConfirm"
/>
</Container>
</template>
<style scoped>
.training-home {
position: relative;
overflow: hidden;
padding: 18rpx 20rpx 60rpx 20rpx;
}
.week-grid {
display: flex;
justify-content: space-between;
margin-top: 18rpx;
}
.week-item {
position: relative;
width: 92rpx;
height: 96rpx;
border-radius: 16rpx;
overflow: hidden;
}
.week-item-bg {
width: 100%;
height: 100%;
background: linear-gradient(180deg, #2f2d2b 0%, #252831 100%);
opacity: 0.5;
}
.week-item-icon {
position: absolute;
left: 28rpx;
top: 14rpx;
width: 36rpx;
}
.week-item-label {
position: absolute;
left: 0;
right: 0;
bottom: 10rpx;
color: rgba(255, 255, 255, 0.6);
font-size: 20rpx;
text-align: center;
line-height: 28rpx;
}
.week-item-label-active {
color: #e7ba80;
}
.stats-card {
position: relative;
margin-top: 32rpx;
width: 100%;
height: 124rpx;
overflow: hidden;
border-radius: 24rpx;
}
.stats-card-bg {
position: absolute;
inset: 0;
background: linear-gradient(180deg, #2f2d2b 0%, #252831 100%);
opacity: 0.5;
}
.stats-quote {
position: absolute;
z-index: 1;
width: 53rpx;
height: 50rpx;
}
.stats-quote-left {
left: 4rpx;
top: 4rpx;
}
.stats-quote-right {
right: 4rpx;
bottom: 4rpx;
}
.stats-grid {
position: absolute;
z-index: 1;
left: 36rpx;
right: 36rpx;
top: 22rpx;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.stats-item {
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.stats-value-row {
display: flex;
align-items: flex-end;
justify-content: center;
width: 100%;
height: 48rpx;
line-height: 48rpx;
}
.stats-value-group {
position: relative;
display: inline-flex;
align-items: flex-end;
justify-content: center;
min-width: 72rpx;
white-space: nowrap;
}
.stats-value-decoration {
position: absolute;
left: 0;
right: 0;
bottom: 6rpx;
min-width: 72rpx;
height: 12rpx;
border-radius: 6rpx;
background: linear-gradient(133deg, #ffd19a 0%, #a17636 100%);
opacity: 0.5;
}
.stats-value {
position: relative;
z-index: 1;
color: #fff;
font-size: 34rpx;
font-family: Helvetica, Arial, sans-serif;
font-weight: 500;
line-height: 46rpx;
}
.stats-unit {
position: relative;
z-index: 1;
margin-left: 4rpx;
padding-bottom: 8rpx;
color: #fff;
font-size: 20rpx;
line-height: 28rpx;
opacity: 0.6;
}
.stats-label {
display: inline-block;
margin-top: 6rpx;
color: #fcce96;
font-size: 20rpx;
line-height: 28rpx;
opacity: 0.6;
}
.radar-section {
position: relative;
padding-top: 34rpx;
}
.record-bubble {
position: absolute;
right: 0;
top: 10rpx;
width: 202rpx;
height: 122rpx;
z-index: 3;
}
.record-bubble-bg {
width: 202rpx;
}
.record-bubble-copy {
position: absolute;
left: 0;
right: 0;
top: 24rpx;
text-align: center;
}
.record-main {
color: #fff;
font-size: 24rpx;
line-height: 30rpx;
}
.record-main-highlight {
color: #e7ba80;
}
.record-sub-row {
margin-top: 4rpx;
display: flex;
align-items: center;
justify-content: center;
}
.record-sub-text {
color: #ffd947;
font-size: 24rpx;
height: 30rpx;
line-height: 30rpx;
}
.record-arrow {
width: 24rpx;
}
.radar-board {
position: relative;
width: 100%;
height: 514rpx;
}
.radar-label {
position: absolute;
color: rgba(255, 255, 255, 0.78);
font-size: 28rpx;
line-height: 40rpx;
}
.radar-label-top {
left: 350rpx;
top: 14rpx;
transform: translateX(-50%);
opacity: 0.5;
}
.radar-label-right {
right: 77rpx;
top: 190rpx;
opacity: 0.5;
}
.radar-label-bottom-right {
right: 170rpx;
bottom: 18rpx;
opacity: 0.5;
}
.radar-label-bottom-left {
left: 170rpx;
bottom: 18rpx;
opacity: 0.5;
}
.radar-label-left {
left: 75rpx;
top: 180rpx;
opacity: 0.5;
}
.radar-figure {
position: absolute;
left: 50%;
top: 54rpx;
transform: translateX(-50%);
overflow: visible;
}
.radar-grid-image,
.radar-canvas {
position: absolute;
left: 0;
top: 0;
}
.radar-mascot {
position: absolute;
right: 38rpx;
top: 0;
width: 92rpx;
}
.featured-card {
position: relative;
width: 100%;
height: 150rpx;
margin-top: 70rpx;
border-radius: 16rpx;
overflow: hidden;
}
.featured-card-bg {
width: 100%;
}
.featured-card-mask {
position: absolute;
left: 0;
top: 0;
width: 278rpx;
height: 150rpx;
background: linear-gradient(90deg, #ffdaa0 0%, #f5c580 74%, rgba(245, 197, 128, 0) 100%);
}
.featured-card-copy {
position: absolute;
left: 30rpx;
top: 34rpx;
display: flex;
flex-direction: column;
}
.featured-card-title {
display: block;
color: #895409;
font-size: 34rpx;
font-family: "AlimamaShuHeiTi-Bold", "PingFang SC", sans-serif;
font-weight: 700;
line-height: 42rpx;
}
.featured-card-subtitle {
display: block;
margin-top: 10rpx;
color: #895409;
font-size: 22rpx;
line-height: 32rpx;
opacity: 0.72;
}
.mode-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16rpx 18rpx;
margin-top: 16rpx;
}
.mode-card {
position: relative;
height: 150rpx;
box-shadow: inset 2rpx 2rpx 6rpx 0rpx rgba(255, 255, 255, 0.27);
border-radius: 16rpx;
border: 2rpx solid rgba(235, 184, 123, 0.5);
background: rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.mode-tag {
position: absolute;
left: 0;
top: 0;
width: 72rpx;
height: 34rpx;
line-height: 34rpx;
text-align: center;
font-size: 20rpx;
color: #000;
border-bottom-right-radius: 16rpx;
background: linear-gradient(133deg, #ffd19a 0%, #a17636 100%);
}
.mode-card-copy {
position: absolute;
left: 30rpx;
top: 40rpx;
}
.mode-card-title {
display: block;
background-image: linear-gradient(
133deg,
rgba(235, 184, 123, 0.8) 0%,
rgba(181, 140, 78, 0.8) 100%
);
color: #e7ba80;
font-size: 32rpx;
font-family: "AlimamaShuHeiTi-Bold", "PingFang SC", sans-serif;
font-weight: 700;
line-height: 38rpx;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.mode-card-title-image {
display: block;
width: 128rpx;
}
.mode-card-progress {
display: block;
margin-top: 14rpx;
color: #fcce96;
font-size: 22rpx;
line-height: 32rpx;
opacity: 0.5;
}
.mode-card-icon {
position: absolute;
right: 12rpx;
top: 14rpx;
width: 124rpx;
height: 124rpx;
}
</style>
+293
View File
@@ -0,0 +1,293 @@
<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import ShootProgress from "./components/ShootProgress.vue";
import BowTarget from "./components/BowTarget.vue";
import ScorePanel2 from "./components/ScorePanel2.vue";
import ScoreResult from "./components/ScoreResult.vue";
import Avatar from "@/components/Avatar.vue";
import BowPower from "@/components/BowPower.vue";
import TestDistance from "./components/TestDistance.vue";
import BubbleTip from "./components/BubbleTip.vue";
import audioManager from "@/audioManager";
import {
createPractiseAPI,
startPractiseAPI,
endPractiseAPI,
getPractiseAPI,
} from "@/apis";
import { sharePractiseData } from "@/canvas";
import { wxShare, debounce } from "@/util";
import { MESSAGETYPESV2, roundsName } from "@/constants";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
const sound = ref(true);
const start = ref(false);
const scores = ref([]);
const total = 12;
const practiseResult = ref({});
const practiseId = ref("");
const showGuide = ref(false);
const tips = ref("");
const targetType = ref(1);
const trainingDifficultyRefreshEvent = "training-difficulty-refresh";
onLoad((options) => {
if (options.target) {
targetType.value = Number(options.target);
}
});
const onReady = async () => {
await startPractiseAPI();
scores.value = [];
start.value = true;
audioManager.play("练习开始");
};
const onOver = async () => {
practiseResult.value = await getPractiseAPI(practiseId.value);
start.value = false;
};
async function onReceiveMessage(msg) {
if (msg.type === MESSAGETYPESV2.ShootResult) {
scores.value = msg.details;
} else if (msg.type === MESSAGETYPESV2.BattleEnd) {
// setTimeout(onOver, 1500);
}
}
function onComplete() {
uni.$emit(trainingDifficultyRefreshEvent);
uni.navigateBack();
}
async function onRetry() {
practiseId.value = "";
practiseResult.value = {};
start.value = false;
scores.value = [];
const result = await createPractiseAPI(total, 120, targetType.value);
if (result) practiseId.value = result.id;
}
const onClickShare = debounce(async () => {
await sharePractiseData("shareCanvas", 2, user.value, practiseResult.value);
await wxShare("shareCanvas");
});
function onAudioEnded(s) {
if (s.indexOf("比赛结束") >= 0) {
onOver()
}
}
const updateSound = () => {
sound.value = !sound.value;
audioManager.setMuted(!sound.value);
};
onMounted(async () => {
// audioManager.play("第一轮");
uni.setKeepScreenOn({
keepScreenOn: true,
});
uni.$on("socket-inbox", onReceiveMessage);
uni.$on("share-image", onClickShare);
uni.$on("audioEnded", onAudioEnded);
const result = await createPractiseAPI(total, 120, targetType.value);
if (result) practiseId.value = result.id;
});
onBeforeUnmount(() => {
uni.setKeepScreenOn({
keepScreenOn: false,
});
uni.$off("socket-inbox", onReceiveMessage);
uni.$off("share-image", onClickShare);
uni.$off("audioEnded", onAudioEnded);
audioManager.stopAll();
endPractiseAPI();
});
</script>
<template>
<Container
:bgType="!start && !practiseResult.id?9:10"
:showBottom="!start && !scores.length"
>
<view>
<TestDistance v-if="!start && !practiseResult.id" />
<block v-else>
<ShootProgress
:start="start"
:onStop="onOver"
/>
<view class="user-row">
<!-- <Avatar :src="user.avatar" :size="35" /> -->
<BubbleTip v-if="showGuide" type="normal2">
<text>还有两场坚持</text>
<text>就是胜利💪</text>
</BubbleTip>
<!-- <BowPower /> -->
</view>
<BowTarget
:totalRound="start ? total / 4 : 0"
:currentRound="scores.length % 3"
:scores="scores"
/>
<view class="sound-text-box">
<button class="sound-btn" hover-class="none" @click="updateSound">
<image
class="sound-icon"
:src="`/static/sound${sound ? '' : '-off'}-yellow.png`"
mode="aspectFit"
/>
</button>
<view class="bat-text-big-box">
<image
class="dao-icon"
src="../../static/training-difficulty-design/dao-icon.png"
mode="widthFix"
/>
<view class="bat-text-box">
<view class="bat-text-small-box">
<view class="text-round-box">
<view class="text1">每箭命中9环之上</view>
<view class="text2">剩余<text class="text2-yellow">3</text></view>
</view>
</view>
</view>
</view>
</view>
<ScorePanel2 :arrows="scores" :total="total" />
<ScoreResult
v-if="practiseResult.details"
:rowCount="6"
:total="total"
:onClose="onComplete"
:onRetry="onRetry"
:result="practiseResult"
/>
<canvas class="share-canvas" id="shareCanvas" type="2d"></canvas>
</block>
</view>
<template #bottom>
<view class="btn-box">
<image
class="btn-box-bg"
src="../../static/training-difficulty-design/par-star.png"
mode="widthFix"
/>
<button class="btn" @click="onReady">准备好了开始练习</button>
</view>
</template>
</Container>
</template>
<style scoped>
.btn-box{
width: 488rpx;
height: 234rpx;
position: fixed;
bottom: 130rpx;
left: 50%;
transform: translateX(-50%);
}
.btn-box-bg{
width: 100%;
}
.btn{
width: 330rpx;
height: 70rpx;
line-height: 70rpx;
background: #FED847;
border-radius: 44rpx;
text-align: center;
color: #000000;
font-size: 28rpx;
font-weight: 500;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -36rpx;
}
.sound-text-box{
height: 125rpx;
padding: 0 56rpx;
display: flex;
align-items: flex-end;
}
.sound-btn {
width: 76rpx;
height: 70rpx;
border: none;
}
.sound-btn::after {
border: none;
}
.sound-icon {
width: 76rpx;
height: 70rpx;
}
.bat-text-big-box{
flex: 1;
position: relative;
}
.dao-icon{
width: 160rpx;
height: 125rpx;
position: absolute;
left: 0;
bottom: 0;
}
.text-round-box{
width: 100%;
}
.bat-text-box{
display: flex;
}
.bat-text-small-box{
background: rgba(0, 0, 0, 0.5);
width: auto;
min-width: 100rpx;
border-radius: 16rpx 60rpx 60rpx 16rpx;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 176rpx;
height: 112rpx;
padding-right: 30rpx;
font-size: 30rpx;
color: #E7BA80;
}
.text1{
font-size: 30rpx;
font-weight: 400;
color: #E7BA80;
line-height: 42rpx;
}
.text2{
color: #FFFFFF;
font-size: 26rpx;
font-weight: 400;
line-height: 36rpx;
}
.text2-yellow{
font-size: 30rpx;
color: #FFD947;
font-weight: 500;
margin: 0 4rpx;
}
</style>
+2 -2
View File
@@ -13,7 +13,7 @@ const { updateUser } = store;
const toOrderPage = () => { const toOrderPage = () => {
uni.navigateTo({ uni.navigateTo({
url: "/pages/member/orders", url: "/pages/orders",
}); });
}; };
@@ -27,7 +27,7 @@ const toFristTryPage = async () => {
}; };
const toBeVipPage = () => { const toBeVipPage = () => {
uni.navigateTo({ uni.navigateTo({
url: "/pages/member/be-vip", url: "/pages/be-vip",
}); });
}; };
const toMyGrowthPage = () => { const toMyGrowthPage = () => {
Binary file not shown.

After

Width:  |  Height:  |  Size: 321 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 252 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 376 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 189 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 277 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 390 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 603 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 395 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 457 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 407 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 494 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 548 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

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