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

4
src/apis.js
View File

@@ -236,3 +236,7 @@ export const getBattleListAPI = async (page, battleType) => {
});
return data;
};
export const getRankListAPI = () => {
return request("GET", "/index/ranklist");
};

2
src/components/PlayerScore2.vue
View File

@@ -1,4 +1,5 @@
<script setup>
import { topThreeColors } from "@/constants";
defineProps({
avatar: {
type: String,
@@ -26,7 +27,6 @@ defineProps({
},
});
const rowCount = new Array(6).fill(0);
const topThreeColors = ["#FFD947", "#D2D2D2", "#FFA515"];
</script>
<template>

2
src/constants.js
View File

@@ -19,6 +19,8 @@ export const MESSAGETYPES = {
HalfTimeOver: 388606440,
};
export const topThreeColors = ["#FFD947", "#D2D2D2", "#FFA515"];
export const getMessageTypeName = (id) => {
for (let key in MESSAGETYPES) {
if (MESSAGETYPES[key] === id) {

2
src/pages/battle-result.vue
View File

@@ -4,6 +4,7 @@ import { onLoad } from "@dcloudio/uni-app";
import { getGameAPI } from "@/apis";
import Avatar from "@/components/Avatar.vue";
import { getHomeData } from "@/apis";
import { topThreeColors } from "@/constants";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
@@ -54,7 +55,6 @@ const checkBowData = () => {
});
}
};
const topThreeColors = ["#FFD947 ", "#D2D2D2", "#FFA515"];
</script>
<template>

23
src/pages/index.vue
View File

@@ -5,7 +5,13 @@ import AppBackground from "@/components/AppBackground.vue";
import UserHeader from "@/components/UserHeader.vue";
import SModal from "@/components/SModal.vue";
import Signin from "@/components/Signin.vue";
import { getAppConfig, getHomeData, getMyDevicesAPI } from "@/apis";
import {
getAppConfig,
getHomeData,
getMyDevicesAPI,
getRankListAPI,
} from "@/apis";
import { topThreeColors } from "@/constants";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
@@ -14,6 +20,7 @@ const { updateConfig, updateUser, updateDevice } = store;
const { user, device, remoteConnect } = storeToRefs(store);
const showModal = ref(false);
const isIos = ref(true);
const rankData = ref({});
const toPage = (path) => {
if (!user.value.id) {
@@ -47,6 +54,9 @@ onMounted(async () => {
isIos.value = deviceInfo.osName === "ios";
const config = await getAppConfig();
console.log("全局配置：", config);
const rankList = await getRankListAPI();
if (rankList) rankData.value = rankList;
console.log("排位赛数据：", rankList);
updateConfig(config);
const token = uni.getStorageSync("token");
if (token) {
@@ -74,7 +84,6 @@ const comingSoon = () => {
icon: "none",
});
};
const topThreeColors = ["#FFD947", "#D2D2D2", "#FFA515"];
</script>
<template>
@@ -121,9 +130,9 @@ const topThreeColors = ["#FFD947", "#D2D2D2", "#FFA515"];
<img src="../static/juezhanbang.png" mode="widthFix" />
<view class="divide-line"></view>
<view class="player-avatars">
<block v-for="i in 6" :key="i">
<block v-if="rankData.rank && rankData.rank[i]">
<view
v-for="i in 6"
:key="i"
class="player-avatar"
:style="{
zIndex: 8 - i,
@@ -134,8 +143,10 @@ const topThreeColors = ["#FFD947", "#D2D2D2", "#FFA515"];
<image v-if="i === 2" src="../static/champ2.png" />
<image v-if="i === 3" src="../static/champ3.png" />
<view v-if="i > 3">{{ i }}</view>
<image src="../static/avatar.png" mode="aspectFill" />
<image :src="rankData.rank[i].avatar" mode="aspectFill" />
</view>
</block>
</block>
<view class="more-players" @click="toRankListPage">
<text>456{{ remoteConnect ? 1 : 0 }}</text>
</view>
@@ -284,7 +295,7 @@ const topThreeColors = ["#FFD947", "#D2D2D2", "#FFA515"];
.ranking-players > image:first-child {
width: 28%;
transform: translateX(-10px);
transform: translateX(-10px) translateY(-8px);
}
.player-avatars {

12
src/pages/rank-list.vue
View File

@@ -1,15 +1,19 @@
<script setup>
import { ref, onMounted } from "vue";
import Avatar from "@/components/Avatar.vue";
const isIos = ref(true);
import { getRankListAPI } from "@/apis";
onMounted(() => {
const isIos = ref(true);
const selectedIndex = ref(0);
const rankData = ref({});
onMounted(async () => {
const deviceInfo = uni.getDeviceInfo();
isIos.value = deviceInfo.osName === "ios";
const rankList = await getRankListAPI();
rankData.value = rankList;
});
const selectedIndex = ref(0);
const handleSelect = (index) => {
selectedIndex.value = index;
};

127
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"
>
<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" />
<image v-if="index === 1" src="../static/champ2.png" />
<image v-if="index === 2" src="../static/champ3.png" />
<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" />
<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;