uniProject/components/question/yingyu/danxuanCeshi.vue

<template>
	<view>
		<view>12312312</view>
		<!-- 选项区域 -->
		<view v-for="(item,index) in data.contents" class="yingyu-danxuan-option-box" :key="index">
			<text class="option-change">{{item.number}}</text>
			<view v-if="item.placeholders.length ==1"  @click="ceshiAA(item,index)">
					<rich-text :nodes="item.neirong" class="option-question"></rich-text>
			</view>
			<view v-else v-for="(item2,index2) in item.placeholders"  @click="ceshiBB(item2,index2)">
					<rich-text :nodes="item.neirong[index2]" class="option-question"></rich-text>
			</view>
		</view>
	</view>
</template>
<script setup>
	import {
		ref,
		reactive,
		onMounted,
		watch
	} from 'vue';
	import {
		useQuestionTools
	} from "../useQuestionTools"

	import textReplaceIconVue from './textReplaceIcon.vue'

	let richTextNodes = [{
		name: 'div',
		attrs: {
			class: 'div-class',
		},
		children: [{
			type: 'text',
			text: 'Hello&nbsp;uni-app!'
		}]
	}]
	const {
		getLetterByIndex
	} = useQuestionTools();

	const props = defineProps({
		question: {
			type: Object,
		},
		showError: {
			type: Boolean,
			default: false
		},
		placeholders: { // 占位符
			type: Array,
			required: true
		},
		code: {
			type: String,
		}
	})
	const data = reactive({
		name: '', //题干数据
		contents: [], // 选项数据
	})
	let modifiedHtml = ''
	let index11 = ''
	let number = 0
	const iconHtml = ref('<p class="yingyu-canplay-img" data-index="0">喇叭1</p>')
	const dynamicContentRef = ref(null);
	watch(() => props.question, (val) => formatData(val), {
		immediate: true
	})


	function itemclick(event) {
		console.log('event', event);
	}
	function ceshiAA(item,index){
		console.log('item', item);
		console.log('index', index);
	}
	function ceshiBB(item,index){
		console.log('item2', item);
		console.log('index2', index);
	}
	function formatData(val) {
		if (val) {
			data.name = val.name;
			data.contents = val.optList.map((item, index) => {
				//	console.log('item,',item);
				const iconHtml =
					`<img class="yingyu-canplay-img">`;; // 这里使用了一个简单的图标符号
				modifiedHtml = item.neirong.replace(/&&&/g, iconHtml);
				let regex = /<p[>]*>([\s\S]*?)<\/p>/g;
				let pTagCount = (modifiedHtml.match(/<p>/g) || []).length;
				let result;
				if (pTagCount === 1) {
				  // 如果只有一个<p>标签，保持原样
				  result = modifiedHtml;
				} else if (pTagCount > 1) {
				  // 如果有多个<p>标签，转换成数组
				  result = modifiedHtml.match(regex);
				} else {
				  // 如果没有<p>标签，可以返回一个空数组或null，根据实际需求决定
				  result = [];
				}
				
			//	console.log('modifiedHtml', modifiedHtml);
				return {
					neirong: result,
					number: getLetterByIndex(index),
					placeholders: getPlaceholders(item.neirong)
				}
			})
			console.log('data', data);
		}
	}

	function getPlaceholders(html) {
			console.log('html',html);
		// 使用正则表达式匹配所有&&&，并返回一个数组，每个元素代表一个占位符
		return html.match(/&&&/g) || [];
	}
	let audioContext = null;
	let isPlaying = false;
	let currentIndex = -1;


	function initAudioContext() {
		if (!audioContext) {
			audioContext = uni.createInnerAudioContext();

			// 监听音频播放状态
			audioContext.onPlay(() => {
				isPlaying = true;
				console.log('音频开始播放');
			});

			audioContext.onPause(() => {
				isPlaying = false;
				console.log('音频暂停播放');
			});

			audioContext.onStop(() => {
				isPlaying = false;
				console.log('音频停止播放');
			});

			audioContext.onEnded(() => {
				isPlaying = false;
				console.log('音频播放结束');
			});
		}
	}

	function playAudio(src) {
		if (!audioContext) {
			initAudioContext();
		}
		audioContext.src = src;
		audioContext.play();
	}

	function audioCreat(item, index, placeholderIndex) {

		console.log('item', item);
		console.log('index', index);
		console.log('placeholderIndex', placeholderIndex);
		return
		// 如果 index 变化了，或者当前没有音频在播放，就播放新音频
		if (index !== currentIndex || !isPlaying) {
			// 如果之前有音频在播放，先暂停
			if (isPlaying) {
				audioContext.pause();
			}
			// 更新当前索引和播放状态
			currentIndex = index;
			playAudio(item.audio);
		} else {
			// 如果 index 没变化且音频正在播放，就暂停音频
			if (isPlaying) {
				audioContext.pause();
			} else {
				// 如果 index 没变化但音频没播放，就播放音频
				playAudio(item.audio);
			}
		}
	}
</script>