360 lines
8.5 KiB
Vue
360 lines
8.5 KiB
Vue
<script setup>
|
||
import { ref, onMounted } from "vue";
|
||
import Avatar from "@/components/Avatar.vue";
|
||
import useStore from "@/store";
|
||
import { storeToRefs } from "pinia";
|
||
const store = useStore();
|
||
const { user, rankData } = storeToRefs(store);
|
||
const { getLvlName } = store;
|
||
|
||
const isIos = ref(true);
|
||
const selectedIndex = ref(0);
|
||
const currentList = ref([]);
|
||
const myData = ref({});
|
||
const addBg = ref("");
|
||
|
||
onMounted(async () => {
|
||
const deviceInfo = uni.getDeviceInfo();
|
||
isIos.value = deviceInfo.osName === "ios";
|
||
currentList.value = rankData.value.rank;
|
||
if (rankData.value.myRankPos) myData.value = rankData.value.myRankPos;
|
||
});
|
||
|
||
const handleSelect = (index) => {
|
||
selectedIndex.value = index;
|
||
if (index === 0) {
|
||
currentList.value = rankData.value.rank;
|
||
if (rankData.value.myRankPos) myData.value = rankData.value.myRankPos;
|
||
} else if (index === 2) {
|
||
currentList.value = rankData.value.ringRank;
|
||
if (rankData.value.myRingRankPos)
|
||
myData.value = rankData.value.myRingRankPos;
|
||
} else {
|
||
myData.value = {};
|
||
currentList.value = [];
|
||
}
|
||
};
|
||
|
||
const onScrollView = (e) => {
|
||
addBg.value = e.detail.scrollTop > 100;
|
||
};
|
||
|
||
const subTitles = ["排位赛积分", "本周MVP次数", "本周十环次数"];
|
||
</script>
|
||
|
||
<template>
|
||
<scroll-view class="container" scroll-y @scroll="onScrollView">
|
||
<view
|
||
class="header"
|
||
:style="{
|
||
paddingTop: isIos ? '38px' : '25px',
|
||
}"
|
||
>
|
||
<image
|
||
v-if="addBg"
|
||
class="bg-image"
|
||
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, color: '#fff' }">
|
||
本赛季排行榜
|
||
</text>
|
||
</view>
|
||
<image src="../static/rankbg.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.totalScore) }}，{{ 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 === 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>
|
||
<view class="my-rank-data" v-if="myData.userId">
|
||
<image src="../static/modal-content-bg.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 }}，{{ rankData.TotalGames }}场</text>
|
||
</view>
|
||
<text class="rank-item-integral" v-if="selectedIndex === 2">
|
||
<text
|
||
:style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
|
||
>{{ rankData.myRankPos.TenRings }}</text
|
||
>次</text
|
||
>
|
||
<text class="rank-item-integral" v-else>
|
||
<text
|
||
:style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
|
||
>{{ rankData.myRingRankPos.totalScore }}</text
|
||
>分</text
|
||
>
|
||
</view>
|
||
</scroll-view>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.container {
|
||
width: 100%;
|
||
height: 100vh;
|
||
padding-bottom: 100px;
|
||
}
|
||
.header-bg {
|
||
width: 100%;
|
||
}
|
||
.header {
|
||
width: 100%;
|
||
height: 60px;
|
||
display: flex;
|
||
align-items: flex-center;
|
||
position: fixed;
|
||
top: 0;
|
||
transition: all 0.3s ease;
|
||
z-index: 10;
|
||
overflow: hidden;
|
||
}
|
||
.header text {
|
||
transition: all 0.3s ease;
|
||
line-height: 60px;
|
||
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;
|
||
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 {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: calc(100% - 30px);
|
||
padding: 15px;
|
||
padding-bottom: 30px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
color: #fff9;
|
||
font-size: 12px;
|
||
}
|
||
.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;
|
||
}
|
||
.header-back {
|
||
width: 22px;
|
||
height: 22px;
|
||
margin: 20px 15px;
|
||
position: relative;
|
||
}
|
||
.bg-image {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
</style>
|