blog_front/src/views/blog/blogcontent/BlogListView.vue

<template>
    <div class="main">
        <div class="mainContent" v-for="article in bloglist">
            <a-badge-ribbon :text=article.typename color="black">
                <a-card hoverable>
                    <h2>{{ article.blogtitle }}</h2>
                    <div class="tag-group">
                        <a-tag color="#E6E6FA">
                            <template #icon>
                                <component :is=iconComponents.RiLiLined />
                            </template>
                            {{ article.create_at }}
                        </a-tag>
                        <a-tag color="#6495ED">
                            <template #icon>
                                <component :is=iconComponents.YanJingLined />
                            </template>
                            {{ article.readnum }}
                        </a-tag>
                        <a-tag color="#B0C4DE">
                            <template #icon>
                                <component :is=iconComponents.XieZiLined />
                            </template>
                            字数≈{{ article.wordcount }}字
                        </a-tag>
                        <a-tag color="#20B2AA">
                            <template #icon>
                                <component :is=iconComponents.YueDuLined />
                            </template>
                            阅读时长≈{{ article.readminite }}分
                        </a-tag>
                    </div>
                    <div class="blog-content">
                        <div>
                            <a-image :preview="false" :width="200" :src=article.imglink />
                        </div>
                        <div class="text-container">
                            {{ article.blogcontent }}
                        </div>
                    </div>
                    <div class="read-button">
                        <a-button type="primary" shape="round" @click="readMore(article.id)">阅读全文</a-button>
                    </div>
                    <hr class="custom-line">
                    <div>
                        <a-tag :color=randomColor() v-for="label in JSON.parse(article.labelnames)">{{ label }}</a-tag>
                    </div>
                </a-card>
            </a-badge-ribbon>
        </div>
        <div class="pagination">
            <a-pagination v-model:current="current" v-if="dataLoaded" v-model:page-size="pageSizeRef"
                :page-size-options="pageSizeOptions" :total="total" show-size-changer @change="onShowSizeChange">
                <template #buildOptionText="props">
                    <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
                    <span v-else>全部</span>
                </template>
            </a-pagination>
        </div>

    </div>
</template>

<script setup lang='ts'>
import { onMounted, ref } from 'vue';
import iconComponents from '@/assets';
import { useContentStore } from "@/stores"
import dayjs from 'dayjs';
import type { blogInterface } from '@/api/admin';
import { get,put } from "@/tools/request"
import router from '@/router';
const store = useContentStore()
const randomColor = () => {
    const labelColor = ref(["processing", "success", "error", "warning", "magenta", "red", "volcano", "orange", "gold", "lime", "green", "cyan", "blue", "geekblue", "purple"])
    return labelColor.value[Math.floor(Math.random() * labelColor.value.length)];
}
const dataLoaded = ref(false);
// 分页
const pageSizeOptions = ref<string[]>(['10', '20', '30', '40', '50']);
const current = ref(1);
const total = ref();
const pageSizeRef = ref(10);
const bloglist = ref<blogInterface[]>([])
const onShowSizeChange = (page: number) => {
    current.value = page;
    blogList(page, pageSizeRef.value)
};
// const blogList = async (page: number, pageSize: number) => {
//     try {
//         const response = await get('/blogs/list', {
//             page,
//             page_size: pageSize,
//         })
//         bloglist.value = response.data.data.blogs;
//         total.value = response.data.data.total; // 更新总数
//         pageSizeRef.value = pageSize; // 更新页大小，如果需要从接口返回页大小也可以改为 response.data.data.page_size
//         dataLoaded.value = true
//     } catch (error) {
//         console.error('Failed to fetch data', error);
//     }
// };
const blogList = async (page: number, pageSize: number) => {
    try {
        const response = await get('/blogs/list', {
            page,
            page_size: pageSize,
        })
        bloglist.value = response.data.data.blogs.map((items: any,index:number) => ({
            id: items.id,
            key: items.key,
            blogtitle: items.blogtitle,
            blogcontent: items.blogcontent,
            typename: items.typename,
            labelnames: items.labelnames,
            wordcount: items.blogcontent.length,
            create_at: dayjs(items.create_at).format('YYYY-MM-DD HH:mm:ss'),
            update_at: dayjs(items.update_at).format('YYYY-MM-DD HH:mm:ss'),
            readnum: items.readnum,
            readminite: Math.round(items.blogcontent.length/ 200),
            imglink: items.imglink,

        }))
        total.value = response.data.data.total; // 更新总数
        pageSizeRef.value = pageSize; // 更新页大小，如果需要从接口返回页大小也可以改为 response.data.data.page_size
        dataLoaded.value = true
    } catch (error) {
        console.error('Failed to fetch data', error);
    }
}
const blogCount=async (id:any)=>{
    await put(`/blogs/update/${id}/readnum`)
}

const readMore = (id: any) => {
    router.push(`/blog/${id}`)
    blogCount(id)
}

onMounted(() => {
    blogList(current.value, pageSizeRef.value);
});
</script>

<style scoped>
.main {
    width: 45%;
    margin: 0 24px;
}

.main .mainContent {
    margin-bottom: 24px;
}

.main h2 {
    text-align: center;
}

.main .tag-group {
    display: flex;
    justify-content: center;
}

.main .tag-group>* {
    color: black;
    margin: 0 12px;
}

.main .blog-content {
    display: flex;
    margin: 48px;
}

.main .blog-content>:first-child {
    padding: 4px;
    border: 2px solid #ccc;
    display: inline-block;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.main .blog-content>:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre-wrap;
    /* 防止文本换行 */
}

.main .read-button {
    display: flex;
    justify-content: center;
}

.main .read-button button {
    color: #fff;
    border: none;
    cursor: pointer;
    background-color: #007bff;
    /* 初始背景颜色 */
    animation: colorChange 3s infinite alternate;
    /* 添加颜色变化的动画 */
}

.custom-line {
    border: 0;
    height: 1px;
    background: #d9d6d6;
    margin: 48px 0 24px 0;
}

@keyframes colorChange {
    0% {
        background-color: #007bff;
        /* 初始颜色 */
    }

    50% {
        background-color: #ff7e5f;
        /* 中间颜色 */
    }

    100% {
        background-color: #feb47b;
        /* 结束颜色 */
    }
}

.main .text-container {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 2;
    margin-left: 24px;

}

.pagination {
    margin-bottom: 24px;
    display: flex;
    justify-content: right;
}
</style>