index.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. <template>
  2. <view class="container">
  3. <!-- 顶部标题和积分区 -->
  4. <view class="header">
  5. <text class="title">星球造物</text>
  6. <view class="currency-area">
  7. <view class="coin-box">
  8. <image src="/static/icon/coin_m.png" mode="aspectFit"></image>
  9. <text>{{myinfo.num_gmm}}</text>
  10. </view>
  11. <view class="gold-box">
  12. <image src="/static/icon/coin_cd.png" mode="aspectFit"></image>
  13. <text>{{myinfo.num_gmd}}</text>
  14. </view>
  15. </view>
  16. </view>
  17. <!-- 功能卡片区域 -->
  18. <view class="card-grid">
  19. <!-- AI创角卡片 -->
  20. <view class="card card-large blue" @click="handleCardClick('character')">
  21. <view class="card-content">
  22. <view class="text-area">
  23. <text class="card-title">AI创角</text>
  24. <text class="card-desc">生成独一无二的星球成员</text>
  25. </view>
  26. <image src="/static/icon/star.png" class="star-icon star-1" mode="aspectFit"></image>
  27. <image src="/static/icon/star.png" class="star-icon star-2" mode="aspectFit"></image>
  28. <image src="/static/make/character.png" class="card-image" mode="aspectFit"></image>
  29. </view>
  30. </view>
  31. <!-- AI灵感写歌卡片 -->
  32. <view class="card card-medium pink" @click="handleCardClick('music')">
  33. <view class="card-content">
  34. <view class="text-area">
  35. <text class="card-title">AI灵感写歌</text>
  36. <text class="card-desc">快速生成专属原创曲目</text>
  37. </view>
  38. <image src="/static/make/planet.png" class="card-image" mode="aspectFit"></image>
  39. </view>
  40. </view>
  41. <!-- 萌萌智绘魔方卡片 -->
  42. <view class="card card-medium purple" @click="handleCardClick('cube')">
  43. <view class="card-content">
  44. <view class="text-area">
  45. <text class="card-title">萌萌智绘魔方</text>
  46. <text class="card-desc">AI随机生成萌玩原型</text>
  47. </view>
  48. <image src="/static/make/book.png" class="card-image" mode="aspectFit"></image>
  49. </view>
  50. </view>
  51. <!-- AI造物卡片 -->
  52. <view class="card card-small gray" @click="handleCardClick('build')">
  53. <view class="card-content">
  54. <text class="card-title">AI造物</text>
  55. <text class="card-desc">一键生成想要的建筑</text>
  56. </view>
  57. </view>
  58. <!-- 潮能充能站卡片 -->
  59. <view class="card card-small gray" @click="handleCardClick('build')">
  60. <view class="card-content">
  61. <text class="card-title">潮能充能站</text>
  62. <text class="card-desc">一键生成想要的建筑</text>
  63. </view>
  64. </view>
  65. <!-- 星轨预测卡片 -->
  66. <view class="card card-small gray" @click="handleCardClick('build')">
  67. <view class="card-content">
  68. <text class="card-title">星轨预测</text>
  69. <text class="card-desc">AI大数据综合星座为你测算</text>
  70. </view>
  71. </view>
  72. </view>
  73. <!-- 引导教程区域 -->
  74. <view class="tutorial">
  75. <view class="tutorial-block" @click="handleTutorialClick(index)" v-for="(tutorial, index) in 5"
  76. :key="index">
  77. <text class="tutorial-title">引导教程{{ index + 1 }}</text>
  78. <view class="tutorial-content">
  79. <!-- 教程内容将在这里添加 -->
  80. </view>
  81. </view>
  82. </view>
  83. <tabbar-view :tabbars="tabbars" :currentIndex="1" ref="tabbar"></tabbar-view>
  84. </view>
  85. </template>
  86. <script>
  87. import tabbarView from "@/components/tabbar/tabbar.vue";
  88. import tabbar from "@/mixins/tabbar";
  89. export default {
  90. components: {
  91. tabbarView,
  92. },
  93. mixins: [tabbar],
  94. data() {
  95. return {
  96. myinfo: {},
  97. windowHeight: uni.getWindowInfo().windowHeight,
  98. tabCurrent: 0
  99. }
  100. },
  101. onLoad() {},
  102. onShow() {
  103. this.getMyInfo();
  104. },
  105. // 下拉刷新数据
  106. methods: {
  107. getMyInfo() {
  108. uni.request({
  109. url: this.$apiHost + '/My/getnum',
  110. method: 'GET',
  111. header: {
  112. 'content-type': 'application/json',
  113. 'sign': getApp().globalData.headerSign
  114. },
  115. data: {
  116. uuid: getApp().globalData.uuid
  117. },
  118. success: (res) => {
  119. console.log("获取用户信息:", res.data);
  120. this.myinfo = res.data
  121. }
  122. })
  123. },
  124. tabChange(index) {
  125. this.tabCurrent = index;
  126. },
  127. handleCardClick(type) {
  128. console.log('Card clicked:', type);
  129. uni.$emit('check_login', () => {
  130. if (type == 'cube') {
  131. uni.navigateTo({
  132. url: '/pages/makedetail/makeImgDetail'
  133. })
  134. } else if (type == 'music') {
  135. uni.navigateTo({
  136. url: '/pages/makedetail/makeMusicDetail'
  137. })
  138. } else if (type == 'character') {
  139. uni.navigateTo({
  140. url: '/pages/my/myStar'
  141. })
  142. } else {
  143. uni.showToast({
  144. title: '待开放'
  145. })
  146. }
  147. })
  148. },
  149. handleTutorialClick(index) {
  150. console.log('Tutorial clicked:', index + 1);
  151. }
  152. }
  153. }
  154. </script>
  155. <style lang="scss">
  156. @import './index.scss';
  157. </style>