GCLS_Page_Mobile/components/select-question/select-question.vue

<template>
	<!-- 选择题 -->
	<view class="select-area" v-model="questionData">
		<view class="question_title">
			<text class="question_number">
				{{ questionNumberEndIsBracket(questionData.property.question_number) }}
			</text>
			<text class="question_stem" v-html="sanitizeHTML(questionData.stem)"
				:ref="'richText-1-1'+questionData.question_id"
				@longpress="previewByRichTextImg(-1,-1,questionData.question_id)">
			</text>
		</view>
		<view class="description"
			v-if="isEnable(questionData.property.is_enable_description)&&questionData.description.length > 0"
			v-html="sanitizeHTML(questionData.description)" :ref="'richText-2-2'+questionData.question_id"
			@longpress="previewByRichTextImg(-2,-2,questionData.question_id)">
		</view>
		<template v-if="isSubdivision">
			<view class="selected-area">
				<view class="selected-box" v-for="(item, indexI) in questionData.option_list">
					<text class="serial-number" :style="{'font-size':questionData.property.option_question_number_font_size}">
						{{ isEnable(isEnableManualModify)?(item.custom_number?item.custom_number+'.':''):computedQuestionNumber(indexI,questionData.option_number_show_mode) }}
					</text>
					<view class="selected-cell-box">
						<view v-for="(opt, indexO) in item.data_list" :key="opt.mark"
							:class="['selected-cell', { active: isAnswer(opt.mark,item.mark) },...computedAnswerClass(opt.mark,item.mark)]"
							@click="selectAnswer(opt.mark,item.mark)">
							<text class="content" v-html="sanitizeHTML(opt.content)"
								:ref="'richText'+indexI+indexO+questionData.question_id"
								@longpress="previewByRichTextImg(indexI,indexO,questionData.question_id)"></text>
						</view>
					</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="radio-area" v-if="viewSingle">
				<radio-group @change="radioChange">
					<label :class="['uni-list-cell', { active: isAnswer(item.mark) },...computedAnswerClass(item.mark)]"
						v-for="(item, index) in questionData.option_list" :key="item.mark">
						<view>
							<radio :value="item.mark" :checked="index === current" style="transform: scale(0.7); margin-right: 24rpx"
								color="#306EFF" :disabled="answer_control[questionData.question_id].isReadOnly" />
						</view>
						<text class="serial-number" :style="{'font-size':questionData.property.option_question_number_font_size}">
							{{ isEnable(isEnableManualModify)?(item.custom_number?item.custom_number+'.':''):computedQuestionNumber(index,questionData.option_number_show_mode) }}
						</text>
						<text class="content" v-html="sanitizeHTML(item.content)" :ref="'richText'+index+1+questionData.question_id"
							@longpress="previewByRichTextImg(index,1,questionData.question_id)"></text>
					</label>
				</radio-group>
			</view>
			<view class="checkbox-area" v-else>
				<checkbox-group @change="checkboxChange">
					<label :class="['uni-list-cell', { active: isAnswer(item.mark) },...computedAnswerClass(item.mark)]"
						v-for="(item, index) in questionData.option_list" :key="item.mark">
						<view>
							<checkbox :value="item.mark" :checked="item.checked" style="transform: scale(0.7); margin-right: 24rpx;"
								color="#306EFF" :disabled="answer_control[questionData.question_id].isReadOnly" />
						</view>
						<text class="serial-number" :style="{'font-size':questionData.property.option_question_number_font_size}">
							{{ isEnable(isEnableManualModify)?(item.custom_number?item.custom_number+'.':''):computedQuestionNumber(index,questionData.option_number_show_mode) }}
						</text>
						<text class="content" v-html="sanitizeHTML(item.content)" :ref="'richText'+index+1+questionData.question_id"
							@longpress="previewByRichTextImg(index,1,questionData.question_id)"></text>
					</label>
				</checkbox-group>
			</view>
		</template>
		<view class="reference" v-if="isViewAnalysis&&answer_control[questionData.question_id].isViewRightAnswer">
			<text class="reference-title">解析</text>
			<text class="reference-answer" v-html="sanitizeHTML(questionData.analysis)"
				:ref="'richText-3-3'+questionData.question_id"
				@longpress="previewByRichTextImg(-3,-3,questionData.question_id)">
			</text>
		</view>
	</view>
</template>

<script>
	import {
		selectTypeList,
		questionData,
		sanitizeHTML,
		isEnable,
		computedQuestionNumber,
		answer_control
	} from '@/pages/answer_question/common/data/common.js';
	import {
		changeNumToHan,
		checkNum
	} from '@/utils/transform.js';
	import AnswerControlMixin from '@/pages/answer_question/common/data/AnswerControlMixin.js';
	export default {
		name: "select-question",
		mixins: [AnswerControlMixin],
		props: {
			questionData: questionData,
			isEnableManualModify: {
				type: String,
				default: 'false',
			},
		},
		data() {
			return {
				computedQuestionNumber,
				isEnable,
				sanitizeHTML,
				current: -1,
				answer_control,
			}
		},
		watch: {
			'questionData.question_id': {
				handler(val) {
					this.setUserAnswer();
				},
				immediate: true,
				deep: true
			}
		},
		computed: {
			viewSingle: function() {
				return this.questionData.property.select_type === selectTypeList[0].value ? true : false;
			},
			isSubdivision() {
				return isEnable(this.questionData.property.is_option_subdivision);
			},
			isViewAnalysis: function() {
				return isEnable(this.questionData.property.is_enable_analysis);
			}
		},
		methods: {
			selectAnswer(mark, parent_mark) {
				if (this.answer_control[this.questionData.question_id].isReadOnly) return;
				let _answer_list = this.questionData.user_answer[this.questionData.question_id].answer_list;
				const en = _answer_list.find(item => item.mark === parent_mark);
				if (en == undefined) {
					_answer_list.push({
						'mark': parent_mark,
						'value_list': [mark],
					});
				} else {
					if (this.viewSingle) {
						en.value_list = [mark];
					} else {
						let markIndex = en.value_list.findIndex(p => p === mark);
						if (markIndex !== -1) {
							//存在删除
							en.value_list.splice(markIndex, 1);
						} else {
							//不存在添加
							en.value_list.push(mark);
						}
					}
				}
				this.isAnswer(mark, parent_mark);
				this.$forceUpdate();
				this.saveUserAnswer();
			},
			radioChange: function(e) {
				if (this.answer_control[this.questionData.question_id].isReadOnly) return;
				this.questionData.user_answer[this.questionData.question_id].answer_list = [e.detail.value];
				this.current = this.questionData.option_list.findIndex(p => p.mark === e.detail.value);
				this.saveUserAnswer();
			},
			checkboxChange: function(e) {
				if (this.answer_control[this.questionData.question_id].isReadOnly) return;
				this.questionData.user_answer[this.questionData.question_id].answer_list = e.detail.value;
				this.questionData.option_list.forEach(p => {
					p.checked = false
					if (e.detail.value.find(x => x === p.mark))
						p.checked = true
				})
				this.saveUserAnswer();
			},
			//切换选项保存答案
			saveUserAnswer: function() {
				var questionId = this.questionData.question_id;
				this.questionData.user_answer[questionId].isEdit = true;
				var ansed = this.questionData.user_answer[questionId].answer_list;
				this.questionData.user_answer[questionId].is_fill_answer = ansed.length > 0;
				this.questionData.user_answer[questionId].content = JSON.stringify(ansed);
				this.questionData.user_answer[questionId].answer_list = ansed;
				this.$emit("setSubAnswer", this.questionData.user_answer[questionId], questionId);
			},
			//回显
			setUserAnswer: function() {
				var that = this;
				var callback = function() {
					var userAnswer = [];
					var questionId = that.questionData.question_id;
					var _ua = that.questionData.user_answer[questionId];
					if (_ua && _ua.answer_list && _ua.answer_list.length > 0)
						userAnswer = _ua.answer_list;
					if (userAnswer.length == 0) return;
					if (that.isSubdivision) {
						that.questionData.option_list.forEach(p => {
							if (that.viewSingle) {
								let find_mark = userAnswer.find(x => x.mark === p.mark);
								that.isAnswer(find_mark.value_list[0], find_mark.mark);
								that.computedAnswerClass(find_mark.value_list[0], find_mark.mark);
								that.$forceUpdate();
							} else {
								userAnswer.forEach((m, i) => {
									if (p.mark === m.mark) {
										that.isAnswer(m.value_list[i], m.mark);
										that.computedAnswerClass(m.value_list[i], m.mark);
										that.$forceUpdate();
									}
								});
							}
						})
					} else {
						if (that.viewSingle) {
							that.current = that.questionData.option_list.findIndex(p => p.mark === userAnswer[0]);
						} else {
							that.questionData.option_list.forEach(p => {
								if (userAnswer.find(x => x === p.mark))
									p.checked = true
							})
						}
					}
				};
				if (that.questionData.isSubSub) {
					callback();
				} else {
					this.$emit("getUserAnswer", this.questionData.question_id, callback);
				}
			},
			//是否标准答案
			isAnswer(mark, parent_mark) {
				setTimeout(function() {});
				if (this.isSubdivision) {
					return this.questionData.user_answer[this.questionData.question_id].answer_list.find((item) => item
						.mark === parent_mark)?.value_list?.includes(mark);
				}
				return this.questionData.user_answer[this.questionData.question_id].answer_list.includes(mark);
			},
			computedAnswerClass(mark, parent_mark) {
				var cur = this.commonComputedAnswerControl(this.questionData.question_id);
				if (!cur.isJudgeAnswer && !cur.isViewRightAnswer) {
					return [];
				}
				let answer_list = this.questionData.user_answer[this.questionData.question_id].answer_list;
				let isHas = this.isSubdivision ?
					answer_list.find((item) => item.mark === parent_mark)?.value_list?.includes(mark) :
					answer_list.includes(mark); // 是否已选中的选项
				let isRight = this.isSubdivision ?
					this.questionData.answer.answer_list.find((item) => item.mark === parent_mark)?.value_list?.includes(mark) :
					this.questionData.answer.answer_list.includes(mark);
				//显示标准答案
				if (!isHas && cur.isViewRightAnswer) {
					return isRight ? ['answer-right'] : [];
				}
				//判断对错
				if (cur.isJudgeAnswer) {
					return isRight ? ['right'] : ['wrong'];
				}
				return [];
			},
		}
	}
</script>

<style lang="scss" scoped>
	.select-area {
		.selected-area {
			margin: 32rpx 0;
			display: flex;
			flex-direction: column;
			row-gap: 32rpx;

			.selected-box {
				display: flex;
				flex-direction: row;
				align-items: center;
				column-gap: 32rpx;

				.serial-number {
					font-size: $font-size-serial;
					align-self: flex-start;
					margin-top: 18rpx;
				}

				.selected-cell-box {
					display: flex;
					flex-wrap: wrap;
					column-gap: 32rpx;
					row-gap: 16rpx;

					.selected-cell {
						display: flex;
						flex-wrap: nowrap;
						padding: 24rpx 48rpx;
						border-radius: 80rpx;
						font-size: $font-size-serial;
						background-color: $uni-bg-color-grey;

						&.answer-right {
							background-color: $right-bc-color;
						}

						&.active {
							color: #34343a;
							background-color: $main-active-color;

							&.right {
								background-color: $uni-bg-color-grey;
								border: 1px solid $right-color;
							}

							&.wrong {
								background-color: $uni-bg-color-grey;
								border: 1px solid $error-color;
							}
						}
					}
				}
			}
		}

		.uni-list-cell {
			display: flex;
			column-gap: 8rpx;
			align-items: center;
			padding: 24rpx 48rpx;
			border-radius: 80rpx;
			margin: 32rpx auto;
			font-size: $font-size-serial;
			background-color: $uni-bg-color-grey;

			.serial-number {
				align-self: flex-start;
			}

			.content {
				flex: 1;
			}

			&.answer-right {
				background-color: $right-bc-color;

				&::after {
					font-size: 14px;
					color: $right-color;
					content: '正确答案';
				}
			}

			&.active {
				color: #34343a;
				background-color: $main-active-color;

				&.right {
					background-color: $uni-bg-color-grey;
					border: 1px solid $right-color;

					&::after {
						font-size: 14px;
						color: $right-color;
						content: '已选';
					}
				}

				&.wrong {
					background-color: $uni-bg-color-grey;
					border: 1px solid $error-color;

					&::after {
						font-size: 14px;
						color: $error-color;
						content: '已选';
					}
				}
			}
		}

		.reference {
			margin: 32rpx 0;
			background-color: #f9f8f9;
			padding: 24rpx;

			.reference-title {
				display: block;
				line-height: 64rpx;
				color: #4E5969;
				font-size: 28rpx;
			}

			.reference-answer {
				color: #1D2129;
				line-height: 48rpx;
				font-size: 14pt;
			}
		}
	}
</style>