ChuangHengWx/pagesPublish/backgroundSurveyIntro.vue

<template>
	<view class="intro-page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title="填写问卷"></cus-header>
		<view class="intro-card adffcac">
			<view class="intro-stage">阶段 {{stage === 'background' ? '一' : '二'}}</view>
			<view class="intro-title">{{stageTitle}}</view>
			<view class="intro-line"></view>
			<view class="intro-description">{{description}}</view>
			<view class="intro-count">{{questionCount}}</view>
			<view class="zt_btn intro-button" @click="start">{{buttonText}}</view>
		</view>
	</view>
</template>

<script>
	import CusHeader from '@/components/CusHeader/index.vue'
	import backgroundSurveyRules from '@/utils/backgroundSurvey.js'
	const { questionnaireFillUrl } = backgroundSurveyRules

	export default {
		components:{ CusHeader },
		data(){
			return {
				stage:'background',
				teamQuestionnaireId:'',
				teamId:'',
				type:'',
				turnType:'',
				title:''
			}
		},
		computed:{
			stageTitle(){
				return this.stage === 'background'
					? '团队背景调研'
					: 'PERILL团队发展动态评估'
			},
			description(){
				return this.stage === 'background'
					? '请根据您对团队当前状态的真实认知完成选择。如果没有符合的选项，可在“其他”中填写自己的理解。'
					: '请继续完成PERILL专业评估。所有信息将被严格保密，并仅用于团队评估分析。'
			},
			questionCount(){
				return this.stage === 'background' ? '共5道单选题' : '共36道专业评估题'
			},
			buttonText(){
				return this.stage === 'background' ? '开始背景调研' : '开始PERILL评估'
			}
		},
		onLoad(options){
			this.stage = options.stage || 'background'
			this.teamQuestionnaireId = options.teamQuestionnaireId || ''
			this.teamId = options.teamId || ''
			this.type = options.type || ''
			this.turnType = options.turnType || ''
			this.title = options.title || ''
		},
		methods:{
			start(){
				const params = {
					teamQuestionnaireId:this.teamQuestionnaireId,
					teamId:this.teamId,
					type:this.type,
					turnType:this.turnType,
					title:this.title
				}
				if(this.stage === 'background'){
					uni.navigateTo({
						url:`/pagesPublish/backgroundSurvey?mode=member&teamQuestionnaireId=${encodeURIComponent(this.teamQuestionnaireId)}&teamId=${encodeURIComponent(this.teamId)}&type=${encodeURIComponent(this.type)}&turnType=${encodeURIComponent(this.turnType)}&title=${encodeURIComponent(this.title)}`
					})
					return
				}
				uni.navigateTo({ url:questionnaireFillUrl(params) })
			}
		}
	}
</script>

<style scoped lang="scss">
	.intro-page{
		background:#F7F7F7;
		box-sizing:border-box;
		padding:40rpx 28rpx;
	}
	.intro-card{
		background:#FFFFFF;
		border-radius:28rpx;
		margin-top:60rpx;
		padding:70rpx 42rpx 50rpx;
		text-align:center;
	}
	.intro-stage{
		font-size:26rpx;
		color:#199C9C;
		background:#EAF8F8;
		border-radius:28rpx;
		padding:12rpx 28rpx;
	}
	.intro-title{
		font-size:40rpx;
		color:#002846;
		font-weight:bold;
		line-height:56rpx;
		margin-top:34rpx;
	}
	.intro-line{width:80rpx;height:6rpx;background:#FFD750;border-radius:4rpx;margin-top:28rpx;}
	.intro-description{font-size:28rpx;color:#667E90;line-height:48rpx;margin-top:36rpx;text-align:left;}
	.intro-count{font-size:30rpx;color:#335368;margin-top:36rpx;}
	.intro-button{width:100%;margin-top:70rpx;}
</style>