104 lines
2.9 KiB
Vue
104 lines
2.9 KiB
Vue
<template>
|
||
<NuxtLayout
|
||
name="category"
|
||
:categories="categoryTree"
|
||
:subCategories="subCategoryTree"
|
||
:selected-category="{
|
||
uid: articlePageCategoryUid,
|
||
title: category.title
|
||
}"
|
||
:breadcrumbs="breadcrumbs"
|
||
>
|
||
<ArticleList :articles="articles" />
|
||
<Pagination v-model="pagination" />
|
||
</NuxtLayout>
|
||
</template>
|
||
|
||
<script>
|
||
import { definePageMeta } from '#imports'
|
||
import { ref } from 'vue'
|
||
import { useRoute } from 'vue-router'
|
||
import Pagination from '@/components/common/Pagination'
|
||
import CategoryUtil from '@/utils/category'
|
||
import ArticleList from '@/components/cms/ArticleList'
|
||
import { fetchTemplateData } from '@/api/cms/template'
|
||
import { fetchArticlePage } from '@/api/cms/article'
|
||
import { strictPackage } from '@/utils/util'
|
||
|
||
export default {
|
||
components: {
|
||
ArticleList,
|
||
Pagination
|
||
},
|
||
async setup () {
|
||
// 去掉默认布局
|
||
definePageMeta({
|
||
layout: false,
|
||
})
|
||
const route = useRoute()
|
||
const data = strictPackage(await fetchTemplateData({
|
||
path: '/category/[categoryUid]/index.vue',
|
||
targetUid: route.params.categoryUid,
|
||
targetType: 'CATEGORY',
|
||
parameters: {
|
||
categoryUid: route.params.categoryUid
|
||
}
|
||
}))
|
||
// 获取分页所使用的栏目UID
|
||
const articlePageCategoryUid = data.ARTICLE_PAGE_PARAMETERS.categoryUid
|
||
const categoryUtil = new CategoryUtil(data.CATEGORIES_TREE)
|
||
const category = categoryUtil.getCategory(articlePageCategoryUid)
|
||
if (category == null) {
|
||
throw new Error(`找不到栏目，UID: ${articlePageCategoryUid}`)
|
||
}
|
||
return {
|
||
categoryUid: route.params.categoryUid,
|
||
categoryTree: data.CATEGORIES_TREE,
|
||
subCategoryTree: data.SUB_CATEGORIES_TREE,
|
||
category: categoryUtil.getCategory(articlePageCategoryUid),
|
||
// 查询文章分页数据的栏目ID
|
||
articlePageCategoryUid,
|
||
// 面包屑
|
||
breadcrumbs: categoryUtil.getBreadcrumb(articlePageCategoryUid),
|
||
// 文章列表数据
|
||
articles: ref(data.ARTICLE_PAGE.records),
|
||
// 分页数据
|
||
pagination: ref({
|
||
page: data.ARTICLE_PAGE.page,
|
||
capacity: data.ARTICLE_PAGE.capacity,
|
||
total: data.ARTICLE_PAGE.total
|
||
})
|
||
}
|
||
},
|
||
watch: {
|
||
// 路由参数变化时，触发数据搜索
|
||
'$route.query': function (newQuery) {
|
||
this.handlePageChange(Number(newQuery.page) || 1)
|
||
}
|
||
},
|
||
methods: {
|
||
/**
|
||
* 页码变更
|
||
*
|
||
* @param page 新页码
|
||
*/
|
||
handlePageChange (page) {
|
||
this.pagination.page = page
|
||
fetchArticlePage({
|
||
page: this.pagination.page,
|
||
capacity: this.pagination.capacity,
|
||
model: {
|
||
categoryUid: this.articlePageCategoryUid
|
||
}
|
||
})
|
||
.then(data => {
|
||
this.pagination.page = page
|
||
this.pagination.total = data.total
|
||
this.articles = data.records
|
||
})
|
||
.catch(e => console.error(e))
|
||
}
|
||
}
|
||
}
|
||
</script>
|