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

<template>
	<view class="content">
		<topInfo :detailInfo="detailInfo"/>
		
		
		<view class="padding">
			<view class="ul">
				<view class="li" :class="{active: voteItemId.find(val=>val.voteItemId==item.itemId)}" v-for="(item,index) in detailInfo.voteItems" :key="index" @click="chooseItem(item)">{{ item.itemName }}</view>
			</view>
			
			<!-- <view class="ul" >
				<view class="li2 flex-b active" v-for="(item,index) in detailInfo.voteItems" :key="index">
					<view class="proccess" style="width: 30%;"></view>
					<view class="leftTxt flex">
						<u-icon name="checkbox-mark" color="#DE3A26" size="20"></u-icon>
						<view class="name">{{ item.itemName }}</view>
					</view>
					<view class="rightTxt">13 <text>(30%)</text></view>
				</view>
			</view> -->
			
			<view class="btn padding">
				<oneBtn text="投 票" :disabled="!voteItemId.length" @oneBtnClick="articleVoteFn"></oneBtn>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	
	import { ref } from 'vue'
	import { voteDetail, articleVote } 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 voteDetailFn() {
		const {data: res} = await voteDetail({voteId: voteId})
		console.log(res)
		detailInfo.value = res
	}
	
	// 选择投票选项
	const voteItemId = ref([])
	function chooseItem(item) {
		// 如果是单选
		if(detailInfo.value.voteType==1) {
			voteItemId.value = [{voteItemId: item.itemId, voteId: voteId}]
			return
		}
		// 如果是多选
		let index = voteItemId.value.findIndex((val)=>val.voteItemId==item.itemId)
		if(index==-1) {
			voteItemId.value.push({voteItemId: item.itemId, voteId: voteId})
		}else {
			voteItemId.value.splice(index, 1)
		}
		console.log(voteItemId.value)
	}
	async function articleVoteFn()  {
		if(!voteItemId.value.length) return
		const {data: res} = await articleVote(voteItemId.value)
		if(res) uni.$u.toast('投票成功')
		setTimeout(()=>{
			uni.navigateTo({
				url: '/pages/subPage/ballots/vote/voteReslut?voteId='+voteId
			})
		}, 1500)
	}
	
	onLoad((option)=>{
		voteId = option.voteId
		voteDetailFn()
	})
	
	onPullDownRefresh(async()=>{
	   await voteDetailFn()
	   uni.stopPullDownRefresh()
	})
</script>

<style lang="scss" scoped>
	.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>