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';
	export default {
		props: {
			placeholders: { // 占位符
				type: Array,
				required: true
			},
			text: {
				type: String,
			},
			showError: {
				type: Boolean,
				default: false
			},
			question: {
				type: Object,
			},
		},
		data() {
			return {
				myflag: 0,
				isplaying: null,
        isFirst: -1,
			}
		},
		computed: {
			// 计算属性，用于生成填空后的文本
			formattedText() {
				let result = this.text;
				this.placeholders.forEach((placeholder, index) => {
					// 使用正则表达式全局替换占位符
					const regex = new RegExp(`\\${placeholder}`, 'g');
					if (!this.isplaying) {
						result = result.replace(regex,
							`<view	class="yingyu-canplay-img" id="t_${this.question.stId}_${index}"></view>`
						);
					} else if (this.question.stId == this.isplaying.stId && this.isplaying.index == index) {
						result = result.replace(regex,
							`<view	class="yingyu-playing-img" id="t_${this.question.stId}_${index}"></view>`
						);
					} else {
						result = result.replace(regex,
							`<view	class="yingyu-canplay-img" id="t_${this.question.stId}_${index}"</view>`
						);
					}
				});
				this.myflag++;
				return result;
			},
		},
		methods: {
			handleClick() {
				this.$emit('@itemclick')
			},
			audioClick(data) {
        if (this.isFirst >= 0) {
          uni.$emit('do-yy-audio-stop', data);
          this.isFirst = -1
          return;
        }

        if (this.isplaying) {
          uni.$emit('do-yy-audio-stop', data);
          this.isFirst++;
          return;
        }
				
				// 初次播放
				if (!this.isplaying) {
          uni.$emit('do-yy-audio-play', data);
          this.isFirst++;
          return;
				}

			}
		},
		created() {
      // 切换不同播放音频时 重置状态
      uni.$on('reset-playing-status',(data) => {
        if (this.isplaying) {
          if (data.stId == this.isplaying.stId && data.index == this.isplaying.index) {
            this.isplaying = null;
          }
        }
      })
			// 音频播放
			uni.$on('yy-audio-playing',(data) => {
				if (this.isplaying) {
					// 存在播放实例 并且播放非同一音频
					if (this.isplaying.stId != data.value.stId) {
						this.isplaying = null;
					}
				} else {
					// 不存在播放实例 
					this.isplaying = data;
				}
			})
			// 音频异常  重置音频
			uni.$on('yy-audio-error',(data) => {
				this.isplaying = null;
			})
			// 音频自然播放结束  重置音频
			uni.$on('yy-audio-end',(data) => {
				this.isplaying = null;
			})
			// 音频销毁 重置音频
			uni.$on('destory-stop',(data) => {
				this.isplaying = null;
			})
			// 试题切换 重置音频
			uni.$on('swiper-change',() => {
				this.isplaying = null;
			})
			// 解析关闭 重置音频
			uni.$on('question-jiexi-close',() => {
				this.isplaying = null;
			})
			uni.$on('unitTest-submit',() => {
				this.isplaying = null;
			})
		}
	}
</script>
<script module="YY" lang="renderjs">
	import {debounce} from "@/utils/common.js"
	export default {
		props: {
			showError: {
				type: Boolean,
				default: false
			},
			placeholders: { // 占位符
				type: Array,
				required: true
			},
		},
		data() {
			return {
				myQ: null,
				callbacks: []
			}
		},
		methods: {
			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;
				}
				if (this.showError) {
					return;
				}
				question.placeholders.forEach((item, index) => {
					const dom = document.getElementById(`t_${question.stId}_${index}`)
					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 = debounce(() => { this.updateFn({ stId: question.stId, index})},100)
						this.callbacks.push({index: index, callback: callbackFn
						})
						dom && dom.addEventListener('click', this.callbacks.find(cIte => cIte.index === index).callback)
					}
					
				})
			},
		},
	}
</script>
<style>
</style>