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

14
pages/drawe/components/RecommendedColumnsV2.vue
View File

@ -1,17 +1,17 @@
<template>
<div class="relative mt-34px w-100%">
<div class="relative mt-[34px] w-[100%]">
<KlTabBar v-model="query.source" :data="tabBar" />
<div class="absolute right-0px top-10px text-16px text-[#999999] font-normal"
>共<span class="color-#1A65FF">{{ result.total }}</span
<div class="absolute right-[0px] top-[10px] text-[16px] text-[#999999] font-normal"
>共<span class="color-[#1A65FF]">{{ result?.total }}</span
>个筛选结果</div
>
<div class="content mt-10px">
<div class="content mt-[10px]">
<el-row :gutter="20">
<el-col v-for="(item, index) in result.list" :key="index" :span="6">
<el-col v-for="(item, index) in result?.list" :key="index" :span="6">
<CardPicture :item-info="item" />
</el-col>
</el-row>
<el-empty v-if="!result.list.length" :image="emptyImg"></el-empty>
<el-empty v-if="!result?.list.length" :image="emptyImg"></el-empty>
</div>
</div>
</template>
@ -27,7 +27,7 @@
required: true,
})
const result = defineModel<pageRes>('result', {
const result = defineModel<pageRes | null>('result', {
required: true,
})

56
pages/drawe/index.vue
View File

@ -1,7 +1,7 @@
<template>
<!-- 导航 -->
<KlNavTab active="图纸" :type="1" />
<div class="ma-auto w-1440px">
<div class="ma-auto w-[1440px]">
<!-- 图纸分类 -->
<KlWallpaperCategory v-model="query" v-model:level="level" :type="1" />
<!-- 推荐栏目 -->
@ -9,12 +9,12 @@
<!-- 精选专题 -->
<!-- <FeaturedSpecials></FeaturedSpecials> -->
<!-- 分页 -->
<div class="mt-10px flex justify-center">
<div class="mt-[10px] flex justify-center">
<el-pagination
v-model:current-page="query.pageNo"
v-model:page-size="query.pageSize"
:page-sizes="[12, 24, 48]"
:total="result.total"
:total="result?.total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleClickSize"
@current-change="handeClickCurrent"
@ -33,8 +33,8 @@
import type { pageRes, pageReq } from '~/api/upnew/types'
const route = useRoute()
const level = ref(
route.query.level
? JSON.parse(route.query.level as string)
route.query?.valuelevel
? JSON.parse(route.query.valuelevel as string)
: [
{
id: '0',
@ -43,9 +43,9 @@
},
]
)
const keywords = ref(route.query.keywords as string)
const keywords = ref(route.query?.valuekeywords as string || '')
const query = reactive<pageReq>({
const query = ref<pageReq>({
pageNo: 1,
pageSize: 12,
projectType: '',
@ -54,39 +54,45 @@
type: 1,
title: keywords.value,
})
const result = reactive<pageRes>({
list: [],
total: 0,
})
// const result = reactive<pageRes>({
// list: [],
// total: 0,
// })
// 如果id存在，则设置projectType
if (level.value.length) {
query.projectType = level.value[level.value.length - 1].id || ''
query.value.projectType = level.value[level.value.length - 1].id || ''
}
const handleClickSize = (val: number) => {
query.pageSize = val
query.value.pageSize = val
getPage()
}
const handeClickCurrent = (val: number) => {
query.pageNo = val
query.value.pageNo = val
getPage()
}
const getPage = () => {
page(query).then((res) => {
const { data, code } = res
if (code === 0) {
result.list = data.list
result.total = data.total
}
})
}
getPage()
const { data:result, refresh:getPage } = await useAsyncData(`draw-page-list-${Date.now()}`, async () => {
const res = await page(query.value)
return res.data
},{
immediate: true,
})
// const getPage = () => {
// page(query).then((res) => {
// const { data, code } = res
// if (code === 0) {
// result.list = data.list
// result.total = data.total
// }
// })
// }
watch([() => query.projectType, () => query.editions, () => query.source], (val) => {
watch([() => query.value.projectType, () => query.value.editions, () => query.value.source], (val) => {
if (val) {
getPage()
}

107
pages/home/components/Leaderboard.vue
View File

@ -1,63 +1,63 @@
<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="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"
<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'"
: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>
<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 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">
<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>
<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">
<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>
<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"
<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'"
: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>
<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 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 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 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>
<!-- 暂无数据 -->
@ -65,18 +65,18 @@
</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="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 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]"
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 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>
@ -105,28 +105,33 @@
})
// 最新动态
const newDrawList = ref<ProjectDrawPageRespVO[]>([])
const handlenewDraw = async () => {
const res = await newDraw({
// 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,
})
// newDrawList.value = res.data
}
handlenewDraw()
})])
const topList = ref<ProjectTrendingScoreUserInfoVO[]>([]) // 最新动态
const userTopList = ref<ProjectTrendingScoreUserInfoVO[]>([]) // 最新动态
const handleuserTop = () => {
Promise.all([userTop({ type: 1 }), userTop({})]).then((res) => {
// 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()
// })
// }
// handleuserTop()
const handleClick = (item: ProjectDrawPageRespVO) => {
window.open(`/down-drawe-detail?id=${item.id}`, '_blank') // 修改为在新窗口打开

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>