GCLS_Page_Mobile/components/talk-picture-question/talk-picture-question.vue

<template>
	<!-- 看图说话题 -->
	<view class="talk-picture-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" :ref="'richText-2-2'+questionData.question_id"
			@longpress="previewByRichTextImg(-2,-2,questionData.question_id)"
			v-if="isEnable(questionData.property.is_enable_description)&&questionData.description"
			v-html="sanitizeHTML(questionData.description)">
		</view>
		<view class="option-area">
			<uni-swiper-dot :info="questionData.option_list" :current="active_index" :mode="mode" @clickItem="clickItem">
				<swiper class="swiper" circular previous-margin="50px" next-margin="50px" @change="changeImg"
					:current="swiperDotIndex">
					<swiper-item v-for="(item, index) in questionData.option_list" :key="index">
						<view :class="['swiper-item',active_index==index?'active':'']">
							<image :src="pic_list[item.picture_file_id]" mode="aspectFit"
								@click="preview(pic_list[item.picture_file_id])" />
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
			<!-- <text class="pic-title" v-html="sanitizeHTML(questionData.option_list[active_index].picture_title)"></text> -->
			<view class="pic-info-area" v-if="questionData.option_list[active_index].picture_info">
				<text class="pic-num">{{ computedQuestionNumber(active_index,questionData.option_number_show_mode) }}</text>
				<text class="pic-info" v-html="sanitizeHTML(questionData.option_list[active_index].picture_info)"
					:ref="'richText-3-3'+questionData.question_id"
					@longpress="previewByRichTextImg(-3,-3,questionData.question_id)"></text>
			</view>
			<!-- <view class="write-content">
				<textarea v-model="answer_list[active_index].value" placeholder="请输入" />
			</view> -->
			<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.option_list[active_index].reference_answer)"
					:ref="'richText-4-4'+questionData.question_id"
					@longpress="previewByRichTextImg(-4,-4,questionData.question_id)">
				</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.option_list[active_index].analysis)"
					:ref="'richText-5-5'+questionData.question_id"
					@longpress="previewByRichTextImg(-5,-5,questionData.question_id)">
				</text>
			</view>
			<view class="sound-record-area">
				<text class="pic-num">{{ computedQuestionNumber(active_index,questionData.option_number_show_mode) }}</text>
				<SoundRecord :disabled="answer_control[questionData.question_id].isReadOnly"
					:wav-blob.sync="answer_list[active_index].audio_file_id" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		questionData,
		sanitizeHTML,
		isEnable,
		answer_mode_list,
		answer_control,
		computedQuestionNumber,
	} 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: "talk-picture-question",
		mixins: [AnswerControlMixin],
		props: {
			questionData: questionData
		},
		components: {
			SoundRecord
		},
		data() {
			return {
				sanitizeHTML,
				isEnable,
				computedQuestionNumber,
				answer_control,
				pic_list: {},
				mode: 'indexes',
				swiperDotIndex: 0,
				active_index: 0,
				answer_list: [],
			};
		},
		watch: {
			answer_list: {
				handler(val) {
					if (this.isAnswerReady)
						this.saveUserAnswer();
				},
				deep: true,
				immediate: true,
			},
			'questionData.question_id': {
				handler(val) {
					this.isAnswerReady = true;
					this.setUserAnswer();
					this.handleData();
					this.commonComputedAnswerControl(val);
				},
				immediate: true,
				deep: true
			}
		},
		computed: {
			isViewReference: function() {
				return isEnable(this.questionData.property.is_enable_reference_answer);
			},
			isViewAnalysis: function() {
				return isEnable(this.questionData.property.is_enable_analysis);
			}
		},
		methods: {
			// 初始化数据
			handleData() {
				this.answer_list = [];
				this.pic_list = {};
				this.active_index = 0;
				this.swiperDotIndex = 0;
				this.questionData.file_id_list.forEach((item) => {
					GetFileStoreInfo({
						file_id: item
					}).then(({
						file_id,
						file_url
					}) => {
						this.$set(this.pic_list, file_id, file_url);
					});
				});
				this.questionData.option_list.forEach((item) => {
					let obj = {
						mark: item.mark,
						value: '',
						audio_file_id: '',
					};
					this.answer_list.push(obj);
				});
			},
			changeImg(e) {
				this.active_index = e.detail.current;
			},
			clickItem(e) {
				this.swiperDotIndex = e;
			},
			//填写答案后保存答案
			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.value && 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>
	.talk-picture-area {
		.option-area {
			margin-top: 32rpx;

			/deep/.uni-swiper__warp {
				height: 380rpx;

				.uni-swiper__dots-box {
					bottom: 0 !important;
				}

				.swiper {
					height: 328rpx;

					.swiper-item {
						height: 100%;
						margin: 0 8rpx;
						border-radius: 8rpx;
						background-color: $uni-bg-color-grey;
						display: flex;
						justify-content: center;
						align-items: center;
						opacity: 0.4;

						image {
							// width: 440rpx;
							// height: 328rpx;
							border-radius: 8rpx;
						}

						&.active {
							opacity: 1;
						}
					}

				}
			}

			// .pic-title {
			// 	display: block;
			// 	font-size: 24rpx;
			// 	font-weight: 600;
			// }

			.pic-info-area {
				display: flex;
				column-gap: 8rpx;
				margin: 32rpx 0;
				font-size: 12pt;
			}

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

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

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

				.pic-num {
					position: absolute;
					bottom: 224rpx;
					font-size: 16pt;
					z-index: 1;
				}

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

					.sound-item-box {
						width: 74%;
						margin: 0 auto;
					}
				}
			}

			.reference {
				margin-top: 32rpx;
				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>
<style>
	/deep/ .uni-swiper__dots-box {
		.uni-swiper__dots-indexes {
			width: 38rpx !important;
			height: 38rpx !important;
		}
	}
</style>