GCLS_Page_Mobile/components/write-question/write-question.vue

<template>
	<!-- 基础写作题 -->
	<view class="write-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="article" v-if="questionData.article.length > 0">
			<text v-html="sanitizeHTML(questionData.article)"></text>
		</view> -->
		<view class="description" v-html="sanitizeHTML(questionData.description)"
			v-if="isEnable(questionData.property.is_enable_description)&&questionData.description.length > 0"
			:ref="'richText-2-2'+questionData.question_id" @longpress="previewByRichTextImg(-2,-2,questionData.question_id)">
		</view>
		<view class="write-content">
			<textarea :maxlength="questionData.property.word_num"
				v-model="questionData.user_answer[questionData.question_id].answer_list[0].text" placeholder="请输入内容"
				@input="sumfontnum($event,questionData.property.word_num)"
				:disabled="answer_control[questionData.question_id].isReadOnly" auto-height
				@blur="handleTone(questionData.user_answer[questionData.question_id].answer_list[0].text, questionData.question_id);" />
			<view class="fontNum">
				<text>
					{{fontNum?fontNum:questionData.user_answer[questionData.question_id].answer_list[0].text.length}}
				</text>/{{questionData.property.word_num}}
			</view>

		</view>
		<!-- 语音作答 -->
		<!-- <template v-if="isEnable(questionData.property.is_enable_voice_answer)">
			<SoundRecord :wav-blob.sync="questionData.user_answer[questionData.question_id].answer_list[0].voice_file_id"
				@setAudioId="setFileId">
			</SoundRecord>
		</template> -->
		<template v-if="isEnable(questionData.property.is_enable_upload_accessory)">
			<!-- 上传文件 -->
			<UploadFiles upload-title="" :disabled="answer_control[questionData.question_id].isReadOnly"
				:fileIdList="uploadedIdList" @upload="handleUpload" @deleteFile="handleDelete">
			</UploadFiles>
		</template>
		<view v-if="isViewSampleText&&answer_control[questionData.question_id].isViewRightAnswer" class="sample-area">
			<view class="line">
				<text :class="['sample-text', show_sample_text ? 'sample-show' : 'sample-hide']"
					@click="show_sample_text = !show_sample_text">{{ show_sample_text ? '隐藏范文' : '查看范文' }}</text>
			</view>
			<view class="sample-text article-content" v-if="show_sample_text" v-html="sanitizeHTML(show_sample_break)"
				:ref="'richText-3-3'+questionData.question_id"
				@longpress="previewByRichTextImg(-3,-3,questionData.question_id)"></view>
		</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: "write-question",
		mixins: [AnswerControlMixin],
		components: {
			SoundRecord,
			UploadFiles
		},
		props: {
			questionData: questionData
		},
		data() {
			return {
				sanitizeHTML,
				isEnable,
				answer_mode_list,
				answer_control,
				addTone,
				handleToneValue,
				show_sample_text: true,
				uploadedIdList: [],
				fontNum: 0,
				messageText: '',
				question_id: '',
				show_sample_break: '',
			};
		},
		watch: {
			'questionData.question_id': {
				handler(val) {
					this.questionData.user_answer[val].answer_list = [{
						text: '', // 用户文章
						voice_file_id: '', // 录音内容
						accessory_file_id_list: [], // 上传文件列表
					}]
					this.question_id = this.questionData.question_id;
					this.setUserAnswer();
					this.commonComputedAnswerControl(val);
					this.show_sample_break = this.questionData.sample_text ? this.questionData.sample_text.replace(/#/g, '</p><p>') : '';
				},
				immediate: true,
				deep: true
			}
		},
		computed: {
			isViewSampleText: function() {
				return isEnable(this.questionData.property.is_enable_sample_text);
			},
			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) {
				if (this.answer_control[this.questionData.question_id].isReadOnly) return;
				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();
			// },
			setQuestionEdit() {
				this.questionData.user_answer[this.question_id].isEdit = true;
				this.$forceUpdate();
			},
			//获取用户答案
			setUserAnswer: function() {
				var that = this;
				var callback = function() {
					that.questionData.user_answer[that.question_id].answer_list[0].accessory_file_id_list.forEach(
						p => {
							that.uploadedIdList.push(p);
						})

					that.$forceUpdate();
				}
				this.$emit("getUserAnswer", this.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>
	.write-area {
		.write-content {
			margin: 32rpx 0;
			min-height: 330rpx;
			height: auto;
			width: 100%;
			background-color: $uni-bg-color-grey;
			border-radius: 16rpx;
			display: flex;
			flex-direction: column;

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

			.fontNum {
				position: relative;
				text-align: right;
				color: #86909C;
				padding: 8rpx 16rpx;
				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;
				margin-top: 32rpx;

				/deep/ p {
					margin: 0;
				}

				&.sample-show {
					color: #306eff;
				}
			}
			.article-content {
			    text-indent: 2em;
			}
		}

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