uniProject/pages/game/components/goose.vue

<template>
	<view>
		<up-line-progress v-if="growthType!==3" :percentage="progress" :showText="false" activeColor="#54e1fe"
			class="game-progress-box"></up-line-progress>
		<text v-if="growthType!==3" class="game-progress-text">成长值：{{progress}}%</text>
		<image :src="imgUrl" class="goose-img-box" @click="handleTouch"></image>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		watch,
		toRefs
	} from "vue";
	import upLineProgress from "uview-plus/components/u-line-progress/u-line-progress.vue";
	import {
		useAudio,
		useHuDong
	} from "./useAudio.js"
	const props = defineProps({
		growthType: {
			type: [String, Number]
		},
		progress: {
			type: [String, Number],
			default: 0
		}
	})
	const {growthType} = toRefs(props);
	const Emits = defineEmits(['onPlay','onEnd'])
	
	

	const {
		init,
		doTouch,
		imgUrl
	} = useHuDong(props);
	const {
		innerAudioContext,
		handlePlay
	} = useAudio(growthType);

	init();
	
	watch(growthType, () => {
		init();
	})

	function handleTouch() {
		if (!innerAudioContext.value.paused) {
			return;
		}
		doTouch(handlePlay);
	}

</script>

<style>
</style>