GCLS_Page_Mobile/components/word-card-question/word-card-question.vue

<template>
	<view class="wordcard-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' : '']" v-if="item.content">
				{{item.content}}
			</view>
		</scroll-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">
					<image v-if="item.picture_url" :src="item.picture_url" mode="heightFix" @click="preview(item.picture_url)" />
					<!-- <uni-rate size="18" :value="item.rate" /> -->
					<view v-if="item.audio_file_id||item.pinyin">
						<AudioPlay v-if="item.audio_file_id.length>0" :file-id="item.audio_file_id" />
						<!-- <text v-if="item.pinyin.length>0">{{item.pinyin}}</text> -->
					</view>
					<view class="pinyin-box" v-if="item.pinyin.length>0&&item.pinyin.trim().split(' ').length>0">
						<text class="pinyin" v-for="(pinyin,indexP) in item.pinyin.trim().split(' ')" :key="indexP">
							{{pinyin}}
						</text>
					</view>
					<view class="strock-chinese-box">
						<Strockplayredline v-for="(word,indexW) in item.hz_strokes_list" :key="indexW" strokeColor="#000000"
							:class="['strock-chinese']" :play-storkes="true" :book-text="word.hz"
							:target-view="questionData.question_id+'_' + index +'_'+ indexW" :book-strokes="word.strokes" />
					</view>
					<view class="line"></view>
					<view class="text-box">

						<view class="example-box" v-if="item.definition.length>0">
							<view class="example-title">释义：</view>
							<view class="example-text">{{item.definition}}</view>
						</view>
						<view class="example-box" v-if="item.collocation.length>0">
							<view class="example-title">搭配：</view>
							<view class="example-text">{{item.collocation}}</view>
						</view>
						<view class="example-box" v-if="item.example_sentence.length>0">
							<view class="example-title">例句：</view>
							<view class="example-text" v-for="(example_sentence,indexE) in item.example_sentence" :key="indexE">
								<template v-if="example_sentence.length>0">
									{{computedQuestionNumber(indexE,questionData.option_number_show_mode)}} {{example_sentence}}
								</template>
							</view>
						</view>
					</view>
					<!-- 语音作答 -->
					<SoundRecord v-if="answer_list[currentTab]" ref="soundRecord" :notOnTheCurPage=true @setAudioId="setFileId"
						type="small" :wav-blob.sync="answer_list[currentTab].audio_file_id"
						:disabled="answer_control[questionData.question_id].isReadOnly">
					</SoundRecord>
				</view>
			</swiper-item>
		</swiper>
		<uni-popup ref="parentPopup" :mask-click="false">
			<view class="canvas-area">
				<text class="canvas-title">录音中...
					<text>{{ secondFormatConversion(recordTimes) }}</text>
				</text>
				<canvas canvas-id="recordCanvas" id="recordCanvas" type="2d" ref="record"></canvas>
				<view class="sound-item-svg" @click="parentHandleStop">
					<svg fill="#ffffff">
						<use xlink:href="#icon-audio-stop"></use>
					</svg>
				</view>
			</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 {
		convertStringToCollection,
		secondFormatConversion
	} from '@/utils/transform.js';
	import Strockplayredline from '@/components/Strockplayredline/Strockplayredline.vue';
	import SoundRecord from '@/components/sound-record/sound-record.vue';
	import AnswerControlMixin from '@/pages/answer_question/common/data/AnswerControlMixin.js';
	export default {
		name: "word-card-question",
		mixins: [AnswerControlMixin],
		components: {
			Strockplayredline,
			SoundRecord
		},
		props: {
			questionData: questionData,
		},
		data() {
			return {
				isEnable,
				sanitizeHTML,
				computedQuestionNumber,
				convertStringToCollection,
				secondFormatConversion,
				answer_control,
				currentTab: 0, //当前标签
				tabCurrent: 'tabNum0', //当前标签对应页
				isShow: true, //初始化scrooview内容
				isShowC: true, //初始化内容
				answer_list: [],
				timer: null, // 计时器
				recordTimes: 0,
			};
		},
		watch: {
			answer_list: {
				handler(val) {
					if (this.isAnswerReady)
						this.saveUserAnswer();
				},
				deep: true,
				immediate: true,
			},
			'questionData.question_id': {
				handler(val) {
					this.commonComputedAnswerControl(val);
					this.answer_list = [];
					this.questionData.option_list.forEach((item) => {
						let obj = {
							mark: item.mark,
							audio_file_id: '',
						};
						this.answer_list.push(obj);
					});
					this.$nextTick(() => {
						var that = this;
						this.currentTab = 0;
						this.tabCurrent = 'tabNum0';
						this.isShow = false;
						this.isShowC = false;
						setTimeout(function() {
							that.isShow = true;
						}, 0)
						setTimeout(function() {
							that.isShowC = true;
						}, 10)
						this.getFileUrl();
						this.isAnswerReady = true;
						this.setUserAnswer();
					});
					this.$forceUpdate();
				},
				deep: true,
				immediate: true,
			},
		},
		mounted() {
			uni.$on('openOrClosePopup', this.openPopup);
		},
		onUnload() {
			uni.$off('openOrClosePopup', this.openPopup);
		},
		methods: {
			//打开遮罩
			openPopup(isOpen) {
				if (isOpen) {
					this.$refs.parentPopup.open('center');
					this.recordTimes = 0;
					this.timer = setInterval(() => {
						this.recordTimes += 1;
					}, 1000);
				}
			},
			parentHandleStop() {
				this.$refs.soundRecord[this.currentTab].handleStop();
				this.$refs.parentPopup.close();
				clearInterval(this.timer); //清除计时器
			},
			getFileUrl() {
				var file_id = this.questionData.option_list[this.currentTab].picture_file_id;
				if (!file_id) return;
				if (!this.questionData.option_list[this.currentTab].picture_url) {
					GetFileStoreInfo({
						file_id: file_id
					}).then(({
						file_id,
						file_url
					}) => {
						this.$set(this.questionData.option_list[this.currentTab], 'picture_url', file_url);
					});
				}
			},
			playAudio(audio_file_id, index) {
				if (!audio_file_id) return;
				GetFileURLMap({
					file_id_list: [audio_file_id]
				}).then(({
					url_map
				}) => {
					var isNotCurAudio = this.currentTab != index;
					this.$emit("playAudio", url_map[audio_file_id], isNotCurAudio);
					this.currentTab = index;
				});
			},
			//切换词卡
			swichMenu(id) {
				this.currentTab = id;
				this.tabCurrent = 'tabNum' + id;
				this.getFileUrl();
			},
			//异步更新声音ID有问题，所以采用方法手动赋值
			setFileId(fileId) {
				this.questionData.user_answer[this.questionData.question_id].isEdit = true;
				this.$forceUpdate();
			},
			//填写答案后保存答案
			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.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>
	.wordcard-area {
		.question_title {
			display: flex;
			flex-direction: row;
			margin-bottom: 32rpx;

			.question_number,
			.question_stem {
				color: #34343A;
			}

			.question_number {
				margin-right: 10rpx;
			}
		}

		.description {
			padding: 24rpx 48rpx;
			border-radius: 40rpx;
			font-size: $font-size-serial;
			background-color: $uni-bg-color-grey;
			margin-top: 32rpx;
		}

		.words-box {
			margin: 32rpx 0;

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

			.words-item {
				opacity: 0.2;
				white-space: nowrap;
				color: #ffffff;
				background-color: #165DFF;
				display: flex;
				align-items: center;
				column-gap: 10rpx;
				padding: 16rpx 32rpx;
				border-radius: 40rpx;
			}

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

		/deep/ .swiper-box {
			margin-top: 32rpx;
			height: 800px;

			.swiper-topic-area {
				display: flex;
				flex-direction: column;
				align-items: center;
				row-gap: 32rpx;

				.strock-chinese-box {
					display: flex;

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

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

				.pinyin-box {
					display: flex;
					margin-bottom: -28rpx;

					.pinyin {
						width: 64px;
						text-align: center;
					}
				}

				.line {
					width: 100%;
					height: 1px;
					background-color: #000000;
					opacity: 8%;
				}

				.text-box {
					text-align: left;
					width: 100%;

					.definition {
						font-size: 32rpx;
						font-weight: 400;
						line-height: 48rpx;
					}

					.example-box {
						margin-top: 32rpx;

						.example-title {
							font-size: 32rpx;
							font-weight: 400;
							line-height: 44rpx;
							opacity: 0.4;
							margin-bottom: 16rpx;
						}

						.example-text {
							font-size: 32rpx;
							font-weight: 400;
							line-height: 44rpx;
						}
					}
				}
			}
		}
	}

	/deep/ .sound-record-wrapper {
		background-color: $uni-bg-color-grey;
		padding: 8rpx;
		border-radius: 80rpx;
		align-items: center;
		column-gap: 16rpx;
		margin-top: 0;
	}

	.canvas-area {
		width: 308rpx;
		height: 312rpx;
		text-align: center;
		background-color: rgba(0, 0, 0, 0.8);
		border-radius: 32rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		padding: 48rpx 32rpx;
		z-index: 111;

		.canvas-title {
			color: #ffffff;
			font-size: 28rpx;
		}

		canvas {
			width: 300rpx;
			height: 92rpx;
			margin: 46rpx 0;
		}

		.sound-item-svg {
			width: 96rpx;
			height: 96rpx;
			border-radius: 160rpx;
			background-color: #7346d3;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 auto;

			svg {
				width: 44rpx;
				height: 44rpx;
			}
		}
	}

	.audio-wrapper {
		margin: 0;

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

		/deep/ .voice-play {
			width: 16px !important;
			height: 16px !important;
			padding: 16rpx;
		}
	}
</style>