uniProject/components/question/yingyu/textReplaceIcon.vue

<template>
	<view v-html="formattedText" :myflag="myflag" :question="question" @click.native="handleClick"
		:change:myflag="YY.updateFlag" :change:question="YY.watchQuestionChange"></view>
</template>

<script>
	import {
		debounce
	} from '@/utils/common';
	import {UseAudio} from "./useAudio.js"
	export default {
		props: {
			placeholders: { // 占位符
				type: Array,
				required: true
			},
			text: {
				type: String,
			},
			question: {
				type: Object,
			},
			code: {
				type: String
			},
		},
		data() {
			return {
				myflag: 0,
				isplaying: null,
			}
		},
		computed: {
			// 计算属性，用于生成填空后的文本
			formattedText() {
				let result = this.text;
				this.placeholders.forEach((placeholder, index) => {
					// 使用正则表达式全局替换占位符
					const regex = new RegExp(`\\${placeholder}`, 'g');
					if (!this.isplaying) {

						const cId = this.code ? `t_${this.question.stId}_${index}_${this.code}` :
							`t_${this.question.stId}_${index}`
						result = result.replace(regex,
							`<view	class="yingyu-canplay-img" id="${cId}"></view>`
						);
					} else if (this.isplaying && this.question.stId == this.isplaying.stId && this.isplaying
						.index == index) {
						const cId = this.code ? `t_${this.question.stId}_${index}_${this.code}` :
							`t_${this.question.stId}_${index}`
						result = result.replace(regex,
							`<view	class="yingyu-playing-img" id="${cId}"></view>`
						);
					} else {
						const cId = this.code ? `t_${this.question.stId}_${index}_${this.code}` :
							`t_${this.question.stId}_${index}`
						result = result.replace(regex,
							`<view	class="yingyu-canplay-img" id="${cId}"></view>`
						);
					}
				});
				this.myflag++;
				return result;
			},
		},
		methods: {
			onResetPlayStatus(data) {
				if (this.isplaying) {
					if (data.stId == this.isplaying.stId && data.index == this.isplaying.index) {
						this.isplaying = null;
					}
				}
			},
			onYYAudioPlaying(data) {
				if (this.isplaying) {
					// 存在播放实例 并且播放非同一音频
					if (this.isplaying.stId != data.stId) {
						this.isplaying = null;
					}
				} else {
					// 不存在播放实例 
					this.isplaying = data;
				}
			},
			onYYAudioError() {
				this.isplaying = null;
			},
			onYYAudioEnd() {
				this.isplaying = null;
			},
			onDestoryStop() {
				this.isplaying = null;
			},
			onSwiperChange() {
				this.isplaying = null;
				UseAudio.create().instance.stop();
			},
			onQuestionJiexiClose() {
				this.isplaying = null;
				UseAudio.create().instance.stop();
			},
			onUnitTestSubmit() {
				this.isplaying = null;
				UseAudio.create().instance.stop();
			},
			onBackOutPage() {
				this.isplaying = null;
				UseAudio.create().instance.stop();
			},
			
			handleClick() {
				this.$emit('itemclick')
			},
			audioClick(data) {
				UseAudio.create().instance.play(data);
			},
		},
		created() {
			// 切换不同播放音频时 重置状态
			uni.$on('reset-playing-status', this.onResetPlayStatus)
			// 音频播放
			uni.$on('yy-audio-playing', this.onYYAudioPlaying)
			// 音频异常  重置音频
			uni.$on('yy-audio-error', this.onYYAudioError)
			// 音频自然播放结束  重置音频
			uni.$on('yy-audio-end', this.onYYAudioEnd)
			// 音频销毁 重置音频
			uni.$on('destory-stop', this.onDestoryStop)
			// 试题切换 重置音频
			uni.$on('swiper-change',this.onSwiperChange)
			// 解析关闭 重置音频
			uni.$on('question-jiexi-close', this.onQuestionJiexiClose)
			uni.$on('unitTest-submit', this.onUnitTestSubmit)
			uni.$on('back-outpage', this.onBackOutPage)
		},
		destroyed() {
			// 切换不同播放音频时 重置状态
			uni.$off('reset-playing-status', this.onResetPlayStatus)
			// 音频播放
			uni.$off('yy-audio-playing', this.onYYAudioPlaying)
			// 音频异常  重置音频
			uni.$off('yy-audio-error', this.onYYAudioError)
			// 音频自然播放结束  重置音频
			uni.$off('yy-audio-end', this.onYYAudioEnd)
			// 音频销毁 重置音频
			uni.$off('destory-stop', this.onDestoryStop)
			// 试题切换 重置音频
			uni.$off('swiper-change',this.onSwiperChange)
			// 解析关闭 重置音频
			uni.$off('question-jiexi-close', this.onQuestionJiexiClose)
			uni.$off('unitTest-submit', this.onUnitTestSubmit)
			uni.$off('back-outpage', this.onBackOutPage)
			
		
		}
	}
</script>
<script module="YY" lang="renderjs">
	export default {
		data() {
			return {
				myQ: null,
				callbacks: [],
				status: '',
			}
		},
		methods: {
			debounce(func, wait) {
				let timeout;

				return function(...args) {
					// 清除之前的定时器
					clearTimeout(timeout);

					// 设置新的定时器
					timeout = setTimeout(() => {
						func.apply(this, args);
					}, wait);
				};
			},
			updateFlag() {
				this.initListener(this.myQ)
			},
			updateFn({
				stId,
				index
			}) {
				const url = this.myQ.audioList[index]
				this.$ownerInstance.callMethod('audioClick', {
					stId,
					index,
					url
				});
			},

			watchQuestionChange(newValue, oldValue, ownerInstance, instance) {
				if (newValue) {
					this.myQ = newValue;
					this.initListener(newValue)
				}
			},
			initListener(question) {
				if (!question) {
					return;
				}
		
				this.callbacks = [];
				question.placeholders.forEach((item, index) => {
					const cId = question.code ? `t_${question.stId}_${index}_${question.code}` :
						`t_${question.stId}_${index}`
					const dom = document.getElementById(cId)
					if (dom) {
						const qaindex = this.callbacks.findIndex(item => item.index === index)
						if (qaindex > -1) {
							dom && dom.removeEventListener('click', this.callbacks[qaindex].callback);
							this.callbacks = this.callbacks.filter(item => item.index != qaindex);
						}
						const callbackFn = this.debounce(() => {
							this.updateFn({
								stId: question.stId,
								index
							})
						}, 10)
						
						this.callbacks.push({
							index: index,
							stId: question.stId,
							callback: callbackFn
						})
						dom && dom.addEventListener('click', this.callbacks.find(cIte => cIte.index === index)
							.callback)
					}

				})
			},
		},
	}
</script>
<style>
</style>