显示头像相框

This commit is contained in:
kron
2025-07-07 19:01:14 +08:00
parent 31973a1142
commit 06d8244e83
12 changed files with 71 additions and 32 deletions

View File

@@ -170,7 +170,7 @@ export const getGameAPI = async (battleId) => {
data.roundsData = {};
data.redPlayers = {};
data.bluePlayers = {};
data.goldenRound = goldenRoundRecords.length ? goldenRoundRecords[0] : null;
data.goldenRound = goldenRoundRecords && goldenRoundRecords.length ? goldenRoundRecords[0] : null;
playerStats.forEach((item) => {
const { playerBattleStats = {}, roundRecords = [] } = item;
if (playerBattleStats.team === 0) {

View File

@@ -1,21 +1,23 @@
<script setup>
defineProps({
import { ref, onMounted, watch } from "vue";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { getLvlImage } = store;
const { config } = storeToRefs(store);
const props = defineProps({
src: {
type: String,
default: "",
},
frameSrc: {
type: String,
default: "",
score: {
type: Number,
default: undefined,
},
onClick: {
type: Function,
default: () => {},
},
frame: {
type: Boolean,
default: false,
},
rank: {
type: Number,
default: 0,
@@ -29,13 +31,25 @@ defineProps({
default: "",
},
});
const avatarFrame = ref("");
watch(
() => config.value,
() => {
if (props.score !== undefined) {
avatarFrame.value = getLvlImage(props.score);
}
},
{
immediate: true,
}
);
</script>
<template>
<view class="avatar" @click="onClick">
<image
v-if="frameSrc || frame"
:src="frameSrc || '../static/avatar-frame.png'"
v-if="avatarFrame"
:src="avatarFrame"
mode="widthFix"
:style="{
width: Number(size) + 10 + 'px',

View File

@@ -50,7 +50,7 @@ defineProps({
</view>
<view v-if="blueTeam.length && redTeam.length" class="players">
<view>
<Avatar :src="blueTeam[0].avatar" frame />
<Avatar :src="blueTeam[0].avatar" :score="blueTeam[0].totalScore" />
<text class="player-name">{{ blueTeam[0].name }}</text>
<image
v-if="winner === 1"
@@ -59,7 +59,11 @@ defineProps({
/>
</view>
<view>
<Avatar v-if="redTeam[0]" :src="redTeam[0].avatar" frame />
<Avatar
v-if="redTeam[0]"
:src="redTeam[0].avatar"
:score="redTeam[0].totalScore"
/>
<text class="player-name">{{ redTeam[0].name }}</text>
<image
v-if="winner === 0"

View File

@@ -29,7 +29,7 @@ const props = defineProps({
<AppBackground :type="1" />
<view class="header">
<view>
<Avatar :src="user.avatar" frame :size="50" />
<Avatar :src="user.avatar" :score="user.scores" :size="50" />
<view>
<text>{{ user.nickName }}</text>
<text>{{ user.lvlName }}</text>
@@ -93,7 +93,6 @@ const props = defineProps({
}
.header > view:first-child > view:last-child > text:last-child {
font-size: 10px;
color: #fff9;
background-color: #5f51ff;
padding: 2px 5px;
border-radius: 10px;

View File

@@ -104,7 +104,7 @@ onUnmounted(() => {
top: 30%;
}
.warnning-text > text {
width: 54vw;
width: 60vw;
text-align: center;
}
.container > view:last-child {

View File

@@ -53,7 +53,7 @@ watch(
<view class="container" :style="{ width: containerWidth }">
<block v-if="user.id">
<Avatar
:frameSrc="user.lvlImage"
:score="user.scores"
:src="user.avatar"
:onClick="toUserPage"
:size="42"

View File

@@ -241,11 +241,8 @@ async function onReceiveMessage(messages = []) {
if (msg.constructor === MESSAGETYPES.ShootResult) {
if (room.value.battleType === 1) {
const isRed = redTeam.value.find((item) => item.id === msg.userId);
if (isRed) {
scores.value = [msg.target];
} else {
blueScores.value = [msg.target];
}
if (isRed) scores.value = [msg.target];
else blueScores.value = [msg.target];
}
if (room.value.battleType === 2) {
scores.value.push(msg.target);

View File

@@ -55,6 +55,7 @@ onMounted(async () => {
const token = uni.getStorageSync("token");
if (token) {
const result = await getHomeData();
console.log("首页数据:", result);
if (result.user) {
updateUser(result.user);
const devices = await getMyDevicesAPI();

View File

@@ -85,7 +85,10 @@ const onPractiseLoading = async (page) => {
<view v-if="item.mode === 1" class="contest-team">
<block v-if="item.bluePlayers[0]">
<view class="player">
<Avatar frame :src="item.bluePlayers[0].avatar" />
<Avatar
:score="item.bluePlayers[0].totalScore"
:src="item.bluePlayers[0].avatar"
/>
<text>{{ item.bluePlayers[0].name }}</text>
<image
v-if="item.winner === 1"
@@ -96,7 +99,10 @@ const onPractiseLoading = async (page) => {
</block>
<block v-if="item.redPlayers[0]">
<view class="player">
<Avatar frame :src="item.redPlayers[0].avatar" />
<Avatar
:score="item.redPlayers[0].totalScore"
:src="item.redPlayers[0].avatar"
/>
<text>{{ item.redPlayers[0].name }}</text>
<image
v-if="item.winner === 0"
@@ -136,7 +142,10 @@ const onPractiseLoading = async (page) => {
<view v-if="item.mode === 1" class="contest-team">
<block v-if="item.bluePlayers[0]">
<view class="player">
<Avatar frame :src="item.bluePlayers[0].avatar" />
<Avatar
:score="item.bluePlayers[0].totalScore"
:src="item.bluePlayers[0].avatar"
/>
<text>{{ item.bluePlayers[0].name }}</text>
<image
v-if="item.winner === 1"
@@ -147,7 +156,10 @@ const onPractiseLoading = async (page) => {
</block>
<block v-if="item.redPlayers[0]">
<view class="player">
<Avatar frame :src="item.redPlayers[0].avatar" />
<Avatar
:score="item.redPlayers[0].totalScore"
:src="item.redPlayers[0].avatar"
/>
<text>{{ item.redPlayers[0].name }}</text>
<image
v-if="item.winner === 0"

View File

@@ -117,7 +117,7 @@ const toRankListPage = () => {
<view class="ranking-my-data" v-if="user.id">
<view>
<view class="user-info">
<Avatar :src="user.avatar" frame :size="30" />
<Avatar :src="user.avatar" :score="user.scores" :size="30" />
<text>{{ user.nickName }}</text>
</view>
<view class="ranking-season" v-if="seasonData.length">

View File

@@ -140,11 +140,8 @@ async function onReceiveMessage(messages = []) {
}
if (msg.constructor === MESSAGETYPES.ShootResult) {
const isRed = redTeam.value.find((item) => item.id === msg.userId);
if (isRed) {
scores.value = [msg.target];
} else {
blueScores.value = [msg.target];
}
if (isRed) scores.value = [msg.target];
else blueScores.value = [msg.target];
}
if (msg.constructor === MESSAGETYPES.CurrentRoundEnded) {
const result = msg.preRoundResult;

View File

@@ -33,6 +33,21 @@ export default defineStore("store", {
// 方法
actions: {
getLvlImage(score) {
let lvlImage = "";
const rankInfos = this.config.randInfos || [];
rankInfos.some((r, index) => {
lvlImage = rankInfos[index].icoin;
if (r.upgrade_scores > score) {
if (rankInfos[index - 1]) {
lvlImage = rankInfos[index - 1].icoin;
}
return true;
}
return false;
});
return lvlImage;
},
getLvlName(score) {
let lvlName = "";
const rankInfos = this.config.randInfos || [];