fix Comment Page
This commit is contained in:
+2
-10
@@ -1,22 +1,14 @@
|
|||||||
<template>
|
<template>
|
||||||
<root-layout v-if="isReady" icp="test icp" author="test cr name">
|
|
||||||
<authorize-form class="test" />
|
|
||||||
<textarea v-text="JSON.stringify(userStore.loginUser)"></textarea>
|
|
||||||
<comment :bizType="CommentBizType.ARTICLE" :bizId="1" />
|
|
||||||
</root-layout>
|
|
||||||
<popup />
|
|
||||||
<user-profile-popup />
|
<user-profile-popup />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { CommentBizType, Popup, SettingMapper, userStore } from "timi-web";
|
import { Popup } from "timi-web";
|
||||||
import { AuthorizeForm, Comment, RootLayout, UserProfilePopup } from "~/components";
|
import { UserProfilePopup } from "~/components";
|
||||||
|
|
||||||
const isReady = ref(false);
|
const isReady = ref(false);
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
await SettingMapper.loadSetting();
|
|
||||||
await userStore.login4Storage();
|
|
||||||
isReady.value = true;
|
isReady.value = true;
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -46,15 +46,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import {
|
import { Comment, CommentAPI, CommentBizType, Page, PageResult, Scroller } from "timi-web";
|
||||||
CommentAPI,
|
|
||||||
CommentBizType,
|
|
||||||
CommentPage,
|
|
||||||
CommentReplyBizType,
|
|
||||||
CommentView,
|
|
||||||
PageResult,
|
|
||||||
Scroller
|
|
||||||
} from "timi-web";
|
|
||||||
import { CommentForm, CommentList } from "~/components";
|
import { CommentForm, CommentList } from "~/components";
|
||||||
|
|
||||||
// 评论总成
|
// 评论总成
|
||||||
@@ -74,15 +66,17 @@ const props = withDefaults(defineProps<{
|
|||||||
const { bizType, bizId, canComment } = toRefs(props);
|
const { bizType, bizId, canComment } = toRefs(props);
|
||||||
|
|
||||||
// 数据列表
|
// 数据列表
|
||||||
const page = reactive<CommentPage>({
|
const page = reactive<Page<Comment>>({
|
||||||
bizType: bizType.value,
|
|
||||||
bizId: bizId.value,
|
|
||||||
index: 0,
|
index: 0,
|
||||||
size: 16
|
size: 16,
|
||||||
|
equalsExample: {
|
||||||
|
bizType: bizType.value,
|
||||||
|
bizId: bizId.value
|
||||||
|
}
|
||||||
});
|
});
|
||||||
// 当前页
|
// 当前页
|
||||||
const pageCurrent = ref(1);
|
const pageCurrent = ref(1);
|
||||||
const pageResult = ref<PageResult<CommentView>>();
|
const pageResult = ref<PageResult<Comment>>();
|
||||||
async function doFetch() {
|
async function doFetch() {
|
||||||
page.index = pageCurrent.value - 1;
|
page.index = pageCurrent.value - 1;
|
||||||
pageResult.value = await CommentAPI.page(page);
|
pageResult.value = await CommentAPI.page(page);
|
||||||
@@ -90,10 +84,11 @@ async function doFetch() {
|
|||||||
const item = pageResult.value.list[i];
|
const item = pageResult.value.list[i];
|
||||||
item.repliesCurrent = 1;
|
item.repliesCurrent = 1;
|
||||||
item.repliesPage = {
|
item.repliesPage = {
|
||||||
bizId: item.id!,
|
|
||||||
bizType: CommentReplyBizType.COMMENT,
|
|
||||||
index: 0,
|
index: 0,
|
||||||
size: 6
|
size: 6,
|
||||||
|
equalsExample: {
|
||||||
|
commentId: item.id!
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -47,7 +47,7 @@
|
|||||||
<comment-reply-list :comment="comment" @reply="replyTo" />
|
<comment-reply-list :comment="comment" @reply="replyTo" />
|
||||||
<t-pagination
|
<t-pagination
|
||||||
class="pages"
|
class="pages"
|
||||||
v-if="6 < comment.repliesLength"
|
v-if="6 < comment.repliesLength!"
|
||||||
:total="comment.repliesLength"
|
:total="comment.repliesLength"
|
||||||
:pageSize="6"
|
:pageSize="6"
|
||||||
:showPageSize="false"
|
:showPageSize="false"
|
||||||
@@ -74,10 +74,9 @@
|
|||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import {
|
import {
|
||||||
|
Comment,
|
||||||
CommentAPI,
|
CommentAPI,
|
||||||
CommentReply,
|
CommentReply,
|
||||||
CommentReplyView,
|
|
||||||
CommentView,
|
|
||||||
CommonAPI,
|
CommonAPI,
|
||||||
ImageType,
|
ImageType,
|
||||||
MarkdownView,
|
MarkdownView,
|
||||||
@@ -94,7 +93,7 @@ defineOptions({
|
|||||||
});
|
});
|
||||||
|
|
||||||
const props = withDefaults(defineProps<{
|
const props = withDefaults(defineProps<{
|
||||||
items: CommentView[],
|
items: Comment[],
|
||||||
canReply?: boolean,
|
canReply?: boolean,
|
||||||
}>(), {
|
}>(), {
|
||||||
canReply: true
|
canReply: true
|
||||||
@@ -119,12 +118,12 @@ const replyToNick = ref();
|
|||||||
*
|
*
|
||||||
* @param comment 所属评论
|
* @param comment 所属评论
|
||||||
*/
|
*/
|
||||||
async function doFetchReply(comment: CommentView) {
|
async function doFetchReply(comment: Comment) {
|
||||||
// 组件下标以 1 开始,分页参数以 0 开始
|
// 组件下标以 1 开始,分页参数以 0 开始
|
||||||
comment.repliesPage.index = comment.repliesCurrent - 1;
|
comment.repliesPage!.index = comment.repliesCurrent! - 1;
|
||||||
const result = await CommentAPI.pageReply(comment.repliesPage);
|
const result = await CommentAPI.pageReply(comment.repliesPage!);
|
||||||
comment.replies.length = 0;
|
comment.replies!.length = 0;
|
||||||
comment.replies.push(...result.list);
|
comment.replies!.push(...result.list);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -133,7 +132,7 @@ async function doFetchReply(comment: CommentView) {
|
|||||||
* @param comment 跟随的评论
|
* @param comment 跟随的评论
|
||||||
* @param replyTo 被回复对象
|
* @param replyTo 被回复对象
|
||||||
*/
|
*/
|
||||||
async function replyTo(comment: CommentView, replyTo?: CommentReplyView) {
|
async function replyTo(comment: Comment, replyTo?: CommentReply) {
|
||||||
activeReply.value = comment.id;
|
activeReply.value = comment.id;
|
||||||
if (replyTo) {
|
if (replyTo) {
|
||||||
// 被回复对象
|
// 被回复对象
|
||||||
@@ -148,8 +147,8 @@ function onSubmitReply(reply: CommentReply) {
|
|||||||
activeReply.value = -1;
|
activeReply.value = -1;
|
||||||
|
|
||||||
const comment = items.value.find(comment => comment.id === reply.commentId)!;
|
const comment = items.value.find(comment => comment.id === reply.commentId)!;
|
||||||
comment.repliesLength++;
|
comment.repliesLength!++;
|
||||||
comment.repliesCurrent = Math.ceil(comment.repliesLength / 6); // 上取整最后一页
|
comment.repliesCurrent = Math.ceil(comment.repliesLength! / 6); // 上取整最后一页
|
||||||
doFetchReply(comment);
|
doFetchReply(comment);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,15 +1,15 @@
|
|||||||
import { CommentReplyView, CommentView } from "timi-web";
|
import { Comment, CommentReply } from "timi-web";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* emits
|
* emits
|
||||||
*/
|
*/
|
||||||
export interface Emits {
|
export interface Emits {
|
||||||
(event: "reply", comment: CommentView, replyTo?: CommentReplyView): Promise<void>;
|
(event: "reply", comment: Comment, replyTo?: CommentReply): Promise<void>;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const useHandler = (emit: Emits) => {
|
export const useHandler = (emit: Emits) => {
|
||||||
|
|
||||||
const onReply = async (comment: CommentView, replyTo?: CommentReplyView) => await emit("reply", comment, replyTo);
|
const onReply = async (comment: Comment, replyTo?: CommentReply) => await emit("reply", comment, replyTo);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
onReply,
|
onReply,
|
||||||
|
|||||||
@@ -70,7 +70,7 @@
|
|||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import {
|
import {
|
||||||
CommentView,
|
Comment,
|
||||||
CommonAPI,
|
CommonAPI,
|
||||||
ImageType,
|
ImageType,
|
||||||
MarkdownView,
|
MarkdownView,
|
||||||
@@ -88,7 +88,7 @@ defineOptions({
|
|||||||
});
|
});
|
||||||
|
|
||||||
const props = withDefaults(defineProps<{
|
const props = withDefaults(defineProps<{
|
||||||
comment: CommentView,
|
comment: Comment,
|
||||||
}>(), {});
|
}>(), {});
|
||||||
const { comment } = toRefs(props);
|
const { comment } = toRefs(props);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user