MoeNovaClient/pages/make/index.vue

<template>
	<view class="container">

		<!-- 顶部导航栏 -->
		<view class="header-box">
			<text class="title">星球造物</text>
			<view class="currency-area" >
				<view class="coin-box" @click="goPage('/pages/vip/M_purchase')">
					<image src="/static/icon/coin_m.png" mode="aspectFit"></image>
					<text>{{ myinfo.num_gmm | formatNumberToK}}</text> <view class="money-add">+</view>
				</view>
				<view class="gold-box"  @click="goPage('/pages/my/job?type=recharge')">
					<image src="/static/icon/coin_cd.png" mode="aspectFit"></image>
					<text>{{ myinfo.num_gmd | formatNumberToK}}</text> <view class="money-add">+</view>
				</view>
			</view>
		</view>
 
		<!-- 功能卡片区域 -->
		<view class="card-grid">
			<!-- AI创角卡片 -->
			<view class="card card-large character" @click="handleCardClick('character')">
				<view class="card-content">
					<view class="text-area">
						<text class="card-title">AI创角</text>
						<text class="card-desc">生成独一无二的星球成员</text>
					</view>
					<view class="btn-box">立即查看</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 music" @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 cube" @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>

		</view>
		<view class="guide-title"> 引导教程</view>
		<!-- 引导教程区域 -->
		<view class="tutorial">
			<view class="tutorial-block " @click="handleTutorialClick(index)" v-for="(tutorial, index) in 3"
				:key="index">
				<text class="tutorial-btn-box">
					<view class="tutorial-btn">
						<image src="../../static/make/cz_icon_guanfangjiaocheng.png"></image>
						<text>官方教程</text>
					</view>
				</text>
				<text class="tutorial-title"> 萌创星球教程</text>
				<view class="tutorial-content">教你如何创作内容，激发创作灵感</view>
			</view>
		</view>
		<tabbar-view :tabbars="tabbars" :currentIndex="1" ref="tabbar"></tabbar-view>
		<!-- 新手引导组件 -->
		<novice-guidance :step="step"></novice-guidance>
	</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,
			step: {
				name: "make",
				guideList: [
				{
					el: ".currency-area",
					tips: "积分可在这里查看，每日签到可获得积分！",
					next: "知道了", 
				},
				{
					el: ".character",
					tips: "创建星灵,入驻星球",
					next: "知道了",
					tipesStyle: "left: 40px;"
				},
				{
					el: ".music",
					tips: "输入灵感,生成歌曲",
					next: "知道了",
				},
				{
					el: ".cube",
					tips: "输入关键词,生成萌玩",
					next: "完成",
				}]
			}
		}
	},
	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);
			uni.$emit('check_login', () => {
				if (type == 'cube') {
					uni.navigateTo({
						url: '/pages/makedetail/makeImgDetail'
					})
				} else if (type == 'music') {
					uni.navigateTo({
						url: '/pages/makedetail/makeMusicDetail'
					})
				} else if (type == 'character') {
					uni.navigateTo({
						url: '/pages/my/myStar'
					})
				} else {
					uni.showToast({
						title: '待开放'
					})
				}
			})
		},
		handleTutorialClick(index) {
			console.log('Tutorial clicked:', index + 1);
		},
		goPage(page) {
			uni.navigateTo({
				url: page,
			});
		},
	}
}
</script>

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