ChuangHengWx/pages/questionnaireFill.vue

<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='问卷填写' :backAlert="true"></cus-header>
		<div class="top adffcacjc">
			<p>{{title}}</p>
			<p class="tip">共 <span>{{list.length}}</span> 题，已作答 <span style="font-weight: bold;">{{answerNum}}</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 adf">
						<span>*</span>
						{{index+1}}. {{item.question}}
					</div>
					<div class="lb_answers">
						<u-radio-group v-model="item.answer" placement="column">
							<div class="la_item" v-for="(pre,idx) in item.userAnswer" :key="idx">
								<u-radio :label="pre.questionOption" :name="pre.questionOption" activeColor="#833478" size="36rpx" iconSize="32rpx" labelSize="32rpx"></u-radio>
							</div>
						</u-radio-group>
					</div>
				</div>
			</div>
		</div>
		<div class="bottom">
			<div class="zt_btn" @tap="submitWj">提交问卷</div>
		</div>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				title:'',
				teamQuestionnaireId:'',
				list:[],
				answerNum:0,
				questionnaire:null
			}
		},
		onLoad(option) {
			this.title = option.title;
			this.teamQuestionnaireId = option.teamQuestionnaireId;
			this.getList();
		},
		watch:{
			list:{
				handler(newval){
					this.answerNum = this.list.filter(l=>l.answer!='')?.length||0;
				},
				deep:true
			}
		},
		methods:{
			getList(){
				if(uni.getStorageSync('questionnaire')) this.questionnaire = JSON.parse(uni.getStorageSync('questionnaire'))
				this.$api.get('/core/team/member/answer/listByUser/'+this.teamQuestionnaireId).then(res=>{
					if(res.data.code!==0) return this.$showToast(res.data.msg)
					this.list = res.data.data;
					this.list.forEach((l,i)=>{
						this.$set(this.list[i],'warn',false);
						this.$set(this.list[i],'answer','');
						if(this.questionnaire&&this.teamQuestionnaireId==this.questionnaire.key){
							let t = this.questionnaire.list.find(q=>q.id==l.id)
							this.$set(this.list[i],'answer',t?t.answer:'');
						}
					})
				})
			},
			submitWj(){
				this.list.forEach((l,i)=>{
					this.$set(this.list[i],'warn',!l.answer?true:false)
				})
				let idx = this.list.findIndex(l=>l.warn);
				if(idx>-1) return this.$showModal(`第${idx+1}项未选择答案，请选择。`)
				let newList = JSON.parse(JSON.stringify(this.list));
				newList.forEach(l=>{
					l.isAnswer = '1';
					let i = l.userAnswer.findIndex(a=>a.questionOption===l.answer)
					if(i>-1) l.userAnswer[i].userAnswer = true;
					delete l.answer
					delete l.warn
				})
				this.$api.post('/core/team/member/answer/submit',newList).then(res=>{
					if(res.data.code!==0) return this.$showToast(res.data.msg)
					uni.removeStorageSync('questionnaire')
					uni.navigateTo({
						url:'/pages/questionnaireResult'
					})
				})
			},
			setQuestionnaireCache(){
				if(uni.getStorageSync('questionnaire')) uni.removeStorageSync('questionnaire')
				let list = [];
				this.list.forEach(l=>{
					if(l.answer) list.push({id:l.id,answer:l.answer})
				})
				let qinfo = {
					key:this.teamQuestionnaireId,
					list
				}
				if(list.length===0) return
				uni.setStorageSync('questionnaire',JSON.stringify(qinfo));
			}
		},
		onUnload() {
			this.setQuestionnaireCache();
		},
		onBackPress() {
			this.setQuestionnaireCache();
		}
	}
</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>