ChuangHengWx/pages/questionnaireFill.vue

<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='问卷填写'></cus-header>
		<div class="top adffcacjc">
			<p>{{'企业员工培训需求调查问卷'}}</p>
			<p class="tip">共 <span>{{36}}</span> 题，请耐心选择！</p>
		</div>
		<div class="list" :style="{'height':(h-180-mt)+'px'}">
			<div class="l_item" v-for="(item,index) in list" :key="index">
				<div class="li_box" :class="{'active':item.warn}">
					<div class="lb_title adfac">
						<span>*</span>
						{{index+1}}. {{item.question}}
						<text v-if="item.type===2">【多选题】</text>
					</div>
					<div class="lb_answers" v-if="[1,2].includes(item.type)">
						<template v-if="item.type===1">
							<u-radio-group v-model="item.answer" placement="column">
								<div class="la_item" v-for="(pre,idx) in item.answers" :key="idx">
									<u-radio :label="pre.name" :name="pre.name" activeColor="#833478" size="36rpx" iconSize="32rpx" labelSize="32rpx"></u-radio>
								</div>
							</u-radio-group>
						</template>
						<template v-else-if="item.type===2">
							<u-checkbox-group v-model="item.answer" placement="column">
								<div class="la_item" v-for="(pre,idx) in item.answers" :key="idx">
									<u-checkbox :label="pre.name" :name="pre.name" activeColor="#833478" size="36rpx" iconSize="32rpx" labelSize="32rpx"></u-checkbox>
								</div>
							</u-checkbox-group>
						</template>
					</div>
					<template v-if="item.type===3">
						<div class="la_inp adfac">
							<u--input placeholder="请输入" border="none" v-model="item.answer"></u--input>
						</div>
					</template>
					<div class="la_warn adfac" v-if="item.type===2&&item.warn">
						<div class="lw adffcacjc">
							<u-icon name="close" color="#FFFFFF" size="23rpx"></u-icon>
						</div>
						<span>此题最少要选择{{item.limit}}项，您少选择了{{item.limit-(item.answer.length||0)}}项</span>
					</div>
				</div>
			</div>
		</div>
		<div class="bottom">
			<div class="zt_btn" @tap="submitWj">提交问卷</div>
		</div>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				list:[
					{
						question:'您所在的部门是哪个？',
						answer:'',
						answers:[
							{name:'A 人力资源部'},
							{name:'B 财务部'},
							{name:'C 市场部'},
							{name:'D 技术部'},
							{name:'E 其他'},
						],
						type:1, //1 单选；2 多选； 3 输入
						warn:false
					},
					{
						question:'您的工作年限是？',
						answer:'',
						answers:[
							{name:'A 1年以下'},
							{name:'B 1-3年'},
							{name:'C 3-5年'},
							{name:'D 5年以上'},
						],
						type:2,
						limit:2,
						warn:false
					},
					{
						question:'您的收入是？',
						answer:'',
						type:3,
						warn:false
					}
				]
			}
		},
		methods:{
			submitWj(){
				this.list.forEach((l,i)=>{
					if(l.type===2){
						this.$set(this.list[i],'warn',l.answer.length<l.limit)
					}else{
						this.$set(this.list[i],'warn',!l.answer?true:false)
					}
				})
				if(this.list.find(l=>l.warn)) return
				uni.navigateTo({
					url:'/pages/questionnaireResult'
				})
			},
		}
	}
</script>

<style scoped lang="less">
	.page{
		background: #F7F2F6;
		box-sizing: border-box;
		
		.top{
			p{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 42rpx;
				color: #252525;
				line-height: 51rpx;
				text-align: center;
				margin-top: 48rpx;
			}
			.tip{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #646464;
				line-height: 26rpx;
				text-align: center;
				margin-top: 36rpx;
				span{
					margin: 0 10rpx;
				}
			}
		}
	
		.list{
			width: 100%;
			overflow-y: auto;
			margin-top: 28rpx;
			.l_item{
				margin-top: 20rpx;
				width: 100%;
				background: #FFFFFF;
				padding: 6rpx;
				box-sizing: border-box;
				.li_box{
					width: 100%;
					padding: 32rpx 34rpx;
					box-sizing: border-box;
					&.active{
						border: 2rpx dotted #FD4F66;
					}
					.lb_title{
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #252525;
						line-height: 48rpx;
						span{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 32rpx;
							color: #FD4F66;
							line-height: 51rpx;
						}
					}
					.lb_answers{
						width: calc(100% - 40rpx);
						margin: 30rpx 20rpx 0;
						box-sizing: border-box;
						border: 1rpx solid #E5E7EB;
						.la_item{
							padding: 34rpx 24rpx;
							border-bottom: 1rpx solid #E5E7EB;
							&:last-child{
								border-bottom: none;
							}
						}
					}
					.la_inp{
						width: 100%;
						height: 96rpx;
						border-radius: 24rpx;
						border: 1rpx solid #DFCDDC;
						padding: 24rpx 30rpx;
						box-sizing: border-box;
						margin-top: 30rpx;
					}
					.la_warn{
						padding: 7rpx 23rpx;
						margin-top: 20rpx;
						background: #FFECEC;
						.lw{
							width: 36rpx;
							height: 36rpx;
							border-radius: 50%;
							background: #FD4F66;
						}
						span{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #FD4F66;
							line-height: 51rpx;
							margin-left: 17rpx;
						}
					}
				}
			}
		}
	
		.bottom{
			width: calc(100% - 80rpx);
			height: 88rpx;
			position: fixed;
			left: 40rpx;
			bottom: 40rpx;
		}
	}
</style>