pref: rebuild topic footer
This commit is contained in:
KUN1007
parent
69b964be7f
commit
1a48556048
|
|
@ -211,8 +211,10 @@ export default {
|
|||
publish: 'Confirm to publish?',
|
||||
publishSuccess: 'Publish Successfully',
|
||||
publishCancel: 'Cancel Publish',
|
||||
upvote:
|
||||
upvoteTopic:
|
||||
'Are you sure you want to upvote this topic? This will cost you 17 Moe Moe Points',
|
||||
upvoteReply:
|
||||
'Are you sure you want to upvote this reply? This will cost you 3 Moe Moe Points',
|
||||
rewrite: 'Confirm to Rewrite?',
|
||||
rewriteSuccess: 'Rewrite Successfully',
|
||||
rewriteCancel: 'Cancel Rewrite',
|
||||
|
|
|
|||
|
|
@ -210,7 +210,8 @@ export default {
|
|||
publish: '确认发布吗？',
|
||||
publishSuccess: '发布成功',
|
||||
publishCancel: '取消发布',
|
||||
upvote: '您确定推这个话题吗，这将会消耗您 17 萌萌点',
|
||||
upvoteTopic: '您确定推这个话题吗，这将会消耗您 17 萌萌点',
|
||||
upvoteReply: '您确定推这个回复吗，这将会消耗您 3 萌萌点',
|
||||
rewrite: '确认 Rewrite 吗？',
|
||||
rewriteSuccess: 'Rewrite 成功',
|
||||
rewriteCancel: '取消 Rewrite',
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
这是 KUNGalgame 话题展示区域楼主话题的区域，楼主的话题将会被展示在这里，位于话题展示区域最上方
|
||||
-->
|
||||
<script setup lang="ts">
|
||||
// 楼主话题的 Footer
|
||||
import MasterFooter from './MasterFooter.vue'
|
||||
// Footer
|
||||
import Footer from './footer/Footer.vue'
|
||||
// 楼主话题是否重新编辑
|
||||
import Rewrite from '../components/Rewrite.vue'
|
||||
// 楼主的信息
|
||||
|
|
@ -103,17 +103,22 @@ const loliStatus = computed(() => {
|
|||
</div>
|
||||
</div>
|
||||
<!-- 话题的点赞数等信息，被作用人就是该话题的发布人 -->
|
||||
<MasterFooter
|
||||
<Footer
|
||||
:info="{
|
||||
tid,
|
||||
rid: 0,
|
||||
views,
|
||||
likes,
|
||||
dislikes,
|
||||
upvotes,
|
||||
share,
|
||||
}"
|
||||
:topic="{ tid, title, content, tags, category }"
|
||||
:master="user"
|
||||
:content="{
|
||||
title,
|
||||
content,
|
||||
tags,
|
||||
category,
|
||||
}"
|
||||
:to-uid="user.uid"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,431 +0,0 @@
|
|||
<!-- 话题的底部区域，推话题，回复，点赞等 -->
|
||||
<script setup lang="ts">
|
||||
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 函数
|
||||
import { throttle } from '@/utils/throttle'
|
||||
|
||||
import { TopicUserInfo } from '@/api'
|
||||
|
||||
// 导入编辑界面的 store
|
||||
import { useKUNGalgameEditStore } from '@/store/modules/edit'
|
||||
// 导入话题页面 store
|
||||
import { useKUNGalgameTopicStore } from '@/store/modules/topic'
|
||||
// 导入用户的 store
|
||||
import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
|
||||
import { storeToRefs } from 'pinia'
|
||||
|
||||
// 使用编辑界面的 store
|
||||
const { topicRewrite } = storeToRefs(useKUNGalgameEditStore())
|
||||
// 使用话题页面的 store
|
||||
const { isEdit, replyDraft } = storeToRefs(useKUNGalgameTopicStore())
|
||||
// 使用路由
|
||||
const router = useRouter()
|
||||
|
||||
// 接受父组件的传值
|
||||
const props = defineProps<{
|
||||
info: {
|
||||
tid: number
|
||||
views: number
|
||||
likes: number[]
|
||||
dislikes: number[]
|
||||
upvotes: number[]
|
||||
share: number[]
|
||||
}
|
||||
topic: {
|
||||
tid: number
|
||||
title: string
|
||||
content: string
|
||||
tags: string[]
|
||||
category: string[]
|
||||
}
|
||||
master: TopicUserInfo
|
||||
}>()
|
||||
|
||||
/**
|
||||
* 这里只是简单起见，不显示重新编辑
|
||||
* 实际上如果用户自己修改了 localStorage 中保存的信息，这个验证就失效了
|
||||
* 但是修改了也没有用，验证逻辑位于后端
|
||||
*/
|
||||
// 当前登录用户的 uid
|
||||
const currUserUid = useKUNGalgameUserStore().uid
|
||||
// 话题发布者的 uid
|
||||
const masterUid = props.master.uid
|
||||
// 是否具有重新编辑的权限
|
||||
const isShowRewrite = currUserUid === masterUid
|
||||
|
||||
// footer 左侧的动作，点赞等
|
||||
const actions = reactive({
|
||||
upvotes: props.info.upvotes,
|
||||
likes: props.info.likes,
|
||||
dislikes: props.info.dislikes,
|
||||
share: props.info.share,
|
||||
})
|
||||
|
||||
// 是否已经点过赞，点过踩
|
||||
const isActive = reactive({
|
||||
isUpvote: false,
|
||||
isLiked: false,
|
||||
isDisliked: false,
|
||||
isShared: false,
|
||||
})
|
||||
|
||||
// throttle 回调函数
|
||||
const throttleCallback = () => {
|
||||
message(
|
||||
'You can only perform one operation within 1007 milliseconds',
|
||||
'您在 1007 毫秒内只能进行一次操作',
|
||||
'warn'
|
||||
)
|
||||
}
|
||||
|
||||
// throttle 函数，1007 毫秒仅会触发一次点赞
|
||||
const handleClickLikeThrottled = throttle(
|
||||
async () => {
|
||||
// 当前用户不可以给自己点赞
|
||||
if (currUserUid === masterUid) {
|
||||
message(
|
||||
'You cannot like your own topic',
|
||||
'您不可以给自己的话题点赞',
|
||||
'warn'
|
||||
)
|
||||
return
|
||||
}
|
||||
|
||||
// 切换点赞激活状态
|
||||
isActive.isLiked = !isActive.isLiked
|
||||
|
||||
const res = await useKUNGalgameTopicStore().updateTopicLike(
|
||||
props.info.tid,
|
||||
masterUid,
|
||||
isActive.isLiked
|
||||
)
|
||||
|
||||
if (res.code === 200) {
|
||||
// 更新点赞数
|
||||
actions.likes.length = isActive.isLiked
|
||||
? actions.likes.length + 1
|
||||
: actions.likes.length - 1
|
||||
} else {
|
||||
message('Topic like failed!', '点赞话题失败', 'error')
|
||||
}
|
||||
},
|
||||
1007,
|
||||
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 === masterUid) {
|
||||
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,
|
||||
masterUid
|
||||
)
|
||||
|
||||
if (res.code === 200) {
|
||||
// 更新推数
|
||||
actions.upvotes.length++
|
||||
|
||||
message('Topic upvote successfully', '推话题成功', 'success')
|
||||
} else {
|
||||
message('Topic upvote failed!', '推话题失败', 'error')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 点赞
|
||||
const handleClickLike = () => {
|
||||
handleClickLikeThrottled()
|
||||
}
|
||||
|
||||
// 点踩
|
||||
const handleClickDislike = () => {
|
||||
handleClickDislikeThrottled()
|
||||
}
|
||||
|
||||
// 点击回复打开回复面板
|
||||
const handleClickReply = async () => {
|
||||
// 保存必要信息，以便发表回复
|
||||
replyDraft.value.tid = props.info.tid
|
||||
// 被回复人就是发表人的 uid
|
||||
replyDraft.value.to_uid = masterUid
|
||||
// 楼主的 floor 就是 0
|
||||
replyDraft.value.to_floor = 0
|
||||
// 打开回复面板
|
||||
isEdit.value = true
|
||||
}
|
||||
|
||||
// 重新编辑
|
||||
const handleClickRewrite = () => {
|
||||
// 保存数据
|
||||
topicRewrite.value.tid = props.topic.tid
|
||||
topicRewrite.value.title = props.topic.title
|
||||
topicRewrite.value.content = props.topic.content
|
||||
topicRewrite.value.tags = props.topic.tags
|
||||
topicRewrite.value.category = props.topic.category
|
||||
|
||||
// 设置正在重新编辑状态为真
|
||||
topicRewrite.value.isTopicRewriting = true
|
||||
|
||||
// 跳转到编辑界面
|
||||
router.push({ name: 'Edit' })
|
||||
}
|
||||
|
||||
// 初始化按钮的状态，是否已点赞等
|
||||
onMounted(() => {
|
||||
// 已经推过
|
||||
if (props.info.upvotes.includes(currUserUid)) {
|
||||
isActive.isUpvote = true
|
||||
}
|
||||
|
||||
// 已经点赞
|
||||
if (props.info.likes.includes(currUserUid)) {
|
||||
isActive.isLiked = true
|
||||
}
|
||||
|
||||
// 已经点踩
|
||||
if (props.info.dislikes.includes(currUserUid)) {
|
||||
isActive.isDisliked = true
|
||||
}
|
||||
|
||||
// 已经分享
|
||||
if (props.info.share.includes(currUserUid)) {
|
||||
isActive.isShared = true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 楼主话题底部 -->
|
||||
<div class="footer">
|
||||
<!-- 底部左侧部分（点赞、推话题、踩） -->
|
||||
<div class="left">
|
||||
<ul>
|
||||
<!-- 推话题 -->
|
||||
<li>
|
||||
<span
|
||||
class="icon"
|
||||
:class="isActive.isUpvote ? 'active' : ''"
|
||||
@click="handleClickUpvote"
|
||||
>
|
||||
<Icon icon="bi:rocket" />
|
||||
</span>
|
||||
{{ actions.upvotes.length }}
|
||||
</li>
|
||||
<!-- 查看数量 -->
|
||||
<li>
|
||||
<span class="icon"><Icon icon="ic:outline-remove-red-eye" /></span>
|
||||
{{ info.views }}
|
||||
</li>
|
||||
<!-- 点赞 -->
|
||||
<li>
|
||||
<span
|
||||
class="icon"
|
||||
:class="isActive.isLiked ? 'active' : ''"
|
||||
@click="handleClickLike"
|
||||
>
|
||||
<Icon icon="line-md:thumbs-up-twotone" />
|
||||
</span>
|
||||
{{ actions.likes.length }}
|
||||
</li>
|
||||
<!-- 踩 -->
|
||||
<li>
|
||||
<span
|
||||
class="icon"
|
||||
:class="isActive.isDisliked ? 'active' : ''"
|
||||
@click="handleClickDislike"
|
||||
>
|
||||
<Icon icon="line-md:thumbs-down-twotone" />
|
||||
</span>
|
||||
{{ actions.dislikes.length }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 底部右侧部分（回复、评论、只看、编辑） -->
|
||||
<div class="right">
|
||||
<div @click="handleClickReply" class="reply">
|
||||
{{ $tm('topic.content.reply') }}
|
||||
</div>
|
||||
|
||||
<!-- 分享 -->
|
||||
<span class="icon"><Icon icon="majesticons:share-line" /></span>
|
||||
|
||||
<!-- 只看 -->
|
||||
<span class="icon"><Icon icon="ph:user-focus-duotone" /></span>
|
||||
|
||||
<!-- 编辑 -->
|
||||
<span v-if="isShowRewrite" @click="handleClickRewrite" class="icon">
|
||||
<Icon icon="line-md:pencil-twotone-alt" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 楼主话题底部 */
|
||||
.footer {
|
||||
padding: 10px 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
/* 底部左侧部分（点赞、推话题、踩） */
|
||||
.left ul {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--kungalgame-font-color-3);
|
||||
li {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
margin: 17px;
|
||||
margin-right: 0;
|
||||
span {
|
||||
display: flex;
|
||||
margin-right: 3px;
|
||||
}
|
||||
&:nth-child(1) span {
|
||||
color: var(--kungalgame-red-4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 图标字体的样式 */
|
||||
.icon {
|
||||
font-size: 24px;
|
||||
color: var(--kungalgame-font-color-2);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 底部右侧部分（回复、评论、只看、编辑） */
|
||||
.right {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
span {
|
||||
display: flex;
|
||||
margin-right: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
.reply {
|
||||
position: relative;
|
||||
width: 70px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
color: var(--kungalgame-blue-4);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
&:hover {
|
||||
color: var(--kungalgame-pink-4);
|
||||
|
||||
&::before {
|
||||
transition: width 0.2s, height 0.2s, border-bottom-color 0s;
|
||||
transition-delay: 0.2s, 0s, 0.2s;
|
||||
width: 70px;
|
||||
height: 30px;
|
||||
border-left: 2px solid var(--kungalgame-pink-4);
|
||||
border-bottom: 2px solid var(--kungalgame-pink-4);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transition: width 0.2s, height 0.2s, border-right-color 0.2s;
|
||||
transition-delay: 0s, 0.2s, 0.2s;
|
||||
width: 70px;
|
||||
height: 30px;
|
||||
border-top: 2px solid var(--kungalgame-pink-4);
|
||||
border-right: 2px solid var(--kungalgame-pink-4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 激活后的样式 */
|
||||
.active {
|
||||
color: var(--kungalgame-blue-4);
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.footer {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
147
src/views/topic/components/footer/Dislike.vue
Normal file
147
src/views/topic/components/footer/Dislike.vue
Normal file
|
|
@ -0,0 +1,147 @@
|
|||
<!-- 话题的底部区域，推话题，回复，点赞等 -->
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { Icon } from '@iconify/vue'
|
||||
// 全局消息组件（顶部）
|
||||
import message from '@/components/alert/Message'
|
||||
// throttle 函数
|
||||
import { throttle } from '@/utils/throttle'
|
||||
|
||||
// 导入话题页面 store
|
||||
import { useKUNGalgameTopicStore } from '@/store/modules/topic'
|
||||
|
||||
// 接受父组件的传值
|
||||
const props = defineProps<{
|
||||
uid: number
|
||||
tid: number
|
||||
rid: number
|
||||
dislikes: number[]
|
||||
toUid: number
|
||||
}>()
|
||||
|
||||
const dislikesArray = ref(props.dislikes)
|
||||
const isDisliked = ref(false)
|
||||
|
||||
// throttle 回调函数
|
||||
const throttleCallback = () => {
|
||||
message(
|
||||
'You can only perform one operation within 1007 milliseconds',
|
||||
'您在 1007 毫秒内只能进行一次操作',
|
||||
'warn'
|
||||
)
|
||||
}
|
||||
|
||||
// 点踩
|
||||
const dislikeOperation = async (
|
||||
tid: number,
|
||||
rid: number,
|
||||
toUid: number,
|
||||
isPush: boolean
|
||||
) => {
|
||||
// rid 为零表示点赞的是楼主的话题
|
||||
const isMasterTopic = rid === 0
|
||||
if (isMasterTopic) {
|
||||
return await useKUNGalgameTopicStore().updateTopicDislike(
|
||||
tid,
|
||||
toUid,
|
||||
isPush
|
||||
)
|
||||
} else {
|
||||
return await useKUNGalgameTopicStore().updateReplyDislike(
|
||||
tid,
|
||||
toUid,
|
||||
rid,
|
||||
isPush
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// throttle 函数，1007 毫秒仅会触发一次点踩
|
||||
const handleClickDislikeThrottled = throttle(
|
||||
async () => {
|
||||
// 当前用户不可以给自己点赞
|
||||
if (props.uid === props.toUid) {
|
||||
message('You cannot dislike yourself', '您不可以给自己点踩', 'warn')
|
||||
return
|
||||
}
|
||||
|
||||
// 切换点赞激活状态
|
||||
isDisliked.value = !isDisliked.value
|
||||
|
||||
const res = await dislikeOperation(
|
||||
props.tid,
|
||||
props.rid,
|
||||
props.toUid,
|
||||
isDisliked.value
|
||||
)
|
||||
|
||||
if (res.code === 200) {
|
||||
// 更新点踩数
|
||||
dislikesArray.value.length = isDisliked.value
|
||||
? dislikesArray.value.length + 1
|
||||
: dislikesArray.value.length - 1
|
||||
} else {
|
||||
message('Dislike failed!', '点踩失败', 'error')
|
||||
}
|
||||
},
|
||||
1007,
|
||||
throttleCallback
|
||||
)
|
||||
|
||||
// 点踩
|
||||
const handleClickDislike = () => {
|
||||
handleClickDislikeThrottled()
|
||||
}
|
||||
|
||||
// 初始化按钮的状态
|
||||
onMounted(() => {
|
||||
// 已经点踩
|
||||
if (props.dislikes.includes(props.uid)) {
|
||||
isDisliked.value = true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 踩 -->
|
||||
<li>
|
||||
<span
|
||||
class="icon"
|
||||
:class="isDisliked ? 'active' : ''"
|
||||
@click="handleClickDislike"
|
||||
>
|
||||
<Icon icon="line-md:thumbs-down-twotone" />
|
||||
</span>
|
||||
{{ dislikes.length }}
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
li {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
margin: 17px;
|
||||
margin-right: 0;
|
||||
span {
|
||||
display: flex;
|
||||
margin-right: 3px;
|
||||
}
|
||||
&:nth-child(1) span {
|
||||
color: var(--kungalgame-red-4);
|
||||
}
|
||||
}
|
||||
|
||||
/* 图标字体的样式 */
|
||||
.icon {
|
||||
font-size: 24px;
|
||||
color: var(--kungalgame-font-color-2);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 激活后的样式 */
|
||||
.active {
|
||||
color: var(--kungalgame-blue-4);
|
||||
}
|
||||
</style>
|
||||
263
src/views/topic/components/footer/Footer.vue
Normal file
263
src/views/topic/components/footer/Footer.vue
Normal file
|
|
@ -0,0 +1,263 @@
|
|||
<!-- 话题的底部区域，推话题，回复，点赞等 -->
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
// 推组件
|
||||
import Upvote from './Upvote.vue'
|
||||
// 点赞组件
|
||||
import Like from './Like.vue'
|
||||
// 踩组件
|
||||
import Dislike from './Dislike.vue'
|
||||
|
||||
// 导入编辑界面的 store
|
||||
import { useKUNGalgameEditStore } from '@/store/modules/edit'
|
||||
// 导入话题页面 store
|
||||
import { useKUNGalgameTopicStore } from '@/store/modules/topic'
|
||||
// 导入用户的 store
|
||||
import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
|
||||
import { storeToRefs } from 'pinia'
|
||||
|
||||
// 使用编辑界面的 store
|
||||
const { topicRewrite } = storeToRefs(useKUNGalgameEditStore())
|
||||
// 使用话题页面的 store
|
||||
const { isEdit, replyDraft } = storeToRefs(useKUNGalgameTopicStore())
|
||||
// 使用路由
|
||||
const router = useRouter()
|
||||
|
||||
// 接受父组件的传值
|
||||
const props = defineProps<{
|
||||
info: {
|
||||
tid: number
|
||||
rid: number
|
||||
views: number
|
||||
likes: number[]
|
||||
dislikes: number[]
|
||||
upvotes: number[]
|
||||
}
|
||||
content: {
|
||||
title: string
|
||||
content: string
|
||||
tags: string[]
|
||||
category: string[]
|
||||
}
|
||||
toUid: number
|
||||
}>()
|
||||
|
||||
/**
|
||||
* 这里只是简单起见，不显示重新编辑
|
||||
* 实际上如果用户自己修改了 localStorage 中保存的信息，这个验证就失效了
|
||||
* 但是修改了也没有用，验证逻辑位于后端
|
||||
*/
|
||||
// 当前登录用户的 uid
|
||||
const currUserUid = useKUNGalgameUserStore().uid
|
||||
// 话题 / 回复发布者的 uid
|
||||
const masterUid = props.toUid
|
||||
// 是否具有重新编辑的权限
|
||||
const isShowRewrite = currUserUid === masterUid
|
||||
|
||||
// 点击回复打开回复面板
|
||||
const handleClickReply = async () => {
|
||||
// 保存必要信息，以便发表回复
|
||||
replyDraft.value.tid = props.info.tid
|
||||
// 被回复人就是发表人的 uid
|
||||
replyDraft.value.to_uid = masterUid
|
||||
// 楼主的 floor 就是 0
|
||||
replyDraft.value.to_floor = 0
|
||||
// 打开回复面板
|
||||
isEdit.value = true
|
||||
}
|
||||
|
||||
// 重新编辑
|
||||
const handleClickRewrite = () => {
|
||||
// 保存数据
|
||||
topicRewrite.value.tid = props.info.tid
|
||||
topicRewrite.value.title = props.content.title
|
||||
topicRewrite.value.content = props.content.content
|
||||
topicRewrite.value.tags = props.content.tags
|
||||
topicRewrite.value.category = props.content.category
|
||||
|
||||
// 设置正在重新编辑状态为真
|
||||
topicRewrite.value.isTopicRewriting = true
|
||||
|
||||
// 跳转到编辑界面
|
||||
router.push({ name: 'Edit' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 楼主话题底部 -->
|
||||
<div class="footer">
|
||||
<!-- 底部左侧部分（点赞、推话题、踩） -->
|
||||
<div class="left">
|
||||
<ul>
|
||||
<!-- 推话题 -->
|
||||
<Upvote
|
||||
:uid="currUserUid"
|
||||
:tid="props.info.tid"
|
||||
:rid="props.info.rid"
|
||||
:upvotes="props.info.upvotes"
|
||||
:to-uid="masterUid"
|
||||
/>
|
||||
|
||||
<!-- 浏览数 -->
|
||||
<li>
|
||||
<span class="icon"><Icon icon="ic:outline-remove-red-eye" /></span>
|
||||
{{ info.views }}
|
||||
</li>
|
||||
|
||||
<!-- 点赞 -->
|
||||
<Like
|
||||
:uid="currUserUid"
|
||||
:tid="props.info.tid"
|
||||
:rid="props.info.rid"
|
||||
:likes="props.info.likes"
|
||||
:to-uid="masterUid"
|
||||
/>
|
||||
|
||||
<!-- 踩 -->
|
||||
<Dislike
|
||||
:uid="currUserUid"
|
||||
:tid="props.info.tid"
|
||||
:rid="props.info.rid"
|
||||
:dislikes="props.info.dislikes"
|
||||
:to-uid="masterUid"
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 底部右侧部分（回复、评论、只看、编辑） -->
|
||||
<div class="right">
|
||||
<div @click="handleClickReply" class="reply">
|
||||
{{ $tm('topic.content.reply') }}
|
||||
</div>
|
||||
|
||||
<!-- 分享 -->
|
||||
<span class="icon"><Icon icon="majesticons:share-line" /></span>
|
||||
|
||||
<!-- 只看 -->
|
||||
<span class="icon"><Icon icon="ph:user-focus-duotone" /></span>
|
||||
|
||||
<!-- 编辑 -->
|
||||
<span v-if="isShowRewrite" @click="handleClickRewrite" class="icon">
|
||||
<Icon icon="line-md:pencil-twotone-alt" />
|
||||
</span>
|
||||
|
||||
<!-- 回复的插槽 -->
|
||||
<span>
|
||||
<slot name="comment"></slot>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 楼主话题底部 */
|
||||
.footer {
|
||||
padding: 10px 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
/* 底部左侧部分（点赞、推话题、踩） */
|
||||
.left ul {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--kungalgame-font-color-3);
|
||||
li {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
margin: 17px;
|
||||
margin-right: 0;
|
||||
span {
|
||||
display: flex;
|
||||
margin-right: 3px;
|
||||
}
|
||||
&:nth-child(1) span {
|
||||
color: var(--kungalgame-red-4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 图标字体的样式 */
|
||||
.icon {
|
||||
font-size: 24px;
|
||||
color: var(--kungalgame-font-color-2);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 底部右侧部分（回复、评论、只看、编辑） */
|
||||
.right {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
span {
|
||||
display: flex;
|
||||
margin-right: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
.reply {
|
||||
position: relative;
|
||||
width: 70px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
color: var(--kungalgame-blue-4);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
&:hover {
|
||||
color: var(--kungalgame-pink-4);
|
||||
|
||||
&::before {
|
||||
transition: width 0.2s, height 0.2s, border-bottom-color 0s;
|
||||
transition-delay: 0.2s, 0s, 0.2s;
|
||||
width: 70px;
|
||||
height: 30px;
|
||||
border-left: 2px solid var(--kungalgame-pink-4);
|
||||
border-bottom: 2px solid var(--kungalgame-pink-4);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transition: width 0.2s, height 0.2s, border-right-color 0.2s;
|
||||
transition-delay: 0s, 0.2s, 0.2s;
|
||||
width: 70px;
|
||||
height: 30px;
|
||||
border-top: 2px solid var(--kungalgame-pink-4);
|
||||
border-right: 2px solid var(--kungalgame-pink-4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 激活后的样式 */
|
||||
.active {
|
||||
color: var(--kungalgame-blue-4);
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.footer {
|
||||
flex-direction: column;
|
||||
}
|
||||
.right {
|
||||
span:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
143
src/views/topic/components/footer/Like.vue
Normal file
143
src/views/topic/components/footer/Like.vue
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
<!-- 话题的底部区域，推话题，回复，点赞等 -->
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { Icon } from '@iconify/vue'
|
||||
// 全局消息组件（顶部）
|
||||
import message from '@/components/alert/Message'
|
||||
// throttle 函数
|
||||
import { throttle } from '@/utils/throttle'
|
||||
|
||||
// 导入话题页面 store
|
||||
import { useKUNGalgameTopicStore } from '@/store/modules/topic'
|
||||
|
||||
// 接受父组件的传值
|
||||
const props = defineProps<{
|
||||
uid: number
|
||||
tid: number
|
||||
rid: number
|
||||
likes: number[]
|
||||
toUid: number
|
||||
}>()
|
||||
|
||||
const likesArray = ref(props.likes)
|
||||
const isLiked = ref(false)
|
||||
|
||||
// throttle 回调函数
|
||||
const throttleCallback = () => {
|
||||
message(
|
||||
'You can only perform one operation within 1007 milliseconds',
|
||||
'您在 1007 毫秒内只能进行一次操作',
|
||||
'warn'
|
||||
)
|
||||
}
|
||||
|
||||
// 点赞
|
||||
const likeOperation = async (
|
||||
tid: number,
|
||||
rid: number,
|
||||
toUid: number,
|
||||
isPush: boolean
|
||||
) => {
|
||||
// rid 为零表示点赞的是楼主的话题
|
||||
const isMasterTopic = rid === 0
|
||||
if (isMasterTopic) {
|
||||
return await useKUNGalgameTopicStore().updateTopicLike(tid, toUid, isPush)
|
||||
} else {
|
||||
return await useKUNGalgameTopicStore().updateReplyLike(
|
||||
tid,
|
||||
toUid,
|
||||
rid,
|
||||
isPush
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// throttle 函数，1007 毫秒仅会触发一次点赞
|
||||
const handleClickLikeThrottled = throttle(
|
||||
async () => {
|
||||
// 当前用户不可以给自己点赞
|
||||
if (props.uid === props.toUid) {
|
||||
message('You cannot like yourself', '您不可以给自己点赞', 'warn')
|
||||
return
|
||||
}
|
||||
|
||||
// 切换点赞激活状态
|
||||
isLiked.value = !isLiked.value
|
||||
|
||||
const res = await likeOperation(
|
||||
props.tid,
|
||||
props.rid,
|
||||
props.toUid,
|
||||
isLiked.value
|
||||
)
|
||||
|
||||
if (res.code === 200) {
|
||||
// 更新点赞数
|
||||
likesArray.value.length = isLiked.value
|
||||
? likesArray.value.length + 1
|
||||
: likesArray.value.length - 1
|
||||
} else {
|
||||
message('Like failed!', '点赞失败', 'error')
|
||||
}
|
||||
},
|
||||
1007,
|
||||
throttleCallback
|
||||
)
|
||||
|
||||
// 点赞
|
||||
const handleClickLike = () => {
|
||||
handleClickLikeThrottled()
|
||||
}
|
||||
|
||||
// 初始化按钮的状态，是否已点赞等
|
||||
onMounted(() => {
|
||||
// 已经点赞
|
||||
if (props.likes.includes(props.uid)) {
|
||||
isLiked.value = true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 点赞 -->
|
||||
<li>
|
||||
<span
|
||||
class="icon"
|
||||
:class="isLiked ? 'active' : ''"
|
||||
@click="handleClickLike"
|
||||
>
|
||||
<Icon icon="line-md:thumbs-up-twotone" />
|
||||
</span>
|
||||
{{ likesArray.length }}
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
li {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
margin: 17px;
|
||||
margin-right: 0;
|
||||
span {
|
||||
display: flex;
|
||||
margin-right: 3px;
|
||||
}
|
||||
&:nth-child(1) span {
|
||||
color: var(--kungalgame-red-4);
|
||||
}
|
||||
}
|
||||
|
||||
/* 图标字体的样式 */
|
||||
.icon {
|
||||
font-size: 24px;
|
||||
color: var(--kungalgame-font-color-2);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 激活后的样式 */
|
||||
.active {
|
||||
color: var(--kungalgame-blue-4);
|
||||
}
|
||||
</style>
|
||||
146
src/views/topic/components/footer/Upvote.vue
Normal file
146
src/views/topic/components/footer/Upvote.vue
Normal file
|
|
@ -0,0 +1,146 @@
|
|||
<!-- 话题的底部区域，推话题，回复，点赞等 -->
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { Icon } from '@iconify/vue'
|
||||
// 全局消息组件（底部）
|
||||
import { useKUNGalgameMessageStore } from '@/store/modules/message'
|
||||
// 全局消息组件（顶部）
|
||||
import message from '@/components/alert/Message'
|
||||
// 导入话题页面 store
|
||||
import { useKUNGalgameTopicStore } from '@/store/modules/topic'
|
||||
|
||||
// 接受父组件的传值
|
||||
const props = defineProps<{
|
||||
uid: number
|
||||
tid: number
|
||||
rid: number
|
||||
upvotes: number[]
|
||||
toUid: number
|
||||
}>()
|
||||
|
||||
const upvotesArray = ref(props.upvotes)
|
||||
const isUpvote = ref(false)
|
||||
|
||||
// 推话题
|
||||
const upvoteTopic = async () => {
|
||||
// 调用弹窗确认
|
||||
const res = await useKUNGalgameMessageStore().alert(
|
||||
'AlertInfo.edit.upvoteTopic',
|
||||
true
|
||||
)
|
||||
|
||||
// 这里实现用户的点击确认取消逻辑
|
||||
if (res) {
|
||||
// 请求推话题的接口
|
||||
const res = await useKUNGalgameTopicStore().updateTopicUpvote(
|
||||
props.tid,
|
||||
props.toUid
|
||||
)
|
||||
|
||||
if (res.code === 200) {
|
||||
// 更新推数
|
||||
upvotesArray.value.length++
|
||||
|
||||
message('Topic upvote successfully', '推话题成功', 'success')
|
||||
} else {
|
||||
message('Topic upvote failed!', '推话题失败', 'error')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 推回复
|
||||
const upvoteReply = async () => {
|
||||
// 调用弹窗确认
|
||||
const res = await useKUNGalgameMessageStore().alert(
|
||||
'AlertInfo.edit.upvoteReply',
|
||||
true
|
||||
)
|
||||
|
||||
// 这里实现用户的点击确认取消逻辑
|
||||
if (res) {
|
||||
// 请求推话题的接口
|
||||
const res = await useKUNGalgameTopicStore().updateReplyUpvote(
|
||||
props.tid,
|
||||
props.toUid,
|
||||
props.rid
|
||||
)
|
||||
|
||||
if (res.code === 200) {
|
||||
// 更新推数
|
||||
upvotesArray.value.length++
|
||||
|
||||
message('Reply upvote successfully', '推回复成功', 'success')
|
||||
} else {
|
||||
message('Reply upvote failed!', '推回复失败', 'error')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 推
|
||||
const handleClickUpvote = async () => {
|
||||
// 当前用户不可以推自己
|
||||
if (props.uid === props.toUid) {
|
||||
message('You cannot upvote your own topic', '您不可以推自己的话题', 'warn')
|
||||
return
|
||||
}
|
||||
|
||||
// 为零是楼主的话题
|
||||
if (props.rid === 0) {
|
||||
upvoteTopic()
|
||||
} else {
|
||||
upvoteReply()
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化按钮的状态
|
||||
onMounted(() => {
|
||||
// 已经推过
|
||||
if (props.upvotes.includes(props.uid)) {
|
||||
isUpvote.value = true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 推话题 -->
|
||||
<li>
|
||||
<span
|
||||
class="icon"
|
||||
:class="isUpvote ? 'active' : ''"
|
||||
@click="handleClickUpvote"
|
||||
>
|
||||
<Icon icon="bi:rocket" />
|
||||
</span>
|
||||
{{ upvotes.length }}
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
li {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
margin: 17px;
|
||||
margin-right: 0;
|
||||
span {
|
||||
display: flex;
|
||||
margin-right: 3px;
|
||||
}
|
||||
&:nth-child(1) span {
|
||||
color: var(--kungalgame-red-4);
|
||||
}
|
||||
}
|
||||
|
||||
/* 图标字体的样式 */
|
||||
.icon {
|
||||
font-size: 24px;
|
||||
color: var(--kungalgame-font-color-2);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 激活后的样式 */
|
||||
.active {
|
||||
color: var(--kungalgame-blue-4);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -9,7 +9,7 @@ import { Icon } from '@iconify/vue'
|
|||
// 导入评论组件
|
||||
import Comments from '../comment/Comments.vue'
|
||||
// 导入 Footer 组件
|
||||
import ReplyFooter from './ReplyFooter.vue'
|
||||
import Footer from '../footer/Footer.vue'
|
||||
// 导入发布时间组件
|
||||
import Time from '../Time.vue'
|
||||
// 导入标签组件
|
||||
|
|
@ -97,25 +97,31 @@ const handleClickComment = (rid: number) => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 其它人回复的底部 -->
|
||||
<!-- info 代表 footer 的点赞等信息，master 表示当前的回复用户信息 -->
|
||||
<!-- 这里传入了回复的插槽，因为只有回复可以被评论 -->
|
||||
<ReplyFooter
|
||||
<!-- 回复没有浏览数，所以是 0，占位 -->
|
||||
<!-- title 和 category 也没有，占位 -->
|
||||
<Footer
|
||||
:info="{
|
||||
tid: reply.tid,
|
||||
rid: reply.rid,
|
||||
views: 0,
|
||||
likes: reply.likes,
|
||||
dislikes: reply.dislikes,
|
||||
upvotes: reply.upvotes,
|
||||
to_floor: reply.floor,
|
||||
}"
|
||||
:master="reply.r_user"
|
||||
:content="{
|
||||
title: '',
|
||||
content: reply.content,
|
||||
tags: reply.tags,
|
||||
category: [],
|
||||
}"
|
||||
:to-uid="reply.r_user.uid"
|
||||
>
|
||||
<template #comment>
|
||||
<span @click="handleClickComment(reply.rid)" class="icon">
|
||||
<Icon icon="fa-regular:comment-dots" />
|
||||
</span>
|
||||
</template>
|
||||
</ReplyFooter>
|
||||
</Footer>
|
||||
|
||||
<!-- 评论区域 -->
|
||||
<Comments
|
||||
|
|
|
|||
|
|
@ -1,417 +0,0 @@
|
|||
<!-- 话题的底部区域，推话题，回复，点赞等 -->
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { Icon } from '@iconify/vue'
|
||||
|
||||
import { useRouter } from 'vue-router'
|
||||
// 全局消息组件（底部）
|
||||
import { useKUNGalgameMessageStore } from '@/store/modules/message'
|
||||
// 全局消息组件（顶部）
|
||||
import message from '@/components/alert/Message'
|
||||
// throttle 函数
|
||||
import { throttle } from '@/utils/throttle'
|
||||
|
||||
import { TopicUserInfo } from '@/api'
|
||||
|
||||
// 导入编辑界面的 store
|
||||
import { useKUNGalgameEditStore } from '@/store/modules/edit'
|
||||
// 导入话题页面 store
|
||||
import { useKUNGalgameTopicStore } from '@/store/modules/topic'
|
||||
// 导入用户的 store
|
||||
import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
|
||||
import { storeToRefs } from 'pinia'
|
||||
|
||||
// 当前的话题 tid
|
||||
const tid = parseInt(useRoute().params.tid as string)
|
||||
|
||||
// 使用话题页面的 store
|
||||
const topicStore = useKUNGalgameTopicStore()
|
||||
const { isEdit, replyDraft } = storeToRefs(topicStore)
|
||||
|
||||
// 接受父组件的传值
|
||||
const props = defineProps<{
|
||||
info: {
|
||||
rid: number
|
||||
likes: number[]
|
||||
dislikes: number[]
|
||||
upvotes: number[]
|
||||
// 被回复人的 floor
|
||||
to_floor: number
|
||||
}
|
||||
master: TopicUserInfo
|
||||
}>()
|
||||
|
||||
/**
|
||||
* 这里只是简单起见，不显示重新编辑
|
||||
* 实际上如果用户自己修改了 localStorage 中保存的信息，这个验证就失效了
|
||||
* 但是修改了也没有用，验证逻辑位于后端
|
||||
*/
|
||||
// 当前登录用户的 uid
|
||||
const currUserUid = useKUNGalgameUserStore().uid
|
||||
// 话题发布者的 uid
|
||||
const masterUid = props.master.uid
|
||||
// 是否具有重新编辑的权限
|
||||
const isShowRewrite = currUserUid === masterUid
|
||||
|
||||
// footer 左侧的动作，点赞等
|
||||
const actions = reactive({
|
||||
upvotes: props.info.upvotes,
|
||||
likes: props.info.likes,
|
||||
dislikes: props.info.dislikes,
|
||||
})
|
||||
|
||||
// 是否已经点过赞，点过踩
|
||||
const isActive = reactive({
|
||||
isUpvote: false,
|
||||
isLiked: false,
|
||||
isDisliked: false,
|
||||
isShared: false,
|
||||
})
|
||||
|
||||
// throttle 回调函数
|
||||
const throttleCallback = () => {
|
||||
message(
|
||||
'You can only perform one operation within 1007 milliseconds',
|
||||
'您在 1007 毫秒内只能进行一次操作',
|
||||
'warn'
|
||||
)
|
||||
}
|
||||
|
||||
// throttle 函数，1007 毫秒仅会触发一次点赞
|
||||
const handleClickLikeThrottled = throttle(
|
||||
async () => {
|
||||
// 当前用户不可以给自己点赞
|
||||
if (currUserUid === masterUid) {
|
||||
message(
|
||||
'You cannot like your own reply',
|
||||
'您不可以给自己的回复点赞',
|
||||
'warn'
|
||||
)
|
||||
return
|
||||
}
|
||||
|
||||
// 切换点赞激活状态
|
||||
isActive.isLiked = !isActive.isLiked
|
||||
|
||||
const res = await useKUNGalgameTopicStore().updateReplyLike(
|
||||
tid,
|
||||
masterUid,
|
||||
props.info.rid,
|
||||
isActive.isLiked
|
||||
)
|
||||
|
||||
if (res.code === 200) {
|
||||
// 更新点赞数
|
||||
actions.likes.length = isActive.isLiked
|
||||
? actions.likes.length + 1
|
||||
: actions.likes.length - 1
|
||||
} else {
|
||||
message('Reply like failed!', '点赞回复失败', 'error')
|
||||
}
|
||||
},
|
||||
1007,
|
||||
throttleCallback
|
||||
)
|
||||
|
||||
// throttle 函数，1007 毫秒仅会触发一次点踩
|
||||
const handleClickDislikeThrottled = throttle(
|
||||
async () => {
|
||||
if (currUserUid === masterUid) {
|
||||
message(
|
||||
'You cannot dislike your own reply',
|
||||
'您不可以给自己的回复点踩',
|
||||
'warn'
|
||||
)
|
||||
return
|
||||
}
|
||||
|
||||
isActive.isDisliked = !isActive.isDisliked
|
||||
const res = await useKUNGalgameTopicStore().updateReplyDislike(
|
||||
tid,
|
||||
masterUid,
|
||||
props.info.rid,
|
||||
isActive.isDisliked
|
||||
)
|
||||
|
||||
if (res.code === 200) {
|
||||
// 更新点赞数
|
||||
actions.dislikes.length = isActive.isDisliked
|
||||
? actions.dislikes.length + 1
|
||||
: actions.dislikes.length - 1
|
||||
} else {
|
||||
message('Reply dislike failed!', '点踩回复失败', 'error')
|
||||
}
|
||||
},
|
||||
1007,
|
||||
throttleCallback
|
||||
)
|
||||
|
||||
// 推话题
|
||||
const handleClickUpvote = async () => {
|
||||
// 当前用户不可以推自己的话题
|
||||
if (currUserUid === masterUid) {
|
||||
message('You cannot upvote your own reply', '您不可以推自己的回复', '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().updateReplyUpvote(
|
||||
tid,
|
||||
masterUid,
|
||||
props.info.rid
|
||||
)
|
||||
|
||||
if (res.code === 200) {
|
||||
// 更新推数
|
||||
actions.upvotes.length++
|
||||
|
||||
message('Topic upvote successfully', '推话题成功', 'success')
|
||||
} else {
|
||||
message('Topic upvote failed!', '推话题失败', 'error')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 点赞
|
||||
const handleClickLike = () => {
|
||||
handleClickLikeThrottled()
|
||||
}
|
||||
|
||||
// 点踩
|
||||
const handleClickDislike = () => {
|
||||
handleClickDislikeThrottled()
|
||||
}
|
||||
|
||||
// 点击回复打开回复面板
|
||||
const handelReply = async () => {
|
||||
// 保存必要信息，以便发表回复
|
||||
replyDraft.value.tid = tid
|
||||
replyDraft.value.replyUserName = props.master.name
|
||||
replyDraft.value.to_uid = props.master.uid
|
||||
replyDraft.value.to_floor = props.info.to_floor
|
||||
|
||||
isEdit.value = true
|
||||
}
|
||||
|
||||
// 重新编辑
|
||||
const handleClickEdit = () => {}
|
||||
|
||||
// 初始化按钮的状态，是否已点赞等
|
||||
onMounted(() => {
|
||||
// 已经推过
|
||||
if (props.info.upvotes.includes(currUserUid)) {
|
||||
isActive.isUpvote = true
|
||||
}
|
||||
|
||||
// 已经点赞
|
||||
if (props.info.likes.includes(currUserUid)) {
|
||||
isActive.isLiked = true
|
||||
}
|
||||
|
||||
// 已经点踩
|
||||
if (props.info.dislikes.includes(currUserUid)) {
|
||||
isActive.isDisliked = true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 楼主话题底部 -->
|
||||
<div class="footer">
|
||||
<!-- 底部左侧部分（点赞、推话题、踩） -->
|
||||
<div class="left">
|
||||
<ul>
|
||||
<!-- 推话题 -->
|
||||
<li>
|
||||
<span
|
||||
class="icon"
|
||||
:class="isActive.isUpvote ? 'active' : ''"
|
||||
@click="handleClickUpvote"
|
||||
>
|
||||
<Icon icon="bi:rocket" />
|
||||
</span>
|
||||
{{ actions.upvotes.length }}
|
||||
</li>
|
||||
<!-- 点赞 -->
|
||||
<li>
|
||||
<span
|
||||
class="icon"
|
||||
:class="isActive.isLiked ? 'active' : ''"
|
||||
@click="handleClickLike"
|
||||
>
|
||||
<Icon icon="line-md:thumbs-up-twotone" />
|
||||
</span>
|
||||
{{ actions.likes.length }}
|
||||
</li>
|
||||
<!-- 踩 -->
|
||||
<li>
|
||||
<span
|
||||
class="icon"
|
||||
:class="isActive.isDisliked ? 'active' : ''"
|
||||
@click="handleClickDislike"
|
||||
>
|
||||
<Icon icon="line-md:thumbs-down-twotone" />
|
||||
</span>
|
||||
{{ actions.dislikes.length }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 底部右侧部分（回复、评论、只看、编辑） -->
|
||||
<div class="right">
|
||||
<ul>
|
||||
<li @click="handelReply">
|
||||
<div class="reply">
|
||||
{{ $tm('topic.content.reply') }}
|
||||
</div>
|
||||
</li>
|
||||
<!-- 分享 -->
|
||||
<li>
|
||||
<span class="icon"><Icon icon="majesticons:share-line" /></span>
|
||||
</li>
|
||||
<!-- 只看 -->
|
||||
<li>
|
||||
<span class="icon"><Icon icon="ph:user-focus-duotone" /></span>
|
||||
</li>
|
||||
<!-- 编辑 -->
|
||||
<li>
|
||||
<span @click="handleClickEdit" class="icon">
|
||||
<Icon icon="line-md:pencil-twotone-alt" />
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<!-- 回复的插槽 -->
|
||||
<li>
|
||||
<slot name="comment"></slot>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 楼主话题底部 */
|
||||
.footer {
|
||||
padding: 10px 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
/* 底部左侧部分（点赞、推话题、踩） */
|
||||
.left ul {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--kungalgame-font-color-3);
|
||||
li {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
margin: 17px;
|
||||
margin-right: 0;
|
||||
span {
|
||||
display: flex;
|
||||
margin-right: 3px;
|
||||
}
|
||||
&:nth-child(1) span {
|
||||
color: var(--kungalgame-red-4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 图标字体的样式 */
|
||||
.icon {
|
||||
font-size: 24px;
|
||||
color: var(--kungalgame-font-color-2);
|
||||
cursor: pointer;
|
||||
}
|
||||
/* 底部右侧部分（回复、评论、只看、编辑） */
|
||||
.right ul {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 10px;
|
||||
li {
|
||||
margin-right: 17px;
|
||||
span {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reply {
|
||||
position: relative;
|
||||
width: 70px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
color: var(--kungalgame-blue-4);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
&:hover {
|
||||
color: var(--kungalgame-pink-4);
|
||||
|
||||
&::before {
|
||||
transition: width 0.2s, height 0.2s, border-bottom-color 0s;
|
||||
transition-delay: 0.2s, 0s, 0.2s;
|
||||
width: 70px;
|
||||
height: 30px;
|
||||
border-left: 2px solid var(--kungalgame-pink-4);
|
||||
border-bottom: 2px solid var(--kungalgame-pink-4);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transition: width 0.2s, height 0.2s, border-right-color 0.2s;
|
||||
transition-delay: 0s, 0.2s, 0.2s;
|
||||
width: 70px;
|
||||
height: 30px;
|
||||
border-top: 2px solid var(--kungalgame-pink-4);
|
||||
border-right: 2px solid var(--kungalgame-pink-4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 激活后的样式 */
|
||||
.active {
|
||||
color: var(--kungalgame-blue-4);
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.footer {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in a new issue