GCLS_Page_Mobile/components/read-aloud-question/read-aloud-question.vue

<template>
	<!-- 朗读题 -->
	<view class="readaloud-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>
		<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="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="description" v-html="sanitizeHTML(questionData.text)" :ref="'richText-3-3'+questionData.question_id"
			@longpress="previewByRichTextImg(-3,-3,questionData.question_id)">
		</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].voice_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: "read-aloud-question",
		mixins: [AnswerControlMixin],
		components: {
			SoundRecord
		},
		props: {
			questionData: questionData
		},
		data() {
			return {
				sanitizeHTML,
				isEnable,
				answer_control,
			};
		},
		watch: {
			'questionData.question_id': {
				handler(val) {
					this.commonComputedAnswerControl(val);
					this.questionData.user_answer[this.questionData.question_id].answer_list = [{
						voice_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>
	.readaloud-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;
			}
		}
	}
</style>