novel-front-pc/src/views/home/ranking.vue

<template>
    <div class="ranking-container">
        <div class="content-wrapper">
            <!-- 左侧榜单导航 -->
            <div class="ranking-sidebar">
                <ul class="ranking-nav">
                    <li v-for="(name, id) in rankingTypes" :key="id" :class="{ active: id === currentRankingType }"
                        @click="switchRankingType(id)">
                        {{ name }}
                    </li>
                </ul>
            </div>

            <!-- 右侧内容区 -->
            <div class="ranking-content">
                <!-- 顶部分类导航 -->
                <div class="category-tabs">
                    <ul class="category-nav">
                        <li v-for="(name, id) in categoryMap" :key="id" :class="{ active: id === currentCategoryId }"
                            @click="switchCategory(id)">
                            {{ name }}
                        </li>
                    </ul>
                </div>

                <!-- 书籍列表 -->
                <div class="book-list-container">
                    <div v-for="(book, index) in books" :key="index" class="book-item">
                        <div class="rank-number" :class="{
                            'rank-first': index === 0,
                            'rank-second': index === 1,
                            'rank-third': index === 2
                        }">{{ index + 1 }}</div>
                        <book-card :book="book" />
                    </div>
                </div>

                <!-- 分页 -->
                <div class="pagination-container">
                    <el-pagination v-model:current-page="currentPage" :page-size="pageSize" :total="total"
                        layout="prev, pager, next" @current-change="handlePageChange" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, reactive, onMounted, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import BookCard from '@/components/common/BookCard.vue';

export default {
    name: 'RankingView',
    components: {
        BookCard
    },
    setup() {
        const route = useRoute();
        const router = useRouter();
        const categoryId = computed(() => route.params.id);
        const currentCategoryId = ref(categoryId.value || '1');

        // 计算是否有路由ID参数
        const hasRouteId = computed(() => !!categoryId.value);

        // 分页相关
        const currentPage = ref(1);
        const pageSize = ref(20);
        const total = ref(100);

        // 分类名称映射
        const categoryMap = {
            '1': '武侠',
            '2': '都市',
            '3': '玄幻',
            '4': '历史',
            '5': '浪漫青春',
            '6': '短篇',
            '7': '言情',
            '8': '小说'
        };

        // 榜单类型
        const rankingTypes = {
            '1': '推荐榜',
            '2': '完本榜',
            '3': '阅读榜',
            '4': '口碑榜',
            '5': '新书榜',
            '6': '高分榜'
        };
        const currentRankingType = ref('1');

        // 计算当前分类名称
        const categoryName = computed(() => categoryMap[currentCategoryId.value] || '玄幻类');

        // 模拟书籍数据
        const books = reactive([
            {
                id: '1',
                title: '大宋好厨夫',
                author: '祝家大郎',
                cover: 'https://bookcover.yuewen.com/qdbimg/349573/1041637443/150.webp',
                description: '书友群：638781087智慧老猿经过了北宋水浒世界，变成了那个被孙二娘三拳打死的张青',
                status: '已完结'
            },
            {
                id: '2',
                title: '重生日本当厨神',
                author: '千回转',
                cover: 'https://bookcover.yuewen.com/qdbimg/349573/1041637443/150.webp',
                description: '作死一次安然，宁原吃料理到撑死的复仇，来到一个他完全陌生的食林之中',
                status: '已完结'
            },
            {
                id: '3',
                title: '罗修炎月儿武道大帝',
                author: '忘情至尊',
                cover: 'https://bookcover.yuewen.com/qdbimg/349573/1041637443/150.webp',
                description: '关于武道大帝：少年罗修出身寒微，天赋一般，却意外觅得奇遇本末逆转',
                status: '已完结'
            },
            {
                id: '4',
                title: '神豪无极限',
                author: '匿名',
                cover: 'https://bookcover.yuewen.com/qdbimg/349573/1041637443/150.webp',
                description: '穿越到平行时空的陆安打了个响指，开启了全新的生活方式，他说，其实掐的',
                status: '已完结'
            },
            {
                id: '5',
                title: '顾道长生',
                author: '睡觉变白',
                cover: 'https://bookcover.yuewen.com/qdbimg/349573/1041637443/150.webp',
                description: '本以为是写实的都市生活，结果一言不合就修仙！灵气复苏，道法重现，这',
                status: '已完结'
            },
            {
                id: '6',
                title: '魔天记',
                author: '忘语',
                cover: 'https://bookcover.yuewen.com/qdbimg/349573/1041637443/150.webp',
                description: '一名在无数岁月中中长大的亡魂少年，一个与魂并立的时代，一个个可以仿佛',
                status: '已完结'
            },
            {
                id: '7',
                title: '二十面骰子',
                author: '赛斯',
                cover: 'https://bookcover.yuewen.com/qdbimg/349573/1041637443/150.webp',
                description: '在整千七朝由感转化的时代，新大陆的出现成为各种族冒险争夺的乐园，延',
                status: '已完结'
            },
            {
                id: '8',
                title: '苏莫是什么小说',
                author: '半代溜王',
                cover: 'https://bookcover.yuewen.com/qdbimg/349573/1041637443/150.webp',
                description: '苏莫少年苏莫，突破逆天武魂，却被认为是最低级的垃圾武魂，受尽屈辱…',
                status: '已完结'
            },
            {
                id: '9',
                title: '重生大明当暴君',
                author: '圆溜溜',
                cover: 'https://bookcover.yuewen.com/qdbimg/349573/1041637443/150.webp',
                description: '你以为你请我建设好，联不如意？你以为你随商宰，联不如意？东南富庶，而',
                status: '已完结'
            },
            {
                id: '10',
                title: '重生大明当暴君',
                author: '圆溜溜',
                cover: 'https://bookcover.yuewen.com/qdbimg/349573/1041637443/150.webp',
                description: '你以为你请我建设好，联不如意？你以为你随商宰，联不如意？东南富庶，而',
                status: '已完结'
            }
        ]);

        // 切换分类
        const switchCategory = (id) => {
            currentCategoryId.value = id;
            currentPage.value = 1;
            // 实际应用中这里应该调用API获取对应分类的书籍
            console.log('切换到分类:', id);
        };

        // 切换榜单类型
        const switchRankingType = (id) => {
            currentRankingType.value = id;
            currentPage.value = 1;
            // 实际应用中这里应该调用API获取对应榜单的书籍
            console.log('切换到榜单:', id);
        };

        const handlePageChange = (page) => {
            currentPage.value = page;
            // 这里应该调用API获取对应页码的数据
            console.log('切换到页码:', page);
        };

        onMounted(() => {
            if (categoryId.value) {
                currentCategoryId.value = categoryId.value;
            }
            // 实际应用中这里应该根据分类ID从API获取书籍列表
            console.log('加载分类ID:', currentCategoryId.value);
        });

        return {
            categoryName,
            categoryMap,
            books,
            currentPage,
            pageSize,
            total,
            handlePageChange,
            currentCategoryId,
            switchCategory,
            hasRouteId,
            rankingTypes,
            currentRankingType,
            switchRankingType
        };
    }
};
</script>

<style lang="scss" scoped>
@use '@/assets/styles/variables.scss' as vars;

.ranking-container {
    width: 100%;
    background-color: #fff;
}

.content-wrapper {
    display: flex;
    gap: 20px;
}

// 左侧榜单导航
.ranking-sidebar {
    width: 120px;
    flex-shrink: 0;
    background-color: #f8f8f8;
    border-radius: 4px;

    .ranking-nav {
        list-style: none;
        padding: 0;
        margin: 0;

        li {
            padding: 12px 15px;
            font-size: 14px;
            cursor: pointer;
            border-left: 3px solid transparent;
            transition: all 0.3s;

            &:hover {
                background-color: #f0f0f0;
                color: vars.$primary-color;
            }

            &.active {
                background-color: #e8f1ff;
                color: vars.$primary-color;
                border-left-color: vars.$primary-color;
                font-weight: bold;
            }
        }
    }
}

// 右侧内容区
.ranking-content {
    flex: 1;
    min-width: 0;
}

// 顶部分类导航
.category-tabs {
    width: 100%;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    padding: 0 20px;

    .category-nav {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;

        li {
            padding: 15px 20px;
            font-size: 16px;
            cursor: pointer;
            position: relative;
            transition: all 0.3s;

            &:hover {
                color: vars.$primary-color;
            }

            &.active {
                color: vars.$primary-color;
                font-weight: bold;

                &::after {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 30px;
                    height: 3px;
                    background-color: vars.$primary-color;
                }
            }
        }
    }
}

.book-list-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
    padding: 20px;
}

.book-item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 15px;
    position: relative;
}

.rank-number {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ddd;
    color: #fff;
    font-weight: bold;
    border-radius: 4px;
    margin-right: 15px;
    flex-shrink: 0;

    // 前三名特殊样式
    &.rank-first {
        background-color: #e74c3c;
    }

    &.rank-second {
        background-color: #f39c12;
    }

    &.rank-third {
        background-color: #2ecc71;
    }
}

.pagination-container {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}
</style>