Add new components for login and comment functionality

2025-08-17 20:15:33 +08:00
parent 99df1d1f81
commit 07b4d3de99
37 changed files with 4744 additions and 263 deletions
--- a/components/comment-section/index.vue
+++ b/components/comment-section/index.vue
@ -0,0 +1,92 @@
+<template>
+  <div class="mt-30px">
+    <div class="h-48px w-938px rounded-1px bg-[#F8F8F8] pl-10px text-16px text-[#333333] font-normal line-height-50px"> 共有{{ result.total || 0 }}条评论 </div>
+    <div v-for="item in result.list" :key="item.id" class="mt-20px border-b-1px border-b-[#eee] border-b-solid pb-14px">
+      <div class="flex items-start">
+        <el-avatar :src="item.creatorInfo.avatar" alt="" srcset="" class="h-50px w-49px rounded-full" />
+        <div class="flex-1 pl-8px">
+          <div class="flex items-center justify-between">
+            <div class="relative top-4px text-14px!">{{ item.creatorInfo.nickName }}</div>
+            <div class="text-12px text-[#999999] font-normal">发表时间：{{ dayjs(item.creatorInfo.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
+          </div>
+          <div class="mt-10px box-border rd-4px bg-[#f8f8f8] px-18px py-10px text-14px text-[#999999] font-normal">{{ item.content }}</div>
+        </div>
+      </div>
+    </div>
+    <!-- 添加element-plus分页 -->
+    <el-pagination
+      v-model:current-page="query.pageNo"
+      :page-size="query.pageSize"
+      layout="prev, pager, next"
+      :total="result.total"
+      class="mt-10px"
+      @current-change="handleCurrentChange"
+    />
+    <el-input v-model="commentContent" type="textarea" :rows="6" placeholder="请输入内容" class="mt-20px w-100%"></el-input>
+    <div>
+      <el-button type="primary" class="mt-10px h-40px w-101px rounded-4px text-16px text-[#FFFFFF] font-bold" @click="handleCreateComment">
+        发表评论
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, watch } from 'vue'
+  import dayjs from 'dayjs'
+  import { getCommentList, createComment } from '@/api/drawe-detail'
+  import type { PageResultProjectCommentResVO } from '@/api/drawe-detail/types'
+
+  const props = defineProps({
+    relationId: {
+      type: Number,
+      required: true,
+    },
+    projectId: {
+      type: Number,
+      required: true,
+    },
+  })
+
+  const query = ref({
+    pageNo: 1,
+    pageSize: 10,
+  })
+
+  const result = ref<PageResultProjectCommentResVO>({
+    list: [],
+    total: 0,
+  })
+
+  const commentContent = ref('')
+  const handleCurrentChange = (pageNo: number) => {
+    query.value.pageNo = pageNo
+    handleGetCommentList()
+  }
+
+  // 获取评论列表
+  const handleGetCommentList = async () => {
+    const res = await getCommentList({ relationId: props.relationId, pageNum: query.value.pageNo, pageSize: query.value.pageSize })
+    if (res.code === 0) {
+      result.value.list = res.data.list
+      result.value.total = res.data.total
+    }
+  }
+
+  // 发表评论
+  const handleCreateComment = async () => {
+    const res = await createComment({ relationId: props.relationId, content: commentContent.value, projectId: props.projectId })
+    if (res.code === 0) {
+      commentContent.value = ''
+      query.value.pageNo = 1
+      handleGetCommentList()
+    }
+  }
+
+  watch(
+    () => props.relationId,
+    () => {
+      handleGetCommentList()
+    }
+  )
+</script>