95 lines
3.1 KiB
Vue
95 lines
3.1 KiB
Vue
<template>
|
||
<div class="mt-[30px] w-[100%]">
|
||
<div class="h-[48px] w-[100%] 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()
|
||
},{
|
||
immediate: true
|
||
}
|
||
)
|
||
</script>
|