From e254462964a5cba3e8925f0632adcd6fd272f956 Mon Sep 17 00:00:00 2001
From: xiongxiaoyang <773861846@qq.com>
Date: Mon, 16 May 2022 18:58:03 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E6=98=BE=E7=A4=BA=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/BookClass.vue |  2 +-
 src/views/BookRank.vue  | 51 +++++++++++++++++++++++++++++------------
 2 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/src/views/BookClass.vue b/src/views/BookClass.vue
index 55df688..0291938 100644
--- a/src/views/BookClass.vue
+++ b/src/views/BookClass.vue
@@ -164,7 +164,7 @@
             <a
               filter-value="visit_count"
               href="javascript:void(0)"
-              :class="`${sortOn == 'visitcount desc' ? 'on' : ''}`"
+              :class="`${sortOn == 'visit_count desc' ? 'on' : ''}`"
               @click="changeSort('visit_count desc')"
               >点击量</a
             >
diff --git a/src/views/BookRank.vue b/src/views/BookRank.vue
index 4f3977b..8a75cb8 100644
--- a/src/views/BookRank.vue
+++ b/src/views/BookRank.vue
@@ -9,7 +9,7 @@
           <div class="pad20">
             <div class="book_tit">
               <div class="fl">
-                <h3 class="font26 mt5 mb5" id="rankName">{{rankName}}</h3>
+                <h3 class="font26 mt5 mb5" id="rankName">{{ rankName }}</h3>
               </div>
               <a class="fr"></a>
             </div>
@@ -26,27 +26,36 @@
                   </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>
+                  <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="javascript:void(0)" @click="bookDetail(item.id)">[{{item.categoryName}}]</a>
+                      <a href="javascript:void(0)" @click="bookDetail(item.id)"
+                        >[{{ item.categoryName }}]</a
+                      >
                     </td>
                     <td class="name">
-                      <a @click="bookDetail(item.id)" href="javascript:void(0)"
-                        >{{item.bookName}}</a
+                      <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
+                      <a
+                        @click="bookDetail(item.id)"
+                        href="javascript:void(0)"
+                        >{{ item.lastChapterName }}</a
                       >
                     </td>
                     <td class="author">
-                      <a href="javascript:void(0)">{{item.authorName}}</a>
+                      <a href="javascript:void(0)">{{ item.authorName }}</a>
                     </td>
-                    <td class="word">{{wordCountFormat(item.wordCount)}}</td>
+                    <td class="word">{{ wordCountFormat(item.wordCount) }}</td>
                   </tr>
-                 
                 </tbody>
               </table>
             </div>
@@ -62,9 +71,17 @@
           </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>
+              <li>
+                <a :class="`${rankType == 1 ? 'on' : ''}`" href="javascript:void(0)" @click="visitRank"
+                  >点击榜</a
+                >
+              </li>
+              <li>
+                <a :class="`${rankType == 2 ? 'on' : ''}`" href="javascript:void(0)" @click="newestRank">新书榜</a>
+              </li>
+              <li>
+                <a :class="`${rankType == 3 ? 'on' : ''}`" href="javascript:void(0)" @click="updateRank">更新榜</a>
+              </li>
             </ul>
           </div>
         </div>
@@ -98,6 +115,7 @@ export default {
     const state = reactive({
       books: [],
       rankName: "点击榜",
+      rankType: 1,
     });
     onMounted(() => {
       visitRank();
@@ -107,18 +125,21 @@ export default {
       const { data } = await listVisitRankBooks();
       state.books = data;
       state.rankName = "点击榜";
+      state.rankType = 1;
     };
 
     const newestRank = async () => {
       const { data } = await listNewestRankBooks();
       state.books = data;
       state.rankName = "新书榜";
+      state.rankType = 2;
     };
 
     const updateRank = async () => {
       const { data } = await listUpdateRankBooks();
       state.books = data;
       state.rankName = "更新榜";
+      state.rankType = 3;
     };
 
     const bookDetail = (bookId) => {
@@ -130,7 +151,7 @@ export default {
       bookDetail,
       newestRank,
       visitRank,
-      updateRank
+      updateRank,
     };
   },
   computed: {