feat: 回复评论
This commit is contained in:
rd
@ -74,23 +74,33 @@ export default {
|
|||||||
const isCollapse = ref(false);
|
const isCollapse = ref(false);
|
||||||
const comment = ref('');
|
const comment = ref('');
|
||||||
const isReplay = ref(false);
|
const isReplay = ref(false);
|
||||||
const commentId = ref(undefined);
|
const replayTarget = ref({});
|
||||||
const deleteCommentModalRef = ref(null);
|
const deleteCommentModalRef = ref(null);
|
||||||
|
|
||||||
|
const closeReplay = () => {
|
||||||
|
isReplay.value = false;
|
||||||
|
replayTarget.value = {};
|
||||||
|
};
|
||||||
|
|
||||||
|
const onReplay = (item) => {
|
||||||
|
isReplay.value = true;
|
||||||
|
replayTarget.value = item;
|
||||||
|
};
|
||||||
|
|
||||||
const onComment = async () => {
|
const onComment = async () => {
|
||||||
const { code, data } = await postShareWorksComments(props.dataSource.id, route.params.shareCode, {
|
const { code, data } = await postShareWorksComments(props.dataSource.id, route.params.shareCode, {
|
||||||
content: comment.value,
|
content: comment.value,
|
||||||
comment_id: commentId.value,
|
comment_id: replayTarget.value.id,
|
||||||
});
|
});
|
||||||
if (code === 200) {
|
if (code === 200) {
|
||||||
emit('updateComment');
|
emit('updateComment');
|
||||||
comment.value = '';
|
// comment.value = '';
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const onClearComment = () => {
|
const onClearComment = () => {
|
||||||
isReplay.value = false;
|
isReplay.value = false;
|
||||||
commentId.value = undefined;
|
replayTarget.value = {};
|
||||||
comment.value = '';
|
comment.value = '';
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -123,6 +133,98 @@ export default {
|
|||||||
deleteShareWorksComments(props.dataSource.id, comment_id, route.params.shareCode);
|
deleteShareWorksComments(props.dataSource.id, comment_id, route.params.shareCode);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const renderTextareaBox = () => {
|
||||||
|
return (
|
||||||
|
<div class="sticky bottom-0 left-0 w-full z-22 px-24px">
|
||||||
|
<div class="relative">
|
||||||
|
{isReplay.value && (
|
||||||
|
<div class="px-12px pt-8px absolute top-0 left-0 z-2 mb-8px w-full">
|
||||||
|
<div class="rounded-4px bg-#F2F3F5 h-30px px-8px flex justify-between items-center ">
|
||||||
|
<div class="flex items-center mr-12px flex-1 overflow-hidden">
|
||||||
|
<span class="mr-4px cts !color-#737478 flex-shrink-0">回复</span>
|
||||||
|
<TextOverTips
|
||||||
|
context={`${getCommentName(replayTarget.value)}：${replayTarget.value.content}`}
|
||||||
|
class="cts !color-#737478"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<icon-close size={16} class="color-#737478 cursor-pointer flex-shrink-0" onClick={closeReplay} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Textarea
|
||||||
|
auto-size
|
||||||
|
class={`max-h-220px overflow-y-auto ${isReplay.value ? 'pt-38px' : ''}`}
|
||||||
|
size="large"
|
||||||
|
placeholder="输入评论"
|
||||||
|
v-model={comment.value}
|
||||||
|
onPressEnter={onComment}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{comment.value && (
|
||||||
|
<div class="flex justify-end mt-12px">
|
||||||
|
<Button type="outline" class="mr-12px rounded-8px" size="medium" onClick={onClearComment}>
|
||||||
|
取消
|
||||||
|
</Button>
|
||||||
|
<Button type="primary" class="rounded-8px" size="medium" onClick={onComment}>
|
||||||
|
发送
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderCommentBox = () => {
|
||||||
|
return (
|
||||||
|
<div class="comment-box">
|
||||||
|
<p class="my-16px">
|
||||||
|
<span class="cts bold cm !text-16px !lh-24px mr-8px">评论</span>
|
||||||
|
{props.dataSource.comments?.length > 0 && (
|
||||||
|
<span class="cts !text-16px !lh-24px bold">{props.dataSource.comments?.length}</span>
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
<div class="comment-list flex flex-col my-16px rounded-8px">
|
||||||
|
{props.dataSource.comments?.map((item) => (
|
||||||
|
<div class="comment-item flex px-12px py-8px group" key={item.id}>
|
||||||
|
<Image
|
||||||
|
src={item.commenter_id === 0 ? icon2 : item.commenter?.head_image}
|
||||||
|
width={40}
|
||||||
|
height={40}
|
||||||
|
preview={false}
|
||||||
|
fit="cover"
|
||||||
|
class="rounded-50% mr-13px"
|
||||||
|
v-slots={{
|
||||||
|
error: () => <img src={icon3} class="w-40 h-40 rounded-50%" />,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="flex flex-col flex-1">
|
||||||
|
<div class="flex justify-between">
|
||||||
|
<p class="mb-4px">
|
||||||
|
<span class="cts !color-#211F24 mr-8px">{getCommentName(item)}</span>
|
||||||
|
<span class="cts !color-#939499">{formatRelativeTime(item.created_at)}</span>
|
||||||
|
</p>
|
||||||
|
<div class="items-center hidden group-hover:flex">
|
||||||
|
<SvgIcon
|
||||||
|
onClick={() => onReplay(item)}
|
||||||
|
name="svg-comment"
|
||||||
|
size={16}
|
||||||
|
class="color-#55585F cursor-pointer hover:color-#6D4CFE"
|
||||||
|
/>
|
||||||
|
{renderDeleteBtn(item)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="cts !color-#211F24">{item.content}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
const getCommentName = (item) => {
|
const getCommentName = (item) => {
|
||||||
if (item.commenter_id === 0) {
|
if (item.commenter_id === 0) {
|
||||||
return '佚名';
|
return '佚名';
|
||||||
@ -217,72 +319,12 @@ export default {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 评论与回复 */}
|
{/* 评论与回复 */}
|
||||||
<div class="comment-box">
|
{renderCommentBox()}
|
||||||
<p class="my-16px">
|
|
||||||
<span class="cts bold cm !text-16px !lh-24px mr-8px">评论</span>
|
|
||||||
{props.dataSource.comments?.length > 0 && (
|
|
||||||
<span class="cts !text-16px !lh-24px bold">{props.dataSource.comments?.length}</span>
|
|
||||||
)}
|
|
||||||
</p>
|
|
||||||
<div class="comment-list flex flex-col my-16px rounded-8px">
|
|
||||||
{props.dataSource.comments?.map((item) => (
|
|
||||||
<div class="comment-item flex px-12px py-8px group" key={item.id}>
|
|
||||||
<Image
|
|
||||||
src={item.commenter_id === 0 ? icon2 : item.commenter?.head_image}
|
|
||||||
width={40}
|
|
||||||
height={40}
|
|
||||||
preview={false}
|
|
||||||
fit="cover"
|
|
||||||
class="rounded-50% mr-13px"
|
|
||||||
v-slots={{
|
|
||||||
error: () => <img src={icon3} class="w-40 h-40 rounded-50%" />,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="flex flex-col flex-1">
|
|
||||||
<div class="flex justify-between">
|
|
||||||
<p class="mb-4px">
|
|
||||||
<span class="cts !color-#211F24 mr-8px">{getCommentName(item)}</span>
|
|
||||||
<span class="cts !color-#939499">{formatRelativeTime(item.created_at)}</span>
|
|
||||||
</p>
|
|
||||||
<div class="items-center hidden group-hover:flex">
|
|
||||||
<SvgIcon
|
|
||||||
name="svg-comment"
|
|
||||||
size={16}
|
|
||||||
class="color-#55585F cursor-pointer hover:color-#6D4CFE"
|
|
||||||
/>
|
|
||||||
{renderDeleteBtn(item)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p class="cts !color-#211F24">{item.content}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="sticky bottom-0 left-0 w-full z-22 px-24px">
|
{renderTextareaBox()}
|
||||||
<Textarea
|
|
||||||
auto-size
|
|
||||||
class="max-h-220px overflow-y-auto"
|
|
||||||
size="large"
|
|
||||||
placeholder="输入评论"
|
|
||||||
v-model={comment.value}
|
|
||||||
onPressEnter={onComment}
|
|
||||||
/>
|
|
||||||
{comment.value && (
|
|
||||||
<div class="flex justify-end mt-12px">
|
|
||||||
<Button type="outline" class="mr-12px rounded-8px" size="medium" onClick={onClearComment}>
|
|
||||||
取消
|
|
||||||
</Button>
|
|
||||||
<Button type="primary" class="rounded-8px" size="medium" onClick={onComment}>
|
|
||||||
发送
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<DeleteCommentModal ref={deleteCommentModalRef} onDelete={deleteComment} />
|
<DeleteCommentModal ref={deleteCommentModalRef} onDelete={deleteComment} />
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
Reference in New Issue
Block a user