From 402dd5164aebe0ec153df8ba33f253b5ccda88c2 Mon Sep 17 00:00:00 2001 From: KUN1007 Date: Wed, 4 Oct 2023 22:35:25 +0800 Subject: [PATCH] feat: dislike topic --- src/api/topic/index.ts | 12 +++ src/api/topic/types/action.ts | 10 +++ src/store/modules/topic.ts | 19 ++++- src/views/topic/components/Master.vue | 3 +- src/views/topic/components/MasterFooter.vue | 89 ++++++++++++++++----- 5 files changed, 109 insertions(+), 24 deletions(-) diff --git a/src/api/topic/index.ts b/src/api/topic/index.ts index 781282f6..d5456b13 100644 --- a/src/api/topic/index.ts +++ b/src/api/topic/index.ts @@ -79,6 +79,18 @@ export async function updateTopicLikeApi( return response } +// 点踩话题 +export async function updateTopicDislikeApi( + request: Action.TopicDislikeTopicRequestData +): Promise { + const queryParams = objectToQueryParams(request, 'tid') + const url = `/topics/${request.tid}/dislike?${queryParams}` + + const response = fetchPut(url) + + return response +} + // 根据话题 tid 获取话题回复 export async function getRepliesByPidApi( request: Topic.TopicReplyRequestData diff --git a/src/api/topic/types/action.ts b/src/api/topic/types/action.ts index 4380ae83..479c18ee 100644 --- a/src/api/topic/types/action.ts +++ b/src/api/topic/types/action.ts @@ -15,8 +15,18 @@ export interface TopicLikeTopicRequestData { isPush: boolean } +// 点踩 +export interface TopicDislikeTopicRequestData { + tid: number + to_uid: number + isPush: boolean +} + // 推话题响应数据的格式 export type TopicUpvoteTopicResponseData = KUNGalgameResponseData<{}> // 点赞话题响应数据的格式 export type TopicLikeTopicResponseData = KUNGalgameResponseData<{}> + +// 点踩话题响应数据的格式 +export type TopicDislikeTopicResponseData = KUNGalgameResponseData<{}> diff --git a/src/store/modules/topic.ts b/src/store/modules/topic.ts index 0b4f12f3..2f990910 100644 --- a/src/store/modules/topic.ts +++ b/src/store/modules/topic.ts @@ -19,6 +19,9 @@ import { updateTopicLikeApi, TopicLikeTopicRequestData, TopicLikeTopicResponseData, + updateTopicDislikeApi, + TopicDislikeTopicRequestData, + TopicDislikeTopicResponseData, } from '@/api' // 回复 @@ -136,8 +139,22 @@ export const useKUNGalgameTopicStore = defineStore({ return await updateTopicLikeApi(requestData) }, + // 点踩话题 + async updateTopicDislike( + tid: number, + toUid: number, + isPush: boolean + ): Promise { + const requestData: TopicDislikeTopicRequestData = { + tid: tid, + to_uid: toUid, + isPush: isPush, + } + return await updateTopicDislikeApi(requestData) + }, + // 获取回复 - async getReplies(tid: number): Promise { + async getReplies(tid: number): Promise { // 这里的默认值用于初始化 const requestData: TopicReplyRequestData = { tid: tid, diff --git a/src/views/topic/components/Master.vue b/src/views/topic/components/Master.vue index 5c31bec0..07351495 100644 --- a/src/views/topic/components/Master.vue +++ b/src/views/topic/components/Master.vue @@ -102,7 +102,7 @@ const loliStatus = computed(() => { - + { + message( + 'You can only perform one operation within 1007 milliseconds', + '您在 1007 毫秒内只能进行一次操作', + 'warn' + ) +} + // throttle 函数，1007 毫秒仅会触发一次点赞 const handleClickLikeThrottled = throttle( async () => { // 当前用户不可以给自己点赞 - if (currUserUid === props.master.uid) { + if (currUserUid === masterUid) { message( 'You cannot like your own topic', '您不可以给自己的话题点赞', @@ -93,7 +102,7 @@ const handleClickLikeThrottled = throttle( const res = await useKUNGalgameTopicStore().updateTopicLike( props.info.tid, - props.master.uid, + masterUid, isActive.isLiked ) @@ -107,19 +116,45 @@ const handleClickLikeThrottled = throttle( } }, 1007, - () => { - message( - 'You can only perform one operation within 1007 milliseconds', - '您在 1007 毫秒内只能进行一次操作', - 'warn' + throttleCallback +) + +// throttle 函数，1007 毫秒仅会触发一次点踩 +const handleClickDislikeThrottled = throttle( + async () => { + if (currUserUid === masterUid) { + message( + 'You cannot dislike your own topic', + '您不可以给自己的话题点踩', + 'warn' + ) + return + } + + isActive.isDisliked = !isActive.isDisliked + const res = await useKUNGalgameTopicStore().updateTopicDislike( + props.info.tid, + masterUid, + isActive.isDisliked ) - } + + if (res.code === 200) { + // 更新点赞数 + actions.dislikes.length = isActive.isDisliked + ? actions.dislikes.length + 1 + : actions.dislikes.length - 1 + } else { + message('Topic dislike failed!', '点踩话题失败', 'error') + } + }, + 1007, + throttleCallback ) // 推话题 const handleClickUpvote = async () => { // 当前用户不可以推自己的话题 - if (currUserUid === props.master.uid) { + if (currUserUid === masterUid) { message('You cannot upvote your own topic', '您不可以推自己的话题', 'warn') return } @@ -145,7 +180,7 @@ const handleClickUpvote = async () => { // 请求推话题的接口 const res = await useKUNGalgameTopicStore().updateTopicUpvote( props.info.tid, - props.master.uid + masterUid ) if (res.code === 200) { @@ -164,19 +199,25 @@ const handleClickLike = () => { handleClickLikeThrottled() } +// 点踩 +const handleClickDislike = () => { + handleClickDislikeThrottled() +} + // 点击回复打开回复面板 -const handelReply = async () => { +const handleClickReply = async () => { // 保存必要信息，以便发表回复 replyDraft.value.tid = props.info.tid // 被回复人就是发表人的 uid - replyDraft.value.to_uid = props.master.uid - replyDraft.value.to_floor = props.info.to_floor - + replyDraft.value.to_uid = masterUid + // 楼主的 floor 就是 0 + replyDraft.value.to_floor = 0 + // 打开回复面板 isEdit.value = true } // 重新编辑 -const handleClickEdit = () => { +const handleClickRewrite = () => { // 保存数据 topicRewrite.value.tid = props.topic.tid topicRewrite.value.title = props.topic.title @@ -250,7 +291,13 @@ onMounted(() => {
  • - + + + {{ actions.dislikes.length }}
    • @@ -258,7 +305,7 @@ onMounted(() => {
    -
    +
    {{ $tm('topic.content.reply') }}
    @@ -269,7 +316,7 @@ onMounted(() => { - +