jiazhizhong/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-02-19 21:41:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: render poll results with real data

Browse Source
This commit is contained in:
Tim
2025-08-31 00:14:12 +08:00
parent c6ab431c87
commit 1bf92ab1ad
1 changed files with 41 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
frontend_nuxt/pages/posts/[id]/index.vue
View File

@@ -174,7 +174,31 @@
<div v-if="poll" class="post-poll-container">
<div class="poll-top-container">
<div class="poll-options-container">
<div v-if="showPollResult" class="poll-question"></div>
<div class="poll-question">{{ poll.question }}</div>
<div v-if="showPollResult">
<div v-for="(opt, idx) in poll.options" :key="idx" class="poll-option-result">
<div class="poll-option-text">{{ opt }}</div>
<div class="poll-option-progress">
<div
class="poll-option-progress-bar"
:style="{ width: pollPercentages[idx] + '%' }"
></div>
<div class="poll-option-progress-info">
{{ pollPercentages[idx] }}% ({{ pollVotes[idx] || 0 }})
</div>
</div>
<div class="poll-participants">
<BaseImage
v-for="p in pollOptionParticipants[idx] || []"
:key="p.id"
class="poll-participant-avatar"
:src="p.avatar"
alt="avatar"
@click="gotoUser(p.id)"
/>
</div>
</div>
</div>
<div v-else>
<div
v-for="(opt, idx) in poll.options"
@@ -188,19 +212,21 @@
</div>
</div>
<div class="poll-info">
<div class="total-votes">100</div>
<div class="total-votes">{{ pollParticipants.length }}</div>
<div class="total-votes-title">投票人</div>
</div>
</div>
<div class="poll-bottom-container">
<div v-if="showPollResult" class="poll-option-button">
<div v-if="showPollResult" class="poll-option-button" @click="showPollResult = false">
<i class="fas fa-chevron-left"></i> 投票
</div>
<div v-else class="poll-option-button"><i class="fas fa-chart-bar"></i> 结果</div>
<div v-else class="poll-option-button" @click="showPollResult = true">
<i class="fas fa-chart-bar"></i> 结果
</div>
<div class="poll-left-time">
<div class="poll-left-time-title">离结束还有</div>
<div class="poll-left-time-value">12:00:00</div>
<div class="poll-left-time-value">{{ countdown }}</div>
</div>
</div>
</div>
@@ -373,6 +399,7 @@ const hasJoined = computed(() => {
return lotteryParticipants.value.some((p) => p.id === Number(authState.userId))
})
const pollParticipants = computed(() => poll.value?.participants || [])
const pollOptionParticipants = computed(() => poll.value?.optionParticipants || {})
const pollVotes = computed(() => poll.value?.votes || {})
const totalPollVotes = computed(() => Object.values(pollVotes.value).reduce((a, b) => a + b, 0))
const pollPercentages = computed(() =>
@@ -391,6 +418,9 @@ const hasVoted = computed(() => {
if (!loggedIn.value) return false
return pollParticipants.value.some((p) => p.id === Number(authState.userId))
})
watch([hasVoted, pollEnded], ([voted, ended]) => {
if (voted || ended) showPollResult.value = true
})
const currentEndTime = computed(() => {
if (lottery.value && lottery.value.endTime) return lottery.value.endTime
if (poll.value && poll.value.endTime) return poll.value.endTime
@@ -908,6 +938,7 @@ const voteOption = async (idx) => {
if (res.ok) {
toast.success('投票成功')
await refreshPost()
showPollResult.value = true
} else {
toast.error(data.error || '操作失败')
}
@@ -1293,6 +1324,11 @@ onMounted(async () => {
align-items: center;
}
.poll-option-result {
margin-bottom: 10px;
margin-right: 10px;
}
.poll-option-input {
margin-right: 10px;
width: 18px;