GCLS_Page_Mobile/components/chinese-question/chinese-question.vue

<template>
	<view class="chinese-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>
		<scroll-view v-if="isShow" class="words-box" scroll-x :scroll-into-view="tabCurrent">
			<view v-for="(item, index) in questionData.option_list" :key="index" @click="swichMenu(index)"
				:id="'tabNum'+index" :class="['words-item',currentTab===index ? 'menu-topic-active' : '']">
				<!-- 听写汉字 -->
				<template v-if="questionData.property.learn_type === 'dictation'">
					<view class="dictation-box">
						<text>{{computedQuestionNumber(index,questionData.option_number_show_mode)}}</text>
						<text>{{item.pinyin}}</text>
						<AudioPlay v-if="item.audio_file_id" :file-id="item.audio_file_id" />
					</view>
				</template>
				<template v-else>
					<!-- 描红和书写 -->
					<view class="strock-chinese-area">
						<Strockplayredline v-for="(hz,indexHZ) in item.hz_strokes_list" :class="['strock-chinese']"
							:play-storkes="true" :book-text="hz.content" :book-strokes="hz.strokes" strokeColor="#000000"
							:target-view="'stem_'+questionData.question_id+'_' + item.mark+'_'+indexHZ" />
					</view>
				</template>
			</view>
		</scroll-view>
		<view class="title-split"></view>
		<!-- 内容 -->
		<swiper v-if="isShowC" class="swiper-box" :current="currentTab" disable-touch>
			<swiper-item class="swiper-topic-list" v-for="(item, index) in questionData.option_list" :key="index">
				<view class="swiper-topic-area">
					<!-- 描红 -->
					<template v-if="questionData.property.learn_type === 'paint'">
						<view class="paint-content-box" v-for="(num,indexT) in questionData.property.tian_number" :key="indexT">
							<view class="paint-content-area" :id="questionData.question_id+'_'+item.mark"
								v-for="(hz,indexHZ) in item.hz_strokes_list" :key="indexHZ"
								@click="showStrockRedPop(questionData.question_id+'_'+item.mark,item.mark,indexHZ+indexT*item.hz_strokes_list.length,item.pinyin,hz.content,hz.strokes,item.audio_file_id)">
								<Strockplayredline :class="['strock-chinese']" :play-storkes="false" :book-text="hz.content"
									:targetView="'con_'+questionData.question_id+'_'+item.mark+Number(indexHZ+indexT*item.hz_strokes_list.length)"
									:book-strokes="hz.strokes" :bjIconSize="72"
									:strokeColor="strokeColorList[item.mark+Number(indexHZ+indexT*item.hz_strokes_list.length)]" />
							</view>
						</view>
					</template>
					<!-- 听写汉字 -->
					<template v-if="questionData.property.learn_type === 'dictation'">
						<view class="dictation-content-box" v-for="(itemI,indexI) in item.pinyin_item_list" :key="indexI">
							<text class="pinyin-text">{{itemI.pinyin_item}}</text>
							<view class="hanzi-writer-area"
								@click="showHanziWritePop('dictation',questionData.question_id+'_'+item.mark+indexI,item.mark,item.pinyin,indexI)">
								<SvgIcon class="character-target-bg" icon-class="hanzi-writer-bg" :size="72" />
								<img class="hanzi-writer-img" :ref="'con_'+questionData.question_id+'_'+item.mark+indexI"
									:src="imgList[item.mark+indexI]" />
							</view>
						</view>
					</template>
					<!-- 书写 -->
					<template v-if="questionData.property.learn_type === 'write'">
						<view class="write-content-box" v-for="(num,indexT) in questionData.property.tian_number" :key="indexT">
							<view class="write-content-area" v-for="(itemI,indexI) in item.pinyin_item_list" :key="indexI"
								@click="showHanziWritePop('write',questionData.question_id+'_'+item.mark,item.mark,item.pinyin,indexI+indexT*item.pinyin_item_list.length)">
								<SvgIcon icon-class="hanzi-writer-bg" class="character-target-bg" :size="72" />
								<img class="hanzi-writer-img"
									:ref="'con_'+questionData.question_id+'_'+item.mark+Number(indexI+indexT*item.pinyin_item_list.length)"
									:src="imgList[item.mark+Number(indexI+indexT*item.pinyin_item_list.length)]" />
							</view>
						</view>
					</template>
				</view>
			</swiper-item>
		</swiper>

		<uni-popup ref="parentPopup" :mask-click="true">
			<view class="popup-box">
				<template v-if="questionData.property.learn_type === 'paint'">
					<Strockplayredline :class="['strock-chinese']" :play-storkes="false" :book-text="hz_content"
						:targetView="'black_'+canvas_id+answer_index" :book-strokes="hz_strokes" :bjIconSize="300"
						strokeColor="#404040" ref="strockBlack" />
					<Strockred :class="['strockred-box']" :mark="item_mark" :book-text="hz_content" :book-strokes="hz_strokes"
						:pinyin="pinyin_item" :reset="true" :audioFileId="py_audio_file_id" :target-view="'pop_'+canvas_id"
						:answerIndex="answer_index" :userAnswerList="returnUserAnswerList" @saveStrock="saveStrock"
						:hanzi-color="hanzi_color" ref="strockRed" />
				</template>
				<template v-else>
					<FreeWrite :class="['con-box']" :canvasId="'pop_'+canvas_id" :mark="item_mark" :answerIndex="answer_index"
						@saveStrock="saveStrock" :userAnswerList="returnUserAnswerList" :pinyin="pinyin_item"
						:disabled="answer_control[questionData.question_id].isReadOnly" />
				</template>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import {
		questionData,
		sanitizeHTML,
		isEnable,
		computedQuestionNumber,
		answer_control,
	} from '@/pages/answer_question/common/data/common.js';
	import {
		GetFileStoreInfo,
		GetStaticResources,
		GetFileURLMap
	} from '@/api/api.js';
	import Strockplayredline from '@/components/Strockplayredline/Strockplayredline.vue';
	import Strockred from '@/components/Strockred/Strockred.vue';
	import FreeWrite from '@/components/FreeWrite/FreeWrite.vue';
	import AudioPlay from '@/components/AudioPlay/AudioPlay.vue';
	import AnswerControlMixin from '@/pages/answer_question/common/data/AnswerControlMixin.js';
	export default {
		name: "chinese-question",
		mixins: [AnswerControlMixin],
		components: {
			Strockplayredline,
			Strockred,
			FreeWrite,
			AudioPlay
		},
		props: {
			questionData: questionData,
		},
		data() {
			return {
				isEnable,
				sanitizeHTML,
				computedQuestionNumber,
				answer_control,
				currentTab: 0, //当前标签
				prevTab: 0, //上一次点击的标签
				tabCurrent: 'tabNum0', //当前标签对应页
				currentPager: 0, //当前书写汉字格
				hanzi_color: '#404040', // 描红汉字底色
				answer_list: {
					write_model: {},
				}, // 用户答题数据
				isShow: true,
				isShowC: true,
				userAnswerList: [],
				returnUserAnswerList: [], //用
				strokesList: {}, //用于临时存储笔画

				imgList: [],
				canvas_id: '',
				item_mark: '',
				pinyin_item: '',
				answer_index: 0,
				hasPlay: false,
				hz_content: '',
				hz_strokes: '',
				py_audio_file_id: '',
				strokeColorList: [],
			};
		},
		watch: {
			'questionData.question_id': {
				handler(val, oldVal) {
					var that = this;
					that.commonComputedAnswerControl(val);
					that.isShow = false;
					that.isShowC = false;
					that.currentTab = 0;
					that.prevTab = 0;
					that.currentPager = 0;
					that.tabCurrent = 'tabNum0';
					that.userAnswerList = [];
					that.imgList = [];
					that.strokesList = {};
					if (val !== oldVal) {
						var cb = function() {
							that.handleData();
						};
						that.setUserAnswer(cb);
					}
				},
				immediate: true,
				deep: true,
			},
		},
		mounted() {
			uni.$on('_closePopup', this.closePopup);
		},
		onUnload() {
			uni.$off('_closePopup', this.closePopup);
		},
		methods: {
			// 初始化数据
			handleData() {
				var that = this;
				setTimeout(function() {
					that.isShow = true;
				}, 0)
				setTimeout(function() {
					that.isShowC = true;
				}, 10)
				var answer_list = [];
			},
			//切换汉字
			swichMenu(id) {
				this.currentPager = 0;
				this.currentTab = id;
				this.tabCurrent = 'tabNum' + id;
			},
			//切换当前汉字田字格数
			prevIndex(i) {
				if (i === 0) return;
				this.currentPager--;
			},
			nextIndex(i, total) {
				if (i === total - 1) return;
				this.currentPager++;
			},
			saveStrock(mark, data, img, answerIndex) {
				if (!mark) return;
				var en = this.questionData.option_list.find(p => p.mark == mark);
				if (en == null) return;
				var learn_type = this.questionData.property.learn_type;
				var oldAnswer = this.userAnswerList.find(p => p.mark == mark);
				var hasAnswer = false;
				if (!oldAnswer) {
					oldAnswer = {
						mark: mark,
						strokes_content_list: []
					};
					var answerCount = 0;
					if (learn_type == 'dictation') {
						answerCount = en.pinyin_item_list.length;
					} else {
						answerCount = this.questionData.property.tian_number * en.pinyin_item_list.length;
					}
					for (var i = 0; i < answerCount; i++) {
						oldAnswer.strokes_content_list[i] = learn_type == 'paint' ? 'false' : '';
					}

				} else {
					hasAnswer = true;
					oldAnswer.strokes_content_list[answerIndex] = '';
				}

				if (data) {
					if (learn_type == 'paint') {
						oldAnswer.strokes_content_list[answerIndex] = data;
					} else {
						var curHZ = this.strokesList[mark] || {};
						var curList = curHZ[answerIndex] || [];
						curList.push(data);
						curHZ[answerIndex] = curList;
						this.strokesList[mark] = curHZ;
						var strokes_content = {
							hz: en.hz_strokes_list[answerIndex % en.hz_strokes_list.length].hz,
							strokes_content: JSON.stringify(curList[0]),
							strokes_image: img
						};
						oldAnswer.strokes_content_list[answerIndex] = JSON.stringify(strokes_content);
					}
					if (!hasAnswer)
						this.userAnswerList.push(oldAnswer);
				}

				this.returnUserAnswerList = this.userAnswerList;
				var questionId = this.questionData.question_id;
				this.questionData.user_answer[questionId].isEdit = this.userAnswerList.length > 0;
				this.questionData.user_answer[questionId].answer_list = this.userAnswerList;
				const id = 'con_' + this.questionData.question_id + '_' + mark + answerIndex;

				if (learn_type == 'paint') {
					var _dom = document.getElementById(id);
					if (isEnable(data)) {
						_dom.style.opacity = 1;
					} else {
						_dom.style.opacity = 0.2;
					}
				}
				const element = this.$refs[id];
				if (!element) return;
				if (img) {
					this.$forceUpdate();
					this.$refs.parentPopup.close();
					this.imgList[mark + answerIndex] = img;
					element[0].setAttribute('src', img);
					element[0].style = "display:block";
				} else {
					element[0].setAttribute('src', '');
					element[0].style = "display:none";
				}
				// console.log('保存的', this.imgList);
			},
			setUserAnswer: function(cb) {
				// console.log('设置的', this.imgList);
				var that = this;
				var callback = function() {
					var userAnswer = [];
					var questionId = that.questionData.question_id;
					var _ua = that.questionData.user_answer[questionId];
					if (_ua && _ua.answer_list && _ua.answer_list.length > 0)
						userAnswer = _ua.answer_list;
					that.returnUserAnswerList = userAnswer;
					userAnswer.forEach(p => {
						if (p.strokes_content_list) {
							p.strokes_content_list.forEach((item, i) => {
								if (item == '' || null == item) return;
								var learn_type = that.questionData.property.learn_type;
								if ('paint' == learn_type) {
									if (isEnable(item)) {
										const id = 'con_' + questionId + '_' + p.mark + i;
										setTimeout(function() {
											var _dom = document.getElementById(id);
											_dom.style.opacity = 1;
										}, 1000);
									}
								} else {
									that.imgList[p.mark + i] = JSON.parse(item).strokes_image;
								}
							})
						}
					});
					if (cb && typeof cb === 'function') {
						cb();
					}
				}
				this.$emit("getUserAnswer", this.questionData.question_id, callback);
			},

			//书写汉字弹窗
			showHanziWritePop(type, canvas_id, item_mark, pinyin_item, answer_index) {
				this.$refs.parentPopup.open('center');
				this.answer_index = answer_index;
				if ('write' == type) {
					canvas_id = canvas_id + this.answer_index;
				}
				this.canvas_id = canvas_id;
				this.item_mark = item_mark;
				this.pinyin_item = pinyin_item;
			},
			//描红汉字弹窗
			showStrockRedPop(canvas_id, item_mark, answer_index, pinyin_item, hz_content, hz_strokes, py_audio_file_id) {
				if (this.answer_control[this.questionData.question_id].isReadOnly) return;
				var that = this;
				this.$refs.parentPopup.open('center');
				this.canvas_id = canvas_id + answer_index;
				this.item_mark = item_mark;
				this.answer_index = answer_index;
				this.pinyin_item = pinyin_item;
				this.hz_content = hz_content;
				this.hz_strokes = hz_strokes;
				this.py_audio_file_id = py_audio_file_id;
				this.returnUserAnswerList.forEach(p => {
					if (p.mark == item_mark) {
						if (isEnable(p.strokes_content_list[answer_index])) {
							setTimeout(function() {
								that.$refs.strockRed.$el.children[0].children[1].style.zIndex = -1;
								that.$refs.strockBlack.$el.style.zIndex = 1;
							}, 10);
						}
					}
				})
			},
			//关闭弹窗
			closePopup() {
				this.$refs.parentPopup.close();
			},
		},
	}
</script>
<style lang="scss" scoped>
	.chinese-area {
		.words-box {
			margin: 32rpx 0;

			/deep/ .uni-scroll-view-content {
				display: flex;
				column-gap: 32rpx;
			}

			.words-item {
				opacity: 0.2;

				.dictation-box {
					white-space: nowrap;
					color: #ffffff;
					background-color: $uni-color-main;
					display: flex;
					align-items: center;
					column-gap: 10rpx;
					padding: 16rpx 32rpx;
					border-radius: 40rpx;
				}

				.strock-chinese-area {
					display: flex;

					.strock-chinese {
						border: 1px solid #e81b1b;
						border-right: none;
					}

					.strock-chinese:last-child {
						border-right: 1px solid #e81b1b;
					}
				}
			}

			.menu-topic-active {
				opacity: 1;
			}
		}

		.title-split {
			height: 20rpx;
			position: relative;
			width: 109.5%;
			left: -5%;
			background: $uni-bg-color-grey;
			box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1) inset;
		}

		.swiper-box {
			margin-top: 32rpx;
			width: 100%;
			padding: 4rpx;

			.swiper-topic-area {
				width: 100%;
				display: flex;
				column-gap: 16rpx;
				row-gap: 16rpx;
				flex-wrap: wrap;

				.paint-content-box {
					display: flex;
					align-items: center;
					column-gap: 16rpx;
					row-gap: 16rpx;

					.paint-content-area {
						width: 72px;
						height: 72px;
						display: flex;
						align-items: center;
						justify-content: center;
						border: 1px solid #E81B1B;

						/deep/ .character-target-div {
							opacity: 0.2;
						}
					}
				}

				.write-content-box {
					display: flex;
					align-items: center;
					column-gap: 16rpx;
					row-gap: 16rpx;

					.write-content-area {
						position: relative;

						.character-target-bg {
							// color: #3F3F3F;
							border: 1px solid #E81B1B;
						}

						.hanzi-writer-img {
							width: 72px;
							height: 72px;
							position: absolute;
							top: 1px;
							left: 1px;
							border: 0;
						}

						.hanzi-writer-img {
							z-index: 1;
						}
					}
				}

				.dictation-content-box {
					display: flex;
					flex-direction: column;
					flex-wrap: wrap;
					align-items: center;
					row-gap: 16rpx;
					column-gap: 16rpx;

					.hanzi-writer-area {
						position: relative;

						.character-target-bg {
							// color: #DEDEDE;
							border: 1px solid #E81B1B;
						}

						.hanzi-writer-img {
							width: 72px;
							height: 72px;
							position: absolute;
							top: 1px;
							left: 1px;
							border: 0;
						}

						.hanzi-writer-img {
							z-index: 1;
						}
					}

					.play-handwriting-btn {
						width: 72px;
						height: 26px;
						background-color: #F6F6F6;
						border-radius: 6rpx;
						font-size: 24rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						column-gap: 16rpx;
					}
				}
			}
		}

		.popup-box {
			padding: 24rpx;
			border-radius: 16rpx;
			background-color: #ffffff;

			.close-box {
				display: flex;
				justify-content: right;
			}

			.strock-chinese {
				position: absolute;
				top: 114rpx;
				z-index: -1;

				/deep/.character-target-bg {
					border: 4px solid #E81B1B;
				}

				/deep/.character-target-div {
					top: 8rpx;
					left: 8rpx;
				}
			}

			.strockred-box {
				position: relative;
			}
		}
	}

	.audio-wrapper {
		margin: 0;

		/deep/ .audio-play {
			width: 16px !important;
			height: 16px !important;
		}

		/deep/ .voice-play {
			width: 16px !important;
			height: 16px !important;
		}
	}
</style>
<style>
	/deep/ uni-swiper {
		/* min-height: calc(100vh - 570rpx) !important; */
		height: 100vh !important;
	}
</style>