laoma/shoot-miniprograms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: laoma:feat-vip
Branches Tags
laoma:main laoma:test laoma:feat-vip laoma:feat-prac laoma:ota-mode laoma:new-race-mode laoma:prod laoma:select-target laoma:development laoma:new-home laoma:ios-ui laoma:feature-points-book laoma:feature-xvx
..
compare: laoma:main
Branches Tags
laoma:test laoma:feat-vip laoma:feat-prac laoma:main laoma:ota-mode laoma:new-race-mode laoma:prod laoma:select-target laoma:development laoma:new-home laoma:ios-ui laoma:feature-points-book laoma:feature-xvx

6 Commits
feat-vip ... main

Author SHA1 Message Date
zhangyi
4ce2e6a7c4 Merge branch 'fix-bug' 2026-06-15 09:31:27 +08:00
zhangyi
5bab30d2e4 update:修复大乱斗显示问题，修复连续3次10环播报 2026-06-15 09:30:02 +08:00
zhangyi
8b2ea24f38 update：大乱斗优化 2026-06-12 16:44:17 +08:00
zhangyi
52c5b9504a update:更新靶纸 2026-06-11 18:13:46 +08:00
zhangyi
5cf243d187 update:优化设备缓存逻辑 2026-06-11 18:10:59 +08:00
zhangyi
bfdd40ec93 update:修复对战后退异常问题，修复对战中设备离线弹窗点击问题 2026-06-10 17:36:37 +08:00
73 changed files with 601 additions and 3322 deletions
Expand all files Collapse all files

73
src/App.vue
View File

@@ -22,7 +22,8 @@
const {
updateUser,
updateOnline,
clearSessionState
clearSessionState,
clearDevice
} = store;
watch(
@@ -63,6 +64,11 @@
updateOnline(data.online);
}
function onDeviceBindInvalid() {
clearDevice();
uni.setStorageSync("calibration", false);
}
function onDeviceShoot() {
// audioManager.play("射箭声音")
}
@@ -78,6 +84,7 @@
uni.$on("update-user", emitUpdateUser);
uni.$on("update-online", emitUpdateOnline);
uni.$on("session-kicked-out", onSessionKickedOut);
uni.$on("device-bind-invalid", onDeviceBindInvalid);
const token = uni.getStorageSync(
`${uni.getAccountInfoSync().miniProgram.envVersion}_token`
);
@@ -91,6 +98,7 @@
uni.$off("update-user", emitUpdateUser);
uni.$off("update-online", emitUpdateOnline);
uni.$off("session-kicked-out", onSessionKickedOut);
uni.$off("device-bind-invalid", onDeviceBindInvalid);
websocket.closeWebSocket();
});
</script>
@@ -250,69 +258,6 @@
text-overflow: ellipsis;
}
.member-nickname {
position: relative;
display: inline-flex;
max-width: 100%;
overflow: hidden;
}
.member-nickname__text,
.member-nickname__shine {
display: block;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.member-nickname--vip .member-nickname__text {
color: #E7BA80;
}
.member-nickname--svip .member-nickname__text {
background: linear-gradient(90deg, #ffb86c, #ff4fd8, #7c5cff, #35d6ff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.member-nickname__shine {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(
110deg,
transparent 0%,
transparent 38%,
rgba(255, 255, 255, 0.15) 45%,
rgba(255, 255, 255, 1) 50%,
rgba(255, 255, 255, 0.15) 55%,
transparent 62%,
transparent 100%
);
background-size: 220% 100%;
background-position: 120% 0;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
pointer-events: none;
animation: memberNicknameShine 3.5s infinite ease-in-out;
}
@keyframes memberNicknameShine {
0%,
50% {
background-position: 120% 0;
}
100% {
background-position: -200% 0;
}
}
.modal {
height: 100%;
display: flex;

12
src/apis.js
View File

@@ -70,6 +70,15 @@ function request(method, url, data = {}) {
resolve({binded: true});
return;
}
if (message === "BIND_FAILD") {
uni.$emit("device-bind-invalid");
uni.showToast({
title: "设备绑定状态已失效，请重新绑定",
icon: "none",
});
reject({type: "DEVICE_BIND_INVALID", message});
return;
}
if (message === "ERROR_ORDER_UNPAY") {
uni.showToast({
title: "当前有未支付订单",
@@ -333,9 +342,6 @@ export const createOrderAPI = (vipId) => {
quanity: 1,
tradeType: "mini",
payType: "wxpay",
returnUrl: "",
remark: "",
mockTest: false,
});
};

6
src/components/AppBackground.vue
View File

@@ -57,12 +57,6 @@ const props = defineProps({
src="https://static.shelingxingqiu.com/shootmini/static/rank/rank-bg.png"
mode="widthFix"
/>
<image
class="bg-image"
v-if="type === 10"
src="https://static.shelingxingqiu.com/shootmini/static/vip/vip-bg.png"
mode="widthFix"
/>
<view class="bg-overlay" v-if="type === 0"></view>
</view>
</template>

2
src/components/AppFooter.vue
View File

@@ -8,7 +8,7 @@ const tabs = [
function handleTabClick(index) {
if (index === 0) {
uni.navigateTo({
url: "/pages/member/be-vip",
url: "/pages/be-vip",
});
}
if (index === 1) {

29
src/components/BackToGame.vue
View File

@@ -18,14 +18,12 @@ const props = defineProps({
},
});
const loading = ref(false);
const navigating = ref(false);
/** 统一获取当前环境 token，用于守卫：无有效 token 时不发起接口请求 */
const getToken = () =>
uni.getStorageSync(`${uni.getAccountInfoSync().miniProgram.envVersion}_token`);
onShow(async () => {
navigating.value = false;
if (user.value.id && getToken()) {
setTimeout(async () => {
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 () => {
if (loading.value || navigating.value) return;
if (loading.value) return;
try {
loading.value = true;
const result = await getBattleAPI();
if (result && result.matchId) {
await uni.$checkAudio();
if (result.mode <= 3) {
await navigateOnce(`/pages/team-battle/index?battleId=${result.matchId}`);
uni.navigateTo({
url: `/pages/team-battle/index?battleId=${result.matchId}`,
});
} else {
await navigateOnce(`/pages/melee-battle?battleId=${result.matchId}`);
uni.navigateTo({
url: `/pages/melee-battle?battleId=${result.matchId}`,
});
}
return;
}
if (game.value.roomID) {
await navigateOnce("/pages/battle-room?roomNumber=" + game.value.roomID);
uni.navigateTo({
url: "/pages/battle-room?roomNumber=" + game.value.roomID,
});
} else {
updateGame(false, "");
}

48
src/components/BattleHeader.vue
View File

@@ -27,14 +27,6 @@ defineProps({
default: true,
},
});
const getMemberNicknameClass = (player = {}) => [
"member-nickname",
player.vip === true && player.sVip !== true ? "member-nickname--vip" : "",
player.sVip === true ? "member-nickname--svip" : "",
];
const isMember = (player = {}) => player.vip === true || player.sVip === true;
</script>
<template>
@@ -59,16 +51,7 @@ const isMember = (player = {}) => player.vip === true || player.sVip === true;
}"
>
<Avatar :src="player.avatar" :rankLvl="player.rankLvl" :size="40" />
<view
v-if="isMember(player)"
:class="['player-name', ...getMemberNicknameClass(player)]"
>
<text class="member-nickname__text">{{ player.name }}</text>
<text v-if="player.sVip === true" class="member-nickname__shine">
{{ player.name }}
</text>
</view>
<text v-else class="player-name">{{ player.name }}</text>
<text class="player-name">{{ player.name }}</text>
</view>
<image
v-if="winner === 1"
@@ -87,16 +70,7 @@ const isMember = (player = {}) => player.vip === true || player.sVip === true;
}"
>
<Avatar :src="player.avatar" :rankLvl="player.rankLvl" :size="40" />
<view
v-if="isMember(player)"
:class="['player-name', ...getMemberNicknameClass(player)]"
>
<text class="member-nickname__text">{{ player.name }}</text>
<text v-if="player.sVip === true" class="member-nickname__shine">
{{ player.name }}
</text>
</view>
<text v-else class="player-name">{{ player.name }}</text>
<text class="player-name">{{ player.name }}</text>
</view>
<image
v-if="winner === 2"
@@ -131,16 +105,7 @@ const isMember = (player = {}) => player.vip === true || player.sVip === true;
:size="40"
:rank="showRank ? index + 1 : 0"
/>
<view
v-if="isMember(player)"
:class="['player-name', ...getMemberNicknameClass(player)]"
>
<text class="member-nickname__text">{{ player.name }}</text>
<text v-if="player.sVip === true" class="member-nickname__shine">
{{ player.name }}
</text>
</view>
<text v-else class="player-name">{{ player.name }}</text>
<text class="player-name">{{ player.name }}</text>
</view>
</view>
</scroll-view>
@@ -218,13 +183,6 @@ const isMember = (player = {}) => player.vip === true || player.sVip === true;
text-overflow: ellipsis;
text-align: center;
}
view.player-name {
justify-content: center;
}
.player-name .member-nickname__text,
.player-name .member-nickname__shine {
font-size: 12px;
}
.left-winner-badge {
position: absolute;
width: 50px;

29
src/components/BowData.vue
View File

@@ -1,5 +1,4 @@
<script setup>
import { computed } from "vue";
import AppBackground from "@/components/AppBackground.vue";
import Avatar from "@/components/Avatar.vue";
import BowTarget from "@/components/BowTarget.vue";
@@ -9,9 +8,6 @@ import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
const isSVip = computed(() => user.value.sVip === true);
const isVip = computed(() => user.value.vip === true && user.value.sVip !== true);
const props = defineProps({
show: {
type: Boolean,
@@ -39,21 +35,7 @@ const props = defineProps({
<view>
<Avatar :src="user.avatar" :rankLvl="user.rankLvl" :size="45" />
<view>
<view
v-if="isVip || isSVip"
:class="[
'bow-data-user-name',
'member-nickname',
isVip ? 'member-nickname--vip' : '',
isSVip ? 'member-nickname--svip' : '',
]"
>
<text class="member-nickname__text">{{ user.nickName }}</text>
<text v-if="isSVip" class="member-nickname__shine">
{{ user.nickName }}
</text>
</view>
<text v-else>{{ user.nickName }}</text>
<text>{{ user.nickName }}</text>
<text>{{ user.lvlName }}</text>
</view>
</view>
@@ -62,7 +44,7 @@ const props = defineProps({
</view>
</view>
<view :style="{ width: '100%', marginBottom: '20px' }">
<BowTarget :scores="arrows" :isSvip="isSVip" />
<BowTarget :scores="arrows" />
</view>
<view class="desc">
<text>{{ arrows.length }}</text>
@@ -113,13 +95,6 @@ const props = defineProps({
margin-left: 10px;
color: #fff;
}
.bow-data-user-name {
max-width: 300rpx;
}
.bow-data-user-name .member-nickname__text,
.bow-data-user-name .member-nickname__shine {
max-width: 300rpx;
}
.header > view:first-child > view:last-child > text:last-child {
font-size: 10px;
background-color: #5f51ff;

387
src/components/BowShotEffect.vue
View File

@@ -1,387 +0,0 @@
<script setup>
import { computed, onBeforeUnmount, ref, watch } from "vue";
const props = defineProps({
shot: {
type: Object,
default: null,
},
playKey: {
type: [String, Number],
default: "",
},
targetRadius: {
type: Number,
default: 20,
},
targetWidth: {
type: Number,
default: 0,
},
targetHeight: {
type: Number,
default: 0,
},
hitOffsetPx: {
type: Number,
default: 0,
},
});
const emit = defineEmits(["complete", "impact"]);
const phase = ref("idle");
const activePlayKey = ref("");
const animationKey = ref("");
const impactEmitted = ref(false);
let timers = [];
const isActive = computed(() => phase.value !== "idle");
const ARROW_IMPACT_MS = 340;
const COMPLETE_FALLBACK_MS = 980;
const safeTargetRadius = computed(() => {
const radius = Number(props.targetRadius);
return Number.isFinite(radius) && radius > 0 ? radius : 20;
});
const safeTargetSize = computed(() => {
const width = Number(props.targetWidth);
const height = Number(props.targetHeight);
return {
width: Number.isFinite(width) && width > 0 ? width : 0,
height: Number.isFinite(height) && height > 0 ? height : 0,
};
});
const shotPoint = computed(() => {
const x = Number(props.shot?.x);
const y = Number(props.shot?.y);
return {
x: Number.isFinite(x) ? x : 0,
y: Number.isFinite(y) ? y : 0,
};
});
const pointDirection = computed(() => {
const point = shotPoint.value;
const distance = Math.sqrt(point.x * point.x + point.y * point.y);
if (distance === 0) return null;
return {
x: point.x / distance,
y: point.y / distance,
};
});
const hitOffset = computed(() => {
const offset = Number(props.hitOffsetPx);
const safeOffset = Number.isFinite(offset) && offset > 0 ? offset : 0;
const direction = pointDirection.value;
return {
x: direction ? direction.x * safeOffset : 0,
y: direction ? -direction.y * safeOffset : 0,
};
});
const hitPercent = computed(() => {
const point = shotPoint.value;
const radius = safeTargetRadius.value;
const diameter = radius * 2;
return {
left: ((point.x + radius) / diameter) * 100,
top: ((radius - point.y) / diameter) * 100,
};
});
const arrowAngle = computed(() => {
const size = safeTargetSize.value;
if (!size.width || !size.height) {
const dx = hitPercent.value.left - 50;
const dy = 114 - hitPercent.value.top;
const fallbackAngle = Math.atan2(dx, dy || 1) * (180 / Math.PI);
return Math.max(-18, Math.min(18, fallbackAngle));
}
const startX = size.width * 0.5;
const startY = size.height * 1.14;
const endX = size.width * (hitPercent.value.left / 100) + hitOffset.value.x;
const endY = size.height * (hitPercent.value.top / 100) + hitOffset.value.y;
const dx = endX - startX;
const dy = startY - endY;
const angle = Math.atan2(dx, dy || 1) * (180 / Math.PI);
return Math.max(-18, Math.min(18, angle));
});
function formatPxOffset(value) {
if (!value) return "";
const operator = value > 0 ? "+" : "-";
return ` ${operator} ${Math.abs(value)}px`;
}
function formatTargetPosition(percent, offset) {
const pxOffset = formatPxOffset(offset);
return pxOffset ? `calc(${percent}%${pxOffset})` : `${percent}%`;
}
const crackStyle = computed(() => ({
left: formatTargetPosition(hitPercent.value.left, hitOffset.value.x),
top: formatTargetPosition(hitPercent.value.top, hitOffset.value.y),
}));
function getTargetTranslate(percent) {
const absPercent = Math.abs(percent);
const operator = percent >= 0 ? "-" : "+";
return `calc(${percent}vw ${operator} ${absPercent * 0.5}px)`;
}
const arrowMoveStyle = computed(() => {
const size = safeTargetSize.value;
let x = getTargetTranslate(hitPercent.value.left - 50);
let y = getTargetTranslate(hitPercent.value.top - 114);
if (size.width && size.height) {
const startX = size.width * 0.5;
const startY = size.height * 1.14;
const endX = size.width * (hitPercent.value.left / 100) + hitOffset.value.x;
const endY = size.height * (hitPercent.value.top / 100) + hitOffset.value.y;
x = `${endX - startX}px`;
y = `${endY - startY}px`;
}
return {
"--shot-tx": x,
"--shot-ty": y,
"--shot-angle": `${arrowAngle.value}deg`,
};
});
function clearTimers() {
timers.forEach((timer) => clearTimeout(timer));
timers = [];
}
function queueTimer(callback, delay) {
const timer = setTimeout(callback, delay);
timers.push(timer);
}
function emitImpactOnce(playKey) {
if (phase.value === "idle" || activePlayKey.value !== playKey || impactEmitted.value) return;
impactEmitted.value = true;
emit("impact");
}
function finish(playKey) {
if (phase.value === "idle" || activePlayKey.value !== playKey) return;
clearTimers();
phase.value = "idle";
activePlayKey.value = "";
emit("complete", playKey);
}
function play() {
if (!props.playKey || !props.shot || !props.shot.ring) return;
clearTimers();
activePlayKey.value = props.playKey;
animationKey.value = `${props.playKey}`;
impactEmitted.value = false;
phase.value = "playing";
queueTimer(() => {
emitImpactOnce(activePlayKey.value);
}, ARROW_IMPACT_MS);
queueTimer(() => {
finish(activePlayKey.value);
}, COMPLETE_FALLBACK_MS);
}
function handleArrowAnimationEnd() {
emitImpactOnce(activePlayKey.value);
}
function handleCrackAnimationEnd() {
finish(activePlayKey.value);
}
watch(
() => props.playKey,
() => {
play();
},
{ immediate: true }
);
onBeforeUnmount(() => {
clearTimers();
});
</script>
<template>
<view
v-show="isActive"
:class="['shot-effect', `shot-effect--${phase}`]"
:style="arrowMoveStyle"
>
<view
:key="`arrow-${animationKey}`"
class="shot-arrow-track"
@animationend="handleArrowAnimationEnd"
>
<image
class="shot-arrow"
src="../static/vip/svip-jian.png"
mode="heightFix"
/>
</view>
<view
:key="`flash-${animationKey}`"
class="shot-flash"
:style="crackStyle"
></view>
<view
:key="`crack-anchor-${animationKey}`"
class="shot-crack-anchor"
:style="crackStyle"
>
<image
:key="`crack-${animationKey}`"
class="shot-crack"
src="../static/vip/svip-lie.png"
mode="aspectFit"
@animationend="handleCrackAnimationEnd"
/>
</view>
</view>
</template>
<style scoped lang="scss">
.shot-effect {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
pointer-events: none;
overflow: visible;
transform: translateZ(0);
}
.shot-arrow-track {
position: absolute;
left: 50%;
top: 114%;
width: 0;
height: 0;
opacity: 0;
transform: translate3d(0, 0, 0);
animation: none;
backface-visibility: hidden;
will-change: transform, opacity;
}
.shot-arrow {
position: absolute;
width: 248rpx;
height: 1186rpx;
left: 0;
top: 0;
opacity: 1;
transform-origin: 44.35% 3.04%;
transform: translate(-44.35%, -3.04%) rotate(var(--shot-angle));
backface-visibility: hidden;
will-change: transform;
}
.shot-effect--playing .shot-arrow-track {
animation: shot-arrow-fly 0.38s cubic-bezier(0.68, 0, 0.9, 0.62) forwards;
}
.shot-flash,
.shot-crack-anchor {
position: absolute;
transform: translate(-50%, -50%);
backface-visibility: hidden;
will-change: transform, opacity;
}
.shot-flash {
width: 86rpx;
height: 86rpx;
border-radius: 50%;
border: 3rpx solid rgba(255, 236, 166, 0.9);
opacity: 0;
animation: none;
}
.shot-crack-anchor {
width: 750rpx;
height: 750rpx;
}
.shot-crack {
width: 100%;
height: 100%;
opacity: 0;
transform-origin: center center;
animation: none;
will-change: transform, opacity;
}
.shot-effect--playing .shot-flash {
animation: shot-flash 0.42s ease-out 0.32s forwards;
}
.shot-effect--playing .shot-crack {
animation: shot-crack-hit 0.52s ease-out 0.34s forwards;
}
@keyframes shot-arrow-fly {
0% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
86% {
opacity: 1;
transform: translate3d(var(--shot-tx), var(--shot-ty), 0);
}
100% {
opacity: 0;
transform: translate3d(var(--shot-tx), var(--shot-ty), 0);
}
}
@keyframes shot-flash {
0% {
opacity: 0.95;
transform: translate(-50%, -50%) scale(0.2);
}
100% {
opacity: 0;
transform: translate(-50%, -50%) scale(1.9);
}
}
@keyframes shot-crack-hit {
0% {
opacity: 0;
transform: scale(0.55);
}
28% {
opacity: 1;
transform: scale(1.08);
}
56% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.18);
}
}
</style>

235
src/components/BowTarget.vue
View File

@@ -1,7 +1,6 @@
<script setup>
import { ref, watch, onMounted, onBeforeUnmount, computed, nextTick } from "vue";
import { ref, watch, onMounted, onBeforeUnmount, computed } from "vue";
import PointSwitcher from "@/components/PointSwitcher.vue";
import BowShotEffect from "@/components/BowShotEffect.vue";
import { MESSAGETYPES, MESSAGETYPESV2 } from "@/constants";
import { simulShootAPI } from "@/apis";
@@ -27,10 +26,6 @@ const props = defineProps({
type: Array,
default: () => [],
},
isSvip: {
type: Boolean,
default: false,
},
mode: {
type: String,
default: "solo", // solo 单排，team 双排
@@ -62,120 +57,18 @@ const timer = ref(null);
const dirTimer = ref(null);
const angle = ref(null);
const circleColor = ref("");
const shotEffect = ref(null);
const hiddenRedLatestKey = ref("");
const hiddenBlueLatestKey = ref("");
const targetShaking = ref(false);
const shakeTimer = ref(null);
const ROUND_TIP_OFFSET_Y = -32;
const EXPERIENCE_TIP_OFFSET_Y = -68;
function buildShotEffectKey(team, shot, index) {
return [
team,
index,
shot?.playerId ?? "",
shot?.x ?? "",
shot?.y ?? "",
shot?.ring ?? "",
shot?.ringX ? 1 : 0,
].join("-");
}
function shouldPlayShotEffect(shot) {
return props.isSvip && !!shot && Number(shot.ring) > 0;
}
function clearTipTimer() {
if (timer.value) {
clearTimeout(timer.value);
timer.value = null;
}
}
function showShotTip(team, shot) {
clearTipTimer();
if (team === "red") {
latestOne.value = shot;
timer.value = setTimeout(() => {
latestOne.value = null;
timer.value = null;
}, 1000);
return;
}
bluelatestOne.value = shot;
timer.value = setTimeout(() => {
bluelatestOne.value = null;
timer.value = null;
}, 1000);
}
function triggerShotEffect(team, shot, index) {
const key = buildShotEffectKey(team, shot, index);
if (shotEffect.value?.team === "red") hiddenRedLatestKey.value = "";
if (shotEffect.value?.team === "blue") hiddenBlueLatestKey.value = "";
if (team === "red") {
latestOne.value = null;
hiddenRedLatestKey.value = key;
} else {
bluelatestOne.value = null;
hiddenBlueLatestKey.value = key;
}
shotEffect.value = { key, team, shot };
}
function completeShotEffect(key) {
if (!shotEffect.value || shotEffect.value.key !== key) return;
const { team, shot } = shotEffect.value;
if (team === "red") hiddenRedLatestKey.value = "";
if (team === "blue") hiddenBlueLatestKey.value = "";
shotEffect.value = null;
showShotTip(team, shot);
}
function shakeTarget() {
targetShaking.value = false;
if (shakeTimer.value) {
clearTimeout(shakeTimer.value);
shakeTimer.value = null;
}
nextTick(() => {
targetShaking.value = true;
shakeTimer.value = setTimeout(() => {
targetShaking.value = false;
shakeTimer.value = null;
}, 260);
});
}
function shouldHideRedHit(index) {
return !!hiddenRedLatestKey.value && index === props.scores.length - 1;
}
function shouldHideBlueHit(index) {
return !!hiddenBlueLatestKey.value && index === props.blueScores.length - 1;
}
watch(
() => props.scores,
(newVal) => {
if (newVal.length - prevScores.value.length === 1) {
const latestShot = newVal[newVal.length - 1];
if (shouldPlayShotEffect(latestShot)) {
triggerShotEffect("red", latestShot, newVal.length - 1);
} else {
showShotTip("red", latestShot);
}
} else if (newVal.length <= prevScores.value.length) {
latestOne.value = newVal[newVal.length - 1];
if (timer.value) clearTimeout(timer.value);
timer.value = setTimeout(() => {
latestOne.value = null;
hiddenRedLatestKey.value = "";
if (shotEffect.value?.team === "red") shotEffect.value = null;
}, 1000);
}
prevScores.value = [...newVal];
},
@@ -188,16 +81,11 @@ watch(
() => props.blueScores,
(newVal) => {
if (newVal.length - prevBlueScores.value.length === 1) {
const latestShot = newVal[newVal.length - 1];
if (shouldPlayShotEffect(latestShot)) {
triggerShotEffect("blue", latestShot, newVal.length - 1);
} else {
showShotTip("blue", latestShot);
}
} else if (newVal.length <= prevBlueScores.value.length) {
bluelatestOne.value = newVal[newVal.length - 1];
if (timer.value) clearTimeout(timer.value);
timer.value = setTimeout(() => {
bluelatestOne.value = null;
hiddenBlueLatestKey.value = "";
if (shotEffect.value?.team === "blue") shotEffect.value = null;
}, 1000);
}
prevBlueScores.value = [...newVal];
},
@@ -276,15 +164,6 @@ function getHitStyle(shot) {
};
}
function getSvipHitBgStyle(shot) {
const radius = currentHitRadiusPx.value;
const point = getShotPoint(shot);
return {
...getTargetPositionStyle(point, radius),
};
}
function getRoundTipStyle(shot) {
const point = getShotPoint(shot, true);
return getTargetPositionStyle(
@@ -360,16 +239,12 @@ onBeforeUnmount(() => {
clearTimeout(dirTimer.value);
dirTimer.value = null;
}
if (shakeTimer.value) {
clearTimeout(shakeTimer.value);
shakeTimer.value = null;
}
uni.$off("socket-inbox", onReceiveMessage);
});
</script>
<template>
<view :class="['container', { 'container--effecting': shotEffect }]">
<view class="container">
<view class="header" v-if="totalRound > 0">
<text v-if="totalRound > 0" class="round-count">{{
(currentRound > totalRound ? totalRound : currentRound) +
@@ -377,7 +252,7 @@ onBeforeUnmount(() => {
totalRound
}}</text>
</view>
<view :class="['target', { 'target--shake': targetShaking }]">
<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" />
@@ -417,15 +292,8 @@ onBeforeUnmount(() => {
}}<text v-if="bluelatestOne.ring">环</text></view
>
<block v-for="(bow, index) in scores" :key="index">
<image
v-if="pMode && isSvip && bow.ring > 0 && !shouldHideRedHit(index)"
class="svip-hit-bg"
src="../static/vip/svip-xuan.png"
:style="getSvipHitBgStyle(bow)"
mode="aspectFit"
/>
<view
v-if="bow.ring > 0 && !shouldHideRedHit(index)"
v-if="bow.ring > 0"
:class="`hit ${pMode ? 'b' : 's'}-point ${
index === scores.length - 1 && latestOne ? 'pump-in' : ''
}`"
@@ -437,15 +305,8 @@ onBeforeUnmount(() => {
>
</block>
<block v-for="(bow, index) in blueScores" :key="index">
<image
v-if="pMode && isSvip && bow.ring > 0 && !shouldHideBlueHit(index)"
class="svip-hit-bg"
src="../static/vip/svip-xuan.png"
:style="getSvipHitBgStyle(bow)"
mode="aspectFit"
/>
<view
v-if="bow.ring > 0 && !shouldHideBlueHit(index)"
v-if="bow.ring > 0"
:class="`hit ${pMode ? 'b' : 's'}-point ${
index === blueScores.length - 1 && bluelatestOne ? 'pump-in' : ''
}`"
@@ -457,13 +318,6 @@ onBeforeUnmount(() => {
<text v-if="pMode">{{ index + 1 }}</text>
</view>
</block>
<BowShotEffect
:shot="shotEffect && shotEffect.shot"
:playKey="shotEffect ? shotEffect.key : ''"
:targetRadius="safeTargetRadius"
@impact="shakeTarget"
@complete="completeShotEffect"
/>
<image src="../static/bow-target.png" mode="widthFix" />
</view>
<view class="footer">
@@ -485,22 +339,13 @@ onBeforeUnmount(() => {
height: calc(100vw - 30px);
padding: 0px 15px;
position: relative;
z-index: 3;
}
.container--effecting {
z-index: 10000;
}
.target {
position: relative;
margin: 10px;
width: calc(100% - 20px);
height: calc(100% - 20px);
z-index: 1;
pointer-events: none;
transform-origin: center center;
}
.target--shake {
animation: target-shake 0.26s ease-out;
z-index: -1;
}
.e-value {
position: absolute;
@@ -555,26 +400,17 @@ onBeforeUnmount(() => {
width: 100%;
height: 100%;
}
.svip-hit-bg {
position: absolute;
width: 48rpx;
height: 48rpx;
z-index: 1;
pointer-events: none;
transform-origin: center center;
animation: svip-hit-xuan 1.2s linear infinite;
}
.hit {
position: absolute;
border-radius: 50%;
z-index: 2;
z-index: 1;
color: #fff;
transition: transform 0.2s ease, opacity 0.2s ease;
transition: all 0.3s ease;
box-sizing: border-box;
}
.b-point {
border: 1px solid #fff;
z-index: 2;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
@@ -590,20 +426,6 @@ onBeforeUnmount(() => {
transform: translate(-50%, -50%);*/
margin-top: 2rpx;
}
@keyframes svip-hit-xuan {
0% {
opacity: 0.9;
transform: translate(-50%, -50%) rotate(0deg) scale(0.92);
}
50% {
opacity: 1;
transform: translate(-50%, -50%) rotate(180deg) scale(1.08);
}
100% {
opacity: 0.9;
transform: translate(-50%, -50%) rotate(360deg) scale(0.92);
}
}
@keyframes target-pump-in {
from {
transform: translate(-50%, -50%) scale(2);
@@ -613,29 +435,6 @@ onBeforeUnmount(() => {
transform: translate(-50%, -50%) scale(1);
}
}
@keyframes target-shake {
0% {
transform: translate(0, 0);
}
14% {
transform: translate(-20rpx, 8rpx);
}
28% {
transform: translate(16rpx, -8rpx);
}
44% {
transform: translate(-12rpx, 6rpx);
}
64% {
transform: translate(8rpx, -4rpx);
}
82% {
transform: translate(-4rpx, 2rpx);
}
100% {
transform: translate(0, 0);
}
}
.hit.pump-in {
animation: target-pump-in 0.3s ease-out forwards;
transform-origin: center center;

24
src/components/Header.vue
View File

@@ -55,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 pointBook = ref(null);
const heat = ref(0);
@@ -131,21 +128,7 @@ onBeforeUnmount(() => {
:size="40"
borderColor="#333"
/>
<view
v-if="isVip || isSVip"
:class="[
'point-book-user-name',
'member-nickname',
isVip ? 'member-nickname--vip' : '',
isSVip ? 'member-nickname--svip' : '',
]"
>
<text class="member-nickname__text">{{ user.nickName }}</text>
<text v-if="isSVip" class="member-nickname__shine">
{{ user.nickName }}
</text>
</view>
<text v-else class="truncate">{{ user.nickName }}</text>
<text class="truncate">{{ user.nickName }}</text>
<image
v-if="heat"
:src="`../static/hot${heat}.png`"
@@ -302,8 +285,7 @@ onBeforeUnmount(() => {
width: 36rpx;
height: 36rpx;
}
.user-header > text:nth-child(2),
.user-header > .point-book-user-name {
.user-header > text:nth-child(2) {
font-weight: 500;
font-size: 30rpx;
color: #333333;
@@ -334,7 +316,7 @@ onBeforeUnmount(() => {
width: 156rpx;
height: 28rpx;
font-weight: 400;
font-size: 24rpx;
font-size: 20rpx;
color: #ffffff;
text-align: center;
line-height: 28rpx;

234
src/components/ModalDialog.vue
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>

40
src/components/PlayerScore.vue
View File

@@ -16,13 +16,11 @@ const props = defineProps({
const rowCount = new Array(6).fill(0);
const isMember = (player = {}) => player.vip === true || player.sVip === true;
const getMemberNicknameClass = (player = {}) => [
"member-nickname",
player.vip === true && player.sVip !== true ? "member-nickname--vip" : "",
player.sVip === true ? "member-nickname--svip" : "",
];
const getRingText = (arrow) => {
if (!arrow) return "-";
if (arrow.ringX && arrow.ring) return "X环";
return arrow.ring ? `${arrow.ring}环` : "-";
};
</script>
<template>
@@ -39,36 +37,23 @@ const getMemberNicknameClass = (player = {}) => [
mode="widthFix"
/>
<image :src="player.avatar || '../static/user-icon.png'" mode="widthFix" />
<view
v-if="isMember(player)"
:class="['player-score-name', ...getMemberNicknameClass(player)]"
>
<text class="member-nickname__text">{{ player.name }}</text>
<text v-if="player.sVip === true" class="member-nickname__shine">
{{ player.name }}
</text>
</view>
<text v-else>{{ player.name }}</text>
<text>{{ player.name }}</text>
<view>
<view>
<view v-for="(_, index) in rowCount" :key="index">
<text>{{
scores[0] && scores[0][index] ? `${scores[0][index].ring}环` : "-"
}}</text>
<text>{{ getRingText(scores[0]?.[index]) }}</text>
</view>
</view>
<view>
<view v-for="(_, index) in rowCount" :key="index">
<text>{{
scores[1] && scores[1][index] ? `${scores[1][index].ring}环` : "-"
}}</text>
<text>{{ getRingText(scores[1]?.[index]) }}</text>
</view>
</view>
</view>
<text
>{{
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)
}}环</text
>
@@ -113,13 +98,6 @@ const getMemberNicknameClass = (player = {}) => [
text-overflow: ellipsis;
width: 20%;
}
.player-score-name {
width: 20%;
}
.player-score-name .member-nickname__text,
.player-score-name .member-nickname__shine {
font-size: 14px;
}
.container > view:nth-child(4) {
display: flex;
flex-direction: column;

25
src/components/PointRankItem.vue
View File

@@ -22,15 +22,6 @@ const props = defineProps({
const like = ref(props.data.ifLike);
const likeCount = ref(props.data.likeTotal || 0);
const isMember = (data = {}) => data.vip === true || data.sVip === true;
const getMemberNicknameClass = (data = {}) => [
"point-rank-name",
"member-nickname",
data.vip === true && data.sVip !== true ? "member-nickname--vip" : "",
data.sVip === true ? "member-nickname--svip" : "",
];
watch(
() => props.data,
(newVal) => {
@@ -62,13 +53,7 @@ const onClick = async () => {
<view>
<Avatar :src="data.avatar || '../static/user-icon.png'" :size="36" />
<view>
<view v-if="isMember(data)" :class="getMemberNicknameClass(data)">
<text class="member-nickname__text">{{ data.name }}</text>
<text v-if="data.sVip === true" class="member-nickname__shine">
{{ data.name }}
</text>
</view>
<text v-else class="truncate">{{ data.name }}</text>
<text class="truncate">{{ data.name }}</text>
<view>
<text>{{ data.totalDay }}天</text>
<view />
@@ -133,14 +118,6 @@ const onClick = async () => {
color: #333333;
margin-bottom: 5rpx;
}
.rank-item > view:nth-child(2) > view:last-child > .point-rank-name {
width: 200rpx;
margin-bottom: 5rpx;
}
.point-rank-name .member-nickname__text,
.point-rank-name .member-nickname__shine {
font-size: 28rpx;
}
.rank-item > view:nth-child(2) > view:last-child > view {
display: flex;
align-items: center;

30
src/components/Signin.vue
View File

@@ -1,5 +1,5 @@
<script setup>
import { ref, watch } from "vue";
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import SModal from "@/components/SModal.vue";
import Avatar from "@/components/Avatar.vue";
@@ -16,7 +16,7 @@ import {
import useStore from "@/store";
const store = useStore();
const { updateUser, updateDevice, updateOnline } = store;
const { updateUser, updateDevice, updateOnline, clearDevice } = store;
const props = defineProps({
show: {
@@ -60,21 +60,6 @@ function onNicknameChange(e) {
nickName.value = e.detail.value;
}
const resetForm = () => {
loading.value = false;
agree.value = false;
phone.value = "";
avatarUrl.value = "";
nickName.value = "";
};
watch(
() => props.show,
(show) => {
if (show) resetForm();
}
);
const handleLogin = async () => {
if (loading.value) return;
if (!phone.value) {
@@ -122,6 +107,8 @@ async function doLogin() {
);
const data = await getDeviceBatteryAPI();
updateOnline(data.online);
} else {
clearDevice();
}
props.onClose();
} catch (error) {
@@ -152,7 +139,11 @@ const openPrivacyLink = () => {
};
onShow(() => {
resetForm();
loading.value = false;
agree.value = false;
phone.value = "";
avatarUrl.value = "";
nickName.value = "";
});
</script>
@@ -198,11 +189,10 @@ onShow(() => {
<text :style="{ color: noBg ? '#666' : '#fff' }">昵称:</text>
<input
type="nickname"
:value="nickName"
placeholder="请输入昵称"
:placeholder-style="`color: ${noBg ? '#666' : '#fff9'} `"
@input="onNicknameChange"
@change="onNicknameChange"
@blur="onNicknameBlur"
:style="{ color: noBg ? '#333' : '#fff' }"
/>
</view>

26
src/components/UserHeader.vue
View File

@@ -19,8 +19,6 @@ const nextLvlPoints = ref(0);
const containerWidth = computed(() =>
props.showRank ? "72%" : "calc(100% - 15px)"
);
const isSVip = computed(() => user.value.sVip === true);
const isVip = computed(() => user.value.vip === true && !isSVip.value);
const toUserPage = () => {
// 获取当前页面路径
const pages = getCurrentPages();
@@ -71,18 +69,7 @@ watch(
/>
<view class="user-details" @click="toUserPage">
<view class="user-name">
<view
:class="[
'member-nickname',
isVip ? 'member-nickname--vip' : '',
isSVip ? 'member-nickname--svip' : '',
]"
>
<text class="member-nickname__text">{{ user.nickName }}</text>
<text v-if="isSVip" class="member-nickname__shine">{{
user.nickName
}}</text>
</view>
<text>{{ user.nickName }}</text>
<image
class="user-name-image"
src="../static/vip1.png"
@@ -161,13 +148,12 @@ watch(
margin-bottom: 5px;
}
.user-name .member-nickname {
max-width: 180rpx;
}
.user-name .member-nickname__text,
.user-name .member-nickname__shine {
.user-name > text:first-child {
font-size: 13px;
max-width: 180rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-name-image {

11
src/pages.json
View File

@@ -70,16 +70,13 @@
"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/member/vip-intro"
"path": "pages/be-vip"
},
{
"path": "pages/grade-intro"
@@ -115,7 +112,7 @@
"path": "pages/match-detail"
},
{
"path": "pages/team-battle/team-bow-data"
"path": "pages/team-bow-data"
},
{
"path": "pages/melee-bow-data"

258
src/pages/be-vip.vue Normal file
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>

81
src/pages/friend-battle-result.vue
View File

@@ -92,14 +92,6 @@ const mvpTeam = computed(() => {
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 里产生缓存不一致问题）
*/
@@ -136,8 +128,6 @@ const meleeRankList = computed(() => {
id: p.id,
avatar: p.avatar || "",
name: p.name || "",
vip: p.vip,
sVip: p.sVip,
// rank_lvl 字段可能缺失，缺失时显示空字符串，避免 getLvlName(undefined) 返回错误段位名
lvlName: p.rank_lvl != null ? getLvlName(p.rank_lvl) : "",
totalRing: resultItem.totalRing ?? 0,
@@ -315,7 +305,7 @@ function goBack() {
<Container
:bgType="data.mode > 3 ? -1 : 0"
bgColor="#000000"
:onBack="goBack"
:onBack="exit"
>
<!-- ----- Banner 区：game 胜负展示图（仅 NvN 对抗模式）----- -->
@@ -342,20 +332,7 @@ function goBack() {
<view class="team-players team-players-blue">
<view v-for="p in blueTeamPlayers" :key="p.id" class="player-item">
<Avatar :src="p.avatar" :size="34" borderColor="#8FB4FD" />
<view
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>
<text class="player-name player-name-blue">{{ p.name }}</text>
</view>
</view>
@@ -363,20 +340,7 @@ function goBack() {
<view class="team-players team-players-red">
<view v-for="p in redTeamPlayers" :key="p.id" class="player-item">
<Avatar :src="p.avatar" :size="34" borderColor="#E67470" />
<view
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>
<text class="player-name player-name-red">{{ p.name }}</text>
</view>
</view>
</view>
@@ -421,16 +385,7 @@ function goBack() {
:size="53"
:borderColor="mvpTeam === 1 ? '#5FADFF' : '#FF6060'"
/>
<view
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>
<text class="mvp-name">{{ mvpPlayer.name }}</text>
</view>
</view>
@@ -478,16 +433,7 @@ function goBack() {
<!-- 昵称 + 段位 -->
<view class="rank-player-info">
<view
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-name">{{ item.name }}</text>
<text class="rank-player-lvl">{{ item.lvlName }}</text>
</view>
@@ -667,12 +613,6 @@ function goBack() {
white-space: nowrap;
}
.player-name .member-nickname__text,
.player-name .member-nickname__shine {
font-size: 22rpx;
font-weight: 400;
}
/* ---- 得分行 ---- */
.vs-scores-row {
position: relative;
@@ -812,11 +752,6 @@ function goBack() {
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;
}
.rank-player-name .member-nickname__text,
.rank-player-name .member-nickname__shine {
font-size: 28rpx;
font-weight: 500;
}
.rank-player-lvl {
font-size: 22rpx;
color: rgba(255, 255, 255, 0.5);

25
src/pages/friend-battle.vue
View File

@@ -1,5 +1,5 @@
<script setup>
import { computed, ref } from "vue";
import { ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import GuideTwo from "@/components/GuideTwo.vue";
@@ -24,8 +24,6 @@ const roomNumber = ref("");
const data = ref({});
const roomID = ref("");
const loading = ref(false);
const isSVip = computed(() => user.value.sVip === true);
const isVip = computed(() => user.value.vip === true && !isSVip.value);
const enterRoom = debounce(async (number) => {
if (loading.value) return;
@@ -108,18 +106,7 @@ onLoad(async (options) => {
<view class="my-data">
<view>
<Avatar :rankLvl="user.rankLvl" :src="user.avatar" :size="30" />
<view
:class="[
'member-nickname',
isVip ? 'member-nickname--vip' : '',
isSVip ? 'member-nickname--svip' : '',
]"
>
<text class="member-nickname__text">{{ user.nickName }}</text>
<text v-if="isSVip" class="member-nickname__shine">{{
user.nickName
}}</text>
</view>
<text class="truncate">{{ user.nickName }}</text>
<text class="my-record-btn" @click="goMyRecord">我的战绩</text>
</view>
<view>
@@ -348,17 +335,13 @@ onLoad(async (options) => {
margin-left: auto;
}
.my-data>view:first-child>.member-nickname {
.my-data>view:first-child>text {
color: #fff;
font-size: 17px;
margin-left: 10px;
width: 120px;
}
.my-data>view:first-child>.member-nickname__text,
.my-data>view:first-child>.member-nickname__shine {
font-size: 17px;
}
.my-data>view:last-child {
margin-bottom: 15px;
}

3
src/pages/index.vue
View File

@@ -26,6 +26,7 @@ const {
updateConfig,
updateUser,
updateDevice,
clearDevice,
getLvlName,
getLvlNameByScore,
updateOnline,
@@ -127,6 +128,8 @@ onShow(async () => {
);
const data = await getDeviceBatteryAPI();
updateOnline(data.online);
} else {
clearDevice();
}
}
}

2
src/pages/match-detail.vue
View File

@@ -67,7 +67,7 @@ onLoad(async (options) => {
const checkBowData = (selected) => {
if (data.value.mode <= 3) {
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 {
uni.navigateTo({

94
src/pages/melee-battle.vue
View File

@@ -1,5 +1,5 @@
<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 Container from "@/components/Container.vue";
import BowTarget from "@/components/BowTarget.vue";
@@ -30,15 +30,64 @@ const playersSorted = ref([]);
const playersScores = ref([]);
const halfTimeTip = ref(false);
const halfRest = ref(false);
const HALF_REST_SECONDS = 20;
const halfRestRemain = ref(HALF_REST_SECONDS);
let halfRestTimer = null;
/** 控制设备离线提示弹窗的显示状态 */
const showOfflineModal = ref(false);
/** 记录每位玩家当前半场连续 X 环数，key 为 playerId，用于触发 tententen 音效 */
/** 记录每位玩家当前半场连续 10 环及以上次数，key 为 playerId，用于触发 tententen 音效 */
const xRingStreaks = ref({});
const currentPlayer = computed(() =>
players.value.find((player) => String(player?.id) === String(user.value.id))
);
const isCurrentUserSvip = computed(() => currentPlayer.value?.sVip === true);
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);
}
/**
* 监听设备在线状态，大乱斗比赛进行中设备离线时弹窗提示用户
@@ -96,8 +145,7 @@ function recoverData(battleInfo, { force = false } = {}) {
halfTimeTip.value = true;
halfRest.value = true;
tips.value = "准备下半场";
// 剩余休息时间
// const remain = (Date.now() - battleInfo.timeoutTime) / 1000;
startHalfRestCountdown(getHalfRestSeconds(battleInfo));
setTimeout(() => {
uni.$emit("update-remain", 0);
}, 200);
@@ -128,23 +176,27 @@ onLoad(async (options) => {
});
/**
* 检测指定玩家连续 X 环是否达到 3 箭，达到则在环数播报入队后追加 tententen 音效
* 检测指定玩家连续 10 环及以上是否达到 3 箭，达到则在环数播报入队后追加 tententen 音效
* @param {number|string} playerId - 本次射手的 ID（大乱斗中 ShootResult 保留 playerId）
* @param {boolean} isXRing - 本次射击是否为 X 环
* @param {boolean} isTenPlusRingShot - 本次射击是否为 10 环及以上
*/
function checkAndPlayTententen(playerId, isXRing) {
function isTenPlusRing(shot) {
return !!(shot?.ringX || Number(shot?.ring) >= 10);
}
function checkAndPlayTententen(playerId, isTenPlusRingShot) {
if (!playerId) return;
const id = parseInt(playerId);
if (isXRing) {
if (isTenPlusRingShot) {
xRingStreaks.value[id] = (xRingStreaks.value[id] || 0) + 1;
// 同一玩家连续 3 箭均为 X 环，追加到环数音效队列尾部播放
// 同一玩家连续 3 箭均为 10 环及以上，追加到环数音效队列尾部播放
if (xRingStreaks.value[id] >= 3) {
xRingStreaks.value[id] = 0;
// nextTick 确保 HeaderProgress 的环数播报已入队后再追加 tententen，避免播放顺序颠倒
nextTick(() => audioManager.play("tententen", false));
}
} else {
// 非 X 环则重置该玩家的连续计数
// 低于 10 环或未上靶则重置该玩家的连续计数
xRingStreaks.value[id] = 0;
}
}
@@ -152,6 +204,7 @@ function checkAndPlayTententen(playerId, isXRing) {
async function onReceiveMessage(msg) {
if (Array.isArray(msg)) return;
if (msg.type === MESSAGETYPESV2.BattleStart) {
clearHalfRestCountdown();
halfTimeTip.value = false;
halfRest.value = false;
recoverData(msg);
@@ -166,22 +219,23 @@ async function onReceiveMessage(msg) {
// 对比更新后数据找出箭数增加的玩家（即本次射手），并读取其最新箭的 ring 数据
const newRound = playersScores.value[playersScores.value.length - 1] || {};
let shooterId = null;
let isXRing = false;
let isTenPlusRingShot = false;
for (const pid of Object.keys(newRound)) {
const newLen = (newRound[pid] || []).length;
if (newLen > (prevCounts[pid] || 0)) {
shooterId = parseInt(pid);
const shot = newRound[pid][newLen - 1];
isXRing = !!(shot?.ringX && shot?.ring);
isTenPlusRingShot = isTenPlusRing(shot);
break;
}
}
// 检测同一玩家三箭全 X 环，触发 tententen 音效
checkAndPlayTententen(shooterId, isXRing);
// 检测同一玩家连续三箭 10 环及以上，触发 tententen 音效
checkAndPlayTententen(shooterId, isTenPlusRingShot);
} else if (msg.type === MESSAGETYPESV2.HalfRest) {
halfTimeTip.value = true;
halfRest.value = true;
tips.value = "准备下半场";
startHalfRestCountdown();
} else if (msg.type === MESSAGETYPESV2.BattleEnd) {
setTimeout(() => {
// 全部跳转到新结算页
@@ -202,6 +256,7 @@ onBeforeUnmount(() => {
uni.setKeepScreenOn({
keepScreenOn: false,
});
clearHalfRestCountdown();
uni.$off("socket-inbox", onReceiveMessage);
audioManager.stopAll();
});
@@ -249,7 +304,6 @@ onShow(async () => {
"
:totalRound="12"
:scores="playersScores.map((r) => r[user.id]).flat()"
:isSvip="isCurrentUserSvip"
:stop="halfRest"
/>
<view :style="{ paddingBottom: '20px' }">
@@ -267,7 +321,7 @@ onShow(async () => {
>
<view class="half-time-tip">
<text>上半场结束，休息一下吧:）</text>
<text>20秒后开始下半场</text>
<text>{{ halfRestRemain }}秒后开始下半场</text>
</view>
</ScreenHint>
<!-- 设备离线提示弹窗 -->

57
src/pages/melee-bow-data.vue
View File

@@ -13,31 +13,13 @@ const currentUser = 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) => {
if (!options.battleId) return;
const result = await getBattleAPI(options.battleId || "59348111700660224");
const plist = result.teams?.[0]?.players || [];
players.value = result.resultList.map((item, index) => {
const p = plist.find((p) => String(p.id) === String(item.userId));
const arrows = Array.from({ length: 12 }, () => ({}));
const plist = result.teams[0] ? result.teams[0].players : [];
const p = plist.find((p) => p.id === item.userId);
const arrows = new Array(12);
result.rounds.forEach((r, index) => {
if (r.shoots[item.userId]) {
r.shoots[item.userId].forEach((s, index2) => {
@@ -47,11 +29,9 @@ onLoad(async (options) => {
});
return {
...item,
...p,
userId: item.userId,
rank: index + 1,
name: p?.name || item.name,
avatar: p?.avatar || item.avatar || "",
name: p.name,
avatar: p.avatar || "",
arrows,
};
});
@@ -88,27 +68,18 @@ onLoad(async (options) => {
class="player-bg"
/>
<Avatar :src="player.avatar" :rankLvl="player.rankLvl" :size="40" />
<view v-if="isMember(player)" :class="getMemberNicknameClass(player)">
<text class="member-nickname__text">{{ player.name }}</text>
<text v-if="player.sVip === true" class="member-nickname__shine">
{{ player.name }}
</text>
</view>
<text v-else>{{ player.name }}</text>
<text>{{ player.name }}</text>
</view>
</view>
<view :style="{ marginTop: '10px' }">
<BowTarget
:scores="currentUser.arrows"
:isSvip="currentUser.sVip === true"
/>
<BowTarget :scores="currentUser.arrows" />
</view>
<view class="score-text"
><text :style="{ color: '#fed847' }">{{
currentUser.arrows.length
}}</text
>支箭，共<text :style="{ color: '#fed847' }">{{
getRingTotal(currentUser.arrows)
currentUser.arrows.reduce((last, next) => last + next.ring, 0)
}}</text
>环</view
>
@@ -119,7 +90,7 @@ onLoad(async (options) => {
class="score-item"
:style="{ width: '13vw', height: '13vw' }"
>
{{ getScoreLabel(score) }}
{{ score.ringX ? "X" : score.ring }}
</view>
</view>
</view>
@@ -178,16 +149,6 @@ onLoad(async (options) => {
text-align: center;
position: relative;
}
.players > view > .player-name {
margin: 5px 0;
width: 80%;
position: relative;
justify-content: center;
}
.player-name .member-nickname__text,
.player-name .member-nickname__shine {
font-size: 12px;
}
.score-text {
width: 100%;
color: #fff;

879
src/pages/member/be-vip.vue
View File

@@ -1,879 +0,0 @@
<script setup>
import { computed, ref, onBeforeUnmount } from "vue";
import { onShow } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import Signin from "@/components/Signin.vue";
import { createOrderAPI, getAppConfig, getHomeData } from "@/apis";
import { capsuleHeight } from "@/util";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user, config } = storeToRefs(store);
const { updateConfig, updateUser } = store;
const currentTypeIndex = ref(1);
const selectedPackageIndex = ref(0);
const showModal = ref(false);
const loadingConfig = ref(false);
const paying = ref(false);
const refreshing = ref(false);
const timer = ref(null);
const lastDate = ref(user.value.expiredAt || 0);
const maxRefreshTimes = 12;
// 会员页核心展示数据：视觉、权益、套餐均按蓝湖当前两张设计稿拆分。
const memberTypes = [
{
key: "normal",
tab: "VIP",
title: "普通会员",
prefix: "成为射灵星球",
desc: "特享约战竞技次数包、专属会员标识",
benefitTitle: "普通会员专属权益",
themeClass: "vip-page--normal",
heroCard: "https://static.shelingxingqiu.com/shootmini/static/vip/vip-title.png",
activeHeroCard: "https://static.shelingxingqiu.com/shootmini/static/vip/vip-title2.png",
orderIcon: "../../static/vip/vip-order.png",
heroBadge: "../../static/vip/normal-hero-badge.png",
buttonClass: "activate-btn--normal",
benefits: [
{ label: "专属会员标识", icon: "../../static/vip/vip-badge.png" },
{ label: "教练点评", icon: "../../static/vip/vip-comment.png" },
{ label: "专享VIP客服", icon: "../../static/vip/vip-service.png" },
{ label: "排位赛\n每日+20次", icon: "../../static/vip/vip-rank.png" },
{ label: "约战\n每日+20次", icon: "../../static/vip/vip-battle.png" },
],
packages: [
{ name: "连续包月", price: "20", original: "35" },
{ name: "12个月", price: "300", original: "420" },
{ name: "3个月", price: "84", original: "105" },
],
},
{
key: "super",
tab: "SVIP",
title: "超级会员",
prefix: "成为射灵星球",
desc: "尊享专属特效、无限制约战竞技、专属会员标识",
benefitTitle: "超级会员专属权益",
themeClass: "vip-page--super",
heroCard: "https://static.shelingxingqiu.com/shootmini/static/vip/svip-title.png",
activeHeroCard: "https://static.shelingxingqiu.com/shootmini/static/vip/svip-title2.png",
orderIcon: "../../static/vip/svip-order.png",
heroBadge: "../../static/vip/super-hero-badge.png",
buttonClass: "activate-btn--super",
benefits: [
{ label: "专属落点标识", icon: "../../static/vip/svip-point.png" },
{ label: "专属命中效果", icon: "../../static/vip/svip-hit.png" },
{ label: "专属射箭效果", icon: "../../static/vip/svip-arrow.png" },
{ label: "专属会员标识", icon: "../../static/vip/svip-badge.png" },
{ label: "教练点评", icon: "../../static/vip/svip-comment.png" },
{ label: "约战无限制", icon: "../../static/vip/svip-battle.png" },
{ label: "排位赛无限制", icon: "../../static/vip/svip-rank.png" },
{ label: "专享SVIP客服", icon: "../../static/vip/svip-service.png" },
],
packages: [
{ name: "连续包月", price: "20", original: "35" },
{ name: "12个月", price: "300", original: "420" },
{ name: "3个月", price: "84", original: "105" },
],
},
];
const currentType = computed(() => memberTypes[currentTypeIndex.value]);
// 后端到期时间可能是秒级时间戳、毫秒级时间戳或日期字符串，这里统一转成毫秒。
const toTimestamp = (value) => {
if (!value) return 0;
const numberValue = Number(value);
if (!Number.isNaN(numberValue)) {
return numberValue < 1000000000000 ? numberValue * 1000 : numberValue;
}
const time = new Date(value).getTime();
return Number.isNaN(time) ? 0 : time;
};
// 当前卡片只关心本 tab 对应的会员到期时间，普通会员和超级会员互不兜底。
const getVipExpiredValue = (type, source = user.value) => {
if (!source) return 0;
return type.key === "super" ? source.superVipExpiredAt : source.normalVipExpiredAt;
};
// 支付后轮询需要比较最新会员到期时间，兼容旧字段 expiredAt。
const getLatestVipExpiredTime = (source = user.value) => {
if (!source) return 0;
return Math.max(
toTimestamp(source.normalVipExpiredAt),
toTimestamp(source.superVipExpiredAt),
toTimestamp(source.expiredAt)
);
};
// 未过期才展示“会员生效中”样式，已过期或无值继续展示未开通样式。
const isVipActive = (type) => {
return toTimestamp(getVipExpiredValue(type)) > Date.now();
};
// 会员卡片展示完整到期时间。
const formatVipDate = (value) => {
const timestamp = toTimestamp(value);
if (!timestamp) return "";
const date = new Date(timestamp);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, "0");
const hour = String(date.getHours()).padStart(2, "0");
const minute = String(date.getMinutes()).padStart(2, "0");
const second = String(date.getSeconds()).padStart(2, "0");
return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
};
// 会员生效时使用 title2 切图，未生效时沿用原来的开通引导图。
const getHeroCard = (type) => {
return isVipActive(type) ? type.activeHeroCard : type.heroCard;
};
const getActiveVipExpiredDate = (type) => {
return formatVipDate(getVipExpiredValue(type));
};
// 设计稿里的“下期自动续费”按到期日前一天展示。
const getActiveVipRenewDate = (type) => {
const timestamp = toTimestamp(getVipExpiredValue(type));
if (!timestamp) return "";
return formatVipDate(timestamp - 24 * 60 * 60 * 1000);
};
const configMenus = computed(() => {
return config.value.vipMenus || [];
});
const getMenuName = (item) => {
return item.name || item.vipName || item.title || "";
};
const getMenuPrice = (item) => {
const value = item.price || item.total || item.amount || item.money;
return value ? String(value).replace("￥", "").replace("¥", "") : "";
};
const getMenuType = (item) => {
const vipType = Number(item.vipType);
if (vipType === 1) return "normal";
if (vipType === 2) return "super";
const type = String(item.type || "").toLowerCase();
if (["super", "svip"].includes(type)) return "super";
if (["normal", "vip"].includes(type)) return "normal";
const name = getMenuName(item);
if (/超级|SVIP/i.test(name)) return "super";
if (/普通|VIP|会员/i.test(name)) return "normal";
return "";
};
const getPackageMonths = (name) => {
if (/连续包月/.test(name)) return 1;
const match = String(name || "").match(/(\d+)\s*个?月/);
return match ? Number(match[1]) : 0;
};
const matchPackageSource = (type, pack, index) => {
const menus = configMenus.value;
const typedMenus = menus.filter((item) => {
const menuType = getMenuType(item);
if (type.key === "super") return menuType === "super";
return menuType === "normal";
});
const pool = typedMenus.length ? typedMenus : menus;
const packMonths = getPackageMonths(pack.name);
return (
pool.find((item) => getMenuName(item).indexOf(pack.name) !== -1) ||
pool.find((item) => packMonths && getPackageMonths(getMenuName(item)) === packMonths) ||
pool.find((item) => getMenuPrice(item) === pack.price) ||
pool[index]
);
};
const getPackages = (type) => {
return type.packages.map((item, index) => {
const source = matchPackageSource(type, item, index);
return {
...item,
source,
name: source ? getMenuName(source) || item.name : item.name,
price: source ? getMenuPrice(source) || item.price : item.price,
icon: source && source.icon,
id: source && source.id,
};
});
};
const currentPackages = computed(() => {
return getPackages(currentType.value);
});
const selectedPackage = computed(() => {
return currentPackages.value[selectedPackageIndex.value] || currentPackages.value[0];
});
const switchType = (index) => {
currentTypeIndex.value = index;
selectedPackageIndex.value = 0;
};
const onSwiperChange = (event) => {
currentTypeIndex.value = event.detail.current;
selectedPackageIndex.value = 0;
};
const selectPackage = (index) => {
selectedPackageIndex.value = index;
};
const toPackageDesc = () => {
uni.navigateTo({
url: "/pages/member/vip-intro",
});
};
const toOrderPage = () => {
uni.navigateTo({
url: "/pages/member/orders",
});
};
const loadVipConfig = async () => {
if (loadingConfig.value || configMenus.value.length) return;
loadingConfig.value = true;
try {
const result = await getAppConfig();
if (result) updateConfig(result);
} catch (error) {
console.log("load vip config error", error);
} finally {
loadingConfig.value = false;
}
};
const clearRefreshTimer = () => {
if (timer.value) {
clearInterval(timer.value);
timer.value = null;
}
};
const refreshUserAfterPay = () => {
clearRefreshTimer();
let refreshTimes = 0;
// 先记录支付前的最大到期时间，轮询到更大的值就认为会员状态已刷新。
lastDate.value = getLatestVipExpiredTime();
refreshing.value = true;
timer.value = setInterval(async () => {
refreshTimes += 1;
try {
const result = await getHomeData();
const latestExpiredAt = getLatestVipExpiredTime(result.user);
if (result.user && latestExpiredAt > lastDate.value) {
lastDate.value = latestExpiredAt;
updateUser(result.user);
clearRefreshTimer();
refreshing.value = false;
} else if (refreshTimes >= maxRefreshTimes) {
clearRefreshTimer();
refreshing.value = false;
}
} catch (error) {
console.log("refresh user after pay error", error);
if (refreshTimes >= maxRefreshTimes) {
clearRefreshTimer();
refreshing.value = false;
}
}
}, 1000);
};
const onPay = async () => {
if (paying.value || refreshing.value) return;
if (!user.value.id) {
showModal.value = true;
return;
}
if (!configMenus.value.length) {
await loadVipConfig();
}
const vipId = selectedPackage.value && selectedPackage.value.id;
if (!vipId) {
uni.showToast({
title: loadingConfig.value ? "套餐配置加载中" : "套餐暂不可购买",
icon: "none",
});
return;
}
paying.value = true;
let waitingPayment = false;
try {
const result = await createOrderAPI(vipId);
const params = result?.pay?.order?.jsApi?.params;
if (!params?.timeStamp || !params?.nonceStr || !params?.package || !params?.paySign) {
uni.showToast({
title: "支付参数生成失败",
icon: "none",
});
refreshing.value = false;
return;
}
waitingPayment = true;
wx.requestPayment({
timeStamp: params.timeStamp, // 微信支付时间戳
nonceStr: params.nonceStr, // 微信支付随机串
package: params.package, // 预支付交易会话标识
paySign: params.paySign, // 微信支付签名
signType: params.signType || "RSA",
success() {
uni.showToast({
title: "支付成功",
icon: "none",
});
refreshUserAfterPay();
},
fail(res) {
console.log("pay error", res);
if (res.errMsg && res.errMsg.indexOf("cancel") !== -1) return;
uni.showToast({
title: "支付失败，请稍后重试",
icon: "none",
});
},
complete() {
paying.value = false;
},
});
} catch (error) {
console.log("create vip order error", error);
} finally {
if (!waitingPayment) paying.value = false;
}
};
onShow(loadVipConfig);
onBeforeUnmount(() => {
clearRefreshTimer();
});
</script>
<template>
<Container title="" :bgType="10" :scroll="false" :showBottom="false">
<view class="vip-page" :class="currentType.themeClass">
<view class="type-tabs" :style="{ top: capsuleHeight + 'px' }">
<view
v-for="(item, index) in memberTypes"
:key="item.key"
class="type-tab"
:class="{ 'type-tab--active': currentTypeIndex === index }"
@click="switchType(index)"
>
<text>{{ item.tab }}</text>
<view class="type-tab__indicator" />
</view>
</view>
<swiper
class="type-swiper"
:current="currentTypeIndex"
:duration="260"
@change="onSwiperChange"
>
<swiper-item v-for="type in memberTypes" :key="type.key">
<scroll-view scroll-y class="type-scroll" :show-scrollbar="false">
<view class="vip-content">
<view
class="hero-card"
:class="{ 'hero-card--active': isVipActive(type) }"
>
<image class="hero-card__bg" :src="getHeroCard(type)" mode="scaleToFill" />
<!-- 生效态卡片使用 title2 底图，补充有效期和订单入口叠层。 -->
<view v-if="isVipActive(type)" class="hero-card__content">
<text class="hero-card__date">
有效期至：{{ getActiveVipExpiredDate(type) }}
</text>
<!-- <text v-if="type.key === 'super'" class="hero-card__renew">
下期会员将于：{{ getActiveVipRenewDate(type) }}自动续费
</text> -->
<view class="hero-card__order" @click.stop="toOrderPage">
<image class="hero-card__order-icon" :src="type.orderIcon" mode="aspectFit" />
<text>订单管理</text>
</view>
</view>
</view>
<view class="benefit-title">
<view class="benefit-title__line" />
<text>{{ type.benefitTitle }}</text>
<view class="benefit-title__line" />
</view>
<view class="benefit-grid" :class="{ 'benefit-grid--normal': type.key === 'normal' }">
<view
v-for="benefit in type.benefits"
:key="benefit.label"
class="benefit-item"
>
<view class="benefit-icon">
<image class="benefit-icon__img" :src="benefit.icon" mode="aspectFit" />
</view>
<text class="benefit-item__label">{{ benefit.label }}</text>
</view>
</view>
<view class="package-header">
<text class="package-header__title">选择套餐</text>
<view class="package-header__link" @click="toPackageDesc">
<text>套餐说明</text>
<image
class="package-header__icon"
src="../../static/enter.png"
mode="aspectFit"
/>
</view>
</view>
<scroll-view scroll-x class="package-scroll" :show-scrollbar="false">
<view class="package-list">
<view
v-for="(pack, index) in getPackages(type)"
:key="`${type.key}-${pack.name}`"
class="package-card"
:class="{ 'package-card--active': selectedPackageIndex === index }"
@click="selectPackage(index)"
>
<view class="package-card__inner">
<text class="package-name">{{ pack.name }}</text>
<view class="package-price">
<text class="package-price__symbol">¥</text>
<text class="package-price__value">{{ pack.price }}</text>
</view>
<view class="package-origin">
<text>¥{{ pack.original }}</text>
<view class="package-origin__line" />
</view>
</view>
</view>
</view>
</scroll-view>
<button
hover-class="none"
class="activate-btn"
:class="type.buttonClass"
:disabled="loadingConfig || paying || refreshing"
@click="onPay"
>
<text v-if="loadingConfig">加载套餐中</text>
<text v-else-if="paying">创建订单中</text>
<text v-else-if="!refreshing">¥ {{ selectedPackage.price }} 一键激活</text>
<text v-else>刷新会员状态中</text>
</button>
<view class="agreement">
<text>支付即同意</text>
《&nbsp;<text class="agreement__link">会员自动续费服务协议</text>》
《&nbsp;<text class="agreement__link">扣款授权服务协议</text>》
</view>
</view>
</scroll-view>
</swiper-item>
</swiper>
<Signin :show="showModal" :onClose="() => (showModal = false)" />
</view>
</Container>
</template>
<style scoped>
.vip-page {
position: relative;
width: 100%;
height: 100%;
}
.type-tabs {
position: fixed;
left: 0;
z-index: 998;
width: 50%;
height: 50px;
margin-left: 50%;
transform:translateX(-60%);
display: flex;
align-items: center;
justify-content: center;
pointer-events: auto;
}
.type-tab {
width: 132rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.45);
font-size: 34rpx;
font-weight: 700;
font-style: italic;
}
.type-tab__indicator {
width: 40rpx;
height: 4rpx;
border-radius: 4rpx;
margin-top: 8rpx;
background-color: transparent;
}
.type-tab--active {
color: #ffffff;
}
.vip-page--normal .type-tab--active .type-tab__indicator {
background-color: #ffffff;
}
.vip-page--super .type-tab--active {
color: #fedab5;
}
.vip-page--super .type-tab--active .type-tab__indicator {
background-color: #fedab5;
}
.type-swiper {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
}
.type-scroll {
width: 100%;
height: 100%;
}
.vip-content {
min-height: 100%;
padding: 32rpx 24rpx 52rpx;
box-sizing: border-box;
}
.hero-card {
position: relative;
width: 702rpx;
height: 260rpx;
overflow: hidden;
}
.hero-card__bg {
position: absolute;
left: 0;
top: 0;
width: 702rpx;
height: 260rpx;
}
.hero-card__content {
position: relative;
z-index: 1;
/* 对齐 title2 切图左侧预留文案区域。 */
padding: 132rpx 0 0 44rpx;
display: flex;
flex-direction: column;
align-items: flex-start;
box-sizing: border-box;
}
.hero-card__date,
.hero-card__renew {
color: #8d6d55;
font-size: 24rpx;
line-height: 34rpx;
}
.vip-page--normal .hero-card__date,
.vip-page--normal .hero-card__renew {
color: #555555;
}
.hero-card__order {
display: flex;
align-items: center;
margin-top: 10rpx;
color: #6d5644;
font-size: 24rpx;
line-height: 34rpx;
text-decoration: underline;
}
.vip-page--normal .hero-card__order {
color: #555555;
}
.hero-card__order-icon {
width: 28rpx;
height: 32rpx;
margin-right: 8rpx;
flex-shrink: 0;
}
.benefit-title {
display: flex;
align-items: center;
justify-content: center;
margin-top: 38rpx;
color: #ffffff;
font-size: 24rpx;
line-height: 34rpx;
}
.benefit-title__line {
width: 14rpx;
height: 2rpx;
background-color: #ffffff;
margin: 0 10rpx;
}
.benefit-grid {
display: flex;
flex-wrap: wrap;
width: 622rpx;
margin: 38rpx auto 0;
}
.benefit-grid--normal {
width: 672rpx;
}
.benefit-item {
width: 144rpx;
height: 122rpx;
margin-right: 94rpx;
margin-bottom: 30rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.benefit-item:nth-child(3n) {
margin-right: 0;
}
.benefit-grid--normal .benefit-item {
margin-right: 120rpx;
}
.benefit-grid--normal .benefit-item:nth-child(3n) {
margin-right: 0;
}
.benefit-icon {
width: 80rpx;
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
}
.benefit-icon__img {
width: 80rpx;
height: 80rpx;
display: block;
}
.benefit-item__label {
margin-top: 8rpx;
color: #ffffff;
opacity: 0.7;
font-size: 24rpx;
line-height: 34rpx;
text-align: center;
white-space: pre-line;
}
.package-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 56rpx;
padding-right: 8rpx;
}
.benefit-grid--normal + .package-header {
margin-top: 146rpx;
}
.package-header__title {
color: #ffffff;
font-size: 28rpx;
line-height: 40rpx;
font-weight: 500;
}
.vip-page--super .package-header__title {
color: #e7ba80;
}
.package-header__link {
display: flex;
align-items: center;
color: #999999;
font-size: 22rpx;
line-height: 32rpx;
}
.package-header__icon {
width: 24rpx;
height: 28rpx;
}
.package-scroll {
width: 100%;
margin-top: 40rpx;
white-space: nowrap;
}
.package-list {
display: flex;
width: 984rpx;
padding: 6rpx 84rpx 6rpx 6rpx;
box-sizing: border-box;
}
.package-card {
position: relative;
width: 264rpx;
height: 224rpx;
border-radius: 16rpx;
border: 2rpx solid #999999;
margin-right: 32rpx;
padding: 0;
overflow: hidden;
box-sizing: border-box;
color: #999999;
}
.package-card__inner {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
border-radius: inherit;
}
.package-card--active {
border-width: 6rpx;
border-color: #fed847;
}
.vip-page--super .package-card--active {
border: none;
padding: 6rpx;
background: linear-gradient(180deg, #fef3e6 0%, #f0c191 100%);
}
.vip-page--super .package-card--active .package-card__inner {
border-radius: 10rpx;
background-color: #050b19;
}
.package-name {
font-size: 24rpx;
line-height: 34rpx;
}
.package-price {
display: flex;
align-items: baseline;
margin-top: 12rpx;
color: #ffffff;
}
.package-card--active .package-price {
color: #fed847;
}
.vip-page--super .package-card--active .package-price {
color: #ffe8cd;
}
.package-price__symbol {
font-size: 30rpx;
line-height: 36rpx;
font-weight: 700;
}
.package-price__value {
font-size: 56rpx;
line-height: 66rpx;
font-weight: 700;
}
.package-origin {
position: relative;
margin-top: 2rpx;
color: #999999;
font-size: 24rpx;
line-height: 34rpx;
}
.package-origin__line {
position: absolute;
left: -4rpx;
right: -4rpx;
top: 16rpx;
height: 2rpx;
background-color: #999999;
}
.activate-btn {
width: 686rpx;
height: 88rpx;
border-radius: 44rpx;
margin: 34rpx auto 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
color: #000000;
font-size: 30rpx;
line-height: 42rpx;
font-weight: 500;
}
.activate-btn::after {
border: none;
}
.activate-btn--normal {
background-color: #fed847;
}
.activate-btn--super {
background: linear-gradient( 181deg, #FDFDFC 0%, #FDF8F2 0%, #FFC992 100%, #FFB96C 100%);
}
.agreement {
display: flex;
justify-content: center;
align-items: center;
margin-top: 24rpx;
color: #999999;
font-size: 20rpx;
line-height: 28rpx;
}
.agreement__link {
margin-left: -6rpx;
text-decoration: underline;
}
</style>

244
src/pages/member/vip-intro.vue
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>

4
src/pages/mine-bow-data.vue
View File

@@ -11,14 +11,12 @@ import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
const arrows = ref([]);
const isSvip = ref(false);
const total = ref(0);
onLoad(async (options) => {
if (!options.id) return;
const result = await getPractiseAPI(options.id || 176);
arrows.value = result.details;
isSvip.value = result.sVip === true;
total.value = result.details.length;
});
</script>
@@ -36,7 +34,7 @@ onLoad(async (options) => {
</view>
</view> -->
<view :style="{ marginBottom: '20px' }">
<BowTarget :scores="arrows" :isSvip="isSvip" />
<BowTarget :scores="arrows" />
</view>
<view class="desc">
<text>{{ arrows.length }}</text>

68
src/pages/my-device.vue
View File

@@ -1,5 +1,5 @@
<script setup>
import { computed, ref } from "vue";
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import ScreenHint from "@/components/ScreenHint.vue";
@@ -16,13 +16,11 @@ const showTip = ref(false);
const confirmBindTip = ref(false);
const addDevice = ref();
const store = useStore();
const { updateDevice } = store;
const { updateDevice, clearDevice } = store;
const { user, device } = storeToRefs(store);
const justBind = ref(false);
const calibration = ref(false);
const token = ref(null);
const isSVip = computed(() => user.value.sVip === true);
const isVip = computed(() => user.value.vip === true && !isSVip.value);
// 扫描二维码方法
const handleScan = () => {
@@ -86,13 +84,21 @@ const toFristTryPage = () => {
};
const unbindDevice = async () => {
try {
await unbindDeviceAPI(device.value.deviceId);
} catch (error) {
if (error?.type === "DEVICE_BIND_INVALID") {
uni.setStorageSync("calibration", false);
clearDevice();
}
return;
}
uni.setStorageSync("calibration", false);
uni.showToast({
title: "解绑成功",
icon: "success",
});
device.value = {};
clearDevice();
};
const toDeviceIntroPage = () => {
@@ -124,8 +130,23 @@ const goCalibration = async () => {
});
};
onShow(() => {
const syncDeviceBinding = async () => {
if (!user.value.id) return;
try {
const devices = await getMyDevicesAPI();
if (devices.bindings && devices.bindings.length) {
updateDevice(devices.bindings[0].deviceId, devices.bindings[0].deviceName);
} else {
clearDevice();
}
} catch (error) {
console.log("sync device binding error", error);
}
};
onShow(async () => {
calibration.value = uni.getStorageSync("calibration");
await syncDeviceBinding();
});
</script>
@@ -211,18 +232,7 @@ onShow(() => {
mode="widthFix"
:style="{ borderRadius: '50%' }"
/>
<view
:class="[
'member-nickname',
isVip ? 'member-nickname--vip' : '',
isSVip ? 'member-nickname--svip' : '',
]"
>
<text class="member-nickname__text">{{ user.nickName }}</text>
<text v-if="isSVip" class="member-nickname__shine">{{
user.nickName
}}</text>
</view>
<text>{{ user.nickName }}</text>
</view>
</view>
<!-- <block v-if="calibration"> -->
@@ -280,18 +290,7 @@ onShow(() => {
mode="widthFix"
:style="{ borderRadius: '50%' }"
/>
<view
:class="[
'member-nickname',
isVip ? 'member-nickname--vip' : '',
isSVip ? 'member-nickname--svip' : '',
]"
>
<text class="member-nickname__text">{{ user.nickName }}</text>
<text v-if="isSVip" class="member-nickname__shine">{{
user.nickName
}}</text>
</view>
<text>{{ user.nickName }}</text>
</view>
</view>
<view :style="{ marginTop: '240rpx' }">
@@ -429,15 +428,6 @@ onShow(() => {
text-overflow: ellipsis;
text-align: center;
}
.device-binded .member-nickname {
justify-content: center;
width: 120px;
}
.device-binded .member-nickname__text,
.device-binded .member-nickname__shine {
font-size: 26rpx;
text-align: center;
}
.device-binded > image {
width: 100rpx;
margin: 0 20px;

40
src/pages/member/order-detail.vue → src/pages/order-detail.vue
View File

@@ -61,18 +61,6 @@ const goPay = async () => {
}
};
const copyOrderId = (orderId) => {
uni.setClipboardData({
data: String(orderId),
success: () => {
uni.showToast({
title: "复制成功",
icon: "success",
});
},
});
};
const cancelOrder = async () => {
const result = await cancelOrderListAPI(data.value.orderId);
data.value = result;
@@ -90,13 +78,8 @@ const cancelOrder = async () => {
>
<view class="order">
<view>
<text>{{ data.vipName }}</text>
<view class="order-number">
<text>商品名：{{ data.vipName }}</text>
<text>订单号：{{ data.orderId }}</text>
<text class="copy-action" @click.stop="copyOrderId(data.orderId)"
>复制</text
>
</view>
<text>下单时间：{{ data.vipCreateAt }}</text>
<text
>支付时间：{{
@@ -158,25 +141,4 @@ const cancelOrder = async () => {
text-align: center;
font-size: 11px;
}
.order-number {
display: flex;
align-items: center;
color: #666666;
font-size: 26rpx;
margin-top: 10rpx;
}
.order-number > text:first-child {
flex: 1;
min-width: 0;
word-break: break-all;
}
.copy-action {
flex-shrink: 0;
margin-left: 16rpx;
padding: 2rpx 14rpx;
color: #1f6ed4;
font-size: 24rpx;
line-height: 34rpx;
}
</style>

71
src/pages/member/orders.vue → src/pages/orders.vue
View File

@@ -3,7 +3,6 @@ import { ref, onMounted } from "vue";
import { onShow } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import ScrollList from "@/components/ScrollList.vue";
import ModalDialog from "@/components/ModalDialog.vue";
import { getOrderListAPI } from "@/apis";
import useStore from "@/store";
import { orderStatusNames, getStatusColor } from "@/constants";
@@ -11,34 +10,13 @@ import { storeToRefs } from "pinia";
const store = useStore();
const { user, config } = storeToRefs(store);
const autoRenewDialogVisible = ref(false);
const selectedRenewOrder = ref(null);
const toDetailPage = (detail) => {
uni.setStorageSync("order", detail);
uni.navigateTo({
url: "/pages/member/order-detail",
url: `/pages/order-detail`,
});
};
const openAutoRenewDialog = (detail) => {
selectedRenewOrder.value = detail;
autoRenewDialogVisible.value = true;
};
const closeAutoRenewDialog = () => {
autoRenewDialogVisible.value = false;
selectedRenewOrder.value = null;
};
const confirmAutoRenewDialog = () => {
autoRenewDialogVisible.value = false;
uni.showToast({
title: "功能实现中",
icon: "none",
});
}
const list = ref([]);
const onLoading = async (page) => {
@@ -66,7 +44,7 @@ onShow(() => {
</script>
<template>
<Container title="订单管理">
<Container title="订单">
<view class="container">
<ScrollList :onLoading="onLoading">
<view
@@ -80,31 +58,18 @@ onShow(() => {
>{{ orderStatusNames[item.orderStatus] }}</view
>
<text>{{ item.vipName }}</text>
<text>订单号：{{ item.orderId }}</text>
<text>创建时间：{{ item.orderCreateAt }}</text>
<!-- <text
<!-- <text>订单号：{{ item.orderId }}</text> -->
<!-- <text>创建时间：{{ item.vipCreateAt }}</text> -->
<text
>支付时间：{{
item.orderStatus === 4 ? item.paymentTime : ""
}}</text
> -->
>
<text>金额：{{ item.total }} 元</text>
<!-- <text>支付方式：微信</text> -->
<!-- <text class="renew-action" @click.stop="openAutoRenewDialog(item)">
自动续费
</text> -->
<text>支付方式：微信</text>
</view>
</ScrollList>
</view>
<ModalDialog
:show="autoRenewDialogVisible"
title=""
:content="'确定关闭自动续费吗?\n会员到期后你将失去7项特权哦!'"
cancel-text="一意孤行"
confirm-text="继续享受"
:on-cancel="closeAutoRenewDialog"
:on-confirm="confirmAutoRenewDialog"
/>
</Container>
</template>
@@ -113,15 +78,15 @@ onShow(() => {
width: 100%;
height: 100%;
background-color: #f5f5f5;
padding-top: 16rpx;
padding-top: 10px;
}
.order-item {
position: relative;
background-color: #fff;
margin-bottom: 16rpx;
margin-bottom: 10px;
display: flex;
flex-direction: column;
padding: 28rpx 30rpx 18rpx 30rpx;
padding: 15px;
}
.order-item > view:first-child {
position: absolute;
@@ -133,20 +98,12 @@ onShow(() => {
font-size: 11px;
}
.order-item > text:nth-child(2) {
color: #333333;
font-size: 30rpx;
font-weight: bold;
color: #000;
font-size: 16px;
}
.order-item > text {
color: #666666;
font-size: 26rpx;
margin-bottom: 10rpx;
}
.order-item > .renew-action {
position: absolute;
right: 30rpx;
bottom: 18rpx;
color: #1f6ed4;
margin-bottom: 0;
font-size: 13px;
margin-top: 5px;
}
</style>

31
src/pages/practise-one.vue
View File

@@ -30,9 +30,8 @@ const { user } = storeToRefs(store);
const start = ref(false);
const scores = ref([]);
const isSvip = ref(false);
const total = 12;
/** 当前练习中连续 X 环计数，用于触发 tententen 音效 */
/** 当前练习中连续 10 环及以上计数，用于触发 tententen 音效 */
const xRingStreak = ref(0);
const practiseResult = ref({});
const practiseId = ref("");
@@ -49,8 +48,7 @@ onLoad((options) => {
const onReady = async () => {
await startPractiseAPI();
scores.value = [];
isSvip.value = false;
xRingStreak.value = 0; // 新一局开始，重置 X 环连续计数
xRingStreak.value = 0; // 新一局开始，重置 10 环及以上连续计数
start.value = true;
audioManager.play("练习开始");
};
@@ -61,19 +59,23 @@ const onOver = async () => {
};
/**
* 检测连续 X 环是否达到 3 箭，达到则播放 tententen 音效
* @param {boolean} isXRing - 本次射击是否为 X 环
* 检测连续 10 环及以上是否达到 3 箭，达到则播放 tententen 音效
* @param {boolean} isTenPlusRingShot - 本次射击是否为 10 环及以上
*/
function checkAndPlayTententen(isXRing) {
if (isXRing) {
function isTenPlusRing(shot) {
return !!(shot?.ringX || Number(shot?.ring) >= 10);
}
function checkAndPlayTententen(isTenPlusRingShot) {
if (isTenPlusRingShot) {
xRingStreak.value += 1;
// 连续 3 箭均为 X 环，在环数播报入队后追加 tententen，避免播放顺序颠倒
// 连续 3 箭均为 10 环及以上，在环数播报入队后追加 tententen，避免播放顺序颠倒
if (xRingStreak.value >= 3) {
xRingStreak.value = 0;
nextTick(() => audioManager.play("tententen", false));
}
} else {
// 非 X 环则重置连续计数
// 低于 10 环或未上靶则重置连续计数
xRingStreak.value = 0;
}
}
@@ -81,12 +83,11 @@ function checkAndPlayTententen(isXRing) {
async function onReceiveMessage(msg) {
if (msg.type === MESSAGETYPESV2.ShootResult) {
const prevLen = scores.value.length;
isSvip.value = msg.sVip === true;
scores.value = msg.details;
// 有新箭时取最后一箭判断是否 X 环并检测连续计数
// 有新箭时取最后一箭判断是否 10 环及以上并检测连续计数
if (scores.value.length > prevLen) {
const latestArrow = scores.value[scores.value.length - 1];
checkAndPlayTententen(!!(latestArrow?.ringX && latestArrow?.ring));
checkAndPlayTententen(isTenPlusRing(latestArrow));
}
} else if (msg.type === MESSAGETYPESV2.BattleEnd) {
// setTimeout(onOver, 1500);
@@ -104,8 +105,7 @@ async function onComplete() {
practiseResult.value = {};
start.value = false;
scores.value = [];
isSvip.value = false;
xRingStreak.value = 0; // 重新开始练习，重置 X 环连续计数
xRingStreak.value = 0; // 重新开始练习，重置 10 环及以上连续计数
const result = await createPractiseAPI(total, 120);
if (result) practiseId.value = result.id;
}
@@ -178,7 +178,6 @@ onBeforeUnmount(() => {
:totalRound="start ? total / 4 : 0"
:currentRound="scores.length % 3"
:scores="scores"
:isSvip="isSvip"
/>
<ScorePanel2 :arrows="scores" />
<ScoreResult

31
src/pages/practise-two.vue
View File

@@ -30,9 +30,8 @@ const { user } = storeToRefs(store);
const start = ref(false);
const scores = ref([]);
const isSvip = ref(false);
const total = 36;
/** 当前练习中连续 X 环计数，用于触发 tententen 音效 */
/** 当前练习中连续 10 环及以上计数，用于触发 tententen 音效 */
const xRingStreak = ref(0);
const practiseResult = ref({});
const practiseId = ref("");
@@ -48,8 +47,7 @@ onLoad((options) => {
const onReady = async () => {
await startPractiseAPI();
scores.value = [];
isSvip.value = false;
xRingStreak.value = 0; // 新一局开始，重置 X 环连续计数
xRingStreak.value = 0; // 新一局开始，重置 10 环及以上连续计数
start.value = true;
audioManager.play("练习开始");
};
@@ -60,19 +58,23 @@ const onOver = async () => {
};
/**
* 检测连续 X 环是否达到 3 箭，达到则播放 tententen 音效
* @param {boolean} isXRing - 本次射击是否为 X 环
* 检测连续 10 环及以上是否达到 3 箭，达到则播放 tententen 音效
* @param {boolean} isTenPlusRingShot - 本次射击是否为 10 环及以上
*/
function checkAndPlayTententen(isXRing) {
if (isXRing) {
function isTenPlusRing(shot) {
return !!(shot?.ringX || Number(shot?.ring) >= 10);
}
function checkAndPlayTententen(isTenPlusRingShot) {
if (isTenPlusRingShot) {
xRingStreak.value += 1;
// 连续 3 箭均为 X 环，在环数播报入队后追加 tententen，避免播放顺序颠倒
// 连续 3 箭均为 10 环及以上，在环数播报入队后追加 tententen，避免播放顺序颠倒
if (xRingStreak.value >= 3) {
xRingStreak.value = 0;
nextTick(() => audioManager.play("tententen", false));
}
} else {
// 非 X 环则重置连续计数
// 低于 10 环或未上靶则重置连续计数
xRingStreak.value = 0;
}
}
@@ -80,12 +82,11 @@ function checkAndPlayTententen(isXRing) {
async function onReceiveMessage(msg) {
if (msg.type === MESSAGETYPESV2.ShootResult) {
const prevLen = scores.value.length;
isSvip.value = msg.sVip === true;
scores.value = msg.details;
// 有新箭时取最后一箭判断是否 X 环并检测连续计数
// 有新箭时取最后一箭判断是否 10 环及以上并检测连续计数
if (scores.value.length > prevLen) {
const latestArrow = scores.value[scores.value.length - 1];
checkAndPlayTententen(!!(latestArrow?.ringX && latestArrow?.ring));
checkAndPlayTententen(isTenPlusRing(latestArrow));
}
} else if (msg.type === MESSAGETYPESV2.BattleEnd) {
setTimeout(onOver, 1500);
@@ -119,8 +120,7 @@ async function onComplete() {
practiseResult.value = {};
start.value = false;
scores.value = [];
isSvip.value = false;
xRingStreak.value = 0; // 重新开始练习，重置 X 环连续计数
xRingStreak.value = 0; // 重新开始练习，重置 10 环及以上连续计数
const result = await createPractiseAPI(total, 3600);
if (result) practiseId.value = result.id;
}
@@ -179,7 +179,6 @@ onBeforeUnmount(() => {
:currentRound="scores.length"
:totalRound="start ? total : 0"
:scores="scores"
:isSvip="isSvip"
/>
<ScorePanel
v-if="start"

24
src/pages/practise.vue
View File

@@ -1,5 +1,5 @@
<script setup>
import { computed, ref } from "vue";
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import Guide from "@/components/Guide.vue";
@@ -15,8 +15,6 @@ const { user, device, online } = storeToRefs(store);
const data = ref({});
const showTargetPicker = ref(false);
const pendingPractiseType = ref("");
const isSVip = computed(() => user.value.sVip === true);
const isVip = computed(() => user.value.vip === true && !isSVip.value);
const goPractise = async (type) => {
if (!canEenter(user.value, device.value, online.value)) return;
@@ -51,18 +49,7 @@ onShow(async () => {
<view>
<view>
<Avatar :rankLvl="user.rankLvl" :src="user.avatar" :size="30" />
<view
:class="[
'member-nickname',
isVip ? 'member-nickname--vip' : '',
isSVip ? 'member-nickname--svip' : '',
]"
>
<text class="member-nickname__text">{{ user.nickName }}</text>
<text v-if="isSVip" class="member-nickname__shine">{{
user.nickName
}}</text>
</view>
<text class="truncate">{{ user.nickName }}</text>
</view>
<view>
<text>已练习打卡</text>
@@ -145,14 +132,11 @@ onShow(async () => {
display: flex;
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;
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;
width: 120px;
}
.practise-data > view:first-child > view:last-child > text:nth-child(2) {
color: #f7d247;

49
src/pages/rank-list.vue
View File

@@ -102,8 +102,6 @@ const buildDefaultMyData = () => ({
userId: user.value.id,
name: user.value.nickName,
avatar: user.value.avatar,
vip: user.value.vip,
sVip: user.value.sVip,
totalScore: 0,
mvpCount: 0,
tenRings: 0,
@@ -156,15 +154,6 @@ const getRankUnit = (index = selectedIndex.value) => {
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) => {
currentScrollTop.value = scrollTop;
@@ -452,13 +441,7 @@ const measureTabsMetrics = () => {
</view>
<Avatar :src="item.avatar" />
<view class="rank-item-content">
<view v-if="isMember(item)" :class="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-list-player-name truncate">{{ item.name }}</text>
<text class="truncate">{{ item.name }}</text>
<text>{{ formatLevelText(item) }}</text>
</view>
<text class="rank-item-integral">
@@ -496,23 +479,7 @@ const measureTabsMetrics = () => {
<text>{{ getDisplayMyRank(currentMyData) }}</text>
<Avatar :src="currentMyData.avatar || user.avatar" />
<view class="rank-item-content">
<view
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 class="truncate">{{ currentMyData.name || user.nickName }}</text>
<text>{{ formatLevelText(currentMyData) }}</text>
</view>
<text class="rank-item-integral">
@@ -686,18 +653,6 @@ const measureTabsMetrics = () => {
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 {
margin-right: 10px;
width: 56px;

69
src/pages/ranking.vue
View File

@@ -55,17 +55,6 @@ const rankLoading = ref(false);
const scoreRankList = ref([]);
const mvpRankList = ref([]);
const tenRingRankList = ref([]);
const isSVip = computed(() => user.value.sVip === true);
const isVip = computed(() => user.value.vip === true && !isSVip.value);
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) => {
@@ -325,20 +314,7 @@ onShow(async () => {
:rankLvl="seasonStats.rankLvl"
:size="30"
/>
<view
: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>
<text>{{ seasonStats.nickName || user.nickName }}</text>
</view>
<view
class="ranking-season"
@@ -500,13 +476,7 @@ onShow(async () => {
:style="{ borderColor: index < 3 ? topThreeColors[index] : '' }"
/>
<view>
<view v-if="isMember(item)" :class="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-preview-name truncate">{{ item.name }}</text>
<text class="truncate">{{ item.name }}</text>
<text>{{ formatRankSubTitle(item) }}</text>
</view>
<text>{{ item.totalScore || 0 }}<text>分</text></text>
@@ -529,13 +499,7 @@ onShow(async () => {
:style="{ borderColor: index < 3 ? topThreeColors[index] : '' }"
/>
<view>
<view v-if="isMember(item)" :class="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-preview-name truncate">{{ item.name }}</text>
<text class="truncate">{{ item.name }}</text>
<text>{{ formatRankSubTitle(item) }}</text>
</view>
<text>{{ item.mvpCount || 0 }}<text>次</text></text>
@@ -558,13 +522,7 @@ onShow(async () => {
:style="{ borderColor: index < 3 ? topThreeColors[index] : '' }"
/>
<view>
<view v-if="isMember(item)" :class="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-preview-name truncate">{{ item.name }}</text>
<text class="truncate">{{ item.name }}</text>
<text>{{ formatRankSubTitle(item) }}</text>
</view>
<text>{{ item.tenRings ?? item.TenRings ?? 0 }}<text>次</text></text>
@@ -621,14 +579,8 @@ onShow(async () => {
font-size: 14px;
}
.user-info > .member-nickname {
.user-info > text {
margin-left: 15px;
max-width: 220rpx;
}
.user-info .member-nickname__text,
.user-info .member-nickname__shine {
font-size: 14px;
}
.ranking-season {
@@ -821,17 +773,6 @@ onShow(async () => {
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 {
color: #fff4;
font-size: 13px;

22
src/pages/team-battle.vue
View File

@@ -49,7 +49,7 @@ const battleWay = ref(0);
const lastToSomeoneShootKey = ref("");
/** 控制设备离线提示弹窗的显示状态 */
const showOfflineModal = ref(false);
/** 记录每位玩家当前轮连续 X 环数，key 为 playerId，用于触发 tententen 音效 */
/** 记录每位玩家当前轮连续 10 环及以上次数，key 为 playerId，用于触发 tententen 音效 */
const xRingStreaks = ref({});
/**
@@ -234,22 +234,26 @@ function onNewRound(msg, prevRound) {
}
/**
* 检测指定射手连续 X 环是否达到 3 箭，达到则在环数播报入队后追加 tententen 音效
* 检测指定射手连续 10 环及以上是否达到 3 箭，达到则在环数播报入队后追加 tententen 音效
* @param {number} shooterId - 本次射手的 ID（取自 currentShooterId.value）
* @param {boolean} isXRing - 本次射击是否为 X 环
* @param {boolean} isTenPlusRingShot - 本次射击是否为 10 环及以上
*/
function checkAndPlayTententen(shooterId, isXRing) {
function isTenPlusRing(shot) {
return !!(shot?.ringX || Number(shot?.ring) >= 10);
}
function checkAndPlayTententen(shooterId, isTenPlusRingShot) {
if (!shooterId) return;
if (isXRing) {
if (isTenPlusRingShot) {
xRingStreaks.value[shooterId] = (xRingStreaks.value[shooterId] || 0) + 1;
// 同一玩家连续 3 箭均为 X 环，追加到环数音效队列尾部播放
// 同一玩家连续 3 箭均为 10 环及以上，追加到环数音效队列尾部播放
if (xRingStreaks.value[shooterId] >= 3) {
xRingStreaks.value[shooterId] = 0;
// nextTick 确保 HeaderProgress 的环数播报已入队后再追加 tententen，避免播放顺序颠倒
nextTick(() => audioManager.play("tententen", false));
}
} else {
// 非 X 环则重置该玩家的连续计数
// 低于 10 环或未上靶则重置该玩家的连续计数
xRingStreaks.value[shooterId] = 0;
}
}
@@ -268,9 +272,9 @@ async function onReceiveMessage(msg) {
} else if (msg.type === MESSAGETYPESV2.ShootResult) {
showRoundTip.value = false;
recoverData(msg, {arrowOnly: true});
// 检测同一玩家三箭全 X 环，触发 tententen 音效
// 检测同一玩家连续三箭 10 环及以上，触发 tententen 音效
// currentShooterId 在 ToSomeoneShoot 时写入，ShootResult 不会覆盖，可靠识别本次射手
checkAndPlayTententen(currentShooterId.value, !!(msg.shootData?.ringX && msg.shootData?.ring));
checkAndPlayTententen(currentShooterId.value, isTenPlusRing(msg.shootData));
} else if (msg.type === MESSAGETYPESV2.NewRound) {
// 在进入延迟前先捕获当前轮次，供 onNewRound 使用，防止 800ms 内 ToSomeoneShoot 提前更新 currentRound 造成 Tip 展示错轮
const prevRound = currentRound.value;

29
src/pages/team-battle/components/BackToGame.vue
View File

@@ -18,14 +18,12 @@ const props = defineProps({
},
});
const loading = ref(false);
const navigating = ref(false);
/** 统一获取当前环境 token，用于守卫：无有效 token 时不发起接口请求 */
const getToken = () =>
uni.getStorageSync(`${uni.getAccountInfoSync().miniProgram.envVersion}_token`);
onShow(async () => {
navigating.value = false;
if (user.value.id && getToken()) {
setTimeout(async () => {
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 () => {
if (loading.value || navigating.value) return;
if (loading.value) return;
try {
loading.value = true;
const result = await getBattleAPI();
if (result && result.matchId) {
await uni.$checkAudio();
if (result.mode <= 3) {
await navigateOnce(`/pages/team-battle/index?battleId=${result.matchId}`);
uni.navigateTo({
url: `/pages/team-battle/index?battleId=${result.matchId}`,
});
} else {
await navigateOnce(`/pages/melee-battle?battleId=${result.matchId}`);
uni.navigateTo({
url: `/pages/melee-battle?battleId=${result.matchId}`,
});
}
return;
}
if (game.value.roomID) {
await navigateOnce("/pages/battle-room?roomNumber=" + game.value.roomID);
uni.navigateTo({
url: "/pages/battle-room?roomNumber=" + game.value.roomID,
});
} else {
updateGame(false, "");
}

4
src/pages/team-battle/components/BattleFooter.vue
View File

@@ -51,7 +51,7 @@ const normalRounds = computed(() => {
<view v-for="(result, index) in roundResults" :key="index">
<block v-if="index + 1 > normalRounds">
<image
:src="RoundImages[`gold${result.goldRound || index + 1 - normalRounds}`]"
:src="RoundImages[`gold${index + 1 - normalRounds}`]"
mode="widthFix"
/>
</block>
@@ -86,7 +86,7 @@ const normalRounds = computed(() => {
<view v-for="(result, index) in roundResults" :key="index">
<block v-if="index + 1 > normalRounds">
<image
:src="RoundImages[`gold${result.goldRound || index + 1 - normalRounds}`]"
:src="RoundImages[`gold${index + 1 - normalRounds}`]"
mode="widthFix"
/>
</block>

48
src/pages/team-battle/components/BattleHeader.vue
View File

@@ -27,14 +27,6 @@ defineProps({
default: true,
},
});
const getMemberNicknameClass = (player = {}) => [
"member-nickname",
player.vip === true && player.sVip !== true ? "member-nickname--vip" : "",
player.sVip === true ? "member-nickname--svip" : "",
];
const isMember = (player = {}) => player.vip === true || player.sVip === true;
</script>
<template>
@@ -59,16 +51,7 @@ const isMember = (player = {}) => player.vip === true || player.sVip === true;
}"
>
<Avatar :src="player.avatar" :rankLvl="player.rankLvl" :size="40" />
<view
v-if="isMember(player)"
:class="['player-name', ...getMemberNicknameClass(player)]"
>
<text class="member-nickname__text">{{ player.name }}</text>
<text v-if="player.sVip === true" class="member-nickname__shine">
{{ player.name }}
</text>
</view>
<text v-else class="player-name">{{ player.name }}</text>
<text class="player-name">{{ player.name }}</text>
</view>
<image
v-if="winner === 1"
@@ -87,16 +70,7 @@ const isMember = (player = {}) => player.vip === true || player.sVip === true;
}"
>
<Avatar :src="player.avatar" :rankLvl="player.rankLvl" :size="40" />
<view
v-if="isMember(player)"
:class="['player-name', ...getMemberNicknameClass(player)]"
>
<text class="member-nickname__text">{{ player.name }}</text>
<text v-if="player.sVip === true" class="member-nickname__shine">
{{ player.name }}
</text>
</view>
<text v-else class="player-name">{{ player.name }}</text>
<text class="player-name">{{ player.name }}</text>
</view>
<image
v-if="winner === 2"
@@ -131,16 +105,7 @@ const isMember = (player = {}) => player.vip === true || player.sVip === true;
:size="40"
:rank="showRank ? index + 1 : 0"
/>
<view
v-if="isMember(player)"
:class="['player-name', ...getMemberNicknameClass(player)]"
>
<text class="member-nickname__text">{{ player.name }}</text>
<text v-if="player.sVip === true" class="member-nickname__shine">
{{ player.name }}
</text>
</view>
<text v-else class="player-name">{{ player.name }}</text>
<text class="player-name">{{ player.name }}</text>
</view>
</view>
</scroll-view>
@@ -218,13 +183,6 @@ const isMember = (player = {}) => player.vip === true || player.sVip === true;
text-overflow: ellipsis;
text-align: center;
}
view.player-name {
justify-content: center;
}
.player-name .member-nickname__text,
.player-name .member-nickname__shine {
font-size: 12px;
}
.left-winner-badge {
position: absolute;
width: 50px;

301
src/pages/team-battle/components/BowTarget.vue
View File

@@ -1,15 +1,6 @@
<script setup>
import {
ref,
watch,
onMounted,
onBeforeUnmount,
computed,
nextTick,
getCurrentInstance,
} from "vue";
import { ref, watch, onMounted, onBeforeUnmount, computed } from "vue";
import PointSwitcher from "./PointSwitcher.vue";
import BowShotEffect from "@/components/BowShotEffect.vue";
import { MESSAGETYPES, MESSAGETYPESV2 } from "@/constants";
import { simulShootAPI } from "@/apis";
@@ -35,14 +26,6 @@ const props = defineProps({
type: Array,
default: () => [],
},
redTeam: {
type: Array,
default: () => [],
},
blueTeam: {
type: Array,
default: () => [],
},
latestShotFlash: {
type: Object,
default: null,
@@ -76,56 +59,18 @@ const timer = ref(null);
const dirTimer = ref(null);
const angle = ref(null);
const circleColor = ref("");
const shotEffect = ref(null);
const hiddenRedLatestKey = ref("");
const hiddenBlueLatestKey = ref("");
const targetShaking = ref(false);
const targetSize = ref({ width: 0, height: 0 });
const shakeTimer = ref(null);
const instance = getCurrentInstance();
const ROUND_TIP_OFFSET_Y = -32;
const EXPERIENCE_TIP_OFFSET_Y = -68;
function buildShotEffectKey(team, shot, fallbackKey = "") {
return (
fallbackKey ||
[
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() {
function showShotFlash(flash) {
const shootData = flash?.shootData;
if (!shootData) return;
if (timer.value) clearTimeout(timer.value);
timer.value = null;
}
function showShotTip(team, shootData) {
clearTipTimer();
if (team === "red") {
if (flash.team === "red") {
latestOne.value = shootData;
timer.value = setTimeout(() => {
latestOne.value = null;
timer.value = null;
}, 1000);
return;
}
@@ -133,102 +78,9 @@ function showShotTip(team, shootData) {
bluelatestOne.value = shootData;
timer.value = setTimeout(() => {
bluelatestOne.value = null;
timer.value = null;
}, 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(
() => props.latestShotFlash,
(newVal) => {
@@ -237,26 +89,6 @@ watch(
{ 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 radius = Number(props.targetRadius);
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) {
const point = getShotPoint(shot, true);
return getTargetPositionStyle(
@@ -400,8 +223,6 @@ async function onReceiveMessage(message) {
onMounted(() => {
uni.$on("socket-inbox", onReceiveMessage);
updateTargetSize();
if (uni.onWindowResize) uni.onWindowResize(handleWindowResize);
});
onBeforeUnmount(() => {
@@ -413,17 +234,12 @@ onBeforeUnmount(() => {
clearTimeout(dirTimer.value);
dirTimer.value = null;
}
if (shakeTimer.value) {
clearTimeout(shakeTimer.value);
shakeTimer.value = null;
}
uni.$off("socket-inbox", onReceiveMessage);
if (uni.offWindowResize) uni.offWindowResize(handleWindowResize);
});
</script>
<template>
<view :class="['container', { 'container--effecting': shotEffect }]">
<view class="container">
<view class="header" v-if="totalRound > 0">
<text v-if="totalRound > 0" class="round-count">{{
(currentRound > totalRound ? totalRound : currentRound) +
@@ -431,7 +247,7 @@ onBeforeUnmount(() => {
totalRound
}}</text>
</view>
<view :class="['target', { 'target--shake': targetShaking }]">
<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" />
@@ -471,20 +287,8 @@ onBeforeUnmount(() => {
}}<text v-if="bluelatestOne.ring">环</text></view
>
<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
v-if="bow.ring > 0 && !shouldHideRedHit(index)"
v-if="bow.ring > 0"
:class="`hit ${pMode ? 'b' : 's'}-point ${
index === scores.length - 1 && latestOne ? 'pump-in' : ''
}`"
@@ -496,20 +300,8 @@ onBeforeUnmount(() => {
>
</block>
<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
v-if="bow.ring > 0 && !shouldHideBlueHit(index)"
v-if="bow.ring > 0"
:class="`hit ${pMode ? 'b' : 's'}-point ${
index === blueScores.length - 1 && bluelatestOne ? 'pump-in' : ''
}`"
@@ -521,16 +313,6 @@ onBeforeUnmount(() => {
<text v-if="pMode">{{ index + 1 }}</text>
</view>
</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" />
</view>
<view class="footer">
@@ -552,22 +334,13 @@ onBeforeUnmount(() => {
height: calc(100vw - 30px);
padding: 0px 15px;
position: relative;
z-index: 3;
}
.container--effecting {
z-index: 10000;
}
.target {
position: relative;
margin: 10px;
width: calc(100% - 20px);
height: calc(100% - 20px);
z-index: 1;
pointer-events: none;
transform-origin: center center;
}
.target--shake {
animation: target-shake 0.26s ease-out;
z-index: -1;
}
.e-value {
position: absolute;
@@ -622,26 +395,17 @@ onBeforeUnmount(() => {
width: 100%;
height: 100%;
}
.svip-hit-bg {
position: absolute;
width: 48rpx;
height: 48rpx;
z-index: 1;
pointer-events: none;
transform-origin: center center;
animation: svip-hit-xuan 1.2s linear infinite;
}
.hit {
position: absolute;
border-radius: 50%;
z-index: 2;
z-index: 1;
color: #fff;
transition: transform 0.2s ease, opacity 0.2s ease;
transition: all 0.3s ease;
box-sizing: border-box;
}
.b-point {
border: 1px solid #fff;
z-index: 2;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
@@ -657,20 +421,6 @@ onBeforeUnmount(() => {
transform: translate(-50%, -50%);*/
margin-top: 2rpx;
}
@keyframes svip-hit-xuan {
0% {
opacity: 0.9;
transform: translate(-50%, -50%) rotate(0deg) scale(0.92);
}
50% {
opacity: 1;
transform: translate(-50%, -50%) rotate(180deg) scale(1.08);
}
100% {
opacity: 0.9;
transform: translate(-50%, -50%) rotate(360deg) scale(0.92);
}
}
@keyframes target-pump-in {
from {
transform: translate(-50%, -50%) scale(2);
@@ -680,29 +430,6 @@ onBeforeUnmount(() => {
transform: translate(-50%, -50%) scale(1);
}
}
@keyframes target-shake {
0% {
transform: translate(0, 0);
}
14% {
transform: translate(-20rpx, 8rpx);
}
28% {
transform: translate(16rpx, -8rpx);
}
44% {
transform: translate(-12rpx, 6rpx);
}
64% {
transform: translate(8rpx, -4rpx);
}
82% {
transform: translate(-4rpx, 2rpx);
}
100% {
transform: translate(0, 0);
}
}
.hit.pump-in {
animation: target-pump-in 0.3s ease-out forwards;
transform-origin: center center;
@@ -730,8 +457,6 @@ onBeforeUnmount(() => {
display: flex;
margin-top: -40px;
justify-content: flex-end;
position: relative;
z-index: 999;
}
.footer > image {
width: 40px;

2
src/pages/team-battle/components/Header.vue
View File

@@ -316,7 +316,7 @@ onBeforeUnmount(() => {
width: 156rpx;
height: 28rpx;
font-weight: 400;
font-size: 24rpx;
font-size: 20rpx;
color: #ffffff;
text-align: center;
line-height: 28rpx;

40
src/pages/team-battle/components/TeamAvatars.vue
View File

@@ -17,7 +17,6 @@ const props = defineProps({
const players = ref({});
const currentTeam = ref(false);
const firstName = ref("");
const currentPlayer = ref(null);
// 抽出判断：当前队伍且该玩家排序为 0（队伍首位）
const isFirst = (id) =>
@@ -31,18 +30,6 @@ const getPos = (id) => {
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 nextPlayers = {};
const shooterId = props.currentShooterId;
@@ -53,14 +40,12 @@ const syncPlayers = () => {
currentTeam.value = !!shooterId && shooterIndex >= 0;
firstName.value = "";
currentPlayer.value = null;
if (currentTeam.value) {
const target = nextTeam.splice(shooterIndex, 1)[0];
if (target) {
nextTeam.unshift(target);
firstName.value = target.name || "";
currentPlayer.value = target;
}
}
@@ -108,20 +93,8 @@ watch(
>{{ isRed ? "红队" : "蓝队" }}</text
>
</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
v-else-if="currentTeam"
v-if="currentTeam"
class="truncate"
:style="{
color: isRed ? '#ff6060' : '#5fadff',
@@ -141,17 +114,6 @@ watch(
height: 10rpx;
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 {
position: absolute;
font-size: 20rpx;

33
src/pages/team-battle/index.vue
View File

@@ -473,17 +473,14 @@ function updateTeams(battleInfo) {
}
function updateGoldenRound(battleInfo) {
const rounds = Array.isArray(battleInfo?.rounds) ? battleInfo.rounds : [];
const currentRoundNo = Number(battleInfo?.current?.round || 0);
const currentRoundInfo = rounds.find((round) => Number(round?.round) === currentRoundNo);
const activeGoldRoundInfo = rounds.find(
(round) => Number(round?.goldRound || 0) > 0 && round?.status === 1
);
const roundGoldRound = Number(currentRoundInfo?.goldRound || 0);
const activeGoldRound = Number(activeGoldRoundInfo?.goldRound || 0);
const currentGoldRound = Number(battleInfo?.current?.goldRound || 0);
const nextGoldRound = roundGoldRound || activeGoldRound || currentGoldRound;
goldenRound.value = nextGoldRound > 0 ? nextGoldRound : 0;
if (!battleInfo?.current?.goldRound) {
goldenRound.value = 0;
return;
}
const rounds = Array.isArray(battleInfo.rounds) ? battleInfo.rounds : [];
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);
}
// Restore an info snapshot whose eventType points at the NewRound phase.
@@ -861,10 +858,14 @@ async function runToSomeoneShootTask(task, runId) {
});
}
function updateXRingStreak(shooterId, isXRing) {
function isTenPlusRing(shot) {
return !!(shot?.ringX || Number(shot?.ring) >= 10);
}
function updateXRingStreak(shooterId, isTenPlusRingShot) {
if (!shooterId) return false;
const id = String(shooterId);
if (!isXRing) {
if (!isTenPlusRingShot) {
xRingStreaks.value[id] = 0;
saveXRingStreaks();
return false;
@@ -909,7 +910,7 @@ async function runShootResultTask(task) {
const isTententen = updateXRingStreak(
currentShooterId.value,
!!(battleInfo.shootData?.ringX && battleInfo.shootData?.ring)
isTenPlusRing(battleInfo.shootData)
);
const audioKeys = buildShootResultAudioKeys(battleInfo.shootData);
if (isTententen) audioKeys.push("tententen");
@@ -1218,8 +1219,6 @@ onShow(() => {
:scores="scores"
:blueScores="blueScores"
:latestShotFlash="latestShotFlash"
:redTeam="redTeam"
:blueTeam="blueTeam"
/>
<BattleFooter
v-if="start"
@@ -1255,7 +1254,7 @@ onShow(() => {
<view class="offline-modal">
<text class="offline-title">设备已离线</text>
<text class="offline-desc">检测到设备已断开连接，请检查设备后继续比赛</text>
<SButton @click="showOfflineModal = false">我知道了</SButton>
<SButton :onClick="() => (showOfflineModal = false)">我知道了</SButton>
</view>
</SModal>
</view>

171
src/pages/team-battle/team-bow-data.vue
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>

4
src/pages/user.vue
View File

@@ -13,7 +13,7 @@ const { updateUser } = store;
const toOrderPage = () => {
uni.navigateTo({
url: "/pages/member/orders",
url: "/pages/orders",
});
};
@@ -27,7 +27,7 @@ const toFristTryPage = async () => {
};
const toBeVipPage = () => {
uni.navigateTo({
url: "/pages/member/be-vip",
url: "/pages/be-vip",
});
};
const toMyGrowthPage = () => {

BIN
src/static/common/dialog-bg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 21 KiB

BIN
src/static/common/dialog-icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.1 KiB

BIN
src/static/common/dialog-light.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 62 KiB

BIN
src/static/vip/intro-toast.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/static/vip/super-battle.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 862 B

BIN
src/static/vip/super-button.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.0 KiB

BIN
src/static/vip/svip-arrow.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.6 KiB

BIN
src/static/vip/svip-badge.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/static/vip/svip-battle.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/static/vip/svip-comment.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

BIN
src/static/vip/svip-hit.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.8 KiB

BIN
src/static/vip/svip-jian.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

BIN
src/static/vip/svip-lie.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

BIN
src/static/vip/svip-off.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 724 B

BIN
src/static/vip/svip-on.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 777 B

BIN
src/static/vip/svip-order.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 492 B

BIN
src/static/vip/svip-point.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.7 KiB

BIN
src/static/vip/svip-rank.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/static/vip/svip-service.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.6 KiB

BIN
src/static/vip/svip-xuan.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 898 B

BIN
src/static/vip/vip-badge.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1001 B

BIN
src/static/vip/vip-battle.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

BIN
src/static/vip/vip-comment.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 949 B

BIN
src/static/vip/vip-off.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 594 B

BIN
src/static/vip/vip-on.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 637 B

BIN
src/static/vip/vip-order.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 476 B

BIN
src/static/vip/vip-rank.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

BIN
src/static/vip/vip-service.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

4
src/store.js
View File

@@ -137,6 +137,10 @@ export default defineStore("store", {
this.device.deviceId = deviceId;
this.device.deviceName = deviceName;
},
clearDevice() {
this.device = getDefaultDevice();
this.online = false;
},
async updateConfig(config) {
this.config = config;
if (this.user.scores !== undefined) {