From 26ca8f324df8e3317466b94eeeb1bf6809b2cded Mon Sep 17 00:00:00 2001
From: SunWuyuan <1847261658@qq.com>
Date: Sat, 5 Oct 2024 14:50:42 +0800
Subject: [PATCH] 1

---
 src/components/AddComment.vue |  86 -------------
 src/components/Comment.vue    | 223 ++++++++++++++++++++++------------
 src/pages/test.vue            | 162 ------------------------
 3 files changed, 142 insertions(+), 329 deletions(-)
 delete mode 100644 src/components/AddComment.vue
 delete mode 100644 src/pages/test.vue

diff --git a/src/components/AddComment.vue b/src/components/AddComment.vue
deleted file mode 100644
index b155abc..0000000
--- a/src/components/AddComment.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<template>
-  <v-card class="mt-8 mb-8" outlined>
-    <v-card-title class="headline">为项目评论</v-card-title>
-    <v-card-text>
-      <v-form @submit.prevent>
-        <v-textarea v-model="comment" label="评论" outlined dense auto-grow :rules="commentrules" required></v-textarea>
-        <v-btn color="primary" @click="addComment"> 评论 </v-btn>{{ info }}</v-form>
-    </v-card-text>
-  </v-card>
-  <v-dialog v-model="dialog"  max-width="600px">
-    <v-card class="mt-8 mb-8" outlined>
-    <v-card-title class="headline">为项目评论</v-card-title>
-    <v-card-text>
-      <v-form @submit.prevent>
-        <v-textarea v-model="comment" label="评论" outlined dense auto-grow :rules="commentrules" required></v-textarea>
-        <v-btn color="primary" @click="addComment({pid:pid,rid:rid})"> 评论 </v-btn>{{ info }}</v-form>
-    </v-card-text>
-  </v-card>
-  </v-dialog>
-</template>
-<script>
-import { localuser } from "@/stores/user";
-import request from "../axios/axios";
-export default {
-  props: {
-    url: {
-      type: String,
-      required: true,
-    },
-    pid: { type: Number, required: false },
-    rid: { type: Number, required: false },
-    callback: {
-      type: Function,
-      required: false,
-    }
-  },
-  name: "addcommnet",
-  data() {
-    return {
-      dialog: false,
-      localuser: localuser,
-      userinfo: localuser.user,
-      info: "",
-      comment: "",
-      commentrules: [
-        (value) => {
-          if (value) return true;
-          return "不可为空";
-        },
-      ],
-      pid: this.pid,
-      rid: this.rid,
-    };
-  },
-
-  methods: {
-    openAddComment(info){
-      this.dialog = true
-      this.pid = info.pid
-      this.rid = info.rid
-    },
-    addComment(info) {
-      console.log(info)
-      request({
-        url: `/comment/api/comment?path=${this.url}`,
-        method: "post",
-        data: {
-          url: this.url,
-          comment: this.comment,
-          pid: info.pid||null,
-          rid: info.rid||null,
-        },
-      }).then((res) => {
-        if (res.errno == 0) {
-          this.info = ("评论成功");
-          this.callback()
-        } else {
-          this.info = ("评论失败");
-          this.callback()
-        }
-      });
-    },
-  },
-  mounted() { },
-};
-</script>
diff --git a/src/components/Comment.vue b/src/components/Comment.vue
index 9ab8dce..0c3d742 100644
--- a/src/components/Comment.vue
+++ b/src/components/Comment.vue
@@ -1,6 +1,6 @@
 <template>
   <v-container>
-    <v-card class="mb-4" v-for="comment in comments" :key="comment.id">
+    <v-card class="mb-2" elevation hover v-for="comment in comments" :key="comment.id" @click="showMore(comment)">
       <v-card-item>
         <template v-slot:prepend>
           <v-avatar color="blue-darken-2">
@@ -8,7 +8,9 @@
           </v-avatar>
         </template>
         <template v-slot:append>
-          <v-btn icon="mdi-reply" @click="$refs.commentComponent.openAddComment({ pid: comment.id, rid: comment.id })">
+          <v-btn icon="mdi-reply">
+          </v-btn><v-btn icon="mdi-delete" @click="deleteCommnet({ id: comment.id })"
+            v-if="comment.user_id == localuser.user.id">
           </v-btn>
         </template>
         <v-card-title :to="'/user/' + comment.user_id">{{
@@ -22,8 +24,8 @@
       <v-card-text>{{ comment.comment }}</v-card-text>
       <v-card class="pb-3 pl-10 pr-3" v-if="comment.children && comment.children.length">
         <v-list density="default">
-          <!-- Loop over only the first 3 child comments -->
-          <v-list-item v-for="children in comment.children.slice(0, 3)" :key="children.id" link>
+          <v-list-item v-for="children in comment.children.slice(0, 2)" :key="children.id" link
+            @click="showMore(comment)">
             <template v-slot:prepend>
               <v-img :src="comment.avatar"></v-img>
             </template>
@@ -32,48 +34,99 @@
             <v-list-item-subtitle>{{ children.comment }}</v-list-item-subtitle>
           </v-list-item>
 
-          <!-- Conditionally render "View All" if there are more than 3 comments -->
-          <v-list-item v-if="comment.children.length > 3" link @click="viewAllComments">
-            <v-list-item-title class="text-blue">查看全部</v-list-item-title>
+          <v-list-item v-if="comment.children.length > 2" link @click="viewAllComments">
+            <v-list-item-title class="text-blue" @click="showMore(comment)">查看全部</v-list-item-title>
           </v-list-item>
         </v-list>
-      </v-card> </v-card><v-btn @click="getComments" :disabled="loadbuttondisabled">继续加载</v-btn> <v-btn
-      @click="changesort">{{
-        sort }}</v-btn>
-    <!--<v-pagination :length="totalPages" rounded="circle" v-model="page" @update:model-value="getComments(page)" @input="getComments(page)"></v-pagination>-->
+      </v-card>
+    </v-card>
 
-    <!--<v-card class="mb-4 ml-10">
-      <v-card-item>
-        <template v-slot:prepend>
-          <v-avatar color="blue-darken-2">
-            <v-img
-              src="https://s4-1.wuyuan.1r.ink/user/0d4f67a46d95d99c440e063f9c1e66c9"
-            ></v-img>
-          </v-avatar>
-        </template>
-        <template v-slot:append>
-          <v-btn icon="mdi-reply"> </v-btn>
-        </template>
-        <v-card-title>孙悟元</v-card-title>
+    <v-btn @click="getComments" :disabled="loadbuttondisabled">继续加载</v-btn>
+    <v-btn @click="changesort">{{ sort }}</v-btn>
 
-        <v-card-subtitle>昨天 20:29[湖南]</v-card-subtitle>
-      </v-card-item>
-      <v-card-text
-        >Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi,
-        ratione debitis quis est labore voluptatibus! Eaque cupiditate minima,
-        at placeat totam, magni doloremque veniam neque porro libero rerum unde
-        voluptatem!</v-card-text
-      >
-    </v-card>-->
+    <v-card class="mt-8 mb-8" elevation hover>
+      <v-card-title class="headline">为项目评论</v-card-title>
+      <v-card-text>
+        <v-form @submit.prevent>
+          <v-textarea v-model="comment" label="评论" dense auto-grow :rules="commentrules" required></v-textarea>
+          <v-btn color="primary" @click="addComment({ pid: null, rid: null })">
+            评论 </v-btn><v-btn variant="text">{{ info }}</v-btn></v-form>
+      </v-card-text>
+    </v-card>
 
-    <!-- 添加新评论 -->
-    <AddComment :url="url" :callback="() => getComments({ retry: true })" ref="commentComponent" />
+
+
+    <v-dialog v-model="moredialog" width="auto"><v-card><v-container>
+          <v-card variant="tonal" class="mb-2" elevation hover>
+            <v-card-item>
+              <template v-slot:prepend>
+                <v-avatar color="blue-darken-2">
+                  <v-img :src="morecommnets.avatar"></v-img>
+                </v-avatar>
+              </template>
+              <template v-slot:append>
+                <v-btn icon="mdi-delete" @click="deleteCommnet({ id: morecommnets.id })"
+                  v-if="morecommnets.user_id == localuser.user.id">
+                </v-btn>
+              </template>
+              <v-card-title :to="'/user/' + morecommnets.user_id">{{
+                morecommnets.nick
+              }}</v-card-title>
+
+              <v-card-subtitle>{{ morecommnets.time }} - {{ morecommnets.browser }} ({{
+                morecommnets.os
+              }})</v-card-subtitle>
+            </v-card-item>
+            <v-card-text>{{ morecommnets.comment }}</v-card-text>
+          </v-card>
+          <v-card class="mb-2" v-for="comment in morecommnets.children" :key="comment.id" elevation hover>
+            <v-card-item>
+              <template v-slot:prepend>
+                <v-avatar color="blue-darken-2">
+                  <v-img :src="comment.avatar"></v-img>
+                </v-avatar>
+              </template>
+              <template v-slot:append>
+                <v-btn icon="mdi-reply" @click="
+                  replyid = comment.id
+                  ">
+                </v-btn><v-btn icon="mdi-delete" @click="deleteCommnet({ id: comment.id })"
+                  v-if="comment.user_id == localuser.user.id">
+                </v-btn>
+              </template>
+              <v-card-title :to="'/user/' + comment.user_id">{{
+                comment.nick
+              }}</v-card-title>
+
+              <v-card-subtitle>{{ comment.time }} - {{ comment.browser }} ({{
+                comment.os
+              }})</v-card-subtitle>
+            </v-card-item>
+            <v-card-text>{{ comment.comment }}</v-card-text>
+          </v-card>
+
+          <v-card class="mt-4" elevation hover>
+            <v-card-title class="headline">回复评论{{ replyid }}<v-btn @click="replyid = null">取消</v-btn></v-card-title>
+            <v-card-text>
+              <v-form @submit.prevent>
+                <v-textarea v-model="comment" label="评论" dense auto-grow :rules="commentrules" required></v-textarea>
+                <v-btn color="primary" @click="
+                  addComment({
+                    pid: replyid,
+                    rid: morecommnets.id,
+                    commnet: comment,
+                  })
+                  ">
+                  评论 </v-btn><v-btn variant="text">{{ info }}</v-btn></v-form>
+            </v-card-text>
+          </v-card></v-container></v-card>
+    </v-dialog>
   </v-container>
 </template>
 
 <script>
-import AddComment from "../components/AddComment.vue";
 import request from "../axios/axios";
+import { localuser } from "@/stores/user";
 export default {
   props: {
     url: {
@@ -81,35 +134,29 @@ export default {
       required: true,
     },
   },
-  components: {
-    AddComment,
-  },
   data() {
     return {
       // 评论列表
       url: this.url,
       sort: "时间倒序",
       sorttext: "insertedAt_desc",
-      openAddComment: AddComment.openAddComment,
       comments: [],
-      newComment: "",
       page: 0,
       totalPages: 0,
       pageSize: 10,
       count: 0,
       loadbuttondisabled: false,
-      // Edit Dialogs
-      editDialog: {
-        visible: false,
-        commentIndex: null,
-        text: "",
-      },
-      editReplyDialog: {
-        visible: false,
-        commentIndex: null,
-        replyIndex: null,
-        text: "",
-      },
+      moredialog: false,
+      morecommnets: [],
+      localuser: localuser,
+      commentrules: [
+        (value) => {
+          if (value) return true;
+          return "不可为空";
+        },
+      ],
+      comment: "",
+      replyid: "",
     };
   },
   mounted() {
@@ -137,6 +184,7 @@ export default {
         this.totalPages = Number(res.data.totalPages);
         this.pageSize = Number(res.data.pageSize);
         this.count = Number(res.data.count);
+        this.moredialog = false;
       });
     },
     changesort() {
@@ -148,36 +196,49 @@ export default {
         this.sort = "时间倒序";
         this.sorttext = "insertedAt_desc";
         this.getComments({ retry: true });
-
       }
     },
+    addComment(info) {
+      request({
+        url: `/comment/api/comment?path=${this.url}`,
+        method: "post",
+        data: {
+          url: this.url,
+          comment: this.comment,
+          pid: info.pid || null,
+          rid: info.rid || null,
+        },
+      }).then((res) => {
+        if (res.errno == 0) {
+          this.info = "评论成功";
+          this.comment = "";
+          this.replyid = null;
+          this.getComments({ retry: true });
+        } else {
+          this.info = "评论失败";
+          this.getComments({ retry: true });
+        }
+      });
+    },
+    deleteCommnet(info) {
+      console.log(info);
+      request({
+        url: `/comment/api/comment/${info.id}`,
+        method: "delete",
+      }).then((res) => {
+        if (res.errno == 0) {
+          this.info = "删除成功";
+          this.getComments({ retry: true });
+        } else {
+          this.info = "删除失败";
+          this.getComments({ retry: true });
+        }
+      });
+    },
+    showMore(info) {
+      this.morecommnets = info;
+      this.moredialog = true;
+    },
   },
 };
 </script>
-
-<style scoped>
-.headline {
-  font-size: 24px;
-  font-weight: bold;
-}
-
-.v-list-item {
-  padding: 0;
-}
-
-.v-card {
-  border-radius: 8px;
-}
-
-.v-avatar {
-  background-color: #f0f0f0;
-}
-
-.v-btn {
-  text-transform: none;
-}
-
-.v-btn:hover {
-  background-color: rgba(0, 0, 0, 0.04);
-}
-</style>
diff --git a/src/pages/test.vue b/src/pages/test.vue
deleted file mode 100644
index 30fd6ca..0000000
--- a/src/pages/test.vue
+++ /dev/null
@@ -1,162 +0,0 @@
-<template>
-  <v-container>
-    <v-card class="mb-4" v-for="comment in comments" :key="comment.id">
-      <v-card-item>
-        <template v-slot:prepend>
-          <v-avatar color="blue-darken-2">
-            <v-img :src="comment.avatar"></v-img>
-          </v-avatar>
-        </template>
-        <template v-slot:append>
-          <v-btn icon="mdi-reply" @click="$refs.commentComponent.openAddComment({pid: comment.id})"> </v-btn>
-        </template>
-        <v-card-title :to="'/user/' + comment.user_id">{{ comment.nick }}</v-card-title>
-
-        <v-card-subtitle>{{ comment.time }} - {{ comment.browser }} ({{ comment.os }})</v-card-subtitle>
-      </v-card-item>
-      <v-card-text>{{ comment.comment }}</v-card-text>
-      <v-card class="pb-3 pl-10 pr-3" v-if="comment.children && comment.children.length">
-        <v-list density="default" style="display: none;">
-          <!-- Loop over only the first 3 child comments -->
-          <v-list-item v-for="children in comment.children.slice(0, 3)" :key="children.id" link>
-
-            <template v-slot:prepend>
-              <v-img :src="comment.avatar"></v-img> </template>
-
-            <v-list-item-title>{{ children.nick }}</v-list-item-title>
-            <v-list-item-subtitle>{{ children.comment }}</v-list-item-subtitle>
-          </v-list-item>
-
-          <!-- Conditionally render "View All" if there are more than 3 comments -->
-          <v-list-item v-if="comment.children.length > 3" link @click="viewAllComments">
-
-
-
-            <v-list-item-title class="text-blue">查看全部</v-list-item-title>
-          </v-list-item>
-        </v-list>
-      </v-card>
-
-
-    </v-card><v-btn @click="getComments" :disabled="loadbuttondisabled">继续加载</v-btn>
-    <!--<v-pagination :length="totalPages" rounded="circle" v-model="page" @update:model-value="getComments(page)" @input="getComments(page)"></v-pagination>-->
-
-    <!--<v-card class="mb-4 ml-10">
-      <v-card-item>
-        <template v-slot:prepend>
-          <v-avatar color="blue-darken-2">
-            <v-img
-              src="https://s4-1.wuyuan.1r.ink/user/0d4f67a46d95d99c440e063f9c1e66c9"
-            ></v-img>
-          </v-avatar>
-        </template>
-        <template v-slot:append>
-          <v-btn icon="mdi-reply"> </v-btn>
-        </template>
-        <v-card-title>孙悟元</v-card-title>
-
-        <v-card-subtitle>昨天 20:29[湖南]</v-card-subtitle>
-      </v-card-item>
-      <v-card-text
-        >Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi,
-        ratione debitis quis est labore voluptatibus! Eaque cupiditate minima,
-        at placeat totam, magni doloremque veniam neque porro libero rerum unde
-        voluptatem!</v-card-text
-      >
-    </v-card>-->
-
-    <!-- 添加新评论 -->
-<AddComment  url="/" :callback="() => getComments({ retry: true })" ref="commentComponent"/>
-
-  </v-container>
-</template>
-
-<script>
-import AddComment from "../components/AddComment.vue";
-import request from "../axios/axios";
-export default {
-  components: {
-    AddComment,
-  },
-  data() {
-    return {
-      // 评论列表
-      openAddComment:AddComment.openAddComment,
-      comments: [],
-      newComment: "",
-      page: 0,
-      totalPages: 0,
-      pageSize: 10,
-      count: 0,
-      loadbuttondisabled:false,
-      // Edit Dialogs
-      editDialog: {
-        visible: false,
-        commentIndex: null,
-        text: "",
-      },
-      editReplyDialog: {
-        visible: false,
-        commentIndex: null,
-        replyIndex: null,
-        text: "",
-      },
-    };
-  },
-  mounted() {
-    this.getComments();
-  },
-  methods: {
-    getComments(info = {}) {
-      if (info.retry==true) {
-        this.page=0
-        this.comments=[]
-      }
-      // 获取评论列表
-      request({
-        url: `/comment/api/comment?url=/&page=${this.page + 1}&pageSize=${this.pageSize}&sortBy=insertedAt_desc`,
-
-        method: "get",
-      }).then((res) => {
-        //在数据末尾添加新数据
-        if (res.data.data.length == 0) {
-          this.loadbuttondisabled=true
-
-        }
-        this.comments = this.comments.concat(res.data.data);
-        this.page = Number(res.data.page);
-        this.totalPages = Number(res.data.totalPages);
-        this.pageSize = Number(res.data.pageSize);
-        this.count = Number(res.data.count);
-      });
-    },
-  },
-};
-</script>
-
-<style scoped>
-.headline {
-  font-size: 24px;
-  font-weight: bold;
-}
-
-.v-list-item {
-  padding: 0;
-}
-
-.v-card {
-  border-radius: 8px;
-}
-
-.v-avatar {
-  background-color: #f0f0f0;
-}
-
-.v-btn {
-  text-transform: none;
-}
-
-.v-btn:hover {
-  background-color: rgba(0, 0, 0, 0.04);
-}
-</style>