完善评论删除与修改

components.d.ts

@@ -10,6 +10,7 @@ declare module '@vue/runtime-core' {
     Cod: typeof import('./src/components/cod/index.vue')['default']
     Commentitem: typeof import('./src/components/post/commentitem.vue')['default']
     ElAffix: typeof import('element-plus/es')['ElAffix']
+    ElAlert: typeof import('element-plus/es')['ElAlert']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']

src/components/post/commentitem.vue

@@ -4,7 +4,11 @@ import service from '../../plugins/axios'
 import { API_URL } from '../../config'
 import { token } from '../../plugins/pinia'
 const data = defineProps({
-  id: {
+  commentid: {
+    type: String,
+    required: true,
+  },
+  postid: {
     type: String,
     required: true,
   },
@@ -23,10 +27,24 @@ const data = defineProps({
 })
 
 const edit = () => {
-  window.location.href = `/posting?postid=${data.id}`
+  window.location.href = `/reply?postid=${data.postid}&commentid=${data.commentid}`
 }
-const del = () => {
-  window.location.href = `/posting?postid=${data.id}`
+const del = async () => {
+  const res = (
+    await service({
+      url: '/comment',
+      method: 'delete',
+      headers: {
+        Authorization: `Bearer ${token().token}`,
+      },
+      data: {
+        Commentid: data.commentid,
+      },
+    })
+  ).data
+  if (res.cod === 200) {
+    window.location.href = `/post/${data.postid}`
+  }
 }
 async function IsMycomment() {
   if (token().token === '') {
@@ -80,10 +98,15 @@ const userdata = await (
                      @click="edit">
             编辑
           </el-button>
-          <el-button type="text"
-                     @click="del">
-            删除
-          </el-button>
+          <el-popconfirm @confirm="del()"
+                         title="确定要删除这条评论？">
+            <template #reference>
+              <el-button type="text">
+                删除
+              </el-button>
+            </template>
+          </el-popconfirm>
+
         </div>
         <el-tag type="success">
           发表时间:{{ formatDate(data.time)}}

src/layouts/post.vue

@@ -52,13 +52,15 @@ const bt_comment = () => {
             :md="18"
             :lg="18"
             :xl="18">
+
       <Suspense>
         <template #default>
           <postarticle :postid="id"
                        :auth_id="data.author.auth_id"
                        :title="data.title"
                        :plateId="data.plateId"
-                       :content="data.content" />
+                       :content="data.content"
+                       :updatedAt="data.updatedAt" />
         </template>
         <template #fallback>
           <el-skeleton />

src/layouts/reply.vue

@@ -5,12 +5,33 @@ import service from '../plugins/axios'
 import { token } from '../plugins/pinia'
 import { ElMessage, FormInstance } from 'element-plus'
 
-const { postid } = useRoute().query
-console.log(postid)
+const { postid, commentid } = useRoute().query
+console.log('接收' + JSON.stringify(useRoute().query))
 
 const submit = async (formEl: FormInstance | undefined) => {
   formEl?.validate(async (valid, e) => {
     if (valid) {
+      if (commentid) {
+        const res = await service({
+          method: 'PUT',
+          url: '/comment',
+          headers: {
+            Authorization: `Bearer ${token().token}`,
+            cod: ressuccess,
+          },
+          data: {
+            Commentid: commentid,
+            content: formDate.content,
+          },
+        })
+        if (res.data.cod === 200) {
+          window.location.href = `/post/${postid}`
+        } else {
+          formEl?.resetFields()
+          ElMessage.error(res.data.msg)
+        }
+        return
+      }
       const res = await service({
         method: 'post',
         url: '/comment',
@@ -43,9 +64,12 @@ const rule = reactive({
   cod: [{ required: true, message: '请点击按钮进行验证', trigger: 'change' }],
   content: [{ required: true, message: '请输入回复内容', trigger: 'change' }],
 })
-console.log(postid)
-
 const { title } = await (await service.get(`/post?id=${postid}`)).data
+if (commentid) {
+  formDate.content = await (
+    await service.get(`/comment/id?commentId=${commentid}`)
+  ).data.content
+}
 let ressuccess = ''
 const codvisible = ref(false)
 const bt_disabled = ref(false)

src/views/post/comment.vue

@@ -26,7 +26,8 @@ const data = ref(
             :key="i">
     <template #default>
 
-      <commentitem :id="item.id"
+      <commentitem :postid="postid"
+                   :commentid="item.id"
                    :content="item.content"
                    :authorid="item.authorId"
                    :time="item.updatedAt" />

src/views/post/postarticle.vue

@@ -25,6 +25,10 @@ const data = defineProps({
     type: String,
     required: true,
   },
+  updatedAt: {
+    type: String,
+    required: true,
+  },
 })
 const edit = () => {
   window.location.href = `/posting?plate=${data.plateId}&postid=${data.postid}`
@@ -79,6 +83,22 @@ onMounted(() => {
   }, 100)
 })
 const isMypost = ref(await IsMypost())
+function formatDate(date: any) {
+  const d = new Date(date)
+  const now = Date.now()
+  const diff = (now - d.getTime()) / 1000
+  if (diff < 30) {
+    return '刚刚'
+  } else if (diff < 3600) {
+    // less 1 hour
+    return Math.ceil(diff / 60) + '分钟前'
+  } else if (diff < 3600 * 24) {
+    return Math.ceil(diff / 3600) + '小时前'
+  } else if (diff < 3600 * 24 * 2) {
+    return '1天前'
+  }
+  return Math.ceil(diff / (3600 * 24)) + '天前'
+}
 </script>
 
 <template>
@@ -101,10 +121,17 @@ const isMypost = ref(await IsMypost())
         </div>
       </div>
     </template>
+    <el-alert :title="`本帖最后更新与${formatDate(data.updatedAt)}，请注意时效性`"
+              type="info"
+              :closable="false" />
+    <br />
+    <el-alert :title="`本帖所有观点均与作者有关，并不代表论坛观点`"
+              type="info" />
     <v-md-editor :model-value="data.content"
                  mode="preview"
                  class="md">
     </v-md-editor>
+
   </el-card>
 </template>