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-06-26 23:41:23 +08:00
parent c730088764
commit 6a3fb2af6d
7 changed files with 176 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
src/pages/ranking.vue
View File

@@ -1,18 +1,27 @@
<script setup>
import { ref, onMounted } from "vue";
import Container from "@/components/Container.vue";
import Avatar from "@/components/Avatar.vue";
import { ref } from "vue";
import { getRankListAPI } from "@/apis";
import { topThreeColors } from "@/constants";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user, device } = storeToRefs(store);
const rankData = ref({});
const selectedIndex = ref(0);
const handleSelect = (index) => {
selectedIndex.value = index;
};
onMounted(async () => {
const rankList = await getRankListAPI();
console.log("排位赛数据：", rankList);
rankData.value = rankList;
});
const toTeamMatchPage = (gameType, teamSize) => {
if (!device.value.deviceId) {
return uni.showToast({
@@ -133,25 +142,126 @@ const toRankListPage = () => {
{{ rankType }}
</view>
</view>
<view
<block
v-for="(rankType, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
:key="index"
:style="{
backgroundColor: index % 2 === 0 ? '#9898981f' : 'transparent',
}"
class="rank-item"
>
<image v-if="index === 0" src="../static/champ1.png" />
<image v-if="index === 1" src="../static/champ2.png" />
<image v-if="index === 2" src="../static/champ3.png" />
<view v-if="index > 2">{{ rankType }}</view>
<image src="../static/avatar.png" mode="widthFix" />
<view>
<text>打酱油大声路过</text>
<text>钻石三级，20场</text>
</view>
<text>8850<text>分</text></text>
</view>
<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">{{ rankType }}</view>
<image
:src="rankData.rank[index].avatar"
mode="widthFix"
:style="{ borderColor: index < 3 ? topThreeColors[index] : '' }"
/>
<view>
<text>{{ 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>{{ 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>
<view class="see-more" @click="toRankListPage">点击查看更多</view>
</view>
@@ -308,7 +418,10 @@ const toRankListPage = () => {
}
.rank-item > image:nth-child(2) {
width: 35px;
height: 35px;
min-height: 35px;
max-height: 35px;
border-radius: 50%;
border: 1px solid transparent;
}
.rank-item > view:nth-child(3) {
display: flex;