feat: 增加小说目录页

src/api/book.js

@@ -16,6 +16,10 @@ export function listRecBooks(params) {
     return request.get('/book/recList', { params });
 }
 
+export function listChapters(params) {
+    return request.get('/book/chapterList', { params });
+}
+
 export function getBookContent(chapterId) {
     return request.get(`/book/content/${chapterId}`);
 }

src/router/index.js

@@ -25,6 +25,12 @@ const router = createRouter({
       name: 'book',
       component: () => import('@/views/Book')
 	   
+    },
+    {
+      path: '/chapterList/:bookId',
+      name: 'chapterList',
+      component: () => import('@/views/BookChapterList')
+	   
     },
     {
       path: '/book/:id/:chapterId',

src/views/Book.vue

@@ -84,7 +84,7 @@
                     >({{ chapterAbout.chapterTotal }}章)</span
                   >
                 </div>
-                <a class="fr" href="/book/indexList-1431636283466297344.html"
+                <a class="fr" @click="chapterList(book.id)" href="javascript:void(0)"
                   >全部目录</a
                 >
               </div>
@@ -316,6 +316,10 @@ export default {
       loadLastChapterAbout(bookId)
     };
 
+    const chapterList = (bookId) => {
+      router.push({ path: `/chapterList/${bookId}` });
+    };
+
     const addBookVisit = async (bookId) => {
       addVisitCount({bookId: bookId})
     }
@@ -326,6 +330,7 @@ export default {
       no_comment,
       bookContent,
       bookDetail,
+      chapterList
     };
   },
   mounted() {

src/views/BookChapterList.vue

@@ -0,0 +1,107 @@
+<template>
+  <Header />
+  <div class="main box_center cf">
+    <div class="nav_sub">
+      <a href="/">小说精品屋</a>&gt;<a href="/book/bookclass.html?c=3"
+        >{{book.categoryName}}</a
+      >&gt;<a @click="bookDetail(book.id)" href="javascript:void(0)">{{book.bookName}}</a>&gt;<span
+        > 作品目录</span
+      >
+    </div>
+    <div class="channelWrap channelChapterlist cf mb50">
+      <div class="bookMain">
+        <div class="bookCover cf">
+          <div class="book_info1">
+            <div class="tit">
+              <h1>{{book.bookName}}</h1>
+              <!--<i class="vip_b">VIP</i>-->
+            </div>
+            <ul class="list">
+              <li>
+                <span>作者：<a href="javascript:void(0)">{{book.authorName}}</a></span>
+                <span
+                  >类别：<a href="/book/bookclass.html?c=3">{{book.categoryName}}</a></span
+                >
+                <span>状态：<em class="black3">{{
+                  book.bookStatus == 0 ? "连载中" : "已完结"
+                }}</em></span>
+                <span>总点击：<em class="black3" id="cTotal">{{book.visitCount}}</em></span>
+                <span>总字数：<em class="black3">{{book.wordCount}}</em></span>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="dirWrap cf">
+          <h3>正文({{chapterList.length}})</h3>
+          <div class="dirList">
+            <ul v-for="(item,index) in chapterList" :key="index">
+              <li>
+                <a @click="bookContent(book.id,item.id)" href="javascript:void(0)">
+                  <span>{{item.chapterName}}</span><i class="red"> [免费]</i>
+                </a>
+              </li>
+            </ul>
+            
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <Footer />
+  </div>
+</template>
+
+<script>
+import "@/assets/styles/book.css";
+import { reactive, toRefs, onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { getBookById, listChapters } from "@/api/book";
+import Header from "@/components/common/Header";
+import Footer from "@/components/common/Footer";
+export default {
+  name: "chapterList",
+  components: {
+    Header,
+    Footer,
+  },
+  setup() {
+    const route = useRoute();
+    const router = useRouter();
+
+    const state = reactive({
+      book: {},
+      chapterList: [],
+      imgBaseUrl: process.env.VUE_APP_BASE_IMG_URL,
+    });
+    onMounted(() => {
+      const bookId = route.params.bookId;
+      loadBook(bookId);
+      loadChapterList(bookId);
+    });
+
+    const loadBook = async (bookId) => {
+      const { data } = await getBookById(bookId);
+      state.book = data;
+    };
+
+    const loadChapterList = async (bookId) => {
+      const { data } = await listChapters({ bookId: bookId });
+      state.chapterList = data;
+    };
+
+    const bookContent = (bookId, chapterId) => {
+      router.push({ path: `/book/${bookId}/${chapterId}` });
+    };
+
+    const bookDetail = (bookId) => {
+      router.push({ path: `/book/${bookId}` });
+    };
+
+    return {
+      ...toRefs(state),
+      bookContent,
+      bookDetail,
+    };
+  },
+};
+</script>

src/views/BookContent.vue

@@ -13,8 +13,8 @@
             <ul>
               <li>
                 <a
-                  class="ico_catalog"
-                  href="/book/indexList-1334332598936240128.html"
+                  class="ico_catalog" @click="chapterList(data.chapterInfo.bookId)"
+                  href="javascript:void(0)"
                   title="目录"
                 >
                   <b>目录</b></a
@@ -24,7 +24,8 @@
               <li>
                 <a
                   class="ico_page"
-                  href="/book/1334332598936240128.html"
+                  @click="bookDetail(data.chapterInfo.bookId)"
+                  href="javascript:void(0)"
                   title="返回书页"
                   ><b>书页</b></a
                 >
@@ -145,7 +146,8 @@
             <a
               style="background-color: rgba(255, 255, 255, 0.45)"
               class="dir"
-              href="/book/indexList-1334332598936240128.html"
+              @click="chapterList(data.chapterInfo.bookId)"
+                  href="javascript:void(0)"
               >目录</a
             >
             <a
@@ -303,6 +305,11 @@ export default {
       router.push({ path: `/book/${bookId}` });
     };
 
+    const chapterList = (bookId) => {
+      router.push({ path: `/chapterList/${bookId}` });
+    };
+
+
     const preChapter = async (bookId) => {
       const { data } = await getPreChapterId(route.params.chapterId);
       if (data) {
@@ -331,6 +338,7 @@ export default {
     return {
       ...toRefs(state),
       bookDetail,
+      chapterList,
       preChapter,
       nextChapter
     };