ChuangHengWx/pagesPublish/questionnaireFill.vue

<template>
	<view class="default_page adffc" :style="{'height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='填写问卷'></cus-header>
		<div class="top">
			<div class="top-title">{{'GW+MC PREILL36测评题库版本'}}</div>
			<div class="top-progress adfac">
				<div class="top-progress-text">测评进度</div>
				<div class="top-progress-box">
					<div class="top-progress-box-current" :style="{'width':(2/36*100)+'%'}"></div>
				</div>
				<div class="top-progress-num"><span>{{2}}</span>/{{36}}</div>
			</div>
		</div>
		<div class="list">
			<question-item v-for="(item,index) in list" :key="index" :item="item"></question-item>
		</div>
		<div class="bottom adfacjb">
			<div class="bottom-left adffcac" @click="teamShow=true">
				<image :src="imgBase+'team_info.png'"></image>
				<text>团队信息</text>
			</div>
			<div class="bottom-right" @click="confirmSubmit">提交问卷</div>
		</div>
		<div class="dialog adffc" v-if="teamShow">
			<div class="dialog-box">
				<div class="dialog-box-title">团队信息</div>
				<image class="dialog-box-close" :src="imgBase+'remind_close.png'" @click="teamShow=false"></image>
				<div class="dialog-box-form">
					<div class="dialog-box-form-item adfacjb">
						<div class="dialog-box-form-item-left">团队名称</div>
						<div class="dialog-box-form-item-right">{{teamInfo.aaa||'暂无'}}</div>
					</div>
					<div class="dialog-box-form-item adfacjb">
						<div class="dialog-box-form-item-left">所在公司</div>
						<div class="dialog-box-form-item-right">{{teamInfo.bbb||'暂无'}}</div>
					</div>
					<div class="dialog-box-form-item adfacjb">
						<div class="dialog-box-form-item-left">所属地区</div>
						<div class="dialog-box-form-item-right">{{teamInfo.ccc||'暂无'}}</div>
					</div>
					<div class="dialog-box-form-item adfacjb">
						<div class="dialog-box-form-item-left">所属行业</div>
						<div class="dialog-box-form-item-right">{{teamInfo.ddd||'暂无'}}</div>
					</div>
					<div class="dialog-box-form-item adfacjb">
						<div class="dialog-box-form-item-left">团队职能类型</div>
						<div class="dialog-box-form-item-right">{{teamInfo.eee||'暂无'}}</div>
					</div>
					<div class="dialog-box-form-item adfacjb">
						<div class="dialog-box-form-item-left">团队架构类型</div>
						<div class="dialog-box-form-item-right">{{teamInfo.fff||'暂无'}}</div>
					</div>
					<div class="dialog-box-form-item adfacjb">
						<div class="dialog-box-form-item-left">团队规模</div>
						<div class="dialog-box-form-item-right">{{teamInfo.ggg||'暂无'}}</div>
					</div>
					<div class="dialog-box-form-item adfacjb">
						<div class="dialog-box-form-item-left">团队层级</div>
						<div class="dialog-box-form-item-right">{{teamInfo.hhh||'暂无'}}</div>
					</div>
				</div>
				<div class="dialog-box-intro">
					<div class="dialog-box-intro-title">团队简介</div>
					<div class="dialog-box-intro-content">{{teamInfo.iii||'暂无'}}</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	import QuestionItem from '@/components/QuestionItem/index3.vue'
	export default {
		components:{ QuestionItem },
		data(){
			return {
				teamShow:false,
				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:'',
				}
			}
		},
		methods:{
			confirmSubmit(){
				uni.navigateTo({
					url:'/pagesPublish/questionnaireResult'
				})
			}
		}
	}
</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: #7CC5C5;
						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: #833478;
						line-height: 36rpx;
					}
				}
			}
		}
	
		.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;
				}
			}
			&-right{
				width: 448rpx;
				height: 88rpx;
				background: #904A87;
				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;
			}
		}
	
		.dialog{
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			z-index: 1001;
			background: rgba(0,0,0,.4);
			justify-content: flex-end;
			&-box{
				width: 100%;
				background: #F7F7F7;
				border-radius: 24rpx 24rpx 0rpx 0rpx;
				padding: 30rpx 24rpx 50rpx;
				box-sizing: border-box;
				position: relative;
				&-title{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #002846;
					line-height: 32rpx;
					text-align: center;
				}
				&-close{
					width: 48rpx;
					height: 48rpx;
					position: absolute;
					top: 30rpx;
					right: 30rpx;
				}
				&-form{
					background: #FFFFFF;
					border-radius: 24rpx 24rpx 0rpx 0rpx;
					margin-top: 48rpx;
					&-item{
						padding: 28rpx 24rpx;
						box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EFEFEF;
						&-left{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 30rpx;
							color: #002846;
							line-height: 42rpx;
							width: 200rpx;
						}
						&-right{
							width: calc(100% - 200rpx);
							padding-left: 20rpx;
							box-sizing: border-box;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 30rpx;
							color: #667E90;
							line-height: 32rpx;
							text-align: right;
						}
					}
				}
				&-intro{
					background: #FFFFFF;
					box-shadow: inset 0rpx -1rpx 0rpx 0rpx rgba(229,231,235,0.5);
					border-radius: 24rpx;
					margin-top: 20rpx;
					width: 100%;
					padding: 28rpx 24rpx;
					box-sizing: border-box;
					&-title{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						color: #002846;
						line-height: 42rpx;
					}
					&-content{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #667E90;
						line-height: 42rpx;
						margin-top: 36rpx;
					}
				}
			}
		}
	}
</style>