ChuangHengWx/pages/questionnaireFill2.vue

<template>
	<view class="page" :style="{ 'min-height': h + 'px', 'padding-top': mt + 'px' }">
		<cus-header title="问卷填写" :backAlert="true"></cus-header>
		<div class="top adffcacjc">
			<p>{{ title }}</p>
			<p class="tip">
				第
				<span>{{ currentIndex + 1 }}</span>
				/{{ list.length }} 题，已作答
				<span style="font-weight: bold">{{ answerNum }}</span>
				题，请耐心选择！
			</p>
		</div>
		<scroll-view class="list" scroll-y="true" :scroll-top="scrollTop" :style="{ height: h - 180 - mt + 'px' }">
			<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>
				<div v-if="currentQuestion" class="l_item" :id="'question-' + currentIndex">
					<QuestionItem :item="currentQuestion" :index="currentIndex" @change="handleAnswerChange"></QuestionItem>
				</div>
			</template>
		</scroll-view>
		<div class="bottom adfacjb">
			<view class="zt_btn secondary" :class="{disabled: currentIndex === 0 || isSubmitting}" @tap="previousQuestion">上一题</view>
			<view class="zt_btn" :class="{disabled: isSubmitting}" @tap="nextQuestion">
				{{ currentIndex === list.length - 1 ? (isSubmitting ? '提交中...' : '提交问卷') : '下一题' }}
			</view>
		</div>
	</view>
</template>

<script>
import QuestionItem from '@/components/QuestionItem/index2.vue';
export default {
	components: { QuestionItem },
	data() {
		return {
			title: '',
			teamQuestionnaireId: '',
			list: [],
			currentIndex: 0,
			questionnaire: null,
			isLoading: true,
			isSubmitting: false,
			scrollTop: 0, // scroll-view 的滚动位置
			oldScrollTop: 0, // 辅助值，确保即使滚动到相同位置也能触发
			userAnswerTemp: []
		};
	},
	onLoad(option) {
		this.title = option.title;
		this.teamQuestionnaireId = option.teamQuestionnaireId;
		this.getList();
	},
	computed: {
		answerNum() {
			return this.list.filter(l => l?.answer.filter(a => a?.value).length == this.userAnswerTemp.length).length || 0;
		},
		currentQuestion() {
			return this.list[this.currentIndex] || null;
		}
	},
	methods: {
		handleAnswerChange(e) {
			const item = this.list[e.index];
			if (item) {
				let answer = JSON.parse(JSON.stringify(item.answer));
				answer.forEach(a=>{
					a.value = a.assessmentMethod==e.assessmentMethod?e.value:a.value
				})
				this.$set(item, 'answer', answer);
				if (item.warn) {
					this.$set(item, 'warn', false);
				}
			}
			this.setQuestionnaireCache();
		},
		getList() {
			let questionnaire = null;
			try {
				const cacheStr = uni.getStorageSync('questionnaire');
				if (cacheStr) {
					questionnaire = JSON.parse(cacheStr);
				}
			} catch (e) {
				console.error('解析问卷缓存失败:', e);
				uni.removeStorageSync('questionnaire');
			}

			this.isLoading = true;
			this.$api
				.get('/core/team/member/answer/listByUser/' + this.teamQuestionnaireId)
				.then((res) => {
					if (res.data.code !== 0) return this.$showToast(res.data.msg);
					const answerMap = new Map();
					if (questionnaire && this.teamQuestionnaireId == questionnaire.key) {
						questionnaire.list.forEach((q) => answerMap.set(q.id, q.answer));
					}
					
					this.userAnswerTemp = res.data.data[0].userAnswer.map(u=>{
						return {
							assessmentMethod:u.assessmentMethod,
							value:''
						}
					}) 
					let uaTemp = JSON.parse(JSON.stringify(this.userAnswerTemp))
					this.list = res.data.data.map(item => {
						let _a = answerMap.get(item.id);
						return {
							...item,
							answer:_a?uaTemp.map(u=>{
								return {
									assessmentMethod:u.assessmentMethod,
									value:_a.find(a=>a.assessmentMethod==u.assessmentMethod)?.value||''
								}
							}):this.userAnswerTemp,
							warn: false
						}
					});
					this.list.forEach(l=>{
						let _a = answerMap.get(l.id);
						l.userAnswer.forEach(u=>{
							u.answer = _a?(_a.find(a=>a.assessmentMethod==u.assessmentMethod)?.value||''):''
						})
					})
					const firstUnansweredIndex = this.list.findIndex(l =>
						l.answer.filter(a => a && a.value).length !== this.userAnswerTemp.length)
					this.currentIndex = firstUnansweredIndex === -1 ? 0 : firstUnansweredIndex
				})
				.catch(() => {
					this.isLoading = false;
					this.$showToast('网络异常，请稍后重试');
				})
				.finally(() => {
					this.isLoading = false;
				});
		},
		previousQuestion() {
			if (this.currentIndex === 0 || this.isSubmitting) return
			this.currentIndex--
			this.scrollTop = 0
		},
		nextQuestion() {
			if (this.isSubmitting || !this.currentQuestion) return
			const current = this.currentQuestion
			const isAnswered = current.answer.filter(a => a && a.value).length === this.userAnswerTemp.length
			this.$set(current, 'warn', !isAnswered)
			if (!isAnswered) {
				this.$showToast(`第 ${this.currentIndex + 1} 项未选择完整答案，请选择。`)
				return
			}
			if (this.currentIndex < this.list.length - 1) {
				this.currentIndex++
				this.scrollTop = 0
				return
			}
			this.submitWj()
		},
		submitWj() {
			if (this.isSubmitting) return;

			let firstUnansweredIndex = -1;
			this.list.forEach((l, i) => {
				const isAnswered = l.answer.filter(a => a?.value).length==this.userAnswerTemp.length?true:false;
				this.$set(l, 'warn', !isAnswered);
				if (!isAnswered && firstUnansweredIndex === -1) {
					firstUnansweredIndex = i;
				}
			});

			if (firstUnansweredIndex > -1) {
				this.currentIndex = firstUnansweredIndex
				this.scrollTop = 0
				this.$showToast(`第 ${firstUnansweredIndex + 1} 项未选择完整答案，请选择。`)
				return; // 终止提交
			}

			const submitList = this.list.map((l) => {
				let {answer,userAnswer,warn,...other} = JSON.parse(JSON.stringify(l));
				userAnswer.forEach(u=>{
					u.questionOption.forEach(q=>{
						q.userAnswer=answer.find(a=>a.assessmentMethod==u.assessmentMethod)?.value==q.questionOption;
					})
				})
				return {
					...other,
					isAnswer: '1',
					userAnswer
				};
			});
			
			this.isSubmitting = true;
			this.$api
				.post('/core/team/member/answer/submit', submitList)
				.then((res) => {
					if (res.data.code !== 0) {
						this.isSubmitting = false;
						return this.$showToast(res.data.msg);
					}
					uni.removeStorageSync('questionnaire');
					uni.redirectTo({
						url: '/pages/questionnaireResult'
					});
				})
				.catch((err) => {
					this.$showToast('网络异常，请稍后重试');
				})
				.finally(() => {
					this.isSubmitting = false;
				});
		},
		setQuestionnaireCache() {
			const answeredList = this.list.filter((l) => l.answer.filter(a => a?.value).length>0).map((l) => ({ id: l.id, answer: l.answer }));
			if (answeredList.length === 0) {
				uni.removeStorageSync('questionnaire');
				return;
			}

			const qinfo = {
				key: this.teamQuestionnaireId,
				list: answeredList
			};
			uni.setStorageSync('questionnaire', JSON.stringify(qinfo));
		}
	}
};
</script>

<style scoped lang="less">
.loading-container {
	width: 100%;
	height: 100%;
}
.page {
	background: #f7f2f6;
	box-sizing: border-box;
	/* 【重要】让页面本身不可滚动，所有滚动都交给scroll-view处理 */
	height: 100vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;

	.top {
		p {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 42rpx;
			color: #252525;
			line-height: 51rpx;
			text-align: center;
			margin-top: 48rpx;
		}
		.tip {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #646464;
			line-height: 26rpx;
			text-align: center;
			margin-top: 36rpx;
			span {
				margin: 0 10rpx;
			}
		}
	}

	.list {
		width: 100%;
		/* flex: 1;  如果使用flex布局，可以这样自适应高度 */
		/* overflow-y: auto;  scroll-view自带滚动，无需此属性 */
		margin-top: 28rpx;
		.l_item {
			margin-top: 20rpx;
			width: 100%;
			background: #ffffff;
			padding: 6rpx;
			box-sizing: border-box;

			&:first-child {
				margin-top: 0;
			}
		}
	}

	.bottom {
		width: calc(100% - 80rpx);
		height: 88rpx;
		position: fixed;
		left: 40rpx;
		bottom: 40rpx;
		gap: 20rpx;
		.zt_btn {
			flex: 1;
			margin: 0;
			&.secondary {
				background: #FFFFFF;
				border: 2rpx solid #33A7A7;
				color: #33A7A7;
			}
			&.disabled {
				opacity: .5;
			}
		}
	}
}
</style>