zhxg_app_v1.0/pages/questionnaire/fillIn.vue

<template>
	<view class="questionnaire-detail">
		<view class="title">
			{{questionnaireDetail.title}}
		</view>
		<view class="list">
			<view class="item" v-for="(question,qIdx) in questionnaireDetail.questions" :key="question.index">
				<view class="title">
					{{question.index}}、{{question.name}}
					<text v-if="question.type == 1">（单选）</text>
					<text v-if="question.type == 2">（多选）</text>
				</view>
				<view class="options" v-if="question.type != 0">
					<view class="option" v-for="(option,oIdx) in question.options" :key="oIdx"
						@tap="selectOption(qIdx,oIdx)">
						<!-- 选项序号 -->
						<view :class="{active:option.isSelected,option_number:true}">
							{{getLetter(oIdx)}}
						</view>
						<!-- 选项内容 -->
						<view class="option_text">
							{{option.content}}
						</view>
					</view>
				</view>
				<view v-else>
					<textarea maxlength="300" @input="textAreaInput"
						v-model="questionnaireDetail['q_' + qIdx + '_text']" placeholder="请输入内容"
						placeholder-class="textarea-placeholder"></textarea>
				</view>
			</view>
		</view>
		<view class="btns" v-if="navIndex==0">
			<button @tap="resetAnswer">重置</button>
			<button @tap="submitForm" :disabled="isSubmitting">提交</button>
		</view>
	</view>
</template>

<script>
	import {
		getQuestionnaire,
		addAnswer,
		updateAnswer
	} from '@/api/questionnaire/questionnaire.js';
	import {
		toBackPage
	} from "@/utils/toBack.js"
	export default {
		data() {
			return {
				isSubmitting: false, //表单提交标志位
				questionnaireDetail: {},
				questionnaireId: "", //问卷id
				targetId: "", //目标id
				navIndex:""
			}
		},
		onLoad(option) {
			this.targetId = option.teacherId;
			this.questionnaireId = option.id;
			this.navIndex=option.navIndex;
			this.getquestionnaireDetail();
			if(this.navIndex==1){
				uni.setNavigationBarTitle({
					title:"问卷详情"
				})
			}
		},
		methods: {
			getquestionnaireDetail() {
				getQuestionnaire({
					questionnaireId: this.questionnaireId,
					targetId: this.targetId
				}).then(res => {
					if (res.code == 200 && res.data) {
						let data = {};
						Object.assign(data, {
							questions: JSON.parse(res.data.questions),
							title: res.data.title,
							id: res.data.id
						});
						this.questionnaireDetail = data;
						console.log(data);
						this.transPaperDefault();
					}
				})
			},
			/**
			 * questionIndxe: 题目的index
			 * optionIndex：题目选项的index
			 */
			selectOption(questionIndxe, optionIndex) {
				// 获取题目
				let questions = this.questionnaireDetail.questions[questionIndxe];

				if (questions.type == 1) {
					//单选题
					let isSelected = this.questionnaireDetail.questions[questionIndxe].options[optionIndex].isSelected;
					if (isSelected) {
						this.questionnaireDetail.questions[questionIndxe].options[optionIndex].isSelected = 0;
					} else {
						this.questionnaireDetail.questions[questionIndxe].options[optionIndex].isSelected = 1;
					}
					for (let i = 0; i < this.questionnaireDetail.questions[questionIndxe].options.length; i++) {
						if (i != optionIndex) {

							if (this.questionnaireDetail.questions[questionIndxe].options[optionIndex].isSelected) {
								this.questionnaireDetail.questions[questionIndxe].options[i].isSelected = 0;
							}
						}

					}
					this.$forceUpdate();
					return;
				}
				if (questions.type == 2) {
					let isSelected = this.questionnaireDetail.questions[questionIndxe].options[optionIndex].isSelected;
					//多选题
					if (isSelected) {
						this.questionnaireDetail.questions[questionIndxe].options[optionIndex].isSelected = 0;
					} else {
						this.questionnaireDetail.questions[questionIndxe].options[optionIndex].isSelected = 1;
					}
					this.$forceUpdate();
					return;
				}
			},
			//获取大写字母
			getLetter(index) {
				return String.fromCharCode(65 + index);
			},
			textAreaInput() {
				this.$forceUpdate();
			},
			//辅助重置文本输入框
			deleteKey() {
				let needAttr = ['questions', 'title', 'id'];
				let keys = Object.keys(this.questionnaireDetail);
				for (let i = 0; i < keys.length; i++) {
					if (!needAttr.includes(keys[i])) {
						//不包含则删除掉
						delete this.questionnaireDetail[keys[i]]
					}
				}
			},
			//重置
			resetAnswer() {
				this.deleteKey();
				for (let i = 0; i < this.questionnaireDetail.questions.length; i++) {
					let questions = this.questionnaireDetail.questions[i];

					if (questions.type == 1 || questions.type == 2) {
						//是选择题全部设置为未选择
						for (let j = 0; j < this.questionnaireDetail.questions[i].options.length; j++) {
							this.questionnaireDetail.questions[i].options[j].isSelected = 0;
						}
					} else {
						this.questionnaireDetail.questions[i].text = 0;
					}
				}
				this.$forceUpdate();
			},
			//把q_xx_text 重新设置回题目中
			transPaper() {
				for (let i = 0; i < this.questionnaireDetail.questions.length; i++) {
					let type = this.questionnaireDetail.questions[i].type;
					if (type == 0) {
						this.questionnaireDetail.questions[i].text = this.questionnaireDetail['q_' + i + '_text'];
					}
				}
			},
			transPaperDefault() {
				for (let i = 0; i < this.questionnaireDetail.questions.length; i++) {
					let type = this.questionnaireDetail.questions[i].type;
					if (type == 0) {
						this.questionnaireDetail['q_' + i + '_text'] = this.questionnaireDetail.questions[i].text;

					}
				}
			},
			submitForm() {
				this.transPaper();
				let data = {};
				Object.assign(data, {
					questions: JSON.stringify(this.questionnaireDetail.questions),
					title: this.questionnaireDetail.title,
					id: this.questionnaireDetail.id,
					score: this.questionnaireDetail.score,
					status: '1'
				})
				this.isSubmitting = true; // 设置为正在提交
				console.log('表单数据',data)
				updateAnswer(data).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: "提交成功"
						})
						toBackPage(1000, () => {
							this.isSubmitting = false;
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.questionnaire-detail {
		padding: 30rpx 30rpx 95rpx;

		&>.title {
			font-weight: bold;
			font-size: 40rpx;
			text-align: center;
			margin-bottom: 35rpx;
		}

		.list {
			.item {
				.title {
					font-weight: bold;
				}

				/* 选项 */
				.option {
					display: flex;
					justify-content: start;
					gap: 10px;
					margin: 16px 0;

					.option_number {
						text-align: center;
						width: 24px;
						height: 24px;
						border-radius: 50%;
						border: 1px solid #E1EAF4;
						line-height: 22px;
						font-size: 14px;
						color: #646873;
						cursor: pointer;
					}

					.active {
						background-color: #409EFF;
						border: 1px solid #409EFF;
						color: #fff;
					}
				}

				textarea {
					border: 1px solid #d3d3d3;
					margin: 40rpx 0;
					width: 100%;
					border-radius: 16rpx;
					padding: 20rpx;
					color: #202020;
					opacity: 0.7;
					height: 80px;

					.textarea-placeholder {
						color: #202020;
						opacity: 0.5;
					}

				}
			}
		}

		.btns {
			padding: 10px;
			display: flex;
			background: white;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 999;

			button {
				flex: 1;
				background-color: #1890FF;
				color: white;

				&:first-child {
					margin-right: 10px;
					background-color: white;
					border: 1px solid #1890FF;
					color: #1890FF;
				}
			}

		}
	}
</style>