shoot-miniprograms/src/pages/rank-list.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(null);
const addBg = ref("");

onMounted(async () => {
  const deviceInfo = uni.getDeviceInfo();
  isIos.value = deviceInfo.osName === "ios";
  currentList.value = rankData.value.rank;
  myData.value = rankData.value.rank.find(
    (item) => item.userId === user.value.id
  );
});

const handleSelect = (index) => {
  selectedIndex.value = index;
  myData.value = null;
  if (index === 0) {
    currentList.value = rankData.value.rank;
  } else if (index === 2) {
    currentList.value = rankData.value.ringRank;
  } else {
    currentList.value = [];
  }
  myData.value = rankData.value.rank.find(
    (item) => item.userId === user.value.id
  );
};

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>{{ 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">
      <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 }}，{{ myData.TotalGames }}场</text>
      </view>
      <text class="rank-item-integral" v-if="selectedIndex === 2"
        ><text
          :style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
          >{{ myData.TenRings }}</text
        >次</text
      >
      <text class="rank-item-integral" v-else
        ><text
          :style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
          >{{ myData.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;
}
.my-rank-data > text:last-child {
  position: relative;
  margin-right: 10px;
  width: 56px;
  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>