130 lines
3.3 KiB
Vue
130 lines
3.3 KiB
Vue
<template>
|
||
<NuxtLayout name="default" :categories="categoryTree">
|
||
<Head>
|
||
<Title>{{ category.title }}</Title>
|
||
</Head>
|
||
<div class="content-wrap">
|
||
<!-- 页面面包屑 -->
|
||
<PageBreadCrumb :data="breadcrumbs"/>
|
||
<div class="wrap-body">
|
||
<!-- 主要内容 -->
|
||
<div class="content">
|
||
<h2 class="page-title">{{ category.title }}</h2>
|
||
<ArticleList :articles="articles" />
|
||
<Pagination v-model="pagination" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</NuxtLayout>
|
||
</template>
|
||
|
||
<script>
|
||
import { definePageMeta } from '#imports'
|
||
import { ref } from 'vue'
|
||
import { useRoute } from 'vue-router'
|
||
import PageBreadCrumb from '@/components/common/PageBreadCrumb'
|
||
import Pagination from '@/components/common/Pagination'
|
||
import CategoryUtil from '@/utils/category'
|
||
import ArticleList from '@/components/cms/ArticleList'
|
||
import { strictPackage } from '@/utils/util'
|
||
import { fetchTemplateData } from '@/api/cms/template'
|
||
import { fetchArticlePage } from '@/api/cms/article'
|
||
|
||
export default {
|
||
components: {
|
||
ArticleList,
|
||
Pagination,
|
||
PageBreadCrumb
|
||
},
|
||
async setup () {
|
||
// 去掉默认布局
|
||
definePageMeta({
|
||
layout: false,
|
||
})
|
||
const route = useRoute()
|
||
const data = strictPackage(await fetchTemplateData({
|
||
path: '/category/[categoryUid]/articles.vue',
|
||
targetUid: route.params.categoryUid,
|
||
targetType: 'CATEGORY',
|
||
parameters: {
|
||
categoryUid: route.params.categoryUid
|
||
}
|
||
}))
|
||
// 获取分页所使用的栏目UID
|
||
const categoryUid = data.ARTICLE_PAGE_PARAMETERS.categoryUid
|
||
const categoryUtil = new CategoryUtil(data.CATEGORIES_TREE)
|
||
const category = categoryUtil.getCategory(categoryUid)
|
||
if (category == null) {
|
||
throw new Error(`栏目不存在，栏目UID：${categoryUid}`)
|
||
}
|
||
return {
|
||
category,
|
||
categoryTree: data.CATEGORIES_TREE,
|
||
// 查询文章分页数据的栏目ID
|
||
categoryUid,
|
||
// 面包屑
|
||
breadcrumbs: categoryUtil.getBreadcrumb(categoryUid),
|
||
// 文章列表数据
|
||
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.categoryUid
|
||
}
|
||
})
|
||
.then(data => {
|
||
this.pagination.page = page
|
||
this.pagination.total = data.total
|
||
this.articles = data.records
|
||
})
|
||
.catch(e => console.error(e))
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.content-wrap {
|
||
background-color: #fff;
|
||
padding: 20px;
|
||
}
|
||
.wrap-body {
|
||
margin-top: 10px;
|
||
display: flex;
|
||
// 栏目树
|
||
.category-wrap {
|
||
width: 275px;
|
||
flex-shrink: 0;
|
||
}
|
||
// 内容
|
||
.content {
|
||
flex-grow: 1;
|
||
padding: 10px 30px;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
</style>
|