67 lines
1.7 KiB
Vue
67 lines
1.7 KiB
Vue
<template>
|
|
<div class="blog-content-list blog-section">
|
|
<div v-if="blogStore.blogList.length === 0"
|
|
class="blog-content blog-content-empty" >
|
|
</div>
|
|
|
|
<div class="blog-content blog-content-summary"
|
|
v-for="(item, index) in blogStore.blogList" :key="index">
|
|
<span class="title">{{ item.title }}</span>
|
|
|
|
<blog-label :basic-blog="getBasicBlog(item)"/>
|
|
|
|
<p class="content">
|
|
{{ item.summary }}
|
|
</p>
|
|
|
|
<el-button type="primary" @click="readBlogClick(index)">阅读全文 »</el-button>
|
|
<hr/>
|
|
</div>
|
|
|
|
<el-pagination
|
|
v-model:current-page="blogStore.pageInfo.currentPage"
|
|
:page-size="blogStore.pageInfo.pageSize"
|
|
:total="blogStore.pageInfo.totalSize"
|
|
layout="total, prev, pager, next"
|
|
@current-change="changePageClick"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import BlogLabel from '@/components/Blog/Content/BlogLabel.vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { onMounted } from 'vue'
|
|
import { useBlogStore } from '@/store/blog.ts'
|
|
import { getBasicBlog } from '@/utils/blog/blogUtil.ts'
|
|
|
|
const router = useRouter()
|
|
const blogStore = useBlogStore()
|
|
|
|
onMounted(async () => {
|
|
await blogStore.queryBlog()
|
|
})
|
|
|
|
/**
|
|
* 点击阅读博客按钮
|
|
* @param index 索引
|
|
*/
|
|
const readBlogClick = async (index: number) => {
|
|
const blogId = blogStore.blogList[index].id
|
|
await router.push({ name: 'BlogDetailId', params: { id: blogId } })
|
|
}
|
|
|
|
/**
|
|
* 点击切换博客页数按钮
|
|
* @param page 页码
|
|
*/
|
|
const changePageClick = async (page: number) => {
|
|
blogStore.pageInfo.currentPage = page
|
|
await blogStore.queryBlog()
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@use "@/styles/blog/blog.overview.module.scss";
|
|
</style>
|