uniProject/pages/game/index.vue

<!-- 游戏页面 -->
<template>
	<view class="ezy-game-page">
		<!-- 返回按钮 -->
		<view class="ezy-nav-bar-icon" @click="handleBack"></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 class="yxsm-popup-box">
				<view class="yxsm-popup-title">陪伴宠物鹅系统详细说明</view>
				<view class="yxsm-item-box">
					<view v-for="(item, index) in yxsmContent" :key="index">
						<view class="item-title">{{item.title}}</view>
						<text class="item-content">{{item.content}}</text>
					</view>
				</view>
				<icon @click="handleClose" class="yxsm-close-btn"></icon>
			</view>
		</commonDialogVue>
	</view>
</template>

<script setup>
	import {ref,reactive} 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 yxsmContent = reactive([{
			title: '宠物鹅获取',
			content: '学生首次注册并登录 APP 时，系统自动发放一颗宠物鹅蛋，开启养鹅之旅。每个账号有且仅有一次领取鹅蛋的机会，确保公平性，这颗蛋便是学生与宠物鹅相伴成长的起点。',
	},{
			title: '成长阶段',
			content: `1. 破壳期（初始状态）：刚获得的鹅蛋代表宠物鹅的初始形态，成长值为 0，静静等待成长契机。
					2. 幼年期：当学生通过学习积累的经验值达到 1000 时，鹅蛋孵化，宠物鹅进入幼年期，模样娇小可爱，开启成长新篇。
					3. 青年期：随着学习推进，经验值累计至 3000，幼鹅成长为青年鹅，体型增大，羽毛渐丰，活力更足。
					4. 成年期：若学生持之以恒学习，使经验值攀升至 7000，青年鹅将进化为成年鹅，外形成熟矫健，成为学生学习路上的暖心陪伴。`,
	},{
			title: '积分规则',
			content: `1. 学习课程积分：APP 提供丰富视频课程，学生首次完整学完一门课程，就能获得 30 积分。系统会记录学习情况，重复学习同一课程不再积分，激励学生探索新内容。
					2. 答题积分：各章节配有单元测试，学生首次答题，每答对一题获 10 积分，答错无积分。重复测试以首次答题结果为准，促使学生认真对待初次测试。
					3. 蛋糕兑换积分：
						- 学生可用积分兑换成长值蛋糕，100 积分换 30 成长值蛋糕、300 积分换 100 成长值蛋糕、600 积分换 300 成长值蛋糕，为宠物鹅成长助力。
						- 每天限定兑换2次成长值蛋糕。`,
	}]);
	const foodSelectRef = ref(null);
	const dlRef = ref(null);
	
	function handleClose() {
		dlRef.value.handleClose();
	}

  function handleBack() {
    uni.navigateBack();
  }
	
	function showTishi() {
		dlRef.value.handleShow();
	}
	
	function onWeiShi(data) {
		handleWeishi(data.id, () => {
			foodSelectRef.value.handleClose();
		})
	}
</script>

<style>
</style>