Refactor API requests and update component styles
This commit is contained in:
wangqiao
@ -2,47 +2,47 @@
|
||||
<KlNavTab active="工具箱" />
|
||||
<!-- 搜索 -->
|
||||
<KlSearch @search="search"></KlSearch>
|
||||
<div v-loading="loading" class="ml-auto mr-auto mt-20px w1440 flex justify-center gap-60px">
|
||||
<div class="left w-821px">
|
||||
<img src="~/assets/images/banner2.png" alt="" srcset="" class="h-284px w-100%" />
|
||||
<div v-loading="loading" class="ma-auto mt-[20px] w-[1440px] flex justify-center gap-[60px]">
|
||||
<div class="left w-[821px]">
|
||||
<img src="~/assets/images/banner2.png" alt="" srcset="" class="h-[284px] w-[100%]" />
|
||||
<div
|
||||
class="box-border border border-t-0px border-t-0px border-[#EEEEEE] rounded-12px border-solid border-t-none bg-[#FFFFFF] px-28px py-17px"
|
||||
class="box-border border border-t-[0px] border-t-[0px] border-[#EEEEEE] rounded-[12px] border-solid border-t-none bg-[#FFFFFF] px-[28px] py-[17px]"
|
||||
style="border-top-left-radius: 0px; border-top-right-radius: 0px"
|
||||
>
|
||||
<div v-for="item in pageRes.list" :key="item.id" class="mt-20px flex border-b-1px border-b-[#eee] border-b-solid pb-20px">
|
||||
<div class="h-142px w-200px text-center">
|
||||
<el-image :src="item.iconUrl" alt="" srcset="" class="max-w-100% rd-4px" fit="cover" />
|
||||
<div v-for="item in pageRes?.list" :key="item.id" class="mt-[20px] flex border-b-[1px] border-b-[#eee] border-b-solid pb-[20px]">
|
||||
<div class="h-[142px] w-[200px] text-center">
|
||||
<el-image :src="item.iconUrl" alt="" srcset="" class="max-w-[100%] rd-[4px]" fit="cover" />
|
||||
</div>
|
||||
<div class="ml-25px flex-1">
|
||||
<div class="text-16px text-[#333333] font-normal">{{ item.title }}</div>
|
||||
<div class="mt-8px text-14px text-[#999999] font-normal">{{ item.description }}</div>
|
||||
<div class="mt-10px flex items-center justify-between">
|
||||
<div class="ml-[25px] flex-1">
|
||||
<div class="text-[16px] text-[#333333] font-normal">{{ item.title }}</div>
|
||||
<div class="mt-[8px] text-[14px] text-[#999999] font-normal">{{ item.description }}</div>
|
||||
<div class="mt-[10px] flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center text-14px text-[#666666] font-normal">
|
||||
<img src="~/assets/images/look.png" alt="" srcset="" class="mr-4px h-17px w-23px" />{{ item.previewPoint }}
|
||||
<div class="flex items-center text-[14px] text-[#666666] font-normal">
|
||||
<img src="~/assets/images/look.png" alt="" srcset="" class="mr-[4px] h-[17px] w-[23px]" />{{ item.previewPoint }}
|
||||
</div>
|
||||
<div class="ml-26px flex items-center text-14px text-[#666666] font-normal">
|
||||
<img src="~/assets/images/chat.png" alt="" srcset="" class="mr-4px h-17px w-19px" /> {{ item.commentsPoint }}
|
||||
<div class="ml-[26px] flex items-center text-[14px] text-[#666666] font-normal">
|
||||
<img src="~/assets/images/chat.png" alt="" srcset="" class="mr-[4px] h-[17px] w-[19px]" /> {{ item.commentsPoint }}
|
||||
</div>
|
||||
<div class="ml-20px">
|
||||
<div v-for="(v, index) in item.labels" :key="index" class="mr-10px inline-block text-14px text-[#1A65FF] font-normal">#{{ v }}</div>
|
||||
<div class="ml-[20px]">
|
||||
<div v-for="(v, index) in item.labels" :key="index" class="mr-[10px] inline-block text-[14px] text-[#1A65FF] font-normal">#{{ v }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-14px text-[#999999] font-normal">{{ dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
|
||||
<div class="text-[14px] text-[#999999] font-normal">{{ dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 暂无数据 -->
|
||||
<div v-if="pageRes.list.length === 0" class="mt-10px flex items-center justify-center">
|
||||
<div v-if="pageRes?.list.length === 0" class="mt-[10px] flex items-center justify-center">
|
||||
<!-- <div class="text-16px text-[#999999] font-normal">暂无数据</div> -->
|
||||
<el-empty v-if="!pageRes.list.length" :image="emptyImg"></el-empty>
|
||||
</div>
|
||||
<div class="mt-20px">
|
||||
<div class="mt-[20px]">
|
||||
<el-pagination
|
||||
v-model:current-page="pageReq.pageNum"
|
||||
:page-size="pageReq.pageSize"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
:total="pageRes.total"
|
||||
:total="pageRes?.total"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
class="justify-center!"
|
||||
@current-change="handleCurrentChange"
|
||||
@ -51,13 +51,13 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right w-398px">
|
||||
<div class="box-border border border-[#EEEEEE] rounded-10px border-solid bg-[#FFFFFF] pa-20px">
|
||||
<div class="flex items-center text-16px text-[#333333] font-normal">
|
||||
<div class="mr-14px h-24px w-4px rounded-1px bg-[#1A65FF]"></div>
|
||||
<div class="right w-[398px]">
|
||||
<div class="box-border border border-[#EEEEEE] rounded-[10px] border-solid bg-[#FFFFFF] pa-[20px]">
|
||||
<div class="flex items-center text-[16px] text-[#333333] font-normal">
|
||||
<div class="mr-[14px] h-[24px] w-[4px] rounded-[1px] bg-[#1A65FF]"></div>
|
||||
热门排行
|
||||
</div>
|
||||
<div v-for="item in recommendList" :key="item.id" class="mt-20px text-14px text-[#666] font-normal">{{ item.title }}</div>
|
||||
<div v-for="item in recommendList" :key="item.id" class="mt-[20px] text-[14px] text-[#666] font-normal">{{ item.title }}</div>
|
||||
</div>
|
||||
<!-- -->
|
||||
<!-- <div class="mt-20px box-border w-398px border border-[#EEEEEE] rounded-10px border-solid bg-[#FFFFFF] pa-20px">
|
||||
@ -110,26 +110,32 @@
|
||||
title: '',
|
||||
})
|
||||
|
||||
const pageRes = ref<TpageRes>({
|
||||
list: [],
|
||||
total: 0,
|
||||
// const pageRes = ref<TpageRes>({
|
||||
// list: [],
|
||||
// total: 0,
|
||||
// })
|
||||
|
||||
|
||||
const {data: pageRes, refresh: getPage } = await useAsyncData(`draw-page-list-${Date.now()}`, async () => {
|
||||
const res = await page(pageReq)
|
||||
return res.data
|
||||
})
|
||||
|
||||
const loading = ref(false)
|
||||
const getPage = () => {
|
||||
loading.value = true
|
||||
page(pageReq)
|
||||
.then((res) => {
|
||||
if (res.code === 0) {
|
||||
pageRes.value = res.data
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
// const getPage = () => {
|
||||
// loading.value = true
|
||||
// page(pageReq)
|
||||
// .then((res) => {
|
||||
// if (res.code === 0) {
|
||||
// pageRes.value = res.data
|
||||
// }
|
||||
// })
|
||||
// .finally(() => {
|
||||
// loading.value = false
|
||||
// })
|
||||
// }
|
||||
|
||||
getPage()
|
||||
// getPage()
|
||||
|
||||
const handleCurrentChange = (page: number) => {
|
||||
pageReq.pageNum = page
|
||||
@ -148,17 +154,24 @@
|
||||
getPage()
|
||||
}
|
||||
|
||||
// 猜你喜欢
|
||||
const recommendList = ref<ProjectDrawPageRespVO[]>([]) // 猜你喜欢数据
|
||||
const getRelationRecommendList = () => {
|
||||
getRelationRecommend({
|
||||
const {data: recommendList} = await useAsyncData(`draw-recommend-list-${Date.now()}`, async () => {
|
||||
const res = await getRelationRecommend({
|
||||
type: 4,
|
||||
}).then((res) => {
|
||||
if (res.code === 0) {
|
||||
console.log(res.data)
|
||||
recommendList.value = res.data
|
||||
}
|
||||
})
|
||||
}
|
||||
getRelationRecommendList()
|
||||
return res.data
|
||||
})
|
||||
|
||||
// 猜你喜欢
|
||||
// const recommendList = ref<ProjectDrawPageRespVO[]>([]) // 猜你喜欢数据
|
||||
// const getRelationRecommendList = () => {
|
||||
// getRelationRecommend({
|
||||
// type: 4,
|
||||
// }).then((res) => {
|
||||
// if (res.code === 0) {
|
||||
// console.log(res.data)
|
||||
// recommendList.value = res.data
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// getRelationRecommendList()
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user