msb-public
/
paopao-ce
mirror of https://github.com/rocboss/paopao-ce
1
0
Code Issues Projects Releases Wiki Activity

add comment upvote feature support (40%)

Browse Source
pull/275/head
Michael Li 2 years ago
parent 30749adb11
commit 4506ecae90
No known key found for this signature in database
3 changed files with 103 additions and 35 deletions
Show Stats Download Patch File Download Diff File

7
web/src/components/comment-item.vue
Unescape View File

@ -25,12 +25,6 @@
<div class="opt-wrap">
<span class="timestamp">
{{ comment.ip_loc}}
<!-- {{
comment.ip_loc
? comment.ip_loc + ' · '
: comment.ip_loc
}}
{{ formatPrettyTime(comment.created_on, store.state.collapsedLeft) }} -->
</span>
<n-popconfirm
@ -104,7 +98,6 @@
import { ref, computed } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { formatPrettyTime } from '@/utils/formatTime';
import { parsePostTag } from '@/utils/content';
import { Trash } from '@vicons/tabler';
import { deleteComment } from '@/api/post';

60
web/src/components/compose-reply.vue
Unescape View File

@ -5,22 +5,41 @@
{{ formatPrettyTime(timestamp, store.state.collapsedLeft) }}
</span>
<div
v-if="!store.state.userLogined"
class="action-item"
>
<n-icon size="medium">
<thumb-up-outlined/>
</n-icon>
<span class="upvote-count">{{ thumbsUpCount }}</span>
</div>
<div
v-if="store.state.userLogined"
class="action-item hover"
@click.stop=""
@click.stop="handleThumbsUp"
>
<n-icon size="medium">
<thumb-up-outlined v-if="!hasThumbsUp" />
<thumb-up-twotone v-if="hasThumbsUp" color="#18a058" />
</n-icon>
<span class="upvote-count">{{ thumbsUpCount }}</span>
</div>
<div
v-if="!store.state.userLogined"
class="action-item"
>
<n-icon size="medium">
<thumb-up-outlined v-if="!hasUpvote" />
<thumb-up-twotone v-if="hasUpvote" color="#18a058" />
<thumb-down-outlined />
</n-icon>
<span class="upvote-count">1000</span>
</div>
<div
v-if="store.state.userLogined"
class="action-item hover"
@click.stop=""
@click.stop="handleThumbsDown"
>
<n-icon size="medium">
<thumb-down-outlined v-if="!hasDownvote" />
<thumb-down-twotone v-if="hasDownvote" color="#18a058" />
<thumb-down-outlined v-if="!hasThumbsDown" />
<thumb-down-twotone v-if="hasThumbsDown" color="#18a058" />
</n-icon>
</div>
<span class="show" v-if="store.state.userLogined && !showReply" @click="switchReply(true)">
@ -73,8 +92,10 @@ import {
ThumbDownOutlined,
} from '@vicons/material';
const hasUpvote = ref(false)
const hasDownvote = ref(true)
const hasThumbsUp = ref(false)
const hasThumbsDown = ref(false)
const thumbsUpCount = ref(0)
const props = withDefaults(defineProps<{
timestamp: number,
commentId: number,
@ -95,6 +116,27 @@ const inputInstRef = ref<InputInst>();
const showReply = ref(false);
const replyContent = ref('');
const submitting = ref(false);
const handleThumbsUp = () => {
// TODO
hasThumbsUp.value = !hasThumbsUp.value
if (hasThumbsUp.value) {
thumbsUpCount.value++
hasThumbsDown.value = false
} else {
thumbsUpCount.value--
}
};
const handleThumbsDown = () => {
// TODO
hasThumbsDown.value = !hasThumbsDown.value
if (hasThumbsDown.value) {
if (hasThumbsUp.value) {
thumbsUpCount.value--
hasThumbsUp.value = false
}
}
};
const switchReply = (status: boolean) => {
showReply.value = status;

67
web/src/components/reply-item.vue
Unescape View File

@ -28,12 +28,6 @@
</div>
<div class="timestamp">
{{ props.reply.ip_loc }}
<!-- {{
props.reply.ip_loc
? props.reply.ip_loc + ' · '
: props.reply.ip_loc
}} -->
<!-- {{ formatPrettyTime(props.reply.created_on, store.state.collapsedLeft) }} -->
<n-popconfirm
v-if="
store.state.userInfo.is_admin ||
@ -64,22 +58,42 @@
{{ formatPrettyTime(props.reply.created_on, store.state.collapsedLeft) }}
</span>
<div
class="action-item hover"
v-if="!store.state.userLogined"
class="action-item"
@click.stop=""
>
<n-icon size="medium">
<thumb-up-outlined v-if="!hasUpvote" />
<thumb-up-twotone v-if="hasUpvote" color="#18a058" />
<thumb-up-outlined/>
</n-icon>
<span class="upvote-count">100</span>
<span class="upvote-count">{{ thumbsUpCount }}</span>
</div>
<div
v-if="store.state.userLogined"
class="action-item hover"
@click.stop=""
@click.stop="handleThumbsUp"
>
<n-icon size="medium">
<thumb-up-outlined v-if="!hasThumbsUp" />
<thumb-up-twotone v-if="hasThumbsUp" color="#18a058" />
</n-icon>
<span class="upvote-count">{{ thumbsUpCount }}</span>
</div>
<div
v-if="!store.state.userLogined"
class="action-item"
>
<n-icon size="medium">
<thumb-down-outlined />
</n-icon>
</div>
<div
v-if="store.state.userLogined"
class="action-item hover"
@click.stop="handleThumbsDown"
>
<n-icon size="medium">
<thumb-down-outlined v-if="!hasDownvote" />
<thumb-down-twotone v-if="hasDownvote" color="#18a058" />
<thumb-down-outlined v-if="!hasThumbsDown" />
<thumb-down-twotone v-if="hasThumbsDown" color="#18a058" />
</n-icon>
</div>
<span v-if="store.state.userLogined" class="show" @click="focusReply"> 回复 </span>
@ -101,8 +115,9 @@ import {
ThumbDownOutlined,
} from '@vicons/material';
const hasUpvote = ref(true)
const hasDownvote = ref(false)
const hasThumbsUp = ref(false)
const hasThumbsDown = ref(false)
const thumbsUpCount = ref(0)
const props = withDefaults(defineProps<{
reply: Item.ReplyProps,
@ -113,6 +128,26 @@ const emit = defineEmits<{
(e: 'reload'): void
}>();
const handleThumbsUp = () => {
// TODO
hasThumbsUp.value = !hasThumbsUp.value
if (hasThumbsUp.value) {
thumbsUpCount.value++
hasThumbsDown.value = false
} else {
thumbsUpCount.value--
}
};
const handleThumbsDown = () => {
// TODO
hasThumbsDown.value = !hasThumbsDown.value
if (hasThumbsDown.value) {
if (hasThumbsUp.value) {
thumbsUpCount.value--
hasThumbsUp.value = false
}
}
};
const focusReply = () => {
emit('focusReply', props.reply);
};
@ -159,8 +194,6 @@ const execDelAction = () => {
.timestamp {
opacity: 0.75;
text-align: right;
display: flex;
align-items: center;
max-width: 50%;
overflow: hidden;
text-overflow: ellipsis;

Write Preview
Loading…
Cancel
Save