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

<template>
  <div class="mt-34px w-100%">
    <div class="flex items-center justify-between">
      <KlTabBar v-model="query.type" :data="tabBar" :show-icon="true" />
      <div class="flex gap-15px">
        <span
          v-for="(item, index) in projectTypeList"
          :key="index"
          :class="{ 'color-#1A65FF! border-b-2px border-b-solid border-b-[#1A65FF] rounded-1px pb-3px': query.projectTypeDay === item.id }"
          class="cursor-pointer text-14px color-#333333"
          @mouseenter="handleHover(item)"
          @click="handleClickType(item)"
        >
          {{ item.name }}
        </span>
      </div>
    </div>
    <div class="content mt-10px flex">
      <!-- <div class="sider">
        <div class="box-border h-100% h-55px w-221px flex items-center rounded-lg bg-[#1A65FF] pl-24px text-white">
          <img src="@/assets/images/1.png" alt="" srcset="" />
          <span class="ml-12px text-16px">全部资源分类</span>
        </div>
        <div class="side-menu border border-[#EEEEEE] border-solid">
          <div
            v-for="(item, index) in projectTypeListChildren"
            :key="index"
            class="menu-item"
            :class="{ active: query.projectType === item.id }"
            @mouseenter="handleClick(item)"
            @click="
              handleClickType(
                projectTypeList?.find((c: any) => c.id === query.projectTypeDay),
                item
              )
            "
          >
            {{ item.name }}
          </div>
          <el-empty v-if="projectTypeList.length === 0" description="暂无数据"></el-empty>
        </div>
      </div> -->
      <div class="box-border w-100%">
        <div class="grid grid-cols-5 gap-17px">
          <div
            v-for="item in hotTopList"
            :key="item.id"
            class="cursor-pointer border border-[#EEEEEE] rounded-1px border-solid bg-[#FFFFFF]"
            @click="handleCardClick(item)"
          >
            <div>
              <div class="h-212px w-100%">
                <el-image :src="item.iconUrl" alt="" srcset="" fit="cover" class="block h-100% w-100%" />
              </div>
              <div class="ellipsis mx-20px my-11px text-14px color-#333333 font-normal">{{ item.title }}</div>
            </div>
          </div>
        </div>
        <el-empty v-if="hotTopList.length === 0" description="暂无数据"></el-empty>
      </div>
    </div>
    <!-- <div class="morefont-400 text-16px text-[#1A65FF] text-right cursor-pointer"> 查看更多 >> </div> -->
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, watch } from 'vue'
  import KlTabBar from '@/components/kl-tab-bar/index.vue'
  // import KlCardDetail from '@/components/kl-card-detail/index.vue'
  import { hotTop, hotTag } from '@/api/home/index'
  import { ProjectDrawPageRespVO, ProjectDictNodeVO } from '@/api/home/type'

  /** 请求参数 */
  const query = reactive({
    type: 1,
    projectType: '',
    projectTypeDay: '', // 自定义的
    isDomestic: 1,
    limit: 6,
  })

  const tabBar = ref([
    {
      label: '热门图纸',
      value: 1,
    },
    {
      label: '热门模型',
      value: 3,
    },
    {
      label: '热门文本',
      value: 2,
    },
  ])

  // const hotTopListTitle = computed(() => {
  //   if (projectTypeList.value.length > 0) {
  //     const item = projectTypeList.value.find((item) => item.id === query.projectType)
  //     return item?.name
  //   }
  //   return ''
  // })

  /** 点击卡片 */
  const handleCardClick = (item: ProjectDrawPageRespVO) => {
    // 跳转到下载详情页 并且是单独开标签
    window.open(`/down-drawe-detail?id=${item.id}`, '_blank') // 修改为在新窗口打开
  }

  const handleClickType = (primary?: ProjectDictNodeVO, secondary?: ProjectDictNodeVO) => {
    if (primary?.name !== '全部分类') return
    const normal = { id: '0', name: query.type === 1 ? '图纸库' : query.type === 2 ? '文本库' : '模型库', isChildren: false }
    const level = [primary, secondary].filter((item) => item).map((item) => ({ id: item?.id, name: item?.name, isChildren: item?.children ? false : true }))
    if (primary?.id === '0') {
      level[0].name = '图纸库'
    } else {
      level.unshift(normal)
    }
    if (query.type === 1) {
      window.open(`/drawe?level=${JSON.stringify(level)}`)
    } else if (query.type === 2) {
      window.open(`/text?level=${JSON.stringify(level)}`)
    } else if (query.type === 3) {
      window.open(`/model?level=${JSON.stringify(level)}`)
    }
  }

  /** 热门数据 */
  const hotTopList = ref<ProjectDrawPageRespVO[]>([])
  const getHotTop = () => {
    hotTop({
      type: query.type,
      projectType: query.projectTypeDay,
      isDomestic: query.isDomestic,
      projectTypeTop: query.projectTypeDay,
    }).then((res) => {
      if (res.code === 0) {
        hotTopList.value = res.data || []
      }
    })
  }

  /** 获取分类下拉框 */
  const projectTypeList = ref<ProjectDictNodeVO[]>([])
  const projectTypeListChildren = ref<ProjectDictNodeVO[]>([])
  const getParent = () => {
    hotTag({
      type: query.type,
      limit: 6,
      size: 1000,
    }).then((res) => {
      if (res.code === 0) {
        if (Array.isArray(res.data) && res.data.length > 0) {
          projectTypeList.value = [...res.data, { id: '0', name: '全部分类', children: [] }]
          projectTypeListChildren.value = res.data[0].children || []
          query.projectTypeDay = res.data[0].id || ''
          query.projectType = res.data[0]!.children?.[0]!.id || ''
          // 热门数据
          getHotTop()
        } else {
          hotTopList.value = []
        }
      }
    })
  }

  const handleHover = (item: ProjectDictNodeVO) => {
    query.projectTypeDay = item.id || ''
    if (item.name === '全部分类') return
    projectTypeListChildren.value = item.children || []
    query.projectType = item.children?.[0].id || ''
    // 热门数据
    getHotTop()
  }

  /** 点击分类 */
  // const handleClick = (item: ProjectDictNodeVO) => {
  //   query.projectType = item.id || ''
  //   getHotTop()
  // }

  watch(
    () => query.type,
    () => {
      getParent()
    },
    {
      immediate: true,
    }
  )
</script>

<style lang="scss" scoped>
  .side-menu {
    width: 221px;
    height: 470px;
    background-color: #fff;
    // padding: 10px 0;
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
    overflow-y: auto;
    box-sizing: border-box;
  }

  .menu-item {
    padding: 10px 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #333;
    font-size: 14px;
    &.active {
      background-color: #f0f7ff;
      color: #1a65ff !important;
    }
  }

  .menu-item:hover {
    background-color: #f0f7ff;
    color: #1a65ff;
  }
</style>