question_uniapp/pages/questionnaire/answer.vue

<template>
	<view class="page">
		<nav-bar :title="$t('answer.title')" bgColor="#fff"></nav-bar>
		<!-- 内容切换 -->
		<view class="content">
			<view class="v2" style="margin-top: 20rpx">
				<view class="title">{{detail.questionnaire.title}}</view>
				<view style="font-weight: 400;font-size: 14px;color: #999999;">{{$t('answer.text1')}}: {{detail.created_at}}</view>
				<view v-for="(item, index) in detail.questionnaire.body" :key="index" style="margin-top: 30rpx;" :id="'item'+index">
					<view style="font-size: 28rpx; color: #333; font-weight: 600;">
						<view style="float: left; width: 8%;" :class="ans==index? 'ans' : ''">{{index+1}})</view>
						<view style="float: left; width: 92%;" :class="ans==index? 'ans' : ''">{{item.question}}</view>
						<view style="clear: both;"></view>
					</view>
					<view style="margin-top: 20rpx;">
						<uni-row :gutter="10">
							<radio-group style="width: 100%;">
								<uni-col :span="24" v-for="(answer, i) in item.answer" :key="i">
									<radio :value="String.fromCharCode(65+i)" :checked="item.Res === (i)"  style="width: 100%; padding-left: 7%;" >
									<view >
										<view :class="ans==index? 'ans' : ''" style="float: left; width: 6%; font-size: 28rpx;">{{String.fromCharCode(65+i)}} :</view>
										<view :class="ans==index? 'ans' : ''" style="float: left; width: 80%; margin-left: 1%; font-size: 28rpx;">{{answer}}</view>
									</view>
									</radio>
								</uni-col>
							</radio-group>
						</uni-row>
					</view>
				</view> 
				<view style="clear: both;"></view>
			</view>
		</view>
		<view class="h5_press_save">
			<button class="download">{{msg}}</button>
		</view>
	</view>
</template>

<script>
	import zNavigation from '@/components/module/navigation.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			zNavigation
		},
		data() {
			return {
				detail:{
					questionnaire:{
						title:''
					}
				},
				msg:'',
				ans: -1,
				oldans: -1,
				id: 0,
				top: 0,
			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		//第一次加载
		onLoad(e) {
			uni.showLoading({
				title: this.$t('loading')
			});
			if(e.id){
				this.id = e.id;
				this.getDetails(e.id);
			}
		},
		//页面显示
		onShow() {},
		methods: {
			getDetails(id){
				this.$http.post('/api/server/detail?server_id='+id+'&lang='+this.$i18n.locale).then(res => {
					if(res.code == 0){
						this.detail = res.data;
						uni.hideLoading();
						if(parseInt(this.detail.step_text.status) === 8888){
							//答题中
							this.msg = this.detail.step_text.msg;
							this.ans = this.detail.step_text.index-1;
							for(let i = 0; i<this.detail.step_text.index; i++){
								this.detail.questionnaire.body[i].Res = this.detail.answer[i];
							}
							if(this.ans != this.oldans){
								this.$nextTick(() => {
									this.getElementTop(this.ans);
									this.oldans = this.detail.step_text.index-1;
								});
							}
						}else if(parseInt(this.detail.step_text.status) === 9999){
							this.msg = this.detail.step_text.msg;
						}else{
							this.msg = this.detail.step_text.msg;
							this.ans = this.detail.questionnaire.body.length-1;
							for(let i = 0; i<=this.ans; i++){
								this.detail.questionnaire.body[i].Res = this.detail.answer[i];
							}
							this.$nextTick(() => {
								this.getElementTop(this.ans);
							});
						}
						if(parseInt(this.detail.step_text.status) !== 2){
							const seconds = parseInt(this.detail.step_text.remaining_seconds) + 1;
							const timerId = setTimeout(() => {
								this.getDetails(id);
								clearTimeout(timerId);
							}, seconds*1000);
						}
					}
				}).catch(err => {
					uni.hideLoading()
				});
			},
			getElementTop(id) {
				let _sef = this;
				// 创建一个节点选择器
				const query = uni.createSelectorQuery();
				// 在组件内使用 this 指向当前组件实例
				query.select('#item'+id).boundingClientRect(function(rect) {
					// rect 是获取到的节点的布局位置信息
					if (rect) {
						uni.pageScrollTo({
						    scrollTop: rect.top + _sef.top - 50, // 目标位置的偏移量，根据实际情况调整
						    duration: 300 // 动画时长，单位ms
						});
						_sef.top += rect.top - 50;
						
					} else {
						
					}
				}).exec(); // 注意这里的 exec() 是必须的，用于执行查询
			},
			onTokenJump(url) {
				this.judgeLogin(() => {
					uni.navigateTo({
						url: url
					});
				});
			},
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';
	body{background-color: #fff;}
	.page{background-color: #fff; min-height: 100vh; overflow: hidden;}
	.b{height: 70rpx; width: 200rpx; line-height: 70rpx; font-size: 28rpx;}
	::v-deep .uni-radio-input{width: 30rpx; height: 30rpx; float: left;}
	::v-deep .uni-radio-wrapper{width: 100%; display: block;}
	::v-deep .uni-radio-wrapper{-webkit-align-items: flex-start; -webkit-box-align:flex-start; align-items:flex-start; vertical-align: top}
	//修改slider高度
	::v-deep .uni-slider-handle-wrapper {height: 14rpx !important;}
	//修改slider选中的背景色
	::v-deep .uni-slider-track {background-image: linear-gradient(to right,#6cd0ca,#133fce) !important;}
	::v-deep .uni-slider-handle{display: none;}
	::v-deep .uni-slider-thumb{display: none;}
	::v-deep uni-slider{margin: 16rpx 0px !important;}
	::v-deep uni-slider .uni-slider-tap-area{padding: 4rpx 0rpx !important;}

	.v2{ padding: 10px; width: 94%; margin: 0rpx auto; }
	.v2 .title{font-weight: 600; font-size: 16px; color: #333;}
	.w{background-color: #F8F8F8; border-radius: 10px; padding: 20px 10px;}
	.w .t{text-align: center; margin-top: 10px; font-size: 14px;}
	.head-nav {display: flex;align-items: center;color: #999;font-size: 36rpx;font-weight: 500;background-color: #fff;}
	.tab{color: #999;font-size: 32rpx;font-weight: 500;float: left;padding: 40rpx;}
	.activite {color: #333;border-bottom: 2px solid #1D61E7;}
	.head-nav>view {padding-bottom: 10rpx;}
	.content {height: 100%; padding-bottom: 20rpx;}
	.h5_press_save {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			display: flex;
			align-items: center;
			z-index: 100;
			.download {
				font-size: 30rpx;
				color: #ffffff;
				background-color: rgba(0,0,0,0.5);
				display: flex;
				align-items: center;
				flex-direction: row;
				justify-content: center;
				position: absolute;
				padding: 0rpx 30rpx;
				border-radius: 40rpx;
				bottom: 20rpx;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	.ans{
		color: #1D61E7;
	}
</style>