GCLS_Page_Mobile/components/short-answer-question/short-answer-question.vue

<template>
	<!-- 简答题2024年1月8日去掉该题，阅读配题改为用问答题 -->
	<view class="short-answer-area">
		<view class="question_title">
			<text class="question_number" :style="{'font-size':questionData.property.stem_question_number_font_size}">
				{{ questionNumberEndIsBracket(questionData.property.question_number) }}
			</text>
			<text class="question_stem" v-html="sanitizeHTML(questionData.stem)"></text>
		</view>
		<view class="description"
			v-if="isEnable(questionData.property.is_enable_description)&&questionData.description.length > 0"
			v-html="sanitizeHTML(questionData.description)">
		</view>
		<!-- <AudioPlay v-if="isEnable(questionData.property.is_enable_listening) && questionData.file_list.length > 0"
			:fileId="questionData.file_list[0].file_id" :showSlider="true" /> -->
		<view class="write-content">
			<textarea :maxlength="word_num" v-model="questionData.user_answer[questionData.question_id].answer_list[0].text"
				placeholder="请输入内容" @input="sumfontnum($event,word_num)" @blur="saveUserAnswer"
				:disabled="answer_control[questionData.question_id].isReadOnly" />
			<view class="fontNum">
				<text>{{fontNum}}</text>/{{word_num}}
			</view>
		</view>
		<!-- 语音作答 -->
		<SoundRecord @setAudioId="setFileId" :disabled="answer_control[questionData.question_id].isReadOnly"
			:wav-blob.sync="questionData.user_answer[questionData.question_id].answer_list[0].audio_file_id">
		</SoundRecord>
		<view class="reference" v-if="isViewReference&&answer_control[questionData.question_id].isViewRightAnswer">
			<text class="reference-title">参考答案</text>
			<text class="reference-answer" v-html="sanitizeHTML(questionData.reference_answer)">
			</text>
		</view>

		<uni-popup ref="message" type="message">
			<uni-popup-message type="warn" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import {
		questionData,
		sanitizeHTML,
		isEnable,
		answer_mode_list,
		answer_control,
	} from '@/pages/answer_question/common/data/common.js';
	import SoundRecord from '@/components/sound-record/sound-record.vue';
	import AnswerControlMixin from '@/pages/answer_question/common/data/AnswerControlMixin.js';
	export default {
		name: "short-answer-question",
		mixins: [AnswerControlMixin],
		components: {
			SoundRecord
		},
		props: {
			questionData: questionData
		},
		data() {
			return {
				sanitizeHTML,
				isEnable,
				answer_mode_list,
				answer_control,
				fontNum: 0,
				word_num: 1000,
				messageText: '',
			};
		},
		watch: {
			'questionData.question_id': {
				handler(val) {
					this.setUserAnswer();
					this.commonComputedAnswerControl(val);
				},
				immediate: true,
				deep: true
			}
		},
		computed: {
			isViewReference: function() {
				return isEnable(this.questionData.property.is_enable_reference_answer);
			}
		},
		methods: {
			sumfontnum(e, totalCount) {
				this.setQuestionEdit();
				this.fontNum = e.detail.value.length;
				if (this.fontNum === totalCount) {
					this.messageText = `字数达到${totalCount}字!`;
					this.$refs.message.open();
				}
			},
			//异步更新声音ID有问题，所以采用方法手动赋值
			setFileId(fileId) {
				this.setQuestionEdit();
				this.saveUserAnswer();
			},
			setQuestionEdit() {
				this.questionData.user_answer[this.questionData.question_id].isEdit = true;
				this.$forceUpdate();
			},
			//填写答案后保存答案
			saveUserAnswer: function(mark) {
				var that = this;
				var questionId = that.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.filter(p => p.text || p.audio_file_id)
					.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;
					} else {
						that.questionData.user_answer[questionId].answer_list = [{
							text: '', // 用户文章
							audio_file_id: '', // 录音内容
						}];
					}
					that.$forceUpdate();
				}
				if (this.questionData.isSubSub) {
					callback();
				} else {
					this.$emit("getUserAnswer", this.questionData.question_id, callback);
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.short-answer-area {
		margin-bottom: 32rpx;

		.question_title {
			display: flex;
			font-size: $font-size-lg;

			.question_number,
			.question_stem {
				color: #34343A;
			}

			.question_number {
				margin-right: 10rpx;
			}
		}

		.description {
			padding: 24rpx 48rpx;
			border-radius: 40rpx;
			font-size: $font-size-serial;
			background-color: $uni-bg-color-grey;
			margin-top: 32rpx;
		}

		.write-content {
			margin-top: 32rpx;
			height: 300rpx;
			width: 100%;
			background-color: $uni-bg-color-grey;
			border-radius: 16rpx;

			textarea {
				width: 95%;
				height: 100%;
				font-size: 28rpx;
				line-height: 56rpx;
				margin: 0 auto;
			}

			.fontNum {
				position: relative;
				right: 20rpx;
				top: -48rpx;
				text-align: right;
				color: #86909C;
			}
		}

		.reference {
			margin: 32rpx 0;
			background-color: $uni-bg-color-grey;
			padding: 24rpx;
			font-size: 28rpx;

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

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