billd-live/src/views/rank/index.vue

<template>
  <div class="rank-wrap">
    <div class="type-list">
      <div
        v-for="(item, index) in rankTypeList"
        :key="index"
        :class="{ item: 1, active: item.type === currRankType }"
        @click="changeCurrRankType(item.type)"
      >
        {{ item.label }}
      </div>
    </div>

    <div
      v-if="rankList.length"
      class="rank-list"
    >
      <div class="top">
        <div
          v-for="(item, index) in [rankList[1], rankList[0], rankList[2]]"
          :key="index"
          :class="{ item: 1, [`rank-${item.rank}`]: 1 }"
        >
          <div class="avatar">
            <img
              :src="item.avatar"
              alt=""
            />
            <div class="border"></div>
          </div>
          <div class="username">{{ item.username }}</div>
          <div class="rank">
            <i>0{{ item.rank }}</i>
          </div>
          <div v-if="item.balance">余额：{{ item.balance }}</div>
        </div>
      </div>
      <div class="top50-list">
        <div
          v-for="(item, index) in rankList.filter((item, index) => index >= 3)"
          :key="index"
          class="top50-item"
        >
          <div class="rank">
            <i>{{ item.rank >= 10 ? item.rank : '0' + item.rank }}</i>
          </div>
          <div class="left">
            <img
              :src="item.avatar"
              class="avatar"
              alt=""
            />
            <div class="username">{{ item.username }}</div>
          </div>
          <div class="right"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';

import { fetchLiveRoomList } from '@/api/liveRoom';
import { fetchUserList } from '@/api/user';
import { fetchWalletList } from '@/api/wallet';
import { RankTypeEnum } from '@/interface';

export interface IRankType {
  type: RankTypeEnum;
  label: string;
}

const rankTypeList = ref<IRankType[]>([
  {
    type: RankTypeEnum.liveRoom,
    label: '主播榜',
  },
  {
    type: RankTypeEnum.user,
    label: '用户榜',
  },
  {
    type: RankTypeEnum.wallet,
    label: '土豪榜',
  },
]);

const currRankType = ref(RankTypeEnum.liveRoom);

const mockRank = [
  {
    username: '待上榜',
    avatar: '',
    rank: 1,
    level: -1,
    score: -1,
  },
  {
    username: '待上榜',
    avatar: '',
    rank: 2,
    level: -1,
    score: -1,
  },
  {
    username: '待上榜',
    avatar: '',
    rank: 3,
    level: -1,
    score: -1,
  },
];
const rankList = ref(mockRank);

async function getWalletList() {
  const res = await fetchWalletList();
  if (res.code === 200) {
    const length = res.data.rows.length;
    rankList.value = res.data.rows.map((item, index) => {
      return {
        username: item.user.username!,
        avatar: item.user.avatar!,
        rank: index + 1,
        level: 1,
        score: 1,
        balance: item.balance,
      };
    });
    if (length < 3) {
      rankList.value.push(...mockRank.slice(length));
    }
  }
}
async function getLiveRoomList() {
  const res = await fetchLiveRoomList({
    orderName: 'updated_at',
    orderBy: 'desc',
  });
  if (res.code === 200) {
    const length = res.data.rows.length;
    rankList.value = res.data.rows.map((item, index) => {
      return {
        username: item.user_username!,
        avatar: item.user_avatar!,
        rank: index + 1,
        level: 1,
        score: 1,
      };
    });
    if (length < 3) {
      rankList.value.push(...mockRank.slice(length));
    }
  }
}

function changeCurrRankType(type: RankTypeEnum) {
  currRankType.value = type;
  switch (type) {
    case RankTypeEnum.liveRoom:
      getLiveRoomList();
      break;
    case RankTypeEnum.user:
      getUserList();
      break;
    case RankTypeEnum.wallet:
      getWalletList();
      break;
    default:
      break;
  }
}

onMounted(() => {
  changeCurrRankType(currRankType.value);
});

async function getUserList() {
  try {
    const res = await fetchUserList({
      orderName: 'updated_at',
      orderBy: 'desc',
    });
    if (res.code === 200) {
      const length = res.data.rows.length;
      rankList.value = res.data.rows.map((item, index) => {
        return {
          username: item.username!,
          avatar: item.avatar!,
          rank: index + 1,
          level: 1,
          score: 1,
        };
      });
      if (length < 3) {
        rankList.value.push(...mockRank.slice(length));
      }
    }
  } catch (error) {
    console.log(error);
  }
}
</script>

<style lang="scss" scoped>
.rank-wrap {
  box-sizing: border-box;
  padding-top: 10px;
  height: calc(100vh - 64px);
  background-color: #f4f4f4;
  .type-list {
    display: flex;
    align-items: center;
    margin: 20px 0;
    width: 100%;
    .item {
      flex: 1;
      margin: 0 10px;
      height: 40px;
      border-radius: 10px;
      background-color: $theme-color-gold;
      color: white;
      text-align: center;
      font-weight: bold;
      font-size: 20px;
      line-height: 40px;
      filter: grayscale(1);
      cursor: pointer;

      &.active {
        filter: grayscale(0);
      }
    }
  }
  .rank-list {
    width: 100%;

    .top {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      margin-top: 100px;
      width: 100%;
      .item {
        position: relative;
        margin: 0 20px;
        width: 200px;
        height: 180px;
        border-radius: 15px;
        background-color: white;
        text-align: center;
        &.rank-1 {
          height: 200px;
          border-color: #ff6744;
          color: #ff6744;
          .rank {
            margin-top: 20px;
          }
        }
        &.rank-2 {
          border-color: #44d6ff;
          color: #44d6ff;
        }
        &.rank-3 {
          border-color: #ffb200;
          color: #ffb200;
        }

        .avatar {
          position: relative;
          margin-top: -50px;
          img {
            display: inline-block;
            margin: 0 auto;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: pink;
          }
        }

        .username {
          margin-bottom: 10px;
          font-size: 22px;
        }
        .rank {
          display: inline-block;
          padding: 0px 20px;
          border: 1px solid;
          border-radius: 20px;
          font-size: 20px;
        }
      }
    }
    .top50-list {
      margin-top: 20px;
      border-radius: 10px;
      background-color: white;
      .top50-item {
        display: flex;
        align-items: center;
        padding: 0 10px;
        height: 40px;
        color: #666;
        &:nth-child(2n) {
          background-color: #fafbfc;
        }
        .rank {
          width: 80px;
          box-sizing: border-box;
          margin-right: 20px;
          border-radius: 40px;
          text-align: center;
          background-color: #84f9da;
          color: white;
          font-size: 20px;
        }
        .left {
          display: flex;
          align-items: center;
          .avatar {
            margin-right: 10px;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background-color: pink;
          }
          .username {
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>