Refactor API requests and update component styles
This commit is contained in:
wangqiao
@ -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') // 修改为在新窗口打开
|
||||
|
||||
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user