diff --git a/src/api/book.js b/src/api/book.js
index bc6d08d..9e28def 100644
--- a/src/api/book.js
+++ b/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}`);
}
diff --git a/src/router/index.js b/src/router/index.js
index 3d7f04d..abfdef4 100644
--- a/src/router/index.js
+++ b/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',
diff --git a/src/views/Book.vue b/src/views/Book.vue
index 744c98c..63d687e 100644
--- a/src/views/Book.vue
+++ b/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() {
diff --git a/src/views/BookChapterList.vue b/src/views/BookChapterList.vue
new file mode 100644
index 0000000..0f9eec3
--- /dev/null
+++ b/src/views/BookChapterList.vue
@@ -0,0 +1,107 @@
+<template>
+ <Header />
+ <div class="main box_center cf">
+ <div class="nav_sub">
+ <a href="/">小说精品屋</a>><a href="/book/bookclass.html?c=3"
+ >{{book.categoryName}}</a
+ >><a @click="bookDetail(book.id)" href="javascript:void(0)">{{book.bookName}}</a>><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>
diff --git a/src/views/BookContent.vue b/src/views/BookContent.vue
index d44c86d..9ba84f5 100644
--- a/src/views/BookContent.vue
+++ b/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
};