ChuangHengWx/pagesPublish/questionnaireFill.vue

<template>
	<view class="default_page adffc" :style="{'height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='填写问卷'></cus-header>
		<view class="top">
			<view class="top-title">{{'GW+MC PREILL36测评题库版本'}}</view>
			<view class="top-progress adfac">
				<view class="top-progress-text">测评进度</view>
				<view class="top-progress-box">
					<view class="top-progress-box-current" :style="{'width':(2/36*100)+'%'}"></view>
				</view>
				<view class="top-progress-num"><span>{{2}}</span>/{{36}}</view>
			</view>
		</view>
		<view class="memo adfac" v-if="type==='questionnaire'" @click="noticeShow=true">
			<text>问卷答题说明</text>
			<image :src="imgBase+'icon_memo.png'"></image>
		</view>
		<view class="list">
			<question-item v-for="(item,index) in list" :key="index" :item="item"></question-item>
		</view>
		<view class="bottom adfacjb">
			<view class="bottom-left adffcac" @click="teamShow=true" v-if="!type">
				<image :src="imgBase+'questionnaire_info.png'"></image>
				<text>团队信息</text>
			</view>
			<view class="bottom-left adfac" v-else-if="type==='questionnaire'">
				<view class="bottom-left-pre adffcac" @click="teamShow=true">
					<image :src="imgBase+'questionnaire_info.png'"></image>
					<text>团队信息</text>
				</view>
				<view class="bottom-left-pre adffcac" @click="userShow=true">
					<image :src="imgBase+'questionnaire_users.png'"></image>
					<text>团队人员</text>
				</view>
			</view>
			<view class="bottom-right" :class="{'questionnaire':type==='questionnaire'}" @click="confirmSubmit">提交问卷</view>
		</view>
		<cus-notice title="问卷答题说明" :show="noticeShow" :content="noticeContent"
			@close="noticeShow=false" @handleKnow="noticeShow=false"></cus-notice>
		<cus-team-info :show="teamShow" :teamInfo="teamInfo" @close="teamShow=false"></cus-team-info>
		<cus-team-user :show="userShow" :list="teamUserList" @close="userShow=false"></cus-team-user>
	</view>
</template>

<script>
	import QuestionItem from '@/components/QuestionItem/index3.vue'
	import CusNotice from '@/components/CusNotice/index.vue'
	import CusTeamInfo from '@/components/CusTeamInfo/index.vue'
	import CusTeamUser from '@/components/CusTeamUser/index.vue'
	export default {
		components:{ CusNotice, QuestionItem, CusTeamInfo, CusTeamUser },
		data(){
			return {
				type:'',
				questionnaireId:'',
				noticeShow:false,
				noticeContent:`问卷答题说明<br/><br/>问卷答题说明<br/><br/>问卷答题说明<br/><br/>问卷答题说明`,
				teamShow:false,
				userShow:false,
				teamUserList:[],
				list:[
					{
						question:'我们的团队成员可以清晰阐述团队的共享目的 We can collectively and clearly articulate our shared purpose',
						userAnswer:[
							{
								assessmentMethod:1,
								answer:'',
								questionOption:[
									{ questionOption:'1-强烈不同意（Strongly disagree）' },
									{ questionOption:'2-不同意(Disagree)' },
									{ questionOption:'3-中立(Neutral)' },
									{ questionOption:'4-同意(Agree)' },
									{ questionOption:'5-完全同意（Totally agree）' }
								]
							},
							{
								assessmentMethod:2,
								answer:'',
								questionOption:[
									{ questionOption:'1-强烈不同意（Strongly disagree）' },
									{ questionOption:'2-不同意(Disagree)' },
									{ questionOption:'3-中立(Neutral)' },
									{ questionOption:'4-同意(Agree)' },
									{ questionOption:'5-完全同意（Totally agree）' }
								]
							},
						]
					}
				],
				teamInfo:{
					aaa:'',
					bbb:'',
					ccc:'',
					ddd:'',
					eee:'',
					fff:'',
					ggg:'',
					hhh:'',
					iii:'',
				}
			}
		},
		onLoad(options) {
			this.type = options.type;
			this.questionnaireId = options.questionnaireId;
		},
		methods:{
			confirmSubmit(){
				let url = '/pagesPublish/questionnaireResult'
				if(this.type === 'questionnaire') url = '/pagesPublish/submitResult'
				uni.navigateTo({ url })
			}
		}
	}
</script>

<style scoped lang="scss">
	.default_page{
		padding: 0 0 192rpx;
		background: #FFFFFF;
		box-sizing: border-box;
		
		.top{
			padding: 40rpx 24rpx 50rpx;
			&-title{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 40rpx;
				color: #002846;
				line-height: 51rpx;
			}
			&-progress{
				margin-top: 35rpx;
				&-text{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #002846;
					line-height: 30rpx;
				}
				&-box{
					flex: 1;
					width: 100%;
					height: 14rpx;
					margin: 0 20rpx;
					background: #F0F2F8;
					border-radius: 8rpx;
					position: relative;
					&-current{
						height: 14rpx;
						background: #FFD750;
						border-radius: 8rpx;
						position: absolute;
						left: 0;
						top: 0;
					}
				}
				&-num{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #667E90;
					line-height: 26rpx;
					span{
						font-size: 36rpx;
						color: #199C9C;
						line-height: 36rpx;
					}
				}
			}
		}
		
		.memo{
			margin: -20rpx 0 50rpx 24rpx;
			text{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #BA9B31;
				line-height: 30rpx;
			}
			image{
				width: 24rpx;
				height: 24rpx;
				margin-left: 9rpx;
			}
		}
	
		.list{
			flex: 1;
			padding: 0 24rpx;
			overflow-y: auto;
		}
	
		.bottom{
			width: 100%;
			background: #FFFFFF;
			box-shadow: 0rpx -2rpx 6rpx 0rpx rgba(0,0,0,0.07);
			padding: 20rpx 40rpx 54rpx;
			box-sizing: border-box;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 1000;
			&-left{
				image{
					width: 42rpx;
					height: 42rpx;
				}
				text{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #536387;
					line-height: 40rpx;
					margin-top: 2rpx;
				}
				&-pre{
					&:last-child{
						margin-left: 40rpx;
					}
				}
			}
			&-right{
				width: 448rpx;
				height: 88rpx;
				background: linear-gradient( 90deg, #33A7A7 0%, #64BBBB 100%);;
				border-radius: 44rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 88rpx;
				text-align: center;
				letter-spacing: 2rpx;
				&.questionnaire{
					width: 383rpx;
				}
			}
		}
	}
</style>