125 lines
3.1 KiB
Vue
125 lines
3.1 KiB
Vue
<template>
|
|
<a-card :title="title" class="ele-body">
|
|
<a-list item-layout="vertical" :pagination="pagination" :data-source="list">
|
|
<template #renderItem="{ item }">
|
|
<a-list-item key="item.title">
|
|
<template #actions>
|
|
<span v-for="{ icon, text } in actions" :key="icon">
|
|
<component :is="icon" style="margin-right: 8px" />
|
|
{{ text }}
|
|
</span>
|
|
</template>
|
|
<template #extra>
|
|
<img
|
|
width="100"
|
|
height="100"
|
|
alt="logo"
|
|
v-if="item.image"
|
|
:src="item.image"
|
|
/>
|
|
</template>
|
|
<a-list-item-meta :description="item.title">
|
|
<template #title>
|
|
<a @click="openNew('/cms/article/' + item.articleId)">{{
|
|
item.title
|
|
}}</a>
|
|
</template>
|
|
</a-list-item-meta>
|
|
</a-list-item>
|
|
</template>
|
|
</a-list>
|
|
</a-card>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, unref, watch } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
import { setPageTabTitle } from '@/utils/page-tab-util';
|
|
import { pageArticle } from '@/api/cms/article';
|
|
import { Article } from '@/api/cms/article/model';
|
|
import { getArticleCategory } from '@/api/cms/category';
|
|
import { ArticleCategory } from '@/api/cms/category/model';
|
|
|
|
import {
|
|
StarOutlined,
|
|
LikeOutlined,
|
|
MessageOutlined
|
|
} from '@ant-design/icons-vue';
|
|
import { openNew } from '@/utils/common';
|
|
const { currentRoute } = useRouter();
|
|
const title = ref<string>('');
|
|
const categoryId = ref(0);
|
|
const category = ref<ArticleCategory | any>();
|
|
const list = ref<Article[]>([]);
|
|
const spinning = ref(true);
|
|
const page = ref(1);
|
|
|
|
const pagination = {
|
|
onChange: (index: number) => {
|
|
page.value = index;
|
|
reload();
|
|
},
|
|
total: 10,
|
|
pageSize: 10
|
|
};
|
|
|
|
const actions: Record<string, any>[] = [
|
|
{ icon: StarOutlined, text: '156' },
|
|
{ icon: LikeOutlined, text: '156' },
|
|
{ icon: MessageOutlined, text: '2' }
|
|
];
|
|
|
|
/**
|
|
* 加载数据
|
|
*/
|
|
const reload = () => {
|
|
// 加载文章分类
|
|
getArticleCategory(categoryId.value).then((data) => {
|
|
category.value = data;
|
|
// 修改页签标题
|
|
if (data.title) {
|
|
title.value = data.title;
|
|
setPageTabTitle(data.title);
|
|
}
|
|
});
|
|
// 加载文章列表
|
|
pageArticle({ categoryId: categoryId.value, page: page.value }).then(
|
|
(data) => {
|
|
if (data?.list) {
|
|
pagination.total = data.count;
|
|
list.value = data.list;
|
|
}
|
|
spinning.value = false;
|
|
}
|
|
);
|
|
};
|
|
|
|
watch(
|
|
currentRoute,
|
|
(route) => {
|
|
const { params } = unref(route);
|
|
const { id } = params;
|
|
if (id) {
|
|
categoryId.value = Number(id);
|
|
reload();
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
export default {
|
|
name: 'ArticleCategoryPreview'
|
|
};
|
|
</script>
|
|
<style>
|
|
body {
|
|
background: #f0f2f5;
|
|
}
|
|
.ele-body {
|
|
margin: 0 auto;
|
|
max-width: 1000px;
|
|
}
|
|
</style>
|