feat: 新增小说最新章节组件

src/api/book.js

@@ -4,6 +4,10 @@ export function getBookById(bookId) {
     return request.get(`/book/${bookId}`);
 }
 
+export function getLastChapterAbout(params) {
+    return request.get('/book/lastChapterAbout', { params });
+}
+
 export function getBookContent(chapterId) {
     return request.get(`/book/content/${chapterId}`);
 }

src/components/book/LastChapterAbout.vue

@@ -0,0 +1,64 @@
+<template>
+  <!--章节目录 start-->
+  <div class="pad20_nobt">
+    <div class="bookChapter">
+      <div class="book_tit">
+        <div class="fl">
+          <h3>最新章节</h3>
+          <span id="bookIndexCount">({{chapterAbout.chapterTotal}}章)</span>
+        </div>
+        <a class="fr" href="/book/indexList-1431636283466297344.html"
+          >全部目录</a
+        >
+      </div>
+      <ul class="list cf">
+        <li>
+          <span class="fl font16">
+            <a @click="bookContent(chapterAbout.chapterInfo.bookId,chapterAbout.chapterInfo.id)" href="javascript:void(0)" v-if="chapterAbout.chapterInfo"
+              >{{chapterAbout.chapterInfo.chapterName}}】</a
+            ></span
+          >
+          <span class="black9 fr" v-if="chapterAbout.chapterInfo">更新时间：{{chapterAbout.chapterInfo.chapterUpdateTime}}</span>
+        </li>
+        <li class="zj_yl" id="lastBookContent">
+          <!--go-->
+          　　<span v-html="`${chapterAbout.contentSummary}` + '...'"></span>
+        </li>
+        <!--此处是该章节预览，截取最前面的42个字-->
+      </ul>
+    </div>
+  </div>
+  <!--章节目录 end-->
+</template>
+
+<script>
+import { reactive, toRefs, onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { getLastChapterAbout } from "@/api/book";
+export default {
+  name: "LastChapterAbout",
+  setup() {
+    const route = useRoute();
+    const router = useRouter();
+
+    const state = reactive({
+      chapterAbout: {},
+      imgBaseUrl: process.env.VUE_APP_BASE_IMG_URL,
+    });
+    const bookId = route.params.id;
+    onMounted(async () => {
+      const { data } = await getLastChapterAbout({ bookId: bookId });
+      state.chapterAbout = data;
+    });
+
+    const bookContent = (bookId, chapterId) => {
+      router.push({ path: `/book/${bookId}/${chapterId}` });
+    };
+
+    return {
+      ...toRefs(state),
+      bookContent
+    };
+  },
+};
+</script>

src/views/Book.vue

@@ -63,36 +63,8 @@
       <!--left start-->
       <div class="wrap_left fl">
         <div class="wrap_bg">
-          <!--章节目录 start-->
+          <LastChapterAbout/>
-          <div class="pad20_nobt">
+          
-            <div class="bookChapter">
-              <div class="book_tit">
-                <div class="fl">
-                  <h3>最新章节</h3>
-                  <span id="bookIndexCount">(430章)</span>
-                </div>
-                <a class="fr" href="/book/indexList-1431636283466297344.html"
-                  >全部目录</a
-                >
-              </div>
-              <ul class="list cf">
-                <li>
-                  <span class="fl font16">
-                    <a href="/book/1431636283466297344/1460619921151021056.html"
-                      >章一百三十四 【一更】</a
-                    ></span
-                  >
-                  <span class="black9 fr">更新时间：21/11/16 00:00:00</span>
-                </li>
-                <li class="zj_yl" id="lastBookContent">
-                  <!--go-->
-                  　　只见一只拥有四条尾巴的火狐，正在不远处龇牙...
-                </li>
-                <!--此处是该章节预览，截取最前面的42个字-->
-              </ul>
-            </div>
-          </div>
-          <!--章节目录 end-->
 
           <!--作品评论区 start-->
           <div class="pad20">
@@ -280,6 +252,7 @@ import { getBookById } from "@/api/book";
 import { ElMessage, ElLoading } from "element-plus";
 import Header from "@/components/common/Header";
 import Footer from "@/components/common/Footer";
+import LastChapterAbout from "@/components/book/LastChapterAbout.vue"
 import author_head from "@/assets/images/author_head.png";
 import no_comment from "@/assets/images/no_comment.png";
 export default {
@@ -287,6 +260,7 @@ export default {
   components: {
     Header,
     Footer,
+    LastChapterAbout
   },
   setup() {
     const route = useRoute();

src/views/BookContent.vue

@@ -83,19 +83,19 @@
         <div class="readWrap">
           <div class="bookNav">
             <a href="/">首页 </a>&gt;
-            <a href="/book/bookclass.html?c=6">{{bookContent.categoryName}}</a>&gt;
+            <a href="/book/bookclass.html?c=6" v-if="data.bookInfo">{{data.bookInfo.categoryName}}</a>&gt;
-            <a href="javascript:void(0)" @click="bookDetail(bookContent.bookId)">{{bookContent.bookName}}</a>
+            <a href="javascript:void(0)" v-if="data.bookInfo" @click="bookDetail(data.chapterInfo.bookId)">{{data.bookInfo.bookName}}</a>
           </div>
           <div id="readcontent">
             <div class="textbox cf" style="background-color: rgba(255, 255, 255,.45);">
               <div class="book_title">
-                <h1>{{bookContent.chapterName}}</h1>
+                <h1 v-if="data.chapterInfo">{{data.chapterInfo.chapterName}}</h1>
                 <div class="textinfo">
-                  类别：<a href="/book/bookclass.html?c=6">{{bookContent.categoryName}}</a> 作者：<a
+                  类别：<a href="/book/bookclass.html?c=6" v-if="data.bookInfo">{{data.bookInfo.categoryName}}</a> 作者：<a
                     href="javascript:searchByK('最终马甲')"
-                    >{{bookContent.authorName}}</a
+                    v-if="data.bookInfo">{{data.bookInfo.authorName}}</a
-                  ><span>字数：{{bookContent.chapterWordCount}}</span
+                  ><span v-if="data.chapterInfo">字数：{{data.chapterInfo.chapterWordCount}}</span
-                  ><span>更新时间：{{bookContent.chapterUpdateTime}}</span>
+                  ><span v-if="data.chapterInfo">更新时间：{{data.chapterInfo.chapterUpdateTime}}</span>
                 </div>
               </div>
 
@@ -104,7 +104,7 @@
                   id="showReading"
                   class="readBox"
                   style="font-size: 16px; font-family: microsoft yahei"
-                v-html="bookContent.content">
+                v-html="data.bookContent">
                 </div>
               </div>
             </div>
@@ -266,13 +266,13 @@ export default {
 
     const chapterId = route.params.chapterId;
     const state = reactive({
-      bookContent: {},
+      data: {},
       imgBaseUrl: process.env.VUE_APP_BASE_IMG_URL,
     });
     onMounted(async () => {
 
       const {data} =  await getBookContent(chapterId);
-      state.bookContent = data;
+      state.data = data;
       
     });