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

<template>
	<view class="content">
		<topInfo :detailInfo="detailInfo"/>
		
		
		<view class="padding">
			<view class="ul" v-if="detailInfo.voteType==3">
				<view class="li2" v-for="(item,index) in detailInfo.voteMultipleInfoList" :key="index">
					<view class="title">{{ item.name }}</view>
					<view class="subOptions">
						<view class="subOption flex-b"  v-for="(item2, index2) in item.optionList" @click="chooseVoteType3(item.optionList, item2)">
							<view class="leftTxt flex">
								<u-icon name="checkmark-circle-fill" color="#DE3A26" size="20" v-if="item2.isCheck"></u-icon>
								<view class="circle" v-else></view>
								<view class="name">{{ item2.itemName }}</view>
							</view>
							<!-- <view class="rightTxt">4（<text> 20%</text>）</view> -->
						</view>
					</view>
					
				</view>
			</view>
			<view class="ul" v-else>
				<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="btn " style="padding: 32rpx 0;">
				<oneBtn text="投 票" @oneBtnClick="articleVoteFn"  v-if="detailInfo.voteType==3"></oneBtn>
				<oneBtn text="投 票" @oneBtnClick="articleVoteFn" :disabled="!voteItemId.length" v-else></oneBtn>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	
	import { ref } from 'vue'
	import { voteDetail, articleVote, vote_multiple } from '@/config/api.js'
	import topInfo from './comp/topInfo.vue'
	import {
			onLoad,
			onPullDownRefresh,
			
		} from '@dcloudio/uni-app'
		
		
	let voteId = ''
	
	let testArr = ref([
		{name: '测试标题',subOption: [
			{name: '选项一', isCheck: 1},
			{name: '选项一', isCheck: 0},
			{name: '选项一', isCheck: 0},
		]},
		{name: '测试标题二',subOption: [
			{name: '选项二', isCheck: 1},
			{name: '选项二', isCheck: 0},
			{name: '选项二', isCheck: 0},
		]}
	])
	
	const isCheck = ref(false)
	function changeRadio(val) {
		isCheck.value = val
	}
	
	function chooseVoteType3(list, item2) {
		if(item2.isCheck) {
			item2.isCheck = 0
		}else {
			list.forEach(val=>{
				val.isCheck = 0
			})
			item2.isCheck = 1
		}
	}
	
	const detailInfo = ref({})
	async function voteDetailFn() {
		const {data: res} = await voteDetail({voteId: voteId})
		if(!res.attachmentList) res.attachmentList = []
		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) {
			console.log(voteItemId.value.length, 'nnnn')
			// if(detailInfo.voteType!=1&&detailInfo.value.itemLimit&&voteItemId.value.length>=detailInfo.value.itemLimit) {
			// 	let msg = '最多只能选择' + detailInfo.value.itemLimit + '项'
			// 	 uni.$u.toast(msg)
			// 	return 
			// }
			voteItemId.value.push({voteItemId: item.itemId, voteId: voteId})
		}else {
			voteItemId.value.splice(index, 1)
		}
		console.log(voteItemId.value)
	}
	async function articleVoteFn()  {
		// if(detailInfo.voteType!=1&&detailInfo.value.itemLimit&&voteItemId.value.length!=detailInfo.value.itemLimit) {
		// 	let msg = '请选择' + detailInfo.value.itemLimit + '项'
		// 	return uni.$u.toast(msg)
		// }
		if(detailInfo.value.voteType==3) {
			let arr = detailInfo.value.voteMultipleInfoList.map(item=>{
				let obj = {
					"name": item.name,
					"multipleVoteId": item.multipleVoteId,
					optionList: item.optionList.filter(item2=>item2.isCheck==1)
				}
				return obj
			})
			console.log(arr)
			// if(!arr.optionList) return uni.$u.toast('请选择投票选项')
			const {data: res} = await vote_multiple({voteId: voteId,voteMultipleList: arr})
			if(res) uni.$u.toast('投票成功')
		}else {
			if(!voteItemId.value.length) return
			const {data: res} = await articleVote(voteItemId.value)
			if(res) uni.$u.toast('投票成功')
		}
		
		setTimeout(()=>{
			// redirectTo
			uni.redirectTo({
				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 {
			padding: 10rpx 0;
		  .title {
				font-size: 32rpx;
				padding: 16rpx 0;
				font-weight: 600;
		  }
			.subOptions {
				// flex-wrap: wrap;
				// display: flex;
			}
			.rightTxt {
				font-size: 26rpx;
				color: #CCCCCC;
			}
		  .subOption {
			  
			  padding: 16rpx 20rpx;
			  
		    .circle {
				width: 36rpx;
				height: 36rpx;
				border-radius: 100%;
				border: 1rpx solid #CCCCCC
		    }
		
		    u-icon {
		
		    }
		
		    .name {
				font-size: 26rpx;
				margin-left: 6rpx;
		    }
		  }
		}
		
	  }
	
	  .btn {
		  padding-top: 50rpx;
	    
	  }
	}
</style>