93 lines
3.0 KiB
Vue
93 lines
3.0 KiB
Vue
<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>
|