GCLS_Page_Mobile/components/essay-question/essay-question.vue

<template>
	<!-- 问答题 -->
	<view class="essay-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-html="sanitizeHTML(questionData.description)"
			v-if="isEnable(questionData.property.is_enable_description)&&questionData.description"
			:ref="'richText-2-2'+questionData.question_id" @longpress="previewByRichTextImg(-2,-2,questionData.question_id)">
		</view>
		<view class="write-content">
			<textarea :maxlength="word_num" v-model="questionData.user_answer[questionData.question_id].answer_list[0].text"
				placeholder="请输入内容" @input="sumfontnum($event,word_num)" @blur="saveUserAnswer"
				:disabled="answer_control[questionData.question_id].isReadOnly" />
			<view class="fontNum">
				<text>
					{{fontNum?fontNum:questionData.user_answer[questionData.question_id].answer_list[0].text.length}}
				</text>/{{word_num}}
			</view>
		</view>
		<!-- 语音作答 v-if="isEnable(questionData.property.is_enable_voice_answer)" -->
		<!-- <template>
			<SoundRecord :wav-blob.sync="questionData.user_answer[questionData.question_id].answer_list[0].audio_file_id"
				@setAudioId="setFileId" :disabled="answer_control[questionData.question_id].isReadOnly">
			</SoundRecord>
		</template> -->
		<!-- v-if="isEnable(questionData.property.is_enable_upload_accessory)" -->
		<!-- 上传文件 -->
		<!-- <template>
			<UploadFiles upload-title="上传附件：" :disabled="answer_control[questionData.question_id].isReadOnly"
				:fileIdList="uploadedIdList" @upload="handleUpload" @deleteFile="handleDelete">
			</UploadFiles>
		</template> -->
		<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.reference_answer)"
				:ref="'richText-3-3'+questionData.question_id"
				@longpress="previewByRichTextImg(-3,-3,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.analysis)"
				:ref="'richText-4-4'+questionData.question_id"
				@longpress="previewByRichTextImg(-4,-4,questionData.question_id)">
			</text>
		</view>
		<uni-popup ref="message" type="message">
			<uni-popup-message type="warn" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import {
		questionData,
		sanitizeHTML,
		isEnable,
		answer_mode_list,
		answer_control,
		addTone,
		handleToneValue,
	} from '@/pages/answer_question/common/data/common.js';
	import SoundRecord from '@/components/sound-record/sound-record.vue';
	import UploadFiles from '@/components/upload-files/upload-files.vue';
	import AnswerControlMixin from '@/pages/answer_question/common/data/AnswerControlMixin.js';
	export default {
		name: "essay-question",
		mixins: [AnswerControlMixin],
		components: {
			SoundRecord,
			UploadFiles
		},
		props: {
			questionData: questionData
		},
		data() {
			return {
				sanitizeHTML,
				isEnable,
				answer_mode_list,
				answer_control,
				addTone,
				handleToneValue,
				show_sample_text: false,
				uploadedIdList: [],
				fontNum: 0,
				messageText: '',
				question_id: '',
				word_num: 1000,
			};
		},
		watch: {
			'questionData.question_id': {
				handler(val) {
					this.commonComputedAnswerControl(val);
					this.question_id = this.questionData.question_id;
					this.setUserAnswer();
				},
				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: {
			sumfontnum(e, totalCount) {
				this.setQuestionEdit();
				this.fontNum = e.detail.value.length;
				if (this.fontNum === totalCount) {
					this.messageText = `字数达到${totalCount}字!`;
					this.$refs.message.open();
				}
			},
			// 文件上传成功
			handleUpload(fileId) {
				this.questionData.user_answer[this.question_id].answer_list[0].accessory_file_id_list.push(fileId);
				this.setQuestionEdit();
			},
			// 删除文件
			handleDelete(fileId) {
				var i = this.questionData.user_answer[this.question_id].answer_list[0].accessory_file_id_list
					.indexOf(fileId);
				if (i > -1)
					this.questionData.user_answer[this.question_id].answer_list[0].accessory_file_id_list.splice(i,
						1);
				this.setQuestionEdit();
			},
			//异步更新声音ID有问题，所以采用方法手动赋值
			setFileId(fileId) {
				this.setQuestionEdit();
				this.saveUserAnswer();
			},
			setQuestionEdit() {
				this.questionData.user_answer[this.question_id].isEdit = true;
				this.$forceUpdate();
			},
			//填写答案后保存答案
			saveUserAnswer: function(mark) {
				var that = this;
				var questionId = that.question_id;
				this.questionData.user_answer[questionId].isEdit = true;
				var ansed = this.questionData.user_answer[questionId].answer_list;
				this.handleTone(ansed[0].text, questionId);
				this.questionData.user_answer[questionId].is_fill_answer = ansed.filter(p => p.text || p.audio_file_id)
					.length > 0;
				this.questionData.user_answer[questionId].content = JSON.stringify(ansed);
				this.questionData.user_answer[questionId].answer_list = ansed;
				this.$emit("setSubAnswer", this.questionData.user_answer[questionId], questionId);
			},
			//获取用户答案
			setUserAnswer: function() {
				var that = this;
				var callback = function() {
					var userAnswer = [];
					var questionId = that.question_id;
					var _ua = that.questionData.user_answer[questionId];
					if (_ua && _ua.answer_list && _ua.answer_list.length > 0) {
						userAnswer = _ua.answer_list;
						that.questionData.user_answer[questionId].answer_list[0].accessory_file_id_list.forEach(
							p => {
								that.uploadedIdList.push(p);
							})
					} else {
						that.questionData.user_answer[questionId].answer_list = [{
							text: '', // 用户文章
							audio_file_id: '', // 录音内容
							accessory_file_id_list: [], // 上传文件列表
						}];
					}
					that.$forceUpdate();
				}
				if (this.questionData.isSubSub) {
					callback();
				} else {
					this.$emit("getUserAnswer", this.questionData.question_id, callback);
				}
			},
			handleTone(value, questionId) {
				this.questionData.user_answer[questionId].answer_list[0].text = value
					.trim()
					.split(/\s+/)
					.map((item) => {
						return handleToneValue(item);
					})
					.map((item) =>
						item.map(({
							number,
							con
						}) => (number && con ? addTone(Number(number), con) : number || con || '')),
					)
					.filter((item) => item.length > 0)
					.join(' ');
				this.$forceUpdate();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.essay-area {
		.article {
			margin-top: 32rpx;
			line-height: 56rpx;
		}

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

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

			.fontNum {
				position: relative;
				text-align: right;
				color: #86909C;
				padding: 8rpx 16rpx;
				background-color: $uni-bg-color-grey;
				border-radius: 0 0 16rpx 16rpx;
			}
		}

		.icon-area {
			width: 80rpx;
			height: 80rpx;
			border-radius: 40px;
			background-color: #306EFF;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 32rpx;

			.svg-icon {
				width: 40rpx;
			}
		}

		.sample-area {
			margin-top: 64rpx;

			.line {
				height: 1px;
				background: #dcdfe6;
				text-align: center;

				text {
					position: relative;
					background-color: #ffffff;
					padding: 0 10rpx;
					top: -22rpx;
					font-size: 26rpx;
				}
			}

			.sample-text {
				font-size: $font-size-serial;
				font-weight: 400;
				line-height: 40rpx;
				margin-top: 32rpx;

				&.sample-show {
					color: #306eff;
				}
			}
		}

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