feat: upvote
This commit is contained in:
parent
8a2c2acb86
commit
2fdc26d241
|
@ -55,6 +55,18 @@ export async function getTopicByTidApi(
|
|||
}
|
||||
}
|
||||
|
||||
// 推话题
|
||||
export async function updateTopicUpvoteApi(
|
||||
request: Action.TopicUpvoteTopicRequestData
|
||||
): Promise<Action.TopicUpvoteTopicResponseData> {
|
||||
const queryParams = objectToQueryParams(request, 'tid')
|
||||
const url = `/topics/${request.tid}/upvote?${queryParams}`
|
||||
|
||||
const response = fetchPut<Action.TopicUpvoteTopicResponseData>(url)
|
||||
|
||||
return response
|
||||
}
|
||||
|
||||
// 点赞话题
|
||||
export async function updateTopicLikeApi(
|
||||
request: Action.TopicLikeTopicRequestData
|
||||
|
|
|
@ -2,6 +2,12 @@
|
|||
* 这是用户对话题的操作,推,点赞,点踩等
|
||||
*/
|
||||
|
||||
// 推,推操作不可撤销
|
||||
export interface TopicUpvoteTopicRequestData {
|
||||
tid: number
|
||||
to_uid: number
|
||||
}
|
||||
|
||||
// 点赞
|
||||
export interface TopicLikeTopicRequestData {
|
||||
tid: number
|
||||
|
@ -9,5 +15,8 @@ export interface TopicLikeTopicRequestData {
|
|||
isPush: boolean
|
||||
}
|
||||
|
||||
// 推话题响应数据的格式
|
||||
export type TopicUpvoteTopicResponseData = KUNGalgameResponseData<{}>
|
||||
|
||||
// 点赞话题响应数据的格式
|
||||
export type TopicLikeTopicResponseData = KUNGalgameResponseData<{}>
|
||||
|
|
|
@ -29,6 +29,7 @@ export interface TopicDetail {
|
|||
status: number
|
||||
share: number[]
|
||||
category: string[]
|
||||
popularity: number
|
||||
}
|
||||
|
||||
// 更新话题的请求数据
|
||||
|
|
|
@ -211,6 +211,8 @@ export default {
|
|||
publish: 'Confirm to publish?',
|
||||
publishSuccess: 'Publish Successfully',
|
||||
publishCancel: 'Cancel Publish',
|
||||
upvote:
|
||||
'Are you sure you want to upvote this topic? This will cost you 17 Moe Moe Points',
|
||||
rewrite: 'Confirm to Rewrite?',
|
||||
rewriteSuccess: 'Rewrite Successfully',
|
||||
rewriteCancel: 'Cancel Rewrite',
|
||||
|
|
|
@ -210,6 +210,7 @@ export default {
|
|||
publish: '确认发布吗?',
|
||||
publishSuccess: '发布成功',
|
||||
publishCancel: '取消发布',
|
||||
upvote: '您确定推这个话题吗,这将会消耗您 17 萌萌点',
|
||||
rewrite: '确认 Rewrite 吗?',
|
||||
rewriteSuccess: 'Rewrite 成功',
|
||||
rewriteCancel: '取消 Rewrite',
|
||||
|
|
|
@ -13,6 +13,9 @@ import {
|
|||
|
||||
// 点赞等动作
|
||||
import {
|
||||
updateTopicUpvoteApi,
|
||||
TopicUpvoteTopicRequestData,
|
||||
TopicUpvoteTopicResponseData,
|
||||
updateTopicLikeApi,
|
||||
TopicLikeTopicRequestData,
|
||||
TopicLikeTopicResponseData,
|
||||
|
@ -107,6 +110,18 @@ export const useKUNGalgameTopicStore = defineStore({
|
|||
return await getTopicByTidApi(tid)
|
||||
},
|
||||
|
||||
// 推话题
|
||||
async updateTopicUpvote(
|
||||
tid: number,
|
||||
toUid: number
|
||||
): Promise<TopicUpvoteTopicResponseData> {
|
||||
const requestData: TopicUpvoteTopicRequestData = {
|
||||
tid: tid,
|
||||
to_uid: toUid,
|
||||
}
|
||||
return await updateTopicUpvoteApi(requestData)
|
||||
},
|
||||
|
||||
// 点赞话题
|
||||
async updateTopicLike(
|
||||
tid: number,
|
||||
|
|
|
@ -93,11 +93,11 @@ onBeforeUnmount(() => {
|
|||
<template>
|
||||
<div class="topic-container" ref="content">
|
||||
<TransitionGroup name="list" tag="div">
|
||||
<!-- 该状态为 2 则话题处于被推状态 -->
|
||||
<!-- 热度 > 100 则话题处于被推状态 -->
|
||||
<div
|
||||
v-for="topic in topics"
|
||||
:key="topic.tid"
|
||||
:class="topic.status === 2 ? 'kungalgame-comet-surround' : ''"
|
||||
:class="topic.popularity >= 100 ? 'kungalgame-comet-surround' : ''"
|
||||
>
|
||||
<span></span>
|
||||
<span></span>
|
||||
|
@ -144,7 +144,7 @@ onBeforeUnmount(() => {
|
|||
.kungalgame-comet-surround {
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
border: 2px solid var(--kungalgame-red-2);
|
||||
border: 2px solid var(--kungalgame-red-4);
|
||||
}
|
||||
|
||||
.list-move, /* 对移动中的元素应用的过渡 */
|
||||
|
|
|
@ -37,18 +37,22 @@ const bylawPageWidth = computed(() => {
|
|||
<ul>
|
||||
<li>1. 每个注册用户初始拥有 1007 萌萌点</li>
|
||||
<li>2. 每天登录自动获得随机 1 ~ 7 萌萌点</li>
|
||||
<li>3. 话题每被点赞 1 次,获得 1 萌萌点</li>
|
||||
<li>4. 话题每被评论 1 次,获得 1 萌萌点</li>
|
||||
<li>5. 话题每被推 1 次,获得 17 萌萌点</li>
|
||||
<li>6. 每日前 7 次回复获得 1 萌萌点</li>
|
||||
<li>7. 每日前 3 次点赞获得 1 萌萌点</li>
|
||||
<li>3. 用户的话题 / 回复 / 评论被点赞,可以获得 1 萌萌点</li>
|
||||
<li>4. 有人回复用户的话题,用户将会获得 2 点萌萌点</li>
|
||||
<li>
|
||||
5. 有人评论用户的回复,楼主和被评论的回复人都会获得 1 萌萌点
|
||||
</li>
|
||||
<li>6. 用户的话题 / 回复被推,将会获得 7 点萌萌点</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 扣除方法 -->
|
||||
<div class="deduct">
|
||||
<div class="title-2">- 扣除方法</div>
|
||||
<ul>
|
||||
<li>1. 话题每被踩 1 次,扣除 3 萌萌点</li>
|
||||
<li>
|
||||
1. 用户的不萌行为,根据严重程度,将会被扣除 7, 17, 77, 177, 777
|
||||
点萌萌点
|
||||
</li>
|
||||
<li>2. 单个话题每被踩 10 次,若审核无误,扣除 100 萌萌点</li>
|
||||
<li>3. 用户推话题一次将会被扣除 17 萌萌点,可以重复推话题</li>
|
||||
</ul>
|
||||
|
|
|
@ -38,16 +38,20 @@ const {
|
|||
status,
|
||||
share,
|
||||
category,
|
||||
popularity,
|
||||
} = topicData.topicData
|
||||
|
||||
// 话题的状态
|
||||
const loliStatus = computed(() => {
|
||||
// 热度 > 100 则显示被推
|
||||
if (popularity >= 100) {
|
||||
return 'featured'
|
||||
}
|
||||
|
||||
if (status === 0) {
|
||||
return 'normal'
|
||||
} else if (status === 1) {
|
||||
return 'banned'
|
||||
} else if (status === 2) {
|
||||
return 'featured'
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
|
|
|
@ -3,6 +3,8 @@
|
|||
import { onMounted, reactive, ref } from 'vue'
|
||||
import { Icon } from '@iconify/vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
// 全局消息组件(底部)
|
||||
import { useKUNGalgameMessageStore } from '@/store/modules/message'
|
||||
// 全局消息组件(顶部)
|
||||
import message from '@/components/alert/Message'
|
||||
// throttle 函数
|
||||
|
@ -101,7 +103,7 @@ const handleClickLikeThrottled = throttle(
|
|||
? actions.likes.length + 1
|
||||
: actions.likes.length - 1
|
||||
} else {
|
||||
message('Like topic failed!', '点赞话题失败', 'error')
|
||||
message('Topic like failed!', '点赞话题失败', 'error')
|
||||
}
|
||||
},
|
||||
1007,
|
||||
|
@ -114,7 +116,50 @@ const handleClickLikeThrottled = throttle(
|
|||
}
|
||||
)
|
||||
|
||||
// 在点击事件中使用节流版本的函数
|
||||
// 推话题
|
||||
const handleClickUpvote = async () => {
|
||||
// 当前用户不可以推自己的话题
|
||||
if (currUserUid === props.master.uid) {
|
||||
message('You cannot upvote your own topic', '您不可以推自己的话题', 'warn')
|
||||
return
|
||||
}
|
||||
|
||||
// TODO: 该功能必须有错误处理
|
||||
// if (useKUNGalgameUserStore().moemoepoint < 1100) {
|
||||
// message(
|
||||
// 'Your Moe Moe Points are less than 1100, and you cannot use the upvote feature',
|
||||
// '您的萌萌点小于 1100,无法使用推功能',
|
||||
// 'warn'
|
||||
// )
|
||||
// return
|
||||
// }
|
||||
|
||||
// 调用弹窗确认
|
||||
const res = await useKUNGalgameMessageStore().alert(
|
||||
'AlertInfo.edit.upvote',
|
||||
true
|
||||
)
|
||||
|
||||
// 这里实现用户的点击确认取消逻辑
|
||||
if (res) {
|
||||
// 请求推话题的接口
|
||||
const res = await useKUNGalgameTopicStore().updateTopicUpvote(
|
||||
props.info.tid,
|
||||
props.master.uid
|
||||
)
|
||||
|
||||
if (res.code === 200) {
|
||||
// 更新推数
|
||||
actions.upvotes.length++
|
||||
|
||||
message('Topic upvote successfully', '推话题成功', 'success')
|
||||
} else {
|
||||
message('Topic upvote failed!', '推话题失败', 'error')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 点赞
|
||||
const handleClickLike = () => {
|
||||
handleClickLikeThrottled()
|
||||
}
|
||||
|
@ -178,7 +223,13 @@ onMounted(() => {
|
|||
<ul>
|
||||
<!-- 推话题 -->
|
||||
<li>
|
||||
<span class="icon"><Icon icon="bi:rocket" /></span>
|
||||
<span
|
||||
class="icon"
|
||||
:class="isActive.isUpvote ? 'active' : ''"
|
||||
@click="handleClickUpvote"
|
||||
>
|
||||
<Icon icon="bi:rocket" />
|
||||
</span>
|
||||
{{ actions.upvotes.length }}
|
||||
</li>
|
||||
<!-- 查看数量 -->
|
||||
|
@ -192,8 +243,9 @@ onMounted(() => {
|
|||
class="icon"
|
||||
:class="isActive.isLiked ? 'active' : ''"
|
||||
@click="handleClickLike"
|
||||
><Icon icon="line-md:thumbs-up-twotone"
|
||||
/></span>
|
||||
>
|
||||
<Icon icon="line-md:thumbs-up-twotone" />
|
||||
</span>
|
||||
{{ actions.likes.length }}
|
||||
</li>
|
||||
<!-- 踩 -->
|
||||
|
@ -263,11 +315,6 @@ onMounted(() => {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 激活后的样式 */
|
||||
.active {
|
||||
color: var(--kungalgame-blue-4);
|
||||
}
|
||||
|
||||
/* 底部右侧部分(回复、评论、只看、编辑) */
|
||||
.right {
|
||||
display: flex;
|
||||
|
@ -324,6 +371,11 @@ onMounted(() => {
|
|||
}
|
||||
}
|
||||
|
||||
/* 激活后的样式 */
|
||||
.active {
|
||||
color: var(--kungalgame-blue-4);
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.footer {
|
||||
flex-direction: column;
|
||||
|
|
Loading…
Reference in a new issue