feat: 评论发表

src/api/book.js

@@ -52,3 +52,4 @@ export function listUpdateRankBooks() {
     return request.get('/book/update_rank');
 }
 
+

src/api/user.js

@@ -10,4 +10,8 @@ export function login(params) {
 
 export function submitFeedBack(params) {
     return request.post('/user/feedback', params);
+}
+
+export function comment(params) {
+    return request.post('/user/comment',params);
 }

src/utils/index.js

@@ -1,4 +1,14 @@
 
+export const goToAnchor = (id) => {
+  var anchor = document.getElementById(id);
+  // chrome
+  document.body.scrollTop = anchor.offsetTop;
+  // firefox
+  document.documentElement.scrollTop = anchor.offsetTop;
+  // safari
+  window.pageYOffset = anchor.offsetTop;
+}
+
 export const getQueryObject = (url) => {
   url = url == null ? window.location.href : url
   const search = url.substring(url.lastIndexOf('?') + 1)

src/views/Book.vue

@@ -1,7 +1,6 @@
 <template>
   <Header />
   <div class="main box_center cf mb50">
-    
     <div class="channelWrap channelBookInfo cf">
       <div class="bookCover cf">
         <a class="book_cover">
@@ -80,7 +79,10 @@
                     >({{ chapterAbout.chapterTotal }}章)</span
                   >
                 </div>
-                <a class="fr" @click="chapterList(book.id)" href="javascript:void(0)"
+                <a
+                  class="fr"
+                  @click="chapterList(book.id)"
+                  href="javascript:void(0)"
                   >全部目录</a
                 >
               </div>
@@ -125,7 +127,12 @@
                   <h3>作品评论区</h3>
                   <span id="bookCommentTotal">(0条)</span>
                 </div>
-                <!-- <a class="fr" href="#txtComment">发表评论</a> -->
+                <a
+                  class="fr"
+                  @click="goToAnchor('txtComment')"
+                  href="javascript:void(0)"
+                  >发表评论</a
+                >
               </div>
               <div class="no_comment" id="noCommentPanel">
                 <img :src="no_comment" alt="" />
@@ -144,20 +151,19 @@
                 >
               </div>
 
-              <!--
               <div class="reply_bar" id="reply_bar">
-                
                 <div class="tit">
                   <span class="fl font16">发表评论</span>
-                  
+
                   <span class="fr black9" style="display: none"
                     >请先 <a class="orange" href="/user/login.html">登录</a
                     ><em class="ml10 mr10">|</em
                     ><a class="orange" href="/user/register.html">注册</a></span
                   >
                 </div>
-                
+
                 <textarea
+                  v-model="commentContent"
                   name="txtComment"
                   rows="2"
                   cols="20"
@@ -173,14 +179,12 @@
                     ><a
                       class="btn_ora"
                       href="javascript:void(0);"
-                      onclick="javascript:BookDetail.SaveComment(37,0,$('#txtComment').val());"
+                      @click="userComment"
                       >发表</a
                     ></span
                   >
                 </div>
-                
               </div>
-              -->
             </div>
           </div>
           <!--作品评论区 end-->
@@ -256,12 +260,20 @@
 <script>
 import "@/assets/styles/book.css";
 import { reactive, toRefs, onMounted } from "vue";
+import { ElMessage } from "element-plus";
 import { useRouter, useRoute } from "vue-router";
-import { getBookById,addVisitCount,getLastChapterAbout,listRecBooks } from "@/api/book";
+import {
+  getBookById,
+  addVisitCount,
+  getLastChapterAbout,
+  listRecBooks,
+} from "@/api/book";
+import { comment } from "@/api/user";
 import Header from "@/components/common/Header";
 import Footer from "@/components/common/Footer";
 import author_head from "@/assets/images/author_head.png";
 import no_comment from "@/assets/images/no_comment.png";
+import { goToAnchor } from "@/utils";
 export default {
   name: "book",
   components: {
@@ -275,20 +287,21 @@ export default {
     const state = reactive({
       book: {},
       books: {},
-      chapterAbout:{},
+      chapterAbout: {},
+      commentContent: "",
       imgBaseUrl: process.env.VUE_APP_BASE_IMG_URL,
     });
     onMounted(() => {
       const bookId = route.params.id;
-      loadBook(bookId)
-      loadRecBooks(bookId)
-      loadLastChapterAbout(bookId)
+      loadBook(bookId);
+      loadRecBooks(bookId);
+      loadLastChapterAbout(bookId);
     });
 
     const loadBook = async (bookId) => {
       const { data } = await getBookById(bookId);
       state.book = data;
-      addBookVisit(bookId)
+      addBookVisit(bookId);
     };
 
     const loadRecBooks = async (bookId) => {
@@ -299,7 +312,7 @@ export default {
     const loadLastChapterAbout = async (bookId) => {
       const { data } = await getLastChapterAbout({ bookId: bookId });
       state.chapterAbout = data;
-    }
+    };
 
     const bookContent = (bookId, chapterId) => {
       router.push({ path: `/book/${bookId}/${chapterId}` });
@@ -307,9 +320,9 @@ export default {
 
     const bookDetail = (bookId) => {
       router.push({ path: `/book/${bookId}` });
-      loadBook(bookId)
-      loadRecBooks(bookId)
-      loadLastChapterAbout(bookId)
+      loadBook(bookId);
+      loadRecBooks(bookId);
+      loadLastChapterAbout(bookId);
     };
 
     const chapterList = (bookId) => {
@@ -317,8 +330,26 @@ export default {
     };
 
     const addBookVisit = async (bookId) => {
-      addVisitCount({bookId: bookId})
-    }
+      addVisitCount({ bookId: bookId });
+    };
+
+    const userComment = async () => {
+      if (!state.commentContent) {
+        ElMessage.error("用户评论不能为空！");
+        return
+      }
+      if (state.commentContent.length < 10) {
+        ElMessage.error("评论不能少于 10 个字符！");
+        return
+      }
+      if (state.commentContent.length > 512) {
+        ElMessage.error("评论不能多于 512 个字符！");
+        return
+      }
+      await comment({'bookId':state.book.id,"commentContent":state.commentContent});
+      state.commentContent = ""
+
+    };
 
     return {
       ...toRefs(state),
@@ -326,7 +357,9 @@ export default {
       no_comment,
       bookContent,
       bookDetail,
-      chapterList
+      chapterList,
+      goToAnchor,
+      userComment,
     };
   },
   mounted() {