wangqiao/front-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor API requests and update component styles

Browse Source
This commit is contained in:
wangqiao
2025-08-23 17:14:42 +08:00
parent bf86652ff2
commit 38f6d8c062
15 changed files with 376 additions and 294 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
pages/home/components/PopularDrawings.vue
View File

@ -1,13 +1,13 @@
<template>
<div class="mt-34px w-100%">
<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">
<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"
: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)"
>
@ -15,7 +15,7 @@
</span>
</div>
</div>
<div class="content mt-10px flex">
<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="" />
@ -40,23 +40,23 @@
<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 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]"
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 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 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>
<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> -->
@ -70,6 +70,11 @@
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,
@ -127,48 +132,77 @@
}
/** 热门数据 */
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 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({
const { data: projectTypeList, refresh: getParent } = useAsyncData('projectTypeListChildren-PopularDrawings-popularDrawings', async () => {
const res = await 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 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 || []
// projectTypeListChildren.value = item.children || []
query.projectType = item.children?.[0].id || ''
// 热门数据
getHotTop()
@ -182,11 +216,12 @@
watch(
() => query.type,
() => {
getParent()
async () => {
await getParent();
await getHotTop();
},
{
immediate: true,
// immediate: true,
}
)
</script>