145 lines
3.6 KiB
Vue
145 lines
3.6 KiB
Vue
<template>
|
|
<div class="reply-by-receiver-list">
|
|
<div class="items">
|
|
<loading :showOn="!pageResult"/>
|
|
<template v-if="pageResult">
|
|
<section class="item" v-for="item in pageResult.list" :key="item.id">
|
|
<header class="header">
|
|
<div class="left">
|
|
<div class="biz-type" v-text="(<any> UserCommentBizType)[item.comment.bizType]"></div>
|
|
<h5 v-if="item.comment.article" class="title selectable" v-text="(item.comment.article as any).title"></h5>
|
|
<div class="gray sender">
|
|
<span class="word-space" v-if="item.sender" v-text="item.sender.name"></span>
|
|
<span class="word-space" v-if="item.senderNick" v-text="item.senderNick"></span>
|
|
<span v-if="item.sender || item.senderNick">回复</span>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<t-link
|
|
:href="UserAPI.getCommentTargetUrl(item.comment)"
|
|
class="word-space"
|
|
theme="primary"
|
|
hover="color" target="_blank"
|
|
>查看</t-link>
|
|
<t-popconfirm
|
|
content="确定继续删除这条回复通知吗？"
|
|
@confirm="doDelete(item)"
|
|
:popup-props="{ placement: 'left' }"
|
|
>
|
|
<t-link class="del" theme="danger" hover="color">删除</t-link>
|
|
</t-popconfirm>
|
|
</div>
|
|
</header>
|
|
<div class="content gray clip-text selectable" v-text="item.content"></div>
|
|
</section>
|
|
</template>
|
|
</div>
|
|
<footer v-if="pageResult && 16 < pageResult.total" class="footer">
|
|
<t-pagination
|
|
v-if="pageResult"
|
|
:total="pageResult.total"
|
|
:pageSize="16"
|
|
:showPageSize="false"
|
|
:onCurrentChange="(current: number) => page.index = current - 1"
|
|
>
|
|
<template #totalContent>
|
|
<div style="flex: 1" v-text="`共 ${pageResult.total} 条回复`"></div>
|
|
</template>
|
|
</t-pagination>
|
|
</footer>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { CommentReplyBizType, CommentReplyPage, CommentReplyView, Loading, PageResult, Toolkit } from "timi-web";
|
|
import { UserCommentBizType } from "@/types/User.ts";
|
|
import UserAPI from "@/api/UserAPI.ts";
|
|
|
|
const page = reactive<CommentReplyPage>({
|
|
bizType: (<any>CommentReplyBizType).RECEIVER,
|
|
index: 0,
|
|
size: 12
|
|
});
|
|
const pageResult = ref<PageResult<CommentReplyView>>();
|
|
const fetchList = Toolkit.debounce(async () => pageResult.value = await UserAPI.listCommentReply(page));
|
|
watch(() => page.index, fetchList);
|
|
onMounted(fetchList);
|
|
|
|
async function doDelete(item: CommentReplyView) {
|
|
item.id && await UserAPI.ignoreCommentReply(item.id);
|
|
await fetchList();
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.reply-by-receiver-list {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.items {
|
|
flex: 1;
|
|
font-size: 1rem;
|
|
|
|
.item {
|
|
padding: .5rem 1rem 2rem 1rem;
|
|
|
|
&:hover {
|
|
background: var(--tui-dark-white);
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: .5rem;
|
|
justify-content: space-between;
|
|
|
|
.left {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.biz-type {
|
|
width: fit-content;
|
|
color: #FFF;
|
|
padding: .1rem .5rem;
|
|
text-align: center;
|
|
background: var(--tui-light-blue);
|
|
margin-right: .5rem;
|
|
}
|
|
|
|
.title {
|
|
margin: 0;
|
|
}
|
|
|
|
.sender {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
display: flex;
|
|
font-size: 14px;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
font-size: 14px;
|
|
margin-right: 1rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
bottom: -1px;
|
|
padding: var(--tui-page-padding);
|
|
position: sticky;
|
|
background: rgba(255, 255, 255, .8);
|
|
border-top: var(--tui-border);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
}
|
|
}
|
|
</style>
|