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

<template>
	<!-- 看图写作题 -->
	<view class="write-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">
			<!-- <view class="article-text" v-html="sanitizeHTML(questionData.article)"></view> -->
			<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])"></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
			<!-- <view class="pic-title" v-html="sanitizeHTML(questionData.option_list[active_index].picture_title)"></view> -->
			<view 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)"></view>
			<view class="write-content">
				<textarea :maxlength="questionData.property.word_num" v-model="answer_list[0].text"
					@input="sumfontnum($event,questionData.property.word_num)" placeholder="请输入"
					:disabled="answer_control[questionData.question_id].isReadOnly" auto-height
					@blur="handleTone(answer_list[0].text, questionData.question_id);" />
				<view class="fontNum">
					<text>
						{{fontNumList[0]>0?fontNumList[0]:answer_list[0].text.length}}
					</text>/{{questionData.property.word_num}}
				</view>
			</view>
			<template v-if="isEnable(questionData.property.is_enable_upload_accessory)">
				<!-- 上传文件 -->
				<UploadFiles upload-title="" :fileIdList="answer_list[0].accessory_file_id_list" @upload="handleUpload"
					@deleteFile="handleDelete" :disabled="answer_control[questionData.question_id].isReadOnly">
				</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" v-if="show_sample_text" v-html="sanitizeHTML(questionData.sample_text)"
					:ref="'richText-4-4'+questionData.question_id"
					@longpress="previewByRichTextImg(-4,-4,questionData.question_id)"></view>
			</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-5-5'+questionData.question_id"
				@longpress="previewByRichTextImg(-5,-5,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 {
		GetFileStoreInfo
	} from '@/api/api.js';
	import UploadFiles from '@/components/upload-files/upload-files.vue';
	import AnswerControlMixin from '@/pages/answer_question/common/data/AnswerControlMixin.js';
	export default {
		name: "write-picture-question",
		mixins: [AnswerControlMixin],
		props: {
			questionData: questionData
		},
		components: {
			UploadFiles
		},
		data() {
			return {
				sanitizeHTML,
				isEnable,
				answer_mode_list,
				answer_control,
				addTone,
				handleToneValue,
				pic_list: {},
				mode: 'indexes',
				swiperDotIndex: 0,
				active_index: 0,
				answer_list: [],
				show_sample_text: true,
				fontNumList: [],
				messageText: '',
			};
		},
		watch: {
			answer_list: {
				handler(val) {
					if (this.isAnswerReady)
						this.saveUserAnswer();
				},
				deep: true,
				immediate: true,
			},
			'questionData.question_id': {
				handler(val) {
					this.handleData();
					this.isAnswerReady = true;
					this.setUserAnswer();
					this.commonComputedAnswerControl(val);
				},
				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: {
			// 初始化数据
			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,
						text: '',
						accessory_file_id_list: [],
					};
					this.answer_list.push(obj);
				});
			},
			changeImg(e) {
				this.active_index = e.detail.current;
			},
			clickItem(e) {
				this.swiperDotIndex = e;
			},
			sumfontnum(e, totalCount) {
				this.setQuestionEdit();
				this.fontNumList[0] = e.detail.value.length;
				if (this.fontNumList[0] === totalCount) {
					this.messageText = `字数达到${totalCount}字!`;
					this.$refs.message.open();
				}
			},
			setQuestionEdit() {
				this.questionData.user_answer[this.questionData.question_id].isEdit = true;
				this.$forceUpdate();
			},
			// 文件上传成功
			handleUpload(fileId) {
				this.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.answer_list[0].accessory_file_id_list.indexOf(fileId);
				if (i > -1)
					this.answer_list[0].accessory_file_id_list.splice(i, 1);
				this.setQuestionEdit();
			},
			//填写答案后保存答案
			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.text || p.accessory_file_id_list).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);
			},
			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-picture-area {
		.option-area {
			margin-top: 32rpx;

			.article-text {
				margin: 32rpx auto;
				font-size: $font-size-serial;
			}

			/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;

						&.active {
							opacity: 1;
						}
					}

				}
			}

			// .pic-title {
			// 	margin: 32rpx 0;
			// 	font-size: $uni-font-size-sm;
			// 	font-weight: $uni-font-weight-6;
			// }

			.pic-info {
				margin: 32rpx 0;
				font-size: 12pt;
			}

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

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

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