uniProject/pages/newEnglish/components/mainCard.vue

<template>
	<selectTypesVue :activeSelect="currentIndex" @change="onChange"></selectTypesVue>
	<swiper class="word-view-swiper-box" :indicator-dots="false" :autoplay="false" :circular="false" :current="+currentIndex-1"
		@change="handleSwiperChange" :disable-touch="isPlaying">
		<swiper-item>
			<view class="swiper-item uni-bg-red">
				<xuePage :active-word="activeWord" :active-words="activeWords" @goXiangjie="goXiangjie"
					@play-audio="handlePlayAudio" :pageData="pageData"></xuePage>
			</view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item uni-bg-red">
				<pinPageVue :active-word="activeWord" :active-words="activeWords" @play-audio="handlePlayAudio">
				</pinPageVue>
			</view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item uni-bg-blue">
				<readContent :active-word="activeWord" :pageData="pageData" @play-audio="handlePlayAudio"
					@luyinSuccess="luyinSuccess" :active-words="activeWords"></readContent>
			</view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item uni-bg-blue">
				<selectPageVue :active-word="activeWord" :active-words="activeWords" @play-audio="handlePlayAudio">
				</selectPageVue>
			</view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item uni-bg-blue">
				<beiPageVue :active-word="activeWord" :pageData="pageData" :active-words="activeWords"
					@play-audio="handlePlayAudio"></beiPageVue>
			</view>
		</swiper-item>
	</swiper>

	<uni-popup ref="statusPopup" :animation="false" :is-mask-click="false"
		mask-background-color="rgba(51, 137, 217, 0.65);">
		<view class="ezy-image-dialog luyin">
		</view>
	</uni-popup>

	<audioRightWrongVue></audioRightWrongVue>
</template>

<script setup>
	import pinPageVue from './pinPage.vue';
	import selectPageVue from './selectPage.vue';
	import beiPageVue from './beiPage.vue';
	import readContent from './readContent.vue';
	import xuePage from './xuePage.vue';
	import audioRightWrongVue from "../components/audioRightWrong.vue";
	import selectTypesVue from './selectTypes.vue';
  import {
    ref,
    onMounted,
    onUnmounted, nextTick
  } from 'vue';
	const props = defineProps({
		activeWord: {
			type: Object,
		},
		pageData: {
			type: Object,
		},
		activeWords: {
			type: Array
		},
		isPlaying: Boolean // 新增 isPlaying prop
	})
	const statusPopup = ref(null)
	const popupImage = ref('')
	const statusAudio = uni.createInnerAudioContext()
	const emits = defineEmits(['play-audio', 'goXiangjie', 'swiper-change'])
	const currentIndex = ref(1)
  const mySwiperRef = ref(null);
	const isXunHuanbofangYinbiao = ref(false)


	const luyinSuccess = (imagePath, text, audioPath) => {
		console.log('111111');
		showStatusPopup('', '录音成功!', '/static/mp3/newYingyu/right-tip.mp3')
	}

	const showStatusPopup = (imagePath, text, audioPath) => {
		console.log('audioPath', audioPath);
		// 播放音效
		statusAudio.stop()
		statusAudio.src = audioPath
		statusAudio.play()

		// 显示弹窗
		statusPopup.value.open()

	}

	function handleSwiperChange(e) {
		emits('swiper-change', e.detail.current)
		currentIndex.value = e.detail.current + 1;
	}

	function onChange(code) {
		if (props.isPlaying || isXunHuanbofangYinbiao.value) return;
		currentIndex.value = (code + 1)
	}

	function handlePlayAudio({
		url,
		code
	}) {
		emits('play-audio', {
			url,
			code
		})
	}

	function goXiangjie() {
		emits('goXiangjie')
	}
	
	function updateYinbiaoSataus(da) {
		isXunHuanbofangYinbiao.value = da
	}
	
	onMounted(() => {
		statusAudio.autoplay = false
		statusAudio.onEnded(() => {
			statusPopup.value.close()
		})
		uni.$on('xunhuanYinbiaoBofang',updateYinbiaoSataus)
	})
	onUnmounted(() => {
		statusAudio.destroy();
		uni.$on('xunhuanYinbiaoBofang',updateYinbiaoSataus)
	})
</script>

<style lang="scss" scoped>
</style>