You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
376 lines
12 KiB
376 lines
12 KiB
<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>
|