cnbugs/uni-halo
1
0
Fork 0
mirror of https://github.com/ialley-workshop-open/uni-halo.git synced 2026-06-11 12:49:30 +08:00
Code Issues Activity

fix: 修复投票状态显示问题

Browse Source
This commit is contained in:
小莫唐尼
2025-08-29 17:52:53 +08:00
parent a8bd121deb
commit 9ab013562d
5 changed files with 149 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/article-vote/article-vote.vue
+46 -82
View File
@@ -8,22 +8,11 @@
<view class="flex justify-between">
<view class="flex">
<tm-tags color="orange" style="min-width:40rpx;" :shadow="0" rounded size="s"
model="fill">{{ index+1 }}</tm-tags>
<tm-tags v-if="vote.spec.type==='single'" color="light-blue" :shadow="0" rounded size="s"
model="fill">单选</tm-tags>
<tm-tags v-else-if="vote.spec.type==='multiple'" color="light-blue" :shadow="0" rounded size="s"
model="fill">多选</tm-tags>
<tm-tags v-else-if="vote.spec.type==='pk'" color="light-blue" :shadow="0" rounded size="s"
model="fill">双选PK</tm-tags>
<tm-tags v-if="vote.spec._state=='已结束'" color="red" size="s" rounded :shadow="0"
model="fill">已结束</tm-tags>
<tm-tags v-else-if="vote.spec._state=='未开始'" color="orange" size="s" rounded :shadow="0"
model="fill">未开始</tm-tags>
<tm-tags v-else-if="vote.spec._state=='进行中'" color="green" size="s" rounded :shadow="0"
model="fill">进行中</tm-tags>
model="fill">{{ index + 1 }}</tm-tags>
<tm-tags color="light-blue" :shadow="0" rounded size="s"
model="fill">{{ vote.spec._uh_type }}</tm-tags>
<tm-tags :color="vote.spec._uh_state.color" size="s" rounded :shadow="0"
model="fill">{{vote.spec._uh_state.state}}</tm-tags>
</view>
<view class="flex-shrink">
<tm-button theme="light-blue" :shadow="0" dense size="s"
@@ -44,17 +33,17 @@
<!-- 单选 -->
<view v-if="vote.spec.type==='single'" class="single">
<view class="w-full flex flex-col uh-gap-8">
<template v-if="vote.spec.isVoted">
<template v-if="vote.spec.isVoted || vote.spec.hasEnded">
<view v-for="(option,optionIndex) in vote.spec.options" :key="optionIndex"
class="is-voted-item" :class="[option.checked?'selected':'']" :style="{
'--percent': option.percent + '%'
'--percent': option._uh_percent + '%'
}">
<view class="is-voted-item-content flex w-full flex-between uh-gap-4">
<view class="text-align-left flex-1 text-break">
{{option.title }}
</view>
<view class="flex-shrink ">
{{option.percent }}%
{{option._uh_percent }}%
</view>
</view>
</view>
@@ -73,17 +62,17 @@
<!-- 多选 -->
<view v-else-if="vote.spec.type==='multiple'" class="multiple">
<view class="w-full flex flex-col uh-gap-8">
<template v-if="vote.spec.isVoted">
<template v-if="vote.spec.isVoted || vote.spec.hasEnded">
<view v-for="(option,optionIndex) in vote.spec.options" :key="optionIndex"
class="is-voted-item" :class="[option.checked?'selected':'']" :style="{
'--percent': option.percent + '%'
'--percent': option._uh_percent + '%'
}">
<view class="is-voted-item-content flex w-full flex-between uh-gap-4">
<view class="text-align-left flex-1 text-break">
{{option.title }}
</view>
<view class="flex-shrink ">
{{option.percent }}%
{{option._uh_percent }}%
</view>
</view>
</view>
@@ -104,26 +93,26 @@
<view class="pk-container">
<view class="radio-item" v-for="(option,optionIndex) in vote.spec.options"
:key="optionIndex" :class="[optionIndex==0?'radio-left':'radio-right']"
:style="{width:option.percent + '%'}">
:style="{width:option._uh_percent + '%'}">
<view class="option-item"
:class="[optionIndex==0?'option-item-left':'option-item-right']">
{{option.percent }}%
{{option._uh_percent }}%
</view>
</view>
</view>
<view class="option-foot w-full flex flex-between uh-mt-12">
<view class="w-full flex flex-col uh-gap-8">
<template v-if="vote.spec.isVoted">
<template v-if="vote.spec.isVoted || vote.spec.hasEnded">
<view v-for="(option,optionIndex) in vote.spec.options" :key="optionIndex"
class="is-voted-item" :class="[option.checked?'selected':'']" :style="{
'--percent': option.percent + '%'
'--percent': option._uh_percent + '%'
}">
<view class="is-voted-item-content flex w-full flex-between uh-gap-4">
<view class="text-align-left flex-1 text-break">
{{option.title }}
</view>
<view class="flex-shrink ">
{{option.percent }}%
{{option._uh_percent }}%
</view>
</view>
</view>
@@ -162,12 +151,17 @@
</view>
<view v-if="submitForm.voteData.length!==0" class="box-border uh-mt-12 w-full uh-px-2">
<tm-button v-if="!vote.spec.canAnonymously" theme="red" :shadow="0" class="w-full" text :block="true"
:height="72" @click="handleSubmit()">不支持匿名投票(点击)</tm-button>
<tm-button v-else-if="fnCalcIsVoted()" theme="white" text :block="true" :height="72"
class="w-full">您已参与投票</tm-button>
<tm-button v-else theme="light-blue" class="w-full" :block="true" :height="72"
@click="handleSubmit()">提交投票</tm-button>
<tm-button v-if="fnCalcIsVoted()" theme="white" text :block="true" class="w-full">您已参与投票</tm-button>
<tm-button v-else-if="vote.spec._uh_state.state==='未开始'" theme="orange" text class="w-full" :height="72"
:block="true" @click="handleSubmitTip('投票未开始')">投票未开始</tm-button>
<tm-button v-else-if="vote.spec._uh_state.state==='已结束'" theme="red" text class="w-full" :height="72"
:block="true" @click="handleSubmitTip('投票已结束')">投票已结束</tm-button>
<tm-button v-else-if="!vote.spec.canAnonymously" theme="red" :shadow="0" class="w-full" :height="72"
text :block="true" @click="handleSubmit()">不支持匿名投票</tm-button>
<tm-button v-else-if="submitForm.voteData.length===0" theme="white" text class="w-full" :height="72"
:block="true" @click="handleSubmitTip('请选择选项')">提交投票（请选择选项）</tm-button>
<tm-button v-else theme="light-blue" class="w-full" :height="72" :block="true" :loading="submitLoading"
:disabled="submitLoading" @click="handleSubmit()">提交投票</tm-button>
</view>
</template>
</view>
@@ -177,15 +171,12 @@
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
import {
VOTE_TYPES,
calcVoteState,
calcVotePercent,
voteCacheUtil
} from '@/utils/vote.js'
const types = {
"pk": "双选PK",
"multiple": "多选",
"single": "单选"
}
export default {
name: "ArticleVote",
components: {
@@ -215,6 +206,7 @@
submitForm: {
voteData: []
},
submitLoading: false
}
},
created() {
@@ -227,28 +219,21 @@
this.$httpApi.v2
.getVoteDetail(this.voteId)
.then(res => {
this.pageTitle = "投票详情" + `（${types[res.vote.spec.type]}）`
this.pageTitle = "投票详情" + `（${VOTE_TYPES[res.vote.spec.type]}）`
const tempVoteRes = res;
tempVoteRes.vote.spec.isVoted = this.fnCalcIsVoted()
tempVoteRes.vote.spec.disabled = this.fnCalcIsVoted()
tempVoteRes.vote.spec._state = this.handleCalcVoteState(tempVoteRes.vote)
tempVoteRes.vote.spec._uh_state = calcVoteState(tempVoteRes.vote)
tempVoteRes.vote.spec._uh_type = VOTE_TYPES[tempVoteRes.vote.spec.type]
tempVoteRes.vote.spec.options.map((option, index) => {
option.value = option.id
option.label = option.title
option.isVoted = this.fnCalcIsVoted()
option.checked = this.fnCalcIsChecked(option)
if (tempVoteRes.vote.spec.type === 'single') {
option.percent = this.fnCalcPercent(option, tempVoteRes.vote.stats);
} else if (tempVoteRes.vote.spec.type === 'multiple') {
option.percent = this.fnCalcPercent(option, tempVoteRes.vote.stats);
} else if (tempVoteRes.vote.spec.type === 'pk') {
option.percent = this.fnCalcPercent(option, tempVoteRes.vote.stats);
}
option._uh_percent = calcVotePercent(tempVoteRes.vote, option);
option.dataStr = JSON.stringify(option)
return option
@@ -267,49 +252,23 @@
this.loadingText = "投票内容加载失败，点击重试"
})
},
fnCalcPercent(voteOption, stats) {
if (!this.fnCalcIsVoted()) return 0;
if (!stats?.voteDataList) return 0;
const option = stats.voteDataList.find(x => x.id == voteOption.id)
if (!option) return 0;
const percent = (option.voteCount / stats.voteCount) * 100
return Math.round(percent)
},
fnCalcIsVoted() {
return voteCacheUtil.has(this.voteId)
},
fnCalcIsChecked(option) {
const data = voteCacheUtil.get(this.voteId)
if (!data) return false;
const checked = data.selected.includes(option.id)
return checked
},
handleCalcVoteState(vote) {
if (vote.spec.timeLimit !== 'custom') {
return vote.spec.hasEnd ? "已结束" : "进行中"
}
const nowTime = new Date().getTime()
const startTime = new Date(vote.spec.startDate).getTime()
const endTime = new Date(vote.spec.endDate).getTime()
if (nowTime < startTime) {
return "未开始"
}
if (nowTime < endTime) {
return "进行中"
}
return vote.spec.hasEnd ? "已结束" : "进行中"
},
formatJsonStr(jsonStr) {
return jsonStr ? JSON.parse(jsonStr) : {}
},
handleSubmitTip() {
handleSubmitTip(text) {
uni.showToast({
icon: "none",
title: "请选择选项后继续"
title: text
})
},
handleSubmit() {
@@ -323,7 +282,7 @@
confirmText: "复制地址",
success: (res) => {
if (res.confirm) {
console.log("this.article",this.article)
console.log("this.article", this.article)
const articleUrl = this.$baseApiUrl + (this.article?.status?.permalink ?? "")
this.$utils.copyText(articleUrl, "原文地址复制成功")
}
@@ -335,7 +294,7 @@
uni.showLoading({
title: "正在保存..."
})
this.submitLoading = true
this.$httpApi.v2
.submitVote(this.voteId, this.submitForm, this.vote.spec.canAnonymously)
.then(res => {
@@ -357,14 +316,17 @@
icon: "none",
title: "提交失败，请重试"
})
}).finally(() => {
this.submitLoading = false
})
},
handleSelectSingleOption(option) {
if (this.vote.spec._state == '未开始') {
if (this.vote.spec._uh_state.state == '未开始') {
this.showToast(`投票未开始`)
return
}
if (this.vote.spec.hasEnded) return
if (this.vote.spec.disabled) return
this.vote.spec.options.map(item => {
if (option.id == item.id) {
@@ -377,10 +339,12 @@
},
handleSelectCheckboxOption(option) {
if (this.vote.spec._state == '未开始') {
if (this.vote.spec._uh_state.state == '未开始') {
this.showToast(`投票未开始`)
return
}
if (this.vote.spec.hasEnded) return
if (this.vote.spec.disabled) return
const checkedList = this.vote.spec.options.filter(x => x.checked && x.id != option.id)
components/vote-card/vote-card.vue
+8 -99
View File
@@ -3,113 +3,32 @@
<view class="vote-card-head flex">
<view class="left flex flex-center w-full">
<view class="flex-shrink">
<tm-tags v-if="vote.spec.type==='single'" color="light-blue" :shadow="0" rounded size="s"
model="fill">单选</tm-tags>
<tm-tags v-else-if="vote.spec.type==='multiple'" color="light-blue" :shadow="0" rounded size="s"
model="fill">多选</tm-tags>
<tm-tags v-else-if="vote.spec.type==='pk'" color="light-blue" :shadow="0" rounded size="s"
model="fill">双选PK</tm-tags>
<tm-tags color="light-blue" :shadow="0" rounded size="s" model="fill">{{ vote.spec._uh_type}}</tm-tags>
</view>
<view class="title text-overflow">
{{ vote.spec.title }}
</view>
</view>
<view v-if="false" class="flex-shrink right flex flex-end">
<tm-tags v-if="vote.spec.hasEnded" color="red" rounded :shadow="0" size="s" model="text">已结束</tm-tags>
<tm-tags v-else color="green" rounded size="s" :shadow="0" model="text">进行中</tm-tags>
</view>
</view>
<view class="vote-card-body w-full">
<view v-if="vote.spec.remark" class="remark text-overflow-2 text-size-s">
{{vote.spec.remark}}
</view>
<template v-if="showOptions">
<!-- 单选 -->
<view v-if="vote.spec.type==='single'" class="single">
<tm-groupradio @change="onOptionRadioChange">
<tm-radio v-for="(option,optionIndex) in vote.spec.options" :key="optionIndex" dense
:disabled="vote.spec.disabled" v-model="option.checked" :extendData="option">
<template v-slot:default="{checkData}">
<tm-button :shadow="0" :theme="checkData.checked?'light-blue':'grey-lighten-3'"
:plan="false" :block="true" class="w-full" size="m" :height="72">
<view class="flex flex-between w-full">
<text class="text-align-left text-overflow"> {{ checkData.extendData.title }}
</text>
<text class="flex-shrink"> {{checkData.extendData.percent }}% </text>
</view>
</tm-button>
</template>
</tm-radio>
</tm-groupradio>
</view>
<!-- 多选 -->
<view v-else-if="vote.spec.type==='multiple'" class="multiple">
<tm-groupcheckbox @change="onOptionCheckboxChange">
<tm-checkbox v-for="(option,optionIndex) in vote.spec.options" :key="optionIndex" dense
:disabled="vote.spec.disabled" v-model="option.checked" :extendData="option">
<template v-slot:default="{checkData}">
<tm-button :shadow="0" :theme="checkData.checked?'light-blue':'grey-lighten-3'"
:plan="false" :block="true" class="w-full" size="m" :height="72">
<view class="flex flex-between w-full">
<text class="text-align-left text-overflow"> {{ checkData.extendData.title }}
</text>
<text class="flex-shrink"> {{checkData.extendData.percent }}% </text>
</view>
</tm-button>
</template>
</tm-checkbox>
</tm-groupcheckbox>
</view>
<!-- PK -->
<view v-else-if="vote.spec.type==='pk'" class="pk">
<tm-groupradio @change="onOptionPkChange">
<tm-radio v-for="(option,optionIndex) in vote.spec.options" :key="optionIndex" dense
:disabled="vote.spec.disabled" v-model="option.checked" :extendData="option"
class="radio-item" :class="[optionIndex==0?'radio-left':'radio-right']"
:style="{width:option.percent + '%'}">
<template v-slot:default="{checkData}">
<view class="option-item"
:class="[optionIndex==0?'option-item-left':'option-item-right']">
{{checkData.extendData.percent }}%
</view>
</template>
</tm-radio>
</tm-groupradio>
<view class="option-foot w-full flex flex-between">
<view v-for="(option,optionIndex) in vote.spec.options" :key="optionIndex">
<view v-if="optionIndex==0" class="left flex-1 flex-shrink text-overflow">
{{option.title}}
</view>
<view v-else class="right flex-1 flex-shrink text-overflow text-align-right">
{{option.title}}
</view>
</view>
</view>
</view>
</template>
</view>
<view class="vote-card-foot flex flex-between">
<view class="left flex">
<tm-tags v-if="vote.spec._state=='已结束'" color="red" size="s" rounded :shadow="0"
model="text">已结束</tm-tags>
<tm-tags v-else-if="vote.spec._state=='未开始'" color="orange" size="s" rounded :shadow="0"
model="text">未开始</tm-tags>
<tm-tags v-else-if="vote.spec._state=='进行中'" color="green" size="s" rounded :shadow="0"
model="text">进行中</tm-tags>
<tm-tags :color="vote.spec._uh_state.color" size="s" rounded :shadow="0"
model="text">{{vote.spec._uh_state.state}}</tm-tags>
<tm-tags v-if="vote.spec.isVoted" color="blue" rounded size="s" model="text">已投票</tm-tags>
<tm-tags v-if="vote.spec.timeLimit==='permanent'" color="grey-darken-2" rounded size="s"
model="text">结束：永久有效 </tm-tags>
model="text">结束时间：永久有效 </tm-tags>
<tm-tags v-else color="grey-darken-2" rounded size="s" model="text">
<template
v-if="vote.spec._state=='未开始'">开始：{{ {d: vote.spec.startDate, f: 'yyyy-MM-dd HH:mm'} | formatTime }}
v-if="vote.spec._uh_state.state=='未开始'">开始时间：{{ {d: vote.spec.startDate, f: 'yyyy-MM-dd HH:mm'} | formatTime }}
</template>
<template v-else>结束：{{ {d: vote.spec.endDate, f: 'yyyy-MM-dd HH:mm'} | formatTime }}
<template v-else>结束时间：{{ {d: vote.spec.endDate, f: 'yyyy-MM-dd HH:mm'} | formatTime }}
</template>
</tm-tags>
</view>
@@ -129,6 +48,7 @@
import tmCheckbox from '@/tm-vuetify/components/tm-checkbox/tm-checkbox.vue';
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
export default {
name: "VoteCard",
options: {
@@ -156,17 +76,6 @@
type: Boolean,
default: false
}
},
methods: {
onOptionRadioChange(e) {
console.log("onOptionRadioChange", e)
},
onOptionCheckboxChange(e) {
console.log("onOptionCheckboxChange", e)
},
onOptionPkChange(e) {
console.log("onOptionPkChange", e)
},
}
}
</script>