uniapp:单选、复选、文本（使用普通标签）一

单选、复选、文本

//这个方法处理数据较方便
<template>
	<view>
		<view class="content" v-for='(item,index) in list' :key='index'>
			<view class="">{{index+1+'、'+item.itemName}}{{item.type==0?'(单选)':item.type==1?'(多选)':''}}</view>
			<view class="" v-if="item.type==0">
				<view class="" v-for='(v,i) in item.optionList'>
					 <view class="flex between item-view" @click='radioClick(index,i)' v-show='type==0'>
							<view class="cycle" :class="v.checked?(colorId==0?'purple':colorId==1?'blue':'green'):''"></view>
							<view>{{v.value}}</view>
					 </view>
					 <view class="flex between item-view"  v-show='type==1'>
					 		<view class="cycle" :class="v.checked?(colorId==0?'purple':colorId==1?'blue':'green'):'grey'"></view>
					 		<view>{{v.value}}</view>
					 </view>
				</view>
			</view>
			<!--  -->
			<view class="" v-if="item.type==1">
				<view class="" v-for='(v,i) in item.optionList'>
					 <view class="flex between item-view" @click='checkboxClick(index,i)' v-show='type==0'>
							<view class="cycle" :class="v.checked?(colorId==0?'purple':colorId==1?'blue':'green'):''"></view>
							<view>{{v.value}}</view>
					 </view>
					 <view class="flex between item-view"  v-show='type==1'>
					 			<view class="cycle" :class="v.checked?(colorId==0?'purple':colorId==1?'blue':'green'):'grey'"></view>
					 			<view>{{v.value}}</view>
					 </view>
				</view>
			</view>
			<!--  -->
			<view class="" v-if="item.type==2">
				<textarea v-model='item.value' v-show='type==0'></textarea>
				<textarea :value='item.value'  class="grey" v-show='type==1'></textarea>
			</view>
			<!--  -->
		</view>
		<view class="footer">
			<view :class="colorId==0?'purple':colorId==1?'blue':'green'" @click='submit()' v-show='type==0'>提交</view>
			<view class="grey-bg"  v-show='type==1'>已提交</view>
		</view>
	</view>
</template>

<script>
	//0单选，1多选，2文本
export default {
	data() {
		return{
			colorId:2,
			type:0, //是否填写
			list:[
				{
					type: 0,
					id: "01",
					itemName: "性别",
					optionList:[
						{	checked: false,id: "011",value: "男"},
						{	checked: false,id: "012",value: "女"},
					]
				},
				{
					type: 1,
					id: "11",
					itemName: "喜欢吃什么",
					optionList:[
						{	checked: false,id: "111",value: "苹果"},
						{	checked: false,id: "112",value: "橘子"},
					]
				},
				{
					type: 0,
					id: "02",
					itemName: "血型",
					optionList:[
						{	checked: false,id: "021",value: "O"},
						{	checked: false,id: "022",value: "A"},
						{	checked: false,id: "022",value: "AB"},
						{	checked: false,id: "022",value: "B"},
					]
				},
				{
					type:2,
					id:'21',
					itemName:'随便说点什么',
					value:'',
					optionList: null
				},
				{
					type: 1,
					id: "12",
					itemName: "这是个多选",
					optionList:[
						{	checked: false,id: "121",value: "暖"},
						{	checked: false,id: "122",value: "适合出行"},
						{	checked: false,id: "123",value: "有阳光"},
					]
				},
				{
					type:2,
					id:'22',
					itemName:'有什么好的建议',
					value:'',
					optionList: null
				},
			]
		}
	},
	computed:{
		
	},
	onLoad(){
		//排序
		this.list.sort((a,b)=>{
			return a.type-b.type
		})
	},
	methods:{
		//单选
		radioClick(pIndex,sIndex){
			this.list[pIndex].optionList.forEach((v,i)=>{
				if(sIndex == i){
					v.checked = true
				}else{
					v.checked = false
				}
			})
		},
		//多选
		checkboxClick(pIndex,sIndex){
			this.list[pIndex].optionList.forEach((v,i)=>{
				if(sIndex == i){
					v.checked = !v.checked
				}
			})
		},
		//提交
		submit(){
			let paramsList = []
		  this.list.forEach(item=>{
				if(item.optionList==null){
					if(item.value!=''){
						let obj = {
								itemId:item.id,
								itemValue:item.value,
								itemName:item.itemName
						}
						paramsList.push(obj)
					}
				}else{
						item.optionList.forEach(v=>{
							if(v.checked){
								let obj={
									itemId:item.id,
									itemValue:v.value,
									itemName:item.itemName
								}
								paramsList.push(obj)
							}
						})
				}
			})
			if(paramsList.length==0){
				uni.showToast({
					icon:'none',
					title:'提交问卷不能为空'
				})
				return false
			}
			console.log('提交参数===',paramsList)
		},
	},
	
}
</script>
<style>
	.flex{
		display: flex;
		align-items: center;
	}
	.between{
		justify-content: space-between;
	}
	.cycle{
		width: 36rpx;height: 36rpx;
		border-radius: 50%;
		border: 1rpx solid  #C8C7CC;
	}
	.content{
		margin: 20rpx;
	}
	.item-view{
		border: 1rpx solid #C8C7CC;
		border-radius: 10rpx;
		padding: 10rpx 20rpx;
		margin: 20rpx 10rpx;
	}
	.purple{
		background-color: #6F4D98;
		border: 1rpx solid #6F4D98;
	}
	.blue{
		background-color: #023694;
		border: 1rpx solid #023694;
	}
	.green{
		background-color: #0B683A;
		border: 1rpx solid #0B683A;
	}
	.grey{
		background-color: #eee;
	}
	textarea{
		width: 670rpx;
		height: 60trpx;
		border: 1rpx solid #C8C7CC;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-top: 20rpx;
	}
	.footer{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 120rpx;
		background-color: #fff;
		border-top: 1rpx solid #C8C7CC;
	}
	.footer view{
		width: 710rpx;
		height: 80rpx;
		margin: 20rpx auto;
		line-height: 80rpx;
		text-align: center;
		border-radius: 10rpx;
		color: #fff;
		font-size: 36rpx;
		font-weight: 500;
	}
	.grey-bg{
		background-color: #C0C0C0;
	}
</style>