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(
|
export async function updateTopicLikeApi(
|
||||||
request: Action.TopicLikeTopicRequestData
|
request: Action.TopicLikeTopicRequestData
|
||||||
|
|
|
@ -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<{}>
|
||||||
|
|
|
@ -29,6 +29,7 @@ export interface TopicDetail {
|
||||||
status: number
|
status: number
|
||||||
share: number[]
|
share: number[]
|
||||||
category: string[]
|
category: string[]
|
||||||
|
popularity: number
|
||||||
}
|
}
|
||||||
|
|
||||||
// 更新话题的请求数据
|
// 更新话题的请求数据
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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, /* 对移动中的元素应用的过渡 */
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 ''
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue