feat(bookContent): 新增小说内容页

src/api/book.js

@@ -1,9 +1,13 @@
 import request from '../utils/request'
 
-export function getById(bookId) {
+export function getBookById(bookId) {
     return request.get(`/book/${bookId}`);
 }
 
+export function getBookContent(chapterId) {
+    return request.get(`/book/content/${chapterId}`);
+}
+
 export function listVisitRankBooks() {
     return request.get('/book/visitRank');
 }

src/assets/styles/read.css

@@ -72,7 +72,6 @@ body, .read_style_1 { background-color: #ebe5d8 }
 .order_list { padding: 0 50px; line-height: 2.6; }
 .order_list .btns { padding: 20px 0 }
 /* 作者的话 */
-.author_say { margin: 35px auto 10px; width: 90%; min-height: 70px; border-radius: 3px; background: url(../images/author_say.png) no-repeat; border: 1px solid #e3e3e3/*rgba(0,0,0,.1)*/ }
 .say_bar { padding: 14px 14px 14px 74px; font-size: 14px }
 /* 翻页 */
 .nextPageBox { margin: 30px auto; text-align: center; width: 98% }
@@ -149,7 +148,6 @@ body, .read_style_1 { background-color: #ebe5d8 }
 .icon_pc em { filter: alpha(opacity=90); -moz-opacity: 0.9; opacity: 0.9; }
 .read_dz { height:40px; line-height:40px; border-radius:40px; padding:0 22px; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#0c000000,endColorstr=#0c000000); background:rgba(0,0,0,.07); display:block; position:absolute; bottom:35px; right:50px; color:#444; font-size:18px }
 .read_dz:hover { color:#444; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000,endColorstr=#19000000); background:rgba(0,0,0,.1) }
-.read_dz i { width:25px; height:25px; display:inline-block; position:relative; top:4px; margin-right:6px; background:url(../images/icon_readdz.png) no-repeat }
 .read_style_6 .read_dz { color:#aaa }
 .read_dz.on { color:#f70; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#0cff8800,endColorstr=#0cff8800); background:rgba(255,136,0,.05) }
 .read_dz.on i { background-position:-30px 0 }

src/router/index.js

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

src/views/Book.vue

@@ -40,8 +40,9 @@
             >
           </div>
           <div class="btns" id="optBtn">
-            <a
+            
-              href="/book/1431636283466297344/1431636286083543040.html"
+            <a href="javascript:void(0)" @click="bookContent(book.id,book.firstChapterId)"
+              
               class="btn_ora"
               >点击阅读</a
             >
@@ -275,7 +276,7 @@
 import "@/assets/styles/book.css";
 import { reactive, toRefs, onMounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
-import { getById } from "@/api/book";
+import { getBookById } from "@/api/book";
 import { ElMessage, ElLoading } from "element-plus";
 import Header from "@/components/common/Header";
 import Footer from "@/components/common/Footer";
@@ -297,14 +298,19 @@ export default {
     });
     const bookId = route.params.id;
     onMounted(async () => {
-      const { data } = await getById(bookId)
+      const { data } = await getBookById(bookId)
       state.book = data
     });
 
+    const bookContent = (bookId,chapterId) => {
+      router.push({ path: `/book/${bookId}/${chapterId}` });
+    };
+
     return {
       ...toRefs(state),
       author_head,
       no_comment,
+      bookContent
     };
   },
   mounted() {

src/views/BookContent.vue

@@ -0,0 +1,293 @@
+<template>
+  <div class="header">
+    <Top />
+  </div>
+  <div id="showDetail">
+    <div class="readBody cf">
+      <div class="readMain cf">
+        <div class="read_menu">
+          <div class="menu_left" style="background-color: rgba(255, 255, 255,.45);">
+            <ul>
+              <li>
+                <a
+                  class="ico_catalog"
+                  href="/book/indexList-1334332598936240128.html"
+                  title="目录"
+                >
+                  <b>目录</b></a
+                >
+              </li>
+             
+              <li>
+                <a
+                  class="ico_page"
+                  href="/book/1334332598936240128.html"
+                  title="返回书页"
+                  ><b>书页</b></a
+                >
+              </li>
+               <!--
+              <li class="li_shelf" id="cFavs">
+                <a
+                  class="ico_shelf"
+                  href="javascript:void(0);"
+                  title="加入书架"
+                  onclick="javascript:BookDetail.AddFavorites(37,1959973,1);"
+                  ><b>加书架</b></a
+                >
+              </li>
+              <li class="li_shelfed" style="display: none">
+                <a class="ico_shelfed" href="javascript:void(0);" title="已收藏"
+                  ><b>已收藏</b></a
+                >
+              </li>
+
+              <li>
+                <a
+                  class="ico_comment"
+                  href="/book/comment-1334332598936240128.html"
+                  title="评论"
+                >
+                  <b>评论</b></a
+                >
+              </li>
+              <li>
+                <a class="ico_setup" href="javascript:void(0);" title="设置"
+                  ><b>设置</b></a
+                >
+              </li>
+              -->
+            </ul>
+          </div>
+          <div class="menu_right" style="position: fixed; bottom: 0">
+            <ul>
+              <li>
+                <a
+                  class="ico_pagePrev"
+                  href="javascript:enterPreIndexPage('1334332598936240128','0');"
+                  title="上一章"
+                  ><i>上一章</i></a
+                >
+              </li>
+              <li>
+                <a
+                  class="ico_pageNext"
+                  href="javascript:enterNextIndexPage('1334332598936240128','1334332601092112384');"
+                  title="下一章"
+                  ><i>下一章</i></a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="readWrap">
+          <div class="bookNav">
+            <a href="/">首页 </a>&gt;
+            <a href="/book/bookclass.html?c=6">{{bookContent.categoryName}}</a>&gt;
+            <a href="javascript:void(0)" @click="bookDetail(bookContent.bookId)">{{bookContent.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>
+                <div class="textinfo">
+                  类别：<a href="/book/bookclass.html?c=6">{{bookContent.categoryName}}</a> 作者：<a
+                    href="javascript:searchByK('最终马甲')"
+                    >{{bookContent.authorName}}</a
+                  ><span>字数：{{bookContent.chapterWordCount}}</span
+                  ><span>更新时间：{{bookContent.chapterUpdateTime}}</span>
+                </div>
+              </div>
+
+              <div class="txtwrap">
+                <div
+                  id="showReading"
+                  class="readBox"
+                  style="font-size: 16px; font-family: microsoft yahei"
+                v-html="bookContent.content">
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="nextPageBox">
+            <a style="background-color: rgba(255, 255, 255,.45);"
+              class="prev"
+              href="javascript:enterPreIndexPage('1334332598936240128','0');"
+              >上一章</a
+            >
+            <a style="background-color: rgba(255, 255, 255,.45);" class="dir" href="/book/indexList-1334332598936240128.html"
+              >目录</a
+            >
+            <a style="background-color: rgba(255, 255, 255,.45);"
+              class="next"
+              href="javascript:enterNextIndexPage('1334332598936240128','1334332601092112384');"
+              >下一章</a
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="readPopup qrBox" style="display: none">
+      <a
+        class="closePopup"
+        href="javascript:void(0);"
+        onclick="javascript:$('.maskBox,.qrBox').hide();"
+      ></a>
+      <div class="popupTit">
+        <h3>手机阅读</h3>
+      </div>
+      <div class="qrList">
+        <ul></ul>
+      </div>
+    </div>
+    <div class="readPopup setupBox" style="display: none">
+      <a
+        class="closePopup"
+        href="javascript:void(0);"
+        onclick="javascript:$('.maskBox,.setupBox').hide();"
+      ></a>
+      <div class="popupTit">
+        <h3>设置</h3>
+      </div>
+      <div class="setupList">
+        <ul>
+          <li class="readTheme">
+            <em class="tit">阅读主题：</em>
+            <a
+              id="setup_color_white"
+              class="white current"
+              href="javascript:void(0);"
+              title="白色"
+              onclick="javascript:BookDetail.SetBackUpColor(1);"
+            ></a
+            ><a
+              id="setup_color_green"
+              class="green"
+              href="javascript:void(0);"
+              title="绿色"
+              onclick="javascript:BookDetail.SetBackUpColor(2);"
+            ></a
+            ><a
+              id="setup_color_pink"
+              class="pink"
+              href="javascript:void(0);"
+              title="粉色"
+              onclick="javascript:BookDetail.SetBackUpColor(3);"
+            ></a
+            ><a
+              id="setup_color_yellow"
+              class="yellow"
+              href="javascript:void(0);"
+              title="黄色"
+              onclick="javascript:BookDetail.SetBackUpColor(4);"
+            ></a
+            ><a
+              id="setup_color_gray"
+              class="gray"
+              href="javascript:void(0);"
+              title="灰色"
+              onclick="javascript:BookDetail.SetBackUpColor(5);"
+            ></a
+            ><a
+              id="setup_color_night"
+              class="night"
+              href="javascript:void(0);"
+              title="夜间"
+              onclick="javascript:BookDetail.SetBackUpColor(6);"
+            ></a>
+          </li>
+          <li class="setFont setBtn">
+            <em class="tit">正文字体：</em>
+            <a
+              id="setup_font_yahei"
+              class="setYahei current"
+              href="javascript:void(0);"
+              onclick="javascript:BookDetail.SetReadFontFamily(0);"
+              >雅黑</a
+            >
+            <a
+              id="setup_font_simsun"
+              class="setSimsun"
+              href="javascript:void(0);"
+              onclick="javascript:BookDetail.SetReadFontFamily(1);"
+              >宋体</a
+            >
+            <a
+              id="setup_font_ks"
+              class="setKs"
+              href="javascript:void(0);"
+              onclick="javascript:BookDetail.SetReadFontFamily(2);"
+              >楷书</a
+            >
+          </li>
+          <li class="fontSize setBtn">
+            <em class="tit">字体大小：</em>
+            <a
+              class="small"
+              href="javascript:void(0);"
+              onclick="javascript:BookDetail.SetReadFont(-2);"
+              >A-</a
+            ><span class="current_font" id="cFonts"> 16</span
+            ><a
+              class="big"
+              href="javascript:void(0);"
+              onclick="javascript:BookDetail.SetReadFont(2);"
+              >A+</a
+            >
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  
+</template>
+
+<script>
+import "@/assets/styles/book.css";
+import "@/assets/styles/read.css"
+import { reactive, toRefs, onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import {getBookContent } from "@/api/book";
+import { ElMessage, ElLoading } from "element-plus";
+import Top from "@/components/common/Top";
+import Footer from "@/components/common/Footer";
+import author_head from "@/assets/images/author_head.png";
+import no_comment from "@/assets/images/no_comment.png";
+export default {
+  name: "bookContent",
+  components: {
+    Top,
+    Footer,
+  },
+  setup() {
+    const route = useRoute();
+    const router = useRouter();
+
+    const chapterId = route.params.chapterId;
+    const state = reactive({
+      bookContent: {},
+      imgBaseUrl: process.env.VUE_APP_BASE_IMG_URL,
+    });
+    onMounted(async () => {
+
+      const {data} =  await getBookContent(chapterId);
+      state.bookContent = data;
+      
+    });
+
+     const bookDetail = (bookId) => {
+      router.push({ path: `/book/${bookId}` });
+    };
+
+    return {
+      ...toRefs(state),
+      bookDetail
+      
+    };
+  },
+  mounted() {
+    
+  }
+};
+</script>