shoot-miniprograms/src/pages/ranking.vue

<script setup>
import { ref, onMounted } from "vue";
import { onHide } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import Avatar from "@/components/Avatar.vue";
import { getRankListAPI, isGamingAPI } from "@/apis";
import { topThreeColors } from "@/constants";
import { getHomeData } from "@/apis";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user, device } = storeToRefs(store);
const { getLvlName } = store;

const defaultSeasonData = {
  "1v1": { totalGames: 0, winCount: 0, winRate: 0 },
  "5m": { totalGames: 0, winCount: 0, winRate: 0 },
  "10m": { totalGames: 0, winCount: 0, winRate: 0 },
};

const selectedIndex = ref(0);
const currentList = ref([]);
const seasonName = ref("");
const seasonData = ref([]);
const rankData = ref({ user: {} });
const showSeasonList = ref(false);
const currentSeasonData = ref(defaultSeasonData);

const handleSelect = (index) => {
  selectedIndex.value = index;
  if (index === 0 && rankData.value.rank) {
    currentList.value = rankData.value.rank.slice(0, 10);
  } else if (index === 2 && rankData.value.ringRank) {
    currentList.value = rankData.value.ringRank.slice(0, 10);
  } else {
    currentList.value = [];
  }
};

onMounted(async () => {
  const result = await getHomeData();
  currentList.value = result.rank;
  rankData.value = result;
  const { userGameStats, seasonList } = result;
  seasonData.value = seasonList;
  updateData();
});

const toTeamMatchPage = async (gameType, teamSize) => {
  if (!device.value.deviceId) {
    return uni.showToast({
      title: "请先绑定设备",
      icon: "none",
    });
  }
  const isGaming = await isGamingAPI();
  if (isGaming) {
    uni.$showHint(1);
    return;
  }
  uni.navigateTo({
    url: `/pages/team-match?gameType=${gameType}&teamSize=${teamSize}`,
  });
};

const toMeleeMatchPage = async (gameType, teamSize) => {
  if (!device.value.deviceId) {
    return uni.showToast({
      title: "请先绑定设备",
      icon: "none",
    });
  }
  if (!user.value.trio) {
    return uni.showToast({
      title: "请先完成新手试炼",
      icon: "none",
    });
  }
  const isGaming = await isGamingAPI();
  if (isGaming) {
    uni.$showHint(1);
    return;
  }
  uni.navigateTo({
    url: `/pages/melee-match?gameType=${gameType}&teamSize=${teamSize}`,
  });
};
const toMyGrowthPage = () => {
  uni.navigateTo({
    url: "/pages/my-growth",
  });
};
const toRankListPage = () => {
  uni.navigateTo({
    url: "/pages/rank-list",
  });
};
const onChangeSeason = async (seasonId, name) => {
  if (name !== seasonName.value) {
    const result = await getHomeData(seasonId);
    rankData.value = result;
    seasonName.value = name;
    handleSelect(selectedIndex.value);
    updateData();
  }
  showSeasonList.value = false;
};
const updateData = () => {
  const { userGameStats, seasonList } = rankData.value;
  currentSeasonData.value = { ...defaultSeasonData };
  if (
    userGameStats &&
    userGameStats.stats_list &&
    userGameStats.stats_list.length
  ) {
    userGameStats.stats_list.forEach((item) => {
      if (seasonList.length) {
        seasonList.some((s) => {
          if (s.seasonId === item.seasonId) {
            seasonName.value = s.seasonName;
            return true;
          }
          return false;
        });
      }
      let keyName = "";
      if (item.gameType === 1 && item.teamSize === 2) keyName = "1v1";
      if (item.gameType === 2 && item.teamSize === 5) keyName = "5m";
      if (item.gameType === 2 && item.teamSize === 10) keyName = "10m";
      if (keyName) {
        currentSeasonData.value[keyName] = {
          totalGames: item.totalGames,
          winCount: item.winCount,
          winRate: Number(((item.winCount / item.totalGames) * 100).toFixed(2)),
        };
      }
    });
  }
};
onHide(() => {
  showSeasonList.value = false;
});
</script>

<template>
  <Container title="排行赛">
    <view class="container" @click="() => (showSeasonList = false)">
      <view class="ranking-my-data" v-if="user.id">
        <view>
          <view class="user-info">
            <Avatar
              :src="user.avatar"
              :rankLvl="rankData.user.rankLvl"
              :size="30"
            />
            <text>{{ user.nickName }}</text>
          </view>
          <view
            class="ranking-season"
            v-if="seasonData.length"
            @click.stop="() => (showSeasonList = true)"
          >
            <text>{{ seasonName }}</text>
            <image
              v-if="seasonData.length > 1"
              src="../static/triangle.png"
              mode="widthFix"
            />
            <view class="season-list" v-if="showSeasonList">
              <view
                v-for="(item, index) in seasonData"
                :key="index"
                @click.stop="
                  () => onChangeSeason(item.seasonId, item.seasonName)
                "
              >
                <text>{{ item.seasonName }}</text>
                <image
                  v-if="item.seasonName === seasonName"
                  src="../static/triangle.png"
                  mode="widthFix"
                />
              </view>
            </view>
          </view>
        </view>
        <view class="my-data">
          <view>
            <text>段位</text>
            <text :style="{ color: '#83CDFF' }">{{
              getLvlName(rankData.user.scores) || "-"
            }}</text>
          </view>
          <view>
            <text>赛季平均环数</text>
            <text :style="{ color: '#FFD947' }">{{
              rankData.user.avg_ring ? rankData.user.avg_ring + "环" : "-"
            }}</text>
          </view>
          <view>
            <text>赛季胜率</text>
            <text :style="{ color: '#FF507E' }">{{
              rankData.user.avg_win ? rankData.user.avg_win + "%" : "-"
            }}</text>
          </view>
        </view>
        <view class="rank-type">
          <image
            src="../static/battle1v1.png"
            mode="widthFix"
            @click.stop="() => toTeamMatchPage(1, 2)"
          />
          <image
            src="../static/battle5.png"
            mode="widthFix"
            @click.stop="() => toMeleeMatchPage(2, 5)"
          />
          <image
            src="../static/battle10.png"
            mode="widthFix"
            @click.stop="() => toMeleeMatchPage(2, 10)"
          />
        </view>
        <view class="data-progress">
          <text>
            {{
              `【1 V 1】${currentSeasonData["1v1"].totalGames}场 胜率 ${currentSeasonData["1v1"].winRate}%`
            }}
          </text>
          <view>
            <view
              :style="{
                width: `${currentSeasonData['1v1'].winRate}%`,
                backgroundColor: '#FF507E',
              }"
            />
          </view>
        </view>
        <view class="data-progress">
          <text>
            {{
              `【5人大乱斗】${currentSeasonData["5m"].totalGames}场 胜率 ${currentSeasonData["5m"].winRate}%`
            }}
          </text>
          <view>
            <view
              :style="{
                width: `${currentSeasonData['5m'].winRate}%`,
                backgroundColor: '#FFD947',
              }"
            />
          </view>
        </view>
        <view class="data-progress">
          <text>
            {{
              `【10人大乱斗】${currentSeasonData["5m"].totalGames}场 胜率 ${currentSeasonData["10m"].winRate}%`
            }}
          </text>
          <view>
            <view
              :style="{
                width: `${currentSeasonData['10m'].winRate}%`,
                backgroundColor: '#FFD947',
              }"
            />
          </view>
        </view>
        <view @click.stop="toMyGrowthPage">查看我的比赛记录</view>
      </view>
      <view class="ranking-data">
        <view>
          <view
            v-for="(rankType, index) in [
              '积分榜',
              'MVP榜',
              '十环榜',
              '最牛省份',
            ]"
            :key="index"
            :style="{
              color: index === selectedIndex ? '#000' : '#fff',
              backgroundColor:
                index === selectedIndex ? '#FFD947' : 'transparent',
            }"
            @tap="handleSelect(index)"
          >
            {{ rankType }}
          </view>
        </view>
        <view
          v-for="(item, index) in currentList"
          :key="index"
          :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">{{ index + 1 }}</view>
          <image
            :src="item.avatar || '../static/user-icon.png'"
            mode="widthFix"
            :style="{ borderColor: index < 3 ? topThreeColors[index] : '' }"
          />
          <view>
            <text class="truncate">{{ item.name }}</text>
            <text
              >{{ getLvlName(item.totalScore) }}，{{ item.TotalGames }}场</text
            >
          </view>
          <text>{{ item.totalScore }}<text>分</text></text>
        </view>
        <view v-if="!currentList.length" class="no-data">
          <text>筹备中...</text>
        </view>
        <view class="see-more" @click.stop="toRankListPage">点击查看更多</view>
      </view>
    </view>
  </Container>
</template>

<style scoped>
.container {
  width: 100%;
}
.ranking-my-data,
.ranking-data {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: #54431d33;
  border: 1px solid #54431d;
  border-radius: 10px;
  margin: 0 15px;
}
.ranking-data {
  margin-bottom: 20px;
}
.ranking-my-data {
  margin-bottom: 15px;
}
.ranking-my-data {
  padding: 15px;
}
.ranking-my-data > view:first-of-type {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid #48494e;
  padding-bottom: 15px;
}
.user-info {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 14px;
}
.user-info > text {
  margin-left: 15px;
}
.ranking-season {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.ranking-season > image {
  width: 12px;
}
.ranking-season > text {
  color: #ffd947;
  font-size: 14px;
  margin-right: 5px;
}
.my-data {
  display: flex;
  align-items: center;
  justify-content: space-around;
  color: #b3b3b3;
  width: 100%;
  margin-top: 15px;
}
.my-data > view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  height: 60px;
}
.my-data > view:nth-child(2) {
  border-left: 1px solid #48494e;
  border-right: 1px solid #48494e;
  padding: 0 20px;
}
.my-data > view > text:first-child {
  font-size: 14px;
}
.my-data > view > text:last-child {
  font-size: 18px;
}
.rank-type {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 15px;
}
.rank-type > image {
  width: 32%;
}
.data-progress {
  width: 100%;
  color: #b3b3b3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 15px;
}
.data-progress > view {
  width: 100%;
  height: 5px;
  border-radius: 10px;
  background-color: #696969;
  margin-top: 10px;
}
.data-progress > view > view {
  height: 5px;
  border-radius: 10px;
  transition: width 0.3s ease;
}
.ranking-my-data > view:last-child {
  color: #39a8ff;
  font-size: 14px;
  text-align: center;
  width: 100%;
  padding-top: 15px;
}
.ranking-data > view:first-of-type {
  width: calc(100% - 30px);
  display: flex;
  justify-content: space-around;
  font-size: 15px;
  padding: 15px;
}
.ranking-data > view:first-of-type > view {
  width: 25%;
  padding: 7px 10px;
  text-align: center;
  border-radius: 20px;
}
.rank-item {
  width: calc(100% - 30px);
  height: 55px;
  padding: 0 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.rank-item > view:first-child {
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background-color: #767676;
  color: #fff;
  text-align: center;
  line-height: 24px;
  font-size: 14px;
}
.rank-item > image:first-child {
  width: 24px;
  height: 24px;
}
.rank-item > image:nth-child(2) {
  width: 35px;
  min-height: 35px;
  max-height: 35px;
  border-radius: 50%;
  border: 1px solid transparent;
}
.rank-item > view:nth-child(3) {
  display: flex;
  flex-direction: column;
  width: 55%;
}
.rank-item > view:nth-child(3) > text:first-child {
  color: #fff9;
  font-size: 14px;
  width: 120px;
}
.rank-item > view:nth-child(3) > text:last-child {
  color: #fff4;
  font-size: 13px;
}
.rank-item > text:last-child {
  color: #fff;
}
.rank-item > text:last-child text {
  color: #fff4;
  font-size: 13px;
  margin-left: 3px;
}
.see-more {
  color: #39a8ff;
  font-size: 14px;
  text-align: center;
  width: 100%;
  margin-top: 5px;
  margin-bottom: 10px;
}
.no-data {
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff9;
}
.season-list {
  background-color: #000c;
  border-radius: 15px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 12px;
  padding: 5px 0;
  position: absolute;
  width: 220rpx;
  top: -44rpx;
  right: -30rpx;
  letter-spacing: 2px;
}
.season-list > view {
  display: flex;
  align-items: center;
  padding: 10px 20px;
}
.season-list > view > image {
  width: 12px;
  height: 12px;
  margin-left: 10px;
}
</style>