Compare commits
14 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 54e5427a77 | |||
| 9b47b313a7 | |||
| 350c6373ab | |||
| 048b0e9fa9 | |||
| 39d34d5bff | |||
| 37f4f0c019 | |||
| e9cd9c8c9f | |||
| 73a41ab897 | |||
| 32c37e283f | |||
| 209103742d | |||
| 27d11a8129 | |||
| c9ea368a19 | |||
| b5e7e72104 | |||
| 7a00c1bb1f |
1
.gitignore
vendored
@@ -10,6 +10,7 @@ lerna-debug.log*
|
||||
node_modules
|
||||
.history
|
||||
.github
|
||||
.claude
|
||||
openspec
|
||||
CLAUDE.md
|
||||
docs
|
||||
|
||||
63
src/App.vue
@@ -250,69 +250,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;
|
||||
|
||||
@@ -333,9 +333,6 @@ export const createOrderAPI = (vipId) => {
|
||||
quanity: 1,
|
||||
tradeType: "mini",
|
||||
payType: "wxpay",
|
||||
returnUrl: "",
|
||||
remark: "",
|
||||
mockTest: false,
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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, "");
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
@@ -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 双排
|
||||
@@ -39,18 +34,6 @@ const props = defineProps({
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
targetRadius: {
|
||||
type: Number,
|
||||
default: 20,
|
||||
},
|
||||
hitRadiusPx: {
|
||||
type: Number,
|
||||
default: 2,
|
||||
},
|
||||
zoomHitRadiusPx: {
|
||||
type: Number,
|
||||
default: 5,
|
||||
},
|
||||
});
|
||||
|
||||
const pMode = ref(true);
|
||||
@@ -62,120 +45,16 @@ const timer = ref(null);
|
||||
const dirTimer = ref(null);
|
||||
const angle = ref(null);
|
||||
const circleColor = ref("");
|
||||
const shotEffect = ref(null);
|
||||
const hiddenRedLatestKey = ref("");
|
||||
const hiddenBlueLatestKey = ref("");
|
||||
const targetShaking = ref(false);
|
||||
const shakeTimer = ref(null);
|
||||
const ROUND_TIP_OFFSET_Y = -32;
|
||||
const EXPERIENCE_TIP_OFFSET_Y = -68;
|
||||
|
||||
function buildShotEffectKey(team, shot, index) {
|
||||
return [
|
||||
team,
|
||||
index,
|
||||
shot?.playerId ?? "",
|
||||
shot?.x ?? "",
|
||||
shot?.y ?? "",
|
||||
shot?.ring ?? "",
|
||||
shot?.ringX ? 1 : 0,
|
||||
].join("-");
|
||||
}
|
||||
|
||||
function shouldPlayShotEffect(shot) {
|
||||
return props.isSvip && !!shot && Number(shot.ring) > 0;
|
||||
}
|
||||
|
||||
function clearTipTimer() {
|
||||
if (timer.value) {
|
||||
clearTimeout(timer.value);
|
||||
timer.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
function showShotTip(team, shot) {
|
||||
clearTipTimer();
|
||||
if (team === "red") {
|
||||
latestOne.value = shot;
|
||||
timer.value = setTimeout(() => {
|
||||
latestOne.value = null;
|
||||
timer.value = null;
|
||||
}, 1000);
|
||||
return;
|
||||
}
|
||||
|
||||
bluelatestOne.value = shot;
|
||||
timer.value = setTimeout(() => {
|
||||
bluelatestOne.value = null;
|
||||
timer.value = null;
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function triggerShotEffect(team, shot, index) {
|
||||
const key = buildShotEffectKey(team, shot, index);
|
||||
|
||||
if (shotEffect.value?.team === "red") hiddenRedLatestKey.value = "";
|
||||
if (shotEffect.value?.team === "blue") hiddenBlueLatestKey.value = "";
|
||||
|
||||
if (team === "red") {
|
||||
latestOne.value = null;
|
||||
hiddenRedLatestKey.value = key;
|
||||
} else {
|
||||
bluelatestOne.value = null;
|
||||
hiddenBlueLatestKey.value = key;
|
||||
}
|
||||
|
||||
shotEffect.value = { key, team, shot };
|
||||
}
|
||||
|
||||
function completeShotEffect(key) {
|
||||
if (!shotEffect.value || shotEffect.value.key !== key) return;
|
||||
|
||||
const { team, shot } = shotEffect.value;
|
||||
if (team === "red") hiddenRedLatestKey.value = "";
|
||||
if (team === "blue") hiddenBlueLatestKey.value = "";
|
||||
shotEffect.value = null;
|
||||
showShotTip(team, shot);
|
||||
}
|
||||
|
||||
function shakeTarget() {
|
||||
targetShaking.value = false;
|
||||
if (shakeTimer.value) {
|
||||
clearTimeout(shakeTimer.value);
|
||||
shakeTimer.value = null;
|
||||
}
|
||||
|
||||
nextTick(() => {
|
||||
targetShaking.value = true;
|
||||
shakeTimer.value = setTimeout(() => {
|
||||
targetShaking.value = false;
|
||||
shakeTimer.value = null;
|
||||
}, 260);
|
||||
});
|
||||
}
|
||||
|
||||
function shouldHideRedHit(index) {
|
||||
return !!hiddenRedLatestKey.value && index === props.scores.length - 1;
|
||||
}
|
||||
|
||||
function shouldHideBlueHit(index) {
|
||||
return !!hiddenBlueLatestKey.value && index === props.blueScores.length - 1;
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.scores,
|
||||
(newVal) => {
|
||||
if (newVal.length - prevScores.value.length === 1) {
|
||||
const latestShot = newVal[newVal.length - 1];
|
||||
if (shouldPlayShotEffect(latestShot)) {
|
||||
triggerShotEffect("red", latestShot, newVal.length - 1);
|
||||
} else {
|
||||
showShotTip("red", latestShot);
|
||||
}
|
||||
} else if (newVal.length <= prevScores.value.length) {
|
||||
latestOne.value = null;
|
||||
hiddenRedLatestKey.value = "";
|
||||
if (shotEffect.value?.team === "red") shotEffect.value = null;
|
||||
latestOne.value = newVal[newVal.length - 1];
|
||||
if (timer.value) clearTimeout(timer.value);
|
||||
timer.value = setTimeout(() => {
|
||||
latestOne.value = null;
|
||||
}, 1000);
|
||||
}
|
||||
prevScores.value = [...newVal];
|
||||
},
|
||||
@@ -188,16 +67,11 @@ watch(
|
||||
() => props.blueScores,
|
||||
(newVal) => {
|
||||
if (newVal.length - prevBlueScores.value.length === 1) {
|
||||
const latestShot = newVal[newVal.length - 1];
|
||||
if (shouldPlayShotEffect(latestShot)) {
|
||||
triggerShotEffect("blue", latestShot, newVal.length - 1);
|
||||
} else {
|
||||
showShotTip("blue", latestShot);
|
||||
}
|
||||
} else if (newVal.length <= prevBlueScores.value.length) {
|
||||
bluelatestOne.value = null;
|
||||
hiddenBlueLatestKey.value = "";
|
||||
if (shotEffect.value?.team === "blue") shotEffect.value = null;
|
||||
bluelatestOne.value = newVal[newVal.length - 1];
|
||||
if (timer.value) clearTimeout(timer.value);
|
||||
timer.value = setTimeout(() => {
|
||||
bluelatestOne.value = null;
|
||||
}, 1000);
|
||||
}
|
||||
prevBlueScores.value = [...newVal];
|
||||
},
|
||||
@@ -206,101 +80,13 @@ watch(
|
||||
}
|
||||
);
|
||||
|
||||
const safeTargetRadius = computed(() => {
|
||||
const radius = Number(props.targetRadius);
|
||||
return Number.isFinite(radius) && radius > 0 ? radius : 20;
|
||||
});
|
||||
|
||||
const currentHitRadiusPx = computed(() => {
|
||||
const radius = Number(
|
||||
pMode.value ? props.zoomHitRadiusPx : props.hitRadiusPx
|
||||
);
|
||||
return Number.isFinite(radius) && radius >= 0 ? radius : 0;
|
||||
});
|
||||
|
||||
function getShotPoint(shot, fallbackCenter = false) {
|
||||
const x = Number(shot?.x);
|
||||
const y = Number(shot?.y);
|
||||
if (Number.isFinite(x) && Number.isFinite(y)) return { x, y };
|
||||
return fallbackCenter ? { x: 0, y: 0 } : null;
|
||||
function calcRealX(num, offset = 3.4) {
|
||||
const len = 20.4 + num;
|
||||
return `calc(${(len / 40.8) * 100 - offset / 2}%)`;
|
||||
}
|
||||
|
||||
function getPointDirection(point) {
|
||||
if (!point) return null;
|
||||
const distance = Math.sqrt(point.x * point.x + point.y * point.y);
|
||||
if (distance === 0) return null;
|
||||
|
||||
return {
|
||||
x: point.x / distance,
|
||||
y: point.y / distance,
|
||||
};
|
||||
}
|
||||
|
||||
function formatPxOffset(value) {
|
||||
if (!value) return "";
|
||||
const operator = value > 0 ? "+" : "-";
|
||||
return ` ${operator} ${Math.abs(value)}px`;
|
||||
}
|
||||
|
||||
function formatTargetPosition(percent, offset) {
|
||||
const pxOffset = formatPxOffset(offset);
|
||||
return pxOffset ? `calc(${percent}%${pxOffset})` : `${percent}%`;
|
||||
}
|
||||
|
||||
function getTargetPositionStyle(point, offsetPx = 0, extraOffset = {}) {
|
||||
if (!point) return { display: "none" };
|
||||
|
||||
const radius = safeTargetRadius.value;
|
||||
const diameter = radius * 2;
|
||||
const direction = getPointDirection(point);
|
||||
const xOffset = (direction ? direction.x * offsetPx : 0) + (extraOffset.x || 0);
|
||||
const yOffset = (direction ? -direction.y * offsetPx : 0) + (extraOffset.y || 0);
|
||||
const leftPercent = ((point.x + radius) / diameter) * 100;
|
||||
const topPercent = ((radius - point.y) / diameter) * 100;
|
||||
|
||||
return {
|
||||
left: formatTargetPosition(leftPercent, xOffset),
|
||||
top: formatTargetPosition(topPercent, yOffset),
|
||||
transform: "translate(-50%, -50%)",
|
||||
};
|
||||
}
|
||||
|
||||
function getHitStyle(shot) {
|
||||
const radius = currentHitRadiusPx.value;
|
||||
const point = getShotPoint(shot);
|
||||
|
||||
return {
|
||||
...getTargetPositionStyle(point, radius),
|
||||
width: `${radius * 2}px`,
|
||||
height: `${radius * 2}px`,
|
||||
};
|
||||
}
|
||||
|
||||
function getSvipHitBgStyle(shot) {
|
||||
const radius = currentHitRadiusPx.value;
|
||||
const point = getShotPoint(shot);
|
||||
|
||||
return {
|
||||
...getTargetPositionStyle(point, radius),
|
||||
};
|
||||
}
|
||||
|
||||
function getRoundTipStyle(shot) {
|
||||
const point = getShotPoint(shot, true);
|
||||
return getTargetPositionStyle(
|
||||
point,
|
||||
shot?.ring ? currentHitRadiusPx.value : 0,
|
||||
{ y: ROUND_TIP_OFFSET_Y }
|
||||
);
|
||||
}
|
||||
|
||||
function getExperienceTipStyle(shot) {
|
||||
const point = getShotPoint(shot, true);
|
||||
return getTargetPositionStyle(
|
||||
point,
|
||||
shot?.ring ? currentHitRadiusPx.value : 0,
|
||||
{ y: EXPERIENCE_TIP_OFFSET_Y }
|
||||
);
|
||||
function calcRealY(num, offset = 3.4) {
|
||||
const len = num < 0 ? Math.abs(num) + 20.4 : 20.4 - num;
|
||||
return `calc(${(len / 40.8) * 100 - offset / 2}%)`;
|
||||
}
|
||||
const simulShoot = async () => {
|
||||
if (device.value.deviceId) await simulShootAPI(device.value.deviceId);
|
||||
@@ -360,16 +146,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 +159,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" />
|
||||
@@ -387,14 +169,20 @@ onBeforeUnmount(() => {
|
||||
<view
|
||||
v-if="latestOne && latestOne.ring && user.id === latestOne.playerId"
|
||||
class="e-value fade-in-out"
|
||||
:style="getExperienceTipStyle(latestOne)"
|
||||
:style="{
|
||||
left: calcRealX(latestOne.ring ? latestOne.x : 0, 20),
|
||||
top: calcRealY(latestOne.ring ? latestOne.y : 0, 40),
|
||||
}"
|
||||
>
|
||||
经验 +1
|
||||
</view>
|
||||
<view
|
||||
v-if="latestOne"
|
||||
class="round-tip fade-in-out"
|
||||
:style="getRoundTipStyle(latestOne)"
|
||||
:style="{
|
||||
left: calcRealX(latestOne.ring ? latestOne.x : 0, 28),
|
||||
top: calcRealY(latestOne.ring ? latestOne.y : 0, 28),
|
||||
}"
|
||||
>{{ latestOne.ringX ? "X" : latestOne.ring || "未上靶"
|
||||
}}<text v-if="latestOne.ring">环</text>
|
||||
</view>
|
||||
@@ -405,65 +193,52 @@ onBeforeUnmount(() => {
|
||||
user.id === bluelatestOne.playerId
|
||||
"
|
||||
class="e-value fade-in-out"
|
||||
:style="getExperienceTipStyle(bluelatestOne)"
|
||||
:style="{
|
||||
left: calcRealX(bluelatestOne.ring ? bluelatestOne.x : 0, 20),
|
||||
top: calcRealY(bluelatestOne.ring ? bluelatestOne.y : 0, 40),
|
||||
}"
|
||||
>
|
||||
经验 +1
|
||||
</view>
|
||||
<view
|
||||
v-if="bluelatestOne"
|
||||
class="round-tip fade-in-out"
|
||||
:style="getRoundTipStyle(bluelatestOne)"
|
||||
:style="{
|
||||
left: calcRealX(bluelatestOne.ring ? bluelatestOne.x : 0, 28),
|
||||
top: calcRealY(bluelatestOne.ring ? bluelatestOne.y : 0, 28),
|
||||
}"
|
||||
>{{ bluelatestOne.ringX ? "X" : bluelatestOne.ring || "未上靶"
|
||||
}}<text v-if="bluelatestOne.ring">环</text></view
|
||||
>
|
||||
<block v-for="(bow, index) in scores" :key="index">
|
||||
<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' : ''
|
||||
}`"
|
||||
:style="{
|
||||
...getHitStyle(bow),
|
||||
left: calcRealX(bow.x, pMode ? '3.4' : '2'),
|
||||
top: calcRealY(bow.y, pMode ? '3.4' : '2'),
|
||||
backgroundColor: mode === 'solo' ? '#00bf04' : '#FF0000',
|
||||
}"
|
||||
><text v-if="pMode">{{ index + 1 }}</text></view
|
||||
>
|
||||
</block>
|
||||
<block v-for="(bow, index) in blueScores" :key="index">
|
||||
<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' : ''
|
||||
}`"
|
||||
:style="{
|
||||
...getHitStyle(bow),
|
||||
left: calcRealX(bow.x, pMode ? '3.4' : '2'),
|
||||
top: calcRealY(bow.y, pMode ? '3.4' : '2'),
|
||||
backgroundColor: '#1840FF',
|
||||
}"
|
||||
>
|
||||
<text v-if="pMode">{{ index + 1 }}</text>
|
||||
</view>
|
||||
</block>
|
||||
<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 +260,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;
|
||||
@@ -526,55 +292,31 @@ onBeforeUnmount(() => {
|
||||
font-size: 24px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
@keyframes target-tip-fade-in-out {
|
||||
0% {
|
||||
transform: translate(-50%, -50%) translateY(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: translate(-50%, -50%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translate(-50%, -50%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(-50%, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.round-tip.fade-in-out,
|
||||
.e-value.fade-in-out {
|
||||
animation: target-tip-fade-in-out 1.2s ease forwards;
|
||||
}
|
||||
.target > image:last-child {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.svip-hit-bg {
|
||||
position: absolute;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
transform-origin: center center;
|
||||
animation: svip-hit-xuan 1.2s linear infinite;
|
||||
}
|
||||
.hit {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
z-index: 2;
|
||||
z-index: 1;
|
||||
color: #fff;
|
||||
transition: transform 0.2s ease, opacity 0.2s ease;
|
||||
box-sizing: border-box;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.s-point {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
min-width: 4px;
|
||||
min-height: 4px;
|
||||
}
|
||||
.b-point {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
min-width: 10px;
|
||||
min-height: 10px;
|
||||
border: 1px solid #fff;
|
||||
z-index: 2;
|
||||
z-index: 1;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@@ -590,56 +332,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);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes target-shake {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
14% {
|
||||
transform: translate(-20rpx, 8rpx);
|
||||
}
|
||||
28% {
|
||||
transform: translate(16rpx, -8rpx);
|
||||
}
|
||||
44% {
|
||||
transform: translate(-12rpx, 6rpx);
|
||||
}
|
||||
64% {
|
||||
transform: translate(8rpx, -4rpx);
|
||||
}
|
||||
82% {
|
||||
transform: translate(-4rpx, 2rpx);
|
||||
}
|
||||
100% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
.hit.pump-in {
|
||||
animation: target-pump-in 0.3s ease-out forwards;
|
||||
transform-origin: center center;
|
||||
}
|
||||
.header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
@@ -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`"
|
||||
@@ -159,8 +142,8 @@ onBeforeUnmount(() => {
|
||||
</view>
|
||||
<block
|
||||
v-if="
|
||||
'-箭前准备-感知距离-小试牛刀'.indexOf(title) === -1 ||
|
||||
'-箭前准备-感知距离-小试牛刀'.indexOf(title) === 11
|
||||
'-凹造型-感知距离-小试牛刀'.indexOf(title) === -1 ||
|
||||
'-凹造型-感知距离-小试牛刀'.indexOf(title) === 10
|
||||
"
|
||||
>
|
||||
<text>{{ title }}</text>
|
||||
@@ -168,12 +151,12 @@ onBeforeUnmount(() => {
|
||||
<block
|
||||
v-if="
|
||||
title &&
|
||||
'-箭前准备-感知距离-小试牛刀'.indexOf(title) !== -1 &&
|
||||
'-箭前准备-感知距离-小试牛刀'.indexOf(title) !== 11
|
||||
'-凹造型-感知距离-小试牛刀'.indexOf(title) !== -1 &&
|
||||
'-凹造型-感知距离-小试牛刀'.indexOf(title) !== 10
|
||||
"
|
||||
>
|
||||
<view class="first-try-steps">
|
||||
<text :class="title === '-箭前准备' ? 'current-step' : ''">箭前准备</text>
|
||||
<text :class="title === '-凹造型' ? 'current-step' : ''">凹造型</text>
|
||||
<text>-</text>
|
||||
<text :class="title === '-感知距离' ? 'current-step' : ''"
|
||||
>感知距离</text
|
||||
@@ -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;
|
||||
|
||||
@@ -1,234 +0,0 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
cancelText: {
|
||||
type: String,
|
||||
default: "取消",
|
||||
},
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: "确定",
|
||||
},
|
||||
showCancel: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
showConfirm: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
onCancel: {
|
||||
type: Function,
|
||||
default: null,
|
||||
},
|
||||
onConfirm: {
|
||||
type: Function,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
const handleCancel = () => {
|
||||
props.onCancel?.();
|
||||
};
|
||||
|
||||
const handleConfirm = () => {
|
||||
props.onConfirm?.();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="modal-mask" :style="{ display: show ? 'flex' : 'none' }">
|
||||
<view class="modal-wrap scale-in">
|
||||
<image
|
||||
class="dialog-light"
|
||||
src="../static/common/dialog-light.png"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<image
|
||||
class="dialog-icon"
|
||||
src="../static/common/dialog-icon.png"
|
||||
mode="widthFix"
|
||||
/>
|
||||
|
||||
<view class="dialog-panel">
|
||||
<image
|
||||
class="dialog-bg"
|
||||
src="../static/common/dialog-bg.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view class="dialog-content">
|
||||
<slot>
|
||||
<text v-if="title" class="dialog-title">{{ title }}</text>
|
||||
<text v-if="content" class="dialog-text">{{ content }}</text>
|
||||
</slot>
|
||||
</view>
|
||||
|
||||
<view
|
||||
v-if="showCancel || showConfirm"
|
||||
class="dialog-actions"
|
||||
:class="{ single: !(showCancel && showConfirm) }"
|
||||
>
|
||||
<view
|
||||
v-if="showCancel"
|
||||
class="dialog-button cancel"
|
||||
@click="handleCancel"
|
||||
>
|
||||
<text>{{ cancelText }}</text>
|
||||
</view>
|
||||
<view
|
||||
v-if="showConfirm"
|
||||
class="dialog-button confirm"
|
||||
@click="handleConfirm"
|
||||
>
|
||||
<text>{{ confirmText }}</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.modal-mask {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgba(0, 0, 0, 0.62);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.modal-wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 549rpx;
|
||||
min-height: 318rpx;;
|
||||
padding-top: 168rpx;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dialog-light {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 520rpx;
|
||||
z-index: 1;
|
||||
transform-origin: center center;
|
||||
animation: rotateLight 8s linear infinite;
|
||||
}
|
||||
|
||||
.dialog-icon {
|
||||
position: absolute;
|
||||
top: 70rpx;
|
||||
left: 50%;
|
||||
width: 250rpx;
|
||||
z-index: 5;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.dialog-panel {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 318rpx;
|
||||
padding: 98rpx 36rpx 40rpx 36rpx;
|
||||
box-sizing: border-box;
|
||||
z-index: 3;
|
||||
border-radius: 24rpx;
|
||||
border: 2rpx solid rgba(249, 213, 161, 0.5);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dialog-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 24rpx;
|
||||
}
|
||||
|
||||
.dialog-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dialog-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.dialog-text {
|
||||
margin-top: 10rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.dialog-actions {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
margin-top: 50rpx;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.dialog-actions.single {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.dialog-button {
|
||||
display: flex;
|
||||
width: 232rpx;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
border-radius: 44rpx;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dialog-button.cancel {
|
||||
color: #fff;
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.dialog-button.confirm {
|
||||
color: #000000;
|
||||
background-color: #ffda3f;
|
||||
}
|
||||
|
||||
@keyframes rotateLight {
|
||||
from {
|
||||
transform: translateX(-50%) rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(-50%) rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
396
src/components/OtaModal.vue
Normal file
@@ -0,0 +1,396 @@
|
||||
<script setup>
|
||||
import { computed } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
state: {
|
||||
type: String,
|
||||
default: "new_version", // new_version | update_progress | update_success | update_failure
|
||||
},
|
||||
version: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
progress: {
|
||||
type: Number,
|
||||
default: 40,
|
||||
},
|
||||
// 副标题:如“新版本将优化智能弓体验”
|
||||
description: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
// 详细说明:如“升级前请确保:...”
|
||||
changelog: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
forceUpdate: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update", "skip", "close", "done", "retry"]);
|
||||
|
||||
const isNewVersion = computed(() => props.state === "new_version");
|
||||
const isProgress = computed(() => props.state === "update_progress");
|
||||
const isSuccess = computed(() => props.state === "update_success");
|
||||
const isFailure = computed(() => props.state === "update_failure");
|
||||
// Clamp progress to keep the progress bar width within its container.
|
||||
const progressValue = computed(() => Math.min(100, Math.max(0, Number(props.progress) || 0)));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view v-if="visible" class="ota-mask">
|
||||
<!-- 图标 + 弹窗卡片 容器 -->
|
||||
<view
|
||||
class="ota-outer"
|
||||
:class="isNewVersion ? 'outer-new' : 'outer-result'"
|
||||
>
|
||||
<!-- 悬浮图标(溢出卡片顶部) -->
|
||||
<image
|
||||
v-if="isNewVersion"
|
||||
src="../static/ota/ota-mascot.png"
|
||||
mode="aspectFit"
|
||||
class="float-icon float-mascot"
|
||||
/>
|
||||
<image
|
||||
v-else-if="isSuccess"
|
||||
src="../static/ota/check-char.png"
|
||||
mode="aspectFit"
|
||||
class="float-icon float-check"
|
||||
/>
|
||||
<image
|
||||
v-else-if="isFailure"
|
||||
src="../static/ota/close-char.png"
|
||||
mode="aspectFit"
|
||||
class="float-icon float-close"
|
||||
/>
|
||||
<image
|
||||
v-else-if="isProgress"
|
||||
src="../static/ota/target-char.png"
|
||||
mode="aspectFit"
|
||||
class="float-icon float-target"
|
||||
/>
|
||||
|
||||
<!-- 弹窗卡片:overflow:visible 允许按钮溢出底部,背景图通过 ota-bg-clip 独立裁剪保持圆角 -->
|
||||
<view class="ota-dialog">
|
||||
<view class="ota-bg-clip">
|
||||
<image src="../static/ota/ota-bg.png" mode="aspectFill" class="ota-bg" />
|
||||
</view>
|
||||
<view
|
||||
class="ota-content"
|
||||
:class="{ 'content-new': isNewVersion, 'content-result': isProgress || isSuccess || isFailure }"
|
||||
>
|
||||
|
||||
<!-- 发现新版本:new-ver.png 已包含标题图,不再重复文字;版本号使用 ota-ver.png 胶囊背景 -->
|
||||
<block v-if="isNewVersion">
|
||||
<image src="../static/ota/new-ver.png" mode="aspectFit" class="new-ver-img" />
|
||||
<view v-if="version" class="version-tag-wrap">
|
||||
<image src="../static/ota/ota-ver.png" mode="aspectFill" class="version-tag-bg-img" />
|
||||
<text class="version-tag">{{ version }}</text>
|
||||
</view>
|
||||
<!-- 副标题:如“新版本将优化智能弓体验”,离下方详情 12rpx -->
|
||||
<text v-if="description" class="desc-text">{{ description }}</text>
|
||||
<!-- 详细说明:如“升级前请确保:...” -->
|
||||
<text v-if="changelog" class="changelog-text">{{ changelog }}</text>
|
||||
<view class="btn-group">
|
||||
<view class="primary-btn" @click="emit('update')">
|
||||
<text class="primary-btn-text">立即更新</text>
|
||||
</view>
|
||||
<text v-if="!forceUpdate" class="skip-text" @click="emit('skip')">暂不更新</text>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- 更新成功:图片左边距 34rpx,文案左边距 44rpx,按钮浮动底部居中 -->
|
||||
<block v-else-if="isSuccess">
|
||||
<image src="../static/ota/update-ok.png" mode="aspectFit" class="result-title-img" style="width: 220rpx; height: 62rpx;" />
|
||||
<text class="dialog-desc">请关机并重启智能弓</text>
|
||||
<view class="btn-group-result">
|
||||
<view class="primary-btn" @click="emit('done')">
|
||||
<text class="primary-btn-text">完成</text>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- 更新中:复用成功标题图,正文区域展示进度条,无底部按钮 -->
|
||||
<block v-else-if="isProgress">
|
||||
<image src="../static/ota/update_progress.png" mode="aspectFit" class="result-title-img" style="width: 220rpx; height: 62rpx;" />
|
||||
<view class="progress-wrap">
|
||||
<view class="progress-track">
|
||||
<view class="progress-fill" :style="{ width: `${progressValue}%` }"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- 更新失败:图片左边距 34rpx,文案左对齐 44rpx,按钮浮动底部居中 -->
|
||||
<block v-else-if="isFailure">
|
||||
<image src="../static/ota/update-fail.png" mode="aspectFit" class="result-title-img" style="width: 222rpx; height: 62rpx;" />
|
||||
<text class="dialog-desc">请确保:</text>
|
||||
<text class="dialog-desc">1、智能弓已开启</text>
|
||||
<text class="dialog-desc">2、网路连接稳定</text>
|
||||
<view class="btn-group-result">
|
||||
<view class="primary-btn" @click="emit('retry')">
|
||||
<text class="primary-btn-text">重试</text>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 关闭按钮(仅新版本状态,非强制更新时,位于弹窗下方) -->
|
||||
<view
|
||||
v-if="isNewVersion && !forceUpdate"
|
||||
class="ota-close-below"
|
||||
@click="emit('close')"
|
||||
>
|
||||
<image src="../static/sicon/close.png" mode="aspectFit" style="width: 56rpx; height: 56rpx;" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.ota-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 外层容器:相对定位,为浮动图标创造溢出空间 */
|
||||
.ota-outer {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
}
|
||||
/* 设计图:吉祥物向上突出弹窗顶部 40px(375px基准)× 2 = 80rpx */
|
||||
.outer-new {
|
||||
padding-top: 80rpx;
|
||||
}
|
||||
.outer-result {
|
||||
padding-top: 80rpx;
|
||||
padding-bottom: 66rpx;
|
||||
}
|
||||
|
||||
/* 浮动图标(绝对定位,位于卡片顶部上方) */
|
||||
.float-icon {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
/* 吉祥物尺寸:设计图 149×109px(375px基准)× 2 = 298×218rpx */
|
||||
.float-mascot {
|
||||
width: 298rpx;
|
||||
height: 218rpx;
|
||||
top: -5px;
|
||||
right: -74rpx;
|
||||
}
|
||||
.float-check {
|
||||
width: 194rpx;
|
||||
height: 166rpx;
|
||||
top: 20px;
|
||||
right: 30rpx;
|
||||
}
|
||||
.float-close {
|
||||
width: 194rpx;
|
||||
height: 164rpx;
|
||||
top: 20px;
|
||||
right: 30rpx;
|
||||
}
|
||||
.float-target {
|
||||
width: 194rpx;
|
||||
height: 166rpx;
|
||||
top: 20px;
|
||||
right: 30rpx;
|
||||
}
|
||||
|
||||
/* 弹窗卡片:overflow:visible 允许按钮溢出底部,背景通过 ota-bg-clip 独立裁剪 */
|
||||
.ota-dialog {
|
||||
position: relative;
|
||||
width: 482rpx;
|
||||
border-radius: 24rpx;
|
||||
border: 2rpx solid #F9D5A1;
|
||||
overflow: visible;
|
||||
background-color: #392F1D;
|
||||
}
|
||||
/* 背景图裁剪层:独立 overflow:hidden + border-radius 保持圆角效果 */
|
||||
.ota-bg-clip {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 24rpx;
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
}
|
||||
.ota-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.ota-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* 按钮以外内容均左对齐 */
|
||||
align-items: flex-start;
|
||||
}
|
||||
.content-new {
|
||||
padding: 30rpx 0 40rpx 0;
|
||||
}
|
||||
.content-result {
|
||||
padding: 30rpx 0 66rpx 0;
|
||||
}
|
||||
|
||||
/* 发现新版本内容 */
|
||||
.new-ver-img {
|
||||
width: 274rpx;
|
||||
height: 62rpx;
|
||||
/* 左边距 34rpx,去掉 margin-bottom */
|
||||
margin-left: 34rpx;
|
||||
}
|
||||
/* 版本号胶囊容器:相对定位,使 ota-ver.png 作为背景衬底 */
|
||||
.version-tag-wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* 离标题图 -10rpx,左边距 50rpx,离下方副标题 22rpx */
|
||||
margin-top: -10rpx;
|
||||
margin-left: 50rpx;
|
||||
margin-bottom: 22rpx;
|
||||
}
|
||||
/* ota-ver.png 胶囊背景图 */
|
||||
.version-tag-bg-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/* 版本号文字:浮于背景图之上 */
|
||||
.version-tag {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
color: rgba(254, 222, 100, 1);
|
||||
font-size: 24rpx;
|
||||
padding: 8rpx 22rpx 4rpx 24rpx;
|
||||
}
|
||||
/* 副标题(如"新版本将优化智能弓体验"):左边距 44rpx,离下方文案 12rpx */
|
||||
.desc-text {
|
||||
font-weight: 500;
|
||||
font-size: 26rpx;
|
||||
color: #FFFFFF;
|
||||
line-height: 36rpx;
|
||||
text-align: left;
|
||||
margin-left: 44rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
/* 详细说明文案(如“升级前请确保:...”):左边距 44rpx */
|
||||
.changelog-text {
|
||||
font-weight: 400;
|
||||
font-size: 26rpx;
|
||||
color: #FFFFFF;
|
||||
line-height: 40rpx;
|
||||
text-align: left;
|
||||
margin-left: 44rpx;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* 按钮组(新版本状态):离上方文案 30rpx,内部按钮间距 24rpx */
|
||||
.btn-group {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 30rpx;
|
||||
gap: 24rpx;
|
||||
}
|
||||
/* 按钮组(结果状态):绝对定位,溢出卡片底边 -35rpx 悬浮在底边中间 */
|
||||
.btn-group-result {
|
||||
position: absolute;
|
||||
bottom: -35rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
/* 主按钮:按照设计规范 width: 232rpx, height: 70rpx */
|
||||
.primary-btn {
|
||||
width: 232rpx;
|
||||
height: 70rpx;
|
||||
background-color: #FED847;
|
||||
border-radius: 44rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.primary-btn-text {
|
||||
font-weight: 500;
|
||||
font-size: 26rpx;
|
||||
color: #000000;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
/* 暂不更新:设计规范颜色 #5FADFF 蓝色 */
|
||||
.skip-text {
|
||||
font-weight: 400;
|
||||
font-size: 26rpx;
|
||||
color: #5FADFF;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
/* 更新结果内容:图片左边距 34rpx,下边距 16rpx */
|
||||
.result-title-img {
|
||||
margin-left: 34rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
/* 结果页文案:左对齐,左边距 44rpx,与 new_version 保持一致 */
|
||||
.dialog-desc {
|
||||
font-weight: 400;
|
||||
font-size: 26rpx;
|
||||
color: #FFFFFF;
|
||||
line-height: 40rpx;
|
||||
text-align: left;
|
||||
margin-left: 44rpx;
|
||||
}
|
||||
.progress-wrap {
|
||||
width: 394rpx;
|
||||
margin-top: 40rpx;
|
||||
margin-left: 44rpx;
|
||||
}
|
||||
.progress-track {
|
||||
width: 100%;
|
||||
height: 18rpx;
|
||||
background-color: rgba(255, 255, 255, 0.28);
|
||||
border-radius: 999rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background-color: #FED847;
|
||||
border-radius: 999rpx;
|
||||
}
|
||||
|
||||
/* 关闭按钮(位于弹窗下方) */
|
||||
.ota-close-below {
|
||||
margin-top: 40rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@@ -15,14 +15,6 @@ 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" : "",
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -39,16 +31,7 @@ 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">
|
||||
@@ -113,13 +96,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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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";
|
||||
@@ -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) {
|
||||
@@ -152,7 +137,11 @@ const openPrivacyLink = () => {
|
||||
};
|
||||
|
||||
onShow(() => {
|
||||
resetForm();
|
||||
loading.value = false;
|
||||
agree.value = false;
|
||||
phone.value = "";
|
||||
avatarUrl.value = "";
|
||||
nickName.value = "";
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -198,11 +187,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>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { ref, watch } from "vue";
|
||||
import { ref } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
interval: {
|
||||
@@ -14,24 +14,13 @@ const props = defineProps({
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
current: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
onChange: {
|
||||
type: Function,
|
||||
default: (index) => {},
|
||||
},
|
||||
});
|
||||
|
||||
const currentIndex = ref(props.current);
|
||||
|
||||
watch(
|
||||
() => props.current,
|
||||
(index) => {
|
||||
currentIndex.value = index;
|
||||
}
|
||||
);
|
||||
const currentIndex = ref(0);
|
||||
|
||||
const handleChange = (e) => {
|
||||
currentIndex.value = e.detail.current;
|
||||
@@ -86,7 +75,7 @@ const handleChange = (e) => {
|
||||
|
||||
.dots {
|
||||
position: absolute;
|
||||
bottom: 2%;
|
||||
bottom: 5%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -64,7 +64,11 @@
|
||||
"usingComponents" : true,
|
||||
"darkmode" : true,
|
||||
"themeLocation" : "theme.json",
|
||||
"permission" : {},
|
||||
"permission" : {
|
||||
"scope.userLocation": {
|
||||
"desc": "用于扫描附近 WiFi,完成设备 OTA 升级网络连接"
|
||||
}
|
||||
},
|
||||
"requiredPrivateInfos" : [ "getLocation", "chooseLocation" ]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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,13 +112,19 @@
|
||||
"path": "pages/match-detail"
|
||||
},
|
||||
{
|
||||
"path": "pages/team-battle/team-bow-data"
|
||||
"path": "pages/team-bow-data"
|
||||
},
|
||||
{
|
||||
"path": "pages/melee-bow-data"
|
||||
},
|
||||
{
|
||||
"path": "pages/mine-bow-data"
|
||||
},
|
||||
{
|
||||
"path": "pages/ota-wifi",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
|
||||
258
src/pages/be-vip.vue
Normal 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>
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { computed, ref, onMounted, onBeforeUnmount } from "vue";
|
||||
import { ref, onMounted, onBeforeUnmount } from "vue";
|
||||
import Guide from "@/components/Guide.vue";
|
||||
import SButton from "@/components/SButton.vue";
|
||||
import Swiper from "@/components/Swiper.vue";
|
||||
@@ -18,8 +18,6 @@ import {
|
||||
startPractiseAPI,
|
||||
endPractiseAPI,
|
||||
getPractiseAPI,
|
||||
laserAimAPI,
|
||||
laserCloseAPI,
|
||||
} from "@/apis";
|
||||
import { sharePractiseData } from "@/canvas";
|
||||
import { wxShare, debounce } from "@/util";
|
||||
@@ -34,7 +32,6 @@ const total = 12;
|
||||
const stepButtonTexts = [
|
||||
"开始",
|
||||
"进入下一个任务",
|
||||
"我已校准",
|
||||
"进入下一个任务",
|
||||
"我准备好了,开始",
|
||||
"",
|
||||
@@ -46,11 +43,8 @@ const practiseResult = ref({});
|
||||
const btnDisabled = ref(false);
|
||||
const practiseId = ref("");
|
||||
const showGuide = ref(false);
|
||||
const laserActive = ref(false);
|
||||
const guideSwiperIndex = ref(0);
|
||||
|
||||
const guideImages = [
|
||||
"https://static.shelingxingqiu.com/shootmini/static/target.png",
|
||||
"https://static.shelingxingqiu.com/attachment/2026-02-08/dg9ev0wwdpgwt9e6du.png",
|
||||
"https://static.shelingxingqiu.com/attachment/2026-02-08/dg9ev0wvv9sw4zioqk.png",
|
||||
"https://static.shelingxingqiu.com/attachment/2026-02-08/dg9ev0ww3khaycallu.png",
|
||||
@@ -60,45 +54,10 @@ const guideImages = [
|
||||
"https://static.shelingxingqiu.com/attachment/2026-02-08/dg9ev0wwr6hfjhyfn5.png",
|
||||
];
|
||||
|
||||
const calibrationGuides = [
|
||||
{
|
||||
title: "箭头面向靶子",
|
||||
src: "https://static.shelingxingqiu.com/attachment/2025-10-30/ddv9p5fk5wscg7hrfo.png",
|
||||
},
|
||||
{
|
||||
title: "摆出拉弓姿势",
|
||||
src: "https://static.shelingxingqiu.com/attachment/2025-10-30/ddv9p5fk5b7ljrhx3o.png",
|
||||
},
|
||||
{
|
||||
title: "调整瞄准器",
|
||||
src: "https://static.shelingxingqiu.com/attachment/2025-10-29/dduexjgrcxf9wjaiv4.png",
|
||||
},
|
||||
];
|
||||
|
||||
const onSwiperIndexChange = (index) => {
|
||||
guideSwiperIndex.value = index;
|
||||
showGuide.value = index + 1 === guideImages.length;
|
||||
};
|
||||
|
||||
const isGuideLastImage = computed(
|
||||
() => guideSwiperIndex.value + 1 === guideImages.length
|
||||
);
|
||||
|
||||
const currentStepButtonText = computed(() => {
|
||||
if (step.value === 1 && isGuideLastImage.value) return "去校准智能弓";
|
||||
return stepButtonTexts[step.value];
|
||||
});
|
||||
|
||||
const openCalibrationLaser = async () => {
|
||||
if (laserActive.value) return;
|
||||
await laserAimAPI();
|
||||
laserActive.value = true;
|
||||
};
|
||||
|
||||
const closeCalibrationLaser = async () => {
|
||||
if (!laserActive.value) return;
|
||||
await laserCloseAPI();
|
||||
laserActive.value = false;
|
||||
if (index + 1 === guideImages.length) {
|
||||
showGuide.value = true;
|
||||
}
|
||||
};
|
||||
|
||||
const createPractise = async (arrows) => {
|
||||
@@ -116,7 +75,7 @@ async function onReceiveMessage(msg) {
|
||||
scores.value = msg.details;
|
||||
} else if (msg.type === MESSAGETYPESV2.BattleEnd) {
|
||||
setTimeout(onOver, 1500);
|
||||
} else if (msg.type === MESSAGETYPESV2.TestDistance && step.value === 3) {
|
||||
} else if (msg.type === MESSAGETYPESV2.TestDistance) {
|
||||
if (msg.shootData.distance / 100 >= 5) {
|
||||
audioManager.play("距离合格");
|
||||
btnDisabled.value = false;
|
||||
@@ -151,13 +110,12 @@ onMounted(() => {
|
||||
uni.$on("share-image", onClickShare);
|
||||
});
|
||||
|
||||
onBeforeUnmount(async () => {
|
||||
onBeforeUnmount(() => {
|
||||
uni.setKeepScreenOn({
|
||||
keepScreenOn: false,
|
||||
});
|
||||
uni.$off("socket-inbox", onReceiveMessage);
|
||||
uni.$off("share-image", onClickShare);
|
||||
await closeCalibrationLaser();
|
||||
audioManager.stopAll();
|
||||
endPractiseAPI();
|
||||
});
|
||||
@@ -165,39 +123,28 @@ onBeforeUnmount(async () => {
|
||||
const nextStep = async () => {
|
||||
if (step.value === 0) {
|
||||
step.value = 1;
|
||||
title.value = "-箭前准备";
|
||||
title.value = "-凹造型";
|
||||
} else if (step.value === 1) {
|
||||
if (!isGuideLastImage.value) {
|
||||
guideSwiperIndex.value += 1;
|
||||
showGuide.value = guideSwiperIndex.value + 1 === guideImages.length;
|
||||
return;
|
||||
}
|
||||
showGuide.value = false;
|
||||
step.value = 2;
|
||||
// title.value = "-校准智能弓";
|
||||
await openCalibrationLaser();
|
||||
} else if (step.value === 2) {
|
||||
await closeCalibrationLaser();
|
||||
showGuide.value = false;
|
||||
btnDisabled.value = true;
|
||||
step.value = 3;
|
||||
step.value = 2;
|
||||
title.value = "-感知距离";
|
||||
const result = await createPractiseAPI(total, 120);
|
||||
if (result) practiseId.value = result.id;
|
||||
} else if (step.value === 3) {
|
||||
} else if (step.value === 2) {
|
||||
showGuide.value = false;
|
||||
step.value = 4;
|
||||
step.value = 3;
|
||||
title.value = "-小试牛刀";
|
||||
} else if (step.value === 4) {
|
||||
} else if (step.value === 3) {
|
||||
title.value = "小试牛刀";
|
||||
await startPractiseAPI();
|
||||
scores.value = [];
|
||||
step.value = 5;
|
||||
step.value = 4;
|
||||
start.value = true;
|
||||
setTimeout(() => {
|
||||
uni.$emit("play-sound", "请开始射击");
|
||||
}, 300);
|
||||
} else if (step.value === 6) {
|
||||
} else if (step.value === 5) {
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
});
|
||||
@@ -212,13 +159,13 @@ const onClose = async () => {
|
||||
setTimeout(() => {
|
||||
practiseResult.value = {};
|
||||
showGuide.value = false;
|
||||
step.value = 6;
|
||||
step.value = 5;
|
||||
}, 500);
|
||||
} else {
|
||||
practiseResult.value = {};
|
||||
start.value = false;
|
||||
scores.value = [];
|
||||
step.value = 4;
|
||||
step.value = 3;
|
||||
const result = await createPractiseAPI(total, 120);
|
||||
if (result) practiseId.value = result.id;
|
||||
}
|
||||
@@ -226,14 +173,14 @@ const onClose = async () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Container :bgType="1" :title="title" :showBottom="step !== 5">
|
||||
<Container :bgType="1" :title="title" :showBottom="step !== 4">
|
||||
<view class="container">
|
||||
<Guide
|
||||
v-if="step !== 5"
|
||||
v-if="step !== 4"
|
||||
:type="
|
||||
step === 3
|
||||
step === 2
|
||||
? 2
|
||||
: step === 6 || (step === 0 && user.nickName.length > 6)
|
||||
: step === 5 || (step === 0 && user.nickName.length > 6)
|
||||
? 1
|
||||
: 0
|
||||
"
|
||||
@@ -249,28 +196,25 @@ const onClose = async () => {
|
||||
,这是新人必刷小任务,0基础小白也能快速掌握弓箭技巧和游戏规则哦~:)
|
||||
</text>
|
||||
<text v-if="step === 1" :style="{ fontSize: '28rpx' }"
|
||||
>这位就是人帅技高的高教练!接下来请跟随教练指引,做好射箭前期准备。</text
|
||||
>
|
||||
<text v-if="step === 2" :style="{ fontSize: '28rpx' }"
|
||||
>请按下方步骤完成智能弓校准,让瞄准器和靶子保持对齐。</text
|
||||
>这是我们人帅技高的高教练。首先,请按教练示范,尝试自己去做这些动作和手势吧。</text
|
||||
>
|
||||
<view
|
||||
class="guide-tips"
|
||||
:style="{ marginTop: '8rpx' }"
|
||||
v-if="step === 3"
|
||||
v-if="step === 2"
|
||||
>
|
||||
<text>你知道5米射程有多远吗?</text>
|
||||
<text>
|
||||
在我们的排位赛中,射程小于5米的成绩无效、哦!建议平时练习距离至少5米。现在,来边射箭边调整你的站位点吧!
|
||||
</text>
|
||||
</view>
|
||||
<view class="guide-tips" v-if="step === 4">
|
||||
<view class="guide-tips" v-if="step === 3">
|
||||
<text>一切准备就绪</text>
|
||||
<text :style="{ fontSize: '28rpx' }"
|
||||
>试着完成一个真正的弓箭手任务吧!</text
|
||||
>
|
||||
</view>
|
||||
<view class="guide-tips" v-if="step === 6">
|
||||
<view class="guide-tips" v-if="step === 5">
|
||||
<text>新手试炼场通关啦,优秀!</text>
|
||||
<text :style="{ fontSize: '28rpx' }"
|
||||
>反曲弓运动基本知识和射灵世界系统规则你已Get,是不是挺容易呀:)</text
|
||||
@@ -287,53 +231,35 @@ const onClose = async () => {
|
||||
src="https://static.shelingxingqiu.com/attachment/2025-11-17/deas80ef1sf9td0leq.png"
|
||||
class="try-tip"
|
||||
mode="widthFix"
|
||||
v-if="step === 4"
|
||||
v-if="step === 3"
|
||||
/>
|
||||
<image
|
||||
src="https://static.shelingxingqiu.com/attachment/2025-07-01/db0ehpz9lav58g5drl.png"
|
||||
class="try-tip"
|
||||
mode="widthFix"
|
||||
v-if="step === 6"
|
||||
v-if="step === 5"
|
||||
/>
|
||||
<view style="height: 570px" v-if="step === 1">
|
||||
<Swiper
|
||||
:current="guideSwiperIndex"
|
||||
:onChange="onSwiperIndexChange"
|
||||
:data="guideImages"
|
||||
/>
|
||||
<Swiper :onChange="onSwiperIndexChange" :data="guideImages" />
|
||||
</view>
|
||||
<view class="calibration-container" v-if="step === 2">
|
||||
<view
|
||||
v-for="(guide, index) in calibrationGuides"
|
||||
:key="guide.title"
|
||||
class="calibration-guide"
|
||||
>
|
||||
<view>
|
||||
<text>{{ index + 1 }}</text>
|
||||
<text>{{ guide.title }}</text>
|
||||
</view>
|
||||
<image :src="guide.src" mode="widthFix" />
|
||||
</view>
|
||||
<text>请完成以上步骤校准智能弓</text>
|
||||
</view>
|
||||
<ShootProgress v-if="step === 5" tips="请开始连续射箭" :start="start" />
|
||||
<TestDistance v-if="step === 3" :guide="false" />
|
||||
<ShootProgress v-if="step === 4" tips="请开始连续射箭" :start="start" />
|
||||
<TestDistance v-if="step === 2" :guide="false" />
|
||||
<view
|
||||
class="user-row"
|
||||
v-if="step === 5"
|
||||
:style="{ marginBottom: '0' }"
|
||||
v-if="step === 4"
|
||||
:style="{ marginBottom: step === 2 ? '40px' : '0' }"
|
||||
>
|
||||
<Avatar :src="user.avatar" :size="35" />
|
||||
<BowPower />
|
||||
</view>
|
||||
<BowTarget
|
||||
v-if="step === 5"
|
||||
:currentRound="step === 5 ? scores.length : 0"
|
||||
:totalRound="step === 5 ? total : 0"
|
||||
v-if="step === 4"
|
||||
:currentRound="step === 4 ? scores.length : 0"
|
||||
:totalRound="step === 4 ? total : 0"
|
||||
:scores="scores"
|
||||
/>
|
||||
<ScorePanel
|
||||
v-if="step === 5"
|
||||
v-if="step === 4"
|
||||
:total="total"
|
||||
:rowCount="6"
|
||||
:arrows="scores"
|
||||
@@ -361,7 +287,7 @@ const onClose = async () => {
|
||||
step === 1 ? "学会了,我摆得比教练还帅" : "我找到合适的点位了"
|
||||
}}</text>
|
||||
</BubbleTip>
|
||||
{{ currentStepButtonText }}
|
||||
{{ stepButtonTexts[step] }}
|
||||
</SButton>
|
||||
</template>
|
||||
</Container>
|
||||
@@ -375,43 +301,4 @@ const onClose = async () => {
|
||||
width: calc(100% - 20px);
|
||||
margin: 0 10px;
|
||||
}
|
||||
.calibration-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.calibration-guide {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: 26rpx;
|
||||
color: #ffffff;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
.calibration-guide > view {
|
||||
width: 100%;
|
||||
margin: 25rpx 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.calibration-guide > view > text:first-child {
|
||||
font-size: 24rpx;
|
||||
background: #e89024;
|
||||
border-radius: 50%;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
line-height: 32rpx;
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
.calibration-guide > image {
|
||||
width: 630rpx;
|
||||
height: 250rpx;
|
||||
}
|
||||
.calibration-container > text {
|
||||
font-size: 24rpx;
|
||||
color: #fff9;
|
||||
margin: 30rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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,
|
||||
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -6,6 +6,7 @@ import AppFooter from "@/components/AppFooter.vue";
|
||||
import UserHeader from "@/components/UserHeader.vue";
|
||||
import Signin from "@/components/Signin.vue";
|
||||
import BubbleTip from "@/components/BubbleTip.vue";
|
||||
import OtaModal from "@/components/OtaModal.vue";
|
||||
|
||||
import {
|
||||
checkUserBindAPI,
|
||||
@@ -36,6 +37,44 @@ const showModal = ref(false);
|
||||
const showGuide = ref(false);
|
||||
const scoreRankList = ref([]);
|
||||
|
||||
// OTA 相关
|
||||
const otaVisible = ref(false);
|
||||
const otaState = ref("new_version");
|
||||
const OTA_MOCK = {
|
||||
hasUpdate: true,
|
||||
version: "V8.7.0",
|
||||
description: "新版本将优化智能弓体验",
|
||||
details: "升级前请确保:\n1、智能弓已开启,且电量充足\n2、所处稳定的 Wi-Fi 环境中。",
|
||||
forceUpdate: false,
|
||||
};
|
||||
|
||||
const checkOtaUpdate = () => {
|
||||
if (!OTA_MOCK.hasUpdate) return;
|
||||
const dismissedAt = uni.getStorageSync("ota_dismissed_at");
|
||||
const now = Date.now();
|
||||
if (dismissedAt && now - dismissedAt < 24 * 60 * 60 * 1000) return;
|
||||
otaState.value = "new_version";
|
||||
otaVisible.value = true;
|
||||
};
|
||||
|
||||
const handleOtaDismiss = () => {
|
||||
uni.setStorageSync("ota_dismissed_at", Date.now());
|
||||
otaVisible.value = false;
|
||||
};
|
||||
|
||||
const handleOtaUpdate = () => {
|
||||
otaVisible.value = false;
|
||||
uni.navigateTo({ url: "/pages/ota-wifi" });
|
||||
};
|
||||
|
||||
const handleOtaDone = () => {
|
||||
otaVisible.value = false;
|
||||
};
|
||||
|
||||
const handleOtaRetry = () => {
|
||||
otaVisible.value = false;
|
||||
};
|
||||
|
||||
// 提取积分榜接口返回的榜单数组,兼容数组和对象两种返回格式。
|
||||
const getScoreRankData = (result) => {
|
||||
if (Array.isArray(result)) return result;
|
||||
@@ -63,7 +102,15 @@ const toRankListPage = () => {
|
||||
});
|
||||
};
|
||||
|
||||
onShow(async () => {
|
||||
onShow(async (options) => {
|
||||
// 检查是否从 OTA 更新页面返回
|
||||
if (options && options.updateResult) {
|
||||
otaState.value = options.updateResult;
|
||||
otaVisible.value = true;
|
||||
} else {
|
||||
checkOtaUpdate();
|
||||
}
|
||||
|
||||
const env = uni.getAccountInfoSync().miniProgram.envVersion;
|
||||
const token = uni.getStorageSync(`${env}_token`);
|
||||
|
||||
@@ -158,6 +205,20 @@ onShareTimeline(() => {
|
||||
|
||||
<template>
|
||||
<Container :isHome="true" :showBackToGame="true">
|
||||
<!-- OTA 升级弹窗:使用 visible 控制显隐,description 为副标题,changelog 为详细说明 -->
|
||||
<OtaModal
|
||||
:visible="otaVisible"
|
||||
:state="otaState"
|
||||
:version="OTA_MOCK.version"
|
||||
:description="OTA_MOCK.description"
|
||||
:changelog="OTA_MOCK.details"
|
||||
:forceUpdate="OTA_MOCK.forceUpdate"
|
||||
@update="handleOtaUpdate"
|
||||
@skip="handleOtaDismiss"
|
||||
@close="handleOtaDismiss"
|
||||
@done="handleOtaDone"
|
||||
@retry="handleOtaRetry"
|
||||
/>
|
||||
<view class="container">
|
||||
<view class="top-theme">
|
||||
<!-- <image
|
||||
|
||||
@@ -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({
|
||||
|
||||
@@ -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";
|
||||
@@ -35,11 +35,6 @@ const showOfflineModal = ref(false);
|
||||
/** 记录每位玩家当前半场连续 X 环数,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);
|
||||
|
||||
/**
|
||||
* 监听设备在线状态,大乱斗比赛进行中设备离线时弹窗提示用户
|
||||
*/
|
||||
@@ -249,7 +244,6 @@ onShow(async () => {
|
||||
"
|
||||
:totalRound="12"
|
||||
:scores="playersScores.map((r) => r[user.id]).flat()"
|
||||
:isSvip="isCurrentUserSvip"
|
||||
:stop="halfRest"
|
||||
/>
|
||||
<view :style="{ paddingBottom: '20px' }">
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
《 <text class="agreement__link">会员自动续费服务协议</text>》
|
||||
《 <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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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";
|
||||
@@ -21,8 +21,6 @@ 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 = () => {
|
||||
@@ -95,6 +93,11 @@ const unbindDevice = async () => {
|
||||
device.value = {};
|
||||
};
|
||||
|
||||
/** 连接wifi跳转到wifi列表页面 */
|
||||
const joinWifi = () => {
|
||||
uni.navigateTo({ url: "/pages/ota-wifi" });
|
||||
};
|
||||
|
||||
const toDeviceIntroPage = () => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/device-intro",
|
||||
@@ -211,49 +214,36 @@ 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"> -->
|
||||
<block v-if="calibration">
|
||||
<SButton :onClick="toFristTryPage" width="60vw" :rounded="40"
|
||||
>进入新手试炼</SButton
|
||||
>
|
||||
<view :style="{ marginTop: '15px' }">
|
||||
<SButton
|
||||
:onClick="backToHome"
|
||||
backgroundColor="#fff3"
|
||||
color="#fff"
|
||||
width="60vw"
|
||||
:rounded="40"
|
||||
>返回首页</SButton
|
||||
>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view>
|
||||
<text>恭喜,你的弓箭和账号已成功绑定!</text>
|
||||
<text :style="{ color: '#fed847' }">已赠送6个月射灵世界会员</text>
|
||||
</view>
|
||||
<!-- <SButton :onClick="goCalibration" width="60vw" :rounded="40">
|
||||
<SButton :onClick="goCalibration" width="60vw" :rounded="40">
|
||||
开启智能弓进行校准
|
||||
</SButton>
|
||||
<text :style="{ marginTop: '20rpx', fontSize: '24rpx', color: '#fff9' }"
|
||||
>校准时弓箭激光将开启,请勿直视激光</text
|
||||
> -->
|
||||
|
||||
<view>
|
||||
<SButton
|
||||
:onClick="backToHome"
|
||||
backgroundColor="#fff3"
|
||||
color="#fff"
|
||||
width="60vw"
|
||||
:rounded="40"
|
||||
>返回首页</SButton
|
||||
>
|
||||
</view>
|
||||
<view :style="{ marginTop: '15px' }">
|
||||
<SButton :onClick="toFristTryPage" width="60vw" :rounded="40">进入新手试炼</SButton>
|
||||
</view>
|
||||
<!-- </block> -->
|
||||
<!-- <block v-else>
|
||||
|
||||
</block> -->
|
||||
>
|
||||
</block>
|
||||
</view>
|
||||
<view v-if="device.deviceId && !justBind" class="has-device">
|
||||
<view class="device-binded">
|
||||
@@ -280,18 +270,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' }">
|
||||
@@ -299,6 +278,11 @@ onShow(() => {
|
||||
>解绑</SButton
|
||||
>
|
||||
</view>
|
||||
<view :style="{ marginTop: '20rpx' }">
|
||||
<SButton :onClick="() => $clickSound(joinWifi)" width="80vw" :rounded="40"
|
||||
>设备连接WIFI</SButton
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</Container>
|
||||
</template>
|
||||
@@ -420,7 +404,7 @@ onShow(() => {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
margin-bottom: 5px;
|
||||
border-radius: 12px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.device-binded > view > text {
|
||||
width: 120px;
|
||||
@@ -429,15 +413,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;
|
||||
|
||||
@@ -61,18 +61,6 @@ const goPay = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
const copyOrderId = (orderId) => {
|
||||
uni.setClipboardData({
|
||||
data: String(orderId),
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: "复制成功",
|
||||
icon: "success",
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const cancelOrder = async () => {
|
||||
const result = await cancelOrderListAPI(data.value.orderId);
|
||||
data.value = result;
|
||||
@@ -90,13 +78,8 @@ const cancelOrder = async () => {
|
||||
>
|
||||
<view class="order">
|
||||
<view>
|
||||
<text>{{ data.vipName }}</text>
|
||||
<view class="order-number">
|
||||
<text>订单号:{{ data.orderId }}</text>
|
||||
<text class="copy-action" @click.stop="copyOrderId(data.orderId)"
|
||||
>复制</text
|
||||
>
|
||||
</view>
|
||||
<text>商品名:{{ data.vipName }}</text>
|
||||
<text>订单号:{{ data.orderId }}</text>
|
||||
<text>下单时间:{{ data.vipCreateAt }}</text>
|
||||
<text
|
||||
>支付时间:{{
|
||||
@@ -158,25 +141,4 @@ const cancelOrder = async () => {
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.order-number {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #666666;
|
||||
font-size: 26rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.order-number > text:first-child {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
word-break: break-all;
|
||||
}
|
||||
.copy-action {
|
||||
flex-shrink: 0;
|
||||
margin-left: 16rpx;
|
||||
padding: 2rpx 14rpx;
|
||||
color: #1f6ed4;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -3,7 +3,6 @@ import { ref, onMounted } from "vue";
|
||||
import { onShow } from "@dcloudio/uni-app";
|
||||
import Container from "@/components/Container.vue";
|
||||
import ScrollList from "@/components/ScrollList.vue";
|
||||
import ModalDialog from "@/components/ModalDialog.vue";
|
||||
import { getOrderListAPI } from "@/apis";
|
||||
import useStore from "@/store";
|
||||
import { orderStatusNames, getStatusColor } from "@/constants";
|
||||
@@ -11,34 +10,13 @@ import { storeToRefs } from "pinia";
|
||||
const store = useStore();
|
||||
const { user, config } = storeToRefs(store);
|
||||
|
||||
const autoRenewDialogVisible = ref(false);
|
||||
const selectedRenewOrder = ref(null);
|
||||
|
||||
const toDetailPage = (detail) => {
|
||||
uni.setStorageSync("order", detail);
|
||||
uni.navigateTo({
|
||||
url: "/pages/member/order-detail",
|
||||
url: `/pages/order-detail`,
|
||||
});
|
||||
};
|
||||
|
||||
const openAutoRenewDialog = (detail) => {
|
||||
selectedRenewOrder.value = detail;
|
||||
autoRenewDialogVisible.value = true;
|
||||
};
|
||||
|
||||
const closeAutoRenewDialog = () => {
|
||||
autoRenewDialogVisible.value = false;
|
||||
selectedRenewOrder.value = null;
|
||||
};
|
||||
|
||||
const confirmAutoRenewDialog = () => {
|
||||
autoRenewDialogVisible.value = false;
|
||||
uni.showToast({
|
||||
title: "功能实现中",
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
|
||||
const list = ref([]);
|
||||
|
||||
const onLoading = async (page) => {
|
||||
@@ -66,7 +44,7 @@ onShow(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Container title="订单管理">
|
||||
<Container title="订单">
|
||||
<view class="container">
|
||||
<ScrollList :onLoading="onLoading">
|
||||
<view
|
||||
@@ -80,31 +58,18 @@ onShow(() => {
|
||||
>{{ orderStatusNames[item.orderStatus] }}</view
|
||||
>
|
||||
<text>{{ item.vipName }}</text>
|
||||
<text>订单号:{{ item.orderId }}</text>
|
||||
<text>创建时间:{{ item.orderCreateAt }}</text>
|
||||
<!-- <text
|
||||
<!-- <text>订单号:{{ item.orderId }}</text> -->
|
||||
<!-- <text>创建时间:{{ item.vipCreateAt }}</text> -->
|
||||
<text
|
||||
>支付时间:{{
|
||||
item.orderStatus === 4 ? item.paymentTime : ""
|
||||
}}</text
|
||||
> -->
|
||||
>
|
||||
<text>金额:{{ item.total }} 元</text>
|
||||
<!-- <text>支付方式:微信</text> -->
|
||||
<!-- <text class="renew-action" @click.stop="openAutoRenewDialog(item)">
|
||||
自动续费
|
||||
</text> -->
|
||||
<text>支付方式:微信</text>
|
||||
</view>
|
||||
</ScrollList>
|
||||
</view>
|
||||
|
||||
<ModalDialog
|
||||
:show="autoRenewDialogVisible"
|
||||
title=""
|
||||
:content="'确定关闭自动续费吗?\n会员到期后你将失去7项特权哦!'"
|
||||
cancel-text="一意孤行"
|
||||
confirm-text="继续享受"
|
||||
:on-cancel="closeAutoRenewDialog"
|
||||
:on-confirm="confirmAutoRenewDialog"
|
||||
/>
|
||||
</Container>
|
||||
</template>
|
||||
|
||||
@@ -113,15 +78,15 @@ onShow(() => {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #f5f5f5;
|
||||
padding-top: 16rpx;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.order-item {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
margin-bottom: 16rpx;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 28rpx 30rpx 18rpx 30rpx;
|
||||
padding: 15px;
|
||||
}
|
||||
.order-item > view:first-child {
|
||||
position: absolute;
|
||||
@@ -133,20 +98,12 @@ onShow(() => {
|
||||
font-size: 11px;
|
||||
}
|
||||
.order-item > text:nth-child(2) {
|
||||
color: #333333;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
font-size: 16px;
|
||||
}
|
||||
.order-item > text {
|
||||
color: #666666;
|
||||
font-size: 26rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.order-item > .renew-action {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
bottom: 18rpx;
|
||||
color: #1f6ed4;
|
||||
margin-bottom: 0;
|
||||
font-size: 13px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
</style>
|
||||
979
src/pages/ota-wifi.vue
Normal file
@@ -0,0 +1,979 @@
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted } from "vue";
|
||||
import { onShow } from "@dcloudio/uni-app";
|
||||
import Container from "@/components/Container.vue";
|
||||
import ScreenHint from "@/components/ScreenHint.vue";
|
||||
|
||||
const STATES = {
|
||||
SCANNING: "SCANNING",
|
||||
LIST: "LIST",
|
||||
CONNECTING: "CONNECTING",
|
||||
CONNECTED: "CONNECTED",
|
||||
UPDATING: "UPDATING",
|
||||
DONE: "DONE",
|
||||
FAILED: "FAILED",
|
||||
};
|
||||
|
||||
const isIOS = uni.getDeviceInfo().osName === "ios";
|
||||
const currentState = ref(STATES.SCANNING);
|
||||
const connectedWifi = ref(null);
|
||||
const wifiList = ref([]);
|
||||
const showWifiBanner = ref(false);
|
||||
|
||||
const connectingWifi = ref(null);
|
||||
const connectInput = ref({ ssid: "", password: "" });
|
||||
const connectMode = ref("secure"); // secure | open | manual
|
||||
const connectError = ref("");
|
||||
const keyboardHeight = ref(0);
|
||||
// 控制密码输入框是否显示明文
|
||||
const showPassword = ref(false);
|
||||
// 刷新防抖标志:扫描进行中为 true,禁止重复点击;扫描结束(成功/失败)后重置为 false。
|
||||
const isRefreshing = ref(false);
|
||||
|
||||
const progress = ref(0);
|
||||
let progressTimer = null;
|
||||
let timeoutTimer = null;
|
||||
// 控制授权拒绝弹窗显示/隐藏
|
||||
const wifiAuthDeniedVisible = ref(false);
|
||||
|
||||
// 判断 WiFi 列表失败是否由用户拒绝授权引起(兼容 errno:103 及各平台 errMsg 变体)。
|
||||
const isWifiPermissionDenied = (err) => {
|
||||
if (err?.errno === 103) return true;
|
||||
const errMsg = err?.errMsg || "";
|
||||
return /auth den|authorize|permission denied|user denied|scope\.userLocation/i.test(errMsg);
|
||||
};
|
||||
|
||||
// 显示授权拒绝弹窗,通过 ScreenHint 组件呈现。
|
||||
const showWifiPermissionDeniedModal = () => {
|
||||
wifiAuthDeniedVisible.value = true;
|
||||
};
|
||||
|
||||
// 用户点击「重新授权」时,打开小程序权限设置页,引导用户开启位置权限后重新扫描。
|
||||
const handleReauthorize = () => {
|
||||
wifiAuthDeniedVisible.value = false;
|
||||
uni.openSetting({
|
||||
success(res) {
|
||||
// 若用户在设置页开启了位置权限,则重新启动 WiFi 扫描
|
||||
if (res.authSetting["scope.userLocation"]) {
|
||||
startScanning();
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// 将 iOS 当前手机连接的 WiFi 写入候选列表,供用户继续填写设备连接密码;扫描结束后重置刷新防抖标志。
|
||||
const applyIOSConnectedWifi = (wifi) => {
|
||||
const ssid = wifi?.SSID;
|
||||
if (!ssid) {
|
||||
wifiList.value = [];
|
||||
currentState.value = STATES.LIST;
|
||||
isRefreshing.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
wifiList.value = [
|
||||
{
|
||||
...wifi,
|
||||
SSID: ssid,
|
||||
secure: wifi.secure !== false,
|
||||
fromCurrentWifi: true,
|
||||
},
|
||||
];
|
||||
currentState.value = STATES.LIST;
|
||||
isRefreshing.value = false;
|
||||
};
|
||||
|
||||
// 获取 iOS 当前手机连接的 WiFi,并把它作为可选网络展示。
|
||||
const syncIOSConnectedWifi = () => {
|
||||
wx.getConnectedWifi({
|
||||
success(res) {
|
||||
console.log("[OTA WiFi] wx.getConnectedWifi success:", res);
|
||||
applyIOSConnectedWifi(res.wifi || res);
|
||||
},
|
||||
fail(err) {
|
||||
console.warn("[OTA WiFi] wx.getConnectedWifi fail:", {
|
||||
errCode: err?.errCode,
|
||||
errMsg: err?.errMsg,
|
||||
err,
|
||||
});
|
||||
wifiList.value = [];
|
||||
currentState.value = STATES.LIST;
|
||||
isRefreshing.value = false;
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// 启动 iOS WiFi 能力;iOS 只用当前手机连接的 WiFi 作为候选网络。
|
||||
const startIOSScanning = () => {
|
||||
wx.startWifi({
|
||||
success(res) {
|
||||
console.log("[OTA WiFi] wx.startWifi success:", res);
|
||||
syncIOSConnectedWifi();
|
||||
},
|
||||
fail(err) {
|
||||
console.error("[OTA WiFi] wx.startWifi fail:", {
|
||||
errCode: err?.errCode,
|
||||
errMsg: err?.errMsg,
|
||||
err,
|
||||
});
|
||||
if (err.errCode === 12005) showWifiBanner.value = true;
|
||||
currentState.value = STATES.LIST;
|
||||
isRefreshing.value = false;
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// 启动小程序 WiFi 能力并按平台获取可用网络;也作为刷新按钮的点击处理器,重新获取最新 WiFi 列表。
|
||||
// 扫描进行中时防抖:若上次扫描尚未完成则直接 return,避免重复触发导致弹窗异常。
|
||||
const startScanning = () => {
|
||||
if (isRefreshing.value) return;
|
||||
isRefreshing.value = true;
|
||||
currentState.value = STATES.SCANNING;
|
||||
wifiList.value = [];
|
||||
showWifiBanner.value = false;
|
||||
connectError.value = "";
|
||||
|
||||
if (isIOS) {
|
||||
startIOSScanning();
|
||||
return;
|
||||
}
|
||||
|
||||
wx.startWifi({
|
||||
success(res) {
|
||||
console.log("[OTA WiFi] wx.startWifi success:", res);
|
||||
wx.getWifiList({
|
||||
success(res) {
|
||||
console.log("[OTA WiFi] wx.getWifiList request success:", res);
|
||||
},
|
||||
fail(err) {
|
||||
console.error("[OTA WiFi] wx.getWifiList fail:", {
|
||||
errCode: err?.errCode,
|
||||
errMsg: err?.errMsg,
|
||||
err,
|
||||
});
|
||||
if (isWifiPermissionDenied(err)) showWifiPermissionDeniedModal();
|
||||
if (err.errCode === 12005) showWifiBanner.value = true;
|
||||
isRefreshing.value = false;
|
||||
},
|
||||
});
|
||||
},
|
||||
fail(err) {
|
||||
console.error("[OTA WiFi] wx.startWifi fail:", {
|
||||
errCode: err?.errCode,
|
||||
errMsg: err?.errMsg,
|
||||
err,
|
||||
});
|
||||
if (isWifiPermissionDenied(err)) showWifiPermissionDeniedModal();
|
||||
if (err.errCode === 12005) showWifiBanner.value = true;
|
||||
isRefreshing.value = false;
|
||||
},
|
||||
});
|
||||
|
||||
wx.onGetWifiList((res) => {
|
||||
const realWifiList = res.wifiList || [];
|
||||
if (realWifiList.length) {
|
||||
console.log("[OTA WiFi] wx.onGetWifiList received wifiList:", realWifiList);
|
||||
} else {
|
||||
console.warn("[OTA WiFi] wx.onGetWifiList received empty wifiList:", res);
|
||||
}
|
||||
wifiList.value = realWifiList;
|
||||
currentState.value = STATES.LIST;
|
||||
isRefreshing.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
const selectWifi = (wifi) => {
|
||||
connectingWifi.value = wifi;
|
||||
connectInput.value = { ssid: wifi.SSID, password: "" };
|
||||
connectMode.value = wifi.secure ? "secure" : "open";
|
||||
connectError.value = "";
|
||||
currentState.value = STATES.CONNECTING;
|
||||
};
|
||||
|
||||
const selectOther = () => {
|
||||
connectingWifi.value = null;
|
||||
connectInput.value = { ssid: "", password: "" };
|
||||
connectMode.value = "manual";
|
||||
connectError.value = "";
|
||||
currentState.value = STATES.CONNECTING;
|
||||
};
|
||||
|
||||
const closeConnectSheet = () => {
|
||||
connectError.value = "";
|
||||
currentState.value = connectedWifi.value ? STATES.CONNECTED : STATES.LIST;
|
||||
};
|
||||
|
||||
const hasChinese = (str) => /[\u4e00-\u9fa5]/.test(str);
|
||||
|
||||
const ssidWarning = computed(() => {
|
||||
if (connectMode.value === "manual" && hasChinese(connectInput.value.ssid)) {
|
||||
return "网络名称仅支持英文字符及数字,请连接英文名网络或把网络改为英文";
|
||||
}
|
||||
return "";
|
||||
});
|
||||
|
||||
const joinDisabled = computed(() => {
|
||||
if (connectMode.value === "secure") return !connectInput.value.password;
|
||||
if (connectMode.value === "manual") return !connectInput.value.ssid;
|
||||
return false;
|
||||
});
|
||||
|
||||
// 按当前页面状态限制 WiFi 列表高度,避免列表撑开整页。
|
||||
const wifiListScrollHeight = computed(() => {
|
||||
if (currentState.value === STATES.SCANNING) return "auto";
|
||||
const itemCount = wifiList.value.length + 1;
|
||||
const maxHeight = currentState.value === STATES.CONNECTED ? 276 : 420;
|
||||
return `${Math.min(itemCount * 92, maxHeight)}rpx`;
|
||||
});
|
||||
|
||||
// 提交 WiFi 配置给游戏设备;后端接口未接入前只提示占位信息并停留在弹窗。
|
||||
const submitDeviceWifiConfig = ({ ssid, password }) => {
|
||||
console.log("[OTA WiFi] submit device wifi config pending:", {
|
||||
ssid,
|
||||
hasPassword: !!password,
|
||||
});
|
||||
connectError.value = "设备连接接口待接入";
|
||||
uni.showToast({
|
||||
title: "设备连接接口待接入",
|
||||
icon: "none",
|
||||
});
|
||||
};
|
||||
|
||||
// 校验用户输入并提交 WiFi 配置,不再把手机连接结果当作设备连接成功。
|
||||
const joinNetwork = () => {
|
||||
if (joinDisabled.value) return;
|
||||
connectError.value = "";
|
||||
const ssid = connectInput.value.ssid;
|
||||
const password = connectInput.value.password;
|
||||
|
||||
submitDeviceWifiConfig({ ssid, password });
|
||||
};
|
||||
|
||||
const startUpdate = () => {
|
||||
currentState.value = STATES.UPDATING;
|
||||
progress.value = 0;
|
||||
clearInterval(progressTimer);
|
||||
progressTimer = setInterval(() => {
|
||||
if (progress.value >= 90) {
|
||||
clearInterval(progressTimer);
|
||||
return;
|
||||
}
|
||||
const increment = Math.max(0.5, 2 - progress.value / 60);
|
||||
progress.value = Math.min(90, progress.value + increment);
|
||||
}, 500);
|
||||
clearTimeout(timeoutTimer);
|
||||
timeoutTimer = setTimeout(() => {
|
||||
if (currentState.value === STATES.UPDATING) {
|
||||
clearInterval(progressTimer);
|
||||
currentState.value = STATES.FAILED;
|
||||
}
|
||||
}, 5 * 60 * 1000);
|
||||
};
|
||||
|
||||
const handleWsDone = () => {
|
||||
clearInterval(progressTimer);
|
||||
clearTimeout(timeoutTimer);
|
||||
progress.value = 100;
|
||||
setTimeout(() => {
|
||||
currentState.value = STATES.DONE;
|
||||
}, 300);
|
||||
};
|
||||
|
||||
const handleWsFail = () => {
|
||||
clearInterval(progressTimer);
|
||||
clearTimeout(timeoutTimer);
|
||||
currentState.value = STATES.FAILED;
|
||||
};
|
||||
|
||||
const handleDone = () => {
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
success() {
|
||||
const pages = getCurrentPages();
|
||||
const prevPage = pages[pages.length - 2];
|
||||
if (prevPage) {
|
||||
prevPage.$vm.otaState = "update_success";
|
||||
prevPage.$vm.otaVisible = true;
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleRetry = () => {
|
||||
if (connectedWifi.value) {
|
||||
currentState.value = STATES.CONNECTED;
|
||||
} else {
|
||||
startScanning();
|
||||
}
|
||||
};
|
||||
|
||||
// 监听系统输入法高度,用于让底部弹窗避开键盘遮挡。
|
||||
const handleKeyboardHeightChange = (res) => {
|
||||
keyboardHeight.value = res?.height || 0;
|
||||
};
|
||||
|
||||
// 切换密码显示状态前先收起键盘,避免安全键盘和普通输入法切换时复用旧高度产生黑条。
|
||||
const togglePasswordVisibility = () => {
|
||||
uni.hideKeyboard({
|
||||
complete() {
|
||||
keyboardHeight.value = 0;
|
||||
showPassword.value = !showPassword.value;
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// 页面挂载后启动 WiFi 扫描流程。
|
||||
onMounted(() => {
|
||||
if (typeof uni.onKeyboardHeightChange === "function") {
|
||||
uni.onKeyboardHeightChange(handleKeyboardHeightChange);
|
||||
}
|
||||
startScanning();
|
||||
});
|
||||
|
||||
// iOS 从系统 WiFi 设置返回小程序后,同步当前手机连接的 WiFi。
|
||||
onShow(() => {
|
||||
if (isIOS && currentState.value === STATES.LIST) {
|
||||
syncIOSConnectedWifi();
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (typeof uni.offKeyboardHeightChange === "function") {
|
||||
uni.offKeyboardHeightChange(handleKeyboardHeightChange);
|
||||
}
|
||||
clearInterval(progressTimer);
|
||||
clearTimeout(timeoutTimer);
|
||||
wx.offGetWifiList && wx.offGetWifiList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Container title="连接无线网络">
|
||||
<!-- WiFi 不可用 Banner -->
|
||||
<view v-if="showWifiBanner" class="wifi-banner">
|
||||
<text class="wifi-banner-text">请先开启 WiFi 后刷新重试</text>
|
||||
</view>
|
||||
|
||||
<!-- SCANNING / LIST / CONNECTED -->
|
||||
<view
|
||||
v-if="currentState === 'SCANNING' || currentState === 'LIST' || currentState === 'CONNECTED'"
|
||||
class="wifi-page"
|
||||
>
|
||||
<!-- Hero: wifi1.png 单图(已内含吉祥物) -->
|
||||
<view class="hero-area">
|
||||
<image src="../static/ota/wifi1.png" mode="aspectFit" style="width: 194rpx; height: 164rpx;" />
|
||||
</view>
|
||||
|
||||
<text class="page-title" :class="{ 'connected-page-title': currentState === 'CONNECTED' }">
|
||||
{{ currentState === 'CONNECTED' ? '连接成功' : '连接无线网络' }}
|
||||
</text>
|
||||
<text v-if="currentState !== 'CONNECTED'" class="page-subtitle">网络名称仅支持英文字符及数字</text>
|
||||
|
||||
<view v-if="isIOS && currentState !== 'CONNECTED'" class="ios-guide">
|
||||
<text class="ios-guide-text">请先在系统 WiFi 设置中连接目标网络,返回后选择当前 WiFi 并填写密码</text>
|
||||
</view>
|
||||
|
||||
<!-- 已连接网络卡片 -->
|
||||
<view v-if="currentState === 'CONNECTED'" class="section-label-row connected-section-label-row">
|
||||
<text class="section-label">连接网络</text>
|
||||
</view>
|
||||
<view v-if="currentState === 'CONNECTED'" class="wifi-list-card connected-wifi-card">
|
||||
<view class="wifi-item connected-wifi-item">
|
||||
<image class="check-icon" src="../static/sicon/check.png" mode="aspectFit" />
|
||||
<text class="wifi-ssid connected-wifi-ssid">{{ connectedWifi?.SSID }}</text>
|
||||
<view class="wifi-icons connected-wifi-icons">
|
||||
<image
|
||||
v-if="connectedWifi?.secure"
|
||||
class="security-icon"
|
||||
src="../static/sicon/pwd.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<image class="signal-icon" src="../static/sicon/wifi.png" mode="aspectFit" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 网络列表标题 -->
|
||||
<view class="section-label-row">
|
||||
<text class="section-label">网络</text>
|
||||
<image
|
||||
src="../static/sicon/refresh.png"
|
||||
mode="aspectFit"
|
||||
:style="{ width: '34rpx', height: '34rpx', marginLeft: '8rpx', opacity: isRefreshing ? 0.3 : 0.7 }"
|
||||
@click="startScanning"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 网络列表卡片 -->
|
||||
<scroll-view
|
||||
scroll-y
|
||||
class="wifi-list-card"
|
||||
:class="{ 'wifi-list-scroll': currentState !== 'SCANNING' }"
|
||||
:style="{ height: wifiListScrollHeight }"
|
||||
>
|
||||
<block v-if="currentState === 'SCANNING'">
|
||||
<view class="wifi-item" @click="selectOther">
|
||||
<text class="wifi-ssid other-text">其他...</text>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view
|
||||
v-for="(wifi, idx) in wifiList"
|
||||
:key="wifi.SSID"
|
||||
class="wifi-item"
|
||||
@click="selectWifi(wifi)"
|
||||
>
|
||||
<text class="wifi-ssid">{{ wifi.SSID }}</text>
|
||||
<view class="wifi-icons">
|
||||
<image
|
||||
v-if="wifi.secure"
|
||||
class="security-icon"
|
||||
src="../static/sicon/pwd.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<image class="signal-icon" src="../static/sicon/wifi.png" mode="aspectFit" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="wifi-item" @click="selectOther">
|
||||
<text class="wifi-ssid other-text">其他...</text>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
|
||||
<!-- CONNECTED:开始更新按钮 -->
|
||||
<view v-if="currentState === 'CONNECTED'" class="bottom-btn-area connected-bottom-btn-area">
|
||||
<view class="primary-btn update-btn" @click="startUpdate">
|
||||
<text class="primary-btn-text">开始更新</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- UPDATING -->
|
||||
<view v-else-if="currentState === 'UPDATING'" class="center-page">
|
||||
<image src="../static/ota/target-char.png" mode="aspectFit" style="width: 194rpx; height: 164rpx;" />
|
||||
<text class="page-title" style="margin-top: 24rpx;">更新中,请稍等片刻...</text>
|
||||
<view class="progress-wrap">
|
||||
<view class="progress-track">
|
||||
<view class="progress-fill" :style="{ width: progress + '%' }"></view>
|
||||
</view>
|
||||
<text class="progress-pct">{{ Math.floor(progress) }}%</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- DONE -->
|
||||
<view v-else-if="currentState === 'DONE'" class="center-page">
|
||||
<image src="../static/ota/check-char.png" mode="aspectFit" style="width: 194rpx; height: 166rpx;" />
|
||||
<text class="page-title" style="margin-top: 24rpx;">更新完成</text>
|
||||
<text class="page-desc-white">请关机并重启智能弓</text>
|
||||
<view class="primary-btn done-btn" style="margin-top:20px" @click="handleDone">
|
||||
<text class="primary-btn-text">完成</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- FAILED -->
|
||||
<view v-else-if="currentState === 'FAILED'" class="center-page">
|
||||
<image src="../static/ota/close-char.png" mode="aspectFit" style="width: 194rpx; height: 164rpx;" />
|
||||
<text class="page-title fail-title" style="margin-top: 24rpx;">更新失败</text>
|
||||
<text class="page-desc-white">请确保:</text>
|
||||
<text class="page-desc-white">1、智能弓已开启</text>
|
||||
<text class="page-desc-white">2、网路连接稳定</text>
|
||||
<view class="primary-btn done-btn" style="margin-top: 40rpx;" @click="handleRetry">
|
||||
<text class="primary-btn-text">重试</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- CONNECTING 底部弹窗 -->
|
||||
<view v-if="currentState === 'CONNECTING'" class="sheet-mask">
|
||||
<view class="sheet" :style="{ marginBottom: keyboardHeight + 'px' }" @click.stop="">
|
||||
<image src="../static/ota/ota-bg.png" mode="aspectFill" class="sheet-bg" />
|
||||
<view class="sheet-inner">
|
||||
|
||||
<!-- 有密码网络 -->
|
||||
<block v-if="connectMode === 'secure'">
|
||||
<view class="sheet-header">
|
||||
<view class="sheet-nav-btn" @click="closeConnectSheet">
|
||||
<image src="../static/sicon/arrow-left.png" mode="aspectFit" style="width: 40rpx; height: 40rpx;" />
|
||||
</view>
|
||||
<text class="sheet-title">加入"{{ connectInput.ssid }}"</text>
|
||||
<view
|
||||
class="sheet-nav-btn"
|
||||
:class="{ 'nav-disabled': joinDisabled }"
|
||||
@click="joinNetwork"
|
||||
>
|
||||
<image src="../static/sicon/check.png" mode="aspectFit" style="width: 28rpx; height: 24rpx;" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="input-row-card">
|
||||
<text class="input-label">密码</text>
|
||||
<input
|
||||
class="input-field"
|
||||
:password="!showPassword"
|
||||
:adjust-position="false"
|
||||
v-model="connectInput.password"
|
||||
placeholder="输入网络密码"
|
||||
placeholder-class="input-placeholder"
|
||||
confirm-type="done"
|
||||
@confirm="joinNetwork"
|
||||
/>
|
||||
<!-- 密码显示/隐藏切换按钮 -->
|
||||
<view class="pwd-eye-btn" @click="togglePasswordVisibility">
|
||||
<image
|
||||
:src="showPassword ? '../static/sicon/eye-on.png' : '../static/sicon/eye-off.png'"
|
||||
mode="aspectFit"
|
||||
style="width: 40rpx; height: 40rpx;"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<text v-if="connectError" class="connect-error">{{ connectError }}</text>
|
||||
</block>
|
||||
|
||||
<!-- 无密码网络 -->
|
||||
<block v-else-if="connectMode === 'open'">
|
||||
<view class="sheet-header">
|
||||
<view class="sheet-nav-btn" @click="closeConnectSheet">
|
||||
<image src="../static/sicon/arrow-left.png" mode="aspectFit" style="width: 40rpx; height: 40rpx;" />
|
||||
</view>
|
||||
<text class="sheet-title">加入"{{ connectInput.ssid }}"</text>
|
||||
<view class="sheet-nav-btn" @click="joinNetwork">
|
||||
<image src="../static/sicon/check.png" mode="aspectFit" style="width: 28rpx; height: 24rpx;" />
|
||||
</view>
|
||||
</view>
|
||||
<text class="sheet-hint">该网络为开放网络,点击 ✓ 加入</text>
|
||||
<text v-if="connectError" class="connect-error">{{ connectError }}</text>
|
||||
</block>
|
||||
|
||||
<!-- 手动输入 -->
|
||||
<block v-else-if="connectMode === 'manual'">
|
||||
<view class="sheet-header">
|
||||
<view class="sheet-nav-btn" @click="closeConnectSheet">
|
||||
<image src="../static/sicon/arrow-left.png" mode="aspectFit" style="width: 40rpx; height: 40rpx;" />
|
||||
</view>
|
||||
<text class="sheet-title">加入无线网络</text>
|
||||
<view
|
||||
class="sheet-nav-btn"
|
||||
:class="{ 'nav-disabled': joinDisabled }"
|
||||
@click="joinNetwork"
|
||||
>
|
||||
<image src="../static/sicon/check.png" mode="aspectFit" style="width: 28rpx; height: 24rpx;" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="input-row-card">
|
||||
<text class="input-label">名称</text>
|
||||
<input
|
||||
class="input-field"
|
||||
v-model="connectInput.ssid"
|
||||
placeholder="输入网络名称"
|
||||
placeholder-class="input-placeholder"
|
||||
/>
|
||||
</view>
|
||||
<view class="input-row-card">
|
||||
<text class="input-label">密码</text>
|
||||
<input
|
||||
class="input-field"
|
||||
:password="!showPassword"
|
||||
:adjust-position="false"
|
||||
v-model="connectInput.password"
|
||||
placeholder="输入网络密码"
|
||||
placeholder-class="input-placeholder"
|
||||
confirm-type="done"
|
||||
@confirm="joinNetwork"
|
||||
/>
|
||||
<!-- 密码显示/隐藏切换按钮 -->
|
||||
<view class="pwd-eye-btn" @click="togglePasswordVisibility">
|
||||
<image
|
||||
:src="showPassword ? '../static/sicon/eye-on.png' : '../static/sicon/eye-off.png'"
|
||||
mode="aspectFit"
|
||||
style="width: 40rpx; height: 40rpx;"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<text v-if="ssidWarning" class="connect-error">{{ ssidWarning }}</text>
|
||||
<text v-else-if="connectError" class="connect-error">{{ connectError }}</text>
|
||||
</block>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 授权拒绝弹窗 -->
|
||||
<ScreenHint :show="wifiAuthDeniedVisible" :onClose="() => (wifiAuthDeniedVisible = false)">
|
||||
<view class="wifi-auth-denied">
|
||||
<text class="wifi-auth-denied-text">拒绝授权获取wifi列表失败,请重新授权或手动输入</text>
|
||||
<view class="wifi-auth-denied-btns">
|
||||
<view class="wifi-auth-denied-btn cancel-btn" @click="wifiAuthDeniedVisible = false">
|
||||
<text>取消授权</text>
|
||||
</view>
|
||||
<view class="wifi-auth-denied-btn confirm-btn" @click="handleReauthorize">
|
||||
<text>重新授权</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</ScreenHint>
|
||||
</Container>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.wifi-auth-denied {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 32rpx 40rpx 24rpx;
|
||||
gap: 32rpx;
|
||||
}
|
||||
.wifi-auth-denied-text {
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.wifi-auth-denied-btns {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 24rpx;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
.wifi-auth-denied-btn {
|
||||
flex: 1;
|
||||
height: 72rpx;
|
||||
border-radius: 36rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.wifi-auth-denied-btn.cancel-btn {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
color: #fff;
|
||||
}
|
||||
.wifi-auth-denied-btn.confirm-btn {
|
||||
background: rgba(254, 216, 71, 1);
|
||||
color: #1a1a2e;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.wifi-banner {
|
||||
background-color: rgba(255, 200, 0, 0.12);
|
||||
border: 1rpx solid rgba(254, 216, 71, 0.5);
|
||||
border-radius: 8rpx;
|
||||
padding: 16rpx 24rpx;
|
||||
margin: 16rpx 24rpx 0;
|
||||
}
|
||||
.wifi-banner-text {
|
||||
color: rgba(254, 216, 71, 1);
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.wifi-page {
|
||||
padding: 0 67rpx 40rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.hero-area {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 40rpx 0 24rpx;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
color: rgba(91, 196, 255, 1);
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
.connected-page-title {
|
||||
color: #4DD9C8;
|
||||
}
|
||||
.page-subtitle {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 24rpx;
|
||||
text-align: center;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
.fail-title {
|
||||
color: rgba(255, 100, 100, 1);
|
||||
}
|
||||
|
||||
.ios-guide {
|
||||
background-color: rgba(95, 173, 255, 0.12);
|
||||
border-radius: 8rpx;
|
||||
padding: 16rpx 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.ios-guide-text {
|
||||
color: rgba(95, 173, 255, 1);
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.section-label-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 24rpx;
|
||||
padding: 0 22rpx;
|
||||
}
|
||||
.connected-section-label-row {
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
.section-label {
|
||||
color: rgba(255, 255, 255, 0.56);
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.wifi-list-card {
|
||||
background-color: rgba(30, 35, 50, 0.96);
|
||||
border-radius: 24rpx;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.wifi-list-scroll {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.connected-wifi-card {
|
||||
background-color: rgba(35, 40, 56, 0.96);
|
||||
margin-bottom: 44rpx;
|
||||
}
|
||||
.wifi-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 92rpx;
|
||||
padding: 0 26rpx 0 66rpx;
|
||||
}
|
||||
.wifi-item:not(:last-child)::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 66rpx;
|
||||
right: 26rpx;
|
||||
bottom: 0;
|
||||
height: 1rpx;
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
.connected-wifi-item {
|
||||
min-height: 88rpx;
|
||||
padding-left: 28rpx;
|
||||
}
|
||||
.wifi-ssid {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-size: 28rpx;
|
||||
line-height: 36rpx;
|
||||
flex: 1;
|
||||
}
|
||||
.connected-wifi-ssid {
|
||||
font-weight: 500;
|
||||
}
|
||||
.other-text {
|
||||
color: rgba(255, 255, 255, 0.86);
|
||||
}
|
||||
.wifi-icons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.connected-wifi-icons {
|
||||
gap: 14rpx;
|
||||
}
|
||||
.check-icon {
|
||||
width: 28rpx;
|
||||
height: 24rpx;
|
||||
margin-right: 16rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.security-icon {
|
||||
width: 24rpx;
|
||||
height: 30rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.signal-icon {
|
||||
width: 36rpx;
|
||||
height: 32rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.bottom-btn-area {
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
.connected-bottom-btn-area {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.primary-btn {
|
||||
background-color: rgba(254, 216, 71, 1);
|
||||
border-radius: 50rpx;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.update-btn {
|
||||
width: 412rpx;
|
||||
}
|
||||
.primary-btn-text {
|
||||
color: rgba(0, 0, 0, 1);
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.center-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 80rpx 32rpx 40rpx;
|
||||
}
|
||||
.page-desc-white {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-size: 28rpx;
|
||||
line-height: 52rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.done-btn {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.progress-wrap {
|
||||
width: 80%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
.progress-track {
|
||||
width: 100%;
|
||||
height: 10rpx;
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 5rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background-color: rgba(91, 196, 255, 1);
|
||||
border-radius: 5rpx;
|
||||
transition: width 0.4s ease;
|
||||
}
|
||||
.progress-pct {
|
||||
color: rgba(91, 196, 255, 1);
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sheet-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.sheet {
|
||||
position: relative;
|
||||
background-color: rgba(57, 47, 29, 1);
|
||||
border-top-left-radius: 28rpx;
|
||||
border-top-right-radius: 28rpx;
|
||||
overflow: hidden;
|
||||
min-height: 320rpx;
|
||||
border: 1rpx solid rgba(249, 213, 161, 0.4);
|
||||
border-bottom: none;
|
||||
}
|
||||
.sheet-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
.sheet-inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 32rpx 32rpx 112rpx;
|
||||
}
|
||||
|
||||
.sheet-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
.sheet-nav-btn {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.nav-disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
.sheet-title {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.sheet-hint {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
.connect-error {
|
||||
color: rgba(254, 216, 71, 1);
|
||||
font-size: 26rpx;
|
||||
line-height: 40rpx;
|
||||
margin-top: 16rpx;
|
||||
display: block;
|
||||
/* 错误提示文案居中展示 */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.input-row-card {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 24rpx 24rpx;
|
||||
margin-left: 48rpx;
|
||||
margin-right: 48rpx;
|
||||
}
|
||||
.input-row-card + .input-row-card {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
.input-label {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 28rpx;
|
||||
width: 80rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.input-field {
|
||||
flex: 1;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-size: 28rpx;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0 8rpx;
|
||||
}
|
||||
.input-placeholder {
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
/* 密码查看切换按钮 */
|
||||
.pwd-eye-btn {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -30,7 +30,6 @@ const { user } = storeToRefs(store);
|
||||
|
||||
const start = ref(false);
|
||||
const scores = ref([]);
|
||||
const isSvip = ref(false);
|
||||
const total = 12;
|
||||
/** 当前练习中连续 X 环计数,用于触发 tententen 音效 */
|
||||
const xRingStreak = ref(0);
|
||||
@@ -49,7 +48,6 @@ onLoad((options) => {
|
||||
const onReady = async () => {
|
||||
await startPractiseAPI();
|
||||
scores.value = [];
|
||||
isSvip.value = false;
|
||||
xRingStreak.value = 0; // 新一局开始,重置 X 环连续计数
|
||||
start.value = true;
|
||||
audioManager.play("练习开始");
|
||||
@@ -81,7 +79,6 @@ 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 环并检测连续计数
|
||||
if (scores.value.length > prevLen) {
|
||||
@@ -104,7 +101,6 @@ async function onComplete() {
|
||||
practiseResult.value = {};
|
||||
start.value = false;
|
||||
scores.value = [];
|
||||
isSvip.value = false;
|
||||
xRingStreak.value = 0; // 重新开始练习,重置 X 环连续计数
|
||||
const result = await createPractiseAPI(total, 120);
|
||||
if (result) practiseId.value = result.id;
|
||||
@@ -178,7 +174,6 @@ onBeforeUnmount(() => {
|
||||
:totalRound="start ? total / 4 : 0"
|
||||
:currentRound="scores.length % 3"
|
||||
:scores="scores"
|
||||
:isSvip="isSvip"
|
||||
/>
|
||||
<ScorePanel2 :arrows="scores" />
|
||||
<ScoreResult
|
||||
|
||||
@@ -30,7 +30,6 @@ const { user } = storeToRefs(store);
|
||||
|
||||
const start = ref(false);
|
||||
const scores = ref([]);
|
||||
const isSvip = ref(false);
|
||||
const total = 36;
|
||||
/** 当前练习中连续 X 环计数,用于触发 tententen 音效 */
|
||||
const xRingStreak = ref(0);
|
||||
@@ -48,7 +47,6 @@ onLoad((options) => {
|
||||
const onReady = async () => {
|
||||
await startPractiseAPI();
|
||||
scores.value = [];
|
||||
isSvip.value = false;
|
||||
xRingStreak.value = 0; // 新一局开始,重置 X 环连续计数
|
||||
start.value = true;
|
||||
audioManager.play("练习开始");
|
||||
@@ -80,7 +78,6 @@ 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 环并检测连续计数
|
||||
if (scores.value.length > prevLen) {
|
||||
@@ -119,7 +116,6 @@ async function onComplete() {
|
||||
practiseResult.value = {};
|
||||
start.value = false;
|
||||
scores.value = [];
|
||||
isSvip.value = false;
|
||||
xRingStreak.value = 0; // 重新开始练习,重置 X 环连续计数
|
||||
const result = await createPractiseAPI(total, 3600);
|
||||
if (result) practiseId.value = result.id;
|
||||
@@ -179,7 +175,6 @@ onBeforeUnmount(() => {
|
||||
:currentRound="scores.length"
|
||||
:totalRound="start ? total : 0"
|
||||
:scores="scores"
|
||||
:isSvip="isSvip"
|
||||
/>
|
||||
<ScorePanel
|
||||
v-if="start"
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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, "");
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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,
|
||||
@@ -55,18 +38,6 @@ const props = defineProps({
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
targetRadius: {
|
||||
type: Number,
|
||||
default: 20,
|
||||
},
|
||||
hitRadiusPx: {
|
||||
type: Number,
|
||||
default: 2,
|
||||
},
|
||||
zoomHitRadiusPx: {
|
||||
type: Number,
|
||||
default: 5,
|
||||
},
|
||||
});
|
||||
|
||||
const pMode = ref(true);
|
||||
@@ -76,56 +47,16 @@ 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 +64,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,121 +75,13 @@ 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;
|
||||
});
|
||||
|
||||
const currentHitRadiusPx = computed(() => {
|
||||
const radius = Number(
|
||||
pMode.value ? props.zoomHitRadiusPx : props.hitRadiusPx
|
||||
);
|
||||
return Number.isFinite(radius) && radius >= 0 ? radius : 0;
|
||||
});
|
||||
|
||||
function getShotPoint(shot, fallbackCenter = false) {
|
||||
const x = Number(shot?.x);
|
||||
const y = Number(shot?.y);
|
||||
if (Number.isFinite(x) && Number.isFinite(y)) return { x, y };
|
||||
return fallbackCenter ? { x: 0, y: 0 } : null;
|
||||
function calcRealX(num, offset = 3.4) {
|
||||
const len = 20.4 + num;
|
||||
return `calc(${(len / 40.8) * 100 - offset / 2}%)`;
|
||||
}
|
||||
|
||||
function getPointDirection(point) {
|
||||
if (!point) return null;
|
||||
const distance = Math.sqrt(point.x * point.x + point.y * point.y);
|
||||
if (distance === 0) return null;
|
||||
|
||||
return {
|
||||
x: point.x / distance,
|
||||
y: point.y / distance,
|
||||
};
|
||||
}
|
||||
|
||||
function formatPxOffset(value) {
|
||||
if (!value) return "";
|
||||
const operator = value > 0 ? "+" : "-";
|
||||
return ` ${operator} ${Math.abs(value)}px`;
|
||||
}
|
||||
|
||||
function formatTargetPosition(percent, offset) {
|
||||
const pxOffset = formatPxOffset(offset);
|
||||
return pxOffset ? `calc(${percent}%${pxOffset})` : `${percent}%`;
|
||||
}
|
||||
|
||||
function getTargetPositionStyle(point, offsetPx = 0, extraOffset = {}) {
|
||||
if (!point) return { display: "none" };
|
||||
|
||||
const radius = safeTargetRadius.value;
|
||||
const diameter = radius * 2;
|
||||
const direction = getPointDirection(point);
|
||||
const xOffset = (direction ? direction.x * offsetPx : 0) + (extraOffset.x || 0);
|
||||
const yOffset = (direction ? -direction.y * offsetPx : 0) + (extraOffset.y || 0);
|
||||
const leftPercent = ((point.x + radius) / diameter) * 100;
|
||||
const topPercent = ((radius - point.y) / diameter) * 100;
|
||||
|
||||
return {
|
||||
left: formatTargetPosition(leftPercent, xOffset),
|
||||
top: formatTargetPosition(topPercent, yOffset),
|
||||
transform: "translate(-50%, -50%)",
|
||||
};
|
||||
}
|
||||
|
||||
function getHitStyle(shot) {
|
||||
const radius = currentHitRadiusPx.value;
|
||||
const point = getShotPoint(shot);
|
||||
|
||||
return {
|
||||
...getTargetPositionStyle(point, radius),
|
||||
width: `${radius * 2}px`,
|
||||
height: `${radius * 2}px`,
|
||||
};
|
||||
}
|
||||
|
||||
function getSvipHitBgStyle(shot) {
|
||||
const radius = currentHitRadiusPx.value;
|
||||
const point = getShotPoint(shot);
|
||||
|
||||
return {
|
||||
...getTargetPositionStyle(point, radius),
|
||||
};
|
||||
}
|
||||
|
||||
function getRoundTipStyle(shot) {
|
||||
const point = getShotPoint(shot, true);
|
||||
return getTargetPositionStyle(
|
||||
point,
|
||||
shot?.ring ? currentHitRadiusPx.value : 0,
|
||||
{ y: ROUND_TIP_OFFSET_Y }
|
||||
);
|
||||
}
|
||||
|
||||
function getExperienceTipStyle(shot) {
|
||||
const point = getShotPoint(shot, true);
|
||||
return getTargetPositionStyle(
|
||||
point,
|
||||
shot?.ring ? currentHitRadiusPx.value : 0,
|
||||
{ y: EXPERIENCE_TIP_OFFSET_Y }
|
||||
);
|
||||
function calcRealY(num, offset = 3.4) {
|
||||
const len = num < 0 ? Math.abs(num) + 20.4 : 20.4 - num;
|
||||
return `calc(${(len / 40.8) * 100 - offset / 2}%)`;
|
||||
}
|
||||
const simulShoot = async () => {
|
||||
if (device.value.deviceId) await simulShootAPI(device.value.deviceId);
|
||||
@@ -400,8 +130,6 @@ async function onReceiveMessage(message) {
|
||||
|
||||
onMounted(() => {
|
||||
uni.$on("socket-inbox", onReceiveMessage);
|
||||
updateTargetSize();
|
||||
if (uni.onWindowResize) uni.onWindowResize(handleWindowResize);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
@@ -413,17 +141,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 +154,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" />
|
||||
@@ -441,14 +164,20 @@ onBeforeUnmount(() => {
|
||||
<view
|
||||
v-if="latestOne && latestOne.ring && user.id === latestOne.playerId"
|
||||
class="e-value fade-in-out"
|
||||
:style="getExperienceTipStyle(latestOne)"
|
||||
:style="{
|
||||
left: calcRealX(latestOne.ring ? latestOne.x : 0, 20),
|
||||
top: calcRealY(latestOne.ring ? latestOne.y : 0, 40),
|
||||
}"
|
||||
>
|
||||
经验 +1
|
||||
</view>
|
||||
<view
|
||||
v-if="latestOne"
|
||||
class="round-tip fade-in-out"
|
||||
:style="getRoundTipStyle(latestOne)"
|
||||
:style="{
|
||||
left: calcRealX(latestOne.ring ? latestOne.x : 0, 28),
|
||||
top: calcRealY(latestOne.ring ? latestOne.y : 0, 28),
|
||||
}"
|
||||
>{{ latestOne.ringX ? "X" : latestOne.ring || "未上靶"
|
||||
}}<text v-if="latestOne.ring">环</text>
|
||||
</view>
|
||||
@@ -459,78 +188,52 @@ onBeforeUnmount(() => {
|
||||
user.id === bluelatestOne.playerId
|
||||
"
|
||||
class="e-value fade-in-out"
|
||||
:style="getExperienceTipStyle(bluelatestOne)"
|
||||
:style="{
|
||||
left: calcRealX(bluelatestOne.ring ? bluelatestOne.x : 0, 20),
|
||||
top: calcRealY(bluelatestOne.ring ? bluelatestOne.y : 0, 40),
|
||||
}"
|
||||
>
|
||||
经验 +1
|
||||
</view>
|
||||
<view
|
||||
v-if="bluelatestOne"
|
||||
class="round-tip fade-in-out"
|
||||
:style="getRoundTipStyle(bluelatestOne)"
|
||||
:style="{
|
||||
left: calcRealX(bluelatestOne.ring ? bluelatestOne.x : 0, 28),
|
||||
top: calcRealY(bluelatestOne.ring ? bluelatestOne.y : 0, 28),
|
||||
}"
|
||||
>{{ bluelatestOne.ringX ? "X" : bluelatestOne.ring || "未上靶"
|
||||
}}<text v-if="bluelatestOne.ring">环</text></view
|
||||
>
|
||||
<block v-for="(bow, index) in scores" :key="index">
|
||||
<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' : ''
|
||||
}`"
|
||||
:style="{
|
||||
...getHitStyle(bow),
|
||||
left: calcRealX(bow.x, pMode ? '3.4' : '2'),
|
||||
top: calcRealY(bow.y, pMode ? '3.4' : '2'),
|
||||
backgroundColor: mode === 'solo' ? '#00bf04' : '#FF0000',
|
||||
}"
|
||||
><text v-if="pMode">{{ index + 1 }}</text></view
|
||||
>
|
||||
</block>
|
||||
<block v-for="(bow, index) in blueScores" :key="index">
|
||||
<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' : ''
|
||||
}`"
|
||||
:style="{
|
||||
...getHitStyle(bow),
|
||||
left: calcRealX(bow.x, pMode ? '3.4' : '2'),
|
||||
top: calcRealY(bow.y, pMode ? '3.4' : '2'),
|
||||
backgroundColor: '#1840FF',
|
||||
}"
|
||||
>
|
||||
<text v-if="pMode">{{ index + 1 }}</text>
|
||||
</view>
|
||||
</block>
|
||||
<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 +255,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;
|
||||
@@ -593,55 +287,31 @@ onBeforeUnmount(() => {
|
||||
font-size: 24px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
@keyframes target-tip-fade-in-out {
|
||||
0% {
|
||||
transform: translate(-50%, -50%) translateY(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: translate(-50%, -50%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translate(-50%, -50%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(-50%, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.round-tip.fade-in-out,
|
||||
.e-value.fade-in-out {
|
||||
animation: target-tip-fade-in-out 1.2s ease forwards;
|
||||
}
|
||||
.target > image:last-child {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.svip-hit-bg {
|
||||
position: absolute;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
transform-origin: center center;
|
||||
animation: svip-hit-xuan 1.2s linear infinite;
|
||||
}
|
||||
.hit {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
z-index: 2;
|
||||
z-index: 1;
|
||||
color: #fff;
|
||||
transition: transform 0.2s ease, opacity 0.2s ease;
|
||||
box-sizing: border-box;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.s-point {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
min-width: 4px;
|
||||
min-height: 4px;
|
||||
}
|
||||
.b-point {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
min-width: 10px;
|
||||
min-height: 10px;
|
||||
border: 1px solid #fff;
|
||||
z-index: 2;
|
||||
z-index: 1;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@@ -657,56 +327,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);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes target-shake {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
14% {
|
||||
transform: translate(-20rpx, 8rpx);
|
||||
}
|
||||
28% {
|
||||
transform: translate(16rpx, -8rpx);
|
||||
}
|
||||
44% {
|
||||
transform: translate(-12rpx, 6rpx);
|
||||
}
|
||||
64% {
|
||||
transform: translate(8rpx, -4rpx);
|
||||
}
|
||||
82% {
|
||||
transform: translate(-4rpx, 2rpx);
|
||||
}
|
||||
100% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
.hit.pump-in {
|
||||
animation: target-pump-in 0.3s ease-out forwards;
|
||||
transform-origin: center center;
|
||||
}
|
||||
.header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@@ -730,8 +350,6 @@ onBeforeUnmount(() => {
|
||||
display: flex;
|
||||
margin-top: -40px;
|
||||
justify-content: flex-end;
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
}
|
||||
.footer > image {
|
||||
width: 40px;
|
||||
|
||||
@@ -142,8 +142,8 @@ onBeforeUnmount(() => {
|
||||
</view>
|
||||
<block
|
||||
v-if="
|
||||
'-箭前准备-感知距离-小试牛刀'.indexOf(title) === -1 ||
|
||||
'-箭前准备-感知距离-小试牛刀'.indexOf(title) === 11
|
||||
'-凹造型-感知距离-小试牛刀'.indexOf(title) === -1 ||
|
||||
'-凹造型-感知距离-小试牛刀'.indexOf(title) === 10
|
||||
"
|
||||
>
|
||||
<text>{{ title }}</text>
|
||||
@@ -151,12 +151,12 @@ onBeforeUnmount(() => {
|
||||
<block
|
||||
v-if="
|
||||
title &&
|
||||
'-箭前准备-感知距离-小试牛刀'.indexOf(title) !== -1 &&
|
||||
'-箭前准备-感知距离-小试牛刀'.indexOf(title) !== 11
|
||||
'-凹造型-感知距离-小试牛刀'.indexOf(title) !== -1 &&
|
||||
'-凹造型-感知距离-小试牛刀'.indexOf(title) !== 10
|
||||
"
|
||||
>
|
||||
<view class="first-try-steps">
|
||||
<text :class="title === '-箭前准备' ? 'current-step' : ''">箭前准备</text>
|
||||
<text :class="title === '-凹造型' ? 'current-step' : ''">凹造型</text>
|
||||
<text>-</text>
|
||||
<text :class="title === '-感知距离' ? 'current-step' : ''"
|
||||
>感知距离</text
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -318,22 +318,6 @@ function enqueueBattleMessage(message) {
|
||||
if (battleEnded && message.type !== MESSAGETYPESV2.BattleEnd) return;
|
||||
if (message.type === MESSAGETYPESV2.BattleEnd) battleEnded = true;
|
||||
|
||||
if (message.type === MESSAGETYPESV2.InvalidShot) {
|
||||
const receivedAt = Date.now();
|
||||
const order = ++queueOrder;
|
||||
battleQueue.value.push({
|
||||
message,
|
||||
type: message.type,
|
||||
key: `${message.type}:invalid:${receivedAt}:${order}`,
|
||||
serverTime: 0,
|
||||
receivedAt,
|
||||
order,
|
||||
});
|
||||
sortBattleQueue();
|
||||
runBattleQueue();
|
||||
return;
|
||||
}
|
||||
|
||||
// 入队阶段只做排序、去重和时间边界判断,不直接改 UI。
|
||||
const serverTime = getServerTime(message);
|
||||
const key = getMessageKey(message);
|
||||
@@ -473,17 +457,13 @@ 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));
|
||||
}
|
||||
|
||||
// Restore an info snapshot whose eventType points at the NewRound phase.
|
||||
@@ -1218,8 +1198,6 @@ onShow(() => {
|
||||
:scores="scores"
|
||||
:blueScores="blueScores"
|
||||
:latestShotFlash="latestShotFlash"
|
||||
:redTeam="redTeam"
|
||||
:blueTeam="blueTeam"
|
||||
/>
|
||||
<BattleFooter
|
||||
v-if="start"
|
||||
|
||||
@@ -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>
|
||||
@@ -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 = () => {
|
||||
|
||||
|
Before Width: | Height: | Size: 7.1 KiB |
|
Before Width: | Height: | Size: 62 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 8.5 KiB |
BIN
src/static/ota/check-char.png
Normal file
|
After Width: | Height: | Size: 8.3 KiB |
BIN
src/static/ota/close-char.png
Normal file
|
After Width: | Height: | Size: 8.5 KiB |
BIN
src/static/ota/new-ver.png
Normal file
|
After Width: | Height: | Size: 6.8 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
BIN
src/static/ota/ota-mascot.png
Normal file
|
After Width: | Height: | Size: 6.7 KiB |
BIN
src/static/ota/ota-ver.png
Normal file
|
After Width: | Height: | Size: 237 B |
BIN
src/static/ota/target-char.png
Normal file
|
After Width: | Height: | Size: 9.4 KiB |
BIN
src/static/ota/update-fail.png
Normal file
|
After Width: | Height: | Size: 5.7 KiB |
BIN
src/static/ota/update-ok.png
Normal file
|
After Width: | Height: | Size: 5.7 KiB |
BIN
src/static/ota/update_progress.png
Normal file
|
After Width: | Height: | Size: 3.5 KiB |
BIN
src/static/ota/wifi1.png
Normal file
|
After Width: | Height: | Size: 7.5 KiB |
BIN
src/static/ota/wifi2.png
Normal file
|
After Width: | Height: | Size: 3.0 KiB |
BIN
src/static/sicon/arrow-left.png
Normal file
|
After Width: | Height: | Size: 277 B |
BIN
src/static/sicon/cancel.png
Normal file
|
After Width: | Height: | Size: 3.4 KiB |
BIN
src/static/sicon/check.png
Normal file
|
After Width: | Height: | Size: 390 B |
BIN
src/static/sicon/close.png
Normal file
|
After Width: | Height: | Size: 603 B |
BIN
src/static/sicon/eye-off.png
Normal file
|
After Width: | Height: | Size: 395 B |
BIN
src/static/sicon/eye-on.png
Normal file
|
After Width: | Height: | Size: 457 B |
BIN
src/static/sicon/pwd.png
Normal file
|
After Width: | Height: | Size: 407 B |
BIN
src/static/sicon/refresh.png
Normal file
|
After Width: | Height: | Size: 494 B |
BIN
src/static/sicon/target_icon.png
Normal file
|
After Width: | Height: | Size: 3.6 KiB |
BIN
src/static/sicon/tick.png
Normal file
|
After Width: | Height: | Size: 3.2 KiB |
BIN
src/static/sicon/wifi.png
Normal file
|
After Width: | Height: | Size: 548 B |
|
Before Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 862 B |
|
Before Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 724 B |
|
Before Width: | Height: | Size: 777 B |
|
Before Width: | Height: | Size: 492 B |
|
Before Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 898 B |
|
Before Width: | Height: | Size: 1001 B |
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 949 B |
|
Before Width: | Height: | Size: 594 B |
|
Before Width: | Height: | Size: 637 B |
|
Before Width: | Height: | Size: 476 B |
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.1 KiB |