From 50ce4fdfda45c6912ff058c09fdff466205a68f0 Mon Sep 17 00:00:00 2001
From: xiongxiaoyang <773861846@qq.com>
Date: Mon, 16 May 2022 13:55:10 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E6=8E=92=E8=A1=8C?=
=?UTF-8?q?=E6=A6=9C=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/common/Navbar.vue | 2 +-
src/router/index.js | 5 +
src/views/BookRank.vue | 162 +++++++++++++++++++++++++++++++
3 files changed, 168 insertions(+), 1 deletion(-)
create mode 100644 src/views/BookRank.vue
diff --git a/src/components/common/Navbar.vue b/src/components/common/Navbar.vue
index c31e92c..c783a7f 100644
--- a/src/components/common/Navbar.vue
+++ b/src/components/common/Navbar.vue
@@ -6,7 +6,7 @@
<li> <router-link :to="{ name: 'bookClass' }">
全部作品
</router-link></li>
- <li><a href="/book/book_ranking.html">排行榜</a></li>
+ <li><router-link :to="{ name: 'bookRank' }">排行榜</router-link></li>
<!--<li class=""><a href="/pay/index.html">充值</a></li>
<li><a href="/author/index.html" target="_blank">作家专区</a></li>-->
</ul>
diff --git a/src/router/index.js b/src/router/index.js
index 1e00e07..a47f9d1 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -25,6 +25,11 @@ const router = createRouter({
name: 'bookClass',
component: () => import('@/views/BookClass')
},
+ {
+ path: '/bookRank',
+ name: 'bookRank',
+ component: () => import('@/views/BookRank')
+ },
{
path: '/book/:id',
name: 'book',
diff --git a/src/views/BookRank.vue b/src/views/BookRank.vue
new file mode 100644
index 0000000..ca4da4d
--- /dev/null
+++ b/src/views/BookRank.vue
@@ -0,0 +1,162 @@
+<template>
+ <Header />
+
+ <div class="main box_center cf mb50">
+ <div class="channelRankingContent cf">
+ <div class="wrap_left fl">
+ <div class="wrap_bg">
+ <!--榜单详情 start-->
+ <div class="pad20">
+ <div class="book_tit">
+ <div class="fl">
+ <h3 class="font26 mt5 mb5" id="rankName">{{rankName}}</h3>
+ </div>
+ <a class="fr"></a>
+ </div>
+ <div class="updateTable rankTable">
+ <table cellpadding="0" cellspacing="0">
+ <thead>
+ <tr>
+ <th class="rank">排名</th>
+ <th class="style">类别</th>
+ <th class="name">书名</th>
+ <th class="chapter">最新章节</th>
+ <th class="author">作者</th>
+ <th class="word">字数</th>
+ </tr>
+ </thead>
+ <tbody id="bookRankList">
+ <tr v-for="(item,index) in books" :key="index">
+ <td class="rank"><i :class="'num' + (Number(`${index}`) + 1)">{{index + 1}}</i></td>
+ <td class="style">
+ <a href="/book/bookclass.html?c=7">[{{item.categoryName}}]</a>
+ </td>
+ <td class="name">
+ <a @click="bookDetail(item.id)" href="javascript:void(0)"
+ >{{item.bookName}}</a
+ >
+ </td>
+ <td class="chapter">
+ <a @click="bookDetail(item.id)" href="javascript:void(0)"
+ >{{item.lastChapterName}}</a
+ >
+ </td>
+ <td class="author">
+ <a href="javascript:void(0)">{{item.authorName}}</a>
+ </td>
+ <td class="word">{{wordCountFormat(item.wordCount)}}</td>
+ </tr>
+
+ </tbody>
+ </table>
+ </div>
+ </div>
+ <!--榜单详情 end-->
+ </div>
+ </div>
+
+ <div class="wrap_right fr">
+ <div class="wrap_inner wrap_right_cont mb20">
+ <div class="title cf noborder">
+ <h3 class="on">排行榜</h3>
+ </div>
+ <div class="rightList2">
+ <ul id="rankType">
+ <li><a class="on" href="javascript:void(0)" @click="visitRank">点击榜</a></li>
+ <li><a href="javascript:void(0)" @click="newestRank">新书榜</a></li>
+ <li><a href="javascript:void(0)" @click="updateRank">更新榜</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <Footer />
+</template>
+
+<script>
+import "@/assets/styles/book.css";
+import { reactive, toRefs, onMounted, ref } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import {
+ listVisitRankBooks,
+ listUpdateRankBooks,
+ listNewestRankBooks,
+} from "@/api/book";
+import Header from "@/components/common/Header";
+import Footer from "@/components/common/Footer";
+export default {
+ name: "bookRank",
+ components: {
+ Header,
+ Footer,
+ },
+ setup() {
+ const route = useRoute();
+ const router = useRouter();
+
+ const state = reactive({
+ books: [],
+ rankName: "点击榜",
+ });
+ onMounted(() => {
+ visitRank();
+ });
+
+ const visitRank = async () => {
+ const { data } = await listVisitRankBooks();
+ state.books = data;
+ state.rankName = "点击榜";
+ };
+
+ const newestRank = async () => {
+ const { data } = await listNewestRankBooks();
+ state.books = data;
+ state.rankName = "新书榜";
+ };
+
+ const updateRank = async () => {
+ const { data } = await listUpdateRankBooks();
+ state.books = data;
+ state.rankName = "更新榜";
+ };
+
+ const bookDetail = (bookId) => {
+ router.push({ path: `/book/${bookId}` });
+ };
+
+ return {
+ ...toRefs(state),
+ bookDetail,
+ newestRank,
+ visitRank,
+ updateRank
+ };
+ },
+ computed: {
+ wordCountFormat(wordCount) {
+ return (wordCount) => {
+ if (wordCount.length > 5) {
+ return parseInt(wordCount / 10000) + "万";
+ }
+ if (wordCount.length > 4) {
+ return parseInt(wordCount / 1000) + "千";
+ }
+ return wordCount;
+ };
+ },
+ },
+};
+</script>
+
+<style>
+.el-pagination {
+ justify-content: center;
+}
+.el-pagination.is-background .el-pager li:not(.is-disabled).is-active {
+ background-color: #f80 !important;
+}
+.el-pagination {
+ --el-pagination-hover-color: #f80 !important;
+}
+</style>