blog_front/src/views/blog/diarycontent/DiaryListView.vue

<template>
    <div class="main">
        <div class="mainContent" v-for="article in diarylist">
            <a-badge-ribbon :text=article.typename color="black">
                <a-card hoverable>
                    <h2>{{ article.diarytitle }}</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 class="image-container">
                            <a-image :preview="false" :src=article.imglink class="responsive-image"/>
                        </div>

                    </div>
                    <div class="read-button">
                        <a-button type="primary" shape="round" @click="readMore(article.id)">阅读全文</a-button>
                    </div>

                </a-card>
            </a-badge-ribbon>
        </div>
        <div class="pagination" v-if="diarystore.isPage">
            <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 class="is-null" v-if="diarystore.isEmpty">
            <a-card hoverable>
                <a-empty description="没有数据" />
            </a-card>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { onMounted, ref } from 'vue';
import iconComponents from '@/assets';
import dayjs from 'dayjs';
import type { diaryInterface } from '@/api/admin';
import { get,put } from "@/tools/request"
import { diaryStore } from "@/stores"
import router from '@/router';
const diarystore = diaryStore()
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 onShowSizeChange = (page: number) => {
    current.value = page;
    diaryList(page, pageSizeRef.value)
};
const diaryCount=async (id:any)=>{
    await put(`/diarys/update/${id}/readnum`)
}
const diarylist = ref<diaryInterface[]>([])
const diaryList = async (page: number, pageSize: number) => {
    try {
        const response = await get('/diarys/list', {
            page,
            page_size: pageSize,
        });
        diarylist.value = response.data.data.diarys.map((items: any, index: number) => ({
            id: items.id,
            key: items.key,
            diarytitle: items.diarytitle,
            diarycontent: items.diarycontent,
            typename: items.typename,
            wordcount: items.diarycontent.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.diarycontent.length/ 200),
            imglink: items.imglink || 'http://www.wuruilin.cn/personself/暂无图片.jpg',
        }));
        total.value = response.data.data.total; // 更新总数
        if (response.data.data.total===0) {
            diarystore.isEmpty=true,
            diarystore.isPage=false
        }else{
            diarystore.isEmpty=false,
            diarystore.isPage=true
        }
        pageSizeRef.value = pageSize; // 更新页大小，如果需要从接口返回页大小也可以改为 response.data.data.page_size
        dataLoaded.value = true
    } catch (error) {
        console.error('Failed to fetch data', error);
    }
};





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

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

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

/* .main h2 {
    text-align: center;
} */


.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;
    /* 防止文本换行 */
}

.diarys .image-container {
    width: 1000px;
   
}

.diarys .responsive-image {
    width: 100%;
    height: auto;
}

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