英语题追加音频播放

components/chengji/chengji.vue

@@ -13,7 +13,7 @@
 							<danxuan :question="item" showError v-if="item.type == '1'"></danxuan>
 							<panduan :question="item" showError v-if="item.type == '2'"></panduan>
               <tiankong :question="item" showError v-if="item.type == '3'" :placeholders="item.placeholders"></tiankong>
-              <yingyu :question="item" showError v-if="item.type == '4'" :placeholders="item.placeholders"></yingyu>
+              <yingyu code="cj" :question="item" showError v-if="item.type == '4'" :placeholders="item.placeholders"></yingyu>
 							<view class="answer-content-box">
 								<view class="answer-dtjx-row">
 									<view class="answer-title"></view>

components/question/yingyu/danxuan.vue

@@ -3,12 +3,12 @@
 		<!-- 标题区域 -->
 		<view class="yingyu-danxuan-title"></view>
 		<!-- 题干区域 -->
-		<textReplaceIconVue :question="question" :text="question.name" :placeholders="placeholders" class="ezy-shiti-question">
+		<textReplaceIconVue :code="code" :question="question" :text="question.name" :placeholders="placeholders" class="ezy-shiti-question">
 		</textReplaceIconVue>
 		<!-- 选项区域 -->
 		<view v-for="(item,index) in data.contents" class="yingyu-danxuan-option-box" :class="formatClass(index)" :key="index" @click="onSelect(index)">
 			<text class="option-change">{{item.number}}</text>
-			<textReplaceIconVue :question="question" :text="item.label" :placeholders="placeholders" @itemclick="onSelect(index)" class="option-question">
+			<textReplaceIconVue :code="code" :question="question" :text="item.label" :placeholders="placeholders" @itemclick="onSelect(index)" class="option-question">
 			</textReplaceIconVue>
 		</view>
 	</view>
@@ -42,6 +42,9 @@
 			type: Array,
 			required: true
 		},
+		code: {
+			type: String,
+		}
 	})
 	const data = reactive({
 		name: '', //题干数据

components/question/yingyu/textReplaceIcon.vue

@@ -1,10 +1,12 @@
 <template>
-	<view v-html="formattedText"  :myflag="myflag" :question="question" @click.native="handleClick"
-			:change:myflag="YY.updateFlag" :change:question="YY.watchQuestionChange"></view>
+	<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 {
+		debounce
+	} from '@/utils/common';
 	export default {
 		props: {
 			placeholders: { // 占位符
@@ -14,19 +16,18 @@
 			text: {
 				type: String,
 			},
-			showError: {
-				type: Boolean,
-				default: false
-			},
 			question: {
 				type: Object,
 			},
+			code: {
+				type: String
+			}
 		},
 		data() {
 			return {
 				myflag: 0,
 				isplaying: null,
-        isFirst: -1,
+				isFirst: -1,
 			}
 		},
 		computed: {
@@ -37,17 +38,23 @@
 					// 使用正则表达式全局替换占位符
 					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="t_${this.question.stId}_${index}"></view>`
+							`<view	class="yingyu-canplay-img" id="${cId}"></view>`
 						);
 					} else if (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="t_${this.question.stId}_${index}"></view>`
+							`<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}`
+						console.log('before',result)
 						result = result.replace(regex,
-							`<view	class="yingyu-canplay-img" id="t_${this.question.stId}_${index}"</view>`
+							`<view	class="yingyu-canplay-img" id="${cId}"></view>`
 						);
+						console.log('after result', result)
 					}
 				});
 				this.myflag++;
@@ -59,38 +66,38 @@
 				this.$emit('@itemclick')
 			},
 			audioClick(data) {
-        if (this.isFirst >= 0) {
-          uni.$emit('do-yy-audio-stop', data);
-          this.isFirst = -1
-          return;
-        }
+				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-stop', data);
-          this.isFirst++;
-          return;
-        }
-				
 				// 初次播放
 				if (!this.isplaying) {
-          uni.$emit('do-yy-audio-play', data);
-          this.isFirst++;
-          return;
+					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('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) => {
+			uni.$on('yy-audio-playing', (data) => {
 				if (this.isplaying) {
 					// 存在播放实例 并且播放非同一音频
 					if (this.isplaying.stId != data.value.stId) {
@@ -102,43 +109,41 @@
 				}
 			})
 			// 音频异常  重置音频
-			uni.$on('yy-audio-error',(data) => {
+			uni.$on('yy-audio-error', (data) => {
 				this.isplaying = null;
 			})
 			// 音频自然播放结束  重置音频
-			uni.$on('yy-audio-end',(data) => {
+			uni.$on('yy-audio-end', (data) => {
 				this.isplaying = null;
 			})
 			// 音频销毁 重置音频
-			uni.$on('destory-stop',(data) => {
+			uni.$on('destory-stop', (data) => {
 				this.isplaying = null;
 			})
 			// 试题切换 重置音频
-			uni.$on('swiper-change',() => {
+			uni.$on('swiper-change', () => {
 				this.isplaying = null;
 			})
 			// 解析关闭 重置音频
-			uni.$on('question-jiexi-close',() => {
+			uni.$on('question-jiexi-close', () => {
 				this.isplaying = null;
 			})
-			uni.$on('unitTest-submit',() => {
+			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
 			},
+			code: {
+				type: String
+			}
 		},
 		data() {
 			return {
@@ -147,12 +152,32 @@
 			}
 		},
 		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}) {
+			updateFn({
+				stId,
+				index
+			}) {
 				const url = this.myQ.audioList[index]
-				this.$ownerInstance.callMethod('audioClick', {stId,index,url});
+				this.$ownerInstance.callMethod('audioClick', {
+					stId,
+					index,
+					url
+				});
 			},
 
 			watchQuestionChange(newValue, oldValue, ownerInstance, instance) {
@@ -162,26 +187,33 @@
 				}
 			},
 			initListener(question) {
+				console.log('init')
 				if (!question) {
 					return;
 				}
-				if (this.showError) {
-					return;
-				}
 				question.placeholders.forEach((item, index) => {
-					const dom = document.getElementById(`t_${question.stId}_${index}`)
+					const cId = this.code ? `t_${this.question.stId}_${index}_${this.code}`:`t_${this.question.stId}_${index}`
+					const dom = document.getElementById(cId)
 					if (dom) {
 						const qaindex = this.callbacks.findIndex(item => item.index === index)
-						if (qaindex>-1) {
+						if (qaindex > -1) {
 							dom && dom.removeEventListener('click', this.callbacks[qaindex].callback);
-							this.callbacks = this.callbacks.filter(item => item.index !=qaindex);
+							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
+						const callbackFn = this.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)
+						dom && dom.addEventListener('click', this.callbacks.find(cIte => cIte.index === index)
+							.callback)
 					}
-					
+
 				})
 			},
 		},