ChuangHengWx/pagesPublish/questionnairePreview.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">{{questionnaireName}}</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':(0/total*100)+'%'}"></view>
				</view>
				<view class="top-progress-num"><span>{{0}}</span>/{{total}}</view>
			</view>
		</view>
		<view class="list">
			<div v-if="isLoading" class="loading-container adfacjc">
				<div class="adfac">
					<u-loading-icon size="42"></u-loading-icon>
					<text style="margin-left: 10rpx; font-size: 34rpx; color: #666666">问卷加载中...</text>
				</div>
			</div>
			<template v-else>
				<view class="preview-section" v-if="type==2">
					<view class="preview-section-title">阶段一：团队背景调研</view>
					<view class="preview-tip" v-if="!backgroundQuestions.length">选择团队并开始背景调研后可预览题目</view>
					<view class="background-question" v-for="(question,index) in backgroundQuestions" :key="'background-'+question.detailId">
						<view class="background-question-title">{{index+1}}. {{question.question}}</view>
						<view class="background-question-en">{{question.questionEnglish}}</view>
						<view class="background-option" v-for="option in question.options" :key="option.code">
							{{option.text}}
						</view>
					</view>
					<view class="preview-section-title perill-title">阶段二：PERILL团队发展动态评估</view>
				</view>
				<block v-if="list.length">
					<question-item v-for="(item,index) in list" :arrayKey="arrayKey" :index="index" :key="index" :item="item"></question-item>
				</block>
				<block v-else>
					<div class="loading-container adfacjc">
						<div class="adfac">
							<text style="margin-left: 10rpx; font-size: 34rpx; color: #666666">该问卷暂无选项</text>
						</div>
					</div>
				</block>
			</template>
		</view>
		<view class="bottom adfacjb">
			<view class="zt_btn" @click="handleBack">返回</view>
		</view>
	</view>
</template>

<script>
	import QuestionItem from '@/components/QuestionItem/index3.vue'
	export default {
		components:{ QuestionItem },
		data(){
			return {
				type:'',
				questionnaireName:'',
				total:0,
				list:[],
				backgroundQuestions:[],
				arrayKey:'userAnswer',
				isLoading: true,
			}
		},
		onLoad(options) {
			this.type = options.type;
			this.questionnaireName = options.questionnaireName;
			if(this.type==2) this.getData2(options.questionnaireId, options.backgroundSurveyId)
			else this.getData(options.teamQuestionnaireId)
		},
		methods:{
			getData(id){
				this.isLoading = true;
				this.$api.get(`/core/team/member/answer/listByUser/${id}`).then(({data:res})=>{
					if(res.code!==0) return this.$showToast(res.msg)
					this.list = res.data;
					this.total = res.data.length;
					this.isLoading = false;
				})
			},
			async getData2(id, backgroundSurveyId){
				this.isLoading = true;
				try {
					const requests = [this.$api.get(`/core/questionnaire/${id}`)]
					if(backgroundSurveyId){
						requests.push(this.$api.get(`/core/background/survey/${backgroundSurveyId}`))
					}
					const responses = await Promise.all(requests)
					const res = responses[0].data
					if(res.code!==0) return this.$showToast(res.msg)
					this.arrayKey = 'questionOption';
					if(res.data){
						this.list = res.data.detailList||[];
						this.total = this.list.length;
					}
					if(responses[1]){
						const backgroundRes = responses[1].data
						if(backgroundRes.code!==0) return this.$showToast(backgroundRes.msg)
						this.backgroundQuestions = backgroundRes.data && backgroundRes.data.questions || []
						this.total += this.backgroundQuestions.length
					}
				} catch(error) {
					this.$showToast(error && (error.message || error.msg) || '问卷预览加载失败')
				} finally {
					this.isLoading = false;
				}
			},
			handleBack(){
				uni.navigateBack();
			}
		}
	}
</script>

<style scoped lang="scss">
	.loading-container {
		width: 100%;
		height: 100%;
	}
	.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;
					}
				}
			}
		}
			
		.list{
			flex: 1;
			padding: 0 24rpx;
			overflow-y: auto;
		}
		.preview-section-title{
			font-size:32rpx;
			font-weight:bold;
			color:#002846;
			line-height:44rpx;
			margin:8rpx 0 24rpx;
		}
		.perill-title{margin-top:42rpx;}
		.preview-tip{
			background:#F7F8FA;
			border-radius:16rpx;
			padding:24rpx;
			font-size:26rpx;
			color:#8A9BA8;
			margin-bottom:30rpx;
		}
		.background-question{
			background:#F7F8FA;
			border-radius:18rpx;
			padding:26rpx 22rpx;
			margin-bottom:20rpx;
			&-title{font-size:29rpx;color:#002846;line-height:44rpx;}
			&-en{font-size:24rpx;color:#667E90;line-height:36rpx;margin-top:10rpx;}
		}
		.background-option{
			font-size:25rpx;
			color:#335368;
			line-height:38rpx;
			margin-top:14rpx;
			white-space:pre-line;
		}
		
		.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;
			
			&-right{
				width: 100%;
				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;
			}
		}
	}
</style>