designer-hub/packages/app/src/pages-sub/mine/honors/leaderboard/index.vue

<route lang="json">
{
  "style": {
    "navigationBarTitleText": "获取榜单",
    "navigationStyle": "custom"
  }
}
</route>
<script setup lang="ts">
import dayjs from 'dayjs'
import { useUserStore } from '@/store'
import { storeToRefs } from 'pinia'
import { leaderV1, leaderV2, leaderV3 } from '@/core/libs/svgs'
import { getCollectionBadgeNotice } from '@/core/libs/requests'

const id = ref()
const theTop3 = ref<any[]>([])
const otherTop = ref<any[]>([])
const { data: rankList, run: setRankList } = useRequest(
  () => getCollectionBadgeNotice({ badgeId: id.value }),
  {
    initialData: [],
  },
)

const handleClickLeft = () => {
  uni.navigateBack()
}
onLoad(async (query?: Record<string | 'active' | 'id' | 'isShared', string>) => {
  if (query?.id) {
    id.value = query.id
    await setRankList()
    theTop3.value = rankList.value.length >= 3 ? rankList.value.slice(0, 3) : rankList.value
    otherTop.value = rankList.value.slice(3)
  }
})
</script>
<template>
  <wd-navbar
    fixed
    placeholder
    left-arrow
    safeAreaInsetTop
    custom-style="background-color: #22201E !important;"
    @click-left="handleClickLeft"
    :bordered="false"
  >
    <template #title>
      <view class="wd-navbar__title" style="color: #fff !important">获取榜单</view>
    </template>
    <template #left>
      <wd-icon name="thin-arrow-left" color="#fff" size="24px"></wd-icon>
    </template>
  </wd-navbar>
  <div class="bg-[#22201E] h-full flex flex-[1] flex-col flex-grow">
    <!-- 头部区域 -->
    <div class="h-[134px] px-[14px]">
      <div class="h-[26px] color-[#999999] font-size-[12px] text-center lh-[26px]">
        按获取时间排序
      </div>
      <div class="mt-[42px] w-[calc(100vw-28px)] mx-[auto] flex justify-around">
        <!-- 第二名 leader2 -->
        <div class="w-[60px] h-[60px] relative">
          <div class="absolute top-[-16px] left-[50%] translate-x-[-50%]">
            <wd-img :src="leaderV2" width="46" height="23"></wd-img>
          </div>
          <!-- 头像 -->
          <div
            class="w-[60px] h-[60px] rounded-full bg-[#999999] border-[1px] border-[#D1E0EE] border-solid absolute top-[0] left-[0] overflow-hidden z-0"
          >
            <wd-img :src="theTop3[1]?.avatar" width="60" height="60" class="rounded-full"></wd-img>
          </div>
          <div
            class="absolute bottom-[-16px] left-[50%] translate-x-[-50%] sign-bg2 color-[#657A98] text-center font-size-[12px] fw-400 w-[42px] h-[16px]"
          >
            NO.2
          </div>
        </div>
        <!-- 第一名 leader1 -->
        <div class="w-[66px] h-[66px] relative mt-[-13px]">
          <div class="absolute top-[-18px] left-[25px] translate-x-[-20px]">
            <wd-img :src="leaderV1" width="50" height="25"></wd-img>
          </div>
          <!-- 头像 -->
          <div
            class="w-[66px] h-[66px] rounded-full bg-[#999999] border-[1px] border-[#FFC700] border-solid absolute top-[0] left-[0] overflow-hidden z-0"
          >
            <wd-img :src="theTop3[0]?.avatar" width="66" height="66" class="rounded-full"></wd-img>
          </div>
          <div
            class="absolute bottom-[-12px] left-[23px] translate-x-[-16px] sign-bg1 color-[#FFDF79] text-center font-size-[12px] fw-400 w-[46px] h-[17px]"
          >
            NO.1
          </div>
        </div>
        <!-- 第三名 leader3 -->
        <div class="w-[60px] h-[60px] relative">
          <div class="absolute top-[-16px] left-[50%] translate-x-[-50%]">
            <wd-img :src="leaderV3" width="46" height="23"></wd-img>
          </div>
          <!-- 头像 -->
          <div
            class="w-[60px] h-[60px] rounded-full bg-[#999999] border-[1px] border-[#A87F79] border-solid absolute top-[0] left-[0] overflow-hidden z-0"
          >
            <wd-img :src="theTop3[2]?.avatar" width="60" height="60" class="rounded-full"></wd-img>
          </div>
          <div
            class="absolute bottom-[-16px] left-[50%] translate-x-[-50%] sign-bg3 color-[#856660] text-center font-size-[12px] fw-400 w-[42px] h-[16px]"
          >
            NO.3
          </div>
        </div>
      </div>
    </div>
    <!-- 头部 领奖台 -->
    <div class="bg-gradient-to-b pt-[12px] from-[#22201E] to-[#191818] h-[102px]">
      <div class="flex justify-around h-[95px] w-[calc(100vw-28px)] mx-[auto]">
        <div
          class="w-[87px] pr-[50px] h-[95px] mr-[-50px] relative z-5 bg-[url(https://image.zhuchaohui.com/zhucaohui/e5b96189f235d0dee01209cfe50a1e50751459e03099027528f62a8878a4f1a9.png)] bg-[length:100%_100%]"
        >
          <div class="absolute bottom-[20px] left-[0px]">
            <div class="w-[87px] color-[#fff] font-size-[14px] fw-400 lh-[26px] text-center">
              {{ theTop3[1]?.name }}
            </div>
            <div class="w-[87px] color-[#BDBDBD] font-size-[12px] fw-500 text-center">
              {{ dayjs(theTop3[1]?.acquisitionTime).format('YYYY-MM-DD') }}
            </div>
          </div>
        </div>
        <div
          class="w-[137px] h-[107px] mt-[-12px] relative z-10 bg-[url(https://image.zhuchaohui.com/zhucaohui/e5b96189f235d0dee01209cfe50a1e50751459e03099027528f62a8878a4f1a9.png)] bg-[length:100%_100%]"
        >
          <div class="absolute bottom-[20px] left-[0px] w-[137px]">
            <div class="color-[#fff] font-size-[14px] fw-400 lh-[26px] text-center">
              {{ theTop3[0]?.name }}
            </div>
            <div class="color-[#BDBDBD] font-size-[12px] fw-500 text-center">
              {{ dayjs(theTop3[0]?.acquisitionTime).format('YYYY-MM-DD') }}
            </div>
          </div>
        </div>
        <div
          class="w-[97px] h-[95px] ml-[-40px] pl-[40px] relative z-5 bg-[url(https://image.zhuchaohui.com/zhucaohui/e5b96189f235d0dee01209cfe50a1e50751459e03099027528f62a8878a4f1a9.png)] bg-[length:100%_100%]"
        >
          <div class="absolute bottom-[20px] right-[0px]">
            <div class="w-[97px] color-[#fff] font-size-[14px] fw-400 lh-[26px] text-center">
              {{ theTop3[2]?.name }}
            </div>
            <div class="w-[97px] color-[#BDBDBD] font-size-[12px] fw-500 text-center">
              {{ dayjs(theTop3[2]?.acquisitionTime).format('YYYY-MM-DD') }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 其他人员 -->
    <div class="bg-gradient-to-t from-[#22201E] to-[#191818]">
      <div
        class="h-[626px] bg-gradient-to-b from-[#22201E] to-[#191818] m-[14px] p-[14px]"
        style="border-radius: 16px"
      >
        <div
          class="flex justify-between items-center pb-[20px]"
          v-for="item in otherTop"
          :key="item.rank1"
        >
          <div class="w-[20%] color-[#666] text-center font-size-[18px] fw-700">
            {{ item.rank1 >= 10 ? item.rank1 : '0' + item.rank1 }}
          </div>
          <div class="w-[50%] flex items-center">
            <wd-img :src="item.avatar" width="44" height="44"></wd-img>
            <div class="color-[#fff] font-size-[16px] fw-400 lh-[26px] ml-[10px]">
              {{ item.name }}
            </div>
          </div>
          <div class="w-[30%] text-center font-size-[14px] fw-500 color-[#BDBDBD]">
            {{ dayjs(item.acquisitionTime).format('YYYY-MM-DD') }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.sign-bg1 {
  border-radius: 20px;
  border: 1px solid #e5c57f;
  background: linear-gradient(90deg, #f9a939 0%, #d37c2b 100%);
}
.sign-bg2 {
  border-radius: 18.603px;
  border: 0.75px solid #d5e8ff;
  background: linear-gradient(90deg, #d9e4f7 0%, #a8b9d3 100%);
}
.sign-bg3 {
  border-radius: 18.603px;
  border: 1px solid #dcc4ba;
  background: linear-gradient(90deg, #fce7dc 0%, #c39f98 100%);
}
</style>