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>
|