GCLS_Page_Mobile/components/dialogue-question/dialogue-question.vue

<template>
	<!-- 对话题 -->
	<view class="question-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="dialogue-wrapper">
			<view class="option-area" v-for="(item,index) in optionList" :key="index"
				:style="[{'flex-direction':item.type === 'input'?'row-reverse':'row'}]">
				<text class="avatar" :style="{ backgroundColor: item.color }">
					{{ item.name }}
				</text>
				<view v-if="item.type === 'text'" class="text-area">
					<view class="text-box">{{item.text}}</view>
				</view>
				<view v-else-if="item.type === 'image'" class="image-area">
					<img :src="file_map_list[item.file_id]" @click="preview(file_map_list[item.file_id])" />
				</view>
				<view v-else-if="item.type === 'audio'" class="audio-area">
					<AudioPlay :file-id="item.file_id" :show-slider="true" :show-progress="false"
						:background-color="item.color" />
				</view>
				<view v-else-if="item.type === 'input'" class="input-student-area">
					<SoundRecord v-if=" isEnable(questionData.property.is_enable_voice_answer)" :wav-blob.sync="item.file_id"
						type="small" :disabled="answer_control[questionData.question_id].isReadOnly" />
				</view>
			</view>
		</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>
</template>

<script>
	import {
		questionData,
		sanitizeHTML,
		isEnable,
		answer_control,
	} from '@/pages/answer_question/common/data/common.js';
	import {
		GetFileURLMap
	} 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: "dialogue-question",
		mixins: [AnswerControlMixin],
		components: {
			SoundRecord,
		},
		props: {
			questionData: questionData
		},
		data() {
			return {
				sanitizeHTML,
				isEnable,
				answer_control,
				isAnswerReady: false,
				optionList: [],
				file_map_list: [],
			};
		},
		watch: {
			'questionData.option_list': {
				handler(val) {
					let list = JSON.parse(JSON.stringify(val));
					let file_id_list = [];
					list.forEach(({
						type,
						file_id
					}) => {
						if (type === 'image' || type === 'audio') {
							file_id_list.push(file_id);
						}
					});
					GetFileURLMap({
						file_id_list
					}).then(({
						url_map
					}) => {
						this.file_map_list = url_map;
					});
					//遍历 list 数组
					const newArray = list.map(item => {
						// 在 role_list 数组中找到与 item.mark 相等的对象
						const matchedItem = this.questionData.property.role_list.find(element => element.mark === item.role);
						// 如果找到了匹配的对象，则将其 color 属性拷贝到 item 对象中
						if (matchedItem) {
							item.color = matchedItem.color;
							item.name = matchedItem.name;
						}
						return item;
					});
					this.optionList = newArray;
				},
				deep: true,
				immediate: true,
			},
			'questionData.question_id': {
				handler(val) {
					this.commonComputedAnswerControl(val);
					this.setUserAnswer();
				},
				immediate: true,
				deep: true
			},
			optionList: {
				handler(val) {
					this.questionData.user_answer[this.questionData.question_id].answer_list = [];
					val.filter(p => p.type == "input").forEach(p => {
						if (p.file_id.length <= 0) return;
						this.questionData.user_answer[this.questionData.question_id].answer_list.push({
							audio_file_id: p.file_id,
							mark: p.mark
						});
					});
				},
				deep: true,
				immediate: true,
			},
			answer_control: {
				handler(val) {
					var cur = this.commonComputedAnswerControl(this.questionData.question_id);
					if (!cur.isJudgeAnswer) return;
					this.questionData.user_answer[this.questionData.question_id].answer_list.forEach(({
						mark,
						audio_file_id
					}) => {
						let findOption = this.optionList.find((item) => item.mark === mark);
						findOption.file_id = audio_file_id;
					});
				},
				deep: true,
				immediate: true,
			},
		},
		computed: {
			isViewReference: function() {
				return isEnable(this.questionData.property.is_enable_reference_answer);
			},
			isViewAnalysis: function() {
				return isEnable(this.questionData.property.is_enable_analysis);
			}
		},
		methods: {
			// 获取用户答案
			setUserAnswer: function() {
				var that = this;
				var callback = function() {
					var questionId = that.questionData.question_id;

					var answerList = that.questionData.user_answer[questionId].answer_list;
					that.optionList.forEach(p => {
						var answer = answerList.find(x => x.mark == p.mark);
						if (!answer) return false;
						p.file_id = answer.audio_file_id;
					})
				}
				this.$emit("getUserAnswer", this.questionData.question_id, callback);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.question-area {
		.dialogue-wrapper {
			margin: 32rpx auto;
			display: flex;
			flex-direction: column;
			row-gap: 32rpx;

			.option-area {
				display: flex;
				column-gap: 16rpx;

				.avatar {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 80rpx;
					min-width: 80rpx;
					height: 80rpx;
					min-height: 80rpx;
					font-size: 24rpx;
					color: #ffffff;
					border-radius: 50%;
				}

				.audio-area {
					width: 430rpx;

					/deep/ .audio-wrapper {
						margin: 0;
					}
				}

				.text-area {
					display: flex;
					flex-direction: column;
					align-items: flex-start;

					.text-box {
						background-color: #F0F0F0;
						padding: 16rpx;
						border-radius: 16rpx;
						line-height: 44rpx;
						font-size: 28rpx;

						.content-text {
							vertical-align: top;
						}

						/deep/ uni-textarea {
							display: inline-block;
							border-bottom: 1px solid #000000;
							text-align: center;
							vertical-align: baseline;
							line-height: 46rpx;
							font-size: 28rpx;
							margin: 0 8rpx;
							max-width: calc(100vw - 240rpx);

							&.right {
								color: $right-color;
							}

							&.wrong {
								color: $error-color;
							}
						}

						.right-answer {
							margin-left: -8rpx;
							width: auto;
							max-width: calc(100vw - 240rpx);
							height: 54rpx;
							line-height: 54rpx;
						}
					}

					/deep/ .sound-record-wrapper {
						margin-top: 16rpx;

						.sound-item-box {
							background-color: #F0F0F0;
							border-radius: 80rpx;
							padding: 8rpx;

							.progress-box {
								background-color: #F0F0F0;
							}

							.sound-item-microphone {
								background-color: $light-main-color;
							}
						}
					}
				}

				.image-area {
					max-width: 100%;
					max-height: 100%;

					img {
						border-radius: 16rpx;
					}
				}

				.input-student-area {
					display: flex;
					align-items: center;
					column-gap: 16rpx;

					/deep/ .sound-record-wrapper {
						margin-top: 0;

						.sound-item-box {
							background-color: #F0F0F0;
							border-radius: 80rpx;
							padding: 8rpx;

							.progress-box {
								background-color: #F0F0F0;
							}

							.sound-item-microphone {
								background-color: $light-main-color;
							}
						}
					}

					.avatar {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 80rpx;
						min-width: 80rpx;
						height: 80rpx;
						min-height: 80rpx;
						font-size: 24rpx;
						color: #ffffff;
						border-radius: 50%;
						background-color: $light-main-color;
					}
				}
			}
		}

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