396 lines
9.5 KiB
Vue
396 lines
9.5 KiB
Vue
<script setup>
|
||
import { ref, onMounted } from "vue";
|
||
import Avatar from "@/components/Avatar.vue";
|
||
import { capsuleHeight } from "@/util";
|
||
import useStore from "@/store";
|
||
import { storeToRefs } from "pinia";
|
||
const store = useStore();
|
||
const { user, rankData } = storeToRefs(store);
|
||
const { getLvlName } = store;
|
||
|
||
const selectedIndex = ref(0);
|
||
const currentList = ref([]);
|
||
const myData = ref({});
|
||
const addBg = ref(false);
|
||
|
||
onMounted(async () => {
|
||
handleSelect(0);
|
||
});
|
||
|
||
const handleSelect = (index) => {
|
||
selectedIndex.value = index;
|
||
myData.value = {};
|
||
currentList.value = [];
|
||
if (index === 0) {
|
||
currentList.value = rankData.value.rank;
|
||
} else if (index === 1) {
|
||
currentList.value = rankData.value.mvpRank;
|
||
} else if (index === 2) {
|
||
currentList.value = rankData.value.ringRank;
|
||
}
|
||
if (user.value.id) {
|
||
currentList.value.some((item) => {
|
||
if (item.userId === user.value.id) {
|
||
myData.value = item;
|
||
return true;
|
||
}
|
||
return false;
|
||
});
|
||
if (!myData.value.userId) {
|
||
myData.value = {
|
||
userId: user.value.id,
|
||
TotalGames: 0,
|
||
totalScore: 0,
|
||
mvpCount: 0,
|
||
TenRings: 0,
|
||
};
|
||
}
|
||
}
|
||
};
|
||
|
||
const onScrollView = (e) => {
|
||
addBg.value = e.detail.scrollTop > 100;
|
||
};
|
||
|
||
const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
|
||
</script>
|
||
|
||
<template>
|
||
<view class="container">
|
||
<view
|
||
class="header"
|
||
:style="{
|
||
paddingTop: capsuleHeight + 'px',
|
||
}"
|
||
>
|
||
<image
|
||
:style="{ opacity: addBg ? 1 : 0 }"
|
||
src="../static/app-bg.png"
|
||
mode="widthFix"
|
||
/>
|
||
<navigator open-type="navigateBack">
|
||
<image class="header-back" src="../static/back.png" mode="widthFix" />
|
||
</navigator>
|
||
<text :style="{ opacity: addBg ? 1 : 0 }">本赛季排行榜</text>
|
||
</view>
|
||
<scroll-view
|
||
scroll-y
|
||
@scroll="onScrollView"
|
||
:style="{ height: myData.userId ? '90vh' : '100vh' }"
|
||
>
|
||
<image
|
||
src="https://static.shelingxingqiu.com/attachment/2025-09-25/dd1p9b3wcrwnlnghiq.png"
|
||
mode="widthFix"
|
||
class="header-bg"
|
||
/>
|
||
<view class="rank-tabs">
|
||
<view
|
||
v-for="(rankType, index) in ['积分榜', 'MVP榜', '十环榜']"
|
||
:key="index"
|
||
:style="{
|
||
fontSize: index === selectedIndex ? '16px' : '14px',
|
||
color: index === selectedIndex ? '#000' : '#fff',
|
||
backgroundColor: index === selectedIndex ? '#FFD947' : '#383737',
|
||
}"
|
||
@tap="handleSelect(index)"
|
||
>
|
||
{{ rankType }}
|
||
</view>
|
||
</view>
|
||
<view class="rank-list">
|
||
<view class="rank-list-header">
|
||
<text>排名</text>
|
||
<text>用户ID</text>
|
||
<text>{{ subTitles[selectedIndex] }}</text>
|
||
</view>
|
||
<view
|
||
v-for="(item, index) in currentList"
|
||
:key="index"
|
||
class="rank-list-item"
|
||
:style="{
|
||
backgroundColor: index % 2 === 0 ? '#9898981f' : 'transparent',
|
||
}"
|
||
>
|
||
<image
|
||
v-if="index === 0"
|
||
class="player-bg"
|
||
src="../static/melee-player-bg1.png"
|
||
mode="aspectFill"
|
||
/>
|
||
<image
|
||
v-if="index === 1"
|
||
class="player-bg"
|
||
src="../static/melee-player-bg2.png"
|
||
mode="aspectFill"
|
||
/>
|
||
<image
|
||
v-if="index === 2"
|
||
class="player-bg"
|
||
src="../static/melee-player-bg3.png"
|
||
mode="aspectFill"
|
||
/>
|
||
<image
|
||
v-if="index === 0"
|
||
class="player-crown"
|
||
src="../static/champ1.png"
|
||
mode="widthFix"
|
||
/>
|
||
<image
|
||
v-if="index === 1"
|
||
class="player-crown"
|
||
src="../static/champ2.png"
|
||
mode="widthFix"
|
||
/>
|
||
<image
|
||
v-if="index === 2"
|
||
class="player-crown"
|
||
src="../static/champ3.png"
|
||
mode="widthFix"
|
||
/>
|
||
<view v-if="index > 2" class="view-crown">{{ index + 1 }}</view>
|
||
<Avatar :src="item.avatar" />
|
||
<view class="rank-item-content">
|
||
<text class="truncate">{{ item.name }}</text>
|
||
<text>{{ getLvlName(item.rankLvl) }}，{{ item.TotalGames }}场</text>
|
||
</view>
|
||
<text class="rank-item-integral" v-if="selectedIndex === 0">
|
||
<text
|
||
:style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
|
||
>{{ item.totalScore }} </text
|
||
>分
|
||
</text>
|
||
<text class="rank-item-integral" v-if="selectedIndex === 1">
|
||
<text
|
||
:style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
|
||
>{{ item.mvpCount }} </text
|
||
>次
|
||
</text>
|
||
<text class="rank-item-integral" v-if="selectedIndex === 2">
|
||
<text
|
||
:style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
|
||
>{{ item.TenRings }} </text
|
||
>次
|
||
</text>
|
||
</view>
|
||
<view v-if="!currentList.length" class="no-data">
|
||
<text>筹备中...</text>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="my-rank-data" v-if="myData.userId">
|
||
<image
|
||
src="https://static.shelingxingqiu.com/attachment/2025-08-05/dbuaf19pf7qd8ps0uh.png"
|
||
mode="widthFix"
|
||
/>
|
||
<text>{{ myData.rank }}</text>
|
||
<Avatar :src="user.avatar" />
|
||
<view class="rank-item-content">
|
||
<text class="truncate">{{ user.nickName }}</text>
|
||
<text>{{ user.lvlName }}，{{ myData.TotalGames }}场</text>
|
||
</view>
|
||
<text class="rank-item-integral" v-if="selectedIndex === 0">
|
||
<text
|
||
:style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
|
||
>{{ myData.totalScore || 0 }}</text
|
||
>分</text
|
||
>
|
||
<text class="rank-item-integral" v-if="selectedIndex === 1">
|
||
<text
|
||
:style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
|
||
>{{ myData.mvpCount || 0 }}</text
|
||
>次</text
|
||
>
|
||
<text class="rank-item-integral" v-if="selectedIndex === 2">
|
||
<text
|
||
:style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
|
||
>{{ myData.TenRings || 0 }}</text
|
||
>次</text
|
||
>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.container {
|
||
width: 100%;
|
||
}
|
||
.header-bg {
|
||
width: 100%;
|
||
}
|
||
.header {
|
||
width: 100%;
|
||
height: 50px;
|
||
display: flex;
|
||
align-items: center;
|
||
position: fixed;
|
||
top: 0;
|
||
z-index: 10;
|
||
overflow: hidden;
|
||
}
|
||
.header-back {
|
||
width: 22px;
|
||
height: 22px;
|
||
margin: 0px 15px;
|
||
margin-top: 5px;
|
||
position: relative;
|
||
}
|
||
.header > image:first-child {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
transition: all 0.5s ease;
|
||
}
|
||
.header > text {
|
||
color: #fff;
|
||
font-weight: bold;
|
||
transition: all 0.5s ease;
|
||
position: relative;
|
||
}
|
||
.rank-tabs {
|
||
width: calc(100% - 20px);
|
||
display: flex;
|
||
justify-content: space-around;
|
||
padding: 0 10px;
|
||
margin-top: -15px;
|
||
}
|
||
.rank-tabs > view {
|
||
width: 25%;
|
||
padding: 10px;
|
||
text-align: center;
|
||
border-radius: 20px;
|
||
}
|
||
.rank-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: calc(100% - 20px);
|
||
color: #fff9;
|
||
font-size: 12px;
|
||
margin: 10px;
|
||
border: 1px solid rgb(255 217 71 / 0.2);
|
||
border-radius: 10px;
|
||
background-color: #313131;
|
||
}
|
||
.rank-list > view {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
.rank-list-header {
|
||
width: calc(100% - 20px) !important;
|
||
padding: 10px;
|
||
}
|
||
.rank-list-header > text:nth-child(2) {
|
||
width: 14%;
|
||
}
|
||
.rank-list-header > text:last-child {
|
||
width: 30%;
|
||
text-align: right;
|
||
}
|
||
.rank-list-item {
|
||
padding: 10px 0;
|
||
}
|
||
.player-bg {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
.player-crown {
|
||
position: relative;
|
||
width: 27px;
|
||
height: 27px;
|
||
margin: 0 15px;
|
||
}
|
||
.view-crown {
|
||
width: 27px;
|
||
height: 27px;
|
||
line-height: 27px;
|
||
text-align: center;
|
||
border-radius: 50%;
|
||
margin: 0 15px;
|
||
color: #fff;
|
||
background-color: #676767;
|
||
position: relative;
|
||
}
|
||
.rank-item-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
justify-content: center;
|
||
width: 50%;
|
||
position: relative;
|
||
padding-left: 10px;
|
||
}
|
||
.rank-item-content > text:first-child {
|
||
color: #fff;
|
||
font-size: 14px;
|
||
margin-bottom: 3px;
|
||
width: 120px;
|
||
}
|
||
.rank-list-item > text:last-child {
|
||
margin-right: 10px;
|
||
width: 56px;
|
||
text-align: right;
|
||
}
|
||
.my-rank-data {
|
||
width: calc(100% - 30px);
|
||
padding: 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
color: #fff9;
|
||
font-size: 12px;
|
||
height: calc(10vh - 30px);
|
||
position: relative;
|
||
overflow: hidden;
|
||
border-radius: 10px;
|
||
}
|
||
.my-rank-data > image:first-child {
|
||
position: absolute;
|
||
width: 100%;
|
||
left: 0;
|
||
top: -5px;
|
||
}
|
||
.my-rank-data > text:nth-child(2) {
|
||
background-color: #c1a434;
|
||
position: relative;
|
||
color: #fff;
|
||
padding: 3px 5px;
|
||
border-radius: 20px;
|
||
margin: 10px;
|
||
font-size: 14px;
|
||
min-width: 15px;
|
||
text-align: center;
|
||
}
|
||
.my-rank-data > text:last-child {
|
||
position: relative;
|
||
margin-right: 10px;
|
||
width: 65px;
|
||
text-align: right;
|
||
}
|
||
.my-rank-data > .rank-item-content > text:first-child {
|
||
color: #fed847;
|
||
}
|
||
.my-rank-data > .rank-item-integral {
|
||
color: #fff9;
|
||
font-size: 12px;
|
||
margin-right: 0 !important;
|
||
}
|
||
.no-data {
|
||
width: 100%;
|
||
height: 400px;
|
||
display: flex;
|
||
justify-content: center !important;
|
||
align-items: center;
|
||
color: #fff9;
|
||
font-size: 14px;
|
||
}
|
||
</style>
|