xinjiangMiniProgram/pages/subPage/ballots/vote/voteReslut.vue

<template>
	<view class="content">
		<topInfo :detailInfo="detailInfo"/>
		<view class="padding">
			<view class="ul" >
				<view class="li2 flex-b" v-for="(item,index) in detailInfo.voteResults" :key="index" :class="{active: item.voted}">
					<view class="proccess" :style="{width: item.itemVoteProportion}"></view>
					<view class="leftTxt flex">
						<u-icon name="checkbox-mark" color="#DE3A26" size="20" v-if="item.voted"></u-icon>
						<view class="name">{{ item.itemName }}</view>
					</view>
					<view class="rightTxt">{{ item.itemVoteNum }} <text>( {{item.itemVoteProportion}} )</text></view>
				</view>
			</view>
			<view class="novote" v-if="!detailInfo.voteResults?.length">暂无人员参与投票~</view>
		</view>
		
	</view>
</template>

<script setup>
	
	import { ref } from 'vue'
	import { voteResult,  } from '@/config/api.js'
	import topInfo from './comp/topInfo.vue'
	import { onLoad, onPullDownRefresh,} from '@dcloudio/uni-app'
		
		
	let voteId = ''
	
	const isCheck = ref(false)
	function changeRadio(val) {
		isCheck.value = val
	}
	
	const detailInfo = ref({})
	async function voteResultFn() {
		const {data: res} = await voteResult({voteId: voteId})
		console.log(res)
		detailInfo.value = res
	}
	
	onLoad((option)=>{
		voteId = option.voteId
		voteResultFn()
	})
	
	onPullDownRefresh(async()=>{
	   await voteResultFn()
	   uni.stopPullDownRefresh()
	})
</script>

<style lang="scss" scoped>
	.novote {
		font-size: 28rpx;
		color: #9C9C9C;
		width: 100%;
		text-align: center;
		line-height: 60rpx;
	}
	.content {
		width: 100%;
	  .bg {
	    width: 100%;
		background: linear-gradient(0deg, #ffffff 0%, #FFD4D3 100%);
		padding: 120rpx 20rpx 20rpx 20rpx;
	    .tit {
			font-size: 36rpx;
			padding: 10rpx 0 20rpx 0;
			font-weight: 700;
	    }
	
	    .textCon {
			display: flex;
	      .p {
			  font-size: 24rpx;
			  color: #9C9C9C;
			  flex: 1;
			  width: 0;
	        .txt {
				margin-bottom: 14rpx;
				
	        }
	      }
	
	      .status {
			width: 110rpx;
			font-size: 22rpx;
			height: 44rpx;
			background: #DE3A26;
			border-radius: 22rpx;
			line-height: 44rpx;
			text-align: center;
			color: #fff;
	      }
	    }
	  }
	
	  .row {
		  height: 90rpx;
		  margin-bottom: 40rpx;
		  border-bottom: 1px solid #EFEFEF;
	    .flex {
			flex: 1;
			width: 0;
	      .radionItem {
			font-size: 28rpx;
			margin-right: 30rpx;
			color: $themC;
			&.hui {
				color: #9C9C9C;
			}
	      }
	    }
	
	    .checkboxs {
	      font-size: 28rpx;
		  color: $themC;
	    }
	  }
	
	  .ul {
		  width: 100%;
	    .li {
			height: 84rpx;
			border-radius: 10rpx;
			border: 1px solid #CCCCCC;
			line-height: 84rpx;
			padding: 0 20rpx;
			display: flex;
			margin-bottom: 20rpx;
			font-size: 28rpx;
			color: #333;
			&.active {
				background: #FFD3D3;
				border-radius: 10rpx;
				color: $themC;
				border: 1px solid #DE3A26;
			}
	    }
		
		.li2 {
			position: relative;
			height: 84rpx;
			border-radius: 10rpx;
			border: 1px solid #CCCCCC;
			line-height: 84rpx;
			padding: 0 20rpx;
			display: flex;
			margin-bottom: 20rpx;
			font-size: 28rpx;
			color: #333;
			&.active {
				border-radius: 10rpx;
				color: $themC;
				.proccess {
					background: #FFD3D3;
				}
				
			}
			.proccess {
				width: 100%;
				height: 100%;
				background-color: #EFEFEF;
				position: absolute;
				left: 0;
				top: 0;
				
			}
		  .leftTxt {
			position: relative;
			z-index: 9;
		    .name {
				margin-left: 6rpx;
		    }
		  }
		
		  .rightTxt {
			  color: #9C9C9C;
			  position: relative;
			  z-index: 9;
		    text {
				margin-left: 4rpx;
		    }
		  }
		}
		
	  }
	
	  .btn {
		  padding-top: 50rpx;
	    
	  }
	}
</style>