laoma/shoot-miniprograms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

数据完善

Browse Source
This commit is contained in:
kron
2025-07-01 10:57:49 +08:00
parent a03af4e58c
commit afab40d1a1
5 changed files with 90 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
src/pages/ranking.vue
View File

@@ -7,19 +7,25 @@ import { topThreeColors } from "@/constants";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user, device } = storeToRefs(store);
const { user, device, rankData } = storeToRefs(store);
const { getLvlName } = store;
const rankData = ref({});
const selectedIndex = ref(0);
const currentList = ref([]);
const handleSelect = (index) => {
selectedIndex.value = index;
if (index === 0) {
currentList.value = rankData.value.rank.slice(0, 10);
} else if (index === 2) {
currentList.value = rankData.value.ringRank.slice(0, 10);
} else {
currentList.value = [];
}
};
onMounted(async () => {
const rankList = await getRankListAPI();
console.log("排位赛数据：", rankList);
rankData.value = rankList;
currentList.value = rankData.value.rank;
});
const toTeamMatchPage = (gameType, teamSize) => {
@@ -142,128 +148,43 @@ const toRankListPage = () => {
{{ rankType }}
</view>
</view>
<block
v-for="(rankType, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
<view
v-for="(item, index) in currentList"
:key="index"
:style="{
backgroundColor: index % 2 === 0 ? '#9898981f' : 'transparent',
}"
class="rank-item"
>
<block
v-if="selectedIndex === 0 && rankData.rank && rankData.rank[index]"
>
<view
:style="{
backgroundColor: index % 2 === 0 ? '#9898981f' : 'transparent',
}"
class="rank-item"
<image
v-if="index === 0"
src="../static/champ1.png"
mode="widthFix"
/>
<image
v-if="index === 1"
src="../static/champ2.png"
mode="widthFix"
/>
<image
v-if="index === 2"
src="../static/champ3.png"
mode="widthFix"
/>
<view v-if="index > 2">{{ index + 1 }}</view>
<image
:src="item.avatar"
mode="widthFix"
:style="{ borderColor: index < 3 ? topThreeColors[index] : '' }"
/>
<view>
<text class="truncate">{{ item.name }}</text>
<text
>{{ getLvlName(item.totalScore) }}，{{ item.TotalGames }}场</text
>
<image
v-if="index === 0"
src="../static/champ1.png"
mode="widthFix"
/>
<image
v-if="index === 1"
src="../static/champ2.png"
mode="widthFix"
/>
<image
v-if="index === 2"
src="../static/champ3.png"
mode="widthFix"
/>
<view v-if="index > 2">{{ rankType }}</view>
<image
:src="rankData.rank[index].avatar"
mode="widthFix"
:style="{ borderColor: index < 3 ? topThreeColors[index] : '' }"
/>
<view>
<text class="truncate">{{ rankData.rank[index].name }}</text>
<text>钻石三级，20场</text>
</view>
<text>{{ rankData.rank[index].totalScore }}<text>分</text></text>
</view>
</block>
<block
v-else-if="
selectedIndex === 2 &&
rankData.ringRank &&
rankData.ringRank[index]
"
>
<view
:style="{
backgroundColor: index % 2 === 0 ? '#9898981f' : 'transparent',
}"
class="rank-item"
>
<image
v-if="index === 0"
src="../static/champ1.png"
mode="widthFix"
/>
<image
v-if="index === 1"
src="../static/champ2.png"
mode="widthFix"
/>
<image
v-if="index === 2"
src="../static/champ3.png"
mode="widthFix"
/>
<view v-if="index > 2">{{ rankType }}</view>
<image
:src="rankData.ringRank[index].avatar"
mode="widthFix"
:style="{ borderColor: index < 3 ? topThreeColors[index] : '' }"
/>
<view>
<text class="truncate">{{
rankData.ringRank[index].name
}}</text>
<text>钻石三级，20场</text>
</view>
<text
>{{ rankData.ringRank[index].totalScore }}<text>分</text></text
>
</view>
</block>
<block v-else>
<view
:style="{
backgroundColor: index % 2 === 0 ? '#9898981f' : 'transparent',
}"
class="rank-item"
>
<image
v-if="index === 0"
src="../static/champ1.png"
mode="widthFix"
/>
<image
v-if="index === 1"
src="../static/champ2.png"
mode="widthFix"
/>
<image
v-if="index === 2"
src="../static/champ3.png"
mode="widthFix"
/>
<view v-if="index > 2">{{ rankType }}</view>
<image
src="../static/avatar.png"
mode="widthFix"
:style="{ borderColor: index < 3 ? topThreeColors[index] : '' }"
/>
<view>
<text>打酱油大声路过</text>
<text>钻石三级，20场</text>
</view>
<text>8850<text>分</text></text>
</view>
</block>
</block>
</view>
<text>{{ item.totalScore }}<text>分</text></text>
</view>
<view class="see-more" @click="toRankListPage">点击查看更多</view>
</view>
</view>