Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: 可以回复二级评论 #394

Merged
merged 8 commits into from
Dec 23, 2023
Merged

feat: 可以回复二级评论 #394

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
400b84a
feat: 添加了二级评论的评论
Dec 19, 2023
bc73a63
feat: 取消三级评论缩进
Dec 19, 2023
1552568
feat: 取消三级评论缩进
Dec 19, 2023
2477bd9
Merge remote-tracking branch 'origin/main'
foliet Dec 20, 2023
84724f7
feat: 完善三级评论
foliet Dec 20, 2023
469e714
Merge branch 'main' into comments
foliet Dec 22, 2023
feee11f
fix
foliet Dec 22, 2023
e458005
fix
foliet Dec 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/apis/comment/comment-interfaces.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export interface NewCommentReq {
text: string;
id: string;
firstLevelId?: string;
replyToUserId?: string;
type: CommentType;
}

Expand Down
14 changes: 4 additions & 10 deletions src/pages/moment/CommentBox.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,25 +6,19 @@
@click="showDeleteDialogue"
/>
<view class="commenter-info-box">
<view
class="d-flex a-start"
@click="toPersonInfo(comment.user.id, myUserId)"
>
<view class="d-flex a-start" @click="toPersonInfo(comment.user.id)">
<image
:src="getThumbnail(comment.user.avatarUrl)"
class="commenter-profile"
/>
</view>
<view style="margin-top: 12rpx; margin-left: 12rpx; width: 100%">
<view class="d-flex a-center">
<view
class="commenter-name"
@click="toPersonInfo(comment.user.id, myUserId)"
>
<view class="commenter-name" @click="toPersonInfo(comment.user.id)">
{{ comment.user.nickname }}
</view>
<view class="comment-time">
· {{ displayTime(comment.createAt) }}
· {{ displayDetailTime(comment.createAt) }}
</view>
</view>
<view>
Expand Down Expand Up @@ -81,7 +75,7 @@

<script lang="ts" setup>
import { Comment } from "@/apis/schemas";
import { displayTime } from "@/utils/time";
import { displayDetailTime, displayTime } from "@/utils/time";
import { deleteComment } from "@/apis/comment/comment";
import { ref } from "vue";
import { toPersonInfo } from "@/pages/profile/utils";
Expand Down
214 changes: 124 additions & 90 deletions src/pages/moment/Reply.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,113 +1,138 @@
<template>
<view class="background" @click="closeSelf" @touchmove.stop.prevent />
<scroll-view class="frame" scroll-y="true" @touchmove.stop>
<view class="main">
<view class="comment">
<view
:style="{
backgroundImage: 'url( ' + mainComment.user.avatarUrl + ')'
}"
class="avatar"
/>
<view class="thread">
<view class="content">
<view class="left">
<view class="upper">
<view class="username">{{ mainComment.user.nickname }}</view>
<view class="timestamp"
>· {{ displayTime(mainComment.createAt) }}
<view class="container">
<!-- 主评论 -->
<view class="main main-comment">
<view class="comment">
<view
:style="{
backgroundImage: 'url( ' + mainComment.user.avatarUrl + ')'
}"
class="avatar"
@click="toPersonInfo(mainComment.user.id)"
/>
<view class="thread">
<view class="content">
<view class="left">
<view class="upper">
<view class="username">{{ mainComment.user.nickname }}</view>
<view class="timestamp"
>· {{ displayDetailTime(mainComment.createAt) }}
</view>
</view>
<view class="lower">{{ mainComment.text }}</view>
</view>
<view class="lower">{{ mainComment.text }}</view>
</view>
<view class="right">
<view class="likes-frame" @click="likeComment(mainComment)">
<view v-if="mainComment.isLiked" class="thumb liked" />
<view v-else class="thumb" />
<view class="likes">{{ mainComment.likeCount }}</view>
<view class="right">
<view class="likes-frame" @click="likeComment(mainComment)">
<view v-if="mainComment.isLiked" class="thumb liked" />
<view v-else class="thumb" />
<view class="likes">{{ mainComment.likeCount }}</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view v-for="(comment, index) in comments" :key="index" class="reply">
<view
:style="{
backgroundImage: 'url( ' + comment.user.avatarUrl + ')'
}"
class="avatar"
style="margin-left: calc(42 / 390 * 100vw)"
/>
<view class="thread">
<view class="content">
<view class="left">
<view class="upper">
<view class="username">{{ comment.user.nickname }}</view>
<view class="timestamp"
>· {{ displayTime(comment.createAt) }}

<!-- 二级评论 -->
<view v-for="(comment, index) in comments" :key="index" class="main">
<view class="comment">
<view
:style="{
backgroundImage: 'url( ' + comment.user.avatarUrl + ')'
}"
class="avatar"
@click="toPersonInfo(comment.user.id)"
/>
<view class="thread">
<view class="content">
<view class="left">
<view class="upper">
<view class="username">
<view>{{ comment.user.nickname }}</view>
<template v-if="comment.replyUser">
<image
class="right-triangle-grey"
src="/static/images/right-triangle-grey.png"
/>
<view>{{ comment.replyUser?.nickname }}</view>
</template>
</view>
<view class="timestamp"
>· {{ displayDetailTime(comment.createAt) }}
</view>
</view>
<view class="lower" @click="onReplyComment(comment)">{{
comment.text
}}</view>
</view>
<view class="lower">{{ comment.text }}</view>
</view>
<view v-if="comment.likeCount >= 0" class="right">
<view class="likes-frame" @click="likeComment(comment)">
<view v-if="comment.isLiked" class="thumb liked" />
<view v-else class="thumb" />
<view class="likes">{{ comment.likeCount }}</view>
<view class="right">
<view class="likes-frame" @click="likeComment(comment)">
<view v-if="comment.isLiked" class="thumb liked" />
<view v-else class="thumb" />
<view class="likes">{{ comment.likeCount }}</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view
v-if="isCommentsLoaded && !allCommentsLoaded"
class="more-sub-replies"
@click="localGetCommentsData"
>
展开查看更多
<view class="down-arrow" />
</view>
</view>
</scroll-view>
</template>

<script lang="ts" setup>
import { Comment } from "@/apis/schemas";
import { displayTime } from "@/utils/time";
import { Comment, FishAward, Moment } from "@/apis/schemas";
import { displayDetailTime, displayTime } from "@/utils/time";
import { ref } from "vue";
import { getCommentsData, likeComment } from "@/pages/moment/utils";
import { onReachBottom } from "@dcloudio/uni-app";
import { getCommentsData, likeComment, likeMoment } from "@/pages/moment/utils";
import { CommentType } from "@/apis/comment/comment-interfaces";
import { EventEmitter } from "@/utils/utils";
import { toPersonInfo } from "@/pages/profile/utils";

const props = defineProps<{
mainComment: Comment;
moment?: Moment;
fishAwardEmitter: EventEmitter<FishAward>;
onReplyComment: (comment: Comment) => void;
}>();

const comments = ref<Comment[]>([]);

let allCommentsLoaded = false;
let isCommentsLoaded = true;
let allCommentsLoaded = ref(false);
let isCommentsLoaded = ref(true);
let page = 0;
const localGetCommentsData = () => {
isCommentsLoaded = false;
isCommentsLoaded.value = false;
getCommentsData({
id: props.mainComment.id,
type: CommentType.Comment,
page: page
}).then((res) => {
for (const data of res.data) {
comments.value.push(data);
}
isCommentsLoaded = true;
comments.value.push(...res.data);
isCommentsLoaded.value = true;
page += 1;
if (res.data.length < 10) allCommentsLoaded = true;
if (!res.data.length) {
allCommentsLoaded.value = true;
}
});
};

localGetCommentsData();

onReachBottom(() => {
if (isCommentsLoaded && !allCommentsLoaded) {
localGetCommentsData();
}
});

const emits = defineEmits(["closeReply"]);
const emits = defineEmits(["close"]);

function closeSelf() {
emits("closeReply");
emits("close");
}
</script>

Expand All @@ -125,7 +150,7 @@ function closeSelf() {
.frame {
overflow: scroll;
position: fixed;
bottom: 0;
bottom: 16vw;
left: 0;
width: 100vw;
max-height: 75vh;
Expand All @@ -134,10 +159,18 @@ function closeSelf() {
border-radius: 5vw 5vw 0 0;
}

.container {
padding: calc(10 / 390 * 100vw) 0;
}

.main {
padding: calc(20 / 390 * 100vw);
padding: calc(10 / 390 * 100vw) calc(20 / 390 * 100vw);
box-sizing: border-box;

&-comment {
border-bottom: 5px #eee solid;
}

.comment,
.reply {
display: flex;
Expand Down Expand Up @@ -168,6 +201,13 @@ function closeSelf() {

.username {
margin-right: calc(10 / 390 * 100vw);
display: flex;
align-items: center;
.right-triangle-grey {
width: 15rpx;
height: 15rpx;
margin: 0 5px;
}
}
}

Expand All @@ -189,13 +229,13 @@ function closeSelf() {
align-items: center;

.thumb {
background-image: url("../../static/images/like_grey_0.png");
background-image: url("/static/images/like_grey_0.png");
width: calc(12 / 390 * 100vw);
height: calc(12 / 390 * 100vw);
background-size: 100% 100%;

&.liked {
background-image: url("../../static/images/like_grey_1.png");
background-image: url("/static/images/like_grey_1.png");
}
}

Expand Down Expand Up @@ -228,30 +268,24 @@ function closeSelf() {
}
}
}

.more-sub-replies {
color: #696969;
margin-left: calc(33 / 390 * 100vw);
display: flex;
align-items: center;

.down-arrow {
background-image: url("../../static/images/down-black.png");
width: calc(8 / 390 * 100vw);
height: calc(5 / 390 * 100vw);
background-size: 100% 100%;
margin-left: calc(8 / 390 * 100vw);
}
}
}
}

.comment {
margin-bottom: calc(20 / 390 * 100vw);
}

.reply {
margin: calc(20 / 390 * 100vw) 0;
}
.more-sub-replies {
position: relative;
color: #696969;
margin-left: 0;
display: flex;
left: 50rpx;
align-items: center;
font-size: calc(12 / 390 * 100vw);

.down-arrow {
background-image: url("/static/images/down-black.png");
width: calc(8 / 390 * 100vw);
height: calc(5 / 390 * 100vw);
background-size: 100% 100%;
margin-left: calc(8 / 390 * 100vw);
}
}
</style>
Loading
Loading