Merge branch 'test' into feat-prac
This commit is contained in:
@@ -77,10 +77,16 @@ const props = defineProps({
|
||||
/>
|
||||
<image
|
||||
class="bg-image"
|
||||
v-if="type === 10"
|
||||
v-if="type === 11"
|
||||
src="@/static/app-bg9.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>
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<script setup>
|
||||
const tabs = [
|
||||
{ image: "../static/tab-vip.png" },
|
||||
{ image: "../static/tab-point-book.png" },
|
||||
{ image: "../static/tab-mall.png" },
|
||||
{ image: "https://static.shelingxingqiu.com/shootmini/static/tab-point-book.png" },
|
||||
{ image: "https://static.shelingxingqiu.com/shootmini/static/tab-mall.png" },
|
||||
];
|
||||
|
||||
function handleTabClick(index) {
|
||||
if (index === 0) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/be-vip",
|
||||
url: "/pages/member/be-vip",
|
||||
});
|
||||
}
|
||||
if (index === 1) {
|
||||
@@ -26,7 +26,7 @@ function handleTabClick(index) {
|
||||
|
||||
<template>
|
||||
<view class="footer">
|
||||
<image class="footer-bg" src="../static/tab-bg.png" mode="widthFix" />
|
||||
<image class="footer-bg" src="https://static.shelingxingqiu.com/shootmini/static/tab-bg.png" mode="widthFix" />
|
||||
<view
|
||||
v-for="(tab, index) in tabs"
|
||||
:key="index"
|
||||
|
||||
@@ -4,6 +4,7 @@ import { onShow } from "@dcloudio/uni-app";
|
||||
|
||||
import { getBattleAPI, getUserGameState } from "@/apis";
|
||||
import { debounce } from "@/util";
|
||||
import { returnToBattle } from "@/utils/matchReturn";
|
||||
|
||||
import useStore from "@/store";
|
||||
import { storeToRefs } from "pinia";
|
||||
@@ -18,12 +19,14 @@ 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();
|
||||
@@ -45,28 +48,30 @@ 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) return;
|
||||
if (loading.value || navigating.value) return;
|
||||
try {
|
||||
loading.value = true;
|
||||
const result = await getBattleAPI();
|
||||
if (result && result.matchId) {
|
||||
await uni.$checkAudio();
|
||||
if (result.mode <= 3) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/team-battle/index?battleId=${result.matchId}`,
|
||||
});
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: `/pages/melee-battle?battleId=${result.matchId}`,
|
||||
});
|
||||
}
|
||||
await returnToBattle(result, navigateOnce);
|
||||
return;
|
||||
}
|
||||
if (game.value.roomID) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/battle-room?roomNumber=" + game.value.roomID,
|
||||
});
|
||||
await navigateOnce("/pages/battle-room?roomNumber=" + game.value.roomID);
|
||||
} else {
|
||||
updateGame(false, "");
|
||||
}
|
||||
@@ -91,9 +96,9 @@ onBeforeUnmount(() => {
|
||||
class="back-to-game"
|
||||
@click="onClick"
|
||||
>
|
||||
<image src="../static/back-to-game-bg.png" mode="widthFix" />
|
||||
<image src="https://static.shelingxingqiu.com/shootmini/static/back-to-game-bg.png" mode="widthFix" />
|
||||
<block v-if="game.inBattle">
|
||||
<image src="../static/pk-icon.png" mode="widthFix" />
|
||||
<image src="https://static.shelingxingqiu.com/shootmini/static/pk-icon.png" mode="widthFix" />
|
||||
<text>返回进行中的对局</text>
|
||||
</block>
|
||||
<block v-else-if="game.roomID">
|
||||
|
||||
@@ -31,7 +31,7 @@ const normalRounds = computed(() => {
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="guide-row">
|
||||
<image src="../static/shooter.png" mode="widthFix" />
|
||||
<image src="https://static.shelingxingqiu.com/shootmini/static/shooter.png" mode="widthFix" />
|
||||
<view
|
||||
:style="{
|
||||
marginBottom: '10px',
|
||||
@@ -42,7 +42,7 @@ const normalRounds = computed(() => {
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<image src="../static/battle-header-melee.png" mode="widthFix" />
|
||||
<image src="https://static.shelingxingqiu.com/shootmini/static/battle-header-melee.png" mode="widthFix" />
|
||||
<text>蓝队({{ bluePoints }})</text>
|
||||
<text>红队({{ redPoints }})</text>
|
||||
</view>
|
||||
|
||||
@@ -27,13 +27,21 @@ 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>
|
||||
<view class="container" :style="{ paddingTop: showHeader ? '5px' : '0' }">
|
||||
<image
|
||||
v-if="showHeader"
|
||||
:src="`../static/battle-header${players.length ? '-melee' : ''}.png`"
|
||||
:src="`https://static.shelingxingqiu.com/shootmini/static/battle-header${players.length ? '-melee' : ''}.png`"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view
|
||||
@@ -51,7 +59,16 @@ defineProps({
|
||||
}"
|
||||
>
|
||||
<Avatar :src="player.avatar" :rankLvl="player.rankLvl" :size="40" />
|
||||
<text class="player-name">{{ player.name }}</text>
|
||||
<view
|
||||
v-if="isMember(player)"
|
||||
:class="['player-name', ...getMemberNicknameClass(player)]"
|
||||
>
|
||||
<text class="member-nickname__text">{{ player.name }}</text>
|
||||
<text v-if="player.sVip === true" class="member-nickname__shine">
|
||||
{{ player.name }}
|
||||
</text>
|
||||
</view>
|
||||
<text v-else class="player-name">{{ player.name }}</text>
|
||||
</view>
|
||||
<image
|
||||
v-if="winner === 1"
|
||||
@@ -70,7 +87,16 @@ defineProps({
|
||||
}"
|
||||
>
|
||||
<Avatar :src="player.avatar" :rankLvl="player.rankLvl" :size="40" />
|
||||
<text class="player-name">{{ player.name }}</text>
|
||||
<view
|
||||
v-if="isMember(player)"
|
||||
:class="['player-name', ...getMemberNicknameClass(player)]"
|
||||
>
|
||||
<text class="member-nickname__text">{{ player.name }}</text>
|
||||
<text v-if="player.sVip === true" class="member-nickname__shine">
|
||||
{{ player.name }}
|
||||
</text>
|
||||
</view>
|
||||
<text v-else class="player-name">{{ player.name }}</text>
|
||||
</view>
|
||||
<image
|
||||
v-if="winner === 2"
|
||||
@@ -87,6 +113,7 @@ defineProps({
|
||||
v-if="players.length"
|
||||
class="players-melee"
|
||||
scroll-x
|
||||
:show-scrollbar="false"
|
||||
@touchmove="(e) => players.length > 5 && e.stopPropagation()"
|
||||
:style="{ paddingTop: showHeader ? '15px' : '0' }"
|
||||
>
|
||||
@@ -105,7 +132,16 @@ defineProps({
|
||||
:size="40"
|
||||
:rank="showRank ? index + 1 : 0"
|
||||
/>
|
||||
<text class="player-name">{{ player.name }}</text>
|
||||
<view
|
||||
v-if="isMember(player)"
|
||||
:class="['player-name', ...getMemberNicknameClass(player)]"
|
||||
>
|
||||
<text class="member-nickname__text">{{ player.name }}</text>
|
||||
<text v-if="player.sVip === true" class="member-nickname__shine">
|
||||
{{ player.name }}
|
||||
</text>
|
||||
</view>
|
||||
<text v-else class="player-name">{{ player.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
@@ -116,6 +152,7 @@ defineProps({
|
||||
.container {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.container > image:first-child {
|
||||
@@ -123,6 +160,7 @@ defineProps({
|
||||
width: 100%;
|
||||
top: -5px;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
.players {
|
||||
display: flex;
|
||||
@@ -153,15 +191,12 @@ defineProps({
|
||||
.players-melee {
|
||||
height: 80px;
|
||||
width: 100%;
|
||||
}
|
||||
.players-melee::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
white-space: nowrap;
|
||||
}
|
||||
/* 小程序 scroll-view 不支持直接 flex，通过内层 wrapper 承载横向排列 */
|
||||
.players-melee-inner {
|
||||
display: flex;
|
||||
display: inline-flex;
|
||||
min-width: 100%;
|
||||
height: 100%;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
@@ -172,7 +207,7 @@ defineProps({
|
||||
justify-content: center;
|
||||
color: #fff9;
|
||||
font-size: 12px;
|
||||
padding-top: 7px;
|
||||
/* padding-top: 7px; */
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.player-name {
|
||||
@@ -183,6 +218,13 @@ defineProps({
|
||||
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,4 +1,5 @@
|
||||
<script setup>
|
||||
import { computed } from "vue";
|
||||
import AppBackground from "@/components/AppBackground.vue";
|
||||
import Avatar from "@/components/Avatar.vue";
|
||||
import BowTarget from "@/components/BowTarget.vue";
|
||||
@@ -8,6 +9,9 @@ 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,
|
||||
@@ -35,7 +39,21 @@ const props = defineProps({
|
||||
<view>
|
||||
<Avatar :src="user.avatar" :rankLvl="user.rankLvl" :size="45" />
|
||||
<view>
|
||||
<text>{{ user.nickName }}</text>
|
||||
<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.lvlName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -44,7 +62,7 @@ const props = defineProps({
|
||||
</view>
|
||||
</view>
|
||||
<view :style="{ width: '100%', marginBottom: '20px' }">
|
||||
<BowTarget :scores="arrows" />
|
||||
<BowTarget :scores="arrows" :isSvip="isSVip" />
|
||||
</view>
|
||||
<view class="desc">
|
||||
<text>{{ arrows.length }}</text>
|
||||
@@ -95,6 +113,13 @@ 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;
|
||||
|
||||
@@ -0,0 +1,400 @@
|
||||
<script setup>
|
||||
import { computed, onBeforeUnmount, ref, watch } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
shot: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
playKey: {
|
||||
type: [String, Number],
|
||||
default: "",
|
||||
},
|
||||
targetRadius: {
|
||||
type: Number,
|
||||
default: 20,
|
||||
},
|
||||
targetWidth: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
targetHeight: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
hitOffsetPx: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["complete", "impact"]);
|
||||
|
||||
const phase = ref("idle");
|
||||
const activePlayKey = ref("");
|
||||
const animationKey = ref("");
|
||||
const impactEmitted = ref(false);
|
||||
const activeShot = ref(null);
|
||||
let timers = [];
|
||||
|
||||
const isActive = computed(() => phase.value !== "idle");
|
||||
const ARROW_IMPACT_MS = 340;
|
||||
const COMPLETE_FALLBACK_MS = 980;
|
||||
|
||||
const safeTargetRadius = computed(() => {
|
||||
const radius = Number(props.targetRadius);
|
||||
return Number.isFinite(radius) && radius > 0 ? radius : 20;
|
||||
});
|
||||
|
||||
const safeTargetSize = computed(() => {
|
||||
const width = Number(props.targetWidth);
|
||||
const height = Number(props.targetHeight);
|
||||
return {
|
||||
width: Number.isFinite(width) && width > 0 ? width : 0,
|
||||
height: Number.isFinite(height) && height > 0 ? height : 0,
|
||||
};
|
||||
});
|
||||
|
||||
function hasShotPoint(shot) {
|
||||
const x = Number(shot?.x);
|
||||
const y = Number(shot?.y);
|
||||
return Number.isFinite(x) && Number.isFinite(y);
|
||||
}
|
||||
|
||||
const effectiveShot = computed(() => activeShot.value || props.shot);
|
||||
|
||||
const shotPoint = computed(() => {
|
||||
const x = Number(effectiveShot.value?.x);
|
||||
const y = Number(effectiveShot.value?.y);
|
||||
return {
|
||||
x: Number.isFinite(x) ? x : 0,
|
||||
y: Number.isFinite(y) ? y : 0,
|
||||
};
|
||||
});
|
||||
|
||||
const pointDirection = computed(() => {
|
||||
const point = shotPoint.value;
|
||||
const distance = Math.sqrt(point.x * point.x + point.y * point.y);
|
||||
if (distance === 0) return null;
|
||||
|
||||
return {
|
||||
x: point.x / distance,
|
||||
y: point.y / distance,
|
||||
};
|
||||
});
|
||||
|
||||
const hitOffset = computed(() => {
|
||||
const offset = Number(props.hitOffsetPx);
|
||||
const safeOffset = Number.isFinite(offset) && offset > 0 ? offset : 0;
|
||||
const direction = pointDirection.value;
|
||||
|
||||
return {
|
||||
x: direction ? direction.x * safeOffset : 0,
|
||||
y: direction ? -direction.y * safeOffset : 0,
|
||||
};
|
||||
});
|
||||
|
||||
const hitPercent = computed(() => {
|
||||
const point = shotPoint.value;
|
||||
const radius = safeTargetRadius.value;
|
||||
const diameter = radius * 2;
|
||||
|
||||
return {
|
||||
left: ((point.x + radius) / diameter) * 100,
|
||||
top: ((radius - point.y) / diameter) * 100,
|
||||
};
|
||||
});
|
||||
|
||||
const arrowAngle = computed(() => {
|
||||
const size = safeTargetSize.value;
|
||||
if (!size.width || !size.height) {
|
||||
const dx = hitPercent.value.left - 50;
|
||||
const dy = 114 - hitPercent.value.top;
|
||||
const fallbackAngle = Math.atan2(dx, dy || 1) * (180 / Math.PI);
|
||||
return Math.max(-18, Math.min(18, fallbackAngle));
|
||||
}
|
||||
|
||||
const startX = size.width * 0.5;
|
||||
const startY = size.height * 1.14;
|
||||
const endX = size.width * (hitPercent.value.left / 100) + hitOffset.value.x;
|
||||
const endY = size.height * (hitPercent.value.top / 100) + hitOffset.value.y;
|
||||
const dx = endX - startX;
|
||||
const dy = startY - endY;
|
||||
const angle = Math.atan2(dx, dy || 1) * (180 / Math.PI);
|
||||
return Math.max(-18, Math.min(18, angle));
|
||||
});
|
||||
|
||||
function formatPxOffset(value) {
|
||||
if (!value) return "";
|
||||
const operator = value > 0 ? "+" : "-";
|
||||
return ` ${operator} ${Math.abs(value)}px`;
|
||||
}
|
||||
|
||||
function formatTargetPosition(percent, offset) {
|
||||
const pxOffset = formatPxOffset(offset);
|
||||
return pxOffset ? `calc(${percent}%${pxOffset})` : `${percent}%`;
|
||||
}
|
||||
|
||||
const crackStyle = computed(() => ({
|
||||
left: formatTargetPosition(hitPercent.value.left, hitOffset.value.x),
|
||||
top: formatTargetPosition(hitPercent.value.top, hitOffset.value.y),
|
||||
}));
|
||||
|
||||
function getTargetTranslate(percent) {
|
||||
const absPercent = Math.abs(percent);
|
||||
const operator = percent >= 0 ? "-" : "+";
|
||||
return `calc(${percent}vw ${operator} ${absPercent * 0.5}px)`;
|
||||
}
|
||||
|
||||
const arrowMoveStyle = computed(() => {
|
||||
const size = safeTargetSize.value;
|
||||
let x = getTargetTranslate(hitPercent.value.left - 50);
|
||||
let y = getTargetTranslate(hitPercent.value.top - 114);
|
||||
|
||||
if (size.width && size.height) {
|
||||
const startX = size.width * 0.5;
|
||||
const startY = size.height * 1.14;
|
||||
const endX = size.width * (hitPercent.value.left / 100) + hitOffset.value.x;
|
||||
const endY = size.height * (hitPercent.value.top / 100) + hitOffset.value.y;
|
||||
x = `${endX - startX}px`;
|
||||
y = `${endY - startY}px`;
|
||||
}
|
||||
|
||||
return {
|
||||
"--shot-tx": x,
|
||||
"--shot-ty": y,
|
||||
"--shot-angle": `${arrowAngle.value}deg`,
|
||||
};
|
||||
});
|
||||
|
||||
function clearTimers() {
|
||||
timers.forEach((timer) => clearTimeout(timer));
|
||||
timers = [];
|
||||
}
|
||||
|
||||
function queueTimer(callback, delay) {
|
||||
const timer = setTimeout(callback, delay);
|
||||
timers.push(timer);
|
||||
}
|
||||
|
||||
function emitImpactOnce(playKey) {
|
||||
if (phase.value === "idle" || activePlayKey.value !== playKey || impactEmitted.value) return;
|
||||
impactEmitted.value = true;
|
||||
emit("impact");
|
||||
}
|
||||
|
||||
function finish(playKey) {
|
||||
if (phase.value === "idle" || activePlayKey.value !== playKey) return;
|
||||
clearTimers();
|
||||
phase.value = "idle";
|
||||
activePlayKey.value = "";
|
||||
activeShot.value = null;
|
||||
emit("complete", playKey);
|
||||
}
|
||||
|
||||
function play() {
|
||||
if (!props.playKey || !props.shot || !props.shot.ring || !hasShotPoint(props.shot)) {
|
||||
return;
|
||||
}
|
||||
|
||||
clearTimers();
|
||||
activePlayKey.value = props.playKey;
|
||||
animationKey.value = `${props.playKey}`;
|
||||
impactEmitted.value = false;
|
||||
activeShot.value = { ...props.shot };
|
||||
phase.value = "playing";
|
||||
|
||||
queueTimer(() => {
|
||||
emitImpactOnce(activePlayKey.value);
|
||||
}, ARROW_IMPACT_MS);
|
||||
queueTimer(() => {
|
||||
finish(activePlayKey.value);
|
||||
}, COMPLETE_FALLBACK_MS);
|
||||
}
|
||||
|
||||
function handleArrowAnimationEnd() {
|
||||
emitImpactOnce(activePlayKey.value);
|
||||
}
|
||||
|
||||
function handleCrackAnimationEnd() {
|
||||
finish(activePlayKey.value);
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.playKey,
|
||||
() => {
|
||||
play();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
clearTimers();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view
|
||||
v-show="isActive"
|
||||
:class="['shot-effect', `shot-effect--${phase}`]"
|
||||
:style="arrowMoveStyle"
|
||||
>
|
||||
<view
|
||||
:key="`arrow-${animationKey}`"
|
||||
class="shot-arrow-track"
|
||||
@animationend="handleArrowAnimationEnd"
|
||||
>
|
||||
<image
|
||||
class="shot-arrow"
|
||||
src="https://static.shelingxingqiu.com/shootmini/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="https://static.shelingxingqiu.com/shootmini/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>
|
||||
+290
-40
@@ -1,6 +1,15 @@
|
||||
<script setup>
|
||||
import { ref, watch, onMounted, onBeforeUnmount, computed } from "vue";
|
||||
import {
|
||||
ref,
|
||||
watch,
|
||||
onMounted,
|
||||
onBeforeUnmount,
|
||||
computed,
|
||||
nextTick,
|
||||
getCurrentInstance,
|
||||
} from "vue";
|
||||
import PointSwitcher from "@/components/PointSwitcher.vue";
|
||||
import BowShotEffect from "@/components/BowShotEffect.vue";
|
||||
|
||||
import { MESSAGETYPES, MESSAGETYPESV2 } from "@/constants";
|
||||
import { simulShootAPI } from "@/apis";
|
||||
@@ -26,10 +35,18 @@ const props = defineProps({
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
isSvip: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: "solo", // solo 单排，team 双排
|
||||
},
|
||||
missAsZero: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
stop: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
@@ -51,46 +68,186 @@ const props = defineProps({
|
||||
const pMode = ref(true);
|
||||
const latestOne = ref(null);
|
||||
const bluelatestOne = ref(null);
|
||||
const prevScores = ref([]);
|
||||
const prevBlueScores = ref([]);
|
||||
const timer = ref(null);
|
||||
const dirTimer = ref(null);
|
||||
const angle = ref(null);
|
||||
const circleColor = ref("");
|
||||
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 getRoundText(shot) {
|
||||
if (shot?.ringX) return "X环";
|
||||
if (shot?.ring) return `${shot.ring}环`;
|
||||
return props.missAsZero ? "0环" : "未上靶";
|
||||
}
|
||||
|
||||
function buildShotEffectKey(team, shot, index) {
|
||||
return [
|
||||
team,
|
||||
index,
|
||||
shot?.playerId ?? "",
|
||||
shot?.x ?? "",
|
||||
shot?.y ?? "",
|
||||
shot?.ring ?? "",
|
||||
shot?.ringX ? 1 : 0,
|
||||
].join("-");
|
||||
}
|
||||
|
||||
function hasShotPoint(shot) {
|
||||
const x = Number(shot?.x);
|
||||
const y = Number(shot?.y);
|
||||
return Number.isFinite(x) && Number.isFinite(y);
|
||||
}
|
||||
|
||||
function shouldPlayShotEffect(shot) {
|
||||
return props.isSvip && !!shot && Number(shot.ring) > 0 && hasShotPoint(shot);
|
||||
}
|
||||
|
||||
function clearTipTimer() {
|
||||
if (timer.value) {
|
||||
clearTimeout(timer.value);
|
||||
timer.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
function showShotTip(team, shot) {
|
||||
clearTipTimer();
|
||||
if (team === "red") {
|
||||
latestOne.value = shot;
|
||||
timer.value = setTimeout(() => {
|
||||
latestOne.value = null;
|
||||
timer.value = null;
|
||||
}, 1000);
|
||||
return;
|
||||
}
|
||||
|
||||
bluelatestOne.value = shot;
|
||||
timer.value = setTimeout(() => {
|
||||
bluelatestOne.value = null;
|
||||
timer.value = null;
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function triggerShotEffect(team, shot, index) {
|
||||
const key = buildShotEffectKey(team, shot, index);
|
||||
|
||||
if (shotEffect.value?.team === "red") hiddenRedLatestKey.value = "";
|
||||
if (shotEffect.value?.team === "blue") hiddenBlueLatestKey.value = "";
|
||||
|
||||
if (team === "red") {
|
||||
latestOne.value = null;
|
||||
hiddenRedLatestKey.value = key;
|
||||
} else {
|
||||
bluelatestOne.value = null;
|
||||
hiddenBlueLatestKey.value = key;
|
||||
}
|
||||
|
||||
shotEffect.value = { key, team, shot };
|
||||
}
|
||||
|
||||
function completeShotEffect(key) {
|
||||
if (!shotEffect.value || shotEffect.value.key !== key) return;
|
||||
|
||||
const { team, shot } = shotEffect.value;
|
||||
if (team === "red") hiddenRedLatestKey.value = "";
|
||||
if (team === "blue") hiddenBlueLatestKey.value = "";
|
||||
shotEffect.value = null;
|
||||
showShotTip(team, shot);
|
||||
}
|
||||
|
||||
function shakeTarget() {
|
||||
targetShaking.value = false;
|
||||
if (shakeTimer.value) {
|
||||
clearTimeout(shakeTimer.value);
|
||||
shakeTimer.value = null;
|
||||
}
|
||||
|
||||
nextTick(() => {
|
||||
targetShaking.value = true;
|
||||
shakeTimer.value = setTimeout(() => {
|
||||
targetShaking.value = false;
|
||||
shakeTimer.value = null;
|
||||
}, 260);
|
||||
});
|
||||
}
|
||||
|
||||
function updateTargetSize() {
|
||||
nextTick(() => {
|
||||
const query = instance?.proxy
|
||||
? uni.createSelectorQuery().in(instance.proxy)
|
||||
: uni.createSelectorQuery();
|
||||
|
||||
query
|
||||
.select(".target")
|
||||
.boundingClientRect((rect) => {
|
||||
const width = Number(rect?.width);
|
||||
const height = Number(rect?.height);
|
||||
if (!Number.isFinite(width) || !Number.isFinite(height)) return;
|
||||
if (width <= 0 || height <= 0) return;
|
||||
targetSize.value = { width, height };
|
||||
})
|
||||
.exec();
|
||||
});
|
||||
}
|
||||
|
||||
function handleWindowResize() {
|
||||
updateTargetSize();
|
||||
}
|
||||
|
||||
function shouldHideRedHit(index) {
|
||||
return !!hiddenRedLatestKey.value && index === props.scores.length - 1;
|
||||
}
|
||||
|
||||
function shouldHideBlueHit(index) {
|
||||
return !!hiddenBlueLatestKey.value && index === props.blueScores.length - 1;
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.scores,
|
||||
(newVal) => {
|
||||
if (newVal.length - prevScores.value.length === 1) {
|
||||
latestOne.value = newVal[newVal.length - 1];
|
||||
if (timer.value) clearTimeout(timer.value);
|
||||
timer.value = setTimeout(() => {
|
||||
latestOne.value = null;
|
||||
}, 1000);
|
||||
() => props.scores.length,
|
||||
(newLen, oldLen) => {
|
||||
if (newLen === oldLen + 1) {
|
||||
const latestShot = props.scores[newLen - 1];
|
||||
if (shouldPlayShotEffect(latestShot)) {
|
||||
triggerShotEffect("red", latestShot, newLen - 1);
|
||||
} else {
|
||||
showShotTip("red", latestShot);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (newLen < oldLen) {
|
||||
latestOne.value = null;
|
||||
hiddenRedLatestKey.value = "";
|
||||
if (shotEffect.value?.team === "red") shotEffect.value = null;
|
||||
}
|
||||
prevScores.value = [...newVal];
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.blueScores,
|
||||
(newVal) => {
|
||||
if (newVal.length - prevBlueScores.value.length === 1) {
|
||||
bluelatestOne.value = newVal[newVal.length - 1];
|
||||
if (timer.value) clearTimeout(timer.value);
|
||||
timer.value = setTimeout(() => {
|
||||
bluelatestOne.value = null;
|
||||
}, 1000);
|
||||
() => props.blueScores.length,
|
||||
(newLen, oldLen) => {
|
||||
if (newLen === oldLen + 1) {
|
||||
const latestShot = props.blueScores[newLen - 1];
|
||||
if (shouldPlayShotEffect(latestShot)) {
|
||||
triggerShotEffect("blue", latestShot, newLen - 1);
|
||||
} else {
|
||||
showShotTip("blue", latestShot);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (newLen < oldLen) {
|
||||
bluelatestOne.value = null;
|
||||
hiddenBlueLatestKey.value = "";
|
||||
if (shotEffect.value?.team === "blue") shotEffect.value = null;
|
||||
}
|
||||
prevBlueScores.value = [...newVal];
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
|
||||
@@ -164,6 +321,15 @@ function getHitStyle(shot) {
|
||||
};
|
||||
}
|
||||
|
||||
function getSvipHitBgStyle(shot) {
|
||||
const radius = currentHitRadiusPx.value;
|
||||
const point = getShotPoint(shot);
|
||||
|
||||
return {
|
||||
...getTargetPositionStyle(point, radius),
|
||||
};
|
||||
}
|
||||
|
||||
function getRoundTipStyle(shot) {
|
||||
const point = getShotPoint(shot, true);
|
||||
return getTargetPositionStyle(
|
||||
@@ -228,6 +394,8 @@ async function onReceiveMessage(message) {
|
||||
|
||||
onMounted(() => {
|
||||
uni.$on("socket-inbox", onReceiveMessage);
|
||||
updateTargetSize();
|
||||
if (uni.onWindowResize) uni.onWindowResize(handleWindowResize);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
@@ -239,12 +407,17 @@ 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">
|
||||
<view :class="['container', { 'container--effecting': shotEffect }]">
|
||||
<view class="header" v-if="totalRound > 0">
|
||||
<text v-if="totalRound > 0" class="round-count">{{
|
||||
(currentRound > totalRound ? totalRound : currentRound) +
|
||||
@@ -252,7 +425,7 @@ onBeforeUnmount(() => {
|
||||
totalRound
|
||||
}}</text>
|
||||
</view>
|
||||
<view class="target">
|
||||
<view :class="['target', { 'target--shake': targetShaking }]">
|
||||
<view v-if="angle !== null" class="arrow-dir" :style="arrowStyle">
|
||||
<view :style="{ background: circleColor }">
|
||||
<image src="../static/dot-circle.png" mode="widthFix" />
|
||||
@@ -270,8 +443,7 @@ onBeforeUnmount(() => {
|
||||
v-if="latestOne"
|
||||
class="round-tip fade-in-out"
|
||||
:style="getRoundTipStyle(latestOne)"
|
||||
>{{ latestOne.ringX ? "X" : latestOne.ring || "未上靶"
|
||||
}}<text v-if="latestOne.ring">环</text>
|
||||
>{{ getRoundText(latestOne) }}
|
||||
</view>
|
||||
<view
|
||||
v-if="
|
||||
@@ -288,12 +460,18 @@ onBeforeUnmount(() => {
|
||||
v-if="bluelatestOne"
|
||||
class="round-tip fade-in-out"
|
||||
:style="getRoundTipStyle(bluelatestOne)"
|
||||
>{{ bluelatestOne.ringX ? "X" : bluelatestOne.ring || "未上靶"
|
||||
}}<text v-if="bluelatestOne.ring">环</text></view
|
||||
>{{ getRoundText(bluelatestOne) }}</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"
|
||||
v-if="bow.ring > 0 && !shouldHideRedHit(index)"
|
||||
:class="`hit ${pMode ? 'b' : 's'}-point ${
|
||||
index === scores.length - 1 && latestOne ? 'pump-in' : ''
|
||||
}`"
|
||||
@@ -305,8 +483,15 @@ onBeforeUnmount(() => {
|
||||
>
|
||||
</block>
|
||||
<block v-for="(bow, index) in blueScores" :key="index">
|
||||
<image
|
||||
v-if="pMode && isSvip && bow.ring > 0 && !shouldHideBlueHit(index)"
|
||||
class="svip-hit-bg"
|
||||
src="../static/vip/svip-xuan.png"
|
||||
:style="getSvipHitBgStyle(bow)"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<view
|
||||
v-if="bow.ring > 0"
|
||||
v-if="bow.ring > 0 && !shouldHideBlueHit(index)"
|
||||
:class="`hit ${pMode ? 'b' : 's'}-point ${
|
||||
index === blueScores.length - 1 && bluelatestOne ? 'pump-in' : ''
|
||||
}`"
|
||||
@@ -318,7 +503,17 @@ onBeforeUnmount(() => {
|
||||
<text v-if="pMode">{{ index + 1 }}</text>
|
||||
</view>
|
||||
</block>
|
||||
<image src="../static/bow-target.png" mode="widthFix" />
|
||||
<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="https://static.shelingxingqiu.com/shootmini/static/bow-target.png" mode="widthFix" />
|
||||
</view>
|
||||
<view class="footer">
|
||||
<PointSwitcher
|
||||
@@ -339,13 +534,22 @@ 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;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
transform-origin: center center;
|
||||
}
|
||||
.target--shake {
|
||||
animation: target-shake 0.26s ease-out;
|
||||
}
|
||||
.e-value {
|
||||
position: absolute;
|
||||
@@ -400,17 +604,26 @@ onBeforeUnmount(() => {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.svip-hit-bg {
|
||||
position: absolute;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
transform-origin: center center;
|
||||
animation: svip-hit-xuan 1.2s linear infinite;
|
||||
}
|
||||
.hit {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
z-index: 1;
|
||||
z-index: 2;
|
||||
color: #fff;
|
||||
transition: all 0.3s ease;
|
||||
transition: transform 0.2s ease, opacity 0.2s ease;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.b-point {
|
||||
border: 1px solid #fff;
|
||||
z-index: 1;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@@ -426,6 +639,20 @@ 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);
|
||||
@@ -435,6 +662,29 @@ onBeforeUnmount(() => {
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes target-shake {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
14% {
|
||||
transform: translate(-20rpx, 8rpx);
|
||||
}
|
||||
28% {
|
||||
transform: translate(16rpx, -8rpx);
|
||||
}
|
||||
44% {
|
||||
transform: translate(-12rpx, 6rpx);
|
||||
}
|
||||
64% {
|
||||
transform: translate(8rpx, -4rpx);
|
||||
}
|
||||
82% {
|
||||
transform: translate(-4rpx, 2rpx);
|
||||
}
|
||||
100% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
.hit.pump-in {
|
||||
animation: target-pump-in 0.3s ease-out forwards;
|
||||
transform-origin: center center;
|
||||
|
||||
+17
-128
@@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onBeforeUnmount } from "vue";
|
||||
import { ref } from "vue";
|
||||
import { onShow } from "@dcloudio/uni-app";
|
||||
import AppBackground from "@/components/AppBackground.vue";
|
||||
import Header from "@/components/Header.vue";
|
||||
@@ -7,7 +7,7 @@ import ScreenHint from "@/components/ScreenHint.vue";
|
||||
import BackToGame from "@/components/BackToGame.vue";
|
||||
import {laserAimAPI, getBattleAPI, matchGameAPI} from "@/apis";
|
||||
import { capsuleHeight, debounce } from "@/util";
|
||||
import AudioManager from "@/audioManager";
|
||||
import { returnToBattle } from "@/utils/matchReturn";
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
@@ -45,6 +45,10 @@ const props = defineProps({
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
titleStyle: {
|
||||
type: [String, Object, Array],
|
||||
default: () => ({}),
|
||||
},
|
||||
showBottom: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
@@ -54,9 +58,6 @@ const isIOS = uni.getDeviceInfo().osName === "ios";
|
||||
const showHint = ref(false);
|
||||
const hintType = ref(0);
|
||||
const isLoading = ref(false);
|
||||
const audioInitProgress = ref(1);
|
||||
const audioProgress = ref(0);
|
||||
const audioTimer = ref(null);
|
||||
|
||||
const showGlobalHint = (type) => {
|
||||
hintType.value = type;
|
||||
@@ -67,49 +68,21 @@ const hideGlobalHint = () => {
|
||||
showHint.value = false;
|
||||
};
|
||||
|
||||
const restart = () => {
|
||||
uni.restartMiniProgram({
|
||||
path: "/pages/index",
|
||||
});
|
||||
};
|
||||
|
||||
const checkAudioProgress = async () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
audioInitProgress.value = AudioManager.getLoadProgress();
|
||||
if (audioInitProgress.value === 1) return resolve();
|
||||
audioTimer.value = setInterval(() => {
|
||||
audioProgress.value = AudioManager.getLoadProgress();
|
||||
if (audioProgress.value === 1) {
|
||||
setTimeout(() => {
|
||||
audioInitProgress.value = 1;
|
||||
}, 200);
|
||||
clearInterval(audioTimer.value);
|
||||
resolve();
|
||||
}
|
||||
}, 200);
|
||||
} catch (err) {
|
||||
reject(err);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const audioFinalProgress = computed(() => {
|
||||
const left = 1 - audioInitProgress.value;
|
||||
return Math.max(0, (audioProgress.value - audioInitProgress.value) / left);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (audioTimer.value) clearInterval(audioTimer.value);
|
||||
});
|
||||
|
||||
onShow(() => {
|
||||
uni.$showHint = showGlobalHint;
|
||||
uni.$hideHint = hideGlobalHint;
|
||||
uni.$checkAudio = checkAudioProgress;
|
||||
showHint.value = false;
|
||||
});
|
||||
|
||||
const navigateTo = (url) =>
|
||||
new Promise((resolve, reject) => {
|
||||
uni.navigateTo({
|
||||
url,
|
||||
success: resolve,
|
||||
fail: reject,
|
||||
});
|
||||
});
|
||||
|
||||
const backToGame = debounce(async () => {
|
||||
if (isLoading.value) return; // 防止重复点击
|
||||
|
||||
@@ -117,16 +90,7 @@ const backToGame = debounce(async () => {
|
||||
isLoading.value = true;
|
||||
const result = await getBattleAPI();
|
||||
if (result && result.matchId) {
|
||||
await checkAudioProgress();
|
||||
if (result.mode <= 3) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/team-battle/index?battleId=${result.matchId}`,
|
||||
});
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: `/pages/melee-battle?battleId=${result.matchId}`,
|
||||
});
|
||||
}
|
||||
await returnToBattle(result, navigateTo);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("获取当前游戏失败:", error);
|
||||
@@ -160,6 +124,7 @@ const goCalibration = async () => {
|
||||
:title="title"
|
||||
:onBack="onBack"
|
||||
:whiteBackArrow="whiteBackArrow"
|
||||
:titleStyle="titleStyle"
|
||||
/>
|
||||
<BackToGame v-if="showBackToGame" />
|
||||
<scroll-view
|
||||
@@ -224,24 +189,6 @@ const goCalibration = async () => {
|
||||
</view>
|
||||
</view>
|
||||
</ScreenHint>
|
||||
<view v-if="audioInitProgress < 1" class="audio-progress">
|
||||
<image
|
||||
src="https://static.shelingxingqiu.com/attachment/2025-11-26/deihtj15xjwcz3c1tx.png"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view>
|
||||
<view :style="{ width: `${audioFinalProgress * 100}%` }">
|
||||
<!-- <image
|
||||
src="https://static.shelingxingqiu.com/attachment/2025-11-24/degu91a7si77sg9jqv.png"
|
||||
mode="widthFix"
|
||||
/> -->
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<text>若加载时间过长，请</text>
|
||||
<button hover-class="none" @click="restart">点击这里重启</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -283,62 +230,4 @@ const goCalibration = async () => {
|
||||
color: #666;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.audio-progress {
|
||||
z-index: 999;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgb(0 0 0 / 0.8);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.audio-progress > image:nth-child(1) {
|
||||
width: 140rpx;
|
||||
height: 150rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.audio-progress > view:nth-child(2) {
|
||||
width: 380rpx;
|
||||
height: 6rpx;
|
||||
background: #595959;
|
||||
border-radius: 4rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.audio-progress > view:nth-child(2) > view {
|
||||
background: #ffe431;
|
||||
min-height: 6rpx;
|
||||
border-radius: 4rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
transition: width 0.5s ease;
|
||||
}
|
||||
.audio-progress > view:nth-child(2) > view > image {
|
||||
width: 46rpx;
|
||||
height: 26rpx;
|
||||
}
|
||||
.audio-progress > view:nth-child(3) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.audio-progress > view:nth-child(3) > text {
|
||||
font-size: 22rpx;
|
||||
color: #a2a2a2;
|
||||
text-align: center;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
.audio-progress > view:nth-child(3) > button {
|
||||
font-size: 22rpx;
|
||||
color: #ffe431;
|
||||
line-height: 32rpx;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -36,6 +36,7 @@ const createRoom = debounce(async () => {
|
||||
}
|
||||
if (loading.value === true) return;
|
||||
loading.value = true;
|
||||
let keepLoading = false;
|
||||
let size = 2;
|
||||
if (battleMode.value === 2) size = 10;
|
||||
if (battleMode.value === 3) size = 4;
|
||||
@@ -49,14 +50,18 @@ const createRoom = debounce(async () => {
|
||||
if (result.number) {
|
||||
props.onConfirm();
|
||||
await joinRoomAPI(result.number);
|
||||
keepLoading = true;
|
||||
uni.navigateTo({
|
||||
url: "/pages/battle-room?roomNumber=" + result.number + "&target=" + targetMode.value,
|
||||
fail: () => {
|
||||
loading.value = false;
|
||||
},
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
if (!keepLoading) loading.value = false;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -64,7 +69,7 @@ const createRoom = debounce(async () => {
|
||||
<view class="container">
|
||||
<view class="target-options-header">
|
||||
<view class="target-options-header-line-left"></view>
|
||||
<image class="target-options-header-title-img" src="../static/choose-battle-mode.png" mode="widthFix" />
|
||||
<image class="target-options-header-title-img" src="https://static.shelingxingqiu.com/shootmini/static/choose-battle-mode.png" mode="widthFix" />
|
||||
<view class="target-options-header-line-right"></view>
|
||||
</view>
|
||||
<view class="create-options">
|
||||
@@ -112,7 +117,7 @@ const createRoom = debounce(async () => {
|
||||
<text>40厘米全环靶</text>
|
||||
</view>
|
||||
</view>
|
||||
<SButton :onClick="() => $clickSound(createRoom)">创建房间</SButton>
|
||||
<SButton :disabled="loading" :onClick="() => { $clickSound(); return createRoom(); }">创建房间</SButton>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -12,13 +12,13 @@ defineProps({
|
||||
const bubbleTypes = [
|
||||
"../static/long-bubble.png",
|
||||
"../static/long-bubble-middle.png",
|
||||
"../static/long-bubble-tall.png",
|
||||
"https://static.shelingxingqiu.com/shootmini/static/long-bubble-tall.png",
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<image src="../static/shooter.png" mode="widthFix" />
|
||||
<image src="https://static.shelingxingqiu.com/shootmini/static/shooter.png" mode="widthFix" />
|
||||
<view>
|
||||
<image
|
||||
v-if="!noBg"
|
||||
|
||||
@@ -26,6 +26,10 @@ const props = defineProps({
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
titleStyle: {
|
||||
type: [String, Object, Array],
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
const onClick = () => {
|
||||
@@ -55,6 +59,9 @@ 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);
|
||||
@@ -115,7 +122,9 @@ onBeforeUnmount(() => {
|
||||
mode="widthFix"
|
||||
/>
|
||||
</view>
|
||||
<view :style="{ color: whiteBackArrow ? '#fff' : '#000' }">
|
||||
<view
|
||||
:style="[{ color: whiteBackArrow ? '#fff' : '#000' }, titleStyle]"
|
||||
>
|
||||
<view
|
||||
v-if="currentPage === 'pages/point-book'"
|
||||
class="user-header"
|
||||
@@ -128,7 +137,21 @@ onBeforeUnmount(() => {
|
||||
:size="40"
|
||||
borderColor="#333"
|
||||
/>
|
||||
<text class="truncate">{{ user.nickName }}</text>
|
||||
<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>
|
||||
<image
|
||||
v-if="heat"
|
||||
:src="`../static/hot${heat}.png`"
|
||||
@@ -285,7 +308,8 @@ onBeforeUnmount(() => {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
}
|
||||
.user-header > text:nth-child(2) {
|
||||
.user-header > text:nth-child(2),
|
||||
.user-header > .point-book-user-name {
|
||||
font-weight: 500;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
@@ -316,7 +340,7 @@ onBeforeUnmount(() => {
|
||||
width: 156rpx;
|
||||
height: 28rpx;
|
||||
font-weight: 400;
|
||||
font-size: 20rpx;
|
||||
font-size: 24rpx;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
line-height: 28rpx;
|
||||
|
||||
@@ -105,7 +105,7 @@ onBeforeUnmount(() => {
|
||||
<template>
|
||||
<view class="matching">
|
||||
<image
|
||||
src="../static/matching-bg.png"
|
||||
src="https://static.shelingxingqiu.com/shootmini/static/matching-bg.png"
|
||||
mode="widthFix"
|
||||
class="matching-bg"
|
||||
/>
|
||||
|
||||
@@ -0,0 +1,234 @@
|
||||
<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="https://static.shelingxingqiu.com/shootmini/static/common/dialog-light.png"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<image
|
||||
class="dialog-icon"
|
||||
src="https://static.shelingxingqiu.com/shootmini/static/common/dialog-icon.png"
|
||||
mode="widthFix"
|
||||
/>
|
||||
|
||||
<view class="dialog-panel">
|
||||
<image
|
||||
class="dialog-bg"
|
||||
src="https://static.shelingxingqiu.com/shootmini/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>
|
||||
@@ -0,0 +1,429 @@
|
||||
<script setup>
|
||||
import { computed } from "vue";
|
||||
import { getDeviceBatteryAPI } from "@/apis";
|
||||
|
||||
const OTA_MIN_BATTERY = 50;
|
||||
const OTA_LOW_BATTERY_TEXT = "电量不足 50%，暂不支持 OTA 升级";
|
||||
const OTA_OFFLINE_TEXT = "请先开启智能弓";
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
state: {
|
||||
type: String,
|
||||
default: "new_version", // new_version | update_progress | update_success | update_failure
|
||||
},
|
||||
version: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
progress: {
|
||||
type: Number,
|
||||
default: 40,
|
||||
},
|
||||
// 副标题：如“新版本将优化智能弓体验”
|
||||
description: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
// 详细说明：如“升级前请确保：...”
|
||||
changelog: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
forceUpdate: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update", "skip", "close", "done", "retry"]);
|
||||
|
||||
const isNewVersion = computed(() => props.state === "new_version");
|
||||
const isProgress = computed(() => props.state === "update_progress");
|
||||
const isSuccess = computed(() => props.state === "update_success");
|
||||
const isFailure = computed(() => props.state === "update_failure");
|
||||
// Clamp progress to keep the progress bar width within its container.
|
||||
const progressValue = computed(() => Math.min(100, Math.max(0, Number(props.progress) || 0)));
|
||||
|
||||
// 点击立即更新前先校验设备在线状态，再校验设备电量。
|
||||
const handleUpdateClick = async () => {
|
||||
try {
|
||||
const deviceStatus = await getDeviceBatteryAPI();
|
||||
if (deviceStatus?.online !== true) {
|
||||
uni.showToast({
|
||||
title: OTA_OFFLINE_TEXT,
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (Number(deviceStatus?.battery) <= OTA_MIN_BATTERY) {
|
||||
uni.showToast({
|
||||
title: OTA_LOW_BATTERY_TEXT,
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
} catch (err) {
|
||||
emit("update");
|
||||
return;
|
||||
}
|
||||
emit("update");
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view v-if="visible" class="ota-mask">
|
||||
<!-- 图标 + 弹窗卡片 容器 -->
|
||||
<view
|
||||
class="ota-outer"
|
||||
:class="isNewVersion ? 'outer-new' : 'outer-result'"
|
||||
>
|
||||
<!-- 悬浮图标（溢出卡片顶部） -->
|
||||
<image
|
||||
v-if="isNewVersion"
|
||||
src="https://static.shelingxingqiu.com/shootmini/static/ota/ota-mascot.png"
|
||||
mode="aspectFit"
|
||||
class="float-icon float-mascot"
|
||||
/>
|
||||
<image
|
||||
v-else-if="isSuccess"
|
||||
src="https://static.shelingxingqiu.com/shootmini/static/ota/check-char.png"
|
||||
mode="aspectFit"
|
||||
class="float-icon float-check"
|
||||
/>
|
||||
<image
|
||||
v-else-if="isFailure"
|
||||
src="https://static.shelingxingqiu.com/shootmini/static/ota/close-char.png"
|
||||
mode="aspectFit"
|
||||
class="float-icon float-close"
|
||||
/>
|
||||
<image
|
||||
v-else-if="isProgress"
|
||||
src="https://static.shelingxingqiu.com/shootmini/static/ota/target-char.png"
|
||||
mode="aspectFit"
|
||||
class="float-icon float-target"
|
||||
/>
|
||||
|
||||
<!-- 弹窗卡片：overflow:visible 允许按钮溢出底部，背景图通过 ota-bg-clip 独立裁剪保持圆角 -->
|
||||
<view class="ota-dialog">
|
||||
<view class="ota-bg-clip">
|
||||
<image src="https://static.shelingxingqiu.com/shootmini/static/ota/ota-bg.png" mode="aspectFill" class="ota-bg" />
|
||||
</view>
|
||||
<view
|
||||
class="ota-content"
|
||||
:class="{ 'content-new': isNewVersion, 'content-result': isProgress || isSuccess || isFailure }"
|
||||
>
|
||||
|
||||
<!-- 发现新版本：new-ver.png 已包含标题图，不再重复文字；版本号使用 ota-ver.png 胶囊背景 -->
|
||||
<block v-if="isNewVersion">
|
||||
<image src="https://static.shelingxingqiu.com/shootmini/static/ota/new-ver.png" mode="aspectFit" class="new-ver-img" />
|
||||
<view v-if="version" class="version-tag-wrap">
|
||||
<image src="https://static.shelingxingqiu.com/shootmini/static/ota/ota-ver.png" mode="aspectFit" class="version-tag-bg-img" />
|
||||
<text class="version-tag">{{ version }}</text>
|
||||
</view>
|
||||
<!-- 副标题：如“新版本将优化智能弓体验”，离下方详情 12rpx -->
|
||||
<text v-if="description" class="desc-text">{{ description }}</text>
|
||||
<!-- 详细说明：如“升级前请确保：...” -->
|
||||
<text v-if="changelog" class="changelog-text">{{ changelog }}</text>
|
||||
<view class="btn-group">
|
||||
<view class="primary-btn" @click="handleUpdateClick">
|
||||
<text class="primary-btn-text">立即更新</text>
|
||||
</view>
|
||||
<text v-if="!forceUpdate" class="skip-text" @click="emit('skip')">暂不更新</text>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- 更新成功：图片左边距 34rpx，文案左边距 44rpx，按钮浮动底部居中 -->
|
||||
<block v-else-if="isSuccess">
|
||||
<image src="https://static.shelingxingqiu.com/shootmini/static/ota/update-ok.png" mode="aspectFit" class="result-title-img" style="width: 220rpx; height: 62rpx;" />
|
||||
<text class="dialog-desc">请关机并重启智能弓</text>
|
||||
<view class="btn-group-result">
|
||||
<view class="primary-btn" @click="emit('done')">
|
||||
<text class="primary-btn-text">完成</text>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- 更新中：复用成功标题图，正文区域展示进度条，无底部按钮 -->
|
||||
<block v-else-if="isProgress">
|
||||
<image src="https://static.shelingxingqiu.com/shootmini/static/ota/update_progress.png" mode="aspectFit" class="result-title-img" style="width: 220rpx; height: 62rpx;" />
|
||||
<view class="progress-wrap">
|
||||
<view class="progress-track">
|
||||
<view class="progress-fill" :style="{ width: `${progressValue}%` }"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- 更新失败：图片左边距 34rpx，文案左对齐 44rpx，按钮浮动底部居中 -->
|
||||
<block v-else-if="isFailure">
|
||||
<image src="https://static.shelingxingqiu.com/shootmini/static/ota/update-fail.png" mode="aspectFit" class="result-title-img" style="width: 222rpx; height: 62rpx;" />
|
||||
<text class="dialog-desc">请确保：</text>
|
||||
<text class="dialog-desc">1、智能弓已开启</text>
|
||||
<text class="dialog-desc">2、网路连接稳定</text>
|
||||
<view class="btn-group-result">
|
||||
<view class="primary-btn" @click="emit('retry')">
|
||||
<text class="primary-btn-text">重试</text>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 关闭按钮（仅新版本状态，非强制更新时，位于弹窗下方） -->
|
||||
<view
|
||||
v-if="(isNewVersion || isFailure) && !forceUpdate"
|
||||
class="ota-close-below"
|
||||
@click="emit('close')"
|
||||
>
|
||||
<image src="../static/sicon/close.png" mode="aspectFit" style="width: 56rpx; height: 56rpx;" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.ota-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 外层容器：相对定位，为浮动图标创造溢出空间 */
|
||||
.ota-outer {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
}
|
||||
/* 设计图：吉祥物向上突出弹窗顶部 40px（375px基准）× 2 = 80rpx */
|
||||
.outer-new {
|
||||
padding-top: 80rpx;
|
||||
}
|
||||
.outer-result {
|
||||
padding-top: 80rpx;
|
||||
padding-bottom: 66rpx;
|
||||
}
|
||||
|
||||
/* 浮动图标（绝对定位，位于卡片顶部上方） */
|
||||
.float-icon {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
/* 吉祥物尺寸：设计图 149×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;
|
||||
width: 116rpx;
|
||||
height: 44rpx;
|
||||
/* 离标题图 -10rpx，左边距 50rpx，离下方副标题 22rpx */
|
||||
margin-top: -10rpx;
|
||||
margin-left: 50rpx;
|
||||
margin-bottom: 22rpx;
|
||||
}
|
||||
/* ota-ver.png 胶囊背景图 */
|
||||
.version-tag-bg-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/* 版本号文字：浮于背景图之上 */
|
||||
.version-tag {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
color: rgba(254, 222, 100, 1);
|
||||
font-size: 24rpx;
|
||||
padding: 8rpx 22rpx 4rpx 24rpx;
|
||||
}
|
||||
/* 副标题（如"新版本将优化智能弓体验"）：左边距 44rpx，离下方文案 12rpx */
|
||||
.desc-text {
|
||||
font-weight: 500;
|
||||
font-size: 26rpx;
|
||||
color: #FFFFFF;
|
||||
line-height: 36rpx;
|
||||
text-align: left;
|
||||
margin-left: 44rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
/* 详细说明文案（如“升级前请确保：...”）：左边距 44rpx */
|
||||
.changelog-text {
|
||||
font-weight: 400;
|
||||
font-size: 26rpx;
|
||||
color: #FFFFFF;
|
||||
line-height: 40rpx;
|
||||
text-align: left;
|
||||
margin-left: 44rpx;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* 按钮组（新版本状态）：离上方文案 30rpx，内部按钮间距 24rpx */
|
||||
.btn-group {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 30rpx;
|
||||
gap: 24rpx;
|
||||
}
|
||||
/* 按钮组（结果状态）：绝对定位，溢出卡片底边 -35rpx 悬浮在底边中间 */
|
||||
.btn-group-result {
|
||||
position: absolute;
|
||||
bottom: -35rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
/* 主按钮：按照设计规范 width: 232rpx, height: 70rpx */
|
||||
.primary-btn {
|
||||
width: 232rpx;
|
||||
height: 70rpx;
|
||||
background-color: #FED847;
|
||||
border-radius: 44rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.primary-btn-text {
|
||||
font-weight: 500;
|
||||
font-size: 26rpx;
|
||||
color: #000000;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
/* 暂不更新：设计规范颜色 #5FADFF 蓝色 */
|
||||
.skip-text {
|
||||
font-weight: 400;
|
||||
font-size: 26rpx;
|
||||
color: #5FADFF;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
/* 更新结果内容：图片左边距 34rpx，下边距 16rpx */
|
||||
.result-title-img {
|
||||
margin-left: 34rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
/* 结果页文案：左对齐，左边距 44rpx，与 new_version 保持一致 */
|
||||
.dialog-desc {
|
||||
font-weight: 400;
|
||||
font-size: 26rpx;
|
||||
color: #FFFFFF;
|
||||
line-height: 40rpx;
|
||||
text-align: left;
|
||||
margin-left: 44rpx;
|
||||
}
|
||||
.progress-wrap {
|
||||
width: 394rpx;
|
||||
margin-top: 40rpx;
|
||||
margin-left: 44rpx;
|
||||
}
|
||||
.progress-track {
|
||||
width: 100%;
|
||||
height: 18rpx;
|
||||
background-color: rgba(255, 255, 255, 0.28);
|
||||
border-radius: 999rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background-color: #FED847;
|
||||
border-radius: 999rpx;
|
||||
}
|
||||
|
||||
/* 关闭按钮（位于弹窗下方） */
|
||||
.ota-close-below {
|
||||
margin-top: 40rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@@ -19,8 +19,15 @@ const rowCount = new Array(6).fill(0);
|
||||
const getRingText = (arrow) => {
|
||||
if (!arrow) return "-";
|
||||
if (arrow.ringX && arrow.ring) return "X环";
|
||||
return arrow.ring ? `${arrow.ring}环` : "-";
|
||||
return `${Number(arrow.ring) || 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>
|
||||
@@ -37,7 +44,16 @@ const getRingText = (arrow) => {
|
||||
mode="widthFix"
|
||||
/>
|
||||
<image :src="player.avatar || '../static/user-icon.png'" mode="widthFix" />
|
||||
<text>{{ player.name }}</text>
|
||||
<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>
|
||||
<view>
|
||||
<view>
|
||||
<view v-for="(_, index) in rowCount" :key="index">
|
||||
@@ -98,6 +114,13 @@ const getRingText = (arrow) => {
|
||||
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;
|
||||
|
||||
@@ -20,13 +20,22 @@ const props = defineProps({
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const isMember = (player = {}) => player.vip === true || player.sVip === true;
|
||||
|
||||
const getMemberNicknameClass = (player = {}) => [
|
||||
"member-nickname",
|
||||
player.vip === true && player.sVip !== true ? "member-nickname--vip" : "",
|
||||
player.sVip === true ? "member-nickname--svip" : "",
|
||||
];
|
||||
|
||||
const seats = new Array(props.total).fill(1);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="players">
|
||||
<view v-for="(_, index) in seats" :key="index">
|
||||
<image src="../static/player-bg.png" mode="widthFix" />
|
||||
<image src="https://static.shelingxingqiu.com/shootmini/static/player-bg.png" mode="widthFix" />
|
||||
<view v-if="players[index] && players[index].name" class="avatar">
|
||||
<Avatar
|
||||
:src="players[index].avatar || '../static/user-icon.png'"
|
||||
@@ -40,10 +49,27 @@ const seats = new Array(props.total).fill(1);
|
||||
<view v-else class="player-unknow">
|
||||
<image src="../static/question-mark.png" mode="widthFix" />
|
||||
</view>
|
||||
<text v-if="players[index] && players[index].name">{{
|
||||
players[index].name
|
||||
}}</text>
|
||||
<text v-else :style="{ color: '#fff9' }">虚位以待</text>
|
||||
<view
|
||||
v-if="players[index] && players[index].name && isMember(players[index])"
|
||||
:class="['player-seat-name', ...getMemberNicknameClass(players[index])]"
|
||||
>
|
||||
<text class="member-nickname__text">{{ players[index].name }}</text>
|
||||
<text
|
||||
v-if="players[index].sVip === true"
|
||||
class="member-nickname__shine"
|
||||
>
|
||||
{{ players[index].name }}
|
||||
</text>
|
||||
</view>
|
||||
<text
|
||||
v-else-if="players[index] && players[index].name"
|
||||
class="player-seat-name"
|
||||
>
|
||||
{{ players[index].name }}
|
||||
</text>
|
||||
<text v-else class="player-seat-name" :style="{ color: '#fff9' }">
|
||||
虚位以待
|
||||
</text>
|
||||
<view v-if="index === 0" class="founder">管理员</view>
|
||||
<!-- <image
|
||||
:src="`../static/player-${index + 1}.png`"
|
||||
@@ -108,7 +134,7 @@ const seats = new Array(props.total).fill(1);
|
||||
height: 28rpx;
|
||||
line-height: 28rpx;
|
||||
}
|
||||
.players > view > text:nth-child(3) {
|
||||
.player-seat-name {
|
||||
width: 20vw;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -22,6 +22,15 @@ 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) => {
|
||||
@@ -53,7 +62,13 @@ const onClick = async () => {
|
||||
<view>
|
||||
<Avatar :src="data.avatar || '../static/user-icon.png'" :size="36" />
|
||||
<view>
|
||||
<text class="truncate">{{ data.name }}</text>
|
||||
<view v-if="isMember(data)" :class="getMemberNicknameClass(data)">
|
||||
<text class="member-nickname__text">{{ data.name }}</text>
|
||||
<text v-if="data.sVip === true" class="member-nickname__shine">
|
||||
{{ data.name }}
|
||||
</text>
|
||||
</view>
|
||||
<text v-else class="truncate">{{ data.name }}</text>
|
||||
<view>
|
||||
<text>{{ data.totalDay }}天</text>
|
||||
<view />
|
||||
@@ -118,6 +133,14 @@ 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;
|
||||
|
||||
@@ -65,7 +65,7 @@ onMounted(() => {
|
||||
</view>
|
||||
</view>
|
||||
<view class="right-part">
|
||||
<image src="../static/bow-target.png" mode="widthFix" />
|
||||
<image src="https://static.shelingxingqiu.com/shootmini/static/bow-target.png" mode="widthFix" />
|
||||
<view class="arrow-amount">
|
||||
<text>{{ data.actualTotalRing }}</text>
|
||||
<text>/</text>
|
||||
|
||||
@@ -93,7 +93,7 @@ onMounted(async () => {
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<image src="../static/donate.png" mode="widthFix" />
|
||||
<image src="https://static.shelingxingqiu.com/shootmini/static/donate.png" mode="widthFix" />
|
||||
<text>感谢您对我们公益项目的支持！</text>
|
||||
<view class="amounts">
|
||||
<button
|
||||
|
||||
@@ -26,8 +26,8 @@ const items = ref(new Array(props.total).fill(9));
|
||||
const width = ref(92);
|
||||
const itemWidth = ref(0);
|
||||
const bgImages = [
|
||||
"../static/complete-light1.png",
|
||||
"../static/complete-light2.png",
|
||||
"https://static.shelingxingqiu.com/shootmini/static/complete-light1.png",
|
||||
"https://static.shelingxingqiu.com/shootmini/static/complete-light2.png",
|
||||
];
|
||||
const bgIndex = ref(0);
|
||||
watch(
|
||||
|
||||
@@ -70,13 +70,18 @@ const arrows = computed(() => {
|
||||
});
|
||||
|
||||
const validArrows = computed(() => arrows.value.filter((a) => !!a.ring).length);
|
||||
const isMember = computed(() => user.value.vip === true || user.value.sVip === true);
|
||||
const openCoachComment = () => {
|
||||
if (!isMember.value) return;
|
||||
showComment.value = true;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<view :class="['container-header', showPanel ? 'scale-in' : 'scale-out']">
|
||||
<image :src="tipSrc" mode="widthFix" />
|
||||
<image src="../static/finish-frame.png" mode="widthFix" />
|
||||
<image src="https://static.shelingxingqiu.com/shootmini/static/finish-frame.png" mode="widthFix" />
|
||||
<text
|
||||
>完成<text class="gold-text">{{ validArrows }}</text
|
||||
>箭，获得<text class="gold-text">{{ validArrows }}</text
|
||||
@@ -112,9 +117,10 @@ const validArrows = computed(() => arrows.value.filter((a) => !!a.ring).length);
|
||||
:onClick="onClickShare"
|
||||
/>
|
||||
<IconButton
|
||||
v-if="isMember"
|
||||
name="教练点评"
|
||||
src="../static/review.png"
|
||||
:onClick="() => (showComment = true)"
|
||||
:onClick="openCoachComment"
|
||||
/>
|
||||
</block>
|
||||
<SButton
|
||||
@@ -137,7 +143,7 @@ const validArrows = computed(() => arrows.value.filter((a) => !!a.ring).length);
|
||||
}}</text
|
||||
>环的成绩，所有箭支上靶后的平均点间距为<text
|
||||
:style="{ color: '#fed847' }"
|
||||
>{{ Number((result.average_distance || 0).toFixed(2)) }}</text
|
||||
>{{ Number((result?.interpretation?.spreadStability || 0).toFixed(2)) }}</text
|
||||
>，{{
|
||||
result.spreadEvaluation === "Dispersed"
|
||||
? "还需要持续改进哦~"
|
||||
|
||||
@@ -27,22 +27,22 @@ const getContentHeight = () => {
|
||||
<view class="scale-in" :style="{ height: getContentHeight() }">
|
||||
<image
|
||||
v-if="mode === 'normal'"
|
||||
src="../static/screen-hint-bg.png"
|
||||
src="https://static.shelingxingqiu.com/shootmini/static/screen-hint-bg.png"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<image
|
||||
v-if="mode === 'tall'"
|
||||
src="../static/coach-comment.png"
|
||||
src="https://static.shelingxingqiu.com/shootmini/static/coach-comment.png"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<image
|
||||
v-if="mode === 'square'"
|
||||
src="../static/prompt-bg-square.png"
|
||||
src="https://static.shelingxingqiu.com/shootmini/static/prompt-bg-square.png"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<image
|
||||
v-if="mode === 'small'"
|
||||
src="../static/finish-frame.png"
|
||||
src="https://static.shelingxingqiu.com/shootmini/static/finish-frame.png"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<slot />
|
||||
|
||||
@@ -20,7 +20,7 @@ const props = defineProps({
|
||||
<template>
|
||||
<view class="container" :style="{ display: show ? 'flex' : 'none' }">
|
||||
<view class="scale-in">
|
||||
<image src="../static/point-book-tip-bg.png" mode="widthFix" />
|
||||
<image src="https://static.shelingxingqiu.com/shootmini/static/point-book-tip-bg.png" mode="widthFix" />
|
||||
<slot />
|
||||
</view>
|
||||
<IconButton
|
||||
|
||||
@@ -38,6 +38,10 @@ const props = defineProps({
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
halfRest: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
onStop: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
@@ -136,8 +140,9 @@ const updateSound = () => {
|
||||
async function onReceiveMessage(msg) {
|
||||
if (Array.isArray(msg)) return;
|
||||
if (msg.type === MESSAGETYPESV2.BattleStart) {
|
||||
const audioKey = props.melee && (halfTime.value || props.halfRest) ? "下半场开始" : "比赛开始";
|
||||
halfTime.value = false;
|
||||
audioManager.play("比赛开始");
|
||||
audioManager.play(audioKey);
|
||||
} else if (msg.type === MESSAGETYPESV2.BattleEnd) {
|
||||
audioManager.play("比赛结束", false);
|
||||
} else if (msg.type === MESSAGETYPESV2.ShootResult) {
|
||||
@@ -145,13 +150,17 @@ async function onReceiveMessage(msg) {
|
||||
if (msg.details && Array.isArray(msg.details)) {
|
||||
arrow = msg.details[msg.details.length - 1];
|
||||
} else {
|
||||
if (msg.shootData.playerId !== user.value.id) return;
|
||||
if (!msg.shootData || String(msg.shootData.playerId) !== String(user.value.id)) return;
|
||||
if (msg.shootData) arrow = msg.shootData;
|
||||
}
|
||||
let key = [];
|
||||
key.push(arrow.ring ? `${arrow.ringX ? "X" : arrow.ring}环` : "未上靶");
|
||||
if (arrow.angle !== null)
|
||||
if (arrow.angle)
|
||||
key.push(`向${getDirectionText(arrow.angle)}调整`);
|
||||
const shouldPlayTententen =
|
||||
arrow.threeConsecutive10Rings === true ||
|
||||
msg.shootData?.threeConsecutive10Rings === true;
|
||||
if (!props.melee && shouldPlayTententen) key.push("tententen");
|
||||
audioManager.play(key, false);
|
||||
} else if (msg.type === MESSAGETYPESV2.HalfRest) {
|
||||
halfTime.value = true;
|
||||
@@ -186,7 +195,7 @@ onBeforeUnmount(() => {
|
||||
<template>
|
||||
<view class="container" :style="{ display: show ? 'block' : 'none' }">
|
||||
<view>
|
||||
<image src="../static/shooter.png" mode="widthFix" />
|
||||
<image src="https://static.shelingxingqiu.com/shootmini/static/shooter.png" mode="widthFix" />
|
||||
<text>{{ tipContent }}</text>
|
||||
<button hover-class="none" @click="updateSound">
|
||||
<image
|
||||
|
||||
+25
-12
@@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { ref, watch } from "vue";
|
||||
import { onShow } from "@dcloudio/uni-app";
|
||||
import SModal from "@/components/SModal.vue";
|
||||
import Avatar from "@/components/Avatar.vue";
|
||||
@@ -11,6 +11,7 @@ import {
|
||||
loginAPI,
|
||||
getHomeData,
|
||||
getPhoneNumberAPI,
|
||||
getPhoneNumberAPIv2,
|
||||
getDeviceBatteryAPI,
|
||||
} from "@/apis";
|
||||
|
||||
@@ -43,12 +44,12 @@ const handleAgree = () => {
|
||||
|
||||
async function getphonenumber(e) {
|
||||
if (e.detail.code) {
|
||||
const wxResult = await wxLogin();
|
||||
const result = await getPhoneNumberAPI({
|
||||
...e.detail,
|
||||
code: wxResult.code,
|
||||
// const wxResult = await wxLogin();
|
||||
const result = await getPhoneNumberAPIv2({
|
||||
// ...e.detail,
|
||||
code: e.detail.code,
|
||||
});
|
||||
if (result.phone) phone.value = result.phone;
|
||||
if (result.purePhoneNumber) phone.value = result.purePhoneNumber;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -60,6 +61,21 @@ 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) {
|
||||
@@ -139,11 +155,7 @@ const openPrivacyLink = () => {
|
||||
};
|
||||
|
||||
onShow(() => {
|
||||
loading.value = false;
|
||||
agree.value = false;
|
||||
phone.value = "";
|
||||
avatarUrl.value = "";
|
||||
nickName.value = "";
|
||||
resetForm();
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -189,10 +201,11 @@ 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>
|
||||
|
||||
@@ -111,7 +111,7 @@ onBeforeUnmount(() => {
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="isBattle" class="ready-timer">
|
||||
<image src="../static/test-tip.png" mode="widthFix" />
|
||||
<image src="https://static.shelingxingqiu.com/shootmini/static/test-tip.png" mode="widthFix" />
|
||||
<view v-if="count >= 0">
|
||||
<text>具体正式比赛还有</text>
|
||||
<text>{{ count }}</text>
|
||||
|
||||
@@ -19,6 +19,8 @@ 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();
|
||||
@@ -69,7 +71,18 @@ watch(
|
||||
/>
|
||||
<view class="user-details" @click="toUserPage">
|
||||
<view class="user-name">
|
||||
<text>{{ user.nickName }}</text>
|
||||
<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>
|
||||
<image
|
||||
class="user-name-image"
|
||||
src="../static/vip1.png"
|
||||
@@ -148,12 +161,13 @@ watch(
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.user-name > text:first-child {
|
||||
font-size: 13px;
|
||||
.user-name .member-nickname {
|
||||
max-width: 180rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.user-name .member-nickname__text,
|
||||
.user-name .member-nickname__shine {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.user-name-image {
|
||||
|
||||
@@ -54,23 +54,23 @@ onBeforeUnmount(() => {
|
||||
<view v-if="showRank" class="up-rank">
|
||||
<image :src="user.avatar || '../static/user-icon.png'" mode="widthFix" />
|
||||
<image :src="nextRankImage" mode="widthFix" />
|
||||
<image class="bg-effect" src="../static/shining-bg.png" mode="widthFix" />
|
||||
<image class="bg-effect" src="https://static.shelingxingqiu.com/shootmini/static/shining-bg.png" mode="widthFix" />
|
||||
<image
|
||||
class="bg-effect"
|
||||
src="../static/gold-shining.png"
|
||||
src="https://static.shelingxingqiu.com/shootmini/static/gold-shining.png"
|
||||
mode="widthFix"
|
||||
/>
|
||||
</view>
|
||||
<view v-if="showGrade" class="up-grade">
|
||||
<image
|
||||
class="scale-in"
|
||||
src="../static/user-upgrade.png"
|
||||
src="https://static.shelingxingqiu.com/shootmini/static/user-upgrade.png"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<image class="bg-effect" src="../static/shining-bg.png" mode="widthFix" />
|
||||
<image class="bg-effect" src="https://static.shelingxingqiu.com/shootmini/static/shining-bg.png" mode="widthFix" />
|
||||
<image
|
||||
class="bg-effect"
|
||||
src="../static/gold-shining.png"
|
||||
src="https://static.shelingxingqiu.com/shootmini/static/gold-shining.png"
|
||||
mode="widthFix"
|
||||
/>
|
||||
</view>
|
||||
|
||||
Reference in New Issue
Block a user