Skip to content

Commit

Permalink
refactor: 优化样式显示
Browse files Browse the repository at this point in the history
  • Loading branch information
@Lansongxx
Lansongxx committed Apr 16, 2024
1 parent 26dad6b commit 97ed333
Show file tree
Hide file tree
Showing 6 changed files with 62 additions and 7 deletions.
1 change: 1 addition & 0 deletions src/components/search.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ watch(() => route.params.keyword, (value) => {
}
i {
cursor: pointer;
font-size: 20px;
color: rgb(107, 167, 232);
}
Expand Down
26 changes: 25 additions & 1 deletion src/utils/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -297,6 +297,7 @@ export const likeComment = async (comment: Comment) => {
relationType: RelationType.Like,
}).then(() => {
comment.commentRelation.liked = true
comment.commentRelation.hated = false
comment.like++
})
}
Expand All @@ -310,4 +311,27 @@ export const unLikeComment = async (comment: Comment) => {
comment.commentRelation.liked = false
comment.like--
})
}
}

export const hateComment = async(comment: Comment) => {
await CreateRelation({
toId: comment.commentId,
toType: TargetType.Comment,
relationType: RelationType.Hate,
}).then(() => {
comment.commentRelation.hated = true
if(comment.commentRelation.liked) comment.like --
comment.commentRelation.liked = false
})
}


export const unHateComment = async(comment: Comment) => {
await DeleteRelation({
toId: comment.commentId,
toType: TargetType.Comment,
relationType: RelationType.Hate,
}).then(() => {
comment.commentRelation.hated = false
})
}
38 changes: 32 additions & 6 deletions src/views/posts/comment.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,21 @@
<i class="iconfont icon-appreciate_light"></i>
<span>{{ commentBlock.comment.like }}</span>
</span>
<span
<span
class="disagree"
v-if="!commentBlock.comment.commentRelation.hated"
@click="hateComment(commentBlock.comment)"
>
<i class="iconfont icon-oppose_light"></i>
</span>
<span
class="disagree-like"
v-if="commentBlock.comment.commentRelation.hated"
@click="unHateComment(commentBlock.comment)"
>
<i class="iconfont icon-oppose_light"></i>
</span>
<span
class="reply-btn"
@click="replyComment(
commentBlock.comment.commentId,
Expand All @@ -57,7 +71,7 @@
commentBlock.comment.author.name
)">回复
</span>
<span class="delete-reply-btn" @click="deleteComment(commentBlock.comment.commentId, commentBlock.replyList.total)">删除</span>
<span class="delete-reply-btn" v-if="commentBlock.comment.author.userId === store.getUserId() || props.PostData.UserId === store.getUserId()" @click="deleteComment(commentBlock.comment.commentId, commentBlock.replyList.total)">删除</span>
</div>
<div class="reply-item" v-for="(reply, index) in commentBlock.replyList.comments" :key="index">
<div v-if="index < 3 || commentBlock.isExpand" class="reply-limit">
Expand All @@ -67,7 +81,10 @@
<div class="reply-detail">
<div class="reply">
<span class="name" v-if="reply.rootId === reply.fatherId">{{ reply.author.name }}</span>
<span class="name" v-else>{{reply.author.name}} @ {{reply.atUserId}}</span>
<span class="name" v-else>
<span @click="enterUser(reply.author.userId)">{{reply.author.name}}</span>
<span class="highlight" @click="enterUser(reply.atUser.userId)"> @{{reply.atUser.name}} :</span>
</span>
<span class="contents">{{reply.content}}</span>
</div>
<div class="footer">
Expand Down Expand Up @@ -97,7 +114,7 @@
reply.author.name
)">回复
</span>
<span class="delete-reply-btn" @click="deleteComment(reply.commentId, 0)">删除</span>
<span class="delete-reply-btn" v-if="reply.author.userId === store.getUserId() || props.PostData.UserId === store.getUserId()" @click="deleteComment(reply.commentId, 0)">删除</span>
</div>
</div>
</div>
Expand Down Expand Up @@ -148,7 +165,7 @@ import {useStore} from "@/store";
import {CreateCommentUrl, DeleteCommentUrl, GetCommentBlocksUrl } from "@/utils/consts";
import {get, post} from "@/utils/request";
import type {CommentBlock} from "@/utils/type"
import {enterUser, likeComment, turnTime, unLikeComment} from "@/utils/utils";
import {enterUser, hateComment, likeComment, turnTime, unHateComment, unLikeComment} from "@/utils/utils";
import {errorMsg} from "@/utils/message";
const store = useStore()
const commentList = ref<CommentBlock[]>([])
Expand Down Expand Up @@ -396,6 +413,7 @@ const submitComment = async (subjectId: string,rootId: string, fatherId: string,
flex-direction: column;
.name {
cursor: pointer;
font-size: 18px;
padding: 0;
margin-top: 10px;
Expand Down Expand Up @@ -427,15 +445,18 @@ const submitComment = async (subjectId: string,rootId: string, fatherId: string,
margin-right: 3px;
}
}
.disagree-like,
.agree-like {
margin-right: 10px;
cursor: pointer;
i {
color: #7baaef;
color: #0000ff;
margin-right: 3px;
}
}
}
.reply-item {
Expand Down Expand Up @@ -509,4 +530,9 @@ const submitComment = async (subjectId: string,rootId: string, fatherId: string,
.pagination-container span {
margin-right: 20px; /* 为页数信息添加一些右边距 */
}
.highlight {
color: #008ac5; /* 蓝色 */
}
</style>
1 change: 1 addition & 0 deletions src/views/posts/post-information.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@ const props = defineProps<{
display: flex;
button {
cursor: pointer;
background-color: #b0d3f8;
color: #fff;
border: none;
Expand Down
1 change: 1 addition & 0 deletions src/views/posts/post.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -496,6 +496,7 @@ const changePost = async (nowPostId: string) => {
padding: 10px;
li {
cursor: pointer;
border-bottom: 1px solid #f0f0f0;
padding-bottom: 10px;
font-size: 15px;
Expand Down
2 changes: 2 additions & 0 deletions src/views/posts/posts.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -392,6 +392,7 @@ const loadMoreComments = async () => {
}
label {
cursor: pointer;
width: 100%;
padding: 10px;
font-size: 16px;
Expand Down Expand Up @@ -844,6 +845,7 @@ const loadMoreComments = async () => {
}
.checked {
cursor: pointer;
color: #1890ff; /* 蓝色 */
}
Expand Down

0 comments on commit 97ed333

Please sign in to comment.