MoeNovaClient/pages/make/index.vue

<template>
	<view class="container">
		<!-- 顶部标题和积分区 -->
		<view class="header">
			<text class="title">星球造物</text>
			<view class="currency-area">
				<view class="coin-box">
					<image src="/static/icon/coin_m.png" mode="aspectFit"></image>
					<text>{{myinfo.num_gmm}}</text>
				</view>
				<view class="gold-box">
					<image src="/static/icon/coin_cd.png" mode="aspectFit"></image>
					<text>{{myinfo.num_gmd}}</text>
				</view>
			</view>
		</view>

		<!-- 功能卡片区域 -->
		<view class="card-grid">
			<!-- AI创角卡片 -->
			<view class="card card-large blue" @click="handleCardClick('character')">
				<view class="card-content">
					<view class="text-area">
						<text class="card-title">AI创角</text>
						<text class="card-desc">生成独一无二的星球成员</text>
					</view>
					<image src="/static/icon/star.png" class="star-icon star-1" mode="aspectFit"></image>
					<image src="/static/icon/star.png" class="star-icon star-2" mode="aspectFit"></image>
					<image src="/static/make/character.png" class="card-image" mode="aspectFit"></image>
				</view>
			</view>

			<!-- AI灵感写歌卡片 -->
			<view class="card card-medium pink" @click="handleCardClick('music')">
				<view class="card-content">
					<view class="text-area">
						<text class="card-title">AI灵感写歌</text>
						<text class="card-desc">快速生成专属原创曲目</text>
					</view>
					<image src="/static/make/planet.png" class="card-image" mode="aspectFit"></image>
				</view>
			</view>

			<!-- 萌萌智绘魔方卡片 -->
			<view class="card card-medium purple" @click="handleCardClick('cube')">
				<view class="card-content">
					<view class="text-area">
						<text class="card-title">萌萌智绘魔方</text>
						<text class="card-desc">AI随机生成萌玩原型</text>
					</view>
					<image src="/static/make/book.png" class="card-image" mode="aspectFit"></image>
				</view>
			</view>

			<!-- AI造物卡片 -->
			<view class="card card-small gray" @click="handleCardClick('build')">
				<view class="card-content">
					<text class="card-title">AI造物</text>
					<text class="card-desc">一键生成想要的建筑</text>
				</view>
			</view>

			<!-- 潮能充能站卡片 -->
			<view class="card card-small gray" @click="handleCardClick('build')">
				<view class="card-content">
					<text class="card-title">潮能充能站</text>
					<text class="card-desc">一键生成想要的建筑</text>
				</view>
			</view>

			<!-- 星轨预测卡片 -->
			<view class="card card-small gray" @click="handleCardClick('build')">
				<view class="card-content">
					<text class="card-title">星轨预测</text>
					<text class="card-desc">AI大数据综合星座为你测算</text>
				</view>
			</view>
		</view>

		<!-- 引导教程区域 -->
		<view class="tutorial">
			<view class="tutorial-block" @click="handleTutorialClick(index)" v-for="(tutorial, index) in 5"
				:key="index">
				<text class="tutorial-title">引导教程{{ index + 1 }}</text>
				<view class="tutorial-content">
					<!-- 教程内容将在这里添加 -->
				</view>
			</view>
		</view>
		<tabbar-view :tabbars="tabbars" :currentIndex="1" ref="tabbar"></tabbar-view>
	</view>
</template>

<script>
	import tabbarView from "@/components/tabbar/tabbar.vue";
	import tabbar from "@/mixins/tabbar";
	export default {
		components: {
			tabbarView,
		},
		mixins: [tabbar],
		data() {
			return {
				myinfo: {},
				windowHeight: uni.getWindowInfo().windowHeight,
				tabCurrent: 0
			}
		},
		onLoad() {},
		onShow() {
			this.getMyInfo();
		},

		// 下拉刷新数据
		methods: {
			getMyInfo() {
				uni.request({
					url: this.$apiHost + '/My/getnum',
					method: 'GET',
					header: {
						'content-type': 'application/json',
						'sign': getApp().globalData.headerSign
					},
					data: {
						uuid: getApp().globalData.uuid
					},
					success: (res) => {
						console.log("获取用户信息：", res.data);
						this.myinfo = res.data
					}
				})

			},
			tabChange(index) {
				this.tabCurrent = index;
			},
			handleCardClick(type) {
				console.log('Card clicked:', type);
				if (type == 'cube') {
					uni.navigateTo({
						url: '/pages/makedetail/makeImgDetail'
					})
				} else if (type == 'music') {
					uni.navigateTo({
						url: '/pages/makedetail/makeMusicDetail'
					})
				} else {
					uni.showToast({
						title: '待开放'
					})
				}
			},
			handleTutorialClick(index) {
				console.log('Tutorial clicked:', index + 1);
			}
		}
	}
</script>

<style lang="scss">
	@import './index.scss';
</style>