123 lines
3.7 KiB
Vue
123 lines
3.7 KiB
Vue
<template>
|
||
<!-- 导航 -->
|
||
<KlNavTab active="模型" :type="3" />
|
||
<div class="ma-auto w-[1440px]">
|
||
<!-- 图纸分类 -->
|
||
<KlWallpaperCategory v-model="query" v-model:level="level" :type="3" />
|
||
<!-- 推荐栏目 -->
|
||
<RecommendedColumnsV2 v-model="query" v-model:result="result"></RecommendedColumnsV2>
|
||
<!-- 精选专题 -->
|
||
<!-- <FeaturedSpecials></FeaturedSpecials> -->
|
||
<!-- 分页 -->
|
||
<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"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
@size-change="handleChangeSize"
|
||
@current-change="handleChangeCurrent"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import KlNavTab from '~/components/kl-nav-tab/index.vue'
|
||
import KlWallpaperCategory from '~/components/kl-wallpaper-category/index.vue'
|
||
import RecommendedColumnsV2 from '~/components/model-components/RecommendedColumnsV2.vue'
|
||
// import FeaturedSpecials from './components/FeaturedSpecials.vue'
|
||
|
||
import { reactive, watch, ref } from 'vue'
|
||
import { page } from '~/api/upnew/index'
|
||
import type { pageRes, pageReq } from '~/api/upnew/types'
|
||
import { useRoute } from 'vue-router'
|
||
const route = useRoute()
|
||
const level = ref(
|
||
route.query.level
|
||
? JSON.parse(route.query.level as string)
|
||
: [
|
||
{
|
||
id: -1,
|
||
name: '模型库',
|
||
isChildren: false,
|
||
},
|
||
]
|
||
)
|
||
|
||
const query = ref<pageReq>({
|
||
pageNo: 1,
|
||
pageSize: 12,
|
||
projectType: '-1',
|
||
editions: '-1',
|
||
source: -1,
|
||
type: 3,
|
||
recommend: true,
|
||
})
|
||
// const result = reactive<pageRes>({
|
||
// list: [],
|
||
// total: 0,
|
||
// })
|
||
|
||
// 如果id存在，则设置projectType
|
||
if (level.value.length) {
|
||
// query.projectType = level.value[level.value.length - 1].id || ''
|
||
}
|
||
|
||
const { data: result } = useAsyncData(
|
||
`draw-page-list-model-${query.value.projectType}-${query.value.editions}-${query.value.source}-${query.value.pageNo}-${query.value.pageSize}`,
|
||
async () => {
|
||
const res = await page({
|
||
...query.value,
|
||
editions: query.value.editions === '-1' ? '' : query.value.editions,
|
||
source: query.value.source === -1 ? '' : query.value.source,
|
||
projectType: query.value.projectType === '-1' ? '' : query.value.projectType,
|
||
recommend: query.value.source === -1 ? true: false,
|
||
})
|
||
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
|
||
// }
|
||
// })
|
||
// }
|
||
|
||
// getPage()
|
||
|
||
const handleChangeSize = (val: number) => {
|
||
query.value.pageSize = val
|
||
// query.pageNo = 1
|
||
// getPage()
|
||
navigateTo(`/model/${query.value.projectType}/${query.value.pageNo}/${val}/${query.value.editions}/${query.value.source}`)
|
||
}
|
||
|
||
const handleChangeCurrent = (current: number) => {
|
||
query.value.pageNo = current
|
||
// getPage()
|
||
navigateTo(`/model/${query.value.projectType}/${current}/${query.value.pageSize}/${query.value.editions}/${query.value.source}`)
|
||
}
|
||
|
||
watch([() => query.value.projectType, () => query.value.editions, () => query.value.source], (val) => {
|
||
if (val) {
|
||
// getPage()
|
||
navigateTo(`/model/${query.value.projectType}/1/${query.value.pageSize}/${query.value.editions}/${query.value.source}`)
|
||
}
|
||
})
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
:deep(.el-pagination) {
|
||
.el-input__inner {
|
||
text-align: center !important;
|
||
}
|
||
}
|
||
</style>
|