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