uniProject/pages/game/index.vue

<!-- 游戏页面 -->
<template>
	<view class="ezy-game-page">
		<!-- 返回按钮 -->
		<view class="ezy-nav-bar-icon"></view>
		<!-- 积分 -->
		<view class="ezy-jf-box game-jf-box">
			<icon class="jf-icon"></icon>
			<text class="jf-text" >{{credit}}</text>
		</view>
		<!-- 桌面食物 -->
		<foodVue :shiwuId="shiwuId" class="food-img-box" :class="'food-img'+shiwuId"></foodVue>
		<!-- 大鹅 4阶段 -->
		<gooseVue :growth="growth" :growthType="growthType" :progress="progress"
		class="game-goose-box" :class="'game-goose-box'+ growthType"></gooseVue>
		<!-- 食物选择 -->
		<foodSelectVue :credit="credit" ref="foodSelectRef" :shiwuId="shiwuId" @weishi="onWeiShi"></foodSelectVue>
		<!-- 游戏说明 -->
		<view class="yxsm-btn" @click="showTishi"></view>
		<!-- 游戏说明 -->
		<commonDialogVue ref="dlRef">
			<view>
				<text>这是内容区域</text>
				<button @click="handleClose">关闭</button>
			</view>
		</commonDialogVue>
	</view>
</template>

<script setup>
	import {ref} from "vue";
	import foodVue from "./components/food.vue";
	import gooseVue from "./components/goose.vue";
	import foodSelectVue from "./components/foodSelect.vue";
	import commonDialogVue from "@/components/dialog/commonDialog.vue";
	import { useGame } from "./useGame";
	const {	credit,growth,growthType,progress,shiwuId ,handleWeishi } = useGame();
	
	const foodSelectRef = ref(null);
	const dlRef = ref(null);
	
	function handleClose() {
		dlRef.value.handleClose();
	}
	
	function showTishi() {
		dlRef.value.handleShow();
	}
	
	function onWeiShi(data) {
		handleWeishi(data.id, () => {
			foodSelectRef.value.handleClose();
		})
	}
</script>

<style>
</style>