feat: 增加评论修改功能

src/api/user.js

@@ -19,3 +19,7 @@ export function comment(params) {
 export function deleteComment(id) {
     return request.delete(`/user/comment/${id}`);
 }
+
+export function updateComment(id,content) {
+    return request.putForm(`/user/comment/${id}`,content);
+}

src/components/common/Top.vue

@@ -44,7 +44,7 @@
 import logo from "@/assets/images/logo.png";
 import { reactive, toRefs, onMounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
-import { getToken, getNickName, removeToken, removeNickName } from "@/utils/auth";
+import { getToken, getNickName, removeToken, removeNickName,removeUid } from "@/utils/auth";
 export default {
   name: "Top",
   setup(props, context) {
@@ -65,6 +65,7 @@ export default {
     const logout = () => {
       removeToken();
       removeNickName();
+      removeUid()
       state.nickName = "";
       state.token = "";
     };

src/utils/auth.js

@@ -3,6 +3,9 @@ const TokenKey = 'Authorization'
 
 const nickNameKey = 'nickName'
 
+const uidKey = 'uid'
+
+
 export const getToken = () => {
     return localStorage.getItem(TokenKey);
 }
@@ -26,3 +29,16 @@ export const setNickName = (nickName) => {
 export const getNickName = () => {
   return localStorage.getItem(nickNameKey);
 }
+
+export const setUid = (uid) => {
+  return localStorage.setItem(uidKey, uid)
+}
+
+export const getUid = () => {
+  return localStorage.getItem(uidKey);
+}
+
+export const removeUid = () =>  {
+  return localStorage.removeItem(uidKey)
+}
+

src/views/Book.vue

@@ -136,12 +136,24 @@
                   >发表评论</a
                 >
               </div>
-              <div v-if="newestComments.commentTotal == 0" class="no_comment" id="noCommentPanel">
+              <div
+                v-if="newestComments.commentTotal == 0"
+                class="no_comment"
+                id="noCommentPanel"
+              >
                 <img :src="no_comment" alt="" />
                 <span class="block">暂无评论</span>
               </div>
-              <div v-if="newestComments.commentTotal > 0" class="commentBar" id="commentPanel">
-                <div class="comment_list cf" v-for="(item,index) in newestComments.comments" :key="index">
+              <div
+                v-if="newestComments.commentTotal > 0"
+                class="commentBar"
+                id="commentPanel"
+              >
+                <div
+                  class="comment_list cf"
+                  v-for="(item, index) in newestComments.comments"
+                  :key="index"
+                >
                   <div class="user_heads fl" vals="389">
                     <img :src="man" class="user_head" alt="" /><span
                       class="user_level1"
@@ -150,24 +162,50 @@
                     >
                   </div>
                   <ul class="pl_bar fr">
-                    <li class="name">{{item.commentUser}}</li>
-                    <li class="dec">{{item.commentContent}}</li>
+                    <li class="name">{{ item.commentUser }}</li>
+                    <li class="dec">{{ item.commentContent }}</li>
                     <li class="other cf">
-                      <span class="time fl">{{item.commentTime}}</span
-                      ><span class="fr"
+                      <span class="time fl">{{ item.commentTime }}</span
+                      ><span class="fr" v-if="item.commentUserId == uid"
                         ><a
+                          href="javascript:void(0);"
+                          @click="updateUserComment(item.id,item.commentContent)"
+                          class="zan"
+                          >修改</a
+                        > | <a
                           href="javascript:void(0);"
                           @click="deleteUserComment(item.id)"
                           class="zan"
-                          
                           >删除</a
                         ></span
                       >
                     </li>
                   </ul>
                 </div>
-             
               </div>
+              <el-dialog
+                v-model="dialogUpdateCommentFormVisible"
+                title="评论修改"
+              >
+                <el-form :model="form">
+                  <el-form-item
+                    label="评论内容"
+                    :label-width="formLabelWidth"
+                  >
+                    <el-input type="textarea" v-model="updateComment"/>
+                  </el-form-item>
+                </el-form>
+                <template #footer>
+                  <span class="dialog-footer">
+                    <el-button @click="dialogUpdateCommentFormVisible = false"
+                      >取消</el-button
+                    >
+                    <el-button type="primary" @click="goUpdateComment()"
+                      >确定</el-button
+                    >
+                  </span>
+                </template>
+              </el-dialog>
 
               <!--无评论时此处隐藏-->
               <div class="more_bar" id="moreCommentPanel" style="display: none">
@@ -293,9 +331,10 @@ import {
   addVisitCount,
   getLastChapterAbout,
   listRecBooks,
-  listNewestComments,
+  listNewestComments
 } from "@/api/book";
-import { comment , deleteComment} from "@/api/user";
+import { comment, deleteComment, updateComment } from "@/api/user";
+import {getUid} from "@/utils/auth"
 import Header from "@/components/common/Header";
 import Footer from "@/components/common/Footer";
 import author_head from "@/assets/images/author_head.png";
@@ -312,12 +351,16 @@ export default {
     const router = useRouter();
 
     const state = reactive({
+      uid: getUid(),
       book: {},
       books: {},
       chapterAbout: {},
       commentContent: "",
       newestComments: {},
       imgBaseUrl: process.env.VUE_APP_BASE_IMG_URL,
+      dialogUpdateCommentFormVisible: false,
+      commentId: "",
+      updateComment: ""
     });
     onMounted(() => {
       const bookId = route.params.id;
@@ -386,13 +429,25 @@ export default {
         commentContent: state.commentContent,
       });
       state.commentContent = "";
-      loadNewestComments(state.book.id)
+      loadNewestComments(state.book.id);
+    };
+
+    const updateUserComment = async (id,comment) => {
+      state.dialogUpdateCommentFormVisible = true
+      state.updateComment = comment
+      state.commentId = id
     };
 
     const deleteUserComment = async (id) => {
-        await deleteComment(id)
-        loadNewestComments(state.book.id)
-    }
+      await deleteComment(id);
+      loadNewestComments(state.book.id);
+    };
+
+    const goUpdateComment = async (id) => {
+      state.dialogUpdateCommentFormVisible = false
+      await updateComment(state.commentId,{"content":state.updateComment})
+      loadNewestComments(state.book.id);
+    };
 
     return {
       ...toRefs(state),
@@ -404,7 +459,9 @@ export default {
       goToAnchor,
       userComment,
       deleteUserComment,
-      man
+      man,
+      updateUserComment,
+      goUpdateComment
     };
   },
   mounted() {
@@ -431,3 +488,27 @@ export default {
   },
 };
 </script>
+
+<style>
+.el-button:not(.is-text) {
+    border: #f80;
+    border-color: #f80;
+}
+.el-button--primary {
+    --el-button-hover-bg-color: #f80;
+}
+
+.el-button--primary {
+    --el-button-bg-color: #f70;
+}
+
+.el-button {
+
+    --el-button-hover-text-color: #fafafa;
+}
+
+.el-button {
+
+    --el-button-hover-bg-color: #ff880061;
+}
+</style>

src/views/Login.vue

@@ -102,7 +102,7 @@ import { useRouter, useRoute } from "vue-router";
 import { ElMessage } from "element-plus";
 import { getImgVerifyCode } from "@/api/resource";
 import { login } from "@/api/user";
-import { setToken, setNickName } from "@/utils/auth";
+import { setToken, setNickName,setUid } from "@/utils/auth";
 import Header from "@/components/common/Header";
 import Footer from "@/components/common/Footer";
 export default {
@@ -136,6 +136,7 @@ export default {
       const { data } = await login(state);
 
       setToken(data.token);
+      setUid(data.uid)
       setNickName(data.nickName)
       router.push({ path: "/home" });
     };

src/views/Register.vue

@@ -60,7 +60,9 @@
       </form>
       <div class="user_r">
         <p class="tit">已有账号？</p>
-                <router-link :to="{name: 'login'}" class="btn_ora_white">立即登录</router-link>
+        <router-link :to="{ name: 'login' }" class="btn_ora_white"
+          >立即登录</router-link
+        >
         <!--
         <div class="fast_login" style="display: none">
           <div class="fast_tit">
@@ -111,7 +113,7 @@ import { useRouter, useRoute } from "vue-router";
 import { ElMessage } from "element-plus";
 import { getImgVerifyCode } from "@/api/resource";
 import { register } from "@/api/user";
-import { setToken,setNickName } from "@/utils/auth";
+import { setToken, setNickName, setUid } from "@/utils/auth";
 import Header from "@/components/common/Header";
 import Footer from "@/components/common/Footer";
 export default {
@@ -163,7 +165,8 @@ export default {
       }
       const { data } = await register(state);
 
-      setToken(data);
+      setToken(data.token);
+      setUid(data.uid);
       setNickName(state.username);
       router.push({ path: "/home" });
     };