ChuangHengWx/pages/questionnaireFill.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>{{list.length}}</span> 题，已作答 <span style="font-weight: bold;">{{answerNum}}</span> 题，请耐心选择！</p>
		</div>
		<div class="list" :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 class="l_item" v-for="(item,index) in list" :key="item.id">
					<QuestionItem :item="item" :index="index" @change="handleAnswerChange"></QuestionItem>
				</div>
			</template>
		</div>
		<div class="bottom">
			<view class="zt_btn" @tap="submitWj">{{isSubmitting ? '提交中...' : '提交问卷'}}</view>
		</div>
	</view>
</template>

<script>
	import QuestionItem from '@/components/QuestionItem/index.vue'
	export default {
		components:{QuestionItem},
		data(){
			return {
				title:'',
				teamQuestionnaireId:'',
				list:[],
				questionnaire:null,
				isLoading: true, // 新增加载状态
				isSubmitting: false // 新增提交状态
			}
		},
		onLoad(option) {
			this.title = option.title;
			this.teamQuestionnaireId = option.teamQuestionnaireId;
			this.getList();
		},
		computed: {
			answerNum() {
				return this.list.filter(l => !!l.answer).length || 0;
			}
		},
		methods:{
			handleAnswerChange(e) {
				const item = this.list[e.index];
				if (item) {
					this.$set(item, 'answer', e.value);
					if (item.warn) {
						this.$set(item, 'warn', false);
					}
				}
			},
			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.list = res.data.data.map(item => ({
						...item,
						warn: false,
						answer: answerMap.get(item.id) || '' // 直接从 Map 中获取答案
					}));
				}).catch(()=>{
					this.isLoading = false;
					this.$showToast('网络异常，请稍后重试');
				}).finally(() => {
					this.isLoading = false;
				});
			},
			submitWj() {
			    if (this.isSubmitting) return;
			
			    let firstUnansweredIndex = -1;
			    this.list.forEach((l, i) => {
			        const isAnswered = !!l.answer;
			        this.$set(l, 'warn', !isAnswered);
			        if (!isAnswered && firstUnansweredIndex === -1) {
			            firstUnansweredIndex = i;
			        }
			    });
			
			    if (firstUnansweredIndex > -1) {
			        // 使用 uni.showModal 以提供更好的用户体验
			        return uni.showModal({
			            title: '提示',
			            content: `第 ${firstUnansweredIndex + 1} 项未选择答案，请选择。`,
			            showCancel: false
			        });
			    }
			
			    // 使用更清晰的逻辑构建提交数据
			    const submitList = this.list.map(question => {
			        // 映射 userAnswer 数组，并添加一个清晰的 `isSelected` 字段
			        const formattedUserAnswer = question.userAnswer.map(option => ({
			            ...option,
			            // 假设后端需要一个布尔值来表示是否选中
			            isSelected: option.questionOption === question.answer
			        }));
			
			        // 剔除前端专用的字段(answer, warn)，保持提交数据纯净
			        const { answer, warn, ...restOfQuestion } = question;
			
			        return {
			            ...restOfQuestion,
			            isAnswer: '1', // 标记为已作答
			            userAnswer: formattedUserAnswer // 使用格式化后的数组
			        };
			    });
			
			    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');
			        // 提交成功后建议使用 redirectTo 或 reLaunch，防止用户返回到填写页
			        uni.redirectTo({
			            url: '/pages/questionnaireResult'
			        });
			    }).catch(err => {
			        // this.isSubmitting = false; // .finally() 中已经处理
			        this.$showToast('网络异常，请稍后重试');
			    })
			    .finally(() => {
			        this.isSubmitting = false; // 确保无论成功或失败，提交状态都会被重置
			    });
			},
			setQuestionnaireCache(){
				const answeredList = this.list
					.filter(l => l.answer) // 过滤出已回答的
					.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));
			}
		},
		onUnload() {
			this.setQuestionnaireCache();
		},
		onBackPress() {
			this.setQuestionnaireCache();
			return false; 
		}
	}
</script>

<style scoped lang="less">
	.loading-container {
		width: 100%;
		height: 100%;
	}
	.page{
		background: #F7F2F6;
		box-sizing: border-box;
		
		.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%;
			overflow-y: auto;
			margin-top: 28rpx;
			.l_item{
				margin-top: 20rpx;
				width: 100%;
				background: #FFFFFF;
				padding: 6rpx;
				box-sizing: border-box;
			}
		}
	
		.bottom{
			width: calc(100% - 80rpx);
			height: 88rpx;
			position: fixed;
			left: 40rpx;
			bottom: 40rpx;
		}
	}
</style>