显示头像相框
This commit is contained in:
@@ -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) {
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -104,7 +104,7 @@ onUnmounted(() => {
|
||||
top: 30%;
|
||||
}
|
||||
.warnning-text > text {
|
||||
width: 54vw;
|
||||
width: 60vw;
|
||||
text-align: center;
|
||||
}
|
||||
.container > view:last-child {
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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;
|
||||
|
||||
15
src/store.js
15
src/store.js
@@ -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 || [];
|
||||
|
||||
Reference in New Issue
Block a user