uniProject/pages/newEnglish/components/mainCard.vue

<template>
	<swiper class="word-view-swiper-box" :indicator-dots="false" :autoplay="false" :circular="false"
		@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.95);">
		<view class="ezy-image-dialog luyin">
		</view>
	</uni-popup>
</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 {
		ref,
		onMounted,
		onUnmounted
	} 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 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)
	}

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

	function goXiangjie() {
		emits('goXiangjie')
	}
	onMounted(() => {
		statusAudio.autoplay = false
		statusAudio.onEnded(() => {
			statusPopup.value.close()
		})
	})
	onUnmounted(() => {
		statusAudio.destroy()
	})
</script>

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