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

components/article-vote/article-vote.vue

@@ -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>
+							model="fill">{{ index + 1 }}</tm-tags>
-
+						<tm-tags color="light-blue" :shadow="0" rounded size="s"
-						<tm-tags v-if="vote.spec.type==='single'" color="light-blue" :shadow="0" rounded size="s"
+							model="fill">{{ vote.spec._uh_type }}</tm-tags>
-							model="fill">单选</tm-tags>
+						<tm-tags :color="vote.spec._uh_state.color" size="s" rounded :shadow="0"
-						<tm-tags v-else-if="vote.spec.type==='multiple'" color="light-blue" :shadow="0" rounded size="s"
+							model="fill">{{vote.spec._uh_state.state}}</tm-tags>
-							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>
-
 					</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"
+				<tm-button v-if="fnCalcIsVoted()" theme="white" text :block="true" class="w-full">您已参与投票</tm-button>
-					:height="72" @click="handleSubmit()">不支持匿名投票(点击)</tm-button>
+				<tm-button v-else-if="vote.spec._uh_state.state==='未开始'" theme="orange" text class="w-full" :height="72"
-				<tm-button v-else-if="fnCalcIsVoted()" theme="white" text :block="true" :height="72"
+					:block="true" @click="handleSubmitTip('投票未开始')">投票未开始</tm-button>
-					class="w-full">您已参与投票</tm-button>
+				<tm-button v-else-if="vote.spec._uh_state.state==='已结束'" theme="red" text class="w-full" :height="72"
-				<tm-button v-else theme="light-blue" class="w-full" :block="true" :height="72"
+					:block="true" @click="handleSubmitTip('投票已结束')">投票已结束</tm-button>
-					@click="handleSubmit()">提交投票</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)
-
+							option._uh_percent = calcVotePercent(tempVoteRes.vote, 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.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

@@ -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"
+					<tm-tags color="light-blue" :shadow="0" rounded size="s" model="fill">{{ vote.spec._uh_type}}</tm-tags>
-						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>
 				</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"
+				<tm-tags :color="vote.spec._uh_state.color" size="s" rounded :shadow="0"
-					model="text">已结束</tm-tags>
+					model="text">{{vote.spec._uh_state.state}}</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 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>

pagesA/vote-detail/vote-detail.vue

@@ -15,24 +15,12 @@
 					<view class="sub-title"> 投票信息 </view>
 					<view class="vote-card-body flex flex-col uh-mt-8">
 						<view class="">
-							投票类型：<tm-tags v-if="vote.spec.type==='single'" color="light-blue" :shadow="0" size="xs"
+							投票类型：<tm-tags color="light-blue" :shadow="0" size="xs" model="fill">
-								model="fill">单选</tm-tags>
+								{{ vote.spec._uh_type }} </tm-tags>
-							<tm-tags v-else-if="vote.spec.type==='multiple'" color="light-blue" :shadow="0" size="xs"
-								model="fill">多选</tm-tags>
-							<tm-tags v-else-if="vote.spec.type==='pk'" color="light-blue" :shadow="0" size="xs"
-								model="fill">双选PK</tm-tags>
 						</view>
 						<view class="">
-							投票状态：<tm-tags v-if="vote.spec._state=='已结束'" color="red" size="xs" :shadow="0"
+							投票状态：<tm-tags :color="vote.spec._uh_state.color" size="xs" :shadow="0"
-								model="fill">已结束</tm-tags>
+								model="fill">{{vote.spec._uh_state.state}}</tm-tags>
-							<tm-tags v-else-if="vote.spec._state=='未开始'" color="orange" size="xs" :shadow="0"
-								model="fill">
-								未开始
-							</tm-tags>
-							<tm-tags v-else-if="vote.spec._state=='进行中'" color="green" size="xs" :shadow="0"
-								model="fill">
-								进行中
-							</tm-tags>
 						</view>
 						<view class="">
 							投票方式：<tm-tags v-if="vote.spec.canAnonymously" color="light-blue" size="xs" :shadow="0"
@@ -68,17 +56,17 @@
 								class="sub-title-count">（最多选择 {{ vote.spec.maxVotes }} 项）</text> </view>
 						<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-8">
 											<view class="flex-1 text-align-left text-break">
 												{{option.title }}
 											</view>
 											<view class="flex-shrink">
-												{{option.percent }}%
+												{{option._uh_percent }}%
 											</view>
 										</view>
 									</view>
@@ -96,17 +84,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-8">
 											<view class="flex-1 text-align-left text-break">
 												{{option.title }}
 											</view>
 											<view class="flex-shrink">
-												{{option.percent }}%
+												{{option._uh_percent }}%
 											</view>
 										</view>
 									</view>
@@ -126,25 +114,25 @@
 							<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-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-8">
 											<view class="flex-1 text-align-left text-break">
 												选项{{ optionIndex+1}}：{{option.title }}
 											</view>
 											<view class="flex-shrink">
-												{{option.percent }}%
+												{{option._uh_percent }}%
 											</view>
 										</view>
 									</view>
@@ -186,12 +174,15 @@
 				<view class="vote-submit flex w-full flex-center" :style="{
 					paddingBottom:safeAreaBottom + 'rpx'
 				}">
-					<tm-button v-if="!vote.spec.canAnonymously" theme="red" :shadow="0" class="w-full" text
+					<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"
+						:block="true" @click="handleSubmitTip('投票未开始')">投票未开始</tm-button>
+					<tm-button v-else-if="vote.spec._uh_state.state==='已结束'" theme="red" text class="w-full"
+						:block="true" @click="handleSubmitTip('投票已结束')">投票已结束</tm-button>
+					<tm-button v-else-if="!vote.spec.canAnonymously" theme="red" :shadow="0" class="w-full" text
 						:block="true" @click="handleSubmit()">不支持匿名投票</tm-button>
-					<tm-button v-else-if="fnCalcIsVoted()" theme="white" text :block="true"
-						class="w-full">您已参与投票</tm-button>
 					<tm-button v-else-if="submitForm.voteData.length===0" theme="white" text class="w-full"
-						:block="true" @click="handleSubmitTip()">提交投票（请选择选项）</tm-button>
+						:block="true" @click="handleSubmitTip('请选择选项')">提交投票（请选择选项）</tm-button>
 					<tm-button v-else theme="light-blue" class="w-full" :block="true" :loading="submitLoading"
 						:disabled="submitLoading" @click="handleSubmit()">提交投票</tm-button>
 				</view>
@@ -207,15 +198,12 @@
 	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 {
 		components: {
 			tmSkeleton,
@@ -242,7 +230,7 @@
 		onLoad(e) {
 			this.name = e.name;
 			this.fnGetData();
-			this.fnGetVoteUserList();
+			// this.fnGetVoteUserList();
 			// #ifndef H5
 			const systemInfo = uni.getSystemInfoSync();
 			this.safeAreaBottom = systemInfo.safeAreaInsets.bottom + 12;
@@ -250,7 +238,7 @@
 		},
 		onPullDownRefresh() {
 			this.fnGetData();
-			this.fnGetVoteUserList();
+			// this.fnGetVoteUserList();
 		},
 		onShareAppMessage() {
 			return {
@@ -276,27 +264,21 @@
 				this.$httpApi.v2
 					.getVoteDetail(this.name)
 					.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)
-
+							option._uh_percent = calcVotePercent(tempVoteRes.vote, 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.dataStr = JSON.stringify(option)
 
@@ -333,15 +315,6 @@
 						console.log("err")
 					})
 			},
-			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.name)
 			},
@@ -352,23 +325,6 @@
 				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 ? "已结束" : "进行中"
-			},
 			onOptionRadioChange(e) {
 				this.submitForm.voteData = e.map(item => this.vote.spec.options[item.index]?.id);
 			},
@@ -381,8 +337,8 @@
 			formatJsonStr(jsonStr) {
 				return jsonStr ? JSON.parse(jsonStr) : {}
 			},
-			handleSubmitTip() {
+			handleSubmitTip(text) {
-				this.showToast("请选择选项后继续")
+				this.showToast(text)
 			},
 			handleSubmit() {
 				if (!this.vote.spec.canAnonymously) {
@@ -430,10 +386,11 @@
 			},
 
 			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) {
@@ -447,10 +404,11 @@
 			},
 
 			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)

pagesA/votes/votes.vue

@@ -56,6 +56,8 @@
 	import VoteCard from '@/components/vote-card/vote-card.vue'
 
 	import {
+		VOTE_TYPES,
+		calcVoteState,
 		voteCacheUtil
 	} from '@/utils/vote.js'
 	import pluginAvailableMixin from "@/common/mixins/pluginAvailable.js"
@@ -260,14 +262,15 @@
 						const tempItems = res.items.map(item => {
 							item.spec.disabled = true
 							item.spec.isVoted = this.fnCalcIsVoted(item.metadata.name)
-							item.spec._state = this.handleCalcVoteState(item)
+							item.spec._uh_state = calcVoteState(item)
+							item.spec._uh_type = VOTE_TYPES[item.spec.type]
 							item.spec.options.map((option, index) => {
 
 								option.checked = this.fnCalcIsChecked(item.metadata.name, option)
 								option.value = option.id
 								option.label = option.title
 
-								// todo：计算当前的选择占比
+								// 计算当前的选择占比
 								if (item.spec.type === 'single') {
 									option.percent = this.fnCalcPercent(option, item.stats);
 								} else if (item.spec.type === 'multiple') {
@@ -326,23 +329,7 @@
 				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 ? "已结束" : "进行中"
-			},
 			//跳转详情
 			fnToDetail(item) {
 				if (this.calcAuditModeEnabled) return;

utils/vote.js

@@ -32,3 +32,55 @@ export const voteCacheUtil = {
 		uni.setStorageSync(UnihaloVoteUid, JSON.stringify(data))
 	}
 }
+
+export const VOTE_TYPES = {
+	"pk": "双选PK",
+	"multiple": "多选",
+	"single": "单选"
+}
+
+export const VOTE_STATES = {
+	"未开始": {
+		state: "未开始",
+		color: "orange"
+	},
+	"进行中": {
+		state: "进行中",
+		color: "green"
+	},
+	"已结束": {
+		state: "已结束",
+		color: "red"
+	},
+}
+
+export const calcVoteState = (vote) => {
+	if (vote.spec.timeLimit !== 'custom') {
+		return vote.spec.hasEnded ? VOTE_STATES["已结束"] : VOTE_STATES["进行中"]
+	}
+
+	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 VOTE_STATES["未开始"]
+	}
+	if (nowTime < endTime) {
+		return VOTE_STATES["进行中"]
+	}
+	return vote.spec.hasEnded ? VOTE_STATES["已结束"] : VOTE_STATES["进行中"]
+}
+
+export const calcVotePercent = (vote, voteOption) => {
+	if (!vote || !voteOption) return 0
+	const votedDataList = vote?.stats?.voteDataList || []
+	if (votedDataList.length == 0) return 0
+	const voteCount = vote?.stats?.voteCount || 0
+	if (voteCount == 0) return 0
+
+	const _voteOption = votedDataList.find(x => x.id == voteOption.id)
+	if (!_voteOption) return 0;
+	const percent = (_voteOption.voteCount / voteCount) * 100
+	return Math.round(percent)
+}