front-pc/pages/home/components/Leaderboard.vue

<template>
  <div class="flex">
    <div>
      <div class="my-[32px] mb-[20px] text-[18px] text-[#333333] font-normal flex items-center"><img src="~/assets/images/2.png" alt="" srcset="" class="mr-[6px]" /> 多多排行榜</div>
      <div class="flex">
        <div class="ma-auto box-border h-[470px] w-[460px] border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] px-[28px]">
          <div class="title-bg ma-auto mb-[40px] mt-[20px]">一周图纸作者排行</div>
          <div v-for="(item, index) in topList" :key="item.ownUserId" class="mb-[23px] flex items-center">
            <div class="w-[30px] text-center"
              ><img
                v-if="index === 0 || index === 1 || index === 2"
                :src="imagesUrl(index)"
                alt=""
                srcset=""
                :class="index === 0 ? 'w-[20px] h-[22px]' : 'w-[28px] h-[29px]'"
              />
              <span v-else class="LiHei (Noncommercial) font-MF text-[16px] text-[#999999] font-normal">{{ index }}</span>
            </div>
            <div class="ml-[20px] w-[120px] flex items-center text-[16px] text-[#333333] font-normal">
              <img :src="item?.avatar" alt="" srcset="" class="h-[36px] w-[36px] rd-[50%]" />
              <span class="ellipsis1 ml-[10px]">{{ item.nickname }}</span>
            </div>
            <div class="ml-[20px] flex text-[14px] text-[#666666] font-normal">
              <!-- <el-icon class="text-17px color-#a8abb2!"><Folder /></el-icon> -->
              <img src="~/assets/images/file.png" alt="" srcset="" class="h-[18px]" />
              <div class="ellipsis1 ml-[10px]">作品：{{ item.projectCount || 0 }}</div>
            </div>
            <div class="ml-[20px] flex text-[14px] text-[#666666] font-normal">
              <!-- <el-icon class="text-17px color-[#e4e7ed!]"><User /></el-icon> -->
              <img src="~/assets/images/user4.png" alt="" srcset="" class="h-[17px]" />
              <div class="ellipsis1 ml-[10px]">粉丝：{{ item.fansCount || 0 }}</div>
            </div>
          </div>
          <!-- 暂无数据 -->
          <el-empty v-if="!topList.length" description="暂无数据"></el-empty>
        </div>
        <div class="ma-auto ml-[18px] box-border h-[470px] w-[460px] border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] px-[28px]">
          <div class="title-bg ma-auto mb-[40px] mt-[20px]">优质上传作者图纸</div>
          <div v-for="(item, index) in userTopList" :key="index" class="mb-[23px] flex items-center">
            <div class="w-[30px] text-center"
              ><img
                v-if="index === 0 || index === 1 || index === 2"
                :src="imagesUrl(index)"
                alt=""
                srcset=""
                :class="index === 0 ? 'w-[20px] h-[22px]' : 'w-[28px] h-[29px]'"
              />
              <span v-else class="font-MF LiHei (Noncommercial) text-[16px] text-[#999999] font-normal">{{ index }}</span>
            </div>
            <div class="ml-[20px] w-[120px] flex items-center text-[16px] text-[#333333] font-normal">
              <img :src="item?.avatar" alt="" srcset="" class="h-[36px] w-[36px] rd-[50%]" />
              <span class="ellipsis1 ml-[10px]">{{ item.nickname }}</span>
            </div>
            <div class="ml-[20px] flex text-[14px] text-[#666666] font-normal">
              <img src="~/assets/images/file.png" alt="" srcset="" class="h-[18px]" />
              <div class="ellipsis1 ml-[10px]">作品：{{ item.projectCount || 0 }}</div>
            </div>
            <div class="ml-[20px] flex text-[14px] text-[#666666] font-normal">
              <img src="~/assets/images/user4.png" alt="" srcset="" class="h-[17px]" />
              <div class="ellipsis1 ml-[10px]">粉丝：{{ item.fansCount || 0 }}</div>
            </div>
          </div>
          <!-- 暂无数据 -->
          <el-empty v-if="!userTopList.length" description="暂无数据"></el-empty>
        </div>
      </div>
    </div>
    <div class="ml-[63px]">
      <div class="my-[32px] mb-[20px] text-[18px] text-[#333333] font-normal flex items-center"><img src="~/assets/images/2.png" alt="" srcset="" class="mr-[6px]" /> 发布动态</div>

      <div class="box-border h-[470px] w-[437px] border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] p-[15px]">
        <div
          v-for="item in newDrawList"
          :key="item.id"
          class="flex cursor-pointer items-center justify-between px-[10px] py-[10px] text-[15px] text-[#333333] font-normal hover:bg-[#f5f5f5]"
          @click="handleClick(item)"
        >
          <div class="ellipsis1 w-[70%]">{{ item.title }}</div>
          <div class="text-[15px] color-[#999]">{{ dayjs(item.createTime).format('MM-DD') }}</div>
        </div>
        <!-- 暂无数据 -->
        <el-empty v-if="!newDrawList.length" description="暂无数据"></el-empty>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue'
  // import { Folder, User } from '@element-plus/icons-vue'
  import { newDraw, userTop } from '~/api/home/index'
  import type { ProjectDrawPageRespVO, ProjectTrendingScoreUserInfoVO } from '~/api/home/type'
  import dayjs from 'dayjs'
  const Url = Object.values(
    import.meta.glob('~/assets/images/no*.png', {
      eager: true,
      query: 'url',
    })
  ).map((module: any) => module.default)

  const imagesUrl = computed(() => {
    return (index: number) => {
      return `${Url[index]}`
    }
  })

  // 最新动态
  // const newDrawList = ref<ProjectDrawPageRespVO[]>([])
  // const handlenewDraw = async () => {
  //   const res = await newDraw({
  //     type: 1,
  //     limit: 11,
  //   })
  //   // newDrawList.value = res.data
  // }
  // handlenewDraw()

  const [{data: topList},{ data: userTopList}, {data: newDrawList}] = await Promise.all([ userTop({ type: 1 }), userTop({}),newDraw({
      type: 1,
      limit: 11,
    })])

  // const topList = ref<ProjectTrendingScoreUserInfoVO[]>([]) // 最新动态
  // const userTopList = ref<ProjectTrendingScoreUserInfoVO[]>([]) // 最新动态
  // const handleuserTop = () => {
    // Promise.all([userTop({ type: 1 }), userTop({})]).then((res) => {
      // topList.value = res[0].data
      // userTopList.value = res[1].data

      // console.log('res----',JSON.stringify(res));
      
    // })
  // }
  // handleuserTop()

  const handleClick = (item: ProjectDrawPageRespVO) => {
    navigateTo(`/down-drawe-detail/${item.id}`) // 修改为在新窗口打开
  }
</script>

<style scoped lang="scss">
  .title-bg {
    width: 224px;
    height: 52px;
    background-image: url('~/assets/images/name_bg.png');
    background-size: 100% 100%;
    text-align: center;
    line-height: 48px;
    font-weight: bold;
    font-size: 18px;
    color: #a44120;
  }

  .ellipsis1 {
    @include ellipsis(1);
  }
</style>