update:vip完成

This commit is contained in:
2026-06-18 16:18:55 +08:00
parent 68f13910a3
commit 8d8ede5397
41 changed files with 1054 additions and 107 deletions

View File

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

View File

@@ -18,12 +18,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 +47,35 @@ 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}`,
});
await navigateOnce(`/pages/team-battle/index?battleId=${result.matchId}`);
} else {
uni.navigateTo({
url: `/pages/melee-battle?battleId=${result.matchId}`,
});
await navigateOnce(`/pages/melee-battle?battleId=${result.matchId}`);
}
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, "");
}

View File

@@ -27,6 +27,14 @@ 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>
@@ -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"
@@ -105,7 +131,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>
@@ -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;

View File

@@ -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;

View File

@@ -27,6 +27,10 @@ const props = defineProps({
type: Array,
default: () => [],
},
isSvip: {
type: Boolean,
default: false,
},
mode: {
type: String,
default: "solo", // solo 单排team 双排
@@ -79,7 +83,7 @@ function buildShotEffectKey(team, shot, index) {
}
function shouldPlayShotEffect(shot) {
return !!shot && Number(shot.ring) > 0;
return props.isSvip && !!shot && Number(shot.ring) > 0;
}
function clearTipTimer() {
@@ -272,6 +276,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(
@@ -404,6 +417,13 @@ onBeforeUnmount(() => {
}}<text v-if="bluelatestOne.ring">环</text></view
>
<block v-for="(bow, index) in scores" :key="index">
<image
v-if="pMode && isSvip && bow.ring > 0 && !shouldHideRedHit(index)"
class="svip-hit-bg"
src="../static/vip/svip-xuan.png"
:style="getSvipHitBgStyle(bow)"
mode="aspectFit"
/>
<view
v-if="bow.ring > 0 && !shouldHideRedHit(index)"
:class="`hit ${pMode ? 'b' : 's'}-point ${
@@ -417,6 +437,13 @@ onBeforeUnmount(() => {
>
</block>
<block v-for="(bow, index) in blueScores" :key="index">
<image
v-if="pMode && isSvip && bow.ring > 0 && !shouldHideBlueHit(index)"
class="svip-hit-bg"
src="../static/vip/svip-xuan.png"
:style="getSvipHitBgStyle(bow)"
mode="aspectFit"
/>
<view
v-if="bow.ring > 0 && !shouldHideBlueHit(index)"
:class="`hit ${pMode ? 'b' : 's'}-point ${
@@ -528,17 +555,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: 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;
@@ -554,6 +590,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);

View File

@@ -55,6 +55,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);
@@ -128,7 +131,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 +302,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;

View File

@@ -15,6 +15,14 @@ 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>
@@ -31,7 +39,16 @@ const rowCount = new Array(6).fill(0);
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">
@@ -96,6 +113,13 @@ const rowCount = new Array(6).fill(0);
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;

View File

@@ -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;

View File

@@ -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 {