index.vue 3.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. <!-- 游戏页面 -->
  2. <template>
  3. <view class="ezy-game-page">
  4. <!-- 返回按钮 -->
  5. <!-- <view class="ezy-nav-bar-icon" @click="handleBack"></view> -->
  6. <!-- 积分 -->
  7. <view class="ezy-jf-box game-jf-box">
  8. <icon class="jf-icon"></icon>
  9. <text class="jf-text" >{{credit}}</text>
  10. </view>
  11. <!-- 桌面食物 -->
  12. <foodVue :shiwuId="shiwuId" class="food-img-box" :class="'food-img'+shiwuId"></foodVue>
  13. <!-- 大鹅 4阶段 -->
  14. <gooseVue :growth="growth" :growthType="growthType" :progress="progress"
  15. class="game-goose-box" :class="'game-goose-box'+ growthType"></gooseVue>
  16. <!-- 食物选择 -->
  17. <foodSelectVue :credit="credit" ref="foodSelectRef" :shiwuId="shiwuId" @weishi="onWeiShi"></foodSelectVue>
  18. <!-- 游戏说明 -->
  19. <view class="yxsm-btn" @click="showTishi"></view>
  20. <!-- 游戏说明 -->
  21. <commonDialogVue ref="dlRef">
  22. <view class="yxsm-popup-box">
  23. <view class="yxsm-popup-title">陪伴宠物鹅系统详细说明</view>
  24. <view class="yxsm-item-box">
  25. <view v-for="(item, index) in yxsmContent" :key="index">
  26. <view class="item-title">{{item.title}}</view>
  27. <text class="item-content">{{item.content}}</text>
  28. </view>
  29. </view>
  30. <icon @click="handleClose" class="yxsm-close-btn"></icon>
  31. </view>
  32. </commonDialogVue>
  33. <!-- 导航 -->
  34. <CustomTabBar :currentTabNumber="1"></CustomTabBar>
  35. </view>
  36. </template>
  37. <script setup>
  38. import {ref,reactive} from "vue";
  39. import foodVue from "./components/food.vue";
  40. import gooseVue from "./components/goose.vue";
  41. import foodSelectVue from "./components/foodSelect.vue";
  42. import commonDialogVue from "@/components/dialog/commonDialog.vue";
  43. import CustomTabBar from '@/components/custom-tabbar/custom-tabbar.vue';
  44. import { useGame } from "./useGame";
  45. const { credit,growth,growthType,progress,shiwuId ,handleWeishi } = useGame();
  46. const yxsmContent = reactive([{
  47. title: '宠物鹅获取',
  48. content: '学生首次注册并登录 APP 时,系统自动发放一颗宠物鹅蛋,开启养鹅之旅。每个账号有且仅有一次领取鹅蛋的机会,确保公平性,这颗蛋便是学生与宠物鹅相伴成长的起点。',
  49. },{
  50. title: '成长阶段',
  51. content: `1. 破壳期(初始状态):刚获得的鹅蛋代表宠物鹅的初始形态,成长值为 0,静静等待成长契机。
  52. 2. 幼年期:当学生通过学习积累的经验值达到 1000 时,鹅蛋孵化,宠物鹅进入幼年期,模样娇小可爱,开启成长新篇。
  53. 3. 青年期:随着学习推进,经验值累计至 3000,幼鹅成长为青年鹅,体型增大,羽毛渐丰,活力更足。
  54. 4. 成年期:若学生持之以恒学习,使经验值攀升至 7000,青年鹅将进化为成年鹅,外形成熟矫健,成为学生学习路上的暖心陪伴。`,
  55. },{
  56. title: '积分规则',
  57. content: `1. 学习课程积分:APP 提供丰富视频课程,学生首次完整学完一门课程,就能获得 100 积分。系统会记录学习情况,重复学习同一课程不再积分,激励学生探索新内容。
  58. 2. 答题积分:各章节配有单元测试,学生首次答题,每答对一题获 20 积分,答错无积分。重复测试以首次答题结果为准,促使学生认真对待初次测试。
  59. 3. 蛋糕兑换积分:学生可用积分兑换成长值蛋糕,100 积分换 30 成长值蛋糕、300 积分换 100 成长值蛋糕、600 积分换 300 成长值蛋糕,为宠物鹅成长助力。`,
  60. }]);
  61. const foodSelectRef = ref(null);
  62. const dlRef = ref(null);
  63. function handleClose() {
  64. dlRef.value.handleClose();
  65. }
  66. function handleBack() {
  67. uni.navigateBack();
  68. }
  69. function showTishi() {
  70. dlRef.value.handleShow();
  71. }
  72. function onWeiShi(data) {
  73. handleWeishi(data, () => {
  74. foodSelectRef.value.handleClose();
  75. })
  76. }
  77. </script>
  78. <style>
  79. </style>