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( export async function updateTopicLikeApi(
request: Action.TopicLikeTopicRequestData request: Action.TopicLikeTopicRequestData

View file

@ -2,6 +2,12 @@
* *
*/ */
// 推,推操作不可撤销
export interface TopicUpvoteTopicRequestData {
tid: number
to_uid: number
}
// 点赞 // 点赞
export interface TopicLikeTopicRequestData { export interface TopicLikeTopicRequestData {
tid: number tid: number
@ -9,5 +15,8 @@ export interface TopicLikeTopicRequestData {
isPush: boolean isPush: boolean
} }
// 推话题响应数据的格式
export type TopicUpvoteTopicResponseData = KUNGalgameResponseData<{}>
// 点赞话题响应数据的格式 // 点赞话题响应数据的格式
export type TopicLikeTopicResponseData = KUNGalgameResponseData<{}> export type TopicLikeTopicResponseData = KUNGalgameResponseData<{}>

View file

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

View file

@ -211,6 +211,8 @@ export default {
publish: 'Confirm to publish?', publish: 'Confirm to publish?',
publishSuccess: 'Publish Successfully', publishSuccess: 'Publish Successfully',
publishCancel: 'Cancel Publish', 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?', rewrite: 'Confirm to Rewrite?',
rewriteSuccess: 'Rewrite Successfully', rewriteSuccess: 'Rewrite Successfully',
rewriteCancel: 'Cancel Rewrite', rewriteCancel: 'Cancel Rewrite',

View file

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

View file

@ -13,6 +13,9 @@ import {
// 点赞等动作 // 点赞等动作
import { import {
updateTopicUpvoteApi,
TopicUpvoteTopicRequestData,
TopicUpvoteTopicResponseData,
updateTopicLikeApi, updateTopicLikeApi,
TopicLikeTopicRequestData, TopicLikeTopicRequestData,
TopicLikeTopicResponseData, TopicLikeTopicResponseData,
@ -107,6 +110,18 @@ export const useKUNGalgameTopicStore = defineStore({
return await getTopicByTidApi(tid) 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( async updateTopicLike(
tid: number, tid: number,

View file

@ -93,11 +93,11 @@ onBeforeUnmount(() => {
<template> <template>
<div class="topic-container" ref="content"> <div class="topic-container" ref="content">
<TransitionGroup name="list" tag="div"> <TransitionGroup name="list" tag="div">
<!-- 该状态为 2 则话题处于被推状态 --> <!-- 热度 > 100 则话题处于被推状态 -->
<div <div
v-for="topic in topics" v-for="topic in topics"
:key="topic.tid" :key="topic.tid"
:class="topic.status === 2 ? 'kungalgame-comet-surround' : ''" :class="topic.popularity >= 100 ? 'kungalgame-comet-surround' : ''"
> >
<span></span> <span></span>
<span></span> <span></span>
@ -144,7 +144,7 @@ onBeforeUnmount(() => {
.kungalgame-comet-surround { .kungalgame-comet-surround {
padding: 0; padding: 0;
flex-shrink: 0; flex-shrink: 0;
border: 2px solid var(--kungalgame-red-2); border: 2px solid var(--kungalgame-red-4);
} }
.list-move, /* 对移动中的元素应用的过渡 */ .list-move, /* 对移动中的元素应用的过渡 */

View file

@ -37,18 +37,22 @@ const bylawPageWidth = computed(() => {
<ul> <ul>
<li>1. 每个注册用户初始拥有 1007 萌萌点</li> <li>1. 每个注册用户初始拥有 1007 萌萌点</li>
<li>2. 每天登录自动获得随机 1 ~ 7 萌萌点</li> <li>2. 每天登录自动获得随机 1 ~ 7 萌萌点</li>
<li>3. 话题每被点赞 1 获得 1 萌萌点</li> <li>3. 用户的话题 / 回复 / 评论被点赞可以获得 1 萌萌点</li>
<li>4. 话题每被评论 1 获得 1 萌萌点</li> <li>4. 有人回复用户的话题用户将会获得 2 点萌萌点</li>
<li>5. 话题每被推 1 获得 17 萌萌点</li> <li>
<li>6. 每日前 7 次回复获得 1 萌萌点</li> 5. 有人评论用户的回复楼主和被评论的回复人都会获得 1 萌萌点
<li>7. 每日前 3 次点赞获得 1 萌萌点</li> </li>
<li>6. 用户的话题 / 回复被推将会获得 7 点萌萌点</li>
</ul> </ul>
</div> </div>
<!-- 扣除方法 --> <!-- 扣除方法 -->
<div class="deduct"> <div class="deduct">
<div class="title-2">- 扣除方法</div> <div class="title-2">- 扣除方法</div>
<ul> <ul>
<li>1. 话题每被踩 1 扣除 3 萌萌点</li> <li>
1. 用户的不萌行为根据严重程度将会被扣除 7, 17, 77, 177, 777
点萌萌点
</li>
<li>2. 单个话题每被踩 10 若审核无误扣除 100 萌萌点</li> <li>2. 单个话题每被踩 10 若审核无误扣除 100 萌萌点</li>
<li>3. 用户推话题一次将会被扣除 17 萌萌点可以重复推话题</li> <li>3. 用户推话题一次将会被扣除 17 萌萌点可以重复推话题</li>
</ul> </ul>

View file

@ -38,16 +38,20 @@ const {
status, status,
share, share,
category, category,
popularity,
} = topicData.topicData } = topicData.topicData
// //
const loliStatus = computed(() => { const loliStatus = computed(() => {
// > 100
if (popularity >= 100) {
return 'featured'
}
if (status === 0) { if (status === 0) {
return 'normal' return 'normal'
} else if (status === 1) { } else if (status === 1) {
return 'banned' return 'banned'
} else if (status === 2) {
return 'featured'
} else { } else {
return '' return ''
} }

View file

@ -3,6 +3,8 @@
import { onMounted, reactive, ref } from 'vue' import { onMounted, reactive, ref } from 'vue'
import { Icon } from '@iconify/vue' import { Icon } from '@iconify/vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
//
import { useKUNGalgameMessageStore } from '@/store/modules/message'
// //
import message from '@/components/alert/Message' import message from '@/components/alert/Message'
// throttle // throttle
@ -101,7 +103,7 @@ const handleClickLikeThrottled = throttle(
? actions.likes.length + 1 ? actions.likes.length + 1
: actions.likes.length - 1 : actions.likes.length - 1
} else { } else {
message('Like topic failed!', '点赞话题失败', 'error') message('Topic like failed!', '点赞话题失败', 'error')
} }
}, },
1007, 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 = () => { const handleClickLike = () => {
handleClickLikeThrottled() handleClickLikeThrottled()
} }
@ -178,7 +223,13 @@ onMounted(() => {
<ul> <ul>
<!-- 推话题 --> <!-- 推话题 -->
<li> <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 }} {{ actions.upvotes.length }}
</li> </li>
<!-- 查看数量 --> <!-- 查看数量 -->
@ -192,8 +243,9 @@ onMounted(() => {
class="icon" class="icon"
:class="isActive.isLiked ? 'active' : ''" :class="isActive.isLiked ? 'active' : ''"
@click="handleClickLike" @click="handleClickLike"
><Icon icon="line-md:thumbs-up-twotone" >
/></span> <Icon icon="line-md:thumbs-up-twotone" />
</span>
{{ actions.likes.length }} {{ actions.likes.length }}
</li> </li>
<!-- --> <!-- -->
@ -263,11 +315,6 @@ onMounted(() => {
cursor: pointer; cursor: pointer;
} }
/* 激活后的样式 */
.active {
color: var(--kungalgame-blue-4);
}
/* 底部右侧部分(回复、评论、只看、编辑) */ /* 底部右侧部分(回复、评论、只看、编辑) */
.right { .right {
display: flex; display: flex;
@ -324,6 +371,11 @@ onMounted(() => {
} }
} }
/* 激活后的样式 */
.active {
color: var(--kungalgame-blue-4);
}
@media (max-width: 700px) { @media (max-width: 700px) {
.footer { .footer {
flex-direction: column; flex-direction: column;