GCLS_Page_Mobile/components/repeat-question/repeat-question.vue

<template>
	<!-- 听说训练 -->
	<view class="repeat-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>
		<view class="option-area">
			<view class="option-item" v-for="(item, i) in answer_list" :key="i">
				<text class="option-serial">{{ computedQuestionNumber(i,questionData.option_number_show_mode) }}</text>
				<view class="option-box">
					<AudioPlay v-if="questionData.option_list[i].audio_file_id"
						:file-id="questionData.option_list[i].audio_file_id" :showProgress="true" :showSlider="true"
						:isPlaying="questionData.option_list[i].isPlaying" :questionId="questionData.question_id" />
					<view class="option-content" v-if="questionData.option_list[i].content.length>0"
						v-html="sanitizeHTML(questionData.option_list[i].content)" :ref="'richText'+i+1+questionData.question_id"
						@longpress="previewByRichTextImg(i,1,questionData.question_id)"></view>
					<view class="sound-box">
						<SoundRecord :disabled="answer_control[questionData.question_id].isReadOnly"
							:wav-blob.sync="item.audio_file_id" type="small" />
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		questionData,
		sanitizeHTML,
		isEnable,
		computedQuestionNumber,
		answer_control,
	} from '@/pages/answer_question/common/data/common.js';
	import {
		GetFileStoreInfo
	} from '@/api/api.js';
	import SoundRecord from '@/components/sound-record/sound-record.vue';
	import AnswerControlMixin from '@/pages/answer_question/common/data/AnswerControlMixin.js';
	export default {
		name: "repeat-question",
		mixins: [AnswerControlMixin],
		props: {
			questionData: questionData
		},
		components: {
			SoundRecord
		},
		data() {
			return {
				sanitizeHTML,
				isEnable,
				computedQuestionNumber,
				answer_control,
				answer_list: [],
				curMark: '',
			};
		},
		watch: {
			answer_list: {
				handler(val) {
					if (this.isAnswerReady)
						this.saveUserAnswer();
				},
				deep: true,
				immediate: true,
			},
			'questionData.question_id': {
				handler(val) {
					this.commonComputedAnswerControl(val);
					this.isAnswerReady = true;
					this.setUserAnswer();
				},
				immediate: true,
				deep: true
			}
		},
		created() {
			this.handleData();
		},
		mounted() {
			uni.$on('setOtherAudioPlaying', this.otherAudioPlaying);
		},
		onUnload() {
			uni.$off('setOtherAudioPlaying', this.otherAudioPlaying);
		},
		methods: {
			// 初始化数据
			handleData() {
				this.answer_list = [];
				this.questionData.option_list.forEach((item) => {
					item.isPlaying = false;
					let obj = {
						mark: item.mark,
						audio_file_id: '' //用户答案录音
					};
					this.answer_list.push(obj);

					if (!item.audio_file_id) return false;
					GetFileStoreInfo({
						file_id: item.audio_file_id
					}).then((res) => {
						item.audio_file_url = res.file_url; //题目音频
					});

				});
			},
			//播放当前音频的时候暂停其他音频
			otherAudioPlaying(audio_file_id, playing) {
				this.questionData.option_list.forEach(p => {
					p.isPlaying = false;
					if (p.audio_file_id == audio_file_id) {
						p.isPlaying = true;
					}
				});
				this.$forceUpdate();
			},
			//填写答案后保存答案
			saveUserAnswer: function() {
				var that = this;
				var questionId = this.questionData.question_id;
				this.questionData.user_answer[questionId].isEdit = true;
				var ansed = that.answer_list;
				this.questionData.user_answer[questionId].is_fill_answer =
					ansed.filter(p => p.audio_file_id).length > 0;
				this.questionData.user_answer[questionId].content = JSON.stringify(ansed);
				this.questionData.user_answer[questionId].answer_list = ansed;
			},
			//获取用户答案
			setUserAnswer: function() {
				var that = this;
				var callback = function() {
					var questionId = that.questionData.question_id;
					if (that.questionData.user_answer[questionId].answer_list.length > 0)
						that.answer_list = that.questionData.user_answer[questionId].answer_list;
				}
				this.$emit("getUserAnswer", this.questionData.question_id, callback);
			},
		},
	}
</script>

<style lang="scss" scoped>
	.repeat-area {
		.option-area {
			margin-top: 32rpx;
			display: flex;
			flex-direction: column;
			row-gap: 32rpx;

			.option-item {
				display: flex;
				align-items: flex-start;
				justify-content: left;
				column-gap: 16rpx;

				.option-serial {
					font-size: $font-size-serial;
					width: 36rpx;
					margin-top: 10rpx;
				}

				.option-box {
					width: 100%;
					display: flex;
					flex-direction: column;
					row-gap: 16rpx;

					.option-content {
						background-color: $uni-bg-color-grey;
						padding: 16rpx 32rpx;
						border-radius: 40rpx;
						font-size: $font-size-serial;
						font-weight: 500;
					}

					/deep/ .sound-record-wrapper {
						background-color: $uni-bg-color-grey;
						padding: 8rpx;
						border-radius: 80rpx;
						margin-top: 0;
						width: fit-content;
					}
				}
			}
		}

		.audio-wrapper {
			margin: 0;
		}
	}
</style>