uniProject/pages/newEnglish/components/audioRightWrong.vue

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

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		ref,
		reactive,
    onUnmounted
	} from "vue"
	import {
		resultAudioPlayer,
		resultImageList
	} from "./useAudioRightWrong.js"

  const popupRef = ref(null)

	const data = reactive({
		result: '',
		image: '',
		showImage: false,
	})

	onLoad(() => {
		pageInit()
	})

  onUnmounted(() =>{
    uni.$off('result-audio-play')
    uni.$off('result-audio-ended')
  })

	function pageInit() {
		uni.$on('result-audio-play', (code) => {
			const {
				codeT
			} = code;
			data.result = codeT;
			data.image = resultImageList[code]
			data.showImage = true;
			popupRef.value.open();
		})
		uni.$on('result-audio-ended', (code,) => {
			const {
				codeT
			} = code;
      data.result = codeT;
			data.image = resultImageList[code];
			data.showImage = false;
			popupRef.value.close();
    })
	}
</script>

<style scoped>

</style>