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>
				<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:[],
				arrayKey:'userAnswer',
				isLoading: true,
			}
		},
		onLoad(options) {
			this.type = options.type;
			this.questionnaireName = options.questionnaireName;
			if(this.type==2) this.getData2(options.teamQuestionnaireId)
			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;
				})
			},
			getData2(id){
				this.isLoading = true;
				this.$api.get(`/core/questionnaire/${id}`).then(({data:res})=>{
					if(res.code!==0) return this.$showToast(res.msg)
					this.arrayKey = 'questionOption';
					if(res.data){
						this.list = res.data.detailList||[];
						this.total = res.data.detailList.length;
					}else 
					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;
		}
		
		.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>