feat: upvote

This commit is contained in:
KUN1007 2023-10-01 17:19:09 +08:00
parent 8a2c2acb86
commit 2fdc26d241
10 changed files with 121 additions and 21 deletions

View file

@ -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

View file

@ -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<{}>

View file

@ -29,6 +29,7 @@ export interface TopicDetail {
status: number
share: number[]
category: string[]
popularity: number
}
// 更新话题的请求数据

View file

@ -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',

View file

@ -210,6 +210,7 @@ export default {
publish: '确认发布吗?',
publishSuccess: '发布成功',
publishCancel: '取消发布',
upvote: '您确定推这个话题吗,这将会消耗您 17 萌萌点',
rewrite: '确认 Rewrite 吗?',
rewriteSuccess: 'Rewrite 成功',
rewriteCancel: '取消 Rewrite',

View file

@ -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,

View file

@ -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, /* 对移动中的元素应用的过渡 */

View file

@ -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>

View file

@ -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 ''
}

View file

@ -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;