257 lines
7.9 KiB
Vue
257 lines
7.9 KiB
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 type { ProjectDrawPageRespVO, ProjectDictNodeVO } from '~/api/home/type'
|
|
|
|
/** tianjia key 接口刷新了 页面没变化 */
|
|
definePageMeta({
|
|
key: 'PopularDrawings', // 页面的唯一标识，用于区分不同的页面
|
|
})
|
|
|
|
/** 请求参数 */
|
|
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) => {
|
|
// 跳转到下载详情页 并且是单独开标签
|
|
navigateTo(`/down-drawe-detail?id=${item.id}`) // 修改为在新窗口打开
|
|
}
|
|
|
|
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) {
|
|
navigateTo(`/drawe?level=${JSON.stringify(level)}`)
|
|
} else if (query.type === 2) {
|
|
navigateTo(`/text?level=${JSON.stringify(level)}`)
|
|
} else if (query.type === 3) {
|
|
navigateTo(`/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 { data: projectTypeList, refresh: getParent } = useAsyncData('projectTypeListChildren-PopularDrawings-popularDrawings', async () => {
|
|
const res = await hotTag({
|
|
type: query.type,
|
|
limit: 6,
|
|
size: 1000,
|
|
})
|
|
const all = [{ id: '0', name: '全部分类', children: [] }]
|
|
if (Array.isArray(res.data) && res.data?.length > 0) {
|
|
const total = [...res.data,...all]
|
|
// query.projectTypeDay = total[0]?.id || ''
|
|
// query.projectType = total[0]!.children?.[0]?.id || ''
|
|
return total
|
|
}
|
|
return []
|
|
})
|
|
|
|
const {data: hotTopList, refresh: getHotTop} = useAsyncData('hotTop-PopularDrawings-popularDrawings', async () => {
|
|
const res = await hotTop({
|
|
type: query.type,
|
|
// @ts-ignore
|
|
projectType: query.projectTypeDay,
|
|
isDomestic: query.isDomestic || 1,
|
|
projectTypeTop: query.projectTypeDay,
|
|
})
|
|
return 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,
|
|
async () => {
|
|
await getParent();
|
|
await getHotTop();
|
|
},
|
|
{
|
|
// 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>
|