Refactor API requests and update component styles

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

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,
})

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()
}