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

<template>
	<!-- 口语表达 -->
	<view class="answer-area">
		<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>
		<view class="reference" v-if="isViewReference&&answer_control[questionData.question_id].isViewRightAnswer">
			<text class="reference-title">参考答案</text>
			<text class="reference-answer">{{questionData.reference_answer}}</text>
		</view>
		<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 class="sound-record-area">
			<!-- 语音作答 -->
			<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>
	</view>
</template>

<script>
	import {
		questionData,
		sanitizeHTML,
		isEnable,
		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: "answer-question",
		mixins: [AnswerControlMixin],
		components: {
			SoundRecord
		},
		props: {
			questionData: questionData
		},
		data() {
			return {
				sanitizeHTML,
				isEnable,
				answer_control,
			};
		},
		computed: {
			isViewReference: function() {
				return isEnable(this.questionData.property.is_enable_reference_answer);
			},
			isViewAnalysis: function() {
				return isEnable(this.questionData.property.is_enable_analysis);
			}
		},
		watch: {
			'questionData.question_id': {
				handler(val) {
					this.commonComputedAnswerControl(val);
					this.questionData.user_answer[this.questionData.question_id].answer_list = [{
						audio_file_id: '', // 录音内容
					}]
					this.setUserAnswer();
				},
				immediate: true,
				deep: true
			}
		},
		methods: {
			//获取用户答案
			setUserAnswer: function() {
				var that = this;
				var callback = function() {
					that.$forceUpdate();
				}
				this.$emit("getUserAnswer", this.questionData.question_id, callback);
			},
			//异步更新声音ID有问题，所以采用方法手动赋值
			setFileId(fileId) {
				this.questionData.user_answer[this.questionData.question_id].isEdit = true;
				this.$forceUpdate();
			}
		},
	}
</script>

<style lang="scss" scoped>
	.answer-area {
		/deep/ img {
			width: auto;
			height: auto;
			max-width: 300px;
			max-height: 300px;
		}

		.sound-record-area {
			height: 240rpx;

			.sound-record-wrapper {
				width: 88%;
				position: absolute;
				bottom: 134rpx;
				padding: 32rpx 0;
				background-color: #ffffff;
			}
		}

		.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>